Latest Style changes including profile and past report (#41)

- Latest Style changes including profile and past report (be1a0389f144d816ade5e5eaf8c78c467727434e)


Co-authored-by: Aanya Choudhary <[email protected]>

web/style.css

@@ -1,334 +1,587 @@
 :root {
-    --tropical-indigo: rgb(120, 187, 242);
-    --latte-cream: #ffffff;
-    --wisteria: #c5dcff;
-    --navbar-height: 0px; /* dynamic padding */
-  }
-  
-  body {
-    padding-top: var(--navbar-height);
-    transition: padding-top 0.2s ease;
-    font-family: "Rubik", sans-serif;
-  }
-  
-  /* ---------- NAVBAR area---------- */
-  nav {
-    backdrop-filter: blur(12px);
-    background-color: rgba(255, 255, 255, 0.2);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  }
-  
-  /* Logo */
-  nav .logo {
-    color: #333;
-    font-weight: bold;
-    transition: color 0.3s ease;
-  }
-  nav .logo:hover {
-    color: var(--tropical-indigo);
-  }
-  
-  /* Desktop links and buttons */
-  nav a.nav-link,
-  nav button.nav-link {
-    color: #333;
-    transition: color 0.3s ease;
-  }
-  
-  /* Hamburger */
-  #hamburger {
-    color: #333;
-    transition: color 0.3s ease;
-  }
-  #hamburger:hover {
-    color: var(--tropical-indigo);
-  }
-  
-  /* Mobile Menu */
-  #mobile-menu {
-    backdrop-filter: blur(12px);
-    background-color: rgba(255, 255, 255, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 1rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  }
-  #mobile-menu a,
-  #mobile-menu button {
-    
-    color: #333;
-    transition: color 0.3s ease;
-  }
- 
-  
-  /* ---------- BUTTONS ---------- */
-  #editProfileBtn,
-  #saveProfileBtn,
-  #cancelProfileBtn,
-  #addEntryBtn,
-  #resetChartBtn,
-  #analyzerBtn {
-    background-color: var(--tropical-indigo);
-    color: white;
-    transition: background-color 0.3s ease;
-  }
-  #editProfileBtn:hover,
-  #saveProfileBtn:hover,
-  #addEntryBtn:hover,
-  #analyzerBtn:hover {
-    background-color: #5ba5dd;
-  }
-  #resetChartBtn:hover {
-    background-color: #e63946;
-  }
-  
-  /* ---------- INPUTS ---------- */
-  input,
-  textarea {
-    border: 1px solid var(--wisteria);
-    background-color: #fafbfc;
-  }
-  input:focus,
-  textarea:focus {
-    outline: none;
-    border-color: var(--tropical-indigo);
-    box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3);
-  }
-  
-  /* HEADINGS */
-  h1,
-  h2,
-  h3,
-  h4 {
-    color: var(--tropical-indigo);
-  }
+  --tropical-indigo: rgb(120, 187, 242);
+  --latte-cream: #ffffff;
+  --wisteria: #c5dcff;
+  --navbar-height: 0px; /* dynamic padding */
+}
+
+body {
+  padding-top: var(--navbar-height);
+  transition: padding-top 0.2s ease;
+  font-family: "Rubik", sans-serif;
+}
+
+/* ---------- NAVBAR area---------- */
+nav {
+  backdrop-filter: blur(12px);
+  background-color: rgba(255, 255, 255, 0.2);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+
+/* Logo */
+nav .logo {
+  color: #333;
+  font-weight: bold;
+  transition: color 0.3s ease;
+}
+nav .logo:hover {
+  color: var(--tropical-indigo);
+}
+
+/* Desktop links and buttons */
+nav a.nav-link,
+nav button.nav-link {
+  color: #333;
+  transition: color 0.3s ease;
+}
+
+/* Hamburger */
+#hamburger {
+  color: #333;
+  transition: color 0.3s ease;
+}
+#hamburger:hover {
+  color: var(--tropical-indigo);
+}
+
+/* Mobile Menu */
+#mobile-menu {
+  backdrop-filter: blur(12px);
+  background-color: rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+#mobile-menu a,
+#mobile-menu button {
   
-  /* Chart Card */
-  #chartSection > div {
-    background-color: var(--latte-cream);
-    border: 1px solid var(--wisteria);
-    border-radius: 1rem;
-    padding: 1.5rem;
-  }
-  .rec-card {
-    background-color: var(--latte-cream);
-    border: 1px solid var(--wisteria);
-    border-radius: 1rem;
-    padding: 1.25rem;
-    margin-bottom: 1.5rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    transition: all 0.3s ease;
-  }
-  .rec-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  }
-  .rec-title {
-    font-size: 1.125rem;
-    font-weight: 700;
-    color: var(--tropical-indigo);
-    margin-bottom: 0.5rem;
-  }
-  .rec-badge {
-    font-size: 0.75rem;
-    font-weight: 600;
-    padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
-  }
-  .badge-high {
-    background-color: #fee2e2;
-    color: #b91c1c;
-  }
-  .badge-medium {
-    background-color: #fef3c7;
-    color: #92400e;
-  }
-  .badge-low {
-    background-color: #d1fae5;
-    color: #065f46;
-  }
-  .rec-content {
-    list-style-type: disc;
-    margin-left: 1.25rem;
-    font-size: 0.875rem;
-    color: #374151;
-  }
-  .rec-link {
-    color: var(--tropical-indigo);
-    text-decoration: underline;
-  }
-  .rec-link:hover {
-    color: #4b7bbd;
-  }
-  .btn-primary {
-    background-color: var(--tropical-indigo);
-    color: white;
-    transition: background-color 0.3s ease;
-  }
-  .btn-primary:hover {
-    background-color: #5ba5dd;
-  }
-  input,
-  textarea {
-    border: 1px solid var(--wisteria);
-    background-color: #fafbfc;
-  }
-  input:focus,
-  textarea:focus {
-    outline: none;
-    border-color: var(--tropical-indigo);
-    box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3);
-  }
-  h2,
-  h3 {
-    color: var(--tropical-indigo);
-  }
-  #chat-output {
-    background-color: #f7f9fc;
-    border: 1px solid var(--wisteria);
-  }
-  .fade-in {
-    opacity: 0;
-    transform: translateY(30px);
-    transition: all 0.8s ease-out;
-  }
-  .fade-in.show {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .glass-card {
-    background: rgba(162, 160, 160, 0.075);
-    backdrop-filter: blur(12px);
-    border-radius: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    padding: 2rem;
-    text-align: center;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-  }
-  .glass-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
-  }
-
-  .nav-link {
-    position: relative;
-    padding-bottom: 4px;
-    transition: color 0.3s;
-  }
-  .nav-link::after {
-    content: "";
-    position: absolute;
-    width: 0%;
-    height: 2px;
-    bottom: 0;
-    left: 0;
-    background-color: black;
-    transition: width 0.3s ease;
-  }
-  .nav-link:hover::after {
-    width: 100%;
-  }
-
-  .parallax {
-    background-attachment: fixed;
-    background-size: cover;
-    background-position: center;
-    position: relative;
-  }
-
-  /* Typing effect styles */
-  #typed-heading,
-  #typed-paragraph {
-    overflow: hidden;
-    white-space: nowrap;
-    border-right: 2px solid var(--tropical-indigo);
-  }
-  .rec-card {
-    background-color: var(--latte-cream);
-    border: 1px solid var(--wisteria);
-    border-radius: 1rem;
-    padding: 1.25rem;
-    margin-bottom: 1.5rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    transition: all 0.3s ease;
-  }
-  .rec-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  }
-
-  .rec-title {
-    font-size: 1.125rem;
-    font-weight: 700;
-    color: var(--tropical-indigo);
-    margin-bottom: 0.5rem;
-  }
-
-  .rec-badge {
-    font-size: 0.75rem;
-    font-weight: 600;
-    padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
-  }
-  .badge-high {
-    background-color: #fee2e2;
-    color: #b91c1c;
-  }
-  .badge-medium {
-    background-color: #fef3c7;
-    color: #92400e;
-  }
-  .badge-low {
-    background-color: #d1fae5;
-    color: #065f46;
-  }
-
-  .rec-content {
-    list-style-type: disc;
-    margin-left: 1.25rem;
-    font-size: 0.875rem;
-    color: #374151;
-  }
-
-  .rec-link {
-    color: var(--tropical-indigo);
-    text-decoration: underline;
-  }
-  .rec-link:hover {
-    color: #4b7bbd;
-  }
-
-  .btn-primary {
-    background-color: var(--tropical-indigo);
-    color: white;
-    transition: background-color 0.3s ease;
-  }
-  .btn-primary:hover {
-    background-color: #5ba5dd;
-  }
-
-  input,
-  textarea {
-    border: 1px solid var(--wisteria);
-    background-color: #fafbfc;
-  }
-  input:focus,
-  textarea:focus {
-    outline: none;
-    border-color: var(--tropical-indigo);
-    box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3);
-  }
-
-  h2,
-  h3 {
-    color: var(--tropical-indigo);
-  }
-
-  #chat-output {
-    background-color: #f7f9fc;
-    border: 1px solid var(--wisteria);
-  }
-  .hidden-by-default {
-    display: none;
-  }
+  color: #333;
+  transition: color 0.3s ease;
+}
+
+
+/* ---------- BUTTONS ---------- */
+#editProfileBtn,
+#saveProfileBtn,
+#cancelProfileBtn,
+#addEntryBtn,
+#resetChartBtn,
+#analyzerBtn {
+  background-color: var(--tropical-indigo);
+  color: white;
+  transition: background-color 0.3s ease;
+}
+#editProfileBtn:hover,
+#saveProfileBtn:hover,
+#addEntryBtn:hover,
+#analyzerBtn:hover {
+  background-color: #5ba5dd;
+}
+#resetChartBtn:hover {
+  background-color: #e63946;
+}
+
+/* ---------- INPUTS ---------- */
+input,
+textarea {
+  border: 1px solid var(--wisteria);
+  background-color: #fafbfc;
+}
+input:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--tropical-indigo);
+  box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3);
+}
+
+/* HEADINGS */
+h1,
+h2,
+h3,
+h4 {
+  color: var(--tropical-indigo);
+}
+
+/* Chart Card */
+#chartSection > div {
+  background-color: var(--latte-cream);
+  border: 1px solid var(--wisteria);
+  border-radius: 1rem;
+  padding: 1.5rem;
+}
+.rec-card {
+  background-color: var(--latte-cream);
+  border: 1px solid var(--wisteria);
+  border-radius: 1rem;
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+.rec-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+.rec-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--tropical-indigo);
+  margin-bottom: 0.5rem;
+}
+.rec-badge {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+}
+.badge-high {
+  background-color: #fee2e2;
+  color: #b91c1c;
+}
+.badge-medium {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+.badge-low {
+  background-color: #d1fae5;
+  color: #065f46;
+}
+.rec-content {
+  list-style-type: disc;
+  margin-left: 1.25rem;
+  font-size: 0.875rem;
+  color: #374151;
+}
+.rec-link {
+  color: var(--tropical-indigo);
+  text-decoration: underline;
+}
+.rec-link:hover {
+  color: #4b7bbd;
+}
+.btn-primary {
+  background-color: var(--tropical-indigo);
+  color: white;
+  transition: background-color 0.3s ease;
+}
+.btn-primary:hover {
+  background-color: #5ba5dd;
+}
+input,
+textarea {
+  border: 1px solid var(--wisteria);
+  background-color: #fafbfc;
+}
+input:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--tropical-indigo);
+  box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3);
+}
+h2,
+h3 {
+  color: var(--tropical-indigo);
+}
+#chat-output {
+  background-color: #f7f9fc;
+  border: 1px solid var(--wisteria);
+}
+.fade-in {
+  opacity: 0;
+  transform: translateY(30px);
+  transition: all 0.8s ease-out;
+}
+.fade-in.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.glass-card {
+  background: rgba(162, 160, 160, 0.075);
+  backdrop-filter: blur(12px);
+  border-radius: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 2rem;
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.glass-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
+}
+
+.nav-link {
+  position: relative;
+  padding-bottom: 4px;
+  transition: color 0.3s;
+}
+.nav-link::after {
+  content: "";
+  position: absolute;
+  width: 0%;
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: black;
+  transition: width 0.3s ease;
+}
+.nav-link:hover::after {
+  width: 100%;
+}
+
+.parallax {
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+/* Typing effect styles */
+#typed-heading,
+#typed-paragraph {
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 2px solid var(--tropical-indigo);
+}
+.rec-card {
+  background-color: var(--latte-cream);
+  border: 1px solid var(--wisteria);
+  border-radius: 1rem;
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+}
+.rec-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.rec-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--tropical-indigo);
+  margin-bottom: 0.5rem;
+}
+
+.rec-badge {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+}
+.badge-high {
+  background-color: #fee2e2;
+  color: #b91c1c;
+}
+.badge-medium {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+.badge-low {
+  background-color: #d1fae5;
+  color: #065f46;
+}
+
+.rec-content {
+  list-style-type: disc;
+  margin-left: 1.25rem;
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+.rec-link {
+  color: var(--tropical-indigo);
+  text-decoration: underline;
+}
+.rec-link:hover {
+  color: #4b7bbd;
+}
+
+.btn-primary {
+  background-color: var(--tropical-indigo);
+  color: white;
+  transition: background-color 0.3s ease;
+}
+.btn-primary:hover {
+  background-color: #5ba5dd;
+}
+
+input,
+textarea {
+  border: 1px solid var(--wisteria);
+  background-color: #fafbfc;
+}
+input:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--tropical-indigo);
+  box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3);
+}
+
+h2,
+h3 {
+  color: var(--tropical-indigo);
+}
+
+#chat-output {
+  background-color: #f7f9fc;
+  border: 1px solid var(--wisteria);
+}
+.hidden-by-default {
+  display: none;
+}
+/* ---------- PROFILE CARD ---------- */
+.profile-card {
+background-color: var(--latte-cream);
+border: 1px solid var(--wisteria);
+border-radius: 1rem;
+padding: 1.5rem;
+display: flex;
+flex-direction: column;
+gap: 1.25rem;
+box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.profile-card:hover {
+transform: translateY(-4px);
+box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+}
+
+.profile-card .avatar {
+width: 112px;
+height: 112px;
+border-radius: 9999px;
+background: linear-gradient(135deg, #3b82f6, var(--tropical-indigo));
+position: relative;
+overflow: hidden;
+}
+
+.profile-card .avatar::after {
+content: "";
+position: absolute;
+width: 100%;
+height: 100%;
+background: rgba(255,255,255,0.1);
+border-radius: 9999px;
+animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+0% { transform: scale(0.9); opacity: 0.6; }
+50% { transform: scale(1.1); opacity: 0.3; }
+100% { transform: scale(0.9); opacity: 0.6; }
+}
+
+.profile-card h2 {
+font-size: 1.5rem;
+font-weight: 700;
+color: var(--tropical-indigo);
+}
+
+.profile-card p {
+font-size: 1rem;
+color: #374151;
+}
+
+.profile-card .btn {
+background-color: var(--tropical-indigo);
+color: white;
+padding: 0.5rem 1.25rem;
+border-radius: 9999px;
+font-weight: 500;
+transition: background-color 0.3s ease;
+}
+
+.profile-card .btn:hover {
+background-color: #5ba5dd;
+}
+
+/* ---------- HEALTH INSIGHTS COLLAPSIBLE ---------- */
+#toggleInsights {
+background: linear-gradient(135deg,#6366f1,#3b82f6);
+color: white;
+padding: 1rem 1.25rem;
+border-radius: 1rem;
+font-weight: 600;
+display: flex;
+justify-content: space-between;
+align-items: center;
+transition: opacity 0.3s ease;
+}
+
+#toggleInsights:hover {
+opacity: 0.95;
+}
+
+.collapse-content {
+max-height: 0;
+overflow: hidden;
+transition: max-height 0.5s ease;
+}
+
+.collapse-content.open {
+max-height: 4000px;
+}
+
+.chart-wrap {
+background-color: var(--latte-cream);
+border: 1px solid var(--wisteria);
+border-radius: 1rem;
+padding: 1rem;
+box-shadow: 0 4px 14px rgba(0,0,0,0.05);
+}
+
+/* ---------- SEVERITY SUMMARY CARDS ---------- */
+.severity-card {
+background-color: var(--latte-cream);
+border: 1px solid var(--wisteria);
+border-radius: 1rem;
+padding: 1rem;
+text-align: center;
+box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.severity-card:hover {
+transform: translateY(-3px);
+box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+}
+
+.severity-card .rec-title {
+color: var(--tropical-indigo);
+font-weight: 700;
+font-size: 1.125rem;
+margin-bottom: 0.5rem;
+}
+
+.severity-card .count {
+font-size: 2rem;
+font-weight: 700;
+color: #374151;
+}
+
+/* ---------- FADE-IN EFFECT ---------- */
+.fade-in {
+opacity: 0;
+transform: translateY(30px);
+transition: all 0.8s ease-out;
+}
+.fade-in.show {
+opacity: 1;
+transform: translateY(0);
+}
+.section-heading {
+font-size: 2rem;              /* bigger, prominent */
+font-weight: 800;             /* bold */
+margin-bottom: 1.5rem;        /* spacing from tabs */
+color: #1e40af;               /* nice indigo shade */
+text-align: center;           /* centered */
+letter-spacing: 0.5px;        /* subtle letter spacing */
+background: linear-gradient(90deg, #78bbf2, #22c55e); /* gradient text effect */
+background-clip: text;
+-webkit-background-clip: text;
+-webkit-text-fill-color: transparent;
+}
+:root {
+--green: #22c55e;
+--red: #ef4444;
+}
+.range-card h3 {
+color: #78bbf2;
+}
+.impact-label {
+font-size: 0.85rem;
+font-weight: 500;
+color: #6b7280;
+margin-bottom: 0.25rem;
+}
+.range-bar-container {
+position: relative;
+margin-bottom: 1rem;
+}
+.range-bar {
+position: relative;
+height: 30px;
+border-radius: 12px;
+background: transparent;
+overflow: visible;
+}
+.normal-range {
+position: absolute;
+top: 10px;
+left: 0;
+height: 10px;
+border-radius: 12px;
+background: linear-gradient(to right, #d1fae5, var(--green));
+}
+.overflow-range {
+position: absolute;
+top: 10px;
+height: 10px;
+background: var(--red);
+border-radius: 12px;
+}
+.marker {
+position: absolute;
+top: 0;
+width: 2px;
+height: 30px;
+background: #111827;
+}
+.value-label {
+position: absolute;
+top: -20px;
+font-weight: 700;
+color: #111827;
+font-size: 0.9rem;
+transform: translateX(-50%);
+}
+.min-max-labels {
+display: flex;
+justify-content: space-between;
+margin-top: 4px;
+font-size: 0.8rem;
+font-weight: 500;
+color: #111827;
+}
+.tabs {
+display: flex;
+gap: 1rem;
+margin-bottom: 1rem;
+}
+.tab {
+flex: 1;
+text-align: center;
+padding: 0.75rem;
+cursor: pointer;
+background: #e5e7eb;
+border-radius: 0.75rem;
+display: flex;
+justify-content: center;
+gap: 0.5rem;
+}
+.tab.active {
+background: #78bbf2;
+color: rgb(0, 0, 0);
+}
+.count-badge {
+background: rgba(255, 255, 255, 0.9);
+padding: 0.2rem 0.6rem;
+border-radius: 9999px;
+font-weight: bold;
+}
+.tab-content {
+display: none;
+flex-direction: column;
+gap: 1.5rem;
+}
+.tab-content.active {
+display: flex;
+}
+
+.text-green-700 {
+  color: #4f46e5; /* your new tropical-indigo hover color */
+}