diff --git a/public/index.css b/public/index.css index 7fdb50c..4deb36c 100644 --- a/public/index.css +++ b/public/index.css @@ -31,6 +31,9 @@ --sage: #4a7c59; /* verde salvia */ --sage-lt: #e8f2eb; /* verde salvia muy claro */ + --lime: #96c21a; /* verde lima */ + --lime-lt: #f4fae0; /* verde lima muy claro */ + --shadow-sm: 0 1px 3px rgba(26,23,20,0.08), 0 1px 2px rgba(26,23,20,0.06); --shadow-md: 0 4px 12px rgba(26,23,20,0.10), 0 2px 4px rgba(26,23,20,0.06); --shadow-lg: 0 8px 30px rgba(26,23,20,0.12), 0 4px 8px rgba(26,23,20,0.06); @@ -558,6 +561,10 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } @media (max-width: 720px) { .hero-inner { grid-template-columns: 1fr; } .grid { grid-template-columns: 1fr; } + .main-title { font-size: 2.4rem; } + .main-tagline { font-size: 1rem; } + .email-input { font-size: 1rem; } + .btn--lg { width: 100%; justify-content: center; } .topbar-inner { flex-direction: column; @@ -574,6 +581,276 @@ a:hover { color: var(--caoba-mid); text-decoration: underline; } h1 { font-size: 1.85rem; } } +/* ═══════════════════════════════════════════ + HERO LANDING — título + lema + nav buttons +═══════════════════════════════════════════ */ +.hero-landing { + padding: 3.5rem 0 2.5rem; + background: var(--bg); + text-align: center; +} + +.hero-landing-inner { + display: flex; + flex-direction: column; + align-items: center; + gap: 0; +} + +.main-title { + font-family: 'Recion', 'Georgia', serif; + font-size: clamp(2.8rem, 7vw, 5rem); + color: var(--text); + letter-spacing: 0.02em; + line-height: 1.1; + margin-bottom: 0.6rem; +} + +.main-tagline { + font-family: 'Recion', 'Georgia', serif; + font-size: clamp(1.05rem, 2.5vw, 1.5rem); + color: var(--lime); + letter-spacing: 0.06em; + font-weight: normal; + margin-bottom: 2.2rem; +} + +.landing-nav { + display: flex; + justify-content: center; + gap: 0.65rem; + flex-wrap: wrap; +} + +.landing-nav-btn { + display: inline-flex; + align-items: center; + padding: 0.6rem 1.2rem; + border-radius: 10px; + font-size: 0.88rem; + font-weight: 600; + letter-spacing: 0.02em; + color: var(--text); + background: var(--surface); + border: 1px solid var(--border); + box-shadow: var(--btn-shadow); + text-decoration: none; + transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease; + user-select: none; +} + +.landing-nav-btn:hover { + background: var(--surface2); + border-color: var(--border-dark); + box-shadow: var(--btn-shadow-hover); + transform: translateY(-2px); + text-decoration: none; + color: var(--text); +} + +.landing-nav-btn:active { + box-shadow: var(--btn-shadow-active); + transform: translateY(3px); +} + +.landing-nav-btn--highlight { + background: var(--caoba); + color: #fff; + border-color: #5c2d1e; + box-shadow: var(--caoba-shadow); +} +.landing-nav-btn--highlight:hover { + background: var(--caoba-mid); + border-color: #4a2318; + box-shadow: var(--caoba-shadow-hover); + color: #fff; +} + +/* ═══════════════════════════════════════════ + SECCIÓN FORMULARIO — email + redes +═══════════════════════════════════════════ */ +.erase-form-section { + padding: 3rem 0 4rem; + background: var(--surface2); + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} + +.erase-form-wrap { + max-width: 780px; + margin: 0 auto; +} + +.form-header { + text-align: center; + margin-bottom: 1.8rem; +} +.form-header h2 { margin-bottom: 0.4rem; } +.form-header p { color: var(--muted); font-size: 0.95rem; } + +.email-row { + display: flex; + justify-content: center; + margin-bottom: 2rem; +} + +.email-input { + width: 100%; + max-width: 500px; + padding: 0.9rem 1.2rem; + font-size: 1.05rem; + border: 2px solid var(--border); + border-radius: 12px; + background: var(--surface); + color: var(--text); + outline: none; + box-shadow: var(--shadow-sm); + transition: border-color 150ms ease, box-shadow 150ms ease; + font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; +} +.email-input:focus { + border-color: var(--caoba); + box-shadow: 0 0 0 3px rgba(123,63,46,0.12); +} +.email-input::placeholder { color: var(--subtle); } + +.networks-label { + font-size: 0.9rem; + font-weight: 700; + color: var(--text); + margin-bottom: 0.9rem; + letter-spacing: 0.02em; +} + +.networks-section { margin-bottom: 2rem; } + +.networks-sublabel { + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--muted); + margin-bottom: 0.55rem; + margin-top: 1.2rem; +} +.networks-sublabel:first-child { margin-top: 0; } +.networks-sublabel--manual { color: var(--sage); } + +.networks-grid { + display: flex; + flex-wrap: wrap; + gap: 0.45rem; + margin-bottom: 0.25rem; +} + +/* Chip base */ +.net-chip { + padding: 0.42rem 0.9rem; + border-radius: 8px; + font-size: 0.82rem; + font-weight: 600; + letter-spacing: 0.02em; + cursor: pointer; + background: var(--surface); + color: var(--text); + border: 1px solid var(--border); + box-shadow: 0 2px 0 0 var(--border-dark); + transition: all 120ms ease; + user-select: none; + line-height: 1; +} +.net-chip:hover { + border-color: var(--caoba); + color: var(--caoba); + background: var(--caoba-lt); + transform: translateY(-1px); + box-shadow: 0 3px 0 0 var(--border-dark); +} +.net-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--border-dark); } + +.net-chip.selected { + background: var(--caoba); + color: #fff; + border-color: #5c2d1e; + box-shadow: 0 2px 0 0 #5c2d1e; +} +.net-chip.selected:hover { + background: var(--caoba-mid); + color: #fff; + border-color: #4a2318; +} + +/* Chips manuales (verde) */ +.net-chip--manual { + background: var(--sage-lt); + color: var(--sage); + border-color: #c0d9c8; + box-shadow: 0 2px 0 0 #c0d9c8; +} +.net-chip--manual:hover { + background: #d6edde; + border-color: var(--sage); + color: var(--sage); +} +.net-chip--manual.selected { + background: var(--sage); + color: #fff; + border-color: #3a6347; + box-shadow: 0 2px 0 0 #3a6347; +} +.net-chip--manual.selected:hover { + background: #3f6e50; + color: #fff; +} + +/* Footer del form */ +.form-footer-row { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.8rem; +} + +.btn--lg { + padding: 0.85rem 2rem; + font-size: 1rem; +} + +.form-note { + font-size: 0.77rem; + color: var(--subtle); + text-align: center; + max-width: 48ch; + line-height: 1.55; +} + +/* Resultados */ +.results-wrap { + margin-top: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.45rem; +} + +.result-item { + padding: 0.6rem 0.95rem; + border-radius: 8px; + font-size: 0.84rem; + line-height: 1.4; +} +.result-item code { + font-family: 'Courier New', monospace; + font-size: 0.82em; + background: rgba(0,0,0,0.06); + padding: 0.1em 0.3em; + border-radius: 3px; +} + +.result-ok { background: var(--sage-lt); color: var(--sage); border: 1px solid #c0d9c8; } +.result-form, +.result-manual { background: var(--caoba-lt); color: var(--caoba); border: 1px solid #e0c4b8; } +.result-error { background: #fef2f2; color: #c0392b; border: 1px solid #f5c6c6; } + /* ═══════════════════════════════════════════ UTILIDADES ═══════════════════════════════════════════ */ diff --git a/public/index.html b/public/index.html index c951a13..42e7ab9 100644 --- a/public/index.html +++ b/public/index.html @@ -5,41 +5,8 @@ RESETEA.NET · Reduce tu huella digital + 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."> - @@ -54,65 +21,121 @@
-
-
-
-

Reduce tu huella digital.
Sin entregar tus datos.

-

- RESETEA.NET centraliza los enlaces oficiales de eliminación de las - principales plataformas junto con plantillas GDPR listas para copiar. - Tú ejecutas cada acción: nosotros no actuamos en tu nombre. -

-
- Abrir panel - Generar carta GDPR -
-
- Principio clave:
- No guardamos información personal, no pedimos contraseñas - y no actuamos en tu nombre. Tú ejecutas cada acción. -

- Orden recomendado: (1) descarga tus datos, (2) envía carta GDPR, (3) elimina la cuenta, (4) desindexar en buscadores. -
-
-
-
-
0
Datos guardados
-
100%
Acciones oficiales
-
∞
Control del usuario
-
-
    -
  • 1 Elige qué borrar
    • -
  • 2 Abre el enlace oficial
    • -
  • 3 Confirma manualmente
    • -
-
-
0 acciones completadas
+ +
+
+

Reduce tu huella digital.

+

Privacidad sin custodios.

+
+ Tipos de información + Concienciación + Egosurfing + Plantillas GDPR
-
+
-

Panel de acciones

+
+ +
+

Introduce tu correo electrónico

+

Selecciona las redes y enviamos la carta GDPR por ti. Sin guardar nada.

+
+ + + +

Selecciona las redes que quieres eliminar:

+ +
+

Envío automático de carta GDPR

+
+ + + + + + + + + + + + +
+ +

Acceso rápido — acción manual

+
+ + + + + + + +
+
+ +
+ +

+ No guardamos tu correo. Las cartas se envían directamente a los DPOs de cada plataforma.
+ Las redes en verde requieren acción manual: abrimos el enlace oficial por ti. +

+
+ + + +
+
+
+ + +
+
+

Panel de acciones completo

Marca cada acción completada para seguir tu progreso. Todos los enlaces apuntan a páginas oficiales. Recuerda: descarga primero tus datos antes de eliminar nada.

+
+
0 acciones completadas
+
@@ -306,7 +329,7 @@
- +

Buscadores e indexadores

@@ -366,21 +389,21 @@
- +
Verificar email
- +
Lista de brokers cubiertos
- +
Sede AEPD
@@ -398,33 +421,30 @@

Cómo funciona

- RESETEA.NET no automatiza accesos ni elimina datos por ti. - Centraliza los enlaces oficiales, proporciona plantillas legales GDPR - y explica tus derechos para que ejecutes las acciones con pleno control y conocimiento. + RESETEA.NET centraliza los enlaces oficiales y envía + cartas GDPR directamente a los DPOs de cada plataforma. + Tus datos nunca salen de tu dispositivo hacia nuestros servidores.

Paso 1 — Descarga tus datos

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 derecho a la portabilidad (Art. 20 RGPD). + Activa el derecho a la portabilidad (Art. 20 RGPD).

Paso 2 — Envía la carta GDPR

- Genera tu carta de supresión personalizada en la sección - Plantillas legales. - Las plataformas tienen 30 días para responder y ejecutar el borrado. + Introduce tu correo, selecciona las redes y enviamos la carta por ti. + Las plataformas tienen 30 días para ejecutar el borrado.

Paso 3 — Elimina la cuenta

- 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.

@@ -438,9 +458,9 @@

Plantillas legales

- Cartas pre-redactadas para ejercer el derecho de supresión (Art. 17), - el derecho de acceso (Art. 15), la portabilidad (Art. 20) - y la oposición al perfilado (Art. 21). + Cartas pre-redactadas para el derecho de supresión (Art. 17), + acceso (Art. 15), portabilidad (Art. 20) + y oposición al perfilado (Art. 21).

El generador funciona íntegramente en tu navegador: tus datos nunca salen de tu dispositivo. @@ -461,8 +481,6 @@

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.

@@ -471,22 +489,106 @@
-

- RESETEA.NET · Software estático · Sin tracking · Sin cookies · Sin almacenamiento de datos -

+

RESETEA.NET · Software estático · Sin tracking · Sin cookies · Sin almacenamiento de datos