Glitch Enter ButtonHEADmaster

2 files changed, 99 insertions, 14 deletions

diff --git a/hg.css b/hg.css
index f856199..389b497 100644
--- a/hg.css
+++ b/hg.css
@@ -576,8 +576,8 @@ dialog::backdrop {
 
 .modal-close {
   position: absolute;
-  right: 15px;
-  top: 15px;
+  right: 3px;
+  top: 3px;
   outline: none;
   appearance: none;
   color: #ff2975;
@@ -1519,3 +1519,99 @@ canvas {
     transform: translateZ(8px) rotateY(360deg);
   }
 }
+
+.enter-button {
+  display: block;
+  margin: 20px auto 0;
+  padding: 12px 30px;
+  background: linear-gradient(145deg, #ff2975, #e6005f);
+  border: 2px solid #ff2975;
+  border-radius: 6px;
+  color: #ffffff;
+  font-family: 'VCR', 'Consolas', 'Courier New', monospace;
+  font-size: 16px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  cursor: pointer;
+  outline: none;
+  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+  box-shadow: 
+    0 0 20px rgba(255, 41, 117, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
+    0 4px 15px rgba(0, 0, 0, 0.4);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transform: perspective(1000px) rotateX(2deg);
+  animation: enterButtonPulse 2s ease-in-out infinite alternate;
+}
+
+@keyframes enterButtonPulse {
+  0% {
+    box-shadow: 
+      0 0 20px rgba(255, 41, 117, 0.6),
+      inset 0 1px 0 rgba(255, 255, 255, 0.2),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
+      0 4px 15px rgba(0, 0, 0, 0.4);
+  }
+  100% {
+    box-shadow: 
+      0 0 30px rgba(255, 41, 117, 0.8),
+      inset 0 1px 0 rgba(255, 255, 255, 0.3),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.3),
+      0 6px 20px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.enter-button:hover {
+  background: linear-gradient(145deg, #00ffff, #00cccc);
+  border-color: #00ffff;
+  color: #000000;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
+  transform: perspective(1000px) rotateX(2deg) scale(1.05);
+  box-shadow: 
+    0 0 40px rgba(0, 255, 255, 0.8),
+    inset 0 1px 0 rgba(255, 255, 255, 0.4),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
+    0 8px 25px rgba(0, 0, 0, 0.6);
+  animation: enterButtonGlitch 0.6s ease-in-out;
+}
+
+@keyframes enterButtonGlitch {
+  0%, 100% {
+    transform: perspective(1000px) rotateX(2deg) scale(1.05);
+  }
+  20% {
+    transform: perspective(1000px) rotateX(2deg) scale(1.05) translateX(-3px);
+    box-shadow: 
+      -3px 0 #ff2975,
+      3px 0 #00ffff,
+      0 0 40px rgba(0, 255, 255, 0.8),
+      0 8px 25px rgba(0, 0, 0, 0.6);
+  }
+  40% {
+    transform: perspective(1000px) rotateX(2deg) scale(1.05) translateX(2px);
+    box-shadow: 
+      2px 0 #ff2975,
+      -2px 0 #00ffff,
+      0 0 40px rgba(255, 41, 117, 0.8),
+      0 8px 25px rgba(0, 0, 0, 0.6);
+  }
+  60% {
+    transform: perspective(1000px) rotateX(2deg) scale(1.05) translateX(-1px);
+    box-shadow: 
+      -1px 0 #00ffff,
+      1px 0 #ff2975,
+      0 0 40px rgba(0, 255, 255, 0.8),
+      0 8px 25px rgba(0, 0, 0, 0.6);
+  }
+}
+
+.enter-button:active {
+  transform: perspective(1000px) rotateX(2deg) scale(0.98);
+  box-shadow: 
+    0 0 15px rgba(255, 41, 117, 0.4),
+    inset 0 1px 0 rgba(0, 0, 0, 0.1),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
+    0 2px 8px rgba(0, 0, 0, 0.3);
+}
diff --git a/index.html b/index.html
index 4d67354..611ebce 100644
--- a/index.html
+++ b/index.html
@@ -31,20 +31,9 @@
               <span class="control-item">T<small>Terminal</small></span>
             </div>
           </div>
-
-          <div class="controls-section">
-            <h4 class="section-title">TOUCH</h4>
-            <div class="touch-grid">
-              <span class="control-item">TAP<small>Play</small></span>
-              <span class="control-item">SWIPE<small>Volume</small></span>
-              <span class="control-item">🔃<small>Next</small></span>
-            </div>
-          </div>
         </div>
 
-        <div class="features-compact">
-          <p>• Download history • Terminal controls • Fullscreen mode</p>
-        </div>
+        <button class="enter-button modal-exit" id="enterButton">ENTER</button>
 
         <div class="credit-compact">
           <small>Music from RETROWAVE.RU</small>