Hugging Face's logo

Spaces:
MatteoScript
/
InnovationLab
Running

App Files Community
MatteoScript commited on
Commit
d2c2810
·
verified ·
1 Parent(s): 80d1cc1

Update index_old.html

Browse files
Files changed (1) hide show
  1. index_old.html +279 -279
index_old.html CHANGED
@@ -1,280 +1,280 @@
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" />
6
- <title>AR Neural Link | MindAR</title>
7
-
8
- <!-- Tailwind & Fonts -->
9
- <script src="https://cdn.tailwindcss.com"></script>
10
- <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
11
-
12
- <!-- AR Libraries -->
13
- <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
14
- <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
15
- <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
16
-
17
- <style>
18
- :root { --neon-green: #00ff41; --dark-bg: #050505; }
19
- body { margin: 0; background-color: black; font-family: 'Fira Code', monospace; overflow: hidden; }
20
-
21
- /* FX: Scanlines Overlay - RIDOTTO PER VISIBILITÀ VIDEO */
22
- .scanlines {
23
- background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));
24
- background-size: 100% 4px;
25
- position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50;
26
- }
27
-
28
- /* FX: CRT Flicker */
29
- .crt-flicker { animation: flicker 0.15s infinite; pointer-events: none; position: fixed; inset: 0; background: rgba(0,255,65,0.01); z-index: 49;}
30
- @keyframes flicker { 0% { opacity: 0.95; } 50% { opacity: 1.0; } 100% { opacity: 0.95; } }
31
-
32
- /* UI Elements */
33
- .tech-border { border: 1px solid var(--neon-green); box-shadow: 0 0 10px rgba(0, 255, 65, 0.2); background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
34
- .blinking-cursor { animation: blink 1s step-end infinite; }
35
- @keyframes blink { 50% { opacity: 0; } }
36
-
37
- /* Hide VR Button */
38
- .a-enter-vr-button { display: none !important; }
39
-
40
- /* --- STILI NUOVA BARRA DI CARICAMENTO --- */
41
- #custom-loader {
42
- position: fixed; inset: 0; z-index: 9999; background: #000;
43
- display: flex; flex-direction: column; align-items: center; justify-content: center;
44
- transition: opacity 0.5s ease-out;
45
- }
46
-
47
- .loader-track {
48
- width: 280px;
49
- height: 24px;
50
- border: 1px solid #333;
51
- padding: 2px;
52
- position: relative;
53
- background: rgba(0, 255, 65, 0.05);
54
- box-shadow: 0 0 10px rgba(0, 255, 65, 0.1);
55
- }
56
-
57
- .loader-fill {
58
- height: 100%;
59
- background-color: var(--neon-green);
60
- width: 0%;
61
- box-shadow: 0 0 15px var(--neon-green);
62
- position: relative;
63
- /* Effetto righe sulla barra */
64
- background-image: repeating-linear-gradient(
65
- 45deg,
66
- transparent,
67
- transparent 10px,
68
- rgba(0, 0, 0, 0.2) 10px,
69
- rgba(0, 0, 0, 0.2) 20px
70
- );
71
- animation: loadProgress 2.5s ease-out forwards;
72
- }
73
-
74
- @keyframes loadProgress {
75
- 0% { width: 0%; }
76
- 20% { width: 10%; }
77
- 40% { width: 45%; }
78
- 60% { width: 60%; }
79
- 80% { width: 90%; }
80
- 100% { width: 100%; }
81
- }
82
- </style>
83
- </head>
84
- <body>
85
-
86
- <!-- 1. CUSTOM LOADER SCREEN (Migliorato) -->
87
- <div id="custom-loader">
88
- <div class="flex flex-col items-center gap-2 w-full max-w-sm px-6">
89
- <div class="w-full flex justify-between text-[#00ff41] text-xs font-mono mb-1 uppercase tracking-widest opacity-80">
90
- <span>System Boot</span>
91
- <span id="loading-percent">0%</span>
92
- </div>
93
-
94
- <div class="loader-track">
95
- <div class="loader-fill"></div>
96
- </div>
97
-
98
- <div class="w-full mt-2 h-4 text-[#00ff41]/60 text-[10px] font-mono text-left">
99
- > <span id="loading-text">INITIALIZING CORE...</span><span class="blinking-cursor">_</span>
100
- </div>
101
- </div>
102
- </div>
103
-
104
- <!-- 2. VISUAL FX LAYERS -->
105
- <div class="scanlines"></div>
106
- <div class="crt-flicker"></div>
107
-
108
- <!-- 3. UI INTERFACE (OVERLAY) -->
109
- <div id="ui-layer" class="fixed inset-0 z-[100] flex flex-col justify-between p-6 pointer-events-none">
110
-
111
- <!-- Top Bar -->
112
- <div class="flex justify-between items-start pointer-events-auto">
113
- <div class="text-[10px] md:text-xs text-[#00ff41] font-bold tracking-widest bg-black/80 px-2 py-1 border-l-2 border-[#00ff41]">
114
- SYS.STATUS: <span id="sys-status" class="animate-pulse">SCANNING</span>
115
- </div>
116
-
117
- <!-- EXIT BUTTON (LINK A ./index.html) -->
118
- <a href="./index.html" class="flex items-center justify-center w-8 h-8 md:w-10 md:h-10 border border-[#00ff41] bg-black/80 text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-all backdrop-blur-sm shadow-[0_0_10px_rgba(0,255,65,0.2)]">
119
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
120
- </a>
121
- </div>
122
-
123
- <!-- Center Aim (Crosshair) - Scompare al tag found -->
124
- <div id="aim-overlay" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 border border-[#00ff41]/30 rounded-lg flex items-center justify-center transition-opacity duration-300 pointer-events-none">
125
- <div class="absolute w-full h-[1px] bg-[#00ff41]/20"></div>
126
- <div class="absolute h-full w-[1px] bg-[#00ff41]/20"></div>
127
- <div class="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-[#00ff41]"></div>
128
- <div class="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-[#00ff41]"></div>
129
- <div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-[#00ff41]"></div>
130
- <div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-[#00ff41]"></div>
131
- <div id="target-msg" class="mt-32 text-[#00ff41] text-xs font-bold tracking-widest bg-black/80 px-2">
132
- [ INQUADRA IL TAG ]
133
- </div>
134
- </div>
135
-
136
- <!-- Bottom Controls -->
137
- <div class="w-full max-w-md mx-auto pointer-events-auto transition-all duration-500 text-center">
138
- <!-- Audio Hint Button -->
139
- <button id="audio-btn" class="tech-border px-6 py-3 text-[#00ff41] text-sm font-bold uppercase tracking-widest hover:bg-[#00ff41] hover:text-black transition-all group w-full mb-4">
140
- <span class="mr-2 group-hover:animate-pulse">🔊</span>
141
- <span id="audio-text">CLICCA PER AUDIO</span>
142
- </button>
143
-
144
- <div class="text-[10px] text-[#00ff41]/50 text-center font-mono pointer-events-none">
145
- > WAITING FOR NEURAL HANDSHAKE<span class="blinking-cursor">_</span>
146
- </div>
147
- </div>
148
- </div>
149
-
150
- <!-- 4. MINDAR SCENE -->
151
- <!-- uiLoading: no -> Disabilita il loader blu di default -->
152
- <a-scene
153
- mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.001; uiLoading: no; uiScanning: no;"
154
- color-space="sRGB"
155
- renderer="colorManagement: true, physicallyCorrectLights"
156
- vr-mode-ui="enabled: false"
157
- device-orientation-permission-ui="enabled: false">
158
-
159
- <a-assets>
160
- <video id="vid" src="http://localhost:8000/img/video.mp4" autoplay loop muted playsinline webkit-playsinline crossorigin="anonymous"></video>
161
- </a-assets>
162
-
163
- <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
164
-
165
- <a-entity id="example-target" mindar-image-target="targetIndex: 0">
166
- <!-- Il Video -->
167
- <a-entity id="myVid"
168
- geometry="primitive: plane; width: 1; height: 0.5625"
169
- material="src: #vid; shader: flat; transparent: true; opacity: 1"
170
- position="0 0 0">
171
- </a-entity>
172
-
173
- <!-- CORNICE VERDE (Green Frame) attorno al video -->
174
- <a-plane position="0 0.29 0" width="1.04" height="0.02" color="#00ff41" material="shader: flat"></a-plane>
175
- <a-plane position="0 -0.29 0" width="1.04" height="0.02" color="#00ff41" material="shader: flat"></a-plane>
176
- <a-plane position="-0.51 0 0" width="0.02" height="0.6" color="#00ff41" material="shader: flat"></a-plane>
177
- <a-plane position="0.51 0 0" width="0.02" height="0.6" color="#00ff41" material="shader: flat"></a-plane>
178
- </a-entity>
179
- </a-scene>
180
-
181
- <!-- 5. LOGIC SCRIPT -->
182
- <script>
183
- const video = document.querySelector("#vid");
184
- const target = document.querySelector("#example-target");
185
- const statusText = document.querySelector("#sys-status");
186
- const aimOverlay = document.querySelector("#aim-overlay");
187
- const audioBtn = document.querySelector("#audio-btn");
188
- const audioText = document.querySelector("#audio-text");
189
- const loader = document.querySelector("#custom-loader");
190
- const loadingText = document.querySelector("#loading-text");
191
- const loadingPercent = document.querySelector("#loading-percent");
192
- const scene = document.querySelector("a-scene");
193
- let isAudioEnabled = false;
194
-
195
- // FAKE LOADING TEXT ANIMATION
196
- const loadMessages = [
197
- "CALIBRATING SENSORS...",
198
- "LOADING NEURAL MESH...",
199
- "DECRYPTING VIDEO STREAM...",
200
- "SYNCING AR MATRIX...",
201
- "READY."
202
- ];
203
-
204
- let msgIndex = 0;
205
- let percent = 0;
206
-
207
- const textInterval = setInterval(() => {
208
- if(msgIndex < loadMessages.length) {
209
- loadingText.innerText = loadMessages[msgIndex];
210
- msgIndex++;
211
- }
212
- }, 500);
213
-
214
- const percentInterval = setInterval(() => {
215
- if(percent < 100) {
216
- percent += Math.floor(Math.random() * 5) + 2;
217
- if(percent > 100) percent = 100;
218
- loadingPercent.innerText = percent + "%";
219
- } else {
220
- clearInterval(percentInterval);
221
- }
222
- }, 100);
223
-
224
- // GESTIONE CUSTOM LOADER (AR READY)
225
- scene.addEventListener("arReady", (event) => {
226
- console.log("MindAR Ready");
227
- clearInterval(textInterval);
228
- clearInterval(percentInterval);
229
- loadingPercent.innerText = "100%";
230
- loadingText.innerText = "ACCESS GRANTED.";
231
-
232
- // Ritardo per far vedere il 100%
233
- setTimeout(() => {
234
- loader.style.opacity = "0";
235
- setTimeout(() => {
236
- loader.style.display = "none";
237
- }, 500);
238
- }, 800);
239
- });
240
-
241
- // TARGET FOUND
242
- target.addEventListener("targetFound", event => {
243
- console.log("Target trovato");
244
- video.play();
245
- statusText.innerText = "LOCKED";
246
- statusText.classList.remove("animate-pulse");
247
- statusText.style.color = "#fff";
248
- aimOverlay.style.opacity = '0';
249
- });
250
-
251
- // TARGET LOST
252
- target.addEventListener("targetLost", event => {
253
- console.log("Target perso");
254
- video.pause();
255
- statusText.innerText = "SCANNING";
256
- statusText.classList.add("animate-pulse");
257
- statusText.style.color = "#00ff41";
258
- aimOverlay.style.opacity = '1';
259
- });
260
-
261
- // AUDIO TOGGLE
262
- audioBtn.addEventListener('click', function() {
263
- if (!isAudioEnabled) {
264
- video.muted = false;
265
- isAudioEnabled = true;
266
-
267
- audioText.innerText = "AUDIO: ATTIVO";
268
- audioBtn.classList.add("bg-[#00ff41]", "text-black");
269
- audioBtn.classList.remove("hover:bg-[#00ff41]", "hover:text-black", "tech-border");
270
- audioBtn.style.boxShadow = "0 0 15px #00ff41";
271
-
272
- setTimeout(() => {
273
- audioBtn.style.opacity = '0';
274
- audioBtn.style.pointerEvents = 'none';
275
- }, 2000);
276
- }
277
- });
278
- </script>
279
- </body>
280
  </html>
 
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" />
6
+ <title>AR Neural Link | MindAR</title>
7
+
8
+ <!-- Tailwind & Fonts -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
11
+
12
+ <!-- AR Libraries -->
13
+ <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
14
+ <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
15
+ <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
16
+
17
+ <style>
18
+ :root { --neon-green: #00ff41; --dark-bg: #050505; }
19
+ body { margin: 0; background-color: black; font-family: 'Fira Code', monospace; overflow: hidden; }
20
+
21
+ /* FX: Scanlines Overlay - RIDOTTO PER VISIBILITÀ VIDEO */
22
+ .scanlines {
23
+ background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));
24
+ background-size: 100% 4px;
25
+ position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50;
26
+ }
27
+
28
+ /* FX: CRT Flicker */
29
+ .crt-flicker { animation: flicker 0.15s infinite; pointer-events: none; position: fixed; inset: 0; background: rgba(0,255,65,0.01); z-index: 49;}
30
+ @keyframes flicker { 0% { opacity: 0.95; } 50% { opacity: 1.0; } 100% { opacity: 0.95; } }
31
+
32
+ /* UI Elements */
33
+ .tech-border { border: 1px solid var(--neon-green); box-shadow: 0 0 10px rgba(0, 255, 65, 0.2); background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
34
+ .blinking-cursor { animation: blink 1s step-end infinite; }
35
+ @keyframes blink { 50% { opacity: 0; } }
36
+
37
+ /* Hide VR Button */
38
+ .a-enter-vr-button { display: none !important; }
39
+
40
+ /* --- STILI NUOVA BARRA DI CARICAMENTO --- */
41
+ #custom-loader {
42
+ position: fixed; inset: 0; z-index: 9999; background: #000;
43
+ display: flex; flex-direction: column; align-items: center; justify-content: center;
44
+ transition: opacity 0.5s ease-out;
45
+ }
46
+
47
+ .loader-track {
48
+ width: 280px;
49
+ height: 24px;
50
+ border: 1px solid #333;
51
+ padding: 2px;
52
+ position: relative;
53
+ background: rgba(0, 255, 65, 0.05);
54
+ box-shadow: 0 0 10px rgba(0, 255, 65, 0.1);
55
+ }
56
+
57
+ .loader-fill {
58
+ height: 100%;
59
+ background-color: var(--neon-green);
60
+ width: 0%;
61
+ box-shadow: 0 0 15px var(--neon-green);
62
+ position: relative;
63
+ /* Effetto righe sulla barra */
64
+ background-image: repeating-linear-gradient(
65
+ 45deg,
66
+ transparent,
67
+ transparent 10px,
68
+ rgba(0, 0, 0, 0.2) 10px,
69
+ rgba(0, 0, 0, 0.2) 20px
70
+ );
71
+ animation: loadProgress 2.5s ease-out forwards;
72
+ }
73
+
74
+ @keyframes loadProgress {
75
+ 0% { width: 0%; }
76
+ 20% { width: 10%; }
77
+ 40% { width: 45%; }
78
+ 60% { width: 60%; }
79
+ 80% { width: 90%; }
80
+ 100% { width: 100%; }
81
+ }
82
+ </style>
83
+ </head>
84
+ <body>
85
+
86
+ <!-- 1. CUSTOM LOADER SCREEN (Migliorato) -->
87
+ <div id="custom-loader">
88
+ <div class="flex flex-col items-center gap-2 w-full max-w-sm px-6">
89
+ <div class="w-full flex justify-between text-[#00ff41] text-xs font-mono mb-1 uppercase tracking-widest opacity-80">
90
+ <span>System Boot</span>
91
+ <span id="loading-percent">0%</span>
92
+ </div>
93
+
94
+ <div class="loader-track">
95
+ <div class="loader-fill"></div>
96
+ </div>
97
+
98
+ <div class="w-full mt-2 h-4 text-[#00ff41]/60 text-[10px] font-mono text-left">
99
+ > <span id="loading-text">INITIALIZING CORE...</span><span class="blinking-cursor">_</span>
100
+ </div>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- 2. VISUAL FX LAYERS -->
105
+ <div class="scanlines"></div>
106
+ <div class="crt-flicker"></div>
107
+
108
+ <!-- 3. UI INTERFACE (OVERLAY) -->
109
+ <div id="ui-layer" class="fixed inset-0 z-[100] flex flex-col justify-between p-6 pointer-events-none">
110
+
111
+ <!-- Top Bar -->
112
+ <div class="flex justify-between items-start pointer-events-auto">
113
+ <div class="text-[10px] md:text-xs text-[#00ff41] font-bold tracking-widest bg-black/80 px-2 py-1 border-l-2 border-[#00ff41]">
114
+ SYS.STATUS: <span id="sys-status" class="animate-pulse">SCANNING</span>
115
+ </div>
116
+
117
+ <!-- EXIT BUTTON (LINK A ./index.html) -->
118
+ <a href="./index.html" class="flex items-center justify-center w-8 h-8 md:w-10 md:h-10 border border-[#00ff41] bg-black/80 text-[#00ff41] hover:bg-[#00ff41] hover:text-black transition-all backdrop-blur-sm shadow-[0_0_10px_rgba(0,255,65,0.2)]">
119
+ <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
120
+ </a>
121
+ </div>
122
+
123
+ <!-- Center Aim (Crosshair) - Scompare al tag found -->
124
+ <div id="aim-overlay" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-48 border border-[#00ff41]/30 rounded-lg flex items-center justify-center transition-opacity duration-300 pointer-events-none">
125
+ <div class="absolute w-full h-[1px] bg-[#00ff41]/20"></div>
126
+ <div class="absolute h-full w-[1px] bg-[#00ff41]/20"></div>
127
+ <div class="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-[#00ff41]"></div>
128
+ <div class="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-[#00ff41]"></div>
129
+ <div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-[#00ff41]"></div>
130
+ <div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-[#00ff41]"></div>
131
+ <div id="target-msg" class="mt-32 text-[#00ff41] text-xs font-bold tracking-widest bg-black/80 px-2">
132
+ [ INQUADRA IL TAG ]
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Bottom Controls -->
137
+ <div class="w-full max-w-md mx-auto pointer-events-auto transition-all duration-500 text-center">
138
+ <!-- Audio Hint Button -->
139
+ <button id="audio-btn" class="tech-border px-6 py-3 text-[#00ff41] text-sm font-bold uppercase tracking-widest hover:bg-[#00ff41] hover:text-black transition-all group w-full mb-4">
140
+ <span class="mr-2 group-hover:animate-pulse">🔊</span>
141
+ <span id="audio-text">CLICCA PER AUDIO</span>
142
+ </button>
143
+
144
+ <div class="text-[10px] text-[#00ff41]/50 text-center font-mono pointer-events-none">
145
+ > WAITING FOR NEURAL HANDSHAKE<span class="blinking-cursor">_</span>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- 4. MINDAR SCENE -->
151
+ <!-- uiLoading: no -> Disabilita il loader blu di default -->
152
+ <a-scene
153
+ mindar-image="imageTargetSrc: img/targets.mind; filterMinCF:0.0001; filterBeta: 0.001; uiLoading: no; uiScanning: no;"
154
+ color-space="sRGB"
155
+ renderer="colorManagement: true, physicallyCorrectLights"
156
+ vr-mode-ui="enabled: false"
157
+ device-orientation-permission-ui="enabled: false">
158
+
159
+ <a-assets>
160
+ <video id="vid" src="https://matteoscript-innovationlab.static.hf.space/img/video.mp4" autoplay loop muted playsinline webkit-playsinline crossorigin="anonymous"></video>
161
+ </a-assets>
162
+
163
+ <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
164
+
165
+ <a-entity id="example-target" mindar-image-target="targetIndex: 0">
166
+ <!-- Il Video -->
167
+ <a-entity id="myVid"
168
+ geometry="primitive: plane; width: 1; height: 0.5625"
169
+ material="src: #vid; shader: flat; transparent: true; opacity: 1"
170
+ position="0 0 0">
171
+ </a-entity>
172
+
173
+ <!-- CORNICE VERDE (Green Frame) attorno al video -->
174
+ <a-plane position="0 0.29 0" width="1.04" height="0.02" color="#00ff41" material="shader: flat"></a-plane>
175
+ <a-plane position="0 -0.29 0" width="1.04" height="0.02" color="#00ff41" material="shader: flat"></a-plane>
176
+ <a-plane position="-0.51 0 0" width="0.02" height="0.6" color="#00ff41" material="shader: flat"></a-plane>
177
+ <a-plane position="0.51 0 0" width="0.02" height="0.6" color="#00ff41" material="shader: flat"></a-plane>
178
+ </a-entity>
179
+ </a-scene>
180
+
181
+ <!-- 5. LOGIC SCRIPT -->
182
+ <script>
183
+ const video = document.querySelector("#vid");
184
+ const target = document.querySelector("#example-target");
185
+ const statusText = document.querySelector("#sys-status");
186
+ const aimOverlay = document.querySelector("#aim-overlay");
187
+ const audioBtn = document.querySelector("#audio-btn");
188
+ const audioText = document.querySelector("#audio-text");
189
+ const loader = document.querySelector("#custom-loader");
190
+ const loadingText = document.querySelector("#loading-text");
191
+ const loadingPercent = document.querySelector("#loading-percent");
192
+ const scene = document.querySelector("a-scene");
193
+ let isAudioEnabled = false;
194
+
195
+ // FAKE LOADING TEXT ANIMATION
196
+ const loadMessages = [
197
+ "CALIBRATING SENSORS...",
198
+ "LOADING NEURAL MESH...",
199
+ "DECRYPTING VIDEO STREAM...",
200
+ "SYNCING AR MATRIX...",
201
+ "READY."
202
+ ];
203
+
204
+ let msgIndex = 0;
205
+ let percent = 0;
206
+
207
+ const textInterval = setInterval(() => {
208
+ if(msgIndex < loadMessages.length) {
209
+ loadingText.innerText = loadMessages[msgIndex];
210
+ msgIndex++;
211
+ }
212
+ }, 500);
213
+
214
+ const percentInterval = setInterval(() => {
215
+ if(percent < 100) {
216
+ percent += Math.floor(Math.random() * 5) + 2;
217
+ if(percent > 100) percent = 100;
218
+ loadingPercent.innerText = percent + "%";
219
+ } else {
220
+ clearInterval(percentInterval);
221
+ }
222
+ }, 100);
223
+
224
+ // GESTIONE CUSTOM LOADER (AR READY)
225
+ scene.addEventListener("arReady", (event) => {
226
+ console.log("MindAR Ready");
227
+ clearInterval(textInterval);
228
+ clearInterval(percentInterval);
229
+ loadingPercent.innerText = "100%";
230
+ loadingText.innerText = "ACCESS GRANTED.";
231
+
232
+ // Ritardo per far vedere il 100%
233
+ setTimeout(() => {
234
+ loader.style.opacity = "0";
235
+ setTimeout(() => {
236
+ loader.style.display = "none";
237
+ }, 500);
238
+ }, 800);
239
+ });
240
+
241
+ // TARGET FOUND
242
+ target.addEventListener("targetFound", event => {
243
+ console.log("Target trovato");
244
+ video.play();
245
+ statusText.innerText = "LOCKED";
246
+ statusText.classList.remove("animate-pulse");
247
+ statusText.style.color = "#fff";
248
+ aimOverlay.style.opacity = '0';
249
+ });
250
+
251
+ // TARGET LOST
252
+ target.addEventListener("targetLost", event => {
253
+ console.log("Target perso");
254
+ video.pause();
255
+ statusText.innerText = "SCANNING";
256
+ statusText.classList.add("animate-pulse");
257
+ statusText.style.color = "#00ff41";
258
+ aimOverlay.style.opacity = '1';
259
+ });
260
+
261
+ // AUDIO TOGGLE
262
+ audioBtn.addEventListener('click', function() {
263
+ if (!isAudioEnabled) {
264
+ video.muted = false;
265
+ isAudioEnabled = true;
266
+
267
+ audioText.innerText = "AUDIO: ATTIVO";
268
+ audioBtn.classList.add("bg-[#00ff41]", "text-black");
269
+ audioBtn.classList.remove("hover:bg-[#00ff41]", "hover:text-black", "tech-border");
270
+ audioBtn.style.boxShadow = "0 0 15px #00ff41";
271
+
272
+ setTimeout(() => {
273
+ audioBtn.style.opacity = '0';
274
+ audioBtn.style.pointerEvents = 'none';
275
+ }, 2000);
276
+ }
277
+ });
278
+ </script>
279
+ </body>
280
  </html>