Hugging Face's logo

Spaces:
doctorlinux
/
cibertest
Sleeping

App Files Community
doctorlinux commited on
Commit
7af2ae8
·
verified ·
1 Parent(s): fbe82a4

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +67 -177
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>DoctorLinux - Análisis IA de Seguridad</title>
7
  <style>
8
  * {
9
  margin: 0;
@@ -13,8 +13,8 @@
13
  }
14
 
15
  body {
16
- background: linear-gradient(135deg, #1a2980, #26d0ce);
17
- color: #333;
18
  min-height: 100vh;
19
  display: flex;
20
  flex-direction: column;
@@ -24,24 +24,14 @@
24
  }
25
 
26
  .container {
27
- max-width: 900px;
28
  width: 100%;
29
- background: white;
30
- border-radius: 15px;
 
31
  padding: 40px;
32
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
33
- position: relative;
34
- overflow: hidden;
35
- }
36
-
37
- .container::before {
38
- content: '';
39
- position: absolute;
40
- top: 0;
41
- left: 0;
42
- right: 0;
43
- height: 5px;
44
- background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
45
  }
46
 
47
  header {
@@ -50,17 +40,15 @@
50
  }
51
 
52
  .logo {
53
- font-size: 2.8rem;
54
- font-weight: 800;
55
  margin-bottom: 10px;
56
- background: linear-gradient(90deg, #1a2980, #26d0ce);
57
- -webkit-background-clip: text;
58
- -webkit-text-fill-color: transparent;
59
  }
60
 
61
  .subtitle {
62
- font-size: 1.3rem;
63
- color: #666;
64
  margin-bottom: 20px;
65
  }
66
 
@@ -70,146 +58,101 @@
70
  gap: 30px;
71
  }
72
 
73
- .ai-analysis-section {
74
- background: #f8f9fa;
75
  padding: 25px;
76
- border-radius: 12px;
77
- border-left: 5px solid #4ecdc4;
78
  }
79
 
80
- .ai-analysis-section h2 {
81
  margin-bottom: 15px;
82
- color: #1a2980;
83
- display: flex;
84
- align-items: center;
85
- gap: 10px;
86
  }
87
 
88
- .ai-analysis-section h2::before {
89
- content: '🤖';
90
- font-size: 1.5rem;
91
- }
92
-
93
- .ai-analysis-section ul {
94
  list-style-type: none;
95
  padding-left: 10px;
96
  }
97
 
98
- .ai-analysis-section li {
99
- margin-bottom: 12px;
100
- padding-left: 30px;
101
  position: relative;
102
- color: #555;
103
  }
104
 
105
- .ai-analysis-section li:before {
106
- content: "✓";
107
- color: #4ecdc4;
108
- font-weight: bold;
109
- font-size: 1.2rem;
110
  position: absolute;
111
  left: 0;
112
- top: 0;
113
- }
114
-
115
- .metrics-grid {
116
- display: grid;
117
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
118
- gap: 15px;
119
- margin-top: 20px;
120
- }
121
-
122
- .metric {
123
- background: white;
124
- padding: 15px;
125
- border-radius: 8px;
126
- text-align: center;
127
- box-shadow: 0 3px 10px rgba(0,0,0,0.08);
128
- border-top: 3px solid #4ecdc4;
129
- }
130
-
131
- .metric-value {
132
- font-size: 1.8rem;
133
- font-weight: 700;
134
- color: #1a2980;
135
- margin-bottom: 5px;
136
- }
137
-
138
- .metric-label {
139
- font-size: 0.9rem;
140
- color: #666;
141
  }
142
 
143
  .download-section {
144
  text-align: center;
145
- background: linear-gradient(135deg, #1a2980, #26d0ce);
146
- padding: 35px;
147
- border-radius: 12px;
148
- color: white;
149
  }
150
 
151
  .download-section h2 {
152
  margin-bottom: 15px;
153
- font-size: 1.8rem;
154
  }
155
 
156
  .download-section p {
157
  margin-bottom: 25px;
158
  opacity: 0.9;
159
  font-size: 1.1rem;
160
- max-width: 600px;
161
- margin-left: auto;
162
- margin-right: auto;
163
  }
164
 
165
  .download-btn {
166
  display: inline-block;
167
- background: white;
168
- color: #1a2980;
169
- padding: 16px 45px;
170
  font-size: 1.2rem;
171
- font-weight: 700;
172
  border: none;
173
  border-radius: 50px;
174
  cursor: pointer;
175
  transition: all 0.3s ease;
176
  text-decoration: none;
177
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
178
  }
179
 
180
  .download-btn:hover {
181
  transform: translateY(-3px);
182
- box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
183
- background: #f0f0f0;
184
  }
185
 
186
- .ai-features {
187
  display: grid;
188
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
189
  gap: 20px;
190
- margin-top: 25px;
191
  }
192
 
193
- .ai-feature {
194
- background: rgba(255, 255, 255, 0.15);
195
  padding: 20px;
196
  border-radius: 10px;
197
  text-align: center;
198
- backdrop-filter: blur(5px);
199
  }
200
 
201
- .ai-feature-icon {
202
  font-size: 2.5rem;
203
  margin-bottom: 10px;
 
204
  }
205
 
206
  footer {
207
  margin-top: 40px;
208
  text-align: center;
209
  font-size: 0.9rem;
210
- color: #666;
211
- border-top: 1px solid #eee;
212
- padding-top: 20px;
213
  }
214
 
215
  @media (max-width: 600px) {
@@ -218,17 +161,13 @@
218
  }
219
 
220
  .logo {
221
- font-size: 2.2rem;
222
  }
223
 
224
  .download-btn {
225
- padding: 14px 35px;
226
  font-size: 1.1rem;
227
  }
228
-
229
- .metrics-grid {
230
- grid-template-columns: 1fr;
231
- }
232
  }
233
  </style>
234
  </head>
@@ -236,58 +175,38 @@
236
  <div class="container">
237
  <header>
238
  <div class="logo">DoctorLinux</div>
239
- <div class="subtitle">Análisis de Seguridad con Inteligencia Artificial</div>
240
  </header>
241
 
242
  <div class="content">
243
- <div class="ai-analysis-section">
244
  <h2>Análisis de Seguridad Completado</h2>
245
- <p>Nuestra IA ha finalizado la evaluación exhaustiva de tu infraestructura. El informe incluye:</p>
246
  <ul>
247
  <li>Evaluación de roles NAS y gestión de parches</li>
248
- <li>Análisis predictivo de configuración de firewalls</li>
249
  <li>Verificación de estrategia de backups 3-2-1</li>
250
  <li>Revisión de políticas de acceso y MFA</li>
251
- <li>Recomendaciones de hardening basadas en ML</li>
252
- <li>Detección de patrones de vulnerabilidad</li>
253
  </ul>
254
-
255
- <div class="metrics-grid">
256
- <div class="metric">
257
- <div class="metric-value">94%</div>
258
- <div class="metric-label">Seguridad General</div>
259
- </div>
260
- <div class="metric">
261
- <div class="metric-value">12</div>
262
- <div class="metric-label">Vulnerabilidades Detectadas</div>
263
- </div>
264
- <div class="metric">
265
- <div class="metric-value">28</div>
266
- <div class="metric-label">Recomendaciones IA</div>
267
- </div>
268
- <div class="metric">
269
- <div class="metric-value">A+</div>
270
- <div class="metric-label">Calificación Final</div>
271
- </div>
272
- </div>
273
  </div>
274
 
275
  <div class="download-section">
276
- <h2>Descarga tu Informe de Análisis IA</h2>
277
- <p>Obtén el análisis completo con inteligencia artificial en PDF al instante</p>
278
- <a href="#" class="download-btn" id="downloadBtn">Descargar Análisis IA</a>
279
 
280
- <div class="ai-features">
281
- <div class="ai-feature">
282
- <div class="ai-feature-icon">🧠</div>
283
- <div>Análisis Predictivo IA</div>
284
  </div>
285
- <div class="ai-feature">
286
- <div class="ai-feature-icon">📊</div>
287
- <div>Métricas Avanzadas</div>
288
  </div>
289
- <div class="ai-feature">
290
- <div class="ai-feature-icon">⚡</div>
291
  <div>Descarga Inmediata</div>
292
  </div>
293
  </div>
@@ -295,37 +214,8 @@
295
  </div>
296
 
297
  <footer>
298
- <p>© 2023 DoctorLinux. Tecnología con Inteligencia Artificial. Todos los derechos reservados.</p>
299
  </footer>
300
  </div>
301
-
302
- <script>
303
- document.getElementById('downloadBtn').addEventListener('click', function(e) {
304
- e.preventDefault();
305
-
306
- // Simulación de descarga
307
- const btn = this;
308
- const originalText = btn.textContent;
309
-
310
- btn.textContent = 'Procesando con IA...';
311
- btn.style.opacity = '0.8';
312
-
313
- setTimeout(function() {
314
- btn.textContent = '¡Análisis Descargado!';
315
- btn.style.background = 'linear-gradient(135deg, #4CAF50, #2E7D32)';
316
- btn.style.color = 'white';
317
-
318
- setTimeout(function() {
319
- btn.textContent = originalText;
320
- btn.style.opacity = '1';
321
- btn.style.background = 'white';
322
- btn.style.color = '#1a2980';
323
-
324
- // Aquí iría la lógica real de descarga
325
- alert('Análisis IA descargado exitosamente. En una implementación real, el PDF se descargaría ahora.');
326
- }, 2000);
327
- }, 1500);
328
- });
329
- </script>
330
  </body>
331
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DoctorLinux - Análisis de Seguridad</title>
7
  <style>
8
  * {
9
  margin: 0;
 
13
  }
14
 
15
  body {
16
+ background: linear-gradient(135deg, #1a2a6c, #2a3a7c);
17
+ color: #fff;
18
  min-height: 100vh;
19
  display: flex;
20
  flex-direction: column;
 
24
  }
25
 
26
  .container {
27
+ max-width: 800px;
28
  width: 100%;
29
+ background: rgba(255, 255, 255, 0.1);
30
+ backdrop-filter: blur(10px);
31
+ border-radius: 20px;
32
  padding: 40px;
33
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
34
+ border: 1px solid rgba(255, 255, 255, 0.2);
 
 
 
 
 
 
 
 
 
 
 
35
  }
36
 
37
  header {
 
40
  }
41
 
42
  .logo {
43
+ font-size: 2.5rem;
44
+ font-weight: 700;
45
  margin-bottom: 10px;
46
+ color: #4fc3f7;
 
 
47
  }
48
 
49
  .subtitle {
50
+ font-size: 1.2rem;
51
+ opacity: 0.8;
52
  margin-bottom: 20px;
53
  }
54
 
 
58
  gap: 30px;
59
  }
60
 
61
+ .info-section {
62
+ background: rgba(255, 255, 255, 0.05);
63
  padding: 25px;
64
+ border-radius: 15px;
65
+ border-left: 4px solid #4fc3f7;
66
  }
67
 
68
+ .info-section h2 {
69
  margin-bottom: 15px;
70
+ color: #4fc3f7;
 
 
 
71
  }
72
 
73
+ .info-section ul {
 
 
 
 
 
74
  list-style-type: none;
75
  padding-left: 10px;
76
  }
77
 
78
+ .info-section li {
79
+ margin-bottom: 10px;
80
+ padding-left: 25px;
81
  position: relative;
 
82
  }
83
 
84
+ .info-section li:before {
85
+ content: "•";
86
+ color: #4fc3f7;
87
+ font-size: 1.5rem;
 
88
  position: absolute;
89
  left: 0;
90
+ top: -5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  }
92
 
93
  .download-section {
94
  text-align: center;
95
+ background: rgba(255, 255, 255, 0.05);
96
+ padding: 30px;
97
+ border-radius: 15px;
 
98
  }
99
 
100
  .download-section h2 {
101
  margin-bottom: 15px;
102
+ color: #4fc3f7;
103
  }
104
 
105
  .download-section p {
106
  margin-bottom: 25px;
107
  opacity: 0.9;
108
  font-size: 1.1rem;
 
 
 
109
  }
110
 
111
  .download-btn {
112
  display: inline-block;
113
+ background: linear-gradient(to right, #4fc3f7, #2979ff);
114
+ color: white;
115
+ padding: 15px 40px;
116
  font-size: 1.2rem;
117
+ font-weight: 600;
118
  border: none;
119
  border-radius: 50px;
120
  cursor: pointer;
121
  transition: all 0.3s ease;
122
  text-decoration: none;
123
+ box-shadow: 0 5px 15px rgba(41, 121, 255, 0.4);
124
  }
125
 
126
  .download-btn:hover {
127
  transform: translateY(-3px);
128
+ box-shadow: 0 8px 20px rgba(41, 121, 255, 0.6);
 
129
  }
130
 
131
+ .features {
132
  display: grid;
133
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
134
  gap: 20px;
135
+ margin-top: 20px;
136
  }
137
 
138
+ .feature {
139
+ background: rgba(255, 255, 255, 0.05);
140
  padding: 20px;
141
  border-radius: 10px;
142
  text-align: center;
 
143
  }
144
 
145
+ .feature-icon {
146
  font-size: 2.5rem;
147
  margin-bottom: 10px;
148
+ color: #4fc3f7;
149
  }
150
 
151
  footer {
152
  margin-top: 40px;
153
  text-align: center;
154
  font-size: 0.9rem;
155
+ opacity: 0.7;
 
 
156
  }
157
 
158
  @media (max-width: 600px) {
 
161
  }
162
 
163
  .logo {
164
+ font-size: 2rem;
165
  }
166
 
167
  .download-btn {
168
+ padding: 12px 30px;
169
  font-size: 1.1rem;
170
  }
 
 
 
 
171
  }
172
  </style>
173
  </head>
 
175
  <div class="container">
176
  <header>
177
  <div class="logo">DoctorLinux</div>
178
+ <div class="subtitle">Soluciones de Seguridad Informática</div>
179
  </header>
180
 
181
  <div class="content">
182
+ <div class="info-section">
183
  <h2>Análisis de Seguridad Completado</h2>
184
+ <p>Hemos finalizado la evaluación de seguridad de tu infraestructura. El informe incluye:</p>
185
  <ul>
186
  <li>Evaluación de roles NAS y gestión de parches</li>
187
+ <li>Análisis de configuración de firewalls</li>
188
  <li>Verificación de estrategia de backups 3-2-1</li>
189
  <li>Revisión de políticas de acceso y MFA</li>
190
+ <li>Recomendaciones de hardening</li>
 
191
  </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  </div>
193
 
194
  <div class="download-section">
195
+ <h2>Descarga tu Informe Completo</h2>
196
+ <p>Obtén tu análisis detallado en PDF al instante</p>
197
+ <a href="#" class="download-btn">Análisis IA Detallado</a>
198
 
199
+ <div class="features">
200
+ <div class="feature">
201
+ <div class="feature-icon">📊</div>
202
+ <div>Análisis Detallado</div>
203
  </div>
204
+ <div class="feature">
205
+ <div class="feature-icon">🔒</div>
206
+ <div>Evaluación de Seguridad</div>
207
  </div>
208
+ <div class="feature">
209
+ <div class="feature-icon">⚡</div>
210
  <div>Descarga Inmediata</div>
211
  </div>
212
  </div>
 
214
  </div>
215
 
216
  <footer>
217
+ <p>© 2023 DoctorLinux. Todos los derechos reservados.</p>
218
  </footer>
219
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
  </body>
221
  </html>