Hugging Face's logo

Spaces:
doctorlinux
/
cibertest
Sleeping

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

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +156 -73
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 - Informe de Seguridad</title>
7
  <style>
8
  * {
9
  margin: 0;
@@ -13,8 +13,8 @@
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,14 +24,24 @@
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,15 +50,17 @@
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,101 +70,146 @@
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,13 +218,17 @@
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,38 +236,58 @@
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" id="downloadBtn">Descargar PDF</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,7 +295,7 @@
214
  </div>
215
 
216
  <footer>
217
- <p>© 2023 DoctorLinux. Todos los derechos reservados.</p>
218
  </footer>
219
  </div>
220
 
@@ -226,20 +307,22 @@
226
  const btn = this;
227
  const originalText = btn.textContent;
228
 
229
- btn.textContent = 'Preparando descarga...';
230
- btn.style.opacity = '0.7';
231
 
232
  setTimeout(function() {
233
- btn.textContent = '¡Descarga completada!';
234
- btn.style.background = 'linear-gradient(to right, #4CAF50, #2E7D32)';
 
235
 
236
  setTimeout(function() {
237
  btn.textContent = originalText;
238
  btn.style.opacity = '1';
239
- btn.style.background = 'linear-gradient(to right, #4fc3f7, #2979ff)';
 
240
 
241
  // Aquí iría la lógica real de descarga
242
- alert('En una implementación real, el PDF se descargaría ahora.');
243
  }, 2000);
244
  }, 1500);
245
  });
 
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
  }
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
  }
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
  }
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
  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
  }
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
  <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
  </div>
296
 
297
  <footer>
298
+ <p>© 2023 DoctorLinux. Tecnología con Inteligencia Artificial. Todos los derechos reservados.</p>
299
  </footer>
300
  </div>
301
 
 
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
  });