Merge pull request #13 from OZimbres/TBranch

Lampada
OZimbres · Sep 5, 2023 · bd6a5e2 · bd6a5e2
2 parents d1f2cdc + 1809dda
commit bd6a5e2
Show file tree

Hide file tree

Showing 17 changed files with 176 additions and 2 deletions.
diff --git a/assets/imagens/lampada/Captura de tela 2023-09-01 134059.png b/assets/imagens/lampada/Captura de tela 2023-09-01 134059.png
diff --git a/assets/imagens/lampada/Captura de tela 2023-09-01 140842.png b/assets/imagens/lampada/Captura de tela 2023-09-01 140842.png
diff --git a/assets/imagens/lampada/Captura de tela 2023-09-01 141157.png b/assets/imagens/lampada/Captura de tela 2023-09-01 141157.png
diff --git a/assets/imagens/lampada/Captura de tela 2023-09-01 144520.png b/assets/imagens/lampada/Captura de tela 2023-09-01 144520.png
diff --git a/assets/imagens/lampada/LuzAcesa.png b/assets/imagens/lampada/LuzAcesa.png
diff --git a/assets/imagens/lampada/LuzApagada.png b/assets/imagens/lampada/LuzApagada.png
diff --git a/assets/imagens/lampada/TrocarLamp.png b/assets/imagens/lampada/TrocarLamp.png
diff --git a/assets/imagens/lampada/fundo2.png b/assets/imagens/lampada/fundo2.png
diff --git a/assets/imagens/lampada/interruptorDesligado.png b/assets/imagens/lampada/interruptorDesligado.png
diff --git a/assets/imagens/lampada/interruptorLigado.png b/assets/imagens/lampada/interruptorLigado.png
diff --git a/assets/imagens/lampada/luzQuebrada.png b/assets/imagens/lampada/luzQuebrada.png
diff --git a/assets/imagens/lampada/nn1.png b/assets/imagens/lampada/nn1.png
diff --git a/assets/imagens/lampada/nn2.png b/assets/imagens/lampada/nn2.png
diff --git a/css/lampada.css b/css/lampada.css
@@ -0,0 +1,71 @@
+/* Lâmpada */
+body{
+    background-color: var(--preto);
+}
+
+/*---=MAIN=---*/
+main{
+    height: 90%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+article{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.luz-container{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.interruptor-container{
+    height: 10%;
+    width: 10%;
+    aspect-ratio: 1/1;
+    position: absolute;
+    right: 5%;
+}
+.interruptor-img-container{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#interruptor{
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+}
+
+.trocarlamp-container{
+    height: 10%;
+    width: 10%;
+    aspect-ratio: 1/1;
+    position: absolute;
+    right: 5%;
+    top: 30%;
+}
+.trocarlamp-img-container{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#trocarlamp{
+    height: 50%;
+    object-fit: cover;
+    cursor: pointer;
+}
diff --git a/html/lampada.html b/html/lampada.html
@@ -1,11 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="/css/universal.css">
+    <link rel="stylesheet" href="/css/lampada.css">
 </head>
-<body>
+
+<body> 
 
+    <header>
+        <nav>
+            <a href="/index.html" target="_self">HOME</a>
+        </nav>
+    </header>
+
+    <main>
+        <article>
+            <section class="luz-container">
+                <figure class="luz-img-container">
+                    <img id="luz" src="/assets/imagens/lampada/LuzApagada.png" alt="">
+                </figure>
+            </section>
+
+            <section class="interruptor-container">
+                <figure class="interruptor-img-container">
+                    <img id="interruptor" src="/assets/imagens/lampada/interruptorDesligado.png" alt="">
+                </figure>
+            </section>
+            <section class="trocarlamp-container">
+                <figure class="trocarlamp-img-container">
+                    <img id="trocarlamp" src="/assets/imagens/lampada/TrocarLamp.png" alt="">
+                </figure>
+            </section>
+        </article>
+
+    </main>
+
+    <footer>
+        <div class="repositorio">
+            <a href="https://github.com/OZimbres/VTL-SA2" target="_blank">Repositório</a>
+        </div>
+
+        <ul class="devs">
+            <li>
+                <a href="https://github.com/LoriaLawrenceZ" target="_blank">LoriaLawrenceZ</a>
+            </li>
+
+            <li> | </li>
+
+            <li>
+                <a href="https://github.com/ThmZ1101" target="_blank">ThmZ</a>
+            </li>
+
+            <li> | </li>
+
+            <li>
+                <a href="https://github.com/epicestudar" target="_blank">epicestudar</a>
+            </li>
+        </ul>
+    </footer>
+
+
 </body>
+
+<script src="/js/lampada.js"></script>
+
 </html>
diff --git a/js/index.js b/js/index.js
@@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", () =>{
 
             // Levar o usuário à respectiva página clicada
             if(pagina == "lampada"){
-                window.location.reload();
+                window.location.href = "./html/lampada.html";
             }
             else if(pagina == "cronometro"){ 
                 window.location.href = "./html/cronometro.html";

diff --git a/js/lampada.js b/js/lampada.js
@@ -0,0 +1,43 @@
+/*-----===VARIÁVEIS==-----*/
+const interruptor = document.getElementById("interruptor");
+var luzLigada = "/assets/imagens/lampada/LuzApagada.png";
+var luzDesligada = "/assets/imagens/lampada/LuzAcesa.png";
+var luzQuebrada = "/assets/imagens/lampada/luzQuebrada.png";
+var interruptorDesligado = "/assets/imagens/lampada/interruptorDesligado.png"
+var interruptorLigado = "/assets/imagens/lampada/interruptorLigado.png"
+let contador = 0;
+const trocarlamp = document.getElementById("trocarlamp");
+/*---=EventListener=---*/
+interruptor.addEventListener("click", () => {
+    if (contador < 10) {
+        trocar();
+        contador++;
+    }
+    else {
+        var luzAtual = document.getElementById("luz");
+        luzAtual.setAttribute("src", luzQuebrada);
+    }
+});
+
+trocarlamp.addEventListener("click", () => {
+    contador = 0;
+    let LuzAtual = "/assets/imagens/lampada/LuzApagada.png";
+    var luzAtual = document.getElementById("luz");
+    luzAtual.setAttribute("src", LuzAtual);
+});
+/*---=FUNÇÕES=---*/
+function trocar() {
+    var luzAtual = document.getElementById("luz");
+    var srcLuzAtual = luzAtual.getAttribute("src");
+
+    var interruptorAtual = document.getElementById("interruptor");
+
+    if (srcLuzAtual == "/assets/imagens/lampada/LuzApagada.png") {
+        luzAtual.setAttribute("src", luzDesligada);
+        interruptorAtual.setAttribute("src", interruptorLigado);
+    } else {
+        luzAtual.setAttribute("src", luzLigada);
+        interruptorAtual.setAttribute("src", interruptorDesligado);
+    }
+}
+