| |
| |
| |
| |
|
|
| |
| :root { |
| --primary: #6366f1; |
| --primary-dark: #4f46e5; |
| --primary-light: #818cf8; |
| --secondary: #10b981; |
| --accent: #f59e0b; |
| --danger: #ef4444; |
|
|
| --bg-dark: #0f172a; |
| --bg-card: #1e293b; |
| --bg-hover: #334155; |
| --bg-light: #f8fafc; |
|
|
| --text-primary: #f8fafc; |
| --text-secondary: #94a3b8; |
| --text-muted: #64748b; |
|
|
| --border: #334155; |
| --border-light: #475569; |
|
|
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); |
|
|
| --radius: 12px; |
| --radius-sm: 8px; |
|
|
| --transition: all 0.2s ease; |
| } |
|
|
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background: linear-gradient(135deg, var(--bg-dark) 0%, #1a1f35 100%); |
| color: var(--text-primary); |
| min-height: 100vh; |
| line-height: 1.5; |
| } |
|
|
| |
| .app { |
| display: flex; |
| flex-direction: column; |
| min-height: 100vh; |
| } |
|
|
| .app-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 1rem 2rem; |
| background: rgba(15, 23, 42, 0.8); |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .logo { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| } |
|
|
| .logo svg { |
| color: var(--primary); |
| } |
|
|
| .logo h1 { |
| font-size: 1.5rem; |
| font-weight: 700; |
| background: linear-gradient(135deg, var(--primary-light), var(--secondary)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .tagline { |
| color: var(--text-secondary); |
| font-size: 0.875rem; |
| } |
|
|
| .app-main { |
| display: flex; |
| flex: 1; |
| padding: 1.5rem; |
| gap: 1.5rem; |
| max-width: 1600px; |
| margin: 0 auto; |
| width: 100%; |
| } |
|
|
| .left-panel { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| gap: 1.5rem; |
| max-width: 800px; |
| } |
|
|
| .right-panel { |
| width: 400px; |
| flex-shrink: 0; |
| } |
|
|
| .app-footer { |
| padding: 1rem 2rem; |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| border-top: 1px solid var(--border); |
| } |
|
|
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| padding: 0.75rem 1.25rem; |
| border-radius: var(--radius-sm); |
| font-weight: 600; |
| font-size: 0.875rem; |
| cursor: pointer; |
| border: none; |
| transition: var(--transition); |
| } |
|
|
| .btn:disabled { |
| opacity: 0.5; |
| cursor: not-allowed; |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); |
| color: white; |
| } |
|
|
| .btn-primary:hover:not(:disabled) { |
| transform: translateY(-1px); |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| .btn-secondary { |
| background: var(--bg-card); |
| color: var(--text-primary); |
| border: 1px solid var(--border); |
| } |
|
|
| .btn-secondary:hover:not(:disabled) { |
| background: var(--bg-hover); |
| } |
|
|
| .btn-sm { |
| padding: 0.5rem 0.75rem; |
| font-size: 0.75rem; |
| } |
|
|
| .btn-export { |
| background: var(--secondary); |
| color: white; |
| } |
|
|
| .btn-export:hover:not(:disabled) { |
| background: #059669; |
| } |
|
|
| .btn-generate { |
| width: 100%; |
| padding: 1rem; |
| font-size: 1rem; |
| } |
|
|
| .btn-export-all { |
| width: 100%; |
| } |
|
|
| .btn-send { |
| padding: 0.75rem; |
| background: var(--primary); |
| color: white; |
| border-radius: var(--radius-sm); |
| } |
|
|
| .spin { |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| from { |
| transform: rotate(0deg); |
| } |
|
|
| to { |
| transform: rotate(360deg); |
| } |
| } |
|
|
| |
| .upload-panel { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| padding: 1.5rem; |
| border: 1px solid var(--border); |
| } |
|
|
| .upload-header { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .upload-header svg { |
| color: var(--primary); |
| } |
|
|
| .upload-header h3 { |
| font-size: 1rem; |
| font-weight: 600; |
| } |
|
|
| .upload-buttons { |
| display: flex; |
| gap: 0.75rem; |
| } |
|
|
| .upload-status { |
| margin-top: 1rem; |
| padding: 0.5rem 0.75rem; |
| background: rgba(16, 185, 129, 0.1); |
| border-radius: var(--radius-sm); |
| color: var(--secondary); |
| font-size: 0.875rem; |
| } |
|
|
| |
| .generate-section { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| padding: 1rem; |
| border: 1px solid var(--border); |
| } |
|
|
| |
| .map-section { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| padding: 1rem; |
| border: 1px solid var(--border); |
| } |
|
|
| .map-wrapper { |
| position: relative; |
| } |
|
|
| .map-controls { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| display: flex; |
| gap: 4px; |
| z-index: 10; |
| background: white; |
| padding: 4px; |
| border-radius: var(--radius-sm); |
| box-shadow: var(--shadow); |
| } |
|
|
| .map-controls button { |
| width: 32px; |
| height: 32px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: #f8fafc; |
| border: 1px solid #e2e8f0; |
| border-radius: 6px; |
| cursor: pointer; |
| color: #475569; |
| transition: var(--transition); |
| } |
|
|
| .map-controls button:hover { |
| background: #e2e8f0; |
| color: #1e293b; |
| } |
|
|
| .map-controls .zoom-level { |
| font-size: 11px; |
| color: #64748b; |
| padding: 0 8px; |
| display: flex; |
| align-items: center; |
| } |
|
|
| .map-hint { |
| position: absolute; |
| bottom: 8px; |
| left: 50%; |
| transform: translateX(-50%); |
| font-size: 11px; |
| color: #94a3b8; |
| background: rgba(255, 255, 255, 0.9); |
| padding: 4px 12px; |
| border-radius: 20px; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .map-container { |
| background: white; |
| border-radius: var(--radius-sm); |
| overflow: hidden; |
| cursor: grab; |
| } |
|
|
| .map-container:active { |
| cursor: grabbing; |
| } |
|
|
| |
| .options-panel { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| padding: 1.5rem; |
| border: 1px solid var(--border); |
| } |
|
|
| .options-panel h3 { |
| font-size: 1rem; |
| font-weight: 600; |
| margin-bottom: 1rem; |
| } |
|
|
| .options-panel.empty { |
| text-align: center; |
| color: var(--text-muted); |
| padding: 2rem; |
| } |
|
|
| .options-grid { |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
|
|
| .option-card { |
| background: var(--bg-dark); |
| border-radius: var(--radius-sm); |
| padding: 1rem; |
| border: 2px solid var(--border); |
| cursor: pointer; |
| transition: var(--transition); |
| } |
|
|
| .option-card:hover { |
| border-color: var(--border-light); |
| background: var(--bg-hover); |
| } |
|
|
| .option-card.selected { |
| border-color: var(--primary); |
| background: rgba(99, 102, 241, 0.1); |
| } |
|
|
| .option-header { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| margin-bottom: 0.5rem; |
| } |
|
|
| .option-icon { |
| font-size: 1.5rem; |
| } |
|
|
| .option-header h4 { |
| flex: 1; |
| font-size: 1rem; |
| font-weight: 600; |
| } |
|
|
| .selected-check { |
| color: var(--primary); |
| } |
|
|
| .option-description { |
| color: var(--text-secondary); |
| font-size: 0.75rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .option-metrics { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 0.75rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .metric { |
| text-align: center; |
| } |
|
|
| .metric-label { |
| display: block; |
| font-size: 0.625rem; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| margin-bottom: 0.25rem; |
| } |
|
|
| .metric-value { |
| font-size: 0.875rem; |
| font-weight: 600; |
| color: var(--text-primary); |
| } |
|
|
| .metric-value.fitness { |
| color: var(--secondary); |
| } |
|
|
| .option-footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .compliance { |
| font-size: 0.75rem; |
| padding: 0.25rem 0.5rem; |
| border-radius: 4px; |
| } |
|
|
| .compliance.pass { |
| background: rgba(16, 185, 129, 0.1); |
| color: var(--secondary); |
| } |
|
|
| .compliance.fail { |
| background: rgba(239, 68, 68, 0.1); |
| color: var(--danger); |
| } |
|
|
| |
| .export-panel { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| padding: 1rem; |
| border: 1px solid var(--border); |
| } |
|
|
| |
| .chat-interface { |
| background: var(--bg-card); |
| border-radius: var(--radius); |
| border: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| height: calc(100vh - 180px); |
| max-height: 700px; |
| } |
|
|
| .chat-header { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| padding: 1rem 1.25rem; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .chat-header svg { |
| color: var(--primary); |
| } |
|
|
| .chat-header .sparkle { |
| color: var(--accent); |
| } |
|
|
| .chat-header h3 { |
| flex: 1; |
| font-size: 1rem; |
| font-weight: 600; |
| } |
|
|
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 1rem; |
| } |
|
|
| .chat-welcome { |
| text-align: center; |
| padding: 2rem 1rem; |
| color: var(--text-secondary); |
| } |
|
|
| .welcome-icon { |
| color: var(--primary); |
| margin-bottom: 1rem; |
| } |
|
|
| .chat-welcome h4 { |
| font-size: 1.125rem; |
| color: var(--text-primary); |
| margin-bottom: 0.5rem; |
| } |
|
|
| .chat-welcome p { |
| font-size: 0.875rem; |
| margin-bottom: 1.5rem; |
| } |
|
|
| .suggested-questions { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
|
|
| .suggested-btn { |
| background: var(--bg-dark); |
| border: 1px solid var(--border); |
| color: var(--text-secondary); |
| padding: 0.75rem 1rem; |
| border-radius: var(--radius-sm); |
| font-size: 0.75rem; |
| cursor: pointer; |
| text-align: left; |
| transition: var(--transition); |
| } |
|
|
| .suggested-btn:hover:not(:disabled) { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| border-color: var(--primary); |
| } |
|
|
| .message { |
| display: flex; |
| gap: 0.75rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .message-icon { |
| width: 28px; |
| height: 28px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| } |
|
|
| .message.user .message-icon { |
| background: var(--primary); |
| color: white; |
| } |
|
|
| .message.assistant .message-icon { |
| background: var(--secondary); |
| color: white; |
| } |
|
|
| .message-content { |
| flex: 1; |
| background: var(--bg-dark); |
| padding: 0.75rem 1rem; |
| border-radius: var(--radius-sm); |
| font-size: 0.875rem; |
| } |
|
|
| .message.user .message-content { |
| background: rgba(99, 102, 241, 0.1); |
| } |
|
|
| .message-text { |
| white-space: pre-wrap; |
| line-height: 1.6; |
| } |
|
|
| .model-badge { |
| margin-top: 0.5rem; |
| font-size: 0.625rem; |
| color: var(--text-muted); |
| } |
|
|
| .model-badge.gemini { |
| color: var(--secondary); |
| } |
|
|
| .typing-indicator { |
| display: flex; |
| gap: 4px; |
| } |
|
|
| .typing-indicator span { |
| width: 6px; |
| height: 6px; |
| background: var(--text-muted); |
| border-radius: 50%; |
| animation: bounce 1.4s infinite ease-in-out; |
| } |
|
|
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
|
|
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
|
|
| @keyframes bounce { |
|
|
| 0%, |
| 80%, |
| 100% { |
| transform: translateY(0); |
| } |
|
|
| 40% { |
| transform: translateY(-6px); |
| } |
| } |
|
|
| .chat-input-form { |
| display: flex; |
| gap: 0.75rem; |
| padding: 1rem; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .chat-input { |
| flex: 1; |
| background: var(--bg-dark); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| padding: 0.75rem 1rem; |
| color: var(--text-primary); |
| font-size: 0.875rem; |
| } |
|
|
| .chat-input:focus { |
| outline: none; |
| border-color: var(--primary); |
| } |
|
|
| .chat-input:disabled { |
| opacity: 0.5; |
| } |
|
|
| |
| .error-banner { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| padding: 0.75rem 1.5rem; |
| background: rgba(239, 68, 68, 0.1); |
| border-bottom: 1px solid var(--danger); |
| color: var(--danger); |
| } |
|
|
| .error-banner svg { |
| flex-shrink: 0; |
| } |
|
|
| .error-banner span { |
| flex: 1; |
| font-size: 0.875rem; |
| } |
|
|
| .error-banner button { |
| background: none; |
| border: none; |
| color: var(--danger); |
| font-size: 1.25rem; |
| cursor: pointer; |
| padding: 0 0.5rem; |
| } |
|
|
| |
| @media (max-width: 1200px) { |
| .app-main { |
| flex-direction: column; |
| } |
|
|
| .left-panel { |
| max-width: 100%; |
| } |
|
|
| .right-panel { |
| width: 100%; |
| } |
|
|
| .chat-interface { |
| height: 400px; |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .app-header { |
| flex-direction: column; |
| gap: 0.5rem; |
| text-align: center; |
| } |
|
|
| .upload-buttons { |
| flex-direction: column; |
| } |
|
|
| .option-metrics { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
