diff --git a/proiect-nutritie-java/src/main/webapp/index.html b/proiect-nutritie-java/src/main/webapp/index.html index 81f6072..9b182c3 100644 --- a/proiect-nutritie-java/src/main/webapp/index.html +++ b/proiect-nutritie-java/src/main/webapp/index.html @@ -2,8 +2,8 @@ - - NutriAI Elite v18.0 + + NutriAI Elite v19.0 @@ -17,113 +17,112 @@ body.theme-midnight { --bg: #1e1b4b; --sidebar: #312e81; --primary: #818cf8; } body.theme-titanium { --bg: #111827; --sidebar: #1f2937; --primary: #94a3b8; --card: #374151; --accent: #f8fafc; } - body { background-color: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; height: 100vh; overflow: hidden; transition: 0.3s; } - .sidebar { background: var(--sidebar); border-right: 1px solid rgba(255,255,255,0.1); height: 100vh; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; } + body { background-color: var(--bg); color: var(--text); font-family: 'Outfit', sans-serif; height: 100dvh; overflow: hidden; transition: 0.3s; } + + /* Mobile Responsive Layout */ + .main-wrapper { display: flex; height: 100dvh; flex-direction: row; } + @media (max-width: 991px) { + .main-wrapper { flex-direction: column; overflow-y: auto; height: auto; } + .sidebar { width: 100% !important; height: auto !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); } + .chat-section { height: 600px !important; } + body { overflow-y: auto; } + } + + .sidebar { width: 350px; background: var(--sidebar); border-right: 1px solid rgba(255,255,255,0.1); padding: 1.5rem; overflow-y: auto; flex-shrink: 0; } + .chat-section { flex-grow: 1; display: flex; flex-direction: column; background: rgba(0,0,0,0.2); position: relative; } .label-pro { color: var(--accent); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 5px; display: block; } - .glass-input { background: #fff !important; color: #000 !important; border: 3px solid var(--primary) !important; border-radius: 12px; font-weight: 800 !important; font-size: 1.1rem; } + .glass-input { background: #fff !important; color: #000 !important; border: 3px solid var(--primary) !important; border-radius: 12px; font-weight: 800 !important; } - .stat-panel { background: linear-gradient(145deg, var(--primary), #1e3a8a); border-radius: 20px; padding: 1.2rem; margin: 10px 0; box-shadow: 0 8px 16px rgba(0,0,0,0.4); } - .water-hub { background: rgba(59, 130, 246, 0.1); border: 2px solid var(--primary); border-radius: 20px; padding: 12px; margin: 10px 0; text-align: center; } + .stat-panel { background: linear-gradient(145deg, var(--primary), #1e3a8a); border-radius: 20px; padding: 1rem; margin: 10px 0; text-align: center; } .macro-hub { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 15px; margin-top: 10px; } - .chat-container { height: calc(100vh - 110px); overflow-y: auto; padding: 2rem; } - .msg { padding: 1.5rem; border-radius: 1.5rem; margin-bottom: 1.2rem; font-size: 1.1rem; max-width: 85%; color: #fff !important; } - .ai { background: var(--card); border-left: 8px solid var(--primary); } - .user { background: var(--primary); margin-left: auto; } + .chat-container { flex-grow: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; } + .msg { padding: 1.2rem; border-radius: 1.2rem; margin-bottom: 1rem; font-size: 1rem; max-width: 90%; color: #fff !important; word-wrap: break-word; } + .ai { background: var(--card); border-left: 6px solid var(--primary); align-self: flex-start; } + .user { background: var(--primary); align-self: flex-end; } - table { width: 100%; border-collapse: collapse; margin: 10px 0; color: #fff; } - th, td { border: 1px solid rgba(255,255,255,0.2); padding: 8px; text-align: left; } - th { background: rgba(255,255,255,0.1); } - - .top-ctrl { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 100; display: flex; gap: 10px; } - .btn-shop { background: #f59e0b; color: #000; font-weight: 800; border: none; border-radius: 15px; padding: 0 20px; height: 55px; } - .btn-reset { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid #ef4444; border-radius: 12px; padding: 10px; font-weight: 700; width: 100%; margin-top: 20px; transition: 0.2s; } - .btn-reset:hover { background: #ef4444; color: #fff; } + .top-ctrl { padding: 10px; display: flex; justify-content: flex-end; gap: 8px; background: rgba(0,0,0,0.3); } + .input-area { padding: 15px; background: var(--sidebar); border-top: 1px solid rgba(255,255,255,0.1); } + + .btn-reset { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid #ef4444; border-radius: 12px; padding: 8px; font-weight: 700; width: 100%; margin-top: 15px; } + + /* Table fixes for mobile */ + .msg table { width: 100%; display: block; overflow-x: auto; } -
-
- - -
- -
- -
-
-