-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtutorial.html
More file actions
349 lines (304 loc) · 27.9 KB
/
Copy pathtutorial.html
File metadata and controls
349 lines (304 loc) · 27.9 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spy_G | Tutorial</title>
<meta name="description" content="How to use the wallpapers.">
<link rel="stylesheet" href="/dist/assets/main-DxMavco3.css">
</head>
<body class="selection:bg-accent selection:text-white">
<main class="max-w-[1000px] mx-auto px-6 py-16 md:py-24 flex flex-col gap-20">
<!-- Header -->
<header class="flex flex-col gap-6">
<nav>
<a href="/wallpapers"
class="text-sm font-mono text-secondary hover:text-accent transition-colors w-fit flex items-center gap-2 group">
<span class="group-hover:-translate-x-1 transition-transform">←</span>
Back
</a>
</nav>
<h1 class="text-3xl font-bold tracking-tight text-white w-fit">
Tutorial
</h1>
<p class="text-secondary max-w-xl text-lg leading-relaxed">
Guide on how to use these wallpapers on your device.
</p>
</header>
<!-- Tutorial Content -->
<section class="flex flex-col gap-10">
<!-- Draggable Platform Toggle -->
<div id="tab-container" class="relative flex items-center bg-neutral-900/30 backdrop-blur-xl border border-white/10 p-1.5 w-fit rounded-2xl shadow-xl select-none touch-none cursor-grab active:cursor-grabbing overflow-hidden">
<div id="tab-slider" class="absolute left-0 top-1.5 bottom-1.5 rounded-xl transition-all duration-300 ease-out bg-gradient-to-tr from-white/10 to-transparent bg-white/5 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] shadow-lg border border-white/20 z-0 will-change-transform opacity-0"></div>
<!-- Hit areas / Labels -->
<div id="btn-mac" data-target="mac" class="tab-btn relative z-10 px-6 py-2.5 text-sm font-medium rounded-xl transition-colors duration-300 text-secondary drop-shadow-sm pointer-events-none">Mac</div>
<div id="btn-pc" data-target="pc" class="tab-btn relative z-10 px-6 py-2.5 text-sm font-medium rounded-xl transition-colors duration-300 text-secondary drop-shadow-sm pointer-events-none">Windows PC</div>
<div id="btn-pocket" data-target="pocket" class="tab-btn relative z-10 px-6 py-2.5 text-sm font-medium rounded-xl transition-colors duration-300 text-secondary drop-shadow-sm pointer-events-none">Pocket-Poster (On-Device)</div>
</div>
<!-- Global Prerequisites -->
<div class="flex flex-col gap-6">
<div class="p-6 border border-neutral-800 bg-neutral-900/50 rounded-xl">
<h3 class="text-xl font-bold text-primary mb-3">Prerequisites (All Platforms)</h3>
<ul class="list-disc list-inside text-secondary space-y-2">
<li>An iPhone or iPad running a supported version of iOS (generally iOS 17+).</li>
<li>A USB cable to connect your device.</li>
<li>A downloaded <span class="text-accent font-mono text-sm px-1 border border-neutral-800 rounded bg-black">.tendies</span> wallpaper file from the Wallpapers page.</li>
<li class="text-white font-medium">Temporarily disable "Find My iPhone" (Settings > [Your Name] > Find My).</li>
<li class="text-white font-medium">Make sure your device has a backup before proceeding.</li>
</ul>
</div>
<!-- Mac Guide -->
<div id="guide-mac" class="flex flex-col gap-8 open:animate-fade-in">
<div class="flex flex-col gap-4">
<h2 class="text-2xl font-bold text-white pl-3">Mac Installation Guide</h2>
<ol class="list-decimal list-outside ml-8 text-secondary space-y-2 marker:text-primary marker:font-bold">
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Connect Device:</strong> Plug your iOS device into your Mac using a USB cable. If prompted, tap "Trust" on your device and enter your passcode.</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all">
<div class="flex flex-col gap-3">
<span><strong class="text-white">Download Nugget:</strong> Get the latest macOS release of the Nugget app.</span>
<a href="https://github.com/leminlimez/Nugget" target="_blank" class="flex items-center gap-3 w-fit px-4 py-2.5 bg-black border border-neutral-800 rounded-lg hover:border-accent/50 group transition-all hover:-translate-y-0.5 shadow-sm hover:shadow-accent/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-white group-hover:text-accent transition-colors" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span class="text-sm font-medium text-white group-hover:text-accent transition-colors">leminlimez/Nugget</span>
</a>
</div>
</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Open the App:</strong> Open the Nugget application. <br><em class="text-sm opacity-80 mt-1 block">Note: You might need to bypass macOS Gatekeeper by right-clicking the app and selecting <strong>Open</strong>.</em></li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Import Wallpaper:</strong> In Nugget, navigate to the <strong>PosterBoard</strong> section. Click "Import" and select your downloaded <span class="text-accent font-mono text-xs">.tendies</span> wallpaper file.</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Apply Updates:</strong> Click the "Apply" button. <strong class="text-error">Do not unplug your device!</strong> Wait for the process to complete, which will automatically reboot your phone.</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Set the Wallpaper:</strong> Once your phone reboots, go to Settings > Wallpaper > Add New Wallpaper. Scroll down to <strong>Collections</strong> and you will see your new animated wallpaper there. Select it and tap "Set as Wallpaper Pair".</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Cleanup:</strong> Remember to turn "Find My iPhone" back on!</li>
</ol>
</div>
</div>
<!-- PC Guide -->
<div id="guide-pc" class="hidden flex-col gap-8 open:animate-fade-in">
<div class="flex flex-col gap-4">
<h2 class="text-2xl font-bold text-white pl-3">Windows PC Installation Guide</h2>
<div class="bg-accent/10 border-l-4 border-accent p-4 mb-2 rounded-r-lg ml-3">
<p class="text-sm text-secondary"><strong>Crucial Setup:</strong> You must have the <a href="https://apps.microsoft.com/detail/9np83lwlpz9k" target="_blank" class="text-accent hover:underline">Apple Devices app</a> installed from the Microsoft Store. This provides the necessary USB drivers for Windows to communicate with your device.</p>
</div>
<ol class="list-decimal list-outside ml-8 text-secondary space-y-2 marker:text-primary marker:font-bold">
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Connect Device:</strong> Plug your iOS device into your PC using a USB cable. If prompted, tap "Trust" on your device and enter your passcode.</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all">
<div class="flex flex-col gap-3">
<span><strong class="text-white">Download Nugget:</strong> Download the latest Windows release (<span class="font-mono text-xs">.exe</span> or archived zip) of the Nugget app.</span>
<a href="https://github.com/leminlimez/Nugget" target="_blank" class="flex items-center gap-3 w-fit px-4 py-2.5 bg-black border border-neutral-800 rounded-lg hover:border-accent/50 group transition-all hover:-translate-y-0.5 shadow-sm hover:shadow-accent/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-white group-hover:text-accent transition-colors" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span class="text-sm font-medium text-white group-hover:text-accent transition-colors">leminlimez/Nugget</span>
</a>
</div>
</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Open the App:</strong> Run the Nugget application. If Windows SmartScreen blocks it, click "More info" and then "Run anyway".</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Import Wallpaper:</strong> In Nugget, navigate to the <strong>PosterBoard</strong> section. Click "Import" and select your downloaded <span class="text-accent font-mono text-xs">.tendies</span> wallpaper file.</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Apply Updates:</strong> Click the "Apply" button. <strong class="text-error">Do not unplug your device!</strong> Wait for the process to complete, which will automatically reboot your phone.</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Set the Wallpaper:</strong> Once your phone reboots, go to Settings > Wallpaper > Add New Wallpaper. Scroll down to <strong>Collections</strong> and you will see your new animated wallpaper there. Select it and tap "Set as Wallpaper Pair".</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Cleanup:</strong> Remember to turn "Find My iPhone" back on!</li>
</ol>
</div>
</div>
<!-- Pocket-Poster Guide -->
<div id="guide-pocket" class="hidden flex-col gap-8 open:animate-fade-in">
<div class="flex flex-col gap-4">
<h2 class="text-2xl font-bold text-white pl-3">Pocket-Poster On-Device Guide</h2>
<div class="bg-accent/10 border-l-4 border-accent p-4 mb-2 rounded-r-lg ml-3">
<p class="text-sm text-secondary"><strong>What is Pocket-Poster?</strong> Pocket-Poster is a companion app that runs on your iOS device. Once paired with Nugget on a computer a single time, you can change wallpapers directly from your phone forever!</p>
</div>
<div class="bg-red-500/10 border-l-4 border-red-500 p-4 mb-2 rounded-r-lg ml-3">
<p class="text-sm text-red-400"><strong>Compatibility Note:</strong> Pocket-Poster doesn't work on iOS 26.2 beta 2 or higher.</p>
</div>
<ol class="list-decimal list-outside ml-8 text-secondary space-y-2 marker:text-primary marker:font-bold">
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all">
<div class="flex flex-col gap-3">
<span><strong class="text-white">Install Pocket-Poster:</strong> Sideload the Pocket-Poster <span class="text-accent font-mono text-xs">.ipa</span> onto your iOS device using AltStore, SideStore, Sideloadly, or TrollStore.</span>
<a href="https://github.com/leminlimez/Pocket-Poster" target="_blank" class="flex items-center gap-3 w-fit px-4 py-2.5 bg-black border border-neutral-800 rounded-lg hover:border-accent/50 group transition-all hover:-translate-y-0.5 shadow-sm hover:shadow-accent/10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-white group-hover:text-accent transition-colors" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
<span class="text-sm font-medium text-white group-hover:text-accent transition-colors">leminlimez/Pocket-Poster</span>
</a>
</div>
</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">One-Time Nugget Pairing:</strong> Connect your iOS device to a PC or Mac via USB. Open the Nugget application on your computer, navigate to its <strong>Settings</strong> page, and click the <strong>Pocket Poster Helper</strong> button.</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Link Device:</strong> Open the Pocket-Poster app on your iPhone. Go to the app's Settings and tap the <strong>Detect</strong> button. It will sync with Nugget automatically. Once linked, you no longer need the computer!</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Download Wallpapers:</strong> Open Safari on your iPhone, browse back to the <a href="/wallpapers" class="text-accent hover:underline">Wallpapers</a> page on this site, and download a <span class="text-accent font-mono text-xs">.tendies</span> wallpaper straight to your Files app.</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Apply on Device:</strong> Open Pocket-Poster, tap Import, and select your downloaded <span class="text-accent font-mono text-xs">.tendies</span> file. Then tap Apply!</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Set the Wallpaper:</strong> Go to Settings > Wallpaper > Add New Wallpaper. Scroll down to <strong>Collections</strong> and you will see your new animated wallpaper. Select it and tap "Set as Wallpaper Pair".</li>
<li class="pl-3 py-3 border border-transparent hover:bg-neutral-900/40 hover:border-neutral-800/80 rounded-xl transition-all"><strong class="text-white">Cleanup:</strong> Remember to turn "Find My iPhone" back on!</li>
</ol>
</div>
</div>
</div>
</section>
<script>
let currentPlatform = 'mac';
function setPlatform(platform) {
currentPlatform = platform;
const activeTab = document.getElementById(`btn-${platform}`);
const container = document.getElementById('tab-container');
const slider = document.getElementById('tab-slider');
const tabs = document.querySelectorAll('.tab-btn');
if (activeTab && container && slider) {
const tabRect = activeTab.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
const targetX = tabRect.left - containerRect.left;
slider.style.opacity = '1';
slider.style.width = `${tabRect.width}px`;
slider.style.transformOrigin = 'center';
slider.style.transform = `translateX(${targetX}px) scaleX(1)`;
tabs.forEach(t => {
if (t.dataset.target === platform) {
t.classList.remove('text-secondary');
t.classList.add('text-white');
} else {
t.classList.add('text-secondary');
t.classList.remove('text-white');
}
});
}
// Content Toggle
const guideMac = document.getElementById('guide-mac');
const guidePc = document.getElementById('guide-pc');
const guidePocket = document.getElementById('guide-pocket');
if (guideMac) {
guideMac.classList.add('hidden'); guideMac.classList.remove('flex');
guidePc.classList.add('hidden'); guidePc.classList.remove('flex');
guidePocket.classList.add('hidden'); guidePocket.classList.remove('flex');
if (platform === 'mac') {
guideMac.classList.remove('hidden'); guideMac.classList.add('flex');
} else if (platform === 'pc') {
guidePc.classList.remove('hidden'); guidePc.classList.add('flex');
} else if (platform === 'pocket') {
guidePocket.classList.remove('hidden'); guidePocket.classList.add('flex');
}
}
}
document.addEventListener("DOMContentLoaded", () => {
const container = document.getElementById('tab-container');
const slider = document.getElementById('tab-slider');
const tabs = document.querySelectorAll('.tab-btn');
let isDragging = false;
let startMouseX = 0;
let lastPointerX = 0;
let startSliderX = 0;
let dragDidMove = false;
// Initial snap
setTimeout(() => setPlatform('mac'), 50);
window.addEventListener('resize', () => setPlatform(currentPlatform));
container.addEventListener('pointerdown', (e) => {
isDragging = true;
dragDidMove = false;
startMouseX = e.clientX;
lastPointerX = e.clientX;
container.setPointerCapture(e.pointerId);
slider.style.transition = 'none';
const style = window.getComputedStyle(slider);
const matrix = new DOMMatrixReadOnly(style.transform);
startSliderX = matrix.m41;
});
container.addEventListener('pointermove', (e) => {
if (!isDragging) return;
const movedDist = Math.abs(e.clientX - startMouseX);
if (movedDist > 3) dragDidMove = true;
// Calculate instantaneous physical velocity for gel effect
const velocityX = e.clientX - lastPointerX;
lastPointerX = e.clientX;
let newX = startSliderX + (e.clientX - startMouseX);
const maxRight = container.offsetWidth - slider.offsetWidth - 6;
newX = Math.max(6, Math.min(newX, maxRight));
// Apply trailing gel stretch physics
const stretch = 1 + Math.min(Math.abs(velocityX) * 0.006, 0.18);
slider.style.transformOrigin = velocityX > 0 ? "right center" : "left center";
slider.style.transform = `translateX(${newX}px) scaleX(${stretch})`;
updateContentWhileDragging(newX);
});
const endDrag = (e) => {
if (!isDragging) return;
isDragging = false;
// Satisfying spring snap release
slider.style.transition = 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)';
slider.style.transformOrigin = 'center';
if (!dragDidMove) {
const clickedRectX = e.clientX;
let minClickDist = Infinity;
let closestTab = tabs[0];
tabs.forEach(tab => {
const rect = tab.getBoundingClientRect();
const tabCenter = rect.left + rect.width / 2;
if (Math.abs(tabCenter - clickedRectX) < minClickDist) {
minClickDist = Math.abs(tabCenter - clickedRectX);
closestTab = tab;
}
});
setPlatform(closestTab.dataset.target);
} else {
const sliderRect = slider.getBoundingClientRect();
const sliderCenter = sliderRect.left + sliderRect.width / 2;
let minDist = Infinity;
let targetTab = tabs[0];
tabs.forEach(tab => {
const rect = tab.getBoundingClientRect();
const tabCenter = rect.left + rect.width / 2;
if (Math.abs(tabCenter - sliderCenter) < minDist) {
minDist = Math.abs(tabCenter - sliderCenter);
targetTab = tab;
}
});
setPlatform(targetTab.dataset.target);
}
};
container.addEventListener('pointerup', endDrag);
container.addEventListener('pointercancel', endDrag);
function updateContentWhileDragging(currentSliderX) {
const containerRect = container.getBoundingClientRect();
const absoluteSliderCenter = containerRect.left + currentSliderX + (slider.offsetWidth / 2);
let minDist = Infinity;
let tentativePlatform = currentPlatform;
tabs.forEach(tab => {
const rect = tab.getBoundingClientRect();
const center = rect.left + rect.width / 2;
if (Math.abs(center - absoluteSliderCenter) < minDist) {
minDist = Math.abs(center - absoluteSliderCenter);
tentativePlatform = tab.dataset.target;
}
});
if (tentativePlatform !== currentPlatform) {
currentPlatform = tentativePlatform;
tabs.forEach(t => {
if (t.dataset.target === currentPlatform) {
t.classList.remove('text-secondary');
t.classList.add('text-white');
} else {
t.classList.add('text-secondary');
t.classList.remove('text-white');
}
});
const guideMac = document.getElementById('guide-mac');
const guidePc = document.getElementById('guide-pc');
const guidePocket = document.getElementById('guide-pocket');
if(guideMac) {
guideMac.classList.add('hidden'); guideMac.classList.remove('flex');
guidePc.classList.add('hidden'); guidePc.classList.remove('flex');
guidePocket.classList.add('hidden'); guidePocket.classList.remove('flex');
const activeGuide = document.getElementById(`guide-${currentPlatform}`);
activeGuide.classList.remove('hidden');
activeGuide.classList.add('flex');
}
}
}
});
</script>
<!-- Footer -->
<footer class="pt-12 border-t border-neutral-800 flex flex-col gap-4">
<p class="text-xs text-secondary font-mono">
© 2026 Spy_G. Built with semantic HTML & Tailwind.
</p>
</footer>
</main>
<script type="module" src="/src/main.js"></script>
</body>
</html>