-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindexapp.html
More file actions
118 lines (116 loc) · 3.68 KB
/
indexapp.html
File metadata and controls
118 lines (116 loc) · 3.68 KB
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>BlockMax - Seguridad Digital</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Animate.css para animaciones -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
<!-- Estilos personalizados -->
<style>
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #1e3c72, #2a5298);
color: #fff;
overflow-x: hidden;
}
header {
text-align: center;
padding: 2em 1em;
}
header h1 {
font-size: 3em;
margin: 0;
}
header p {
font-size: 1.2em;
margin-top: 0.5em;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2em 1em;
}
.card {
background: rgba(255,255,255,0.1);
padding: 2em;
border-radius: 10px;
margin-bottom: 1.5em;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s, background 0.3s;
}
.card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.15);
}
button {
padding: 10px 20px;
background: #ff5722;
border: none;
border-radius: 5px;
color: #fff;
font-size: 1em;
cursor: pointer;
transition: background 0.3s;
margin-top: 1em;
}
button:hover {
background: #e64a19;
}
footer {
text-align: center;
padding: 1em;
margin-top: 2em;
font-size: 0.9em;
}
</style>
</head>
<body>
<header class="animate__animated animate__fadeInDown">
<h1>Bienvenido a BlockMax</h1>
<p>Tu solución integral en seguridad digital</p>
</header>
<div class="container">
<div class="card animate__animated animate__fadeInUp">
<h2>Explora nuestras funcionalidades</h2>
<p>Sube archivos, analiza amenazas y ejecuta análisis de seguridad avanzados.</p>
<button id="exploreBtn">Explorar</button>
</div>
<div class="card animate__animated animate__fadeInUp" style="animation-delay: 0.3s;">
<h2>Análisis en Tiempo Real</h2>
<p>Utilizamos tecnologías de punta para protegerte contra las amenazas digitales.</p>
<button id="analyzeBtn">Iniciar Análisis</button>
</div>
</div>
<footer class="animate__animated animate__fadeInUp" style="animation-delay: 0.5s;">
<p>© 2025 BlockMax. Todos los derechos reservados.</p>
</footer>
<!-- JavaScript personalizado para interacciones -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const exploreBtn = document.getElementById('exploreBtn');
const analyzeBtn = document.getElementById('analyzeBtn');
exploreBtn.addEventListener('click', function() {
// Agrega una animación de rebote al botón
this.classList.add('animate__animated', 'animate__bounce');
setTimeout(() => {
this.classList.remove('animate__bounce');
// Lógica para "Explorar" funcionalidades (por ejemplo, redirigir o mostrar contenido)
alert('Explorando funcionalidades de BlockMax');
}, 1000);
});
analyzeBtn.addEventListener('click', function() {
this.classList.add('animate__animated', 'animate__bounce');
setTimeout(() => {
this.classList.remove('animate__bounce');
// Lógica para iniciar análisis de seguridad (por ejemplo, redirigir a otro endpoint)
alert('Iniciando análisis de seguridad');
}, 1000);
});
});
</script>
</body>
</html>