-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
384 lines (340 loc) · 17.6 KB
/
index.html
File metadata and controls
384 lines (340 loc) · 17.6 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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Learn cybersecurity, shop for items — all in one place." />
<meta name="keywords" content="cybersecurity, 3D print, shop, serhii, learn" />
<meta name="author" content="Serhii" />
<meta name="google-site-verification" content="WnqRZaSz9r8kIwmoRkG3jvT2X68B3tIiqCAyFY2vo8g" />
<title>Serhii</title>
<!-- TailwindCSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwind custom config -->
<script>
tailwind.config = {
theme: {
extend: {
colors: { brand: "#10b981" },
},
},
};
</script>
<style>
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.float { animation: float 3s ease-in-out infinite; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
}
.gradient-text {
background: linear-gradient(to right, #10b981, #34d399);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex flex-col">
<!-- NAVBAR -->
<header class="fixed inset-x-0 top-0 z-50 bg-gray-900/90 backdrop-blur border-b border-white/10">
<nav class="mx-auto flex max-w-5xl items-center justify-between px-4 sm:px-6 lg:px-8 h-14" aria-label="Global">
<!-- Logo -->
<div class="flex items-center gap-2">
<a href="/" class="flex items-center gap-2 group">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand group-hover:scale-110 transition-transform">
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
<path d="M12 22V12"/>
<polyline points="3.29 7 12 12 20.71 7"/>
<path d="m7.5 4.27 9 5.15"/>
</svg>
<span class="font-bold text-lg">Serhii</span>
</a>
</div>
<!-- Mobile menu button -->
<button
id="mobile-menu-button"
type="button"
class="inline-flex items-center justify-center rounded-md p-2 text-gray-300 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-2 focus:ring-offset-gray-900 lg:hidden"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h12" />
</svg>
</button>
<!-- Desktop right side -->
<div class="hidden lg:flex lg:items-center lg:gap-4">
<!-- Login button (shown when logged out) -->
<button
id="login-btn"
onclick="signInWithGoogle()"
class="px-4 py-2 rounded-md bg-brand text-black font-semibold hover:bg-brand/80 transition"
>
Login
</button>
<!-- User info (shown when logged in) -->
<div id="user-nav" class="hidden flex items-center gap-3 text-sm">
<span id="user-name" class="text-gray-200"></span>
<button
onclick="logout()"
class="rounded-md p-2 bg-gray-800 hover:bg-gray-700 transition text-gray-200 hover:text-white"
title="Log out">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h240q17 0 28.5 11.5T480-160q0 17-11.5 28.5T440-120H200Zm487-320H400q-17 0-28.5-11.5T360-480q0-17 11.5-28.5T400-520h287l-75-75q-11-11-11-27t11-28q11-12 28-12.5t29 11.5l143 143q12 12 12 28t-12 28L669-309q-12 12-28.5 11.5T612-310q-11-12-10.5-28.5T613-366l74-74Z"/></svg>
</button>
</div>
</div>
</nav>
<!-- Mobile menu panel -->
<div id="mobile-menu" class="lg:hidden hidden border-t border-white/10 bg-gray-900/95 backdrop-blur">
<div class="space-y-1 px-4 py-3">
<!-- Shop + Learn links for mobile -->
<a href="/shop" class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-gray-800">
Shop
</a>
<a href="/learn" class="block rounded-md px-3 py-2 text-base font-medium text-gray-200 hover:bg-gray-800">
Learn
</a>
<!-- Mobile login -->
<button
id="mobile-login"
onclick="signInWithGoogle()"
class="mt-2 w-full rounded-md bg-brand px-3 py-2 text-sm font-semibold text-black hover:bg-brand/80"
>
Login
</button>
<!-- Mobile user info (when logged in) -->
<div id="mobile-user" class="hidden mt-2 flex items-center justify-between rounded-md border border-white/10 px-3 py-2 text-sm">
<span id="mobile-user-name" class="text-gray-200 truncate"></span>
<button onclick="logout()" class="text-gray-300 hover:text-white text-xs">
Logout
</button>
</div>
</div>
</div>
</header>
<!-- MAIN -->
<main class="flex-1">
<!-- HERO -->
<div class="relative isolate px-6 pt-32 lg:px-8">
<!-- TOP BG BLOB -->
<div aria-hidden="true"
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
<div
class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[40rem]
-translate-x-1/2 rotate-30 bg-gradient-to-tr from-emerald-500 via-cyan-400 to-blue-500 opacity-30
sm:left-[calc(50%-30rem)] sm:w-[70rem]">
</div>
</div>
<!-- HERO CONTENT --> <div class="mx-auto max-w-3xl py-32 sm:py-48 lg:py-56 text-center">
<div class="mb-4">
<span class="inline-flex items-center gap-2 rounded-full bg-brand/10 px-3 py-1 text-sm font-medium text-brand ring-1 ring-inset ring-brand/20">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
Your cybersecurity hub
</span>
</div>
<h1 class="text-5xl font-bold tracking-tight sm:text-7xl">
Everything <span class="gradient-text">all in one.</span>
</h1>
<p class="mt-8 text-lg sm:text-xl text-gray-400 max-w-2xl mx-auto">
Master cybersecurity skills, discover unique products, and join a community of tech enthusiasts—all in one seamless platform.
</p>
<div class="mt-10 flex items-center justify-center gap-x-6 flex-wrap">
<!-- SHOP -->
<a href="/shop"
class="group rounded-lg bg-brand px-8 py-4 text-base font-semibold text-black hover:bg-brand/80 shadow-lg hover:shadow-brand/50 transition-all">
Shop Now
<span class="inline-block group-hover:translate-x-1 transition-transform">→</span>
</a>
<!-- LEARN -->
<a href="/learn"
class="rounded-lg border border-white/10 px-8 py-4 text-base font-semibold text-white hover:bg-white/5 transition-all">
Start Learning
</a>
</div>
</div>
<!-- BOTTOM BG BLOB -->
<div aria-hidden="true"
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
<div
class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[40rem]
-translate-x-1/2 bg-gradient-to-tr from-purple-500 via-emerald-400 to-cyan-500 opacity-30
sm:left-[calc(50%+36rem)] sm:w-[70rem]">
</div>
</div>
</div>
<!-- FEATURES SECTION -->
<div class="py-24 sm:py-32 bg-gray-900/50">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center mb-16">
<h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
Why Choose <span class="gradient-text">Serhii?</span>
</h2>
<p class="mt-4 text-lg text-gray-400">
Everything you need to level up your tech skills and gear.
</p>
</div>
<div class="mx-auto max-w-5xl">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<!-- Feature 1 -->
<div class="group relative rounded-2xl bg-gray-800/50 p-8 hover:bg-gray-800 transition-all border border-white/5 hover:border-brand/50">
<div class="flex items-center justify-center w-12 h-12 rounded-lg bg-brand/10 text-brand mb-5 group-hover:scale-110 transition-transform">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Learn Cybersecurity</h3>
<p class="text-gray-400">Master the fundamentals and advanced concepts with hands-on tutorials and real-world scenarios.</p>
</div>
<!-- Feature 2 -->
<div class="group relative rounded-2xl bg-gray-800/50 p-8 hover:bg-gray-800 transition-all border border-white/5 hover:border-brand/50">
<div class="flex items-center justify-center w-12 h-12 rounded-lg bg-brand/10 text-brand mb-5 group-hover:scale-110 transition-transform">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Curated Shop</h3>
<p class="text-gray-400">Discover hand-picked tech gear, 3D prints, and cybersecurity tools for enthusiasts and professionals.</p>
</div>
<!-- Feature 3 -->
<div class="group relative rounded-2xl bg-gray-800/50 p-8 hover:bg-gray-800 transition-all border border-white/5 hover:border-brand/50">
<div class="flex items-center justify-center w-12 h-12 rounded-lg bg-brand/10 text-brand mb-5 group-hover:scale-110 transition-transform">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Community Driven</h3>
<p class="text-gray-400">Join a vibrant community of learners and makers sharing knowledge and supporting each other.</p>
</div>
<!-- Feature 4 -->
<div class="group relative rounded-2xl bg-gray-800/50 p-8 hover:bg-gray-800 transition-all border border-white/5 hover:border-brand/50">
<div class="flex items-center justify-center w-12 h-12 rounded-lg bg-brand/10 text-brand mb-5 group-hover:scale-110 transition-transform">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">24/7 Support</h3>
<p class="text-gray-400">Get help whenever you need it with our round-the-clock support team ready to assist you.</p>
</div>
</div>
</div>
</div>
</div>
<!-- CTA SECTION -->
<div class="py-24 sm:py-32 bg-gray-900/30">
<div class="mx-auto max-w-4xl px-6 lg:px-8">
<div class="relative isolate overflow-hidden rounded-3xl bg-gray-800/80 backdrop-blur-sm px-8 py-20 text-center shadow-2xl ring-1 ring-white/10 sm:px-16">
<!-- Subtle gradient overlay -->
<div class="absolute inset-0 -z-10 bg-gradient-to-br from-brand/20 via-transparent to-cyan-500/20"></div>
<div class="mx-auto max-w-2xl">
<h2 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">
Ready to start your <span class="gradient-text">journey?</span>
</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">
Join hundreds of learners mastering cybersecurity today. Start learning for free and level up your skills.
</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a href="/learn" class="group rounded-lg bg-brand px-8 py-4 text-base font-semibold text-black shadow-lg hover:bg-brand/80 transition-all hover:scale-105">
Get Started Free
<span class="inline-block group-hover:translate-x-1 transition-transform ml-1">→</span>
</a>
<a href="/contact" class="text-base font-semibold text-gray-200 hover:text-white transition flex items-center gap-1">
Contact Us
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- FOOTER -->
<footer class="border-t border-white/10 py-8 text-sm text-gray-400">
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="text-brand">
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/>
<path d="M12 22V12"/>
<polyline points="3.29 7 12 12 20.71 7"/>
</svg>
<p>© 2025 Serhii. All rights reserved.</p>
</div>
<div class="flex gap-6">
<a href="/contact" class="hover:text-white transition">Contact</a>
<a href="/shop" class="hover:text-white transition">Shop</a>
<a href="/learn" class="hover:text-white transition">Learn</a>
</div>
</div>
</div>
</footer>
<!-- SUPABASE -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@latest/dist/umd/supabase.js"></script>
<script>
const SUPABASE_URL = "https://ixrcmespfkbvubxsaqvf.supabase.co";
const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Iml4cmNtZXNwZmtidnVieHNhcXZmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjM1ODc3MDgsImV4cCI6MjA3OTE2MzcwOH0.OONsZEtb-VUAsBgTICYixl8M-GU4dMT6FK-Gg3s3i94";
const _supabase = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
// Auth actions
async function signInWithGoogle() {
const { data, error } = await _supabase.auth.signInWithOAuth({
provider: "google",
options: {
redirectTo: "https://coderserg.github.io/auth/callback.html",
},
});
if (data?.url) window.location.href = data.url;
if (error) console.error(error);
}
async function logout() {
await _supabase.auth.signOut();
location.reload();
}
// Simple mobile menu toggle
document.addEventListener("DOMContentLoaded", async () => {
const mobileBtn = document.getElementById("mobile-menu-button");
const mobileMenu = document.getElementById("mobile-menu");
mobileBtn.addEventListener("click", () => {
mobileMenu.classList.toggle("hidden");
});
// Supabase user state
const { data } = await _supabase.auth.getUser();
const user = data.user;
const loginBtn = document.getElementById("login-btn");
const userNav = document.getElementById("user-nav");
const userNameEl = document.getElementById("user-name");
const mobileLogin = document.getElementById("mobile-login");
const mobileUser = document.getElementById("mobile-user");
const mobileUserName = document.getElementById("mobile-user-name");
if (user) {
const name = user.user_metadata?.full_name || user.email || "User";
// Desktop
if (loginBtn) loginBtn.classList.add("hidden");
if (userNav) userNav.classList.remove("hidden");
if (userNameEl) userNameEl.textContent = name;
// Mobile
if (mobileLogin) mobileLogin.classList.add("hidden");
if (mobileUser) mobileUser.classList.remove("hidden");
if (mobileUserName) mobileUserName.textContent = name;
}
});
</script>
</body>
</html>