feat(styles): UI

sebastianjnuwu · Dec 30, 2024 · 3b4f515 · 3b4f515
1 parent 8427289
commit 3b4f515
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 6 deletions.
diff --git a/www/index.html b/www/index.html
@@ -11,7 +11,7 @@
 </head>
 
 <body class="ui-cookie">
-
+  <!---
   <audio id="splash" preload="auto" loop>
     <source src="./src/audio/start.mp3" type="audio/mp3">
   </audio>
@@ -48,9 +48,18 @@ <h1 class="title">
 </div>
 
  </start-screen>
+  style="display: none !important;"
+ -->
 
 
-<ui style="display: none !important;" class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
+<ui class="d-flex flex-column justify-content-center align-items-center text-center vh-100">
+
+<div class="room-code position-fixed top-0 start-50 translate-middle-x mt-4">
+    <h3><i class="fas fa-key"></i> Código da Sala:</h3>
+    <p>ABCD1234</p>
+</div>
+
+
 
   <div class="text-center">
   <table class="statistic">
@@ -68,10 +77,10 @@ <h1 class="title">
 </div>
 
   <cookie class="cookie position-relative">
-    <img src="https://raw.githubusercontent.com/sebastianjnuwu/sebastianjnuwu/refs/heads/main/website/7_Sem_Titulo_20241227172134.png" 
-         alt="cookie" 
-         class="icon mb-4">
-         </cookie>
+    <img src="https://raw.githubusercontent.com/sebastianjnuwu/sebastianjnuwu/refs/heads/main/website/7_Sem_Titulo_20241227172134.png" alt="cookie" class="icon mb-4">
+  </cookie>
+
+
 </ui>
 
   <script type="module" src="./src/js/main.js" defer></script>

diff --git a/www/src/js/main.js b/www/src/js/main.js
@@ -14,4 +14,5 @@ $(() => {
     $("start-screen").remove();
     $("ui").show();
   });
+
 });
diff --git a/www/src/styles/css/ui.css b/www/src/styles/css/ui.css
@@ -168,3 +168,108 @@ ui .statistic td .value {
   display: block;
   margin-top: 5px;
 }
+
+.room-code {
+    text-align: center;
+    background-color: #f4a460;
+    padding: 5px;
+    border: 1px solid #d2691e;
+    box-shadow: 1px 1px var(--text-color-dark);
+    border-radius: 16px;
+    width: 10rem;
+    margin: 0.5rem;
+    font-weight: bold;
+    opacity: 0; 
+    animation: slideIn 2s forwards;
+}
+.room-code h3 {
+    margin: 0;
+    padding: 0;
+    font-family: "minecraftia", cursive;
+    font-weight: bold;
+    font-size: 0.6rem;
+    color: #4b2e16;
+}
+.room-code p {
+    font-family: "minecraftia", cursive;
+    font-size: 1rem;
+    margin: 0;
+    background-color: #f4a460;
+    color: #4b2e16;
+    border-radius: 5px;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+
+@keyframes slideIn {
+    0% {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0); 
+        opacity: 1;
+    }
+}
+
+/*
+#ranking {
+    width: 100%;
+    max-width: 400px;
+    background-color: #ffdd99; 
+    border: 2px solid #d2691e;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px auto;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
+    text-align: center;
+}
+
+#ranking h2 {
+    font-size: 1.8rem;
+    color: #4b2e16; 
+    text-transform: uppercase;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+    margin-bottom: 15px;
+}
+
+#ranking-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#ranking-list li {
+    background-color: #f4a460; 
+    color: #4b2e16;
+    border: 2px solid #d2691e;
+    border-radius: 5px;
+    margin: 10px 0;
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1.2rem;
+    font-weight: bold;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease;
+}
+
+#ranking-list li span:first-child:before {
+    content: "🍪 "; /
+}
+
+#ranking-list li.new {
+    background-color: #ffdd99;
+    animation: pop 0.5s ease-out;
+}
+
+@keyframes pop {
+    0% {
+        transform: scale(1.2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+*/
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,5 @@ $(() => { @@
         $("start-screen").remove();
         $("ui").show();
       });
     });