Merge pull request #23 from cometsinthesky/Add-music-background-and-i…

…cons Add music background and icons
cometsinthesky · Apr 30, 2024 · 1cf8c88 · 1cf8c88
2 parents cd14383 + 29f78fb
commit 1cf8c88
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -7,15 +7,20 @@
     <title>Pulsar 3D</title>
     <link rel="stylesheet" href="./src/style.css" />
 
-    <style>
-        .hidden {
-            display: none;
-        }
-    </style>
 </head>
 
 <body style="position: relative;">
 
+    <!-- Audio container -->
+    <div id="audio-container">
+        <audio id="music" autoplay loop>
+            <source src="https://github.com/cometsinthesky/pulsar-3D/raw/main/music/Musictown-cinematic-atmosphere.mp3"
+                type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <button id="audio-button"></button>
+    </div>
+
     <div style="width: 100%; text-align: left; padding-left: 40px;">
         <p id="instructionText">
             1 - Botão esquerdo do mouse: clique e arraste o pulsar para controlar a câmera.<br>
@@ -88,29 +93,43 @@ <h1 style="font-size: 36px;"></h1>
         <!-- Adiciona imagens -->
         <img src="./images/pulsar.jpg" alt="Características de um Pulsar" style="width: 600px; margin-top: 20px;">
         <br>
-        <img src="./images/jocelyn.jpg" alt="Jocelyn Bell e a descoberta dos Pulsares" style="width: 700px; margin-top: 40px;">
+        <img src="./images/jocelyn.jpg" alt="Jocelyn Bell e a descoberta dos Pulsares"
+            style="width: 700px; margin-top: 40px;">
         <br>
         <img src="./images/evolution.jpg" alt="Ciclo de vida estelar" style="width: 900px; margin-top: 40px;">
     </div>
 
     <div style="text-align: center; margin-top: 20px;" class="hidden">
         <footer style="font-size: 14px;">
-            <p>Criado por: <a href="https://github.com/cometsinthesky" target="_blank" style="color: #f0f0f0; font-size: 13px;">Lucas Ferreira</a> (MNPEF/UnB) |
-                <a href="https://github.com/cometsinthesky/pulsar-3D" target="_blank" style="color: #f0f0f0;">Link do repositório GitHub</a>
+            <p>Criado por: <a href="https://github.com/cometsinthesky" target="_blank"
+                    style="color: #f0f0f0; font-size: 13px;">Lucas Ferreira</a> (MNPEF/UnB) |
+                <a href="https://github.com/cometsinthesky/pulsar-3D" target="_blank" style="color: #f0f0f0;">Link do
+                    repositório GitHub</a>
             </p>
         </footer>
 
         <!-- Créditos e Creative Commons -->
         <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/" style="font-size: 12px;">
-            <a property="dct:title" rel="cc:attributionURL" href="https://github.com/cometsinthesky/pulsar-3D" target="_blank" style="color: #f0f0f0;">Simulação Pulsar 3D</a> by
-            <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://github.com/cometsinthesky" target="_blank" style="color: #f0f0f0;">Lucas Ferreira</a>
+            <a property="dct:title" rel="cc:attributionURL" href="https://github.com/cometsinthesky/pulsar-3D"
+                target="_blank" style="color: #f0f0f0;">Simulação Pulsar 3D</a> by
+            <a rel="cc:attributionURL dct:creator" property="cc:attributionName"
+                href="https://github.com/cometsinthesky" target="_blank" style="color: #f0f0f0;">Lucas Ferreira</a>
             is licensed under
-            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" style="color: #f0f0f0;" target="_blank" rel="license noopener noreferrer">
-                CC BY-NC-SA 4.0 <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt="">
+            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" style="color: #f0f0f0;"
+                target="_blank" rel="license noopener noreferrer">
+                CC BY-NC-SA 4.0 <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+                    src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img
+                    style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+                    src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img
+                    style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+                    src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img
+                    style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
+                    src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt="">
             </a>
         </p>
     </div>
 
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
 
@@ -127,11 +146,6 @@ <h1 style="font-size: 36px;"></h1>
         });
     </script>
 
-<audio autoplay loop>
-    <source src="music/Musictown-cinematic-atmosphere.mp3" type="audio/mpeg">
-    Your browser does not support the audio element.
-  </audio>
-
 </body>
 
-</html>
+</html>
diff --git a/src/functions.js b/src/functions.js
@@ -1,4 +1,32 @@
 
+document.addEventListener('DOMContentLoaded', function () {
+    // Obtém referências para o elemento de áudio e o botão de controle
+    var audio = document.getElementById('music');
+    var button = document.getElementById('audio-button');
+
+    // Configurações iniciais do áudio
+    audio.autoplay = true; // Ativa a reprodução automática
+    audio.volume = 1; // Define o volume inicial como 50%
+
+    // Função para alternar entre reproduzir e pausar o áudio
+    function toggleAudio() {
+        if (audio.paused) {
+            audio.play();
+            button.innerHTML = "&#x1F50A;"; // Altera o ícone para o ícone de alto-falante
+        } else {
+            audio.pause();
+            button.innerHTML = "&#x1F507;"; // Altera o ícone para o ícone de mudo
+        }
+    }
+
+    // Inicializa o áudio tocando e define o ícone do botão
+    toggleAudio();
+
+    // Adiciona um ouvinte de evento de clique para o botão de controle do áudio
+    button.addEventListener('click', toggleAudio);
+});
+
+
 // Função para efeito de máquina de escrever
 function typewriterEffect(element, text, speed, callback) {
     let index = 0;
@@ -17,6 +45,7 @@ function typewriterEffect(element, text, speed, callback) {
     }, speed);
 }
 
+
 // Seleciona os elementos de título e parágrafo
 const titleElement = document.querySelector('h1');
 const paragraphElement = document.querySelector('.landing-content .landing-paragraph');
@@ -26,8 +55,8 @@ const titleText = "Bem-vind@ à Simulação Pulsar 3D";
 const paragraphText = "Explore o fascinante mundo dos pulsares em uma experiência tridimensional!"; // Certifique-se de que o texto esteja correto
 
 // Velocidades de digitação em milissegundos para o título e parágrafo
-const titleTypingSpeed = 100;
-const paragraphTypingSpeed = 50;
+const titleTypingSpeed = 120;
+const paragraphTypingSpeed = 60;
 
 // Aplica o efeito de máquina de escrever ao título
 typewriterEffect(titleElement, titleText, titleTypingSpeed, () => {
@@ -60,6 +89,14 @@ function redirectToSimulation() {
     history.replaceState({}, '', 'index.html');
 }
 
+// Show hidden elements when enter button clicked
+document.querySelector('.enter-button').addEventListener('click', function () {
+    const backgroundElements = document.querySelectorAll('.hidden');
+    backgroundElements.forEach(element => {
+        element.classList.remove('hidden');
+    });
+});
+
 // Adiciona um ouvinte de evento de transição ao elemento .overlay
 const overlay = document.querySelector('.overlay');
 overlay.addEventListener('transitionend', function (event) {
@@ -72,6 +109,8 @@ overlay.addEventListener('transitionend', function (event) {
     }
 });
 
+
+
 // Configuração básica
 const scene = new THREE.Scene();
 //                                     FV, Aspect Ratio, Near plane, Far plane 

diff --git a/src/style.css b/src/style.css
@@ -9,6 +9,23 @@ body {
   background: linear-gradient(to bottom, #000000, #1A1A1A);
 }
 
+#audio-container {
+  position: fixed;
+  top: 15px;
+  right: 15px;
+  z-index: 9999;
+}
+
+#audio-button {
+  font-size: 20px;
+  width: 30px;
+  height: 30px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+
 /* New Title Hover */
 .text {
   font-family: "Roboto";
@@ -175,19 +192,25 @@ footer {
   border-radius: 5px;
   cursor: pointer;
   font-size: 18px;
-  transition: background-color 1s ease; /* Mantém a transição da cor de fundo */
+  transition: background-color 1s ease;
+  /* Mantém a transição da cor de fundo */
   margin-top: 10px;
-  display: inline-block; /* Garante que o botão seja exibido como um bloco */
+  display: inline-block;
+  /* Garante que o botão seja exibido como um bloco */
 }
 
 .enter-button:hover {
   background-color: #4CAF50;
-  transform: scale(1.03); /* Aplica uma escala ao botão ao passar o mouse */
-  transition: transform 0.5s ease; /* Adiciona uma transição gradual de 0.5 segundo */
+  transform: scale(1.03);
+  /* Aplica uma escala ao botão ao passar o mouse */
+  transition: transform 0.5s ease;
+  /* Adiciona uma transição gradual de 0.5 segundo */
 }
 
-.enter-button:hover, .enter-button {
-  transition: background-color 1s ease, transform 0.5s ease; /* Adiciona uma transição gradual de 0.5 segundo ao retirar o mouse */
+.enter-button:hover,
+.enter-button {
+  transition: background-color 1s ease, transform 0.5s ease;
+  /* Adiciona uma transição gradual de 0.5 segundo ao retirar o mouse */
 }
 
 .fade-out {
@@ -197,4 +220,9 @@ footer {
 
 .hidden {
   display: none;
+}
+
+#threejs-container {
+  cursor: pointer;
+  /* Muda o cursor para uma mão quando o mouse estiver sobre o elemento com o ID 'threejs-container' */
 }