No commit message

Maurux01 · Jan 8, 2025 · 524fa2b · 524fa2b
1 parent 4609639
commit 524fa2b
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,22 @@
-# discordtheme
+
+# Youtubemusic(discord theme)
+
+A discord theme inspared in the color palet of the app Youtubemusic
+
+
+
+
+## Authors
+
+- [@maurux01](https://www.github.com/maurux01)
+
+
+## Feedback
+
+If you have any feedback, please reach out to us at [email protected]
+
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
+
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Discord Theme - YouTube Music</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="sidebar">
+    <h1>Discord</h1>
+    <ul>
+      <li class="active">Inicio</li>
+      <li>Amigos</li>
+      <li>Explorar</li>
+    </ul>
+  </div>
+
+  <div class="main">
+    <header>
+      <h2>Servidor</h2>
+      <button class="settings-button">Configuración</button>
+    </header>
+
+    <div class="chat">
+      <div class="message">
+        <span class="username">Usuario1:</span> Hola, ¿cómo estás?
+      </div>
+      <div class="message">
+        <span class="username">Usuario2:</span> ¡Todo bien! 😊
+      </div>
+    </div>
+
+    <footer>
+      <input type="text" placeholder="Escribe un mensaje..." />
+      <button class="send-button">Enviar</button>
+    </footer>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/scripy.js b/scripy.js
@@ -0,0 +1,14 @@
+document.querySelector('.send-button').addEventListener('click', () => {
+    const input = document.querySelector('footer input');
+    const chat = document.querySelector('.chat');
+
+    if (input.value.trim() !== '') {
+      const message = document.createElement('div');
+      message.classList.add('message');
+      message.innerHTML = `<span class="username">Tú:</span> ${input.value}`;
+      chat.appendChild(message);
+      input.value = '';
+      chat.scrollTop = chat.scrollHeight; // Desplazar hacia abajo
+    }
+  });
+
diff --git a/style.css b/style.css
@@ -0,0 +1,121 @@
+/* Estilo general */
+body {
+    margin: 0;
+    font-family: 'Arial', sans-serif;
+    background-color: #0f0f0f; /* Fondo negro YouTube Music */
+    color: #ffffff; /* Texto blanco */
+    display: flex;
+    height: 100vh;
+  }
+
+  /* Barra lateral */
+  .sidebar {
+    width: 20%;
+    background-color: #181818; /* Gris oscuro */
+    padding: 20px;
+  }
+
+  .sidebar h1 {
+    color: #ff0000; /* Rojo YouTube Music */
+    margin-bottom: 20px;
+  }
+
+  .sidebar ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  .sidebar li {
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #202020; /* Gris más claro */
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .sidebar li:hover {
+    background-color: #ff4d4d; /* Rojo suave */
+  }
+
+  .sidebar .active {
+    background-color: #ff0000; /* Rojo YouTube Music */
+  }
+
+  /* Contenedor principal */
+  .main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  header {
+    background-color: #202020; /* Gris oscuro */
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  header h2 {
+    margin: 0;
+  }
+
+  .settings-button {
+    background-color: #ff0000; /* Botón rojo */
+    color: #ffffff;
+    border: none;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .settings-button:hover {
+    background-color: #ff4d4d; /* Rojo más claro */
+  }
+
+  /* Chat */
+  .chat {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+  }
+
+  .message {
+    margin-bottom: 10px;
+  }
+
+  .username {
+    font-weight: bold;
+    color: #ff0000; /* Nombre de usuario rojo */
+  }
+
+  /* Pie de página */
+  footer {
+    background-color: #202020; /* Fondo gris oscuro */
+    padding: 10px;
+    display: flex;
+  }
+
+  footer input {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    margin-right: 10px;
+    background-color: #282828; /* Campo de texto gris */
+    color: #ffffff;
+  }
+
+  footer button {
+    background-color: #ff0000; /* Botón de enviar */
+    color: #ffffff;
+    border: none;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  footer button:hover {
+    background-color: #ff4d4d; /* Rojo más claro */
+  }
+