Upload folder using huggingface_hub

static/css/style.css

@@ -0,0 +1,1206 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   VrukshaVed — Ayurvedic Plant Intelligence
+   Design: Forest-earth tones, sacred geometry, Cormorant + Yatra One typography
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Reset & Variables ──────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --ink:        #1a1a0e;
+  --deep-green: #1e4d1a;
+  --mid-green:  #3a7a30;
+  --leaf-green: #5aab40;
+  --lime:       #a8d85c;
+  --cream:      #faf6ee;
+  --parchment:  #f2ead8;
+  --earth:      #8b6b3d;
+  --gold:       #c9953a;
+  --saffron:    #e8a020;
+  --red-tika:   #b83030;
+  --muted:      #6b7a5e;
+  --border:     rgba(90, 171, 64, 0.2);
+  --shadow:     rgba(30, 77, 26, 0.12);
+  --glass:      rgba(255, 255, 255, 0.72);
+  --glass-dark: rgba(30, 40, 20, 0.65);
+
+  --ff-head:  'Yatra One', serif;
+  --ff-body:  'Cormorant Garamond', serif;
+  --ff-ui:    'DM Sans', sans-serif;
+
+  --radius:   16px;
+  --radius-sm: 8px;
+  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: var(--ff-body);
+  background: var(--cream);
+  color: var(--ink);
+  min-height: 100vh;
+  overflow-x: hidden;
+  line-height: 1.7;
+}
+
+/* ── Background Layer ───────────────────────────────────────────────────── */
+.bg-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+  background:
+    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(168, 216, 92, 0.08) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 80% at 90% 80%, rgba(201, 149, 58, 0.06) 0%, transparent 60%),
+    var(--cream);
+}
+
+.mandala-ring {
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid rgba(90, 171, 64, 0.12);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: mandala-spin linear infinite;
+}
+.ring-1 { width: 600px; height: 600px; animation-duration: 80s; border-style: dashed; }
+.ring-2 { width: 1000px; height: 1000px; animation-duration: 140s; animation-direction: reverse; }
+.ring-3 { width: 1400px; height: 1400px; animation-duration: 200s; }
+
+@keyframes mandala-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
+
+.leaf-scatter {
+  position: absolute;
+  inset: 0;
+}
+
+/* ── Header ─────────────────────────────────────────────────────────────── */
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--glass);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border);
+}
+
+.header-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo-icon {
+  width: 44px;
+  height: 44px;
+  filter: drop-shadow(0 2px 8px rgba(58, 122, 48, 0.3));
+}
+
+.logo-icon svg { width: 100%; height: 100%; }
+
+.site-title {
+  font-family: var(--ff-head);
+  font-size: 1.6rem;
+  color: var(--deep-green);
+  line-height: 1;
+}
+
+.site-tagline {
+  font-family: var(--ff-ui);
+  font-size: 0.72rem;
+  color: var(--muted);
+  letter-spacing: 0.05em;
+  margin-top: 2px;
+}
+
+.header-nav {
+  display: flex;
+  gap: 2rem;
+}
+
+.header-nav a {
+  font-family: var(--ff-ui);
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--mid-green);
+  text-decoration: none;
+  letter-spacing: 0.03em;
+  transition: color var(--transition);
+}
+.header-nav a:hover { color: var(--deep-green); }
+
+/* ── Hero ───────────────────────────────────────────────────────────────── */
+.hero {
+  position: relative;
+  z-index: 1;
+  min-height: 88vh;
+  display: flex;
+  align-items: center;
+  padding: 6rem 2rem 4rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.hero-content { max-width: 620px; }
+
+.hero-badge {
+  display: inline-block;
+  font-family: var(--ff-ui);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--mid-green);
+  background: rgba(90, 171, 64, 0.12);
+  border: 1px solid rgba(90, 171, 64, 0.3);
+  padding: 6px 14px;
+  border-radius: 100px;
+  margin-bottom: 1.5rem;
+}
+
+.hero-headline {
+  font-family: var(--ff-head);
+  font-size: clamp(2.8rem, 6vw, 5.2rem);
+  line-height: 1.05;
+  color: var(--deep-green);
+  margin-bottom: 1.5rem;
+}
+
+.hero-headline em {
+  font-style: italic;
+  color: var(--gold);
+  font-family: 'Cormorant Garamond', serif;
+}
+
+.hero-subtext {
+  font-size: 1.15rem;
+  color: var(--muted);
+  margin-bottom: 2.5rem;
+  max-width: 520px;
+  font-weight: 300;
+}
+
+.cta-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--ff-ui);
+  font-size: 1rem;
+  font-weight: 500;
+  color: #fff;
+  background: linear-gradient(135deg, var(--mid-green), var(--deep-green));
+  padding: 14px 32px;
+  border-radius: 100px;
+  text-decoration: none;
+  box-shadow: 0 8px 32px rgba(30, 77, 26, 0.3);
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+.cta-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(30, 77, 26, 0.4);
+}
+.cta-btn svg { width: 18px; height: 18px; }
+
+.hero-decoration {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 480px;
+  height: 480px;
+  pointer-events: none;
+}
+
+.deco-circle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.12;
+}
+.c1 {
+  width: 380px; height: 380px;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, var(--leaf-green) 0%, transparent 70%);
+}
+.c2 {
+  width: 200px; height: 200px;
+  top: 20%; left: 60%;
+  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
+  opacity: 0.18;
+}
+
+.rotating-mandala {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 14rem;
+  color: var(--leaf-green);
+  opacity: 0.06;
+  animation: mandala-spin 60s linear infinite;
+  line-height: 1;
+}
+
+/* ── Section Commons ────────────────────────────────────────────────────── */
+.section-container {
+  position: relative;
+  z-index: 1;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 5rem 2rem;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.section-label {
+  display: inline-block;
+  font-family: var(--ff-ui);
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: var(--gold);
+  margin-bottom: 0.75rem;
+}
+
+.section-header h2 {
+  font-family: var(--ff-head);
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  color: var(--deep-green);
+  line-height: 1.1;
+  margin-bottom: 0.75rem;
+}
+
+.section-header p {
+  font-size: 1rem;
+  color: var(--muted);
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+/* ── Upload Section ─────────────────────────────────────────────────────── */
+.upload-section { background: var(--parchment); }
+
+.upload-area {
+  max-width: 680px;
+  margin: 0 auto;
+  background: white;
+  border: 2px dashed var(--border);
+  border-radius: 24px;
+  min-height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color var(--transition), box-shadow var(--transition);
+  box-shadow: 0 4px 32px var(--shadow);
+  overflow: hidden;
+}
+
+.upload-area.drag-over {
+  border-color: var(--leaf-green);
+  box-shadow: 0 8px 48px rgba(90, 171, 64, 0.2);
+}
+
+.upload-idle {
+  text-align: center;
+  padding: 3rem 2rem;
+}
+
+.upload-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 1.5rem;
+  color: var(--leaf-green);
+  opacity: 0.6;
+}
+.upload-icon svg { width: 100%; height: 100%; }
+
+.upload-main-text {
+  font-family: var(--ff-head);
+  font-size: 1.4rem;
+  color: var(--deep-green);
+  margin-bottom: 0.5rem;
+}
+
+.upload-sub-text {
+  font-size: 0.9rem;
+  color: var(--muted);
+  margin-bottom: 1.5rem;
+}
+
+.upload-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn-upload, .btn-camera {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--ff-ui);
+  font-size: 0.9rem;
+  font-weight: 500;
+  padding: 10px 22px;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all var(--transition);
+  border: none;
+}
+
+.btn-upload {
+  background: var(--deep-green);
+  color: #fff;
+}
+.btn-upload:hover { background: var(--mid-green); transform: translateY(-1px); }
+
+.btn-camera {
+  background: transparent;
+  color: var(--mid-green);
+  border: 1.5px solid var(--mid-green);
+}
+.btn-camera:hover { background: rgba(58, 122, 48, 0.08); }
+
+.btn-upload svg, .btn-camera svg { width: 16px; height: 16px; }
+
+/* Camera */
+.camera-view {
+  width: 100%;
+  position: relative;
+}
+
+.camera-view video {
+  width: 100%;
+  max-height: 420px;
+  object-fit: cover;
+  display: block;
+}
+
+.camera-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.camera-frame {
+  width: 260px;
+  height: 260px;
+  border: 2px solid rgba(168, 216, 92, 0.8);
+  border-radius: 12px;
+  box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
+}
+
+.camera-hint {
+  margin-top: 12px;
+  color: rgba(255,255,255,0.9);
+  font-family: var(--ff-ui);
+  font-size: 0.85rem;
+}
+
+.camera-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background: var(--deep-green);
+}
+
+.btn-capture {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: var(--lime);
+  color: var(--deep-green);
+  font-family: var(--ff-ui);
+  font-weight: 600;
+  font-size: 1rem;
+  padding: 12px 28px;
+  border-radius: 100px;
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-capture:hover { transform: scale(1.04); }
+
+.capture-ring {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 2.5px solid var(--deep-green);
+  border-radius: 50%;
+}
+
+.btn-cancel-camera {
+  background: none;
+  color: rgba(255,255,255,0.7);
+  border: 1px solid rgba(255,255,255,0.3);
+  font-family: var(--ff-ui);
+  font-size: 0.85rem;
+  padding: 10px 20px;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-cancel-camera:hover { color: #fff; border-color: #fff; }
+
+/* Preview */
+.image-preview {
+  width: 100%;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.image-preview img {
+  max-width: 100%;
+  max-height: 360px;
+  object-fit: contain;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px var(--shadow);
+}
+
+.preview-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.btn-analyze {
+  font-family: var(--ff-ui);
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, var(--mid-green), var(--deep-green));
+  padding: 12px 36px;
+  border-radius: 100px;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 6px 24px rgba(30, 77, 26, 0.3);
+  transition: all var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.btn-analyze:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(30, 77, 26, 0.4); }
+.btn-analyze:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+
+.btn-spinner { display: flex; align-items: center; gap: 8px; }
+.btn-spinner svg { width: 18px; height: 18px; animation: spin 1s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.btn-clear {
+  font-family: var(--ff-ui);
+  font-size: 0.88rem;
+  color: var(--muted);
+  background: none;
+  border: 1px solid var(--border);
+  padding: 10px 20px;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-clear:hover { color: var(--red-tika); border-color: var(--red-tika); }
+
+/* ── Results Section ─────────────────────────────────────────────────────── */
+.results-section {
+  background: white;
+  border-top: 1px solid var(--border);
+}
+
+.result-hero-card {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 3rem;
+  background: linear-gradient(135deg, var(--parchment) 0%, white 100%);
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 2.5rem;
+  margin-bottom: 3rem;
+  box-shadow: 0 8px 48px var(--shadow);
+  animation: fadeSlideUp 0.5s ease forwards;
+}
+
+@keyframes fadeSlideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.result-leaf-thumb {
+  position: relative;
+}
+
+.result-leaf-thumb img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px var(--shadow);
+}
+
+.confidence-badge {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  background: var(--deep-green);
+  color: #fff;
+  font-family: var(--ff-ui);
+  font-size: 0.82rem;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 100px;
+}
+
+.result-family {
+  font-family: var(--ff-ui);
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--gold);
+  margin-bottom: 0.5rem;
+}
+
+.result-common-name {
+  font-family: var(--ff-head);
+  font-size: clamp(1.8rem, 3vw, 2.8rem);
+  color: var(--deep-green);
+  line-height: 1.1;
+  margin-bottom: 0.5rem;
+}
+
+.result-botanical {
+  font-family: var(--ff-body);
+  font-style: italic;
+  font-size: 1.1rem;
+  color: var(--muted);
+  margin-bottom: 0.5rem;
+}
+
+.result-ayurvedic {
+  font-family: var(--ff-ui);
+  font-size: 0.88rem;
+  color: var(--earth);
+  margin-bottom: 1rem;
+}
+
+.result-habitat {
+  font-size: 0.95rem;
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.demo-warning {
+  margin-top: 1rem;
+  background: rgba(232, 160, 32, 0.1);
+  border: 1px solid rgba(232, 160, 32, 0.3);
+  color: var(--earth);
+  padding: 10px 16px;
+  border-radius: var(--radius-sm);
+  font-family: var(--ff-ui);
+  font-size: 0.85rem;
+}
+.demo-warning code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; }
+
+/* Medicinal Grid */
+.medicinal-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+
+.med-card {
+  background: var(--parchment);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.75rem;
+  animation: fadeSlideUp 0.5s ease forwards;
+}
+
+.med-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 1.25rem;
+}
+
+.med-icon { font-size: 1.3rem; }
+
+.med-card-header h3 {
+  font-family: var(--ff-head);
+  font-size: 1.1rem;
+  color: var(--deep-green);
+}
+
+.uses-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.uses-list li {
+  font-size: 0.95rem;
+  color: var(--ink);
+  padding-left: 20px;
+  position: relative;
+  line-height: 1.5;
+}
+
+.uses-list li::before {
+  content: "✦";
+  position: absolute;
+  left: 0;
+  color: var(--leaf-green);
+  font-size: 0.65rem;
+  top: 5px;
+}
+
+.compounds-tags, .parts-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.compound-tag, .part-tag {
+  font-family: var(--ff-ui);
+  font-size: 0.78rem;
+  font-weight: 500;
+  padding: 5px 13px;
+  border-radius: 100px;
+}
+
+.compound-tag {
+  background: rgba(58, 122, 48, 0.1);
+  color: var(--deep-green);
+  border: 1px solid rgba(58, 122, 48, 0.2);
+}
+
+.part-tag {
+  background: rgba(201, 149, 58, 0.1);
+  color: var(--earth);
+  border: 1px solid rgba(201, 149, 58, 0.2);
+}
+
+/* Rasa Grid */
+.rasa-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}
+
+.rasa-item {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+}
+
+.rasa-label {
+  font-family: var(--ff-ui);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--gold);
+  display: block;
+  margin-bottom: 4px;
+}
+
+.rasa-value {
+  font-family: var(--ff-body);
+  font-size: 0.95rem;
+  color: var(--deep-green);
+}
+
+/* Dosage Card */
+.dosage-text {
+  font-size: 0.95rem;
+  color: var(--ink);
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.precaution-box {
+  margin-top: 1rem;
+  background: rgba(184, 48, 48, 0.06);
+  border-left: 3px solid var(--red-tika);
+  padding: 10px 14px;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  font-size: 0.88rem;
+  color: var(--ink);
+  line-height: 1.5;
+}
+
+/* Top 5 Bars */
+.top5-section {
+  background: var(--parchment);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  margin-bottom: 2rem;
+}
+
+.top5-title {
+  font-family: var(--ff-head);
+  font-size: 1.1rem;
+  color: var(--deep-green);
+  margin-bottom: 1.5rem;
+}
+
+.top5-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.pred-bar {
+  display: grid;
+  grid-template-columns: 180px 1fr 60px;
+  align-items: center;
+  gap: 14px;
+}
+
+.pred-name {
+  font-family: var(--ff-ui);
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pred-track {
+  height: 8px;
+  background: rgba(0,0,0,0.06);
+  border-radius: 100px;
+  overflow: hidden;
+}
+
+.pred-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--leaf-green), var(--deep-green));
+  border-radius: 100px;
+  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pred-fill.top-fill {
+  background: linear-gradient(90deg, var(--lime), var(--mid-green));
+}
+
+.pred-pct {
+  font-family: var(--ff-ui);
+  font-size: 0.82rem;
+  color: var(--muted);
+  text-align: right;
+}
+
+.result-actions {
+  text-align: center;
+}
+
+.btn-new-scan {
+  font-family: var(--ff-ui);
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--mid-green);
+  background: none;
+  border: 2px solid var(--mid-green);
+  padding: 12px 32px;
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-new-scan:hover { background: var(--mid-green); color: #fff; }
+
+/* ── About Section ──────────────────────────────────────────────────────── */
+.about-section {
+  background:
+    linear-gradient(160deg, #f8f4e8 0%, #f1ead7 48%, #e7dcc2 100%);
+  color: var(--deep-green);
+  border-top: 1px solid rgba(90, 171, 64, 0.2);
+  border-bottom: 1px solid rgba(90, 171, 64, 0.2);
+}
+
+.about-grid {
+  display: grid;
+  grid-template-columns: 1fr 360px;
+  gap: 4rem;
+  align-items: center;
+}
+
+.about-text .section-label { color: var(--mid-green); }
+
+.about-text h2 {
+  font-family: var(--ff-head);
+  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
+  color: var(--deep-green);
+  margin-bottom: 1.5rem;
+  line-height: 1.1;
+}
+
+.about-text p {
+  font-size: 1rem;
+  color: #395637;
+  margin-bottom: 1rem;
+  line-height: 1.75;
+}
+
+.about-text strong { color: var(--mid-green); font-weight: 700; }
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+.stat-box {
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(58, 122, 48, 0.18);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  text-align: center;
+  transition: all var(--transition);
+}
+.stat-box:hover {
+  background: rgba(255, 255, 255, 0.92);
+  border-color: rgba(58, 122, 48, 0.35);
+}
+
+.stat-number {
+  display: block;
+  font-family: var(--ff-head);
+  font-size: 2.2rem;
+  color: var(--lime);
+  line-height: 1.1;
+}
+
+.stat-label {
+  display: block;
+  font-family: var(--ff-ui);
+  font-size: 0.78rem;
+  color: #54704f;
+  margin-top: 4px;
+  letter-spacing: 0.04em;
+}
+
+/* ── Plants Browser ──────────────────────────────────────────────────────── */
+.plants-section { background: var(--parchment); }
+
+.search-bar-wrap {
+  max-width: 480px;
+  margin: 0 auto 2.5rem;
+}
+
+.plant-search {
+  width: 100%;
+  font-family: var(--ff-ui);
+  font-size: 1rem;
+  padding: 12px 20px;
+  border: 2px solid var(--border);
+  border-radius: 100px;
+  background: white;
+  color: var(--ink);
+  outline: none;
+  transition: border-color var(--transition);
+}
+.plant-search:focus { border-color: var(--mid-green); }
+.plant-search::placeholder { color: var(--muted); }
+
+.plant-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.plant-pill {
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 1rem 1.25rem;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.plant-pill:hover {
+  border-color: var(--leaf-green);
+  box-shadow: 0 4px 16px var(--shadow);
+  transform: translateY(-2px);
+}
+
+.plant-pill.active {
+  background: linear-gradient(135deg, rgba(90, 171, 64, 0.14), rgba(58, 122, 48, 0.08));
+  border-color: rgba(58, 122, 48, 0.42);
+}
+
+.pill-name {
+  font-family: var(--ff-head);
+  font-size: 0.95rem;
+  color: var(--deep-green);
+  display: block;
+  margin-bottom: 3px;
+}
+
+.pill-botanical {
+  font-family: var(--ff-body);
+  font-style: italic;
+  font-size: 0.78rem;
+  color: var(--muted);
+  display: block;
+}
+
+.plant-detail-card {
+  margin-top: 2rem;
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  box-shadow: 0 8px 36px var(--shadow);
+  overflow: hidden;
+}
+
+.plant-detail-head {
+  padding: 1.8rem 2rem 1.4rem;
+  background: linear-gradient(160deg, rgba(90, 171, 64, 0.14), rgba(255, 255, 255, 0.94));
+  border-bottom: 1px solid var(--border);
+}
+
+.plant-detail-family {
+  font-family: var(--ff-ui);
+  font-size: 0.78rem;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: #567050;
+}
+
+.plant-detail-name {
+  font-family: var(--ff-head);
+  font-size: clamp(1.6rem, 3vw, 2.3rem);
+  color: var(--deep-green);
+  margin-top: 0.25rem;
+}
+
+.plant-detail-botanical {
+  font-family: var(--ff-body);
+  font-style: italic;
+  color: #456142;
+  margin-top: 0.2rem;
+}
+
+.plant-detail-ayurvedic,
+.plant-detail-habitat {
+  font-family: var(--ff-ui);
+  font-size: 0.92rem;
+  color: #496346;
+  margin-top: 0.45rem;
+}
+
+.plant-detail-grid {
+  padding: 1.5rem 1.5rem 1.8rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.plant-detail-block {
+  background: #f9f5ea;
+  border: 1px solid rgba(90, 171, 64, 0.16);
+  border-radius: var(--radius);
+  padding: 1rem 1.1rem;
+}
+
+.plant-detail-block h4 {
+  font-family: var(--ff-head);
+  color: var(--deep-green);
+  font-size: 1.02rem;
+  margin-bottom: 0.65rem;
+}
+
+.plant-detail-block ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.plant-detail-block li {
+  font-size: 0.95rem;
+  line-height: 1.45;
+  color: var(--ink);
+  padding-left: 1rem;
+  position: relative;
+}
+
+.plant-detail-block li::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: var(--mid-green);
+}
+
+.detail-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.detail-tag {
+  font-family: var(--ff-ui);
+  font-size: 0.77rem;
+  font-weight: 500;
+  padding: 4px 11px;
+  border-radius: 999px;
+  border: 1px solid rgba(58, 122, 48, 0.22);
+  background: rgba(90, 171, 64, 0.1);
+  color: var(--deep-green);
+}
+
+.detail-tag.parts {
+  border-color: rgba(201, 149, 58, 0.3);
+  background: rgba(201, 149, 58, 0.12);
+  color: #7a5d32;
+}
+
+.detail-rasa-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+}
+
+.detail-rasa-item {
+  background: #fff;
+  border: 1px solid rgba(90, 171, 64, 0.2);
+  border-radius: 8px;
+  padding: 7px 9px;
+}
+
+.detail-rasa-label {
+  display: block;
+  font-family: var(--ff-ui);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #718468;
+}
+
+.detail-rasa-value {
+  font-size: 0.9rem;
+  color: var(--deep-green);
+}
+
+.detail-dosage,
+.detail-precautions {
+  font-size: 0.92rem;
+  color: #3d563a;
+}
+
+.detail-precautions {
+  margin-top: 0.7rem;
+  border-left: 3px solid #be4c4c;
+  padding-left: 0.6rem;
+}
+
+/* ── Footer ─────────────────────────────────────────────────────────────── */
+.site-footer {
+  background: var(--ink);
+  color: rgba(255,255,255,0.5);
+}
+
+.footer-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 3rem 2rem;
+  text-align: center;
+}
+
+.footer-logo {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 1rem;
+}
+
+.footer-title {
+  font-family: var(--ff-head);
+  font-size: 1.5rem;
+  color: var(--lime);
+}
+
+.footer-sub {
+  font-family: var(--ff-body);
+  font-style: italic;
+  color: rgba(255,255,255,0.3);
+}
+
+.footer-note, .footer-disclaimer {
+  font-family: var(--ff-ui);
+  font-size: 0.82rem;
+  line-height: 1.7;
+  margin-bottom: 0.5rem;
+}
+
+.footer-note em { color: rgba(255,255,255,0.7); }
+
+/* ── Floating leaf animation ─────────────────────────────────────────────── */
+.floating-leaf {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  opacity: 0.06;
+  animation: floatLeaf linear infinite;
+  color: var(--leaf-green);
+  font-size: 20px;
+  pointer-events: none;
+}
+
+@keyframes floatLeaf {
+  0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
+  10%  { opacity: 0.06; }
+  90%  { opacity: 0.06; }
+  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
+}
+
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+@media (max-width: 900px) {
+  .hero { flex-direction: column; min-height: auto; padding-top: 4rem; }
+  .hero-decoration { display: none; }
+
+  .result-hero-card { grid-template-columns: 1fr; }
+  .result-leaf-thumb img { max-height: 240px; }
+
+  .medicinal-grid { grid-template-columns: 1fr; }
+  .about-grid { grid-template-columns: 1fr; }
+  .stats-grid { grid-template-columns: repeat(4, 1fr); }
+  .header-nav { display: none; }
+}
+
+@media (max-width: 600px) {
+  .stats-grid { grid-template-columns: 1fr 1fr; }
+  .rasa-grid { grid-template-columns: 1fr; }
+  .pred-bar { grid-template-columns: 120px 1fr 50px; }
+  .plant-detail-grid { grid-template-columns: 1fr; }
+}

static/js/app.js

@@ -0,0 +1,376 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   VrukshaVed Frontend — Plant Identification App
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+const API_BASE = window.location.origin;
+
+// ── State ──────────────────────────────────────────────────────────────────
+let currentImageBlob = null;
+let mediaStream = null;
+
+// ── DOM References ─────────────────────────────────────────────────────────
+const uploadArea     = document.getElementById('uploadArea');
+const uploadIdle     = document.getElementById('uploadIdle');
+const fileInput      = document.getElementById('fileInput');
+const cameraBtn      = document.getElementById('cameraBtn');
+const cameraView     = document.getElementById('cameraView');
+const cameraFeed     = document.getElementById('cameraFeed');
+const cameraCanvas   = document.getElementById('cameraCanvas');
+const captureBtn     = document.getElementById('captureBtn');
+const cancelCameraBtn = document.getElementById('cancelCameraBtn');
+const imagePreview   = document.getElementById('imagePreview');
+const previewImg     = document.getElementById('previewImg');
+const analyzeBtn     = document.getElementById('analyzeBtn');
+const clearBtn       = document.getElementById('clearBtn');
+const resultsSection = document.getElementById('resultsSection');
+
+// ── Leaf Scatter Animation ─────────────────────────────────────────────────
+function initLeafScatter() {
+  const container = document.getElementById('leafScatter');
+  const symbols = ['🌿', '🍃', '🌱', '🍀', '☘️'];
+  for (let i = 0; i < 14; i++) {
+    const el = document.createElement('div');
+    el.className = 'floating-leaf';
+    el.textContent = symbols[Math.floor(Math.random() * symbols.length)];
+    el.style.left = Math.random() * 100 + 'vw';
+    el.style.animationDuration = (20 + Math.random() * 25) + 's';
+    el.style.animationDelay = -(Math.random() * 30) + 's';
+    el.style.fontSize = (14 + Math.random() * 14) + 'px';
+    container.appendChild(el);
+  }
+}
+
+// ── File Upload ───────────────────────────────────────────────────────────
+fileInput.addEventListener('change', e => {
+  const file = e.target.files[0];
+  if (file) handleImageFile(file);
+});
+
+// Drag & Drop
+uploadArea.addEventListener('dragover', e => {
+  e.preventDefault();
+  uploadArea.classList.add('drag-over');
+});
+uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('drag-over'));
+uploadArea.addEventListener('drop', e => {
+  e.preventDefault();
+  uploadArea.classList.remove('drag-over');
+  const file = e.dataTransfer.files[0];
+  if (file && file.type.startsWith('image/')) handleImageFile(file);
+});
+
+function handleImageFile(file) {
+  const reader = new FileReader();
+  reader.onload = evt => {
+    currentImageBlob = file;
+    showPreview(evt.target.result);
+  };
+  reader.readAsDataURL(file);
+}
+
+// ── Camera ────────────────────────────────────────────────────────────────
+cameraBtn.addEventListener('click', async () => {
+  try {
+    mediaStream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: 'environment', width: { ideal: 1280 }, height: { ideal: 720 } }
+    });
+    cameraFeed.srcObject = mediaStream;
+    uploadIdle.style.display = 'none';
+    cameraView.style.display = 'block';
+  } catch (err) {
+    alert('Camera access denied or not available. Please upload an image instead.');
+  }
+});
+
+captureBtn.addEventListener('click', () => {
+  const ctx = cameraCanvas.getContext('2d');
+  cameraCanvas.width = cameraFeed.videoWidth;
+  cameraCanvas.height = cameraFeed.videoHeight;
+  ctx.drawImage(cameraFeed, 0, 0);
+
+  cameraCanvas.toBlob(blob => {
+    currentImageBlob = blob;
+    const url = URL.createObjectURL(blob);
+    showPreview(url);
+    stopCamera();
+  }, 'image/jpeg', 0.92);
+});
+
+cancelCameraBtn.addEventListener('click', () => {
+  stopCamera();
+  cameraView.style.display = 'none';
+  uploadIdle.style.display = 'block';
+});
+
+function stopCamera() {
+  if (mediaStream) {
+    mediaStream.getTracks().forEach(t => t.stop());
+    mediaStream = null;
+  }
+}
+
+// ── Preview ───────────────────────────────────────────────────────────────
+function showPreview(src) {
+  uploadIdle.style.display = 'none';
+  cameraView.style.display = 'none';
+  imagePreview.style.display = 'flex';
+  previewImg.src = src;
+  resultsSection.style.display = 'none';
+}
+
+clearBtn.addEventListener('click', resetApp);
+
+// ── Analyze ───────────────────────────────────────────────────────────────
+analyzeBtn.addEventListener('click', async () => {
+  if (!currentImageBlob) return;
+
+  const btnText = analyzeBtn.querySelector('.btn-text');
+  const spinner = analyzeBtn.querySelector('.btn-spinner');
+  btnText.style.display = 'none';
+  spinner.style.display = 'flex';
+  analyzeBtn.disabled = true;
+
+  try {
+    const formData = new FormData();
+    formData.append('file', currentImageBlob, 'leaf.jpg');
+
+    const res = await fetch(`${API_BASE}/api/predict`, {
+      method: 'POST',
+      body: formData
+    });
+
+    if (!res.ok) {
+      const err = await res.json();
+      throw new Error(err.error || 'Server error');
+    }
+
+    const data = await res.json();
+    displayResults(data);
+
+  } catch (err) {
+    alert('Error: ' + err.message + '\n\nMake sure the backend server is running on port 5000.');
+  } finally {
+    btnText.style.display = 'inline';
+    spinner.style.display = 'none';
+    analyzeBtn.disabled = false;
+  }
+});
+
+// ── Display Results ───────────────────────────────────────────────────────
+function displayResults(data) {
+  resultsSection.style.display = 'block';
+  resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+  const top = data.top_prediction;
+  const info = data.plant_info || {};
+
+  // Thumbnail
+  document.getElementById('resultThumb').src = previewImg.src;
+  document.getElementById('confidenceBadge').textContent = top.confidence_pct;
+
+  // Identity
+  document.getElementById('resultFamily').textContent =
+    info.family ? `Family: ${info.family}` : '';
+  document.getElementById('resultCommonName').textContent =
+    top.plant_name.replace(/_/g, ' ');
+  document.getElementById('resultBotanical').textContent =
+    info.botanical_name ? info.botanical_name : '';
+  document.getElementById('resultAyurvedic').textContent =
+    info.ayurvedic_name ? `Ayurvedic name: ${info.ayurvedic_name}` : '';
+  document.getElementById('resultHabitat').textContent =
+    info.habitat || info.description || '';
+
+  // Demo mode warning
+  document.getElementById('demoWarning').style.display =
+    data.demo_mode ? 'block' : 'none';
+
+  // Medicinal Uses
+  const ul = document.getElementById('usesList');
+  ul.innerHTML = '';
+  (info.medicinal_uses || ['Information not available']).forEach(use => {
+    const li = document.createElement('li');
+    li.textContent = use;
+    ul.appendChild(li);
+  });
+
+  // Active Compounds
+  const ct = document.getElementById('compoundsTags');
+  ct.innerHTML = '';
+  (info.active_compounds || []).forEach(c => {
+    const span = document.createElement('span');
+    span.className = 'compound-tag';
+    span.textContent = c;
+    ct.appendChild(span);
+  });
+
+  // Rasa Guna
+  const rg = document.getElementById('rasaGrid');
+  rg.innerHTML = '';
+  if (info.rasa_guna) {
+    Object.entries(info.rasa_guna).forEach(([label, value]) => {
+      rg.innerHTML += `
+        <div class="rasa-item">
+          <span class="rasa-label">${label}</span>
+          <span class="rasa-value">${value}</span>
+        </div>`;
+    });
+  }
+
+  // Dosage
+  document.getElementById('dosageText').textContent = info.dosage_form || '';
+
+  const pt = document.getElementById('partsTags');
+  pt.innerHTML = '';
+  (info.parts_used || []).forEach(p => {
+    const span = document.createElement('span');
+    span.className = 'part-tag';
+    span.textContent = p;
+    pt.appendChild(span);
+  });
+
+  document.getElementById('precautionBox').textContent =
+    info.precautions ? '⚠️ ' + info.precautions : '';
+
+  // Top 5 Bars
+  const bars = document.getElementById('top5Bars');
+  bars.innerHTML = '';
+  data.all_predictions.forEach((pred, i) => {
+    const pct = (pred.confidence * 100).toFixed(1);
+    bars.innerHTML += `
+      <div class="pred-bar">
+        <span class="pred-name">${pred.plant}</span>
+        <div class="pred-track">
+          <div class="pred-fill ${i === 0 ? 'top-fill' : ''}" style="width: 0%"
+               data-width="${pct}%"></div>
+        </div>
+        <span class="pred-pct">${pct}%</span>
+      </div>`;
+  });
+
+  // Animate bars after render
+  requestAnimationFrame(() => {
+    document.querySelectorAll('.pred-fill').forEach(el => {
+      el.style.width = el.dataset.width;
+    });
+  });
+}
+
+// ── Plants Grid ─���─────────────────────────────────────────────────────────
+async function loadPlantsGrid() {
+  try {
+    const res = await fetch(`${API_BASE}/api/plants`);
+    const data = await res.json();
+    renderPlantsGrid(data.plants);
+
+    document.getElementById('plantSearch').addEventListener('input', e => {
+      const q = e.target.value.toLowerCase();
+      renderPlantsGrid(data.plants.filter(p => p.toLowerCase().includes(q)));
+    });
+  } catch (err) {
+    // Silent fail - backend may not be running
+  }
+}
+
+function renderPlantsGrid(plants) {
+  const grid = document.getElementById('plantGrid');
+  grid.innerHTML = '';
+  plants.forEach(name => {
+    const div = document.createElement('div');
+    div.className = 'plant-pill';
+    div.dataset.plantName = name;
+    div.innerHTML = `
+      <span class="pill-name">${name}</span>
+    `;
+    div.addEventListener('click', () => showPlantDetails(name));
+    grid.appendChild(div);
+  });
+}
+
+async function showPlantDetails(name) {
+  try {
+    const res = await fetch(`${API_BASE}/api/plant/${encodeURIComponent(name)}`);
+    const data = await res.json();
+    if (data.found && data.info) {
+      renderPlantDetails(name, data.info);
+
+      document
+        .querySelectorAll('.plant-pill.active')
+        .forEach(el => el.classList.remove('active'));
+
+      const selected = document.querySelector(`.plant-pill[data-plant-name="${CSS.escape(name)}"]`);
+      if (selected) selected.classList.add('active');
+    }
+  } catch (e) { /* silent */ }
+}
+
+function renderPlantDetails(name, info) {
+  const card = document.getElementById('plantDetailCard');
+  card.style.display = 'block';
+
+  document.getElementById('detailName').textContent = name;
+  document.getElementById('detailFamily').textContent = info.family ? `Family: ${info.family}` : '';
+  document.getElementById('detailBotanical').textContent = info.botanical_name || '';
+  document.getElementById('detailAyurvedic').textContent = info.ayurvedic_name ? `Ayurvedic name: ${info.ayurvedic_name}` : '';
+  document.getElementById('detailHabitat').textContent = info.habitat || info.description || '';
+  document.getElementById('detailDosage').textContent = info.dosage_form || 'Dosage information not available.';
+  document.getElementById('detailPrecautions').textContent =
+    info.precautions ? `Precautions: ${info.precautions}` : 'Precautions: Not specified.';
+
+  const uses = document.getElementById('detailUses');
+  uses.innerHTML = '';
+  (info.medicinal_uses || ['Information not available']).forEach(use => {
+    const li = document.createElement('li');
+    li.textContent = use;
+    uses.appendChild(li);
+  });
+
+  const compounds = document.getElementById('detailCompounds');
+  compounds.innerHTML = '';
+  (info.active_compounds || []).forEach(compound => {
+    const tag = document.createElement('span');
+    tag.className = 'detail-tag';
+    tag.textContent = compound;
+    compounds.appendChild(tag);
+  });
+
+  const parts = document.getElementById('detailParts');
+  parts.innerHTML = '';
+  (info.parts_used || []).forEach(part => {
+    const tag = document.createElement('span');
+    tag.className = 'detail-tag parts';
+    tag.textContent = part;
+    parts.appendChild(tag);
+  });
+
+  const rasa = document.getElementById('detailRasa');
+  rasa.innerHTML = '';
+  Object.entries(info.rasa_guna || {}).forEach(([label, value]) => {
+    const item = document.createElement('div');
+    item.className = 'detail-rasa-item';
+    item.innerHTML = `
+      <span class="detail-rasa-label">${label}</span>
+      <span class="detail-rasa-value">${value}</span>
+    `;
+    rasa.appendChild(item);
+  });
+
+  card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+}
+
+// ── Reset ─────────────────────────────────────────────────────────────────
+function resetApp() {
+  currentImageBlob = null;
+  fileInput.value = '';
+  imagePreview.style.display = 'none';
+  uploadIdle.style.display = 'block';
+  resultsSection.style.display = 'none';
+  document.getElementById('uploadSection') &&
+    document.getElementById('uploadSection').scrollIntoView({ behavior: 'smooth' });
+  window.scrollTo({ top: document.getElementById('upload-section').offsetTop - 80, behavior: 'smooth' });
+}
+
+// ── Init ──────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  initLeafScatter();
+  loadPlantsGrid();
+});