Update index.html

index.html

@@ -281,53 +281,6 @@
             </div>
         </section>
 
-        <!-- UNLOCK AR LAYER -->
-        <section class="px-6 py-24 relative z-20 overflow-hidden">
-            <div class="absolute inset-0 bg-gradient-to-b from-black via-[#0d0d0d] to-black opacity-90"></div>
-            <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%221%22/%3E%3C/svg%3E');"></div>
-            
-            <div class="max-w-3xl mx-auto relative text-center reveal-on-scroll">
-                <div class="mb-8">
-                    <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4 text-white">
-                        The Hidden <span class="text-[#00ff41] animate-pulse">Layer</span>
-                    </h2>
-                    <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
-                        C'è un quarto livello di realtà nascosto in questo tessuto. 
-                        Sblocca il protocollo AR per immergerti dentro.
-                    </p>
-                </div>
-
-                <div class="py-8 flex justify-center">
-                    <!-- Slider Component -->
-                    <div id="slider-container" class="relative w-full max-w-xs h-14 bg-black border border-[#333] rounded-full overflow-hidden backdrop-blur-sm shadow-[0_0_15px_rgba(0,0,0,0.5)] select-none touch-none">
-                        <div class="absolute -top-8 left-0 right-0 text-center">
-                            <div class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase animate-pulse">Secure Connection Available</div>
-                        </div>
-                        <!-- Background Fill -->
-                        <div id="slider-fill" class="absolute inset-0 bg-[#00ff41] opacity-10 transition-opacity" style="width: 0%"></div>
-                        <div class="absolute inset-0 opacity-20 bg-[linear-gradient(90deg,transparent_0%,rgba(0,255,65,0.2)_50%,transparent_100%)] bg-[length:200%_100%] animate-[shimmer_2s_infinite] pointer-events-none"></div>
-                        
-                        <!-- Text -->
-                        <div id="slider-text" class="absolute inset-0 flex items-center justify-center pointer-events-none transition-opacity duration-300">
-                            <span class="font-mono text-xs font-bold text-white tracking-[0.2em] uppercase flex items-center gap-2">
-                                Slide to Decode <span class="animate-bounce">→</span>
-                            </span>
-                        </div>
-
-                        <!-- Handle -->
-                        <div id="slider-handle" class="absolute top-1 left-1 bottom-1 w-12 bg-[#0d0d0d] rounded-full border border-[#00ff41] flex items-center justify-center cursor-grab z-20 shadow-[0_0_10px_rgba(0,255,65,0.3)] active:cursor-grabbing hover:scale-105 transition-transform">
-                            <svg id="icon-arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-pulse"><polyline points="9 18 15 12 9 6"></polyline></svg>
-                            <svg id="icon-lock" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
-                        </div>
-                    </div>
-                </div>
-                
-                <p class="mt-8 text-[10px] text-[#00ff41]/60 font-mono">
-                    // REQUIRES CAMERA PERMISSION
-                </p>
-            </div>
-        </section>
-
         <style>
             .game-zoom-container {
                 width: 100%;
@@ -364,11 +317,10 @@
                 
                 <div class="text-center mb-8">
                     <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4">
-                        System <span class="text-[#00ff41]">Override</span>
+                        Innovation <span class="text-[#00ff41]">Run</span>
                     </h2>
                     <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
-                        // Mobile Detected. <br>
-                        // <span class="text-[#00ff41]">Mission:</span> TAP per saltare. Doppio Tap disabilitato.
+                        // <span class="text-[#00ff41]">Mission:</span> Crea un PoC visionario OMNICANALE
                     </p>
                 </div>
 
@@ -388,7 +340,6 @@
                         </div>
                         <p class="text-[#00ff41] font-mono text-xs md:text-sm tracking-widest uppercase font-bold text-center px-4">
                             TAP TO INITIALIZE<br>
-                            <span class="text-[10px] opacity-70 font-normal normal-case mt-2 block">Interfaccia Bloccata per Gaming</span>
                         </p>
                     </div>
 
@@ -429,7 +380,54 @@
                 
                 iframe.contentWindow.focus();
             }
-        </script>
+        </script>        
+
+        <!-- UNLOCK AR LAYER -->
+        <section class="px-6 py-24 relative z-20 overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-b from-black via-[#0d0d0d] to-black opacity-90"></div>
+            <div class="absolute inset-0 opacity-20" style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%221%22/%3E%3C/svg%3E');"></div>
+            
+            <div class="max-w-3xl mx-auto relative text-center reveal-on-scroll">
+                <div class="mb-8">
+                    <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4 text-white">
+                        The Hidden <span class="text-[#00ff41] animate-pulse">Layer</span>
+                    </h2>
+                    <p class="font-mono text-xs md:text-sm opacity-70 max-w-lg mx-auto">
+                        C'è un quarto livello di realtà nascosto in questo tessuto. 
+                        Sblocca il protocollo AR per immergerti dentro.
+                    </p>
+                </div>
+
+                <div class="py-8 flex justify-center">
+                    <!-- Slider Component -->
+                    <div id="slider-container" class="relative w-full max-w-xs h-14 bg-black border border-[#333] rounded-full overflow-hidden backdrop-blur-sm shadow-[0_0_15px_rgba(0,0,0,0.5)] select-none touch-none">
+                        <div class="absolute -top-8 left-0 right-0 text-center">
+                            <div class="text-[10px] text-[#00ff41] font-mono tracking-widest uppercase animate-pulse">Secure Connection Available</div>
+                        </div>
+                        <!-- Background Fill -->
+                        <div id="slider-fill" class="absolute inset-0 bg-[#00ff41] opacity-10 transition-opacity" style="width: 0%"></div>
+                        <div class="absolute inset-0 opacity-20 bg-[linear-gradient(90deg,transparent_0%,rgba(0,255,65,0.2)_50%,transparent_100%)] bg-[length:200%_100%] animate-[shimmer_2s_infinite] pointer-events-none"></div>
+                        
+                        <!-- Text -->
+                        <div id="slider-text" class="absolute inset-0 flex items-center justify-center pointer-events-none transition-opacity duration-300">
+                            <span class="font-mono text-xs font-bold text-white tracking-[0.2em] uppercase flex items-center gap-2">
+                                Slide to Decode <span class="animate-bounce">→</span>
+                            </span>
+                        </div>
+
+                        <!-- Handle -->
+                        <div id="slider-handle" class="absolute top-1 left-1 bottom-1 w-12 bg-[#0d0d0d] rounded-full border border-[#00ff41] flex items-center justify-center cursor-grab z-20 shadow-[0_0_10px_rgba(0,255,65,0.3)] active:cursor-grabbing hover:scale-105 transition-transform">
+                            <svg id="icon-arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-pulse"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                            <svg id="icon-lock" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#00ff41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+                        </div>
+                    </div>
+                </div>
+                
+                <p class="mt-8 text-[10px] text-[#00ff41]/60 font-mono">
+                    // REQUIRES CAMERA PERMISSION
+                </p>
+            </div>
+        </section>
 
         <!-- MISSING LINK SECTION & CODE BLOCK -->
         <section class="px-6 py-24 relative z-10 bg-black/60 backdrop-blur-md border-y border-[#333]">