-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcookie-settings.html
More file actions
299 lines (297 loc) · 17.2 KB
/
Copy pathcookie-settings.html
File metadata and controls
299 lines (297 loc) · 17.2 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
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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Cookie Preferences | UnioGate Infrastructure</title>
<link rel="icon" href="LogoMark%20Blue.svg" type="image/svg+xml"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@300;400;500;600&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: {
"deep-blue": "#253E86",
"teal": "#2CBAA4",
"electric-purple": "#6D4CFF",
"deep-navy": "#10182A",
"surface-navy": "#161F35",
"surface-lighter": "#1E2943",
"primary": "#B5C4FF",
"on-surface": "#D1D5DB",
"outline-variant": "#2D3748"
},
fontFamily: {
"headline": ["Plus Jakarta Sans", "sans-serif"],
"body": ["Plus Jakarta Sans", "sans-serif"],
},
borderRadius: {
"DEFAULT": "0px",
"lg": "0px",
"xl": "0px",
"2xl": "0px",
"full": "9999px"
},
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.kinetic-blur {
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.vault-gradient {
background: radial-gradient(circle at top left, rgba(37, 62, 134, 0.15), transparent),
radial-gradient(circle at bottom right, rgba(109, 76, 255, 0.1), transparent);
}
.glass-panel {
background: rgba(22, 31, 53, 0.7);
border: 1px solid rgba(181, 196, 255, 0.1);
}
/* Design System ROUND_FOUR application (0px based on prompt interpretation of system name vs token)
Applying sharp edges as per 'ROUND_FOUR' typically meaning 4px or sharp in some systems,
but 'roundness: ROUND_FOUR' usually indicates a very specific minimal radius.
In this implementation, I will use minimal 4px/0px aesthetic as defined in the config override. */
</style>
</head>
<body class="bg-deep-navy text-on-surface font-body selection:bg-teal selection:text-deep-navy min-h-screen flex flex-col">
<!-- Navigation -->
<header class="fixed top-0 w-full z-50 kinetic-blur bg-deep-navy/80 border-b border-white/5">
<div class="flex items-center justify-between px-8 py-5 max-w-7xl mx-auto">
<a class="flex items-center gap-3 group" href="/">
<div class="bg-deep-blue p-2 rounded-lg overflow-hidden flex items-center justify-center">
<img alt="" src="LogoMark%20Blue.svg" width="28" height="28" class="h-7 w-7"/>
</div>
<span class="text-2xl font-extrabold tracking-tight text-white font-headline">UnioGate</span>
</a>
<nav class="hidden lg:flex items-center gap-10">
<a class="text-on-surface/70 hover:text-white transition-all font-headline font-semibold text-sm tracking-wide" href="/how-it-works">How it Works</a>
<a class="text-on-surface/70 hover:text-white transition-all font-headline font-semibold text-sm tracking-wide" href="/vision">Vision</a>
<a class="text-on-surface/70 hover:text-white transition-all font-headline font-semibold text-sm tracking-wide" href="/connect">Connect</a>
<a class="text-teal font-headline font-semibold text-sm tracking-wide border-b-2 border-teal pb-1" href="/cookie-settings">Legal</a>
</nav>
<button type="button" data-waitlist-open class="bg-white/5 border border-white/10 px-5 py-2 text-xs font-bold uppercase tracking-widest text-white hover:bg-white/10 transition-colors rounded-xl">
Pre-launch Access
</button>
</div>
</header>
<div class="flex-1 flex pt-24 vault-gradient">
<!-- Desktop Sidebar -->
<aside class="hidden lg:flex flex-col w-80 h-[calc(100vh-96px)] sticky top-24 px-8 py-4 border-r border-white/5">
<h2 class="text-xs font-bold text-white/40 uppercase tracking-[0.2em] mb-8 px-4">Legal Framework</h2>
<nav class="space-y-1">
<a class="flex items-center gap-4 px-4 py-3.5 text-on-surface/60 hover:bg-white/5 hover:text-white transition-all group" href="/privacy-policy">
<span class="material-symbols-outlined text-xl group-hover:text-teal" data-icon="policy">policy</span>
<span class="text-sm font-medium">Privacy Policy</span>
</a>
<a class="flex items-center gap-4 px-4 py-3.5 text-on-surface/60 hover:bg-white/5 hover:text-white transition-all group" href="/terms-of-service">
<span class="material-symbols-outlined text-xl group-hover:text-teal" data-icon="gavel">gavel</span>
<span class="text-sm font-medium">Terms of Service</span>
</a>
<a class="flex items-center gap-4 px-4 py-3.5 text-on-surface/60 hover:bg-white/5 hover:text-white transition-all group" href="/security">
<span class="material-symbols-outlined text-xl group-hover:text-teal" data-icon="security">security</span>
<span class="text-sm font-medium">Data Security</span>
</a>
<a class="flex items-center gap-4 px-4 py-3.5 bg-deep-blue/20 text-teal border-l-2 border-teal transition-all group" href="/cookie-settings">
<span class="material-symbols-outlined text-xl" data-icon="cookie">cookie</span>
<span class="text-sm font-bold">Cookie Settings</span>
</a>
<a class="flex items-center gap-4 px-4 py-3.5 text-on-surface/60 hover:bg-white/5 hover:text-white transition-all group" href="/security">
<span class="material-symbols-outlined text-xl group-hover:text-teal" data-icon="verified_user">verified_user</span>
<span class="text-sm font-medium">Compliance</span>
</a>
</nav>
<div class="mt-auto p-6 bg-surface-navy border border-white/5">
<p class="text-[10px] font-bold text-white/40 uppercase tracking-widest mb-4">Latest Update</p>
<p class="text-xs text-on-surface/60 mb-4">Policy version 2.4.1<br/>Effective: May 24, 2024</p>
<a class="text-[10px] font-bold uppercase tracking-widest text-teal hover:underline flex items-center gap-2" href="#">
Download PDF <span class="material-symbols-outlined text-xs">open_in_new</span>
</a>
</div>
</aside>
<!-- Main Workspace -->
<main class="flex-1 px-8 lg:px-16 py-8 max-w-6xl">
<header class="mb-12">
<div class="flex items-center gap-2 mb-4">
<span class="h-px w-8 bg-teal"></span>
<span class="text-xs font-bold text-teal uppercase tracking-[0.3em]">Privacy Transparency</span>
</div>
<h1 class="font-headline text-4xl lg:text-6xl font-extrabold tracking-tight text-white mb-6">
Your Data <span class="text-teal">Sovereignty</span>.
</h1>
<p class="text-on-surface/70 text-lg max-w-3xl leading-relaxed font-light">
At UnioGate, we believe in radical transparency. Manage your cookie preferences to control how we handle your information as we build the future of secure digital infrastructure.
</p>
</header>
<!-- Interactive Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Essential Cookies (Large) -->
<div class="lg:col-span-7 glass-panel p-8 flex flex-col justify-between hover:border-white/20 transition-all group">
<div>
<div class="flex justify-between items-start mb-10">
<div class="p-4 bg-deep-blue/30 border border-white/5">
<span class="material-symbols-outlined text-teal text-3xl" data-icon="lock">lock</span>
</div>
<div class="flex flex-col items-end">
<span class="text-[10px] uppercase tracking-[0.2em] font-bold text-white/40 mb-1">Classification</span>
<span class="text-xs font-bold text-teal bg-teal/10 px-3 py-1 border border-teal/20">STRICTLY NECESSARY</span>
</div>
</div>
<h3 class="font-headline text-2xl font-bold text-white mb-4">Core Infrastructure</h3>
<p class="text-on-surface/60 text-base leading-relaxed mb-6 max-w-xl">
These cookies are essential for the website to function properly. They handle security handshakes, prevent CSRF attacks, and manage basic session states required for website stability.
</p>
</div>
<div class="flex items-center justify-between pt-6 border-t border-white/5">
<div class="flex gap-4">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-white/30 uppercase tracking-widest">Type</span>
<span class="text-xs text-white/70">Functional</span>
</div>
<div class="w-[1px] bg-white/10"></div>
<div class="flex flex-col">
<span class="text-[10px] font-bold text-white/30 uppercase tracking-widest">Persistence</span>
<span class="text-xs text-white/70">Session-based</span>
</div>
</div>
<div class="flex items-center gap-3">
<span class="text-[10px] font-bold text-white/40 uppercase tracking-widest">Required</span>
<div class="w-12 h-6 bg-white/5 rounded-full relative opacity-50 cursor-not-allowed border border-white/10">
<div class="absolute right-1 top-1 w-4 h-4 bg-teal rounded-full shadow-[0_0_8px_rgba(44,186,164,0.5)]"></div>
</div>
</div>
</div>
</div>
<!-- Analytical Cookies -->
<div class="lg:col-span-5 glass-panel p-8 flex flex-col justify-between hover:border-teal/30 transition-all group">
<div>
<div class="flex justify-between items-start mb-10">
<div class="p-4 bg-electric-purple/10 border border-electric-purple/20 group-hover:bg-electric-purple/20 transition-colors">
<span class="material-symbols-outlined text-electric-purple text-3xl" data-icon="insights">insights</span>
</div>
</div>
<h3 class="font-headline text-2xl font-bold text-white mb-4">Performance Metrics</h3>
<p class="text-on-surface/60 text-sm leading-relaxed mb-6">
We use telemetry data to monitor site performance and loading speeds. This anonymous data helps us optimize the pre-launch experience for our global user base.
</p>
</div>
<div class="flex items-center justify-between pt-6 border-t border-white/5">
<span class="text-[10px] font-bold text-electric-purple uppercase tracking-widest">Analytics Node</span>
<label class="relative inline-flex items-center cursor-pointer">
<input id="ug-cookie-analytics" checked="" class="sr-only peer" type="checkbox"/>
<div class="w-14 h-7 bg-white/5 border border-white/10 rounded-full peer peer-checked:after:translate-x-7 after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-on-surface after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-electric-purple peer-checked:after:bg-white"></div>
</label>
</div>
</div>
<!-- Marketing Cookies -->
<div class="lg:col-span-12 glass-panel p-8 flex flex-col lg:flex-row items-center gap-10 hover:border-white/20 transition-all group border-l-4 border-l-teal/40">
<div class="p-6 bg-teal/10 border border-teal/20 shrink-0 group-hover:bg-teal/20 transition-colors">
<span class="material-symbols-outlined text-teal text-5xl" data-icon="campaign">campaign</span>
</div>
<div class="flex-1 text-center lg:text-left">
<div class="flex flex-col lg:flex-row lg:items-center gap-4 mb-3">
<h3 class="font-headline text-2xl font-bold text-white">Targeted Communications</h3>
<span class="inline-block px-3 py-1 bg-white/5 text-[10px] font-bold text-white/60 border border-white/10 uppercase tracking-widest mx-auto lg:mx-0">Marketing</span>
</div>
<p class="text-on-surface/60 text-base leading-relaxed max-w-2xl">
Enables us to reach you with relevant updates about our launch timeline and feature releases. This node helps us understand which aspects of UnioGate are most interesting to our visitors.
</p>
</div>
<div class="shrink-0">
<label class="relative inline-flex items-center cursor-pointer">
<input id="ug-cookie-marketing" class="sr-only peer" type="checkbox"/>
<div class="w-20 h-10 bg-white/5 border border-white/10 rounded-full peer peer-checked:after:translate-x-10 after:content-[''] after:absolute after:top-[6px] after:left-[6px] after:bg-white/20 after:rounded-full after:h-7 after:w-7 after:transition-all peer-checked:bg-teal peer-checked:after:bg-white"></div>
</label>
</div>
</div>
<!-- Info Box -->
<div class="lg:col-span-12 mt-4 p-[1px] bg-gradient-to-r from-teal/30 via-transparent to-electric-purple/30">
<div class="bg-surface-navy/90 p-8 flex flex-col md:flex-row justify-between items-center gap-8 backdrop-blur-md">
<div class="flex items-center gap-6">
<div class="w-16 h-16 bg-white/5 flex items-center justify-center border border-white/10">
<span class="material-symbols-outlined text-white/40 text-3xl" data-icon="article">article</span>
</div>
<div>
<h4 class="font-headline text-xl font-bold text-white mb-1">Our Commitment</h4>
<p class="text-on-surface/50 text-sm">We never sell personal data. View our full privacy commitment for details on our zero-trust architecture.</p>
</div>
</div>
<a class="bg-white text-deep-navy px-10 py-4 font-headline font-extrabold text-xs uppercase tracking-widest flex items-center gap-3 hover:bg-teal hover:text-white transition-all shadow-xl active:scale-95" href="/privacy-policy">
<span class="material-symbols-outlined text-sm font-bold" data-icon="visibility">visibility</span>
View Privacy Policy
</a>
</div>
</div>
</div>
<!-- Desktop Action Bar -->
<div class="mt-16 flex flex-col sm:flex-row gap-6 items-center justify-end border-t border-white/5 pt-10">
<button type="button" data-ug-reject-nonessential class="text-white/40 hover:text-white transition-all font-headline font-bold text-xs uppercase tracking-[0.2em]">
Reject Non-Essential
</button>
<button type="button" data-ug-save-cookie-prefs class="bg-deep-blue text-white border border-white/10 px-12 py-5 font-headline font-extrabold text-xs uppercase tracking-[0.3em] hover:bg-deep-blue/80 hover:border-teal/50 transition-all shadow-[0_10px_30px_-10px_rgba(37,62,134,0.5)] active:translate-y-1">
Save Preferences
</button>
</div>
</main>
</div>
<!-- Desktop Footer -->
<footer class="bg-deep-navy w-full py-16 border-t border-white/5 mt-auto relative z-10">
<div class="max-w-7xl mx-auto px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
<div class="md:col-span-1">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-teal text-xl" data-icon="shield">shield</span>
<span class="text-xl font-extrabold tracking-tighter text-white font-headline">UnioGate</span>
</div>
<p class="text-on-surface/50 text-xs leading-relaxed max-w-xs">
Architecting secure data pipelines and sovereign infrastructure for the next generation of decentralized enterprise operations.
</p>
</div>
<div>
<h5 class="text-white font-headline font-bold text-sm mb-6 uppercase tracking-widest">Platform</h5>
<ul class="space-y-4">
<li><a class="text-on-surface/50 hover:text-teal text-xs transition-colors" href="#">Infrastructure</a></li>
<li><a class="text-on-surface/50 hover:text-teal text-xs transition-colors" href="#">Security</a></li>
<li><a class="text-on-surface/50 hover:text-teal text-xs transition-colors" href="#">Docs</a></li>
</ul>
</div>
<div>
<h5 class="text-white font-headline font-bold text-sm mb-6 uppercase tracking-widest">Company</h5>
<ul class="space-y-4">
<li><a class="text-on-surface/50 hover:text-teal text-xs transition-colors" href="#">About</a></li>
<li><a class="text-on-surface/50 hover:text-teal text-xs transition-colors" href="#">Contact</a></li>
<li><a class="text-on-surface/50 hover:text-teal text-xs transition-colors" href="#">Legal</a></li>
</ul>
</div>
<div>
<h5 class="text-white font-headline font-bold text-sm mb-6 uppercase tracking-widest">Follow</h5>
<div class="flex gap-4">
<span class="material-symbols-outlined text-white/40 hover:text-white cursor-pointer transition-colors" data-icon="hub">hub</span>
<span class="material-symbols-outlined text-white/40 hover:text-white cursor-pointer transition-colors" data-icon="lan">lan</span>
<span class="material-symbols-outlined text-white/40 hover:text-white cursor-pointer transition-colors" data-icon="terminal">terminal</span>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-white/5 gap-8">
<div class="flex flex-col items-center md:items-start gap-2">
<p class="font-body text-[10px] uppercase tracking-[0.3em] text-white/30">© 2026 UnioGate Infrastructure. All rights reserved.</p>
</div>
<div class="flex gap-8 items-center">
<a class="font-body text-[10px] uppercase tracking-widest text-white/40 hover:text-teal transition-colors" href="/cookie-settings">Cookie Policy</a>
<div class="w-1 h-1 bg-white/10 rounded-full"></div>
<a class="font-body text-[10px] uppercase tracking-widest text-white/40 hover:text-teal transition-colors" href="/privacy-policy">Privacy Hub</a>
</div>
</div>
</div>
</footer>
<script src="assets/waitlist-modal.js" defer></script>
<script src="assets/waitlist-submit-handler.js" defer></script>
<script src="assets/cookie-consent.js" defer></script>
<script src="assets/footer-links.js" defer></script>
</body></html>