PlanetFix/index.html at master · UditMishra2008/PlanetFix · GitHub

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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>CarbonZero | Restore the Balance</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #060e20;
            color: #dee5ff;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-card {
            background: rgba(20, 31, 56, 0.5);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(64, 72, 93, 0.1);
            box-shadow: inset 0 1px 1px rgba(105, 246, 184, 0.05);
        }
        .bio-glow {
            filter: blur(80px);
            opacity: 0.15;
            pointer-events: none;
        }
    </style>
<script id="tailwind-config">
        tailwind.config = {
          darkMode: "class",
          theme: {
            extend: {
              "colors": {
                      "primary": "#69f6b8",
                      "on-error": "#490006",
                      "outline-variant": "#40485d",
                      "background": "#060e20",
                      "error-dim": "#d7383b",
                      "tertiary-fixed-dim": "#aaead0",
                      "on-tertiary-container": "#22614d",
                      "secondary-fixed-dim": "#57edb1",
                      "surface-tint": "#69f6b8",
                      "tertiary-dim": "#9ddcc2",
                      "surface-container-high": "#141f38",
                      "surface-container-highest": "#192540",
                      "on-secondary-container": "#e0ffec",
                      "on-primary-fixed": "#00452d",
                      "surface-variant": "#192540",
                      "surface-bright": "#1f2b49",
                      "primary-container": "#06b77f",
                      "on-secondary-fixed-variant": "#006948",
                      "tertiary-container": "#b8f9de",
                      "on-error-container": "#ffa8a3",
                      "outline": "#6d758c",
                      "on-tertiary-fixed-variant": "#2e6b57",
                      "error-container": "#9f0519",
                      "surface-dim": "#060e20",
                      "on-tertiary-fixed": "#074e3b",
                      "secondary-dim": "#57edb1",
                      "primary-dim": "#58e7ab",
                      "inverse-primary": "#006d4a",
                      "error": "#ff716c",
                      "on-surface-variant": "#a3aac4",
                      "secondary-container": "#006c4b",
                      "primary-fixed-dim": "#58e7ab",
                      "tertiary-fixed": "#b8f9de",
                      "surface-container-lowest": "#000000",
                      "tertiary": "#e7fff3",
                      "on-primary": "#005a3c",
                      "inverse-on-surface": "#4d556b",
                      "surface-container": "#0f1930",
                      "on-primary-container": "#002919",
                      "on-secondary-fixed": "#004931",
                      "surface-container-low": "#091328",
                      "on-primary-fixed-variant": "#006544",
                      "inverse-surface": "#faf8ff",
                      "on-secondary": "#005e40",
                      "on-surface": "#dee5ff",
                      "surface": "#060e20",
                      "secondary-fixed": "#68fcbf",
                      "on-tertiary": "#2c6a55",
                      "on-background": "#dee5ff",
                      "secondary": "#68fcbf",
                      "primary-fixed": "#69f6b8"
              },
              "borderRadius": {
                      "DEFAULT": "1rem",
                      "lg": "2rem",
                      "xl": "3rem",
                      "full": "9999px"
              },
              "fontFamily": {
                      "headline": ["Plus Jakarta Sans"],
                      "body": ["Plus Jakarta Sans"],
                      "label": ["Plus Jakarta Sans"]
              }
            },
          },
        }
    </script>
</head>
<body class="selection:bg-primary selection:text-on-primary">
<div class="fixed inset-0 overflow-hidden -z-10">
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-primary bio-glow rounded-full"></div>
<div class="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] bg-primary-container bio-glow rounded-full"></div>
<div class="absolute top-[30%] left-[40%] w-[30%] h-[30%] bg-secondary bio-glow rounded-full"></div>
</div>
<nav class="fixed top-0 w-full z-50 flex justify-between items-center px-8 h-20 bg-[#060e20]/80 backdrop-blur-xl shadow-[0_20px_40px_rgba(6,14,32,0.4)]">
<div class="flex items-center gap-8">
<span class="text-2xl font-bold tracking-tighter text-emerald-400 font-['Plus_Jakarta_Sans']">CarbonZero</span>
<div class="hidden md:flex gap-8">
<a class="text-slate-400 hover:text-emerald-300 transition-colors font-semibold font-['Plus_Jakarta_Sans'] tracking-tight" href="rewards.html">Marketplace</a>
<a class="text-slate-400 hover:text-emerald-300 transition-colors font-semibold font-['Plus_Jakarta_Sans'] tracking-tight" href="#">Governance</a>
<a class="text-emerald-400 border-b-2 border-emerald-400 pb-1 font-semibold font-['Plus_Jakarta_Sans'] tracking-tight" href="calculator.html">Impact</a>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex flex-col items-end">
<span class="text-emerald-400 font-bold text-sm tracking-tight">2,450 COIN</span>
<span class="text-slate-500 text-[10px] uppercase font-bold tracking-widest">LVL 12</span>
</div>
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-all duration-300 active:scale-95">notifications</button>
<div class="w-10 h-10 rounded-full border border-primary/20 p-0.5 overflow-hidden">
<img alt="User profile" class="w-full h-full object-cover rounded-full" data-alt="Close up portrait of a futuristic persona with subtle bioluminescent skin markings and soft neon green lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB5w880ASfOK5bJQOEeIRuiBGpMCJOHmdetlSHJt7lPF3yWHLhj4ISIqDdmgqBi0dZ00LNlTGjwXBuEeK7h2xme1ShMO_BL3XORFGJpkhM0kopBkDIqewn57MUUqRm7I5m2xr-IlALPEeCvlICpXraFyiz_7dc1VXZgwCc5mLPaEFVvNPZnyDhrFsi5h14icgunxWXX6eHPwltp2GaUiytniAwx4K-PqCN_dAwnC_2ImjmtWAvmzTOQl2r9IjxKTNqkvgXhHT8_3mby"/>
</div>
</div>
</nav>
<main class="relative pt-32 pb-24 overflow-hidden">
<section class="max-w-7xl mx-auto px-8 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="relative z-10">
<div class="inline-flex items-center gap-2 bg-surface-container-high/50 border border-outline-variant/10 px-4 py-2 rounded-full mb-8 backdrop-blur-md">
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
<span class="text-xs font-bold tracking-widest uppercase text-on-surface-variant">Live Network Active</span>
</div>
<h1 class="text-6xl md:text-8xl font-extrabold tracking-[-0.04em] leading-tight mb-6 text-on-surface">
                    Restore the <br/>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary via-secondary to-primary-container">Balance.</span>
</h1>
<p class="text-body-lg text-on-surface-variant max-w-lg mb-10 leading-relaxed text-lg">
                    Decentralized ecosystem restoration powered by high-precision biological data. Deploy capital where nature needs it most.
                </p>
<div class="flex flex-wrap gap-4">
<button class="bg-primary text-on-primary px-8 py-4 rounded-full font-bold text-lg hover:shadow-[0_0_20px_rgba(105,246,184,0.5)] transition-all duration-300 active:scale-95">
                        <a href="login.html" style="text-decoration:none; color:inherit;">Start Restoration</a>
                    </button>
<button class="bg-surface-variant/40 text-primary border border-primary/20 px-8 py-4 rounded-full font-bold text-lg hover:bg-primary/10 transition-all duration-300 backdrop-blur-md">
                        View Protocol
                    </button>
</div>
<div class="mt-16 flex gap-12">
<div class="flex flex-col">
<span class="text-3xl font-bold text-primary tracking-tighter">1.2M+</span>
<span class="text-xs uppercase font-bold tracking-widest text-slate-500">Trees Planted</span>
</div>
<div class="flex flex-col">
<span class="text-3xl font-bold text-primary tracking-tighter">480k</span>
<span class="text-xs uppercase font-bold tracking-widest text-slate-500">Tons CO2 Offset</span>
</div>
<div class="flex flex-col">
<span class="text-3xl font-bold text-primary tracking-tighter">$14.2M</span>
<span class="text-xs uppercase font-bold tracking-widest text-slate-500">Yield Distributed</span>
</div>
</div>
</div>
<div class="relative flex justify-center items-center">
<div class="absolute w-[120%] h-[120%] bg-primary/5 rounded-full blur-[100px]"></div>
<div class="relative w-full aspect-square max-w-[500px] group">
<div class="absolute inset-0 bg-gradient-to-tr from-primary/20 to-transparent rounded-full animate-pulse"></div>
<div class="relative w-full h-full rounded-full border-[0.5px] border-primary/30 p-8 flex justify-center items-center">
<div class="w-full h-full rounded-full border-[0.5px] border-primary/20 flex justify-center items-center overflow-hidden">
<img alt="Planet Earth Visual" class="w-full h-full object-cover mix-blend-screen opacity-80 scale-110 group-hover:scale-125 transition-transform duration-[10s]" data-alt="Hyper-realistic glowing 3D digital globe showing bioluminescent data networks across continents in deep space" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDNfmXKUc7fSZXg6HGdSyQtXMFcpMAxwfckN9KMGNlI7wFJWGRW9srN6QWTbKBDBuMwHzmFRgYdOBaV5A9zZtjE3HvwGGn9qISHWVKW_SVWkSluO4kS7NxMUyvav6sa4asrwBhBy-QmP9jl-TfCG6Yox0ReluwJHkC23_W-ZPw6I7zzG59Q9g1XC_k5_SG-5YaEwqVyhJv3RUCt4Q2iLzokh3lbbT8pzADdRrbKKeMTqvO0iQAMayQtbi5_gBi64_UcgF3eIdqQKxi5"/>
</div>
</div>
<div class="absolute -top-4 -right-4 glass-card p-6 rounded-lg border border-primary/20">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-primary text-xl">eco</span>
<span class="text-xs font-bold uppercase tracking-widest text-slate-400">Atmospheric Health</span>
</div>
<div class="text-2xl font-bold text-on-surface">98.4<span class="text-primary text-sm ml-1">%</span></div>
</div>
<div class="absolute bottom-10 -left-10 glass-card p-6 rounded-lg border border-primary/20">
<div class="flex items-center gap-3 mb-2">
<span class="material-symbols-outlined text-primary text-xl">monitoring</span>
<span class="text-xs font-bold uppercase tracking-widest text-slate-400">Carbon Velocity</span>
</div>
<div class="flex items-center gap-1">
<span class="text-2xl font-bold text-on-surface">↑ 12.4</span>
<span class="text-primary text-xs font-bold">kt/h</span>
</div>
</div>
</div>
</div>
</section>
<section class="max-w-7xl mx-auto px-8 mt-48">
<div class="text-center mb-20">
<h2 class="text-sm font-bold uppercase tracking-[0.2em] text-primary mb-4">Precision Restoration</h2>
<h3 class="text-4xl md:text-5xl font-bold tracking-tight text-on-surface">Bio-Digital Infrastructure</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="glass-card p-10 rounded-xl hover:translate-y-[-8px] transition-all duration-500 group">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-8 border border-primary/20 group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
<span class="material-symbols-outlined text-3xl">insights</span>
</div>
<h4 class="text-2xl font-bold mb-4 text-on-surface">Real-time Analysis</h4>
<p class="text-on-surface-variant leading-relaxed">Direct telemetry from hyper-local sensor nodes tracking soil nutrients, biodiversity, and carbon sequestration rates in millisecond intervals.</p>
</div>
<div class="glass-card p-10 rounded-xl hover:translate-y-[-8px] transition-all duration-500 group">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-8 border border-primary/20 group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
<span class="material-symbols-outlined text-3xl">military_tech</span>
</div>
<h4 class="text-2xl font-bold mb-4 text-on-surface">Elite Rewards</h4>
<p class="text-on-surface-variant leading-relaxed">Stake your COIN tokens in active restoration projects. Earn verified green credits and exclusive access to ecological governance DAO proposals.</p>
</div>
<div class="glass-card p-10 rounded-xl hover:translate-y-[-8px] transition-all duration-500 group">
<div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-8 border border-primary/20 group-hover:bg-primary group-hover:text-on-primary transition-colors duration-300">
<span class="material-symbols-outlined text-3xl">hub</span>
</div>
<h4 class="text-2xl font-bold mb-4 text-on-surface">Global Network</h4>
<p class="text-on-surface-variant leading-relaxed">A borderless protocol connecting conservationists, data scientists, and impact investors through an immutable bio-registry.</p>
</div>
</div>
</section>
<section class="max-w-7xl mx-auto px-8 mt-48">
<div class="relative rounded-xl overflow-hidden glass-card p-1">
<div class="bg-surface-container-low/80 p-12 md:p-20 rounded-lg flex flex-col md:flex-row items-center gap-12">
<div class="flex-1">
<h2 class="text-4xl md:text-6xl font-bold tracking-tighter mb-8">Ready to seed the future?</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<span class="material-symbols-outlined text-primary bg-primary/10 p-2 rounded-lg">task_alt</span>
<div>
<h5 class="font-bold text-on-surface">Autonomous Verification</h5>
<p class="text-sm text-on-surface-variant">Oracle-based proof of restoration via satellite imaging.</p>
</div>
</div>
<div class="flex items-start gap-4">
<span class="material-symbols-outlined text-primary bg-primary/10 p-2 rounded-lg">task_alt</span>
<div>
<h5 class="font-bold text-on-surface">Yield Generation</h5>
<p class="text-sm text-on-surface-variant">Automated carbon credit liquidation and distribution.</p>
</div>
</div>
</div>
</div>
<div class="flex-shrink-0 w-full md:w-auto">
<button class="w-full md:w-auto bg-primary text-on-primary px-12 py-6 rounded-full font-bold text-xl hover:shadow-[0_0_30px_rgba(105,246,184,0.4)] transition-all duration-300 active:scale-95">
                            <a href="login.html" style="text-decoration:none; color:inherit;">Connect Wallet</a>
                        </button>
</div>
</div>
<div class="absolute top-0 right-0 w-64 h-64 bg-primary bio-glow opacity-10"></div>
</div>
</section>
</main>
<footer class="w-full flex flex-col md:flex-row justify-between items-center gap-6 py-12 px-8 bg-[#060e20] bg-gradient-to-t from-[#091328] to-transparent pt-20 border-t border-outline-variant/10">
<div class="flex flex-col items-center md:items-start gap-4">
<span class="text-emerald-500 font-bold tracking-tighter text-xl">CarbonZero</span>
<p class="font-['Plus_Jakarta_Sans'] text-xs font-light text-slate-400">© 2024 CarbonZero Protocol. Built for the Bio-Digital Era.</p>
</div>
<div class="flex gap-8">
<a class="font-['Plus_Jakarta_Sans'] text-xs font-light text-slate-500 hover:text-emerald-400 transition-opacity" href="#">Privacy</a>
<a class="font-['Plus_Jakarta_Sans'] text-xs font-light text-slate-500 hover:text-emerald-400 transition-opacity" href="#">Terms</a>
<a class="font-['Plus_Jakarta_Sans'] text-xs font-light text-slate-500 hover:text-emerald-400 transition-opacity" href="#">Whitepaper</a>
<a class="font-['Plus_Jakarta_Sans'] text-xs font-light text-slate-500 hover:text-emerald-400 transition-opacity" href="#">API</a>
</div>
<div class="flex gap-4">
<button class="w-10 h-10 rounded-full border border-outline-variant/20 flex items-center justify-center text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-lg">public</span>
</button>
<button class="w-10 h-10 rounded-full border border-outline-variant/20 flex items-center justify-center text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined text-lg">terminal</span>
</button>
</div>
</footer>
</body></html>