Add screens and components for Song Battle game, including Home, Lobby, Voting, Results, and Song Submission screens; implement YouTube video embedding and styles

2025-04-24 16:21:43 +02:00
parent 44a75ba715
commit 22eca7d4e0
28 changed files with 5046 additions and 402 deletions
--- a/client/src/common/styles/components/home-screen.sass
+++ b/client/src/common/styles/components/home-screen.sass
@ -0,0 +1,89 @@
+// Home Screen styles
+
+.home-screen
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  min-height: 100%
+  padding: 2rem
+  position: relative
+  
+  .logo
+    display: flex
+    flex-direction: column
+    align-items: center
+    margin-bottom: 2rem
+    
+    .logo-image
+      image-rendering: pixelated
+      width: 120px
+      height: auto
+      margin-bottom: 1rem
+      animation: pulse 2s infinite ease-in-out
+      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7))
+    
+    h1
+      font-size: 3.5rem
+      margin: 0
+      color: white
+      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.3)
+  
+  .card
+    background-color: $card-bg
+    border-radius: 1rem
+    padding: 2rem
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.1)
+    border: 1px solid rgba(255, 255, 255, 0.1)
+    backdrop-filter: blur(10px)
+    width: 100%
+    max-width: 500px
+    
+    .tabs
+      display: flex
+      margin-bottom: 1.5rem
+      border-bottom: 2px solid rgba(255, 255, 255, 0.1)
+      
+      button
+        flex: 1
+        background: none
+        border: none
+        color: $text-muted
+        padding: 1rem
+        font-size: 1rem
+        cursor: pointer
+        transition: color 0.2s, border-bottom 0.2s
+        position: relative
+        
+        &:after
+          content: ''
+          position: absolute
+          bottom: -2px
+          left: 0
+          width: 100%
+          height: 2px
+          background-color: transparent
+          transition: background-color 0.2s
+        
+        &.active
+          color: $primary
+          
+          &:after
+            background-color: $primary
+  
+  .home-footer
+    margin-top: 2rem
+    text-align: center
+    color: $text-muted
+    font-style: italic
+
+@keyframes pulse
+  0%
+    transform: scale(1)
+    opacity: 1
+  50%
+    transform: scale(1.1)
+    opacity: 0.8
+  100%
+    transform: scale(1)
+    opacity: 1