-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgenerated_screen.html
More file actions
249 lines (248 loc) · 14 KB
/
Copy pathgenerated_screen.html
File metadata and controls
249 lines (248 loc) · 14 KB
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>EthicAI - The Ethereal Ledger</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-container-highest": "#313442",
"on-secondary": "#002e6a",
"tertiary-fixed": "#e9ddff",
"primary-container": "#10b981",
"primary-fixed": "#6ffbbe",
"on-secondary-fixed": "#001a42",
"on-primary": "#003824",
"surface-container": "#1b1f2c",
"surface": "#0f131f",
"background": "#0f131f",
"inverse-surface": "#dfe2f3",
"surface-variant": "#313442",
"tertiary": "#d0bcff",
"tertiary-container": "#b090ff",
"primary": "#4edea3",
"inverse-on-surface": "#2c303d",
"on-surface": "#dfe2f3",
"secondary-fixed-dim": "#adc6ff",
"on-surface-variant": "#bbcabf",
"surface-container-low": "#171b28",
"outline": "#86948a",
"surface-container-lowest": "#0a0e1a",
"outline-variant": "#3c4a42",
"on-primary-fixed": "#002113",
"error-container": "#93000a",
"tertiary-fixed-dim": "#d0bcff",
"on-primary-container": "#00422b",
"secondary-container": "#0566d9",
"inverse-primary": "#006c49",
"secondary-fixed": "#d8e2ff",
"secondary": "#adc6ff",
"surface-bright": "#353946",
"on-tertiary-fixed-variant": "#5516be",
"on-error-container": "#ffdad6",
"on-background": "#dfe2f3",
"surface-tint": "#4edea3",
"surface-container-high": "#262a37",
"primary-fixed-dim": "#4edea3",
"on-tertiary-container": "#4600a7",
"on-primary-fixed-variant": "#005236",
"on-secondary-container": "#e6ecff",
"surface-dim": "#0f131f",
"on-secondary-fixed-variant": "#004395",
"on-error": "#690005",
"on-tertiary": "#3c0091",
"on-tertiary-fixed": "#23005c",
"error": "#ffb4ab"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"fontFamily": {
"headline": ["Manrope"],
"display": ["Manrope"],
"body": ["Inter"],
"label": ["Inter"]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-card {
background: rgba(38, 42, 55, 0.6);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(78, 222, 163, 0.2);
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-background text-on-surface font-body selection:bg-primary selection:text-on-primary">
<!-- TopAppBar Shell -->
<header class="fixed top-0 left-0 w-full z-50 flex items-center justify-between px-6 h-16 bg-[#262a37]/60 backdrop-blur-md shadow-[0px_24px_48px_rgba(0,0,0,0.4)]">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-emerald-400 active:opacity-80 transition-all scale-95 cursor-pointer" data-icon="menu">menu</span>
<h1 class="text-emerald-400 font-manrope font-black tracking-tighter text-xl">EthicAI</h1>
</div>
<div class="h-10 w-10 rounded-full overflow-hidden border-2 border-primary/20 hover:bg-emerald-500/10 transition-colors cursor-pointer active:scale-95 transition-all">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional man with a friendly expression, soft studio lighting, clean minimal background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4AZZiNlYwgsNWsi7kgCVvHB7m_a3nH9KIE_Zf9A_RuTe_YWcGsIiRGe72EKKDBDRzdvMPgyEUSDzvh0xipo8Puwll7eCgKA0Cj7mF9CwSw-AYlVaISW10vwoJUVulTn4Um3ZPEL5A5Xrt-h43DLuxgGsYnryMgbMufN2Cz91hDDpQJgTHvkazGuOLaLBhL-0z8kcI2vY71F6fqB3Nq2DOb1xNKsBShjAWKibJo-aTAWupg7foxGe7UHQ-u3zTkZpQQJdC6lcjGOc"/>
</div>
</header>
<main class="pt-24 pb-32 px-6 max-w-md mx-auto">
<!-- Hero Section / Search -->
<section class="mb-12">
<h2 class="font-display text-4xl font-extrabold tracking-tight text-on-surface mb-2">The Truth<br/><span class="text-primary">Beneath the Label.</span></h2>
<p class="text-on-surface-variant font-body mb-8 text-sm max-w-[80%]">Discover the environmental and ethical footprint of every purchase.</p>
<div class="relative group">
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
<span class="material-symbols-outlined text-outline">search</span>
</div>
<input class="w-full bg-surface-container-lowest border-0 border-b border-outline-variant py-4 pl-12 pr-4 text-on-surface placeholder:text-outline focus:ring-0 focus:border-primary transition-all" placeholder="Search for products or brands" type="text"/>
</div>
</section>
<!-- Categories - Icon Based -->
<section class="mb-12 overflow-x-auto no-scrollbar">
<div class="flex gap-4 min-w-max">
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="w-16 h-16 rounded-full glass-card flex items-center justify-center group-hover:bg-primary/20 transition-all duration-300">
<span class="material-symbols-outlined text-primary" data-icon="apparel">apparel</span>
</div>
<span class="font-label text-[10px] uppercase tracking-widest text-on-surface-variant">Fashion</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="w-16 h-16 rounded-full glass-card flex items-center justify-center group-hover:bg-primary/20 transition-all duration-300">
<span class="material-symbols-outlined text-primary" data-icon="devices">devices</span>
</div>
<span class="font-label text-[10px] uppercase tracking-widest text-on-surface-variant">Tech</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="w-16 h-16 rounded-full glass-card flex items-center justify-center group-hover:bg-primary/20 transition-all duration-300">
<span class="material-symbols-outlined text-primary" data-icon="restaurant">restaurant</span>
</div>
<span class="font-label text-[10px] uppercase tracking-widest text-on-surface-variant">Food</span>
</div>
<div class="flex flex-col items-center gap-2 group cursor-pointer">
<div class="w-16 h-16 rounded-full glass-card flex items-center justify-center group-hover:bg-primary/20 transition-all duration-300">
<span class="material-symbols-outlined text-primary" data-icon="self_care">self_care</span>
</div>
<span class="font-label text-[10px] uppercase tracking-widest text-on-surface-variant">Beauty</span>
</div>
</div>
</section>
<!-- Featured / Trending -->
<section class="mb-12">
<div class="flex justify-between items-end mb-6">
<h3 class="font-display text-2xl font-bold tracking-tight">Rising Stars</h3>
<span class="text-primary font-label text-xs uppercase tracking-widest font-bold">View Ledger</span>
</div>
<div class="flex gap-6 overflow-x-auto no-scrollbar -mx-6 px-6">
<!-- Card 1 -->
<div class="min-w-[280px] glass-card rounded-full p-4 relative group">
<div class="h-48 rounded-full overflow-hidden mb-4">
<img alt="Eco-Luxe Sneakers" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Minimalist white and green eco-friendly sneakers on a dark reflective surface with cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARs0QSANmzfWksfERMpVxIflpkbTA_PmE0evzbyTIHanD_Gb2KHdjLgXsjXYmxt7wQR_3SsSVkhCY7phfh037-6o1NeNsoVooKkimID7q3G-xC73Zh6CYQLNqIJ0wi7bLO0wHlBVlx6V4HPjJXHdz3YjvwLOcp_shLsB_A8z7z4E1v7Tg2Fd-_wOuYjZh4fxNCMzCmBVpCZleJzks85hd_n9ty73UQSzR8gryBMWp5jiJ6iB5TN5hHV4nbDut-M8u5z7SKTW7gQqY"/>
</div>
<div class="flex justify-between items-start">
<div>
<p class="text-on-surface-variant text-[10px] uppercase tracking-widest mb-1">Sneakers</p>
<h4 class="font-display text-lg font-bold">Eco-Luxe Sneakers</h4>
</div>
<div class="h-12 w-12 rounded-full border border-primary/40 flex items-center justify-center bg-primary/10">
<span class="text-primary font-display font-black text-sm">94</span>
</div>
</div>
<div class="mt-4 inline-flex items-center gap-1 px-3 py-1 bg-tertiary-container/30 backdrop-blur-md rounded-full">
<span class="material-symbols-outlined text-[14px] text-tertiary" style="font-variation-settings: 'FILL' 1;">verified</span>
<span class="text-[10px] font-bold text-tertiary tracking-wide">ETHICAL CHOICE</span>
</div>
</div>
<!-- Card 2 -->
<div class="min-w-[280px] glass-card rounded-full p-4 relative group">
<div class="h-48 rounded-full overflow-hidden mb-4">
<img alt="FairTrade Coffee" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Premium roasted coffee beans in a matte black minimalist bag on a slate table with steam rising" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBs7mfXpdWVKLMJJOe2yTwzVX5XmGyghR4b3qJA3TRf4O9o4zwNzBDSmUbS5Nc_1Po85XRAc9Bb6339o7lTXbB00CIxFME2fcW921QwqMw-4Q-XG1vPyg7Jp-iOH-Jin1f-3Q3CENFMxwHgege2_Wr1fVbjYkBLriwAKI4vcDQpeokqksWGHbPNDRgug6zER9fkz5s9vGtXkjiuEPYu-pQIV-w6GNpttVCOIHSYbdyW60j9aJwhnl224_bIuBvAkQHYsWF0eGfJe7g"/>
</div>
<div class="flex justify-between items-start">
<div>
<p class="text-on-surface-variant text-[10px] uppercase tracking-widest mb-1">Beverage</p>
<h4 class="font-display text-lg font-bold">FairTrade Coffee</h4>
</div>
<div class="h-12 w-12 rounded-full border border-primary/40 flex items-center justify-center bg-primary/10">
<span class="text-primary font-display font-black text-sm">88</span>
</div>
</div>
<div class="mt-4 inline-flex items-center gap-1 px-3 py-1 bg-tertiary-container/30 backdrop-blur-md rounded-full">
<span class="material-symbols-outlined text-[14px] text-tertiary" style="font-variation-settings: 'FILL' 1;">eco</span>
<span class="text-[10px] font-bold text-tertiary tracking-wide">ORGANIC</span>
</div>
</div>
</div>
</section>
<!-- Ethical Insight Section (Asymmetric Bento) -->
<section class="mb-12">
<div class="grid grid-cols-2 gap-4">
<div class="col-span-2 glass-card p-6 rounded-full flex flex-col justify-end min-h-[160px] relative overflow-hidden">
<div class="absolute top-0 right-0 p-6 opacity-20">
<span class="material-symbols-outlined text-8xl text-primary" data-icon="auto_awesome">auto_awesome</span>
</div>
<p class="text-primary font-label text-[10px] uppercase tracking-widest font-bold mb-2">Daily Digest</p>
<h3 class="font-display text-xl font-bold leading-tight">Your shopping impact reduced carbon by 12% this month.</h3>
</div>
<div class="glass-card p-6 rounded-full aspect-square flex flex-col items-center justify-center text-center">
<span class="text-4xl font-display font-black text-primary mb-2">A+</span>
<span class="text-[10px] font-label uppercase tracking-widest text-on-surface-variant">Global Rank</span>
</div>
<div class="glass-card p-6 rounded-full aspect-square flex flex-col items-center justify-center text-center">
<span class="material-symbols-outlined text-3xl text-primary mb-2" data-icon="query_stats">query_stats</span>
<span class="text-[10px] font-label uppercase tracking-widest text-on-surface-variant">Trends</span>
</div>
</div>
</section>
</main>
<!-- AI Assistant FAB -->
<button class="fixed bottom-24 right-6 w-16 h-16 rounded-full bg-gradient-to-br from-primary to-secondary-container flex items-center justify-center shadow-[0px_10px_30px_rgba(78,222,163,0.4)] z-50 hover:scale-110 active:scale-95 transition-all group">
<span class="material-symbols-outlined text-on-primary text-3xl group-hover:rotate-12 transition-transform" data-icon="auto_awesome" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
<!-- Pulse Effect -->
<span class="absolute inset-0 rounded-full bg-primary/20 animate-ping"></span>
</button>
<!-- BottomNavBar Shell -->
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 py-3 bg-gradient-to-t from-[#0f131f] to-transparent bg-[#262a37]/60 backdrop-blur-md rounded-t-3xl shadow-[0px_-10px_30px_rgba(0,0,0,0.3)]">
<a class="flex flex-col items-center justify-center bg-emerald-500/20 text-emerald-400 rounded-xl px-3 py-1 scale-110 duration-300 ease-out" href="#">
<span class="material-symbols-outlined" data-icon="explore">explore</span>
<span class="font-inter text-[10px] font-medium uppercase tracking-widest mt-1">Discover</span>
</a>
<a class="flex flex-col items-center justify-center text-slate-400 hover:text-emerald-300 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="barcode_scanner">barcode_scanner</span>
<span class="font-inter text-[10px] font-medium uppercase tracking-widest mt-1">Scan</span>
</a>
<a class="flex flex-col items-center justify-center text-slate-400 hover:text-emerald-300 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="auto_awesome">auto_awesome</span>
<span class="font-inter text-[10px] font-medium uppercase tracking-widest mt-1">AI Assistant</span>
</a>
<a class="flex flex-col items-center justify-center text-slate-400 hover:text-emerald-300 transition-all" href="#">
<span class="material-symbols-outlined" data-icon="auto_stories">auto_stories</span>
<span class="font-inter text-[10px] font-medium uppercase tracking-widest mt-1">Library</span>
</a>
</nav>
</body></html>