-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (122 loc) · 3.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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>