Rediseño funnel: hero centrado + formulario GDPR en portada
- Título grande centrado + lema en verde lima (misma fuente, menor tamaño) - 4 botones de navegación debajo del lema - Formulario principal visible al cargar: email + chips de redes sociales - Chips API (caoba): envío automático de carta GDPR via /api/erase - Chips manuales (verde): abren enlace oficial de eliminación - Resultados en línea con código de referencia por solicitud - Checklist completo conservado debajo para control manual - Nueva sección CSS: hero-landing, erase-form-section, net-chip, results Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hacklab
parent
614d5af397
commit
35a2bd8cf8
2 changed files with 479 additions and 100 deletions
|
|
@ -5,41 +5,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>RESETEA.NET · Reduce tu huella digital</title>
|
||||
<meta name="description"
|
||||
content="Panel para eliminar cuentas y desindexar datos personales en redes sociales, buscadores y data brokers. Sin guardar información. Enlace oficiales y textos GDPR.">
|
||||
content="Envía cartas GDPR y elimina tus datos de redes sociales, buscadores y data brokers. Sin guardar información. Enlace oficiales y textos RGPD.">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<style>
|
||||
.item .step-tag {
|
||||
display: inline-block;
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: 0.68rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tag-first { background: rgba(255,61,0,0.15); color: var(--accent); border: 1px solid rgba(255,61,0,0.3); }
|
||||
.tag-before { background: rgba(57,255,20,0.1); color: var(--neon); border: 1px solid rgba(57,255,20,0.2); }
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
margin: 1.5rem 0 0.3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
border-radius: 2px;
|
||||
transition: width 300ms ease;
|
||||
}
|
||||
.progress-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -54,65 +21,121 @@
|
|||
</div>
|
||||
</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" href="tipos.html">Tipos de info</a>
|
||||
<a class="nav-btn" href="concienciacion.html">Concienciación</a>
|
||||
<a class="nav-btn nav-btn--primary" href="index.html">Resetea</a>
|
||||
<a class="nav-btn" href="egosurfing.html">Egosurfing</a>
|
||||
<a class="nav-btn nav-btn--primary" href="plantillas.html">Plantillas GDPR</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container hero-inner">
|
||||
<div class="hero-text">
|
||||
<h1>Reduce tu huella digital.<br>Sin entregar tus datos.</h1>
|
||||
<p>
|
||||
RESETEA.NET centraliza los <strong>enlaces oficiales de eliminación</strong> de las
|
||||
principales plataformas junto con <strong>plantillas GDPR listas para copiar</strong>.
|
||||
Tú ejecutas cada acción: nosotros no actuamos en tu nombre.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn primary" href="#panel">Abrir panel</a>
|
||||
<a class="btn ghost" href="plantillas.html">Generar carta GDPR</a>
|
||||
</div>
|
||||
<div class="notice">
|
||||
<strong>Principio clave:</strong><br>
|
||||
No guardamos información personal, no pedimos contraseñas
|
||||
y no actuamos en tu nombre. Tú ejecutas cada acción.
|
||||
<br><br>
|
||||
<strong>Orden recomendado:</strong> (1) descarga tus datos, (2) envía carta GDPR, (3) elimina la cuenta, (4) desindexar en buscadores.
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-card">
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="stat-num">0</div><div class="stat-label">Datos guardados</div></div>
|
||||
<div class="stat"><div class="stat-num">100%</div><div class="stat-label">Acciones oficiales</div></div>
|
||||
<div class="stat"><div class="stat-num">∞</div><div class="stat-label">Control del usuario</div></div>
|
||||
</div>
|
||||
<ul class="steps">
|
||||
<li><span>1</span> Elige qué borrar</li>
|
||||
<li><span>2</span> Abre el enlace oficial</li>
|
||||
<li><span>3</span> Confirma manualmente</li>
|
||||
</ul>
|
||||
<div class="progress-bar"><div class="progress-fill" id="progress-fill" style="width:0%"></div></div>
|
||||
<div class="progress-label"><span id="progress-text">0 acciones completadas</span></div>
|
||||
<!-- ══════════════════════════════════════════
|
||||
HERO — TÍTULO + LEMA + NAV BUTTONS
|
||||
════════════════════════════════════════════ -->
|
||||
<section class="hero-landing">
|
||||
<div class="container hero-landing-inner">
|
||||
<h1 class="main-title">Reduce tu huella digital.</h1>
|
||||
<p class="main-tagline">Privacidad sin custodios.</p>
|
||||
<div class="landing-nav">
|
||||
<a class="landing-nav-btn" href="tipos.html">Tipos de información</a>
|
||||
<a class="landing-nav-btn" href="concienciacion.html">Concienciación</a>
|
||||
<a class="landing-nav-btn" href="egosurfing.html">Egosurfing</a>
|
||||
<a class="landing-nav-btn landing-nav-btn--highlight" href="plantillas.html">Plantillas GDPR</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════════════════════════════════
|
||||
PANEL DE ACCIONES
|
||||
FORMULARIO PRINCIPAL — EMAIL + REDES
|
||||
════════════════════════════════════════════ -->
|
||||
<section id="panel" class="panel">
|
||||
<section class="erase-form-section" id="panel">
|
||||
<div class="container">
|
||||
<h2>Panel de acciones</h2>
|
||||
<div class="erase-form-wrap">
|
||||
|
||||
<div class="form-header">
|
||||
<h2>Introduce tu correo electrónico</h2>
|
||||
<p>Selecciona las redes y enviamos la carta GDPR por ti. Sin guardar nada.</p>
|
||||
</div>
|
||||
|
||||
<div class="email-row">
|
||||
<input type="email" id="gdpr-email" class="email-input"
|
||||
placeholder="tu@correo.com" autocomplete="email">
|
||||
</div>
|
||||
|
||||
<p class="networks-label">Selecciona las redes que quieres eliminar:</p>
|
||||
|
||||
<div class="networks-section">
|
||||
<p class="networks-sublabel">Envío automático de carta GDPR</p>
|
||||
<div class="networks-grid" id="networks-grid">
|
||||
<button class="net-chip" data-provider="instagram" data-type="api">Instagram</button>
|
||||
<button class="net-chip" data-provider="facebook" data-type="api">Facebook</button>
|
||||
<button class="net-chip" data-provider="twitter_x" data-type="api">X / Twitter</button>
|
||||
<button class="net-chip" data-provider="linkedin" data-type="api">LinkedIn</button>
|
||||
<button class="net-chip" data-provider="tiktok" data-type="api">TikTok</button>
|
||||
<button class="net-chip" data-provider="snapchat" data-type="api">Snapchat</button>
|
||||
<button class="net-chip" data-provider="discord" data-type="api">Discord</button>
|
||||
<button class="net-chip" data-provider="reddit" data-type="api">Reddit</button>
|
||||
<button class="net-chip" data-provider="microsoft" data-type="api">Microsoft</button>
|
||||
<button class="net-chip" data-provider="apple" data-type="api">Apple</button>
|
||||
<button class="net-chip" data-provider="google"
|
||||
data-type="form"
|
||||
data-form-url="https://support.google.com/policies/contact/sar_data_protection">Google</button>
|
||||
<button class="net-chip" data-provider="amazon"
|
||||
data-type="form"
|
||||
data-form-url="https://www.amazon.es/hz/contact-us/privacy-disclosure/">Amazon</button>
|
||||
</div>
|
||||
|
||||
<p class="networks-sublabel networks-sublabel--manual">Acceso rápido — acción manual</p>
|
||||
<div class="networks-grid">
|
||||
<button class="net-chip net-chip--manual" data-provider="whatsapp"
|
||||
data-type="link" data-link="https://faq.whatsapp.com/1306557496340600">WhatsApp</button>
|
||||
<button class="net-chip net-chip--manual" data-provider="telegram"
|
||||
data-type="link" data-link="https://my.telegram.org/auth">Telegram</button>
|
||||
<button class="net-chip net-chip--manual" data-provider="spotify"
|
||||
data-type="link" data-link="https://support.spotify.com/es/article/close-account/">Spotify</button>
|
||||
<button class="net-chip net-chip--manual" data-provider="youtube"
|
||||
data-type="link" data-link="https://support.google.com/youtube/answer/55759">YouTube</button>
|
||||
<button class="net-chip net-chip--manual" data-provider="netflix"
|
||||
data-type="link" data-link="https://help.netflix.com/es/node/100624">Netflix</button>
|
||||
<button class="net-chip net-chip--manual" data-provider="twitch"
|
||||
data-type="link" data-link="https://www.twitch.tv/user/delete-account">Twitch</button>
|
||||
<button class="net-chip net-chip--manual" data-provider="pinterest"
|
||||
data-type="link" data-link="https://help.pinterest.com/es/article/deactivate-or-close-your-account">Pinterest</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer-row">
|
||||
<button class="btn primary btn--lg" id="gdpr-send" disabled>
|
||||
Enviar solicitudes GDPR
|
||||
</button>
|
||||
<p class="form-note">
|
||||
No guardamos tu correo. Las cartas se envían directamente a los DPOs de cada plataforma.<br>
|
||||
Las redes en verde requieren acción manual: abrimos el enlace oficial por ti.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="gdpr-results" class="results-wrap" hidden></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════════════════════════════════
|
||||
PANEL DE ACCIONES COMPLETO (checklist)
|
||||
════════════════════════════════════════════ -->
|
||||
<section class="panel">
|
||||
<div class="container">
|
||||
<h2>Panel de acciones completo</h2>
|
||||
<p class="section-desc">
|
||||
Marca cada acción completada para seguir tu progreso. Todos los enlaces apuntan a páginas oficiales.
|
||||
Recuerda: <strong>descarga primero tus datos</strong> antes de eliminar nada.
|
||||
</p>
|
||||
|
||||
<div class="progress-bar"><div class="progress-fill" id="progress-fill" style="width:0%"></div></div>
|
||||
<div class="progress-label" style="margin-bottom:2rem"><span id="progress-text">0 acciones completadas</span></div>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<!-- ── CUENTAS BASE ── -->
|
||||
|
|
@ -306,7 +329,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── INDEXADORES Y BUSCADORES ── -->
|
||||
<!-- ── BUSCADORES ── -->
|
||||
<div class="group">
|
||||
<h3>Buscadores e indexadores</h3>
|
||||
|
||||
|
|
@ -366,21 +389,21 @@
|
|||
</div>
|
||||
|
||||
<div class="item">
|
||||
<label><input type="checkbox" class="progress-cb"> Have I Been Pwned — Comprueba brechas</label>
|
||||
<label><input type="checkbox" class="progress-cb"> Have I Been Pwned</label>
|
||||
<div class="actions">
|
||||
<a href="https://haveibeenpwned.com/" target="_blank" rel="noopener">Verificar email</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<label><input type="checkbox" class="progress-cb"> DeleteMe (servicio de pago, referencia)</label>
|
||||
<label><input type="checkbox" class="progress-cb"> DeleteMe (referencia)</label>
|
||||
<div class="actions">
|
||||
<a href="https://joindeleteme.com/sites-we-remove-from/" target="_blank" rel="noopener">Lista de brokers cubiertos</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<label><input type="checkbox" class="progress-cb"> AEPD — Reclamación si no cumplen</label>
|
||||
<label><input type="checkbox" class="progress-cb"> AEPD — Reclamación</label>
|
||||
<div class="actions">
|
||||
<a href="https://sedeagpd.gob.es/sede-electronica-web/" target="_blank" rel="noopener">Sede AEPD</a>
|
||||
</div>
|
||||
|
|
@ -398,33 +421,30 @@
|
|||
<div class="container">
|
||||
<h2>Cómo funciona</h2>
|
||||
<p>
|
||||
RESETEA.NET no automatiza accesos ni elimina datos por ti.
|
||||
Centraliza los <strong>enlaces oficiales</strong>, proporciona <strong>plantillas legales GDPR</strong>
|
||||
y explica tus derechos para que ejecutes las acciones con pleno control y conocimiento.
|
||||
RESETEA.NET centraliza los <strong>enlaces oficiales</strong> y envía
|
||||
<strong>cartas GDPR</strong> directamente a los DPOs de cada plataforma.
|
||||
Tus datos nunca salen de tu dispositivo hacia nuestros servidores.
|
||||
</p>
|
||||
<div class="grid" style="margin-top:1.5rem;">
|
||||
<div class="group">
|
||||
<h3>Paso 1 — Descarga tus datos</h3>
|
||||
<p style="font-size:0.85rem;color:var(--muted);">
|
||||
Antes de borrar nada, usa el enlace "Descarga datos" de cada plataforma.
|
||||
Así conservas fotos, conversaciones e historial que quieras guardar.
|
||||
Esto activa también el <strong>derecho a la portabilidad (Art. 20 RGPD)</strong>.
|
||||
Activa el <strong>derecho a la portabilidad (Art. 20 RGPD)</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Paso 2 — Envía la carta GDPR</h3>
|
||||
<p style="font-size:0.85rem;color:var(--muted);">
|
||||
Genera tu carta de supresión personalizada en la sección
|
||||
<a href="plantillas.html">Plantillas legales</a>.
|
||||
Las plataformas tienen <strong>30 días</strong> para responder y ejecutar el borrado.
|
||||
Introduce tu correo, selecciona las redes y enviamos la carta por ti.
|
||||
Las plataformas tienen <strong>30 días</strong> para ejecutar el borrado.
|
||||
</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Paso 3 — Elimina la cuenta</h3>
|
||||
<p style="font-size:0.85rem;color:var(--muted);">
|
||||
Usa el enlace oficial de eliminación de cada plataforma.
|
||||
Muchas tienen un periodo de gracia (7–30 días) durante el cual puedes cancelar.
|
||||
Después el borrado es definitivo.
|
||||
Usa el enlace oficial de eliminación. Muchas tienen un periodo de gracia
|
||||
de 7–30 días. Después el borrado es definitivo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -438,9 +458,9 @@
|
|||
<div class="container">
|
||||
<h2>Plantillas legales</h2>
|
||||
<p>
|
||||
Cartas pre-redactadas para ejercer el <strong>derecho de supresión (Art. 17)</strong>,
|
||||
el <strong>derecho de acceso (Art. 15)</strong>, la <strong>portabilidad (Art. 20)</strong>
|
||||
y la <strong>oposición al perfilado (Art. 21)</strong>.
|
||||
Cartas pre-redactadas para el <strong>derecho de supresión (Art. 17)</strong>,
|
||||
<strong>acceso (Art. 15)</strong>, <strong>portabilidad (Art. 20)</strong>
|
||||
y <strong>oposición al perfilado (Art. 21)</strong>.
|
||||
</p>
|
||||
<p style="margin-top:1rem;">
|
||||
El generador funciona íntegramente en tu navegador: tus datos nunca salen de tu dispositivo.
|
||||
|
|
@ -461,8 +481,6 @@
|
|||
<p>
|
||||
Esta herramienta no ofrece asesoramiento legal. Los enlaces y plantillas son orientativos.
|
||||
El éxito de las solicitudes depende de cada plataforma y de la legislación aplicable.
|
||||
Si tus datos son especialmente sensibles o tienes dudas sobre tu caso,
|
||||
consulta con un profesional del derecho especializado en privacidad.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -471,22 +489,106 @@
|
|||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>
|
||||
RESETEA.NET · Software estático · Sin tracking · Sin cookies · Sin almacenamiento de datos
|
||||
</p>
|
||||
<p>RESETEA.NET · Software estático · Sin tracking · Sin cookies · Sin almacenamiento de datos</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
// Contador de progreso
|
||||
const cbs = document.querySelectorAll('.progress-cb');
|
||||
const fill = document.getElementById('progress-fill');
|
||||
|
||||
/* ── Chips de redes ─────────────────────────── */
|
||||
const chips = document.querySelectorAll('.net-chip');
|
||||
const sendBtn = document.getElementById('gdpr-send');
|
||||
const emailIn = document.getElementById('gdpr-email');
|
||||
const results = document.getElementById('gdpr-results');
|
||||
|
||||
chips.forEach(chip => {
|
||||
chip.addEventListener('click', () => {
|
||||
chip.classList.toggle('selected');
|
||||
syncBtn();
|
||||
});
|
||||
});
|
||||
emailIn.addEventListener('input', syncBtn);
|
||||
|
||||
function validEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }
|
||||
|
||||
function syncBtn() {
|
||||
const ok = validEmail(emailIn.value) &&
|
||||
[...chips].some(c => c.classList.contains('selected'));
|
||||
sendBtn.disabled = !ok;
|
||||
}
|
||||
|
||||
/* ── Envío ──────────────────────────────────── */
|
||||
sendBtn.addEventListener('click', async () => {
|
||||
const email = emailIn.value.trim();
|
||||
const selected = [...chips].filter(c => c.classList.contains('selected'));
|
||||
|
||||
sendBtn.disabled = true;
|
||||
sendBtn.textContent = 'Enviando…';
|
||||
results.hidden = false;
|
||||
results.innerHTML = '';
|
||||
|
||||
for (const chip of selected) {
|
||||
const provider = chip.dataset.provider;
|
||||
const type = chip.dataset.type;
|
||||
const name = chip.textContent.trim();
|
||||
|
||||
if (type === 'link') {
|
||||
window.open(chip.dataset.link, '_blank', 'noopener noreferrer');
|
||||
addResult(name, 'manual', 'Enlace oficial abierto — completa la eliminación manualmente.');
|
||||
continue;
|
||||
}
|
||||
|
||||
if (type === 'form') {
|
||||
window.open(chip.dataset.formUrl, '_blank', 'noopener noreferrer');
|
||||
addResult(name, 'form', 'Formulario oficial abierto — rellénalo para completar la solicitud.');
|
||||
continue;
|
||||
}
|
||||
|
||||
/* type === 'api' */
|
||||
try {
|
||||
const res = await fetch('/api/erase', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ provider, email })
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (data.status === 'ok') {
|
||||
addResult(name, 'ok', `Carta GDPR enviada correctamente. Ref: <code>${data.reference}</code>`);
|
||||
} else if (data.status === 'use_form') {
|
||||
window.open(data.formUrl, '_blank', 'noopener noreferrer');
|
||||
addResult(name, 'form', 'Este proveedor requiere formulario oficial (abierto en nueva pestaña).');
|
||||
} else {
|
||||
addResult(name, 'error', data.error || 'Error desconocido.');
|
||||
}
|
||||
} catch {
|
||||
addResult(name, 'error', 'Error de red. Inténtalo de nuevo o usa el formulario oficial.');
|
||||
}
|
||||
}
|
||||
|
||||
sendBtn.textContent = 'Solicitudes enviadas ✓';
|
||||
setTimeout(() => {
|
||||
sendBtn.textContent = 'Enviar solicitudes GDPR';
|
||||
syncBtn();
|
||||
}, 4000);
|
||||
});
|
||||
|
||||
function addResult(name, type, msg) {
|
||||
const div = document.createElement('div');
|
||||
div.className = `result-item result-${type}`;
|
||||
div.innerHTML = `<strong>${name}</strong> — ${msg}`;
|
||||
results.appendChild(div);
|
||||
}
|
||||
|
||||
/* ── Progreso checklist ─────────────────────── */
|
||||
const cbs = document.querySelectorAll('.progress-cb');
|
||||
const fill = document.getElementById('progress-fill');
|
||||
const label = document.getElementById('progress-text');
|
||||
|
||||
function updateProgress() {
|
||||
const done = [...cbs].filter(c => c.checked).length;
|
||||
const pct = Math.round((done / cbs.length) * 100);
|
||||
const pct = Math.round((done / cbs.length) * 100);
|
||||
fill.style.width = pct + '%';
|
||||
label.textContent = done + ' / ' + cbs.length + ' acciones completadas (' + pct + '%)';
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue