integração jscript

Author: keziapisetta

asset/javascript/ThemeController.js

@@ -0,0 +1,49 @@
+function ThemeController(reference) {
+    const body = reference;
+
+    const themeMenuButton = body.querySelector('.js-theme-menu-button');
+    const themeDropdown = body.querySelector('.js-theme-dropdown');
+
+    const defaultThemeButton = body.querySelector('.js-default-theme-button');
+    const versusThemeButton = body.querySelector('.js-versus-theme-button');
+
+    function init() {
+        bindButtons();
+    }
+
+    function bindButtons() {
+        themeMenuButton.addEventListener('click', toggleThemeMenu);
+        defaultThemeButton.addEventListener('click', setDefaultTheme);
+        versusThemeButton.addEventListener('click', setVersusTheme);
+    }
+
+    function toggleThemeMenu() {
+        themeDropdown.classList.toggle('hide');
+    }
+
+    function setDefaultTheme() {
+    body.classList.remove('versus-theme');
+    body.classList.remove('inverted');
+    closeThemeMenu();
+    }
+
+    function setVersusTheme() {
+    body.classList.add('versus-theme');
+    body.classList.remove('inverted');
+    closeThemeMenu();
+    }
+
+    function closeThemeMenu() {
+        themeDropdown.classList.add('hide');
+    }
+
+    init();
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    const reference = document.querySelector('.js-body');
+    const themeController = new ThemeController(reference);
+    window.themeController = themeController;
+});
+
+export default ThemeController;

asset/style/timer.css

@@ -8,16 +8,17 @@
     --button-background-color: #242424;
     --button-icon-filter: inherit;
     --button-border: 1px solid #fff;
+    --primary-dark-color: #1ea97a;
 }
 
 .versus-theme {
     --primary-bg-color: #ED5026;
     --primary-text-color: #FFFFFF;
     --secondary-bg-color: #000000;
     --secondary-text-color: #444444;
-    --button-background-color: #FFFFFF;
-    --button-icon-filter: brightness(0);
-    --button-border: none;
+    --button-background-color: transparent;
+    --button-icon-filter: brightness(100);
+    --button-border: 1px solid #fff;
 }
 
 
@@ -156,7 +157,7 @@ html {
 
         img {
             max-width: 20px;
-            max-height: 1020px;
+            max-height: 20px;
             display: block;
 
             filter: var(--button-icon-filter);
@@ -190,3 +191,100 @@ html {
     width: 380px;
     margin-bottom: 20px;
 }
+
+.theme-menu-container {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    z-index: 10;
+}
+
+.theme-menu-button {
+    width: 48px;
+    height: 48px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 99px;
+    border: var(--button-border);
+
+    cursor: pointer;
+
+    font-size: 28px;
+    line-height: 1;
+
+    background: transparent;
+    color: var(--primary-text-color);
+
+    transition: all 0.3s ease;
+
+    &:hover {
+        transform: scale(1.05);
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    &:focus,
+    &:focus-visible {
+        outline: none;
+    }
+}
+
+.theme-dropdown {
+    position: absolute;
+    bottom: 60px;
+    right: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    padding: 12px;
+
+    background: rgba(255,255,255,0.08);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+
+    min-width: 180px;
+
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+
+    button {
+        border: none;
+        background: transparent;
+
+        padding: 12px;
+        border-radius: 8px;
+
+        cursor: pointer;
+
+        color: white;
+        font-size: 14px;
+        text-align: left;
+
+        transition: all 0.3s ease;
+
+        &:hover {
+            background: rgba(255,255,255,0.1);
+        }
+    }
+}
+
+.versus-theme .countdown-container .action-button-container button {
+    background: #ED5026;
+    border: 1px solid #ffff;
+}
+
+.versus-theme .countdown-container .action-button-container button img {
+    filter: brightness(100);
+}
+.versus-theme.inverted .theme-menu-button {
+    color: #ED5026;
+    border: 1px solid #ED5026;
+}
+
+body.inverted .theme-menu-button {
+    color: #242424;
+    border: 1px solid #242424;
+}

asset/style/timer.css.map

@@ -23,6 +23,22 @@
         <input type="number" min="00" disabled class="js-seconds-input" />
     </div>
 
+    <div class="theme-menu-container">
+        <button class="theme-menu-button js-theme-menu-button">
+        ⋮
+        </button>
+
+        <div class="theme-dropdown js-theme-dropdown hide">
+            <button class="js-default-theme-button">
+                Standard Theme
+            </button>
+
+            <button class="js-versus-theme-button">
+                Versus Theme
+            </button>
+        </div>
+    </div>
+
     <div class="action-button-container js-stopwatch-action-buttons">
         <button class="js-enter-fullscreen-button">
             <img src="./asset/images/full-screen.svg" alt="Colocar em tela cheia" />
@@ -62,6 +78,7 @@
         </div>
     </div>
     <script type="module" src="./asset/javascript/TimeController.js"></script>
+    <script type="module" src="./asset/javascript/ThemeController.js"></script>
 </body>
 
 </html>