-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cf4de57
commit 132417a
Showing
1 changed file
with
136 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="es"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Impex</title> | ||
| <style> | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #000; /* Fondo negro */ | ||
| color: #fff; /* Texto en blanco */ | ||
| margin: 0; | ||
| } | ||
|
|
||
| /* Estilos del menú lateral */ | ||
| .sidebar { | ||
| height: 100%; | ||
| width: 250px; | ||
| position: fixed; | ||
| top: 0; | ||
| left: -250px; /* Oculto inicialmente */ | ||
| background-color: #222; /* Color de fondo del menú */ | ||
| color: #fff; | ||
| overflow-x: hidden; | ||
| transition: left 0.3s; /* Transición suave para abrir/cerrar */ | ||
| padding-top: 60px; | ||
| border-right: 2px solid red; /* Borde rojo brillante */ | ||
| } | ||
|
|
||
| .sidebar a { | ||
| padding: 10px 15px; | ||
| text-decoration: none; | ||
| font-size: 18px; | ||
| color: #fff; | ||
| display: block; | ||
| transition: background-color 0.2s; /* Transición para el color de fondo */ | ||
| border-bottom: 1px solid red; /* Borde rojo brillante */ | ||
| } | ||
|
|
||
| .sidebar a:hover { | ||
| background-color: #575757; /* Color de fondo en hover */ | ||
| } | ||
|
|
||
| /* Icono de menú hamburguesa */ | ||
| .menu-icon { | ||
| position: fixed; | ||
| top: 15px; | ||
| left: 15px; | ||
| cursor: pointer; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .menu-icon div { | ||
| width: 30px; | ||
| height: 4px; | ||
| background-color: #fff; /* Color de las líneas del menú */ | ||
| margin: 5px 0; | ||
| } | ||
|
|
||
| /* Contenedor principal */ | ||
| .container { | ||
| padding: 60px 20px; | ||
| max-width: 600px; | ||
| margin: auto; | ||
| text-align: center; | ||
| border: 2px solid red; /* Borde rojo brillante */ | ||
| } | ||
|
|
||
| .container h1 { | ||
| color: #fff; /* Texto en blanco */ | ||
| } | ||
|
|
||
| .button { | ||
| padding: 10px 20px; | ||
| background-color: #000; | ||
| color: #fff; | ||
| border: 2px solid red; /* Borde rojo brillante */ | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| transition: background-color 0.2s; /* Transición para el botón */ | ||
| } | ||
|
|
||
| .button:hover { | ||
| background-color: #333; /* Color de fondo en hover */ | ||
| } | ||
|
|
||
| .output { | ||
| margin-top: 15px; | ||
| font-size: 14px; | ||
| color: #fff; /* Texto en blanco */ | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <!-- Menú lateral --> | ||
| <div id="sidebar" class="sidebar"> | ||
| <a href="javascript:void(0)" onclick="toggleMenu()">Cerrar menu</a> | ||
| <a href="#">Formulario</a> | ||
| <a href="#">Discord</a> | ||
| <a href="#">Crear</a> | ||
| <a href="#">Iniciar Sesion</a> | ||
| </div> | ||
|
|
||
| <!-- Icono de menú hamburguesa --> | ||
| <div class="menu-icon" onclick="toggleMenu()"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
|
|
||
| <!-- Contenido principal --> | ||
| <div class="container"> | ||
| <h1>Impex - Generador de enlaces</h1> | ||
| <p>Haz clic en el boton para iniciar sesion:</p> | ||
| <button class="button" onclick="generarEnlace()">Entrar a Discord</button> | ||
| <p class="output" id="output"></p> | ||
| </div> | ||
|
|
||
| <script> | ||
| // Función para abrir/cerrar el menu | ||
| function toggleMenu() { | ||
| const sidebar = document.getElementById("sidebar"); | ||
| sidebar.style.left = sidebar.style.left === "0px" ? "-250px" : "0"; // Abre o cierra el menú | ||
| } | ||
|
|
||
| // Función para generar enlace y redirigir al enlace específico | ||
| function generarEnlace() { | ||
| const enlaceDestino = "https://discord.gg/Q6Qw3y9u9h"; // Enlace específico | ||
| document.getElementById("output").textContent = "Redirigiendo a: " + enlaceDestino; | ||
| setTimeout(() => { // Añadir un pequeño retraso antes de redirigir | ||
| window.location.href = enlaceDestino; // Redirigir al usuario al enlace específico | ||
| }, 2000); // 2 segundos de espera | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |