-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
406 lines (366 loc) · 21.8 KB
/
index.html
File metadata and controls
406 lines (366 loc) · 21.8 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
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4SP MAX - HOME</title>
<meta name="description" content="(4SP MAX) - The experimental, cutting-edge toolkit for students. Featuring Velium, dynamic themes, and advanced QOL tools.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6659160370587814"
crossorigin="anonymous"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="navigation-mini.js" defer></script>
<style>
:root {
--geist-foreground: 255, 255, 255;
--geist-background: 0, 0, 0;
}
.dark { color-scheme: dark; }
body { font-family: 'Geist', sans-serif; }
.gradient-text {
background-image: linear-gradient(90deg, #ff0055, #8b5cf6, #ff0055);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 300% auto;
animation: shine 8s linear infinite;
}
@keyframes shine {
to { background-position: 300% center; }
}
.carousel-button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: none;
cursor: pointer;
backdrop-filter: blur(8px) saturate(180%);
-webkit-backdrop-filter: blur(8px) saturate(180%);
transition: background-color 0.3s ease;
}
.carousel-button-purple-hue { background-color: rgba(139, 92, 246, 0.3); }
.carousel-button-purple-hue:hover { background-color: rgba(139, 92, 246, 0.5); }
.carousel-button-blue-hue { background-color: rgba(96, 165, 250, 0.3); }
.carousel-button-blue-hue:hover { background-color: rgba(96, 165, 250, 0.5); }
#dynamic-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, #1a0b2e 0%, #000000 100%);
opacity: 0;
z-index: -10;
pointer-events: none;
transition: opacity 0.1s linear;
}
/* --- NEW BUTTON STYLES IMPORTED FROM ORG HTML --- */
.hero-btn-base {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.5rem;
font-size: 0.875rem;
font-weight: 400;
color: #ffffff;
border-radius: 14px;
text-decoration: none;
transition: all 0.2s ease;
}
/* Purple Style (like 'Download V5') */
.btn-style-purple {
background-color: rgba(147, 51, 234, 0.1);
border: 1px solid rgba(192, 132, 252, 0.5);
}
.btn-style-purple:hover {
background-color: rgba(192, 132, 252, 0.2);
border-color: rgba(192, 132, 252, 1);
box-shadow: 0 0 15px rgba(192, 132, 252, 0.3);
}
/* Orange Style (like 'Create Link') */
.btn-style-orange {
background-color: rgba(249, 115, 22, 0.1);
border: 1px solid rgba(253, 186, 116, 0.5);
}
.btn-style-orange:hover {
background-color: rgba(253, 186, 116, 0.2);
border-color: rgba(253, 186, 116, 1);
}
</style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1D4F692C1Q"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1D4F692C1Q');
</script>
</head>
<body class="bg-black text-white min-h-screen relative">
<div id="dynamic-background"></div>
<main>
<section class="text-center border-b border-gray-900 relative overflow-hidden" style="padding-top: 4rem">
<div class="mx-auto max-w-5xl px-4 pb-16">
<h1 class="text-3xl sm:text-4xl font-light text-gray-300 tracking-tighter mb-4 leading-tight">
Over 500 users, and counting.
</h1>
<h2 class="text-5xl sm:text-7xl font-light tracking-tighter mb-6 leading-tight">
<span class="gradient-text font-bold">The Student Toolkit, Reimagined.</span>
</h2>
<p class="text-xl text-gray-400 max-w-2xl mx-auto mb-8 font-light leading-relaxed">
You're using the <strong>MAX</strong> branch. Experience the new <span class="text-white">Velium Focus Environment</span>, redesigned navigation with live effects, and professional productivity tools.
</p>
<div id="auth-button-container" class="space-y-4">
<a id="auth-button" href="../authentication.html"
class="inline-flex items-center justify-center px-8 py-4 border border-[#333] text-lg font-normal shadow-sm text-white bg-black hover:bg-[#0a0a0a] hover:border-gray-600 hover:scale-105 transition duration-300"
style="border-radius: 22px;">
Get Started Instantly <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="flex flex-wrap items-center justify-center gap-4 mt-8">
<a href="https://linktr.ee/4simpleproblems" target="_blank" class="hero-btn-base btn-style-purple">
<i class="fas fa-link mr-2"></i> Linktree
</a>
<a href="https://discord.gg/zcADhddGQz" target="_blank" class="hero-btn-base btn-style-purple">
<i class="fa-brands fa-discord mr-2"></i> Discord
</a>
<a href="https://4sp-organization.github.io" class="hero-btn-base btn-style-orange">
<i class="fas fa-sitemap mr-2"></i> Organization
</a>
</div>
<p id="pronunciation-text" class="text-sm text-gray-600 mt-8 mb-2 italic font-light">
Independently Developed and Maintained, serving <span class="text-gray-400">500+ Users</span> in <span class="text-gray-400">13+ Cities.</span>
</p>
</div>
</section>
<section id="features" class="py-16 mx-auto max-w-7xl px-4 space-y-24">
<h2 class="text-4xl font-light text-center mb-12"><span class="text-gray-500">MAX Exclusive:</span> New Arrivals</h2>
<div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
<div class="lg:pr-4 order-2 lg:order-1 mb-6 lg:mb-0">
<div class="flex items-center gap-3 mb-2">
<span class="text-sm font-light text-yellow-400 uppercase tracking-widest block">New Module</span>
<span class="text-xs bg-yellow-400/10 text-yellow-400 px-2 py-0.5 rounded border border-yellow-400/20">BETA</span>
</div>
<h3 class="text-5xl font-light mb-4 mt-2 text-white">Velium.</h3>
<p class="text-xl text-gray-400 mb-6 font-light">
The ultimate tool for deep work. <strong>Velium</strong> provides a dedicated <strong>acoustic focus environment</strong> built directly into 4SP. Zero distractions, total immersion.
</p>
<a href="/logged-in/velium.html" class="inline-flex items-center text-yellow-400 font-normal hover:text-yellow-300 transition group">
Launch Velium Environment <i class="fas fa-play ml-2 text-xs group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
<div class="relative w-full h-72 overflow-hidden rounded-3xl border border-yellow-600/30 shadow-[0_0_40px_-10px_rgba(234,179,8,0.2)] bg-gray-900 flex items-center justify-center order-1 lg:order-2 mb-6 lg:mb-0">
<div class="image-carousel-container relative w-full h-full">
<img src="doc-images/velium.png" alt="Tools" class="carousel-image absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ease-in-out opacity-100">
</div>
</div>
</div>
<div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
<div class="relative w-full aspect-video overflow-hidden rounded-3xl border border-blue-800/50 shadow-2xl bg-gray-900 flex items-center justify-center order-1 lg:order-1 mb-6 lg:mb-0">
<div class="image-carousel-container relative w-full h-full">
<img src="doc-images/fireworks.png" alt="UI" class="carousel-image absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ease-in-out opacity-100">
</div>
</div>
<div class="lg:pl-4 order-2 lg:order-2 mb-6 lg:mb-0">
<span class="text-sm font-light text-blue-400 uppercase tracking-widest mb-2 block">Visual Overhaul</span>
<h3 class="text-4xl font-light mb-3 mt-2">The New Year Aesthetic</h3>
<p class="text-xl text-gray-400 mb-5 font-light">
We've cleaned up the UI for a more modern experience. Enjoy the <strong>reactive fireworks</strong> in the navigation bar and smoother animations throughout the platform.
</p>
<ul class="space-y-2 text-lg text-gray-300">
<li class="flex items-center"><i class="fas fa-wand-magic-sparkles fa-fw w-5 mr-3 text-blue-500"></i><span class="font-light mr-2">New Menu:</span>Dynamic effects and better spacing.</li>
<li class="flex items-center"><i class="fas fa-layer-group fa-fw w-5 mr-3 text-blue-500"></i><span class="font-light mr-2">Better Workflow:</span>Everything you need, right where you want it.</li>
</ul>
</div>
</div>
<div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
<div class="lg:pr-4 order-2 lg:order-1 mb-6 lg:mb-0">
<span class="text-sm font-light text-purple-400 uppercase tracking-widest mb-2 block">Essentials</span>
<h3 class="text-4xl font-light mb-3 mt-2">All Classic QOL Tools</h3>
<p class="text-xl text-gray-400 mb-5 font-light">
All your favorite tools like the Notes, Custom Themes, and even more apps are fully optimized and ready for use.
</p>
<ul class="space-y-2 text-lg text-gray-300">
<li class="flex items-center"><i class="fas fa-eye-slash fa-fw w-5 mr-3 text-purple-500"></i><span class="font-light mr-2">Pin Button:</span>Pin your most used page instantly.</li>
<li class="flex items-center"><i class="fas fa-exclamation fa-fw w-5 mr-3 text-purple-500"></i><span class="font-light mr-2">Panic Key:</span>One click to redirect to another page.</li>
<li class="flex items-center"><i class="fas fa-ghost fa-fw w-5 mr-3 text-purple-500"></i><span class="font-light mr-2">Tab Disguiser:</span>Disguise the website's favicon and title.</li>
</ul>
</div>
<div class="relative w-full aspect-video overflow-hidden rounded-3xl border border-purple-800/50 shadow-2xl bg-gray-900 flex items-center justify-center order-1 lg:order-2 mb-6 lg:mb-0">
<div class="image-carousel-container relative w-full h-full">
<img src="doc-images/pin_button.png" alt="Privacy" class="carousel-image absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ease-in-out opacity-100">
<img src="doc-images/panic_key.png" alt="Tools" class="carousel-image absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ease-in-out opacity-0">
<img src="doc-images/tab_disguise.png" alt="Tools" class="carousel-image absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ease-in-out opacity-0">
<button class="carousel-button carousel-button-purple-hue prev-button absolute top-1/2 left-4 -translate-y-1/2 p-2 text-white z-20">
<i class="fas fa-arrow-left"></i>
</button>
<button class="carousel-button carousel-button-purple-hue next-button absolute top-1/2 right-4 -translate-y-1/2 p-2 text-white z-20">
<i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</div>
</section>
<section class="py-12 mx-auto max-w-7xl px-4 text-center border-t border-gray-900">
<h2 class="text-xl font-light text-gray-400 mb-2">Powered by Firebase & Velium Core</h2>
<p class="text-gray-500 text-lg font-light">
(4SP MAX) uses experimental backend structures.
<strong class="text-white font-normal">Data stability is our priority</strong> as we continue to iterate on new features.
</p>
</section>
</main>
<footer class="border-t border-gray-900 py-6">
<div class="mx-auto max-w-7xl px-4 text-center text-gray-500 text-sm">
© 2026 4SP Organization. The Experimental Branch.
<span class="mx-2">|</span>
<a href="legal.html#terms-of-service" class="hover:underline">Terms</a>
<span class="mx-2">|</span>
<a href="legal.html#privacy-policy" class="hover:underline">Privacy</a>
</div>
</footer>
<div id="cookie-overlay" class="fixed inset-0 bg-black/70 z-[9999] transition-opacity duration-300 opacity-0" style="display: none;">
<div id="cookie-banner" class="absolute bottom-4 left-1/2 -translate-x-1/2 w-full max-w-7xl px-4">
<div class="bg-black/95 text-white p-4 sm:p-6 rounded-3xl border border-gray-700 shadow-2xl backdrop-blur-md flex flex-col md:flex-row items-start md:items-center justify-between space-y-4 md:space-y-0 md:space-x-6">
<div class="flex-1 min-w-0">
<h3 class="text-xl font-normal mb-1">4SP Uses Cookies</h3>
<p class="text-sm text-gray-300 mb-2 font-light">
We use cookies for authentication and to save your Velium preferences.
</p>
<div class="space-x-3 text-xs">
<a href="https://policies.google.com/technologies/cookies" target="_blank" class="text-blue-400 hover:text-blue-300 underline transition">Details</a>
<a class="text-gray-500 pointer-events-none">|</a>
<a href="../legal.html#privacy-policy" class="text-blue-400 hover:text-blue-300 underline transition">Privacy Policy</a>
</div>
</div>
<div class="flex-shrink-0">
<button id="accept-cookies-button" class="w-full md:w-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-normal rounded-xl text-white bg-purple-500/10 ring-1 ring-purple-500/50 hover:bg-purple-500/20 transition duration-150 transform hover:scale-[1.02]">
I Understand
</button>
</div>
</div>
</div>
</div>
<div id="mobile-warning-overlay" class="fixed inset-0 bg-black/95 z-[10000] flex items-center justify-center p-6" style="display: none;">
<div class="max-w-md w-full text-center space-y-6">
<div class="text-5xl mb-4">🖥️</div>
<h2 class="text-3xl font-light text-white tracking-tight">Desktop Recommended</h2>
<p class="text-gray-400 text-lg font-light leading-relaxed">
4SP MAX features complex tools like Velium and the Fireworks Nav that are best experienced on a larger screen.
<br><br>
Please use a desktop for the intended experience.
</p>
<button id="dismiss-mobile-warning" class="inline-flex items-center justify-center px-8 py-3 border border-gray-600 text-base font-normal rounded-xl text-white bg-transparent hover:bg-white/10 transition duration-200">
Dismiss
</button>
</div>
</div>
<script>
window.addEventListener('scroll', () => {
const bgLayer = document.getElementById('dynamic-background');
const scrollPos = window.scrollY;
const triggerHeight = 600;
let opacity = scrollPos / triggerHeight;
if (opacity > 1) opacity = 1;
if (bgLayer) bgLayer.style.opacity = opacity;
});
(function() {
const mobileOverlay = document.getElementById('mobile-warning-overlay');
const dismissBtn = document.getElementById('dismiss-mobile-warning');
const STORAGE_KEY = '4sp-max-mobile-dismissed';
function checkAspectRatio() {
if (localStorage.getItem(STORAGE_KEY) === 'true') return;
if (window.innerHeight > window.innerWidth) {
mobileOverlay.style.display = 'flex';
document.body.style.overflow = 'hidden';
} else {
mobileOverlay.style.display = 'none';
document.body.style.overflow = '';
}
}
checkAspectRatio();
window.addEventListener('resize', checkAspectRatio);
if (dismissBtn) {
dismissBtn.addEventListener('click', () => {
mobileOverlay.style.display = 'none';
document.body.style.overflow = '';
localStorage.setItem(STORAGE_KEY, 'true');
});
}
})();
</script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"></script>
<script type="module" src="../firebase-config.js"></script>
<script type="module">
const COOKIE_KEY = '4sp-max-cookie-consent';
const cookieOverlay = document.getElementById('cookie-overlay');
const acceptCookiesButton = document.getElementById('accept-cookies-button');
const hideCookieBanner = () => {
cookieOverlay.classList.remove('opacity-100');
cookieOverlay.classList.add('opacity-0');
setTimeout(() => {
cookieOverlay.style.display = 'none';
localStorage.setItem(COOKIE_KEY, 'accepted');
document.body.style.overflow = '';
}, 300);
};
const showCookieBanner = () => {
cookieOverlay.style.display = 'block';
document.body.style.overflow = 'hidden';
setTimeout(() => {
cookieOverlay.classList.remove('opacity-0');
cookieOverlay.classList.add('opacity-100');
}, 10);
};
if (localStorage.getItem(COOKIE_KEY) !== 'accepted') {
window.addEventListener('load', showCookieBanner);
}
if (acceptCookiesButton) acceptCookiesButton.addEventListener('click', hideCookieBanner);
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js';
import { firebaseConfig } from '../firebase-config.js';
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const authButton = document.getElementById('auth-button');
onAuthStateChanged(auth, (user) => {
if (user && authButton) {
authButton.href = '/logged-in/dashboard.html';
authButton.innerHTML = 'Go to Dashboard <i class="fas fa-arrow-right ml-2"></i>';
} else if (authButton) {
authButton.href = '../authentication.html';
authButton.innerHTML = 'Get Started Instantly <i class="fas fa-arrow-right ml-2"></i>';
}
});
</script>
<script type="module">
document.querySelectorAll('.image-carousel-container').forEach(container => {
const images = container.querySelectorAll('.carousel-image');
const prevButton = container.querySelector('.prev-button');
const nextButton = container.querySelector('.next-button');
let currentIndex = 0;
function showImage(index) {
images.forEach((img, i) => {
img.classList.toggle('opacity-100', i === index);
img.classList.toggle('opacity-0', i !== index);
});
}
if (prevButton && nextButton) {
prevButton.addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
showImage(currentIndex);
});
nextButton.addEventListener('click', () => {
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
showImage(currentIndex);
});
}
showImage(currentIndex);
});
</script>
</body>
</html>