refactor: Actualización

css/mobile.css

@@ -228,10 +228,14 @@ header .content-header2 {
   width: 80%;
   height: auto;
   text-align: center;
-  background: transparent;
+  background: #FF213C;
   margin: 0 auto;
   font-family: 'Plus Jakarta Sans', sans-serif;
-  font-size: 1rem;
+  font-size: 1.4rem;
+  padding: 1.5rem;
+  border-radius: 2.5rem;
+  color: #ffffff;
+  font-weight: bold;
 }
 
 /* FINAL CONTAINER QUOTE*/
@@ -246,7 +250,7 @@ header .content-header2 {
   place-items: center;
   background: #d9d9d9;
   position: fixed;
-  top: 19.3rem;
+  top: 2.3rem;
   right: 0;
   border: none;
   border-radius: 5rem 0 0 5rem;
@@ -456,3 +460,68 @@ header .content-header2 {
 
 /*FIN LISTA DE TAREAS*/
 /*FIN TO DO*/
+
+/* Frases */
+.maquina-escribir {
+  display: grid;
+  overflow: hidden;
+  text-align: center;
+  margin: 0 auto;
+  place-items: center;
+  animation: escribir 3s steps(30) forwards;
+  min-height: 1rem;
+  height: auto;
+}
+#mensaje {
+  width: 70%;
+  min-height: 1rem;
+  height: auto;
+  font-size: 1.6rem;
+}
+
+@keyframes escribir {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+/* Media Query's*/
+
+@media (min-width: 800px) {
+  .container-main {
+    display:grid;
+    grid-template-rows: repeat(3, auto);
+    grid-template-columns: repeat(2,1fr);
+  }
+  header{
+    grid-column-start: 1;
+    grid-column-end: 2;
+
+  }
+  .container-quote {
+    grid-row: 3;
+  }
+  .separador {
+    grid-column: 1;
+  }
+  .container {
+    grid-column: 2;
+    grid-row-start: 2;
+  }
+  .maquina-escribir {
+    grid-column: 1;
+    grid-row: 2;
+  }
+}
+@media (min-width: 300px) and (max-width: 799px) {
+  .maquina-escribir {
+    display:inline-table;
+  }
+  #mensaje {
+    display: inline-block;
+    margin: 5rem auto;
+  }
+}

index.html

@@ -75,8 +75,9 @@ <h1 id="ingreso">FOCUS by Yofre</h1>
             </section>
         </header>
 
+        <div class="maquina-escribir"><p id="mensaje"></p></div>
         <section class="container-quote"> 
-            <p title="Napoleon Hill - La llave maestra de la riqueza" id="note">" Haz clic aquí para comenzar a escribir y guardar tus pensamientos e ideas "</p>
+            <p title="" id="note">Haz clic aquí para comenzar a escribir y guardar tus ideas</p>
         </section>
         <section class="bar-lateral">
             <div class="container-main-imgs">
@@ -85,9 +86,6 @@ <h1 id="ingreso">FOCUS by Yofre</h1>
                 </div>
             </div>
         </section>
-
-        <div class="separador">
-
         </div>
 
         <section class="container">
@@ -129,5 +127,6 @@ <h2 id="title-todo">ToDo</h2>
     <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="js/todo.js"></script>
     <script src="js/localStorage.js"></script>
+    <script src="js/frases.js"></script>
 </body>
 </html>

js/frases.js

@@ -0,0 +1,29 @@
+/*const mensaje = document.getElementById('mensaje');
+
+const frases = [
+    "Mensaje 1",
+    "Mensaje 2",
+    "Mensaje 3",
+    // Agrega más mensajes aquí
+  ];
+
+  function obtenerFraseAleatoria() {
+    const indice = Math.floor(Math.random() * frases.length);
+    return frases[indice];
+  }
+
+  function mostrarFraseAleatoria() {
+    const mensajeDiv = document.getElementById("mensaje");
+    mensajeDiv.textContent = "";
+
+    const frase = obtenerFraseAleatoria();
+
+    for (let i = 0; i < frase.length; i++) {
+      setTimeout(() => {
+        mensajeDiv.textContent += frase[i];
+      }, i * 100); // Controla la velocidad de escritura
+    }
+  }
+
+  // Mostrar una frase al cargar la página
+  mostrarFraseAleatoria();*/

js/script.js

@@ -34,9 +34,31 @@ window.addEventListener("load", function(event) {
     loader.style.display = 'none';
     containerLoad.style.display = 'none';
     containerMain.style.overflow = 'visible';
-});
+    const mensaje = document.getElementById('mensaje');
 
+    const frases = [
+        "La imaginación es más importante que el conocimiento. El conocimiento se limita a todo lo que ahora sabemos y comprendemos, mientras que la imaginación abarca el mundo entero y todo lo que alguna vez sabremos y comprenderemos. - Albert Einstein",
+        // Agrega más mensajes aquí
+    ];
 
-// Cronometro para modo Gym, suena en 1 minuto como maximo de un ejercicio
-    // El funcionamiento es sencillo, se temporiza por segundos. El segundo deseaso a ser el que active la campana del tiempo estimado tanto en modo gym como en modo estudio, debe ser restado en 6 para que concuerde con el setTimeout.
-
+    function obtenerFraseAleatoria() {
+        const indice = Math.floor(Math.random() * frases.length);
+        return frases[indice];
+    }
+
+    function mostrarFraseAleatoria() {
+        const mensajeDiv = document.getElementById("mensaje");
+        mensajeDiv.textContent = "";
+
+        const frase = obtenerFraseAleatoria();
+
+        for (let i = 0; i < frase.length; i++) {
+        setTimeout(() => {
+            mensajeDiv.textContent += frase[i];
+        }, i * 70); // Controla la velocidad de escritura
+        }
+    }
+
+  // Mostrar una frase al cargar la página
+    mostrarFraseAleatoria();
+    });