Hugging Face's logo

Spaces:
MatteoScript
/
AR
Running

App Files Community
MatteoScript commited on
Commit
8ea1823
·
verified ·
1 Parent(s): f16250d

Delete ar.html

Browse files
Files changed (1) hide show
  1. ar.html +0 -447
ar.html DELETED
@@ -1,447 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="it">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
6
- <title>Matteo Bergamelli | Innovation Lab Candidate</title>
7
-
8
- <script src="https://cdn.tailwindcss.com"></script>
9
- <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
10
-
11
- <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
12
- <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image.prod.js"></script>
13
- <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.2/dist/mindar-image-aframe.prod.js"></script>
14
-
15
- <style>
16
- :root {
17
- --neon-green: #00ff41;
18
- --dark-bg: #050505;
19
- --error-red: #ff0055;
20
- }
21
-
22
- html, body {
23
- margin: 0;
24
- padding: 0;
25
- width: 100%;
26
- height: 100%;
27
- background-color: transparent !important;
28
- font-family: 'Fira Code', monospace;
29
- overflow: hidden;
30
- position: fixed;
31
- }
32
-
33
- /* --- ENGINE GRAFICO (Camera e Canvas) --- */
34
-
35
- /* Regole generali per video webcam */
36
- video:not(#vid):not(#manual-video) {
37
- position: fixed !important;
38
- top: 0 !important;
39
- left: 0 !important;
40
- width: 100vw !important;
41
- height: 100vh !important;
42
- object-fit: cover !important;
43
- z-index: -2 !important;
44
- }
45
-
46
- /* Nascondiamo il video sorgente AR */
47
- #vid {
48
- position: absolute; top: 0; left: 0; opacity: 0; z-index: -100; pointer-events: none;
49
- }
50
-
51
- .a-canvas {
52
- position: fixed !important; top: 0 !important; left: 0 !important;
53
- width: 100vw !important; height: 100vh !important;
54
- z-index: -1 !important;
55
- }
56
-
57
- a-scene {
58
- position: fixed !important; top: 0 !important; left: 0 !important;
59
- width: 100vw !important; height: 100vh !important;
60
- }
61
-
62
- .scanlines {
63
- background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
64
- background-size: 100% 4px;
65
- position: fixed; inset: 0; pointer-events: none;
66
- z-index: 10;
67
- opacity: 0.4;
68
- }
69
-
70
- .a-enter-vr-button { display: none !important; }
71
-
72
- #custom-loader {
73
- position: fixed; inset: 0; z-index: 9999;
74
- background: #000;
75
- display: flex; flex-direction: column; align-items: center; justify-content: center;
76
- transition: opacity 0.5s ease-out;
77
- padding: 20px;
78
- }
79
-
80
- .glitch-text { animation: glitch 2s infinite; }
81
- @keyframes glitch {
82
- 0% { transform: translate(0); }
83
- 20% { transform: translate(-2px, 2px); }
84
- 40% { transform: translate(-2px, -2px); }
85
- 60% { transform: translate(2px, 2px); }
86
- 80% { transform: translate(2px, -2px); }
87
- 100% { transform: translate(0); }
88
- }
89
-
90
- .loader-track {
91
- width: 100%; max-width: 280px; height: 6px;
92
- background: #111; margin-top: 20px;
93
- overflow: hidden; border-radius: 4px;
94
- }
95
- .loader-fill {
96
- height: 100%; background: var(--neon-green); width: 0%;
97
- transition: width 0.1s linear;
98
- box-shadow: 0 0 10px var(--neon-green);
99
- }
100
-
101
- .safe-area-y {
102
- padding-top: env(safe-area-inset-top, 20px);
103
- padding-bottom: env(safe-area-inset-bottom, 20px);
104
- }
105
-
106
- /* FALLBACK PLAYER STYLE (HTML OVERLAY) */
107
- #fallback-player {
108
- display: none; /* Nascosto di default */
109
- position: fixed;
110
- top: 0; left: 0; width: 100%; height: 100%;
111
- background-color: #000; /* Copre la camera */
112
- z-index: 5000;
113
- flex-direction: column;
114
- align-items: center;
115
- justify-content: center;
116
- padding: 20px;
117
- }
118
-
119
- #fallback-player video {
120
- width: 100%;
121
- max-width: 600px;
122
- border: 2px solid var(--neon-green);
123
- border-radius: 10px;
124
- box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
125
- margin-bottom: 20px;
126
- }
127
-
128
- .animate-fade-in {
129
- animation: fadeIn 0.5s ease-out forwards;
130
- }
131
- @keyframes fadeIn {
132
- from { opacity: 0; transform: translateY(10px); }
133
- to { opacity: 1; transform: translateY(0); }
134
- }
135
- </style>
136
- </head>
137
- <body>
138
-
139
- <!-- 1. LOADER -->
140
- <div id="custom-loader">
141
- <div class="text-[#00ff41] text-5xl font-black tracking-tighter glitch-text mb-4">
142
- INNOVATING
143
- </div>
144
- <div class="text-white/50 text-xs font-mono uppercase tracking-[0.2em] mb-2" id="load-msg">Initializing AR Core...</div>
145
- <div class="loader-track"><div class="loader-fill" id="progress-bar"></div></div>
146
- <div id="loading-percent" class="text-[#00ff41] font-mono text-xl mt-2 font-bold">0%</div>
147
- </div>
148
-
149
- <!-- 2. FX -->
150
- <div class="scanlines"></div>
151
-
152
- <!-- 3. UI LAYER -->
153
- <div id="ui-layer" class="fixed inset-0 z-[50] flex flex-col justify-between safe-area-y pointer-events-none">
154
-
155
- <!-- TOP HEADER -->
156
- <div class="w-full px-6 py-4 flex justify-between items-center bg-gradient-to-b from-black/80 to-transparent pointer-events-auto">
157
- <div class="flex flex-col">
158
- <span class="text-[10px] text-white/60 font-mono tracking-widest">SYSTEM_STATUS</span>
159
- <span id="sys-status" class="text-[#00ff41] font-bold text-lg tracking-wider animate-pulse">SCANNING...</span>
160
- <span class="text-[8px] text-white/40 font-mono mt-1">FPS: <span id="fps-counter">60</span> | STABLE_MODE: ON</span>
161
- </div>
162
-
163
- <!-- BUTTON X (LINK INDEX) - FIX: Ora è un tag 'a' cliccabile -->
164
- <a href="./index.html" class="w-10 h-10 flex items-center justify-center border border-[#00ff41]/50 rounded-full bg-black/40 backdrop-blur-md hover:bg-[#00ff41]/20 transition-colors pointer-events-auto cursor-pointer">
165
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
166
- </a>
167
- </div>
168
-
169
- <!-- MIRINO QUADRATO -->
170
- <div id="aim-overlay" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center transition-opacity duration-300">
171
- <div class="relative w-[50vw] h-[50vw] max-w-[200px] max-h-[200px] border border-white/20 rounded-xl">
172
- <div class="absolute -top-1 -left-1 w-4 h-4 border-t-2 border-l-2 border-[#00ff41]"></div>
173
- <div class="absolute -top-1 -right-1 w-4 h-4 border-t-2 border-r-2 border-[#00ff41]"></div>
174
- <div class="absolute -bottom-1 -left-1 w-4 h-4 border-b-2 border-l-2 border-[#00ff41]"></div>
175
- <div class="absolute -bottom-1 -right-1 w-4 h-4 border-b-2 border-r-2 border-[#00ff41]"></div>
176
-
177
- <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full flex items-center justify-center">
178
- <div class="w-8 h-[1px] bg-[#00ff41]/50"></div>
179
- <div class="h-8 w-[1px] bg-[#00ff41]/50 absolute"></div>
180
- </div>
181
- </div>
182
- <div class="mt-4 bg-black/60 backdrop-blur px-3 py-1 rounded border border-[#00ff41]/30">
183
- <p class="text-[#00ff41] text-[10px] font-bold tracking-widest uppercase">Inquadra Sticker Volpe</p>
184
- </div>
185
- </div>
186
-
187
- <!-- BOTTOM CONTROLS -->
188
- <div class="w-full px-6 pb-6 pointer-events-auto flex flex-col items-center bg-gradient-to-t from-black/90 to-transparent">
189
-
190
- <button id="audio-btn" class="w-full max-w-xs h-12 bg-[#00ff41]/10 border border-[#00ff41] text-[#00ff41] font-bold text-sm uppercase tracking-[0.15em] rounded active:bg-[#00ff41] active:text-black transition-all mb-3 flex items-center justify-center gap-3 backdrop-blur-md">
191
- <span>🔊</span>
192
- <span id="audio-text">Attiva Audio</span>
193
- </button>
194
-
195
- <!-- Pulsante Fallback (Nascosto inizialmente) -->
196
- <button id="fallback-btn" class="hidden w-full max-w-xs h-12 bg-[#ff0055]/10 border border-[#ff0055] text-[#ff0055] font-bold text-sm uppercase tracking-[0.15em] rounded active:bg-[#ff0055] active:text-white transition-all mb-2 flex items-center justify-center gap-2 backdrop-blur-md animate-fade-in">
197
- <span>⚠️</span>
198
- <span>NON TROVO MARKER</span>
199
- </button>
200
- </div>
201
- </div>
202
-
203
- <!-- 4. FALLBACK PLAYER OVERLAY (HTML Puro) -->
204
- <div id="fallback-player">
205
- <h2 class="text-[#00ff41] text-xl font-bold mb-4 tracking-widest">MANUAL LINK</h2>
206
- <!-- Video separato per il fallback manuale -->
207
- <video id="manual-video" controls playsinline webkit-playsinline>
208
- <source src="./img/video.mp4" type="video/mp4">
209
- </video>
210
- <button id="close-manual-btn" class="mt-4 px-8 py-3 bg-[#ff0055] text-white font-bold uppercase rounded tracking-widest hover:bg-[#d00045] transition-colors">
211
- TORNA ALLA SCANSIONE
212
- </button>
213
- <p class="text-white/50 text-xs mt-4 font-mono">Modalità visualizzazione manuale attivata.</p>
214
- </div>
215
-
216
- <!-- AR SCENE -->
217
- <a-scene
218
- mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.01; uiLoading: no; uiScanning: no; missTolerance: 20; warmupTolerance: 5; maxTrack: 1"
219
- color-space="sRGB"
220
- renderer="colorManagement: true, physicallyCorrectLights, highRefreshRate: true, antialias: true"
221
- vr-mode-ui="enabled: false"
222
- device-orientation-permission-ui="enabled: false">
223
-
224
- <a-assets>
225
- <video id="vid" src="./img/video.mp4" preload="auto" loop muted playsinline webkit-playsinline crossorigin="anonymous"></video>
226
- </a-assets>
227
-
228
- <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
229
-
230
-
231
- <!-- TARGET MINDAR (AR REALE) 16:9 -->
232
- <!--
233
- <a-entity id="example-target" mindar-image-target="targetIndex: 0">
234
- <a-entity id="ar-content-group">
235
- <a-entity id="myVid"
236
- geometry="primitive: plane; width: 1.6; height: 0.9"
237
- material="src: #vid; shader: flat; transparent: true; opacity: 1"
238
- position="0 0 0">
239
- </a-entity>
240
- <a-plane position="0 0.47 0" width="1.68" height="0.03" color="#00ff41" material="shader: flat">
241
- <a-animation attribute="opacity" from="1" to="0.7" dur="100" direction="alternate" repeat="indefinite"></a-animation>
242
- </a-plane>
243
- <a-plane position="0 -0.47 0" width="1.68" height="0.03" color="#00ff41" material="shader: flat"></a-plane>
244
- <a-plane position="-0.83 0 0" width="0.03" height="0.96" color="#00ff41" material="shader: flat"></a-plane>
245
- <a-plane position="0.83 0 0" width="0.03" height="0.96" color="#00ff41" material="shader: flat">
246
- <a-animation attribute="opacity" from="1" to="0.7" dur="150" direction="alternate" repeat="indefinite"></a-animation>
247
- </a-plane>
248
-
249
- <a-plane position="-0.77 0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
250
- <a-plane position="0.77 -0.41 0.01" width="0.15" height="0.03" color="white" material="shader: flat; opacity: 0.9"></a-plane>
251
-
252
- <a-text value="INNOVATION_LAB_DEV" color="#00ff41" align="center" width="1.5" position="0 -0.6 0.01"
253
- font="https://cdn.aframe.io/fonts/Roboto-msdf.json">
254
- <a-animation attribute="opacity" from="0.3" to="1" dur="800" direction="alternate" repeat="indefinite"></a-animation>
255
- </a-text>
256
- </a-entity>
257
- </a-entity>
258
- -->
259
-
260
- <!-- TARGET MINDAR (AR REALE) 5:4 -->
261
- <a-entity id="example-target" mindar-image-target="targetIndex: 0">
262
- <a-entity id="ar-content-group">
263
- <a-entity id="myVid"
264
- geometry="primitive: plane; width: 1.25; height: 1"
265
- material="src: #vid; shader: flat; transparent: true; opacity: 1"
266
- position="0 0 0">
267
- </a-entity>
268
- <a-text value="INNOVATION_LAB_DEV" color="#00ff41" align="center" width="1.5" position="0 -0.65 0.01"
269
- font="https://cdn.aframe.io/fonts/Roboto-msdf.json">
270
- <a-animation attribute="opacity" from="0.3" to="1" dur="800" direction="alternate" repeat="indefinite"></a-animation>
271
- </a-text>
272
- </a-entity>
273
- </a-entity>
274
- </a-scene>
275
-
276
- <!-- LOGIC -->
277
- <script>
278
- const video = document.querySelector("#vid");
279
- const target = document.querySelector("#example-target");
280
- const statusText = document.querySelector("#sys-status");
281
- const aimOverlay = document.querySelector("#aim-overlay");
282
- const audioBtn = document.querySelector("#audio-btn");
283
- const audioText = document.querySelector("#audio-text");
284
- const loader = document.querySelector("#custom-loader");
285
- const loadingPercent = document.querySelector("#loading-percent");
286
- const progressBar = document.querySelector("#progress-bar");
287
- const scene = document.querySelector("a-scene");
288
- const fpsCounter = document.querySelector("#fps-counter");
289
- const fallbackBtn = document.querySelector("#fallback-btn");
290
-
291
- // Nuovi elementi Fallback HTML
292
- const fallbackPlayer = document.querySelector("#fallback-player");
293
- const manualVideo = document.querySelector("#manual-video");
294
- const closeManualBtn = document.querySelector("#close-manual-btn");
295
-
296
- let isAudioEnabled = false;
297
- let loadProgress = 0;
298
- let isManualMode = false;
299
-
300
- // Smoothing Variables
301
- let smoothPositionX = 0;
302
- let smoothPositionY = 0;
303
- let smoothPositionZ = 0;
304
- const SMOOTHING_FACTOR = 0.1; // Smooth originale
305
-
306
- // CUSTOM SMOOTHING LAYER
307
- const myVidEntity = document.querySelector("#myVid");
308
-
309
- setInterval(() => {
310
- // Applica smoothing solo alla parte AR Reale
311
- if(myVidEntity && target.object3D.visible && !isManualMode) {
312
- const currentPos = target.object3D.position;
313
- smoothPositionX += (currentPos.x - smoothPositionX) * SMOOTHING_FACTOR;
314
- smoothPositionY += (currentPos.y - smoothPositionY) * SMOOTHING_FACTOR;
315
- smoothPositionZ += (currentPos.z - smoothPositionZ) * SMOOTHING_FACTOR;
316
- }
317
- }, 16);
318
-
319
- // Fake FPS
320
- setInterval(() => {
321
- const fakeFps = Math.floor(Math.random() * 5) + 55;
322
- fpsCounter.innerText = fakeFps;
323
- }, 1000);
324
-
325
- // Loading
326
- const nerdMessages = [
327
- "Calibrating sensors...",
328
- "Loading neural net...",
329
- "Stabilizing matrix...",
330
- "Syncing reality..."
331
- ];
332
- let msgIndex = 0;
333
-
334
- const loadInterval = setInterval(() => {
335
- loadProgress += 0.55;
336
- if(loadProgress > 100) loadProgress = 100;
337
- loadingPercent.innerText = Math.floor(loadProgress) + "%";
338
- progressBar.style.width = loadProgress + "%";
339
- if(Math.floor(loadProgress) % 25 === 0 && msgIndex < nerdMessages.length) {
340
- document.querySelector('#load-msg').innerText = nerdMessages[msgIndex];
341
- msgIndex++;
342
- }
343
- if(loadProgress >= 100) {
344
- clearInterval(loadInterval);
345
- document.querySelector('#load-msg').innerText = "System Ready.";
346
- }
347
- }, 30);
348
-
349
- // AR PRONTA
350
- scene.addEventListener("arReady", () => {
351
- console.log("✅ AR SYSTEM ONLINE");
352
- const checkLoad = setInterval(() => {
353
- if(loadProgress >= 100) {
354
- clearInterval(checkLoad);
355
- setTimeout(() => {
356
- loader.style.opacity = "0";
357
- setTimeout(() => loader.style.display = "none", 500);
358
-
359
- // TIMER 10 SECONDI: Il bottone appare SEMPRE
360
- setTimeout(() => {
361
- if (!isManualMode) {
362
- fallbackBtn.classList.remove('hidden');
363
- fallbackBtn.style.display = 'flex';
364
- }
365
- }, 10000);
366
- }, 500);
367
- }
368
- }, 100);
369
- });
370
-
371
- // TARGET FOUND
372
- target.addEventListener("targetFound", () => {
373
- if(isManualMode) return;
374
- video.play();
375
- statusText.innerText = "LOCKED";
376
- statusText.style.color = "#fff";
377
- statusText.classList.remove("animate-pulse");
378
- aimOverlay.style.opacity = "0";
379
- if(navigator.vibrate) navigator.vibrate(50);
380
- });
381
-
382
- // TARGET LOST
383
- target.addEventListener("targetLost", () => {
384
- if(isManualMode) return;
385
- video.pause();
386
- statusText.innerText = "SEARCHING...";
387
- statusText.style.color = "#00ff41";
388
- statusText.classList.add("animate-pulse");
389
- aimOverlay.style.opacity = "1";
390
- });
391
-
392
- // AUDIO TOGGLE
393
- audioBtn.addEventListener('click', () => {
394
- if (!isAudioEnabled) {
395
- video.muted = false;
396
- manualVideo.muted = false; // Sblocca anche l'audio manuale
397
- isAudioEnabled = true;
398
- audioText.innerText = "AUDIO ON";
399
- audioBtn.classList.add("bg-[#00ff41]", "text-black");
400
- audioBtn.classList.remove("bg-[#00ff41]/10", "text-[#00ff41]");
401
- if(navigator.vibrate) navigator.vibrate(50);
402
- setTimeout(() => {
403
- audioBtn.style.opacity = "0";
404
- audioBtn.style.pointerEvents = "none";
405
- }, 1500);
406
- }
407
- });
408
-
409
- // MODALITÀ MANUALE (OVERLAY HTML)
410
- fallbackBtn.addEventListener('click', () => {
411
- isManualMode = true;
412
- console.log("🛠 MANUAL HTML PLAYER OPENED");
413
-
414
- // Pausa AR
415
- video.pause();
416
-
417
- // Mostra Overlay HTML
418
- fallbackPlayer.style.display = 'flex';
419
-
420
- // Avvia Video Manuale
421
- manualVideo.currentTime = 0;
422
- manualVideo.play();
423
- if(isAudioEnabled) manualVideo.muted = false;
424
-
425
- // UI Updates
426
- statusText.innerText = "MANUAL_MODE";
427
- statusText.style.color = "#ff0055";
428
- if(navigator.vibrate) navigator.vibrate([50, 50, 50]);
429
- });
430
-
431
- // CHIUSURA MODALITÀ MANUALE
432
- closeManualBtn.addEventListener('click', () => {
433
- isManualMode = false;
434
-
435
- // Nascondi Overlay
436
- fallbackPlayer.style.display = 'none';
437
- manualVideo.pause();
438
-
439
- // Ripristina AR UI
440
- statusText.innerText = "SEARCHING...";
441
- statusText.style.color = "#00ff41";
442
- aimOverlay.style.opacity = "1";
443
- });
444
-
445
- </script>
446
- </body>
447
- </html>