-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
457 lines (440 loc) · 20.2 KB
/
Copy pathindex.html
File metadata and controls
457 lines (440 loc) · 20.2 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CiberSeguro — Proyecto Escolar 2026</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<!-- LOADER -->
<div id="loader">
<div class="loader-ring"></div>
<p class="loader-text">Cargando...</p>
</div>
<!-- CURSOR personalizado -->
<div class="cursor"></div>
<div class="cursor-follower"></div>
<!-- NAV -->
<nav id="navbar">
<div class="nav-logo">⚠ CiberSeguro</div>
<ul class="nav-links">
<li><a href="#inicio">Inicio</a></li>
<li><a href="#temas">Temas</a></li>
<li><a href="#leyes">Leyes</a></li>
<li><a href="#quiz">Quiz</a></li>
<li><a href="#equipo">Equipo</a></li>
</ul>
<div class="nav-badge">Entrega: 22/05/26</div>
</nav>
<!-- HERO -->
<section class="hero" id="inicio">
<div class="hero-bg">
<div class="grid-overlay"></div>
<div class="glitch-circles">
<div class="gc gc1"></div>
<div class="gc gc2"></div>
<div class="gc gc3"></div>
</div>
</div>
<div class="hero-content">
<div class="hero-tag">Proyecto Escolar — 6to Año · 2026</div>
<h1 class="hero-title">
<span class="glitch" data-text="VIOLENCIA">VIOLENCIA</span><br>
<span class="accent-line">DIGITAL</span>
</h1>
<p class="hero-sub">Ciberacoso · Grooming · Identidad Digital · Leyes que te protegen</p>
<div class="hero-team">
<span class="team-chip" data-member="damian">|Damian</span>
<span class="team-chip" data-member="nahuel">|Nahuel</span>
<span class="team-chip" data-member="isaac">|Isaac</span>
</div>
<a href="#temas" class="cta-btn">Explorar →</a>
</div>
<div class="hero-stats">
<div class="stat-card">
<span class="stat-num" data-target="7">0</span><span>de cada 10</span>
<p>adolescentes sufrieron algún tipo de violencia digital</p>
</div>
<div class="stat-card">
<span class="stat-num" data-target="4">0</span><span> leyes</span>
<p>argentinas protegen tus derechos en internet</p>
</div>
<div class="stat-card">
<span class="stat-num" data-target="102">0</span>
<p>Línea gratuita de ayuda · llama gratis</p>
</div>
</div>
</section>
<!-- TEMAS -->
<section class="section" id="temas">
<div class="section-header">
<span class="section-tag">Contenidos</span>
<h2>¿Qué estudiamos?</h2>
</div>
<!-- TABS -->
<div class="tabs-container">
<div class="tabs-nav">
<button class="tab-btn active" data-tab="ciberacoso">Ciberacoso</button>
<button class="tab-btn" data-tab="consecuencias">Consecuencias</button>
<button class="tab-btn" data-tab="grooming">Grooming</button>
<button class="tab-btn" data-tab="hackeo">Hackeo & Suplantación</button>
<button class="tab-btn" data-tab="victima">¿Qué hacer?</button>
<button class="tab-btn" data-tab="escuela">Rol de la Escuela</button>
</div>
<div class="tab-content active" id="tab-ciberacoso">
<div class="tab-inner">
<div class="tab-text">
<span class="responsible-tag">|Damian</span>
<h3>¿Qué es el Ciberacoso?</h3>
<p>El ciberacoso (o cyberbullying) es el acoso, hostigamiento y humillación de una persona a través de medios digitales: redes sociales, mensajería, videojuegos y plataformas online.</p>
<p>A diferencia del acoso cara a cara, el ciberbullying:</p>
<ul>
<li>🕐 Ocurre las 24 horas, los 7 días de la semana</li>
<li>📢 Tiene alcance masivo y viralizacion rápida</li>
<li>🎭 Puede ser anónimo, dificultando la identificación</li>
<li>♾ El daño puede ser permanente (fotos, capturas)</li>
</ul>
<div class="info-box warning">
<strong>⚡ Tipos comunes:</strong> Insultos públicos, difusión de fotos sin consentimiento, exclusión digital, suplantación de identidad para humillar.
</div>
</div>
<div class="tab-visual">
<div class="visual-card cyber">
<div class="vc-icon">🛡</div>
<p>El ciberacoso es un <strong>delito</strong> en Argentina</p>
<div class="vc-bar"><div class="vc-fill" style="width:75%"></div></div>
<small>75% de los casos ocurren en redes sociales</small>
</div>
</div>
</div>
</div>
<div class="tab-content" id="tab-consecuencias">
<div class="tab-inner">
<div class="tab-text">
<span class="responsible-tag">|Damian</span>
<h3>Consecuencias del Ciberacoso</h3>
<p>Las consecuencias afectan múltiples aspectos de la vida de la víctima:</p>
<div class="consequence-grid">
<div class="cons-item emotional">
<span class="cons-icon">🧠</span>
<h4>Emocionales</h4>
<p>Ansiedad, depresión, baja autoestima, miedo, vergüenza</p>
</div>
<div class="cons-item social">
<span class="cons-icon">👥</span>
<h4>Sociales</h4>
<p>Aislamiento, pérdida de amigos, dificultades para relacionarse</p>
</div>
<div class="cons-item academic">
<span class="cons-icon">📚</span>
<h4>Académicas</h4>
<p>Bajo rendimiento, ausentismo, miedo a ir a la escuela</p>
</div>
<div class="cons-item physical">
<span class="cons-icon">💊</span>
<h4>Físicas</h4>
<p>Insomnio, dolores de cabeza, pérdida del apetito</p>
</div>
</div>
<div class="info-box danger">
<strong>🚨 Importante:</strong> En casos graves puede derivar en conductas autolesivas. Si conocés a alguien que la esté pasando mal, avisá a un adulto de confianza.
</div>
</div>
<div class="tab-visual">
<div class="visual-card conseq">
<div class="vc-icon">📊</div>
<p><strong>Impacto emocional</strong></p>
<div class="mini-bars">
<div class="mb-item"><span>Ansiedad</span><div class="mb-bar"><div style="width:82%"></div></div></div>
<div class="mb-item"><span>Depresión</span><div class="mb-bar"><div style="width:64%"></div></div></div>
<div class="mb-item"><span>Aislamiento</span><div class="mb-bar"><div style="width:71%"></div></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-content" id="tab-grooming">
<div class="tab-inner">
<div class="tab-text">
<span class="responsible-tag">|Damian</span>
<h3>Grooming — El Acoso a Menores</h3>
<p>El <strong>grooming</strong> es el proceso por el cual un adulto establece contacto con un menor a través de internet con fines sexuales. Es una de las formas más graves de violencia digital.</p>
<h4>¿Cómo actúa un groomer?</h4>
<div class="steps-list">
<div class="step"><span>1</span> Establece contacto amigable y gana confianza</div>
<div class="step"><span>2</span> Solicita fotos o información personal</div>
<div class="step"><span>3</span> Aísla al menor de su familia y amigos</div>
<div class="step"><span>4</span> Usa la información para chantajear o manipular</div>
</div>
<div class="info-box warning">
<strong>⚖ Ley:</strong> El grooming está tipificado en el Artículo 131 del Código Penal Argentino y en la <strong>Ley 27.590 (Ley Mica Ortega)</strong>.
</div>
<p><strong>Si alguien desconocido te contacta, pide fotos o te pide que guardes secretos:</strong> contáselo a un adulto de confianza inmediatamente.</p>
</div>
<div class="tab-visual">
<div class="visual-card grooming">
<div class="vc-icon">🚫</div>
<p><strong>Señales de alerta:</strong></p>
<ul class="alert-list">
<li>🔴 Desconocido te pide fotos</li>
<li>🔴 Pide que guardes el contacto en secreto</li>
<li>🔴 Te regala cosas o sigue tus juegos</li>
<li>🔴 Intenta encontrarse en persona</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content" id="tab-hackeo">
<div class="tab-inner">
<div class="tab-text">
<span class="responsible-tag">|Nahuel</span>
<h3>Hackeo y Suplantación de Identidad</h3>
<p>El acceso indebido a cuentas y el robo de identidad son delitos digitales tipificados por la <strong>Ley 26.388</strong>.</p>
<h4>Formas más comunes:</h4>
<ul>
<li>🎣 <strong>Phishing:</strong> correos o mensajes falsos que imitan a bancos o servicios para robar contraseñas</li>
<li>🔑 <strong>Acceso a cuentas:</strong> ingreso sin permiso al correo, redes o WhatsApp ajenos</li>
<li>🎭 <strong>Suplantación:</strong> crear un perfil falso usando fotos e información de otra persona</li>
<li>📧 <strong>Spam malicioso:</strong> envío masivo de contenido desde una cuenta hackeada</li>
</ul>
<h4>¿Cómo protegerte?</h4>
<div class="protection-tips">
<div class="tip">🔐 Activá la autenticación de dos factores (2FA)</div>
<div class="tip">🔒 No uses la misma contraseña en varios sitios</div>
<div class="tip">👁 Revisá los accesos a tus cuentas regularmente</div>
<div class="tip">🚫 No hagas clic en links sospechosos</div>
</div>
</div>
<div class="tab-visual">
<div class="visual-card hack">
<div class="vc-icon">🔒</div>
<p><strong>Contraseña segura debe tener:</strong></p>
<ul class="alert-list">
<li>✅ +12 caracteres</li>
<li>✅ Mayúsculas y minúsculas</li>
<li>✅ Números y símbolos (!@#$)</li>
<li>❌ No usar tu nombre o fecha de nacimiento</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content" id="tab-victima">
<div class="tab-inner">
<div class="tab-text">
<span class="responsible-tag">|Isaac + Equipo</span>
<h3>¿Qué hacer si soy víctima?</h3>
<p>Si estás viviendo una situación de violencia digital, <strong>no estás solo/a</strong>. Estas son las acciones a seguir:</p>
<div class="action-steps">
<div class="action-step">
<div class="action-num">01</div>
<div class="action-info">
<h4>No respondas</h4>
<p>Los agresores buscan tu reacción. El silencio quita su poder.</p>
</div>
</div>
<div class="action-step">
<div class="action-num">02</div>
<div class="action-info">
<h4>Guardá evidencia</h4>
<p>Capturá pantallas de mensajes, perfiles y fechas.</p>
</div>
</div>
<div class="action-step">
<div class="action-num">03</div>
<div class="action-info">
<h4>Bloqueá y denunciá</h4>
<p>Usá las herramientas de cada red social para reportar.</p>
</div>
</div>
<div class="action-step">
<div class="action-num">04</div>
<div class="action-info">
<h4>Buscá ayuda</h4>
<p>Contáselo a un familiar, docente o adulto de confianza.</p>
</div>
</div>
<div class="action-step highlight">
<div class="action-num">📞</div>
<div class="action-info">
<h4>Línea 102</h4>
<p>Llamada gratuita para niñas, niños y adolescentes. Disponible las 24hs.</p>
</div>
</div>
</div>
</div>
<div class="tab-visual">
<div class="visual-card victim">
<div class="vc-icon">💬</div>
<p><strong>"El acoso digital es real"</strong></p>
<p style="font-size:0.9rem;margin-top:10px;">Hablar con alguien es el primer paso. No lo enfrentes solo/a.</p>
<div class="help-number">102</div>
<small>Línea de ayuda gratuita</small>
</div>
</div>
</div>
</div>
<div class="tab-content" id="tab-escuela">
<div class="tab-inner">
<div class="tab-text">
<span class="responsible-tag">|Isaac + Equipo</span>
<h3>El Rol de la Escuela</h3>
<p>La escuela cumple un papel fundamental en la prevención e intervención. La violencia digital que ocurre entre compañeros afecta el ambiente escolar aunque no suceda dentro del establecimiento.</p>
<h4>¿Qué puede hacer la escuela?</h4>
<ul>
<li>📋 Establecer acuerdos de convivencia digital claros</li>
<li>🎓 Brindar talleres de uso responsable de TIC</li>
<li>🤝 Fomentar la empatía y el respeto entre pares</li>
<li>🚨 Activar protocolos ante casos detectados</li>
<li>👨👩👧 Convocar a las familias en la concientización</li>
</ul>
<div class="info-box success">
<strong>💡 La prevención empieza en casa y en el aula.</strong> Hablar sobre estos temas normaliza pedir ayuda.
</div>
<p>Como estudiantes, <strong>también podemos actuar</strong>: no compartir contenido que dañe a otros, denunciar situaciones y acompañar a quienes la pasan mal.</p>
</div>
<div class="tab-visual">
<div class="visual-card school">
<div class="vc-icon">🏫</div>
<p><strong>La escuela puede:</strong></p>
<ul class="alert-list">
<li>✅ Prevenir y educar</li>
<li>✅ Contener y orientar</li>
<li>✅ Denunciar ante la justicia</li>
<li>✅ Acompañar a la víctima</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- LEYES -->
<section class="section dark-section" id="leyes">
<div class="section-header">
<span class="section-tag">Marco Legal</span>
<h2>Leyes que te protegen en Argentina</h2>
</div>
<div class="laws-grid">
<div class="law-card" data-law="26388">
<div class="law-num">26.388</div>
<h3>Delitos Informáticos</h3>
<p>Tipifica el acceso ilegítimo a sistemas informáticos, el daño digital, la distribución de contenido sin consentimiento y otros delitos cibernéticos.</p>
<div class="law-year">2008</div>
</div>
<div class="law-card" data-law="27736">
<div class="law-num">27.736</div>
<h3>Ley Olimpia</h3>
<p>Reconoce la violencia digital como una modalidad de violencia de género. Protege contra la difusión no consentida de imágenes íntimas.</p>
<div class="law-year">2023</div>
</div>
<div class="law-card" data-law="25326">
<div class="law-num">25.326</div>
<h3>Protección de Datos</h3>
<p>Regula el uso de datos personales en bases de datos. Garantiza el derecho a saber qué información existe sobre vos y cómo se usa.</p>
<div class="law-year">2000</div>
</div>
<div class="law-card featured" data-law="27590">
<div class="law-num">27.590</div>
<h3>Ley Mica Ortega</h3>
<p>Programa nacional para prevenir, sancionar y erradicar el grooming. Establece acciones de concientización en escuelas e instituciones.</p>
<div class="law-year">2020</div>
</div>
<div class="law-card" data-law="131cp">
<div class="law-num">Art. 131</div>
<h3>Código Penal</h3>
<p>Penaliza el contacto con menores de edad a través de medios digitales con intenciones sexuales. Penas de 6 meses a 4 años de prisión.</p>
<div class="law-year">CP</div>
</div>
</div>
</section>
<!-- QUIZ INTERACTIVO -->
<section class="section" id="quiz">
<div class="section-header">
<span class="section-tag">¿Cuánto sabés?</span>
<h2>Quiz Interactivo</h2>
</div>
<div class="quiz-container">
<div class="quiz-progress">
<div class="quiz-prog-bar"><div class="quiz-prog-fill" id="quizProgress"></div></div>
<span id="quizCounter">Pregunta 1 / 6</span>
</div>
<div id="quizCard" class="quiz-card">
<h3 id="quizQuestion">Cargando pregunta...</h3>
<div id="quizOptions" class="quiz-options"></div>
</div>
<div id="quizResult" class="quiz-result hidden">
<div class="result-icon" id="resultIcon">✅</div>
<p id="resultText"></p>
<button class="quiz-next-btn" id="quizNextBtn">Siguiente →</button>
</div>
<div id="quizFinal" class="quiz-final hidden">
<h3>¡Terminaste el quiz!</h3>
<div class="final-score" id="finalScore">0/6</div>
<p id="finalMsg"></p>
<button class="cta-btn" onclick="resetQuiz()">Jugar de nuevo 🔄</button>
</div>
</div>
</section>
<!-- EQUIPO -->
<section class="section dark-section" id="equipo">
<div class="section-header">
<span class="section-tag">Los que lo hicieron</span>
<h2>Nuestro Equipo</h2>
</div>
<div class="team-grid">
<div class="member-card" data-member="damian">
<div class="member-avatar"></div>
<h3>Damian</h3>
<div class="member-role">Ciberacoso · Grooming · Leyes</div>
<p class="member-desc">Investigó los tipos de violencia digital, sus consecuencias y el marco legal que protege a las víctimas en Argentina.</p>
<div class="member-tags">
<span>Ciberacoso</span>
<span>Grooming</span>
<span>Ley 26.388</span>
<span>Ley Olimpia</span>
</div>
</div>
<div class="member-card" data-member="nahuel">
<div class="member-avatar"></div>
<h3>Nahuel</h3>
<div class="member-role">Hackeo · Suplantación · Prevención</div>
<p class="member-desc">Analizó los delitos de hackeo y suplantación de identidad, y desarrolló guías de prevención y seguridad digital.</p>
<div class="member-tags">
<span>Hackeo</span>
<span>Phishing</span>
<span>Suplantación</span>
<span>2FA</span>
</div>
</div>
<div class="member-card" data-member="isaac">
<div class="member-avatar"></div>
<h3>Isaac</h3>
<div class="member-role">Víctimas · Rol Escolar · Recursos</div>
<p class="member-desc">Trabajó en los protocolos de actuación para víctimas y el rol de la escuela como espacio de contención y prevención.</p>
<div class="member-tags">
<span>Protocolo</span>
<span>Escuela</span>
<span>Línea 102</span>
<span>Familia</span>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-inner">
<div class="footer-logo">⚠ CiberSeguro</div>
<p>Proyecto de concientización escolar · 6to Año · 2026</p>
<p class="footer-small">Fuentes: Leyes Nacionales Argentinas · UNICEF Argentina · Ministerio de Justicia</p>
<div class="footer-team">Damian · Nahuel · Isaac</div>
</div>
</footer>
<script src="scripts/main.js"></script>
</body>
</html>