hacklab/resetea.net
1
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: rediseño visual completo — slider, dark theme, hero unificado

Browse source 
- Dark theme en index (class=page-dark): fondo #1a1714, títulos ácido, botones nav crema
- Hero-landing con gradiente animado ácido→caoba aplicado a los 7 htmls
- Slider 3 slides (crossfade CSS + JS): crowd-phones / surveillance / legal-action
- Imágenes descargadas localmente (CSP img-src 'self')
- Botón RESETEA hero: verde ácido, fuente Recion, tipografía grande centrada
- Cards de estudios con enlaces a fuente original
- CSP ampliada: img-src añade cdn.simpleicons.org para chips de redes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hacklab 2026-04-26 23:34:41 +02:00
parent d49da56e87
commit 467820b8b3
15 changed files with 2552 additions and 566 deletions
Download patch file Download diff file Expand all files Collapse all files

60
public/concienciacion.html
View file

@ -15,7 +15,7 @@
margin-top: 1.5rem;
}
.right-card {
background: var(--panel);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.4rem;
@ -24,7 +24,7 @@
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--accent);
color: var(--caoba);
text-transform: uppercase;
margin-bottom: 0.4rem;
}
@ -37,7 +37,7 @@
font-size: 0.72rem;
border-radius: 6px;
background: rgba(255,61,0,0.12);
color: var(--accent);
color: var(--caoba);
border: 1px solid rgba(255,61,0,0.25);
}
.timeline {
@ -52,12 +52,12 @@
left: -1.9rem; top: 0.3rem;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--accent);
background: var(--caoba);
}
.timeline-item h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.timeline-item p { font-size: 0.85rem; color: var(--muted); }
.myth-block {
background: var(--panel);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.2rem 1.4rem;
@ -69,7 +69,7 @@
margin-bottom: 0.3rem;
}
.myth-label.mito { color: #ff6b6b; }
.myth-label.realidad { color: var(--neon); }
.myth-label.realidad { color: var(--acid-dark); }
.myth-block p { font-size: 0.88rem; color: var(--muted); }
.platform-table {
width: 100%; border-collapse: collapse;
@ -90,32 +90,36 @@
display: inline-block; padding: 0.15rem 0.45rem;
border-radius: 5px; font-size: 0.72rem; font-weight: 600;
}
.badge-ok { background: rgba(57,255,20,0.12); color: var(--neon); border: 1px solid rgba(57,255,20,0.2); }
.badge-ok { background: rgba(57,255,20,0.12); color: var(--acid-dark); border: 1px solid rgba(57,255,20,0.2); }
.badge-warn{ background: rgba(255,200,0,0.12); color: #ffc800; border: 1px solid rgba(255,200,0,0.2); }
.badge-bad { background: rgba(255,61,0,0.12); color: var(--accent); border: 1px solid rgba(255,61,0,0.2); }
.badge-bad { background: rgba(255,61,0,0.12); color: var(--caoba); border: 1px solid rgba(255,61,0,0.2); }
@media (max-width: 900px) { .rights-grid { grid-template-columns: 1fr; } }
.right-card-link {
display: inline-flex; align-items: center; gap: 0.3rem;
margin-top: 0.75rem; padding: 0.3rem 0.65rem;
border-radius: 7px; font-size: 0.72rem; font-weight: 600;
color: var(--muted); border: 1px solid var(--border);
text-decoration: none;
transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.right-card-link:hover { color: var(--caoba); border-color: var(--caoba); background: var(--caoba-lt); text-decoration: none; }
</style>
</head>
<body>
<header class="topbar">
<div class="container topbar-inner">
<div class="brand">
<div class="brand-logo">R</div>
<div class="brand-text">
<div class="brand-name">RESETEA<span>.NET</span></div>
<div class="brand-tag">Privacidad sin custodios</div>
</div>
<section class="hero-landing">
<div class="container hero-landing-inner">
<h1 class="main-title">RESETEA</h1>
<div class="landing-nav">
<a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
<a class="landing-nav-btn landing-nav-btn--highlight" href="concienciacion.html">Concienciación</a>
<a class="landing-nav-btn" href="egosurfing.html">Egosurfing</a>
<a class="landing-nav-btn" href="plantillas.html">Resetea</a>
<a class="landing-nav-btn" href="stats.html">Estadísticas</a>
<a class="landing-nav-btn" href="salud-digital.html">🧠 Salud digital</a>
</div>
<nav class="nav" aria-label="Navegación principal">
<a class="nav-btn" href="tipos.html">Tipos de información</a>
<a class="nav-btn nav-btn--primary" href="concienciacion.html">Concienciación</a>
<a class="nav-btn" href="index.html">Resetea</a>
<a class="nav-btn" href="egosurfing.html">Egosurfing</a>
<a class="nav-btn" href="stats.html">Estadísticas</a>
</nav>
</div>
</header>
</section>
<main>
@ -170,6 +174,7 @@
<p>Puedes solicitar una copia de todos los datos que una empresa tiene sobre ti,
el origen de esos datos, con quién los comparte y cuánto tiempo los conserva.</p>
<span class="tag">Descarga tu historial</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2330-1-1" target="_blank" rel="noopener">Ver Art. 15 RGPD →</a>
</div>
<div class="right-card">
@ -178,6 +183,7 @@
<p>Si tus datos son inexactos o están incompletos, tienes derecho a que se corrijan
sin demora. Incluye datos inferidos o desactualizados.</p>
<span class="tag">Corrige errores</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2392-1-1" target="_blank" rel="noopener">Ver Art. 16 RGPD →</a>
</div>
<div class="right-card">
@ -186,6 +192,7 @@
<p>Puedes pedir que borren tus datos cuando ya no sean necesarios, hayas retirado
el consentimiento o el tratamiento sea ilícito. Es el más potente contra redes sociales.</p>
<span class="tag">El más usado</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2407-1-1" target="_blank" rel="noopener">Ver Art. 17 RGPD →</a>
</div>
<div class="right-card">
@ -194,6 +201,7 @@
<p>Mientras se resuelve una disputa sobre tus datos puedes pedir que congelen su
tratamiento: los conservan pero no los usan ni comparten.</p>
<span class="tag">Pausa temporal</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2445-1-1" target="_blank" rel="noopener">Ver Art. 18 RGPD →</a>
</div>
<div class="right-card">
@ -202,6 +210,7 @@
<p>Puedes recibir tus datos en formato estructurado y legible por máquina (JSON, CSV)
para llevártelos a otro servicio. Muy útil antes de borrar una cuenta.</p>
<span class="tag">Descarga antes de irte</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2501-1-1" target="_blank" rel="noopener">Ver Art. 20 RGPD →</a>
</div>
<div class="right-card">
@ -210,6 +219,7 @@
<p>Puedes oponerte a que procesen tus datos para marketing directo o perfilado
publicitario. En ese caso no necesitas justificación: es un derecho absoluto.</p>
<span class="tag">Anti-publicidad</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2523-1-1" target="_blank" rel="noopener">Ver Art. 21 RGPD →</a>
</div>
<div class="right-card">
@ -218,6 +228,7 @@
<p>Derecho a no ser sometido a decisiones basadas solo en tratamiento automatizado
(scoring, algoritmos) que produzcan efectos significativos sobre ti.</p>
<span class="tag">Anti-algoritmo</span>
<a class="right-card-link" href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e2562-1-1" target="_blank" rel="noopener">Ver Art. 22 RGPD →</a>
</div>
<div class="right-card">
@ -226,6 +237,7 @@
<p>Si una empresa no respeta tus derechos, puedes presentar una reclamación ante
la AEPD (España) de forma gratuita. La AEPD puede imponer multas millonarias.</p>
<span class="tag">Escala a la AEPD</span>
<a class="right-card-link" href="https://www.aepd.es/es/derechos-y-deberes/derechos" target="_blank" rel="noopener">Ver AEPD →</a>
</div>
</div>