Hugging Face's logo

Spaces:
Krish264
/
NutriWeb
Running

App Files Community
NutriWeb
File size: 6,032 Bytes
89d9642
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
/* NutriWeb — injected once by app.py.
   Kept in a real .css file rather than scattered st.markdown calls so the
   design is editable in one place. */

:root {
  --nw-green: #0F8A5F;
  --nw-green-dark: #0A6244;
  --nw-ink: #1A1F1C;
  --nw-muted: #5F6B64;
  --nw-line: #E3E8E4;
  --nw-surface: #FFFFFF;
  --nw-bg: #FBFBF9;

  /* Official Nutri-Score palette */
  --ns-a: #038141;
  --ns-b: #85BB2F;
  --ns-c: #FECB02;
  --ns-d: #EE8100;
  --ns-e: #E63E11;

  --nw-radius: 14px;
  --nw-shadow: 0 1px 2px rgba(16, 32, 24, .06), 0 4px 16px rgba(16, 32, 24, .05);
}

/* ---------- layout ---------- */
.block-container { padding-top: 2.2rem; max-width: 1180px; }

/* ---------- hero ---------- */
.nw-hero {
  background: linear-gradient(135deg, var(--nw-green-dark), var(--nw-green) 55%, #3DAF7D);
  color: #fff;
  border-radius: var(--nw-radius);
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.4rem;
}
.nw-hero h1 { margin: 0 0 .3rem; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.nw-hero p  { margin: 0; opacity: .92; font-size: .95rem; }

/* ---------- cards ---------- */
.nw-card {
  background: var(--nw-surface);
  border: 1px solid var(--nw-line);
  border-radius: var(--nw-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--nw-shadow);
  height: 100%;
}
.nw-card h4 { margin: 0 0 .2rem; font-size: 1rem; line-height: 1.32; color: var(--nw-ink); }
.nw-brand { color: var(--nw-muted); font-size: .8rem; margin-bottom: .55rem; }

.nw-thumb {
  width: 100%; height: 132px; object-fit: contain;
  background: #F4F6F4; border-radius: 10px; margin-bottom: .7rem;
}
.nw-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: #B6C0B9; font-size: 1.9rem;
}

/* ---------- score badges ---------- */
.nw-badges { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.nw-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 999px; padding: .2rem .6rem;
  font-size: .74rem; font-weight: 650; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
}
.nw-badge .k { opacity: .75; font-weight: 500; }
.ns-a { background: var(--ns-a); color: #fff; }
.ns-b { background: var(--ns-b); color: #14310A; }
.ns-c { background: var(--ns-c); color: #3A2E00; }
.ns-d { background: var(--ns-d); color: #fff; }
.ns-e { background: var(--ns-e); color: #fff; }
.nw-badge-neutral { background: #EEF2EF; color: var(--nw-muted); border-color: var(--nw-line); }

/* Provenance chip: whether a grade came from OFF or was computed here. */
.nw-source {
  font-size: .68rem; color: var(--nw-muted);
  background: #F2F5F3; border: 1px solid var(--nw-line);
  border-radius: 6px; padding: .1rem .4rem; margin-left: .3rem;
}

/* ---------- health score dial ---------- */
.nw-health { display: flex; align-items: baseline; gap: .4rem; margin: .55rem 0 .3rem; }
.nw-health .v { font-size: 1.5rem; font-weight: 700; color: var(--nw-ink); line-height: 1; }
.nw-health .m { font-size: .74rem; color: var(--nw-muted); }
.nw-meter { height: 6px; background: #EDF1EE; border-radius: 999px; overflow: hidden; }
.nw-meter > span { display: block; height: 100%; border-radius: 999px; }

/* ---------- gain pill on recommendations ---------- */
.nw-gain {
  display: inline-block; background: #E7F5EE; color: var(--nw-green-dark);
  border: 1px solid #BFE5D3; border-radius: 999px;
  padding: .16rem .55rem; font-size: .76rem; font-weight: 650;
}
.nw-why { color: var(--nw-muted); font-size: .78rem; margin-top: .45rem; line-height: 1.45; }

/* ---------- verdict panel ---------- */
.nw-verdict { border-radius: var(--nw-radius); padding: .85rem 1rem; margin: .2rem 0 1rem; border: 1px solid; }
.nw-verdict h5 { margin: 0 0 .3rem; font-size: .95rem; }
.nw-verdict ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
.v-ok    { background: #EAF7F0; border-color: #BFE5D3; color: #0A5A3C; }
.v-warn  { background: #FFF7E6; border-color: #FBE0A2; color: #6B4C00; }
.v-block { background: #FDECEA; border-color: #F6C7C0; color: #8A1F12; }

/* ---------- chips ---------- */
.nw-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.nw-chip {
  font-size: .75rem; padding: .18rem .55rem; border-radius: 999px;
  background: #F2F5F3; border: 1px solid var(--nw-line); color: var(--nw-ink);
}
.chip-danger { background: #FDECEA; border-color: #F6C7C0; color: #8A1F12; }
.chip-warn   { background: #FFF7E6; border-color: #FBE0A2; color: #6B4C00; }
.chip-good   { background: #EAF7F0; border-color: #BFE5D3; color: #0A5A3C; }

/* ---------- nutrient table ---------- */
.nw-nutri { width: 100%; border-collapse: collapse; font-size: .86rem; }
.nw-nutri td { padding: .42rem .2rem; border-bottom: 1px solid var(--nw-line); vertical-align: middle; }
.nw-nutri td.n { color: var(--nw-muted); width: 34%; }
.nw-nutri td.v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; width: 18%; }
.nw-bar { background: #EDF1EE; border-radius: 999px; height: 6px; }
.nw-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--nw-green); }
.nw-bar > span.over { background: var(--ns-d); }

.nw-sub { color: var(--nw-muted); font-size: .82rem; }

/* ---------- dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --nw-ink: #E9EFEB; --nw-muted: #9FAFA6;
    --nw-line: #2A332E; --nw-surface: #161B18; --nw-bg: #0F1411;
  }
  .nw-thumb { background: #1D2320; }
  .nw-meter, .nw-bar { background: #262E29; }
  .nw-chip, .nw-source { background: #1D2320; }
  .v-ok    { background: #10241B; border-color: #1F4634; color: #8FD9B6; }
  .v-warn  { background: #2A2312; border-color: #4A3D1A; color: #E8C874; }
  .v-block { background: #2B1512; border-color: #55251E; color: #F0A79B; }
  .nw-gain { background: #10241B; border-color: #1F4634; color: #8FD9B6; }
  .chip-danger { background: #2B1512; border-color: #55251E; color: #F0A79B; }
  .chip-warn   { background: #2A2312; border-color: #4A3D1A; color: #E8C874; }
  .chip-good   { background: #10241B; border-color: #1F4634; color: #8FD9B6; }
}