adicionando alarme

index.html

@@ -24,6 +24,7 @@
             </div>
         </div>
     </nav>
+
     <div class="w3-display-bottomleft w3-display-bottomleft w3-block w3-padding w3-margin-bottom" id="msgbox" style="z-index:5;"></div>
 
     <div class="classTab" id="tab-relogio">
@@ -49,7 +50,32 @@
             </div>
         </div>
     </div>
-    <div class="classTab w3-hide" id="tab-alarme">Alarme em breve!</div>
+
+    <div class="classTab w3-hide" id="tab-alarme">
+        <audio src="media/alarm_clock.mp3" loop id="alarm_clock"></audio>
+        <div class="w3-display-middle w3-theme-d1 w3-mobile w3-round-xlarge w3-border" style="overflow: hidden;">
+            <div class="w3-container w3-theme-d3">
+                <div class="w3-center" id="despert">Aguardando ...</div>
+            </div>
+            <main class="w3-container">
+                <div id="exibirEntrada" style="display: none;">
+                    <input class="w3-input" type="time" id="entradaAlarme" onchange="setAlarm();$('#exibirEntrada').hide()">
+                </div>
+                <div class="w3-center">
+                    <span class="w3-xxxlarge" id="mostrarAlarme">6:00</span>
+                </div>
+            </main>
+            <div class="w3-row">
+                <div class="w3-col s6">
+                    <button class="w3-block w3-button w3-hover-theme w3-theme-d5" onclick="$('#exibirEntrada').toggle()">Definir</button>
+                </div>
+                <div class="w3-col s6">
+                    <button class="w3-block w3-button w3-hover-theme w3-theme-d5" id="btnDesativarAlarme">Ativar</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="classTab w3-hide" id="tab-timer">Timer em breve!</div>
     <div class="classTab w3-hide" id="tab-config">Config em breve!</div>
 

js/main.js

@@ -1,5 +1,4 @@
 var openTab = (evt, nameTab) => {
-
     var i;
     var classTab = $('.classTab');
     for (i = 0; i < classTab.length; i++) {
@@ -13,6 +12,61 @@ var openTab = (evt, nameTab) => {
     evt.currentTarget.className += " w3-theme";
 }
 
+
+let alarmTimeout;
+let colors = ['yellow', 'red', 'blue']; // Lista de cores
+let colorIndex = 0;
+let flashingInterval;
+
+function setAlarm() {
+    const alarmTimeInput = $('#entradaAlarme');
+    const alarmTime = alarmTimeInput.val();
+
+    const [hours, minutes] = alarmTime.split(':');
+    const now = new Date();
+    const alarm = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, 0, 0);
+
+    const timeUntilAlarm = alarm - now;
+
+    if (timeUntilAlarm > 0) {
+        $('#mostrarAlarme').html(alarmTime);
+        $('#btnDesativarAlarme').text('Desativar');
+        $('#btnDesativarAlarme').attr('onclick','disableAlarm()');
+        $('#despert').text(`Despertador definido para ${alarmTime}`);
+        toast.exibir('sucesso', 'Sucesso!', `Despertador definido para ${alarmTime}.`);
+        alarmTimeout = setTimeout(() => {
+            $('#alarm_clock').trigger('play');
+            startFlashing(); // Inicia o piscar das cores
+        }, timeUntilAlarm);
+    } else {
+        toast.exibir('erro', 'Erro!', 'Tempo inválido para o despertador.');
+        alert('Tempo inválido para o despertador');
+    }
+}
+
+function startFlashing() {
+    flashingInterval = setInterval(() => {
+        document.getElementById('despert').style.backgroundColor = colors[colorIndex];
+        colorIndex = (colorIndex + 1) % colors.length; // Avança para a próxima cor
+    }, 500); // Alterna a cada 500ms (0.5 segundos)
+}
+
+function disableAlarm() {
+    clearTimeout(alarmTimeout);
+    $('#btnDesativarAlarme').removeAttr('onclick');
+    $('#btnDesativarAlarme').text('Ativar');
+    $('#despert').text(`Desativado..`);
+    $('#alarm_clock').trigger('pause');
+    toast.exibir('', '', 'Despertador desativado.');
+
+    clearTimeout(alarmTimeout);
+    clearInterval(flashingInterval); // Limpa o intervalo de piscar das cores
+    document.getElementById('despert').style.backgroundColor = ''; // Reseta a cor de fundo
+
+    console.log('Despertador desativado');
+}
+
+
 function saudacao() {
     var greeting;
     var time = new Date().getHours();
@@ -93,6 +147,7 @@ $(document).ready(()=>{
         localStorage.setItem('msg','<script>toast.exibir(\'sucesso\', \'Sucesso!\', \'Tema alterado com sucesso.\');</script>')
         window.location.reload();
     });
+
     if (localStorage.getItem('theme') === null) {
         // Verifica se o usuário prefere o tema escuro
         var preferDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;