Merge pull request #335 from MDMCK10/main

validation fixes
DishpitDev · Jan 4, 2025 · a33eb79 · a33eb79
2 parents b268813 + 5be9b11
commit a33eb79
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -287,13 +287,13 @@
       <div id="chatbot"></div>
 
       <div id="slopTVContainer">
-        <marquee style="background-color:white;color:black;font-family:serif;transform:scaleY(1.5);">
-          <h1>SlopTV ! Watch free tv online below</h1>
-        </marquee>
-        <a href="/tv.html">
-          <iframe src="/tv.html" frameborder="0"></iframe>
-        </a>
-      </div>
+        <div class="marquee">
+          <h1 class="marquee__inner" id="slopTVTitle">SlopTV! Watch free TV online below</h1>
+        </div>
+        <div style="cursor: pointer;" onclick="window.location.href='/tv.html'">
+          <iframe id="slopTVFrame" src="/tv.html" title="SlopTV"></iframe>
+        </div>
+      </div>      
 
       <div id="chatContainer">
         <a href="/chat.html" title="Go to SlopChat">
@@ -362,10 +362,10 @@ <h2 id="security-overlay-title">🔒 Welcome to Slopify 🔒</h2>
 
       <header id="schisse">
         <div id="megaheader">
-          <button style="transform: scale(0.25) !important;"class="creationButton" id="creation">Creation!</button>
+          <button style="transform: scale(0.25) !important;" class="creationButton" id="creation">Creation!</button>
         </div>
         <div class="marquee">
-          <img src="static/images/epic-logo.gif" alt="Slopify animated logo" />
+          <img class="marquee__inner" src="static/images/epic-logo.gif" alt="Slopify animated logo" />
         </div>
         <img src="SlopifyLogo.png" width="400" alt="Slopify logo" />
         <h1>
@@ -1081,7 +1081,7 @@ <h2>
     <script src="static/js/win2k.js"></script>
 
     <!--Mouse Kaboom-->
-    <img src="static/images/kaboom.png" id="mouseKaboomImage" style="display:none"/>
+    <img src="static/images/kaboom.png" id="mouseKaboomImage" style="display:none" alt=""/>
     <script src="static/js/kaboom.js"></script>
 
     <!-- Humans are NOW welcome to this site - Management at The Intergalactic Federation. -->

diff --git a/static/css/style.css b/static/css/style.css
@@ -23,6 +23,7 @@ body {
   color: #ebdbb2;
   display: grid;
   height: 100vh;
+  overflow-x: hidden;
 }
 
 .skipnav {
@@ -693,6 +694,7 @@ body.wokeMode {
 #ytplayer,
 #ytplayer2,
 #counterWidget,
+#slopTVFrame,
 #soundcloudPlayer {
   border: none;
 }
@@ -702,11 +704,57 @@ body.wokeMode {
 }
 
 .marquee {
-  display: flex;
   overflow: hidden;
+  position: relative;
+  padding-left: 100%;
+  animation: reduce 20s linear infinite;
+}
+
+.marquee__inner {
   white-space: nowrap;
-  box-sizing: border-box;
-  animation: marquee 10s linear infinite;
+  display: inline-block;
+  animation: scroll 20s linear infinite;
+}
+
+.marquee::before,
+.marquee::after {
+  z-index: 1;
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 50px;
+  height: 100%;
+  content: "";
+  display: block;
+}
+
+.marquee::after {
+  left: auto;
+  right: 0;
+  transform: rotate(180deg);
+}
+
+@keyframes reduce {
+  to {
+    padding-left: 0;
+  }
+}
+
+@keyframes scroll {
+  to {
+    transform: translateX( -100%);
+  }
+}
+
+#slopTVFrame {
+  pointer-events: none;
+}
+
+#slopTVTitle {
+  background-color: white;
+  color: black;
+  font-family: serif;
+  transform: scaleY(1.5);
 }
 
 #slopTVInnerFrame {
@@ -718,16 +766,6 @@ body.wokeMode {
   transform: scaleY(1.5);
 }
 
-@keyframes marquee {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(-100%);
-  }
-}
-
 
 #slopTVContainer {
   position: absolute;