feat: comunidad.html, slider 5 diapositivas, botón Derechos y fondos en study cards
- Nuevo comunidad.html con sección de participación en el proyecto y 14 alternativas de software libre organizadas por categoría (navegadores, buscadores, correo, mensajería, almacenamiento, redes sociales, VPN/DNS) - Slider principal ampliado de 3 a 5 diapositivas: slides 4 (jardín japonés) y 5 (bosque aéreo) con layout split texto+botón; slide 2 reemplazada con foto Times Square aérea - CTAs ácido-verde en slides 1-3 enlazando a salud-digital#ciencia, egosurfing y salud-digital#derechos - Sección confirm-section sustituida por botón grande "Derechos" que despliega 8 botones verbales (Conocer/Corregir/Borrar/Limitar/Exportar/Oponerse/Decidir/Reclamar) con right-cards RGPD expandibles - Fondos fotográficos con overlay oscuro en las 4 study cards (estudio-brain, atención, sueño, datos) - 7 fotos nuevas descargadas en img/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hacklab
parent
467820b8b3
commit
3ebcc3e405
16 changed files with 2600 additions and 547 deletions
|
|
@ -3,13 +3,13 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>RESETEA.NET · Egosurfing</title>
|
||||
<meta name="description" content="Busca tu nombre, alias, email o teléfono en la web y descubre dónde aparece tu información personal.">
|
||||
<title>RESETEA.NET · Egosurfing y Tipos de información</title>
|
||||
<meta name="description" content="Busca tu nombre, alias, email o teléfono en la web, descubre dónde aparece tu información personal y aprende qué tipos de datos están expuestos.">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<style>
|
||||
/* ── Egosurfing-specific ── */
|
||||
/* ── Egosurfing hero ── */
|
||||
.ego-hero {
|
||||
padding: 3rem 0 2.5rem;
|
||||
padding: 3rem 0 2rem;
|
||||
background: var(--bg);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
|
|
@ -25,13 +25,9 @@
|
|||
}
|
||||
|
||||
/* ── Barra de búsqueda ── */
|
||||
.search-wrap {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.search-wrap { max-width: 680px; margin: 0 auto; }
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
display: flex; gap: 0;
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 14px;
|
||||
|
|
@ -44,191 +40,151 @@
|
|||
box-shadow: 0 0 0 3px rgba(123,63,46,0.12), var(--shadow-md);
|
||||
}
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 1rem 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
flex: 1; border: none; outline: none;
|
||||
padding: 1rem 1.2rem; font-size: 1.1rem;
|
||||
background: transparent; color: var(--text);
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
}
|
||||
.search-input::placeholder { color: var(--subtle); }
|
||||
.search-btn {
|
||||
background: var(--caoba);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0 1.6rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 140ms ease;
|
||||
background: var(--caoba); color: #fff;
|
||||
border: none; padding: 0 1.6rem;
|
||||
font-size: 0.95rem; font-weight: 600;
|
||||
cursor: pointer; transition: background 140ms ease;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.02em; white-space: nowrap;
|
||||
}
|
||||
.search-btn:hover { background: var(--caoba-mid); }
|
||||
.search-btn:disabled { background: var(--border-dark); cursor: not-allowed; }
|
||||
|
||||
/* ── Modos de búsqueda ── */
|
||||
.search-modes {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.9rem;
|
||||
flex-wrap: wrap;
|
||||
display: flex; justify-content: center;
|
||||
gap: 0.4rem; margin-top: 0.9rem; flex-wrap: wrap;
|
||||
}
|
||||
.mode-btn {
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
padding: 0.3rem 0.8rem; border-radius: 6px;
|
||||
font-size: 0.8rem; font-weight: 600; cursor: pointer;
|
||||
background: var(--surface); color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
transition: all 120ms ease;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
}
|
||||
.mode-btn.active, .mode-btn:hover {
|
||||
background: var(--caoba-lt);
|
||||
color: var(--caoba);
|
||||
border-color: var(--caoba);
|
||||
background: var(--caoba-lt); color: var(--caoba); border-color: var(--caoba);
|
||||
}
|
||||
.mode-hint {
|
||||
font-size: 0.78rem;
|
||||
color: var(--subtle);
|
||||
margin-top: 0.6rem;
|
||||
text-align: center;
|
||||
font-size: 0.78rem; color: var(--subtle);
|
||||
margin-top: 0.6rem; text-align: center;
|
||||
}
|
||||
|
||||
/* ── Botones de panel debajo del buscador ── */
|
||||
.panel-toggle-row {
|
||||
display: flex; justify-content: center;
|
||||
gap: 0.7rem; margin-top: 1.4rem; flex-wrap: wrap;
|
||||
}
|
||||
.panel-toggle-btn {
|
||||
display: inline-flex; align-items: center; gap: 0.5rem;
|
||||
padding: 0.55rem 1.3rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.88rem; font-weight: 600;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
cursor: pointer;
|
||||
border: 1.5px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--muted);
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
.panel-toggle-btn:hover {
|
||||
border-color: var(--caoba); color: var(--caoba); background: var(--caoba-lt);
|
||||
}
|
||||
.panel-toggle-btn.active {
|
||||
border-color: var(--caoba); color: var(--caoba);
|
||||
background: var(--caoba-lt);
|
||||
box-shadow: 0 2px 0 0 var(--caoba);
|
||||
}
|
||||
.panel-toggle-btn .ptb-arrow {
|
||||
display: inline-block; transition: transform 200ms ease;
|
||||
}
|
||||
.panel-toggle-btn.active .ptb-arrow { transform: rotate(180deg); }
|
||||
|
||||
/* ── Paneles colapsables ── */
|
||||
.collapsible-panel {
|
||||
overflow: hidden;
|
||||
transition: max-height 350ms ease, opacity 300ms ease;
|
||||
}
|
||||
.collapsible-panel[hidden] { display: none; }
|
||||
|
||||
/* ── Resultados ── */
|
||||
.results-section {
|
||||
padding: 2.5rem 0 3rem;
|
||||
background: var(--surface2);
|
||||
}
|
||||
.results-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex; align-items: baseline;
|
||||
gap: 1rem; margin-bottom: 1.5rem;
|
||||
}
|
||||
.results-header h2 { margin-bottom: 0; }
|
||||
.results-query {
|
||||
font-size: 0.88rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.88rem; color: var(--muted);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 5px;
|
||||
padding: 0.2rem 0.6rem; border-radius: 5px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 1.3rem 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-radius: 14px; padding: 1.3rem 1.5rem;
|
||||
margin-bottom: 1rem; box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow 180ms ease, transform 180ms ease;
|
||||
}
|
||||
.result-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.result-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
|
||||
.result-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-bottom: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
display: flex; align-items: center;
|
||||
gap: 0.6rem; margin-bottom: 0.4rem; flex-wrap: wrap;
|
||||
}
|
||||
.result-domain {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 0.18rem 0.55rem;
|
||||
border-radius: 5px;
|
||||
background: var(--surface2);
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.result-engine {
|
||||
font-size: 0.7rem;
|
||||
color: var(--subtle);
|
||||
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
|
||||
padding: 0.18rem 0.55rem; border-radius: 5px;
|
||||
background: var(--surface2); color: var(--muted);
|
||||
border: 1px solid var(--border); text-transform: lowercase;
|
||||
}
|
||||
.result-engine { font-size: 0.7rem; color: var(--subtle); }
|
||||
.result-title {
|
||||
font-family: 'Recion', 'Georgia', serif;
|
||||
font-size: 1.1rem;
|
||||
color: var(--caoba);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 0.35rem;
|
||||
line-height: 1.3;
|
||||
font-size: 1.1rem; color: var(--caoba);
|
||||
text-decoration: none; display: block;
|
||||
margin-bottom: 0.35rem; line-height: 1.3;
|
||||
}
|
||||
.result-title:hover { text-decoration: underline; color: var(--caoba-mid); }
|
||||
.result-url {
|
||||
font-size: 0.74rem;
|
||||
color: var(--sage);
|
||||
word-break: break-all;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
font-size: 0.74rem; color: var(--sage);
|
||||
word-break: break-all; margin-bottom: 0.5rem; display: block;
|
||||
}
|
||||
.result-snippet {
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
.result-actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.9rem; color: var(--muted);
|
||||
line-height: 1.55; margin-bottom: 0.9rem;
|
||||
}
|
||||
.result-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
|
||||
.result-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.28rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 120ms ease;
|
||||
display: inline-flex; align-items: center;
|
||||
padding: 0.28rem 0.75rem; border-radius: 6px;
|
||||
font-size: 0.75rem; font-weight: 600;
|
||||
text-decoration: none; border: 1px solid transparent;
|
||||
cursor: pointer; transition: all 120ms ease;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
background: none;
|
||||
}
|
||||
.result-action--rtbf {
|
||||
background: var(--caoba-lt);
|
||||
color: var(--caoba);
|
||||
border-color: #e0c4b8;
|
||||
}
|
||||
.result-action--rtbf { background: var(--caoba-lt); color: var(--caoba); border-color: #e0c4b8; }
|
||||
.result-action--rtbf:hover { background: #e8cfc6; border-color: var(--caoba); }
|
||||
.result-action--gdpr {
|
||||
background: var(--sage-lt);
|
||||
color: var(--sage);
|
||||
border-color: #c0d9c8;
|
||||
}
|
||||
.result-action--gdpr { background: var(--sage-lt); color: var(--sage); border-color: #c0d9c8; }
|
||||
.result-action--gdpr:hover { background: #d2eeda; border-color: var(--sage); }
|
||||
.result-action--visit {
|
||||
background: var(--surface2);
|
||||
color: var(--muted);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.result-action--visit { background: var(--surface2); color: var(--muted); border-color: var(--border); }
|
||||
.result-action--visit:hover { background: var(--border); color: var(--text); }
|
||||
|
||||
/* ── Estado vacío / carga / error ── */
|
||||
.search-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
.search-state .state-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
.search-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
|
||||
.search-state .state-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }
|
||||
.search-state h3 { color: var(--text); margin-bottom: 0.4rem; }
|
||||
.spinner {
|
||||
width: 36px; height: 36px;
|
||||
|
|
@ -243,53 +199,38 @@
|
|||
/* ── OSINT Dorking panel ── */
|
||||
.dork-section { padding: 2.5rem 0 3rem; }
|
||||
.dork-tip {
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem; color: var(--muted);
|
||||
background: var(--caoba-lt);
|
||||
border-left: 3px solid var(--caoba);
|
||||
padding: 0.55rem 1rem;
|
||||
border-radius: 0 8px 8px 0;
|
||||
margin-top: 0.9rem;
|
||||
border-radius: 0 8px 8px 0; margin-top: 0.9rem;
|
||||
}
|
||||
/* Tabs de categoría */
|
||||
.dork-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
display: flex; flex-wrap: wrap; gap: 0.3rem;
|
||||
border-bottom: 2px solid var(--border);
|
||||
padding-bottom: 0;
|
||||
margin: 1.2rem 0 0;
|
||||
padding-bottom: 0; margin: 1.2rem 0 0;
|
||||
}
|
||||
.dtab {
|
||||
padding: 0.45rem 0.85rem;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
border: 1px solid transparent; border-bottom: none;
|
||||
border-radius: 7px 7px 0 0;
|
||||
background: none;
|
||||
color: var(--muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
background: none; color: var(--muted);
|
||||
font-size: 0.75rem; font-weight: 600; cursor: pointer;
|
||||
transition: all 120ms ease;
|
||||
font-family: system-ui, sans-serif;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
white-space: nowrap; position: relative; bottom: -2px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
.dtab:hover { background: var(--surface2); color: var(--text); }
|
||||
.dtab.active {
|
||||
background: var(--surface2);
|
||||
border-color: var(--border);
|
||||
border-bottom-color: var(--surface2);
|
||||
color: var(--caoba);
|
||||
background: var(--surface2); border-color: var(--border);
|
||||
border-bottom-color: var(--surface2); color: var(--caoba);
|
||||
}
|
||||
/* Grid de dorks */
|
||||
.dork-pane { display: none; padding-top: 1.1rem; }
|
||||
.dork-pane.active { display: block; }
|
||||
.dork-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 0.55rem;
|
||||
}
|
||||
.dork-item {
|
||||
|
|
@ -298,57 +239,38 @@
|
|||
grid-template-rows: auto auto;
|
||||
gap: 0.2rem 0.5rem;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 9px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 9px; box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow 150ms ease, border-color 150ms ease;
|
||||
}
|
||||
.dork-item:hover { box-shadow: var(--shadow-md); border-color: var(--border-dark); }
|
||||
.dork-item-desc {
|
||||
font-size: 0.76rem;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
align-self: center;
|
||||
font-size: 0.76rem; color: var(--text); font-weight: 600;
|
||||
grid-column: 1; grid-row: 1; align-self: center;
|
||||
}
|
||||
.dork-item-query {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.72rem;
|
||||
color: var(--caoba);
|
||||
background: var(--caoba-lt);
|
||||
padding: 0.12rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
display: block;
|
||||
font-family: 'Courier New', monospace; font-size: 0.72rem;
|
||||
color: var(--caoba); background: var(--caoba-lt);
|
||||
padding: 0.12rem 0.4rem; border-radius: 4px;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
grid-column: 1; grid-row: 2; display: block;
|
||||
}
|
||||
.dork-run-btn {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
align-self: center;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 6px;
|
||||
grid-column: 2; grid-row: 1 / 3; align-self: center;
|
||||
padding: 0.3rem 0.7rem; border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface2);
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 120ms ease;
|
||||
background: var(--surface2); color: var(--muted);
|
||||
font-size: 0.72rem; font-weight: 600; cursor: pointer;
|
||||
white-space: nowrap; transition: all 120ms ease;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.dork-run-btn:hover {
|
||||
background: var(--caoba-lt);
|
||||
border-color: var(--caoba);
|
||||
color: var(--caoba);
|
||||
background: var(--caoba-lt); border-color: var(--caoba); color: var(--caoba);
|
||||
}
|
||||
|
||||
/* ── Tipos de información styles ── */
|
||||
.tipos-panel { padding: 2rem 0 2.5rem; border-top: 1px solid var(--border); }
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.dork-items { grid-template-columns: 1fr; }
|
||||
.dork-tabs { gap: 0.2rem; }
|
||||
|
|
@ -367,12 +289,10 @@
|
|||
<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" href="concienciacion.html">Concienciación</a>
|
||||
<a class="landing-nav-btn landing-nav-btn--highlight" 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>
|
||||
<a class="landing-nav-btn" href="comunidad.html">Comunidad</a>
|
||||
<a class="landing-nav-btn" href="salud-digital.html">Salud digital</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -400,22 +320,239 @@
|
|||
<button class="mode-btn" data-mode="libre">Búsqueda libre</button>
|
||||
</div>
|
||||
<p class="mode-hint" id="mode-hint">Se busca entre comillas para coincidencia exacta.</p>
|
||||
|
||||
<!-- Botones de panel -->
|
||||
<div class="panel-toggle-row">
|
||||
<button class="panel-toggle-btn" id="btn-tipos" type="button" aria-expanded="false" aria-controls="panel-tipos">
|
||||
Tipos de información <span class="ptb-arrow">▾</span>
|
||||
</button>
|
||||
<button class="panel-toggle-btn" id="btn-avanzada" type="button" aria-expanded="false" aria-controls="panel-avanzada">
|
||||
Búsqueda avanzada <span class="ptb-arrow">▾</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══ RESULTADOS ════════════════════════════════════════════════ -->
|
||||
<section class="results-section" id="results-section" hidden>
|
||||
<!-- ══ PANEL: TIPOS DE INFORMACIÓN ══════════════════════════════ -->
|
||||
<div id="panel-tipos" hidden>
|
||||
<section class="tipos-panel info">
|
||||
<div class="container">
|
||||
|
||||
<section class="hero">
|
||||
<div class="container hero-inner" style="padding:0;">
|
||||
<div class="hero-text">
|
||||
<h1>Tipos de información personal<br>y dónde se te "escapa".</h1>
|
||||
<p>
|
||||
Antes de borrar, hay que entender qué datos existen y cómo se conectan.
|
||||
Este mapa te ayuda a identificar tu exposición: qué datos son "identificadores",
|
||||
cuáles son "atributos", cuáles son "comportamiento" y cómo terminan en compañías,
|
||||
publicidad, brokers y registros públicos.
|
||||
</p>
|
||||
<div class="notice" style="margin-top:1rem;">
|
||||
<strong>Enfoque:</strong> Identifica categorías, fuentes y vínculos, y luego actúa por prioridad.
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-card" aria-label="Resumen práctico">
|
||||
<div class="stats">
|
||||
<div class="stat"><div class="stat-num">3</div><div class="stat-label">Capas de datos</div></div>
|
||||
<div class="stat"><div class="stat-num">8+</div><div class="stat-label">Fuentes típicas</div></div>
|
||||
<div class="stat"><div class="stat-num">1</div><div class="stat-label">Objetivo</div></div>
|
||||
</div>
|
||||
<ul class="steps">
|
||||
<li><span>1</span> Identificadores (quién eres)</li>
|
||||
<li><span>2</span> Atributos (cómo eres)</li>
|
||||
<li><span>3</span> Actividad (qué haces)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2 style="margin-top:2rem;">Mapa de tipos de información personal</h2>
|
||||
<p class="section-desc">
|
||||
No todos los datos "pesan" igual. Los <strong>identificadores</strong> permiten localizarte;
|
||||
los <strong>atributos</strong> te describen; la <strong>actividad</strong> te perfila.
|
||||
Los ecosistemas publicitarios y los data brokers suelen unirlo todo por correlación.
|
||||
</p>
|
||||
<p class="section-desc" style="margin-top:0.5rem;font-size:0.82rem;">
|
||||
Marco legal: <a href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679#d1e1489-1-1" target="_blank" rel="noopener" style="color:var(--caoba);">RGPD Art. 4 →</a>
|
||||
· <a href="https://www.ftc.gov/reports/data-brokers" target="_blank" rel="noopener" style="color:var(--caoba);">FTC Data Broker Report →</a>
|
||||
</p>
|
||||
|
||||
<div class="grid" style="margin-top:1.5rem;">
|
||||
|
||||
<div class="group">
|
||||
<h3>1) Identificadores directos</h3>
|
||||
<div class="item"><label><input type="checkbox"> Nombre completo y variantes</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Emails (actuales y antiguos)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Teléfonos (móvil/fijo/VoIP)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Direcciones (actuales y previas)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Alias/nicks recurrentes</label></div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3>2) Identificadores "técnicos"</h3>
|
||||
<div class="item"><label><input type="checkbox"> IP (pública), rangos y patrones</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Dispositivo (ID de publicidad, fingerprint)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Cookies / sesiones / tokens</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Metadatos (fotos, PDFs, documentos)</label></div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3>3) Atributos personales</h3>
|
||||
<div class="item"><label><input type="checkbox"> Fecha de nacimiento / edad aproximada</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Trabajo / cargo / historial laboral</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Educación / centros / promociones</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Propiedad (vivienda/vehículo), registros y anuncios</label></div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3>4) Contactos y "grafo social"</h3>
|
||||
<div class="item"><label><input type="checkbox"> Familia / convivientes / relaciones públicas</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Amigos, compañeros, "etiquetados", fotos grupales</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Agenda subida (contact discovery)</label></div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3>5) Actividad y comportamiento</h3>
|
||||
<div class="item"><label><input type="checkbox"> Historial de navegación / intereses inferidos</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Compras, suscripciones, tickets y reservas</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Ubicación (GPS, Wi-Fi, torres, check-ins)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Contenido publicado (posts, comentarios, reseñas)</label></div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<h3>6) Datos "sensibles" (tratamiento especial)</h3>
|
||||
<div class="item"><label><input type="checkbox"> Salud, diagnósticos, seguros, hábitos</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Biométricos (cara/huella/voz) y modelos</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Creencias/ideología/sindical, etc. (si se publica)</label></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Cómo lo guardan -->
|
||||
<h2 style="margin-top:2.5rem;">Cómo lo guardan y conectan las compañías</h2>
|
||||
<p>
|
||||
Lo importante no es solo "qué dato", sino <strong>qué sistema lo almacena</strong> y
|
||||
<strong>qué identificador lo une</strong> con el resto (email, teléfono, cookie, device ID, etc.).
|
||||
</p>
|
||||
<div class="grid" style="margin-top:1.5rem;">
|
||||
<div class="group">
|
||||
<h3>Primera parte (1st-party)</h3>
|
||||
<p class="section-desc">Datos que entregas a un servicio directamente. Suelen estar en CRMs, sistemas de facturación, logs y backups.</p>
|
||||
<div class="item"><label><input type="checkbox"> CRM / soporte (tickets, chats, grabaciones)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Facturación (direcciones, pagos, historial)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Logs (IP, timestamps, user-agent)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Backups y réplicas (borrado no inmediato)</label></div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Terceros (3rd-party)</h3>
|
||||
<p class="section-desc">Trackers, analítica, publicidad, SDKs en apps, CDNs y "social logins". Pueden correlacionar actividad entre sitios.</p>
|
||||
<div class="item"><label><input type="checkbox"> Cookies 3rd-party / píxeles / tags</label></div>
|
||||
<div class="item"><label><input type="checkbox"> SDKs de móvil (ID publicidad, telemetría)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Fingerprinting (señales del navegador)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Enriquecimiento (email→perfil inferido)</label></div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Data brokers y agregadores</h3>
|
||||
<p class="section-desc">Compran, cruzan y re-venden datos. Su fuerza está en correlación: email/teléfono/dirección + registros + actividad.</p>
|
||||
<div class="item"><label><input type="checkbox"> Compras de listas (marketing)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Scraping (perfiles públicos, reseñas)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Registros públicos (según jurisdicción)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Brechas/filtraciones (datos históricos)</label></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fuentes -->
|
||||
<h2 style="margin-top:2.5rem;">Fuentes típicas de exposición</h2>
|
||||
<p>Piensa en tuberías: donde más se filtra, más impacto tiene el control.</p>
|
||||
<div class="grid" style="margin-top:1.5rem;">
|
||||
<div class="group">
|
||||
<h3>Registros y trámites</h3>
|
||||
<p class="section-desc">Registros públicos, boletines, licencias, directorios profesionales, anuncios legales.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Plataformas y publicaciones</h3>
|
||||
<p class="section-desc">Redes sociales, foros, comentarios, reseñas, repositorios, perfiles públicos, páginas antiguas.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Economía cotidiana</h3>
|
||||
<p class="section-desc">Bancos/seguros (muy regulado), e-commerce, envíos, fidelización, tickets, reservas, soporte.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Telecos y conectividad</h3>
|
||||
<p class="section-desc">Proveedores de internet/móvil, Wi-Fi, logs, servicios de mensajería, servicios en la nube.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Móvil y apps</h3>
|
||||
<p class="section-desc">Permisos, SDKs, analítica, ubicaciones, fotos con metadatos, sincronización de contactos.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Filtraciones</h3>
|
||||
<p class="section-desc">Brechas de datos: emails, teléfonos, direcciones, passwords. Impactan durante años.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prioridad -->
|
||||
<h2 style="margin-top:2.5rem;">Prioridad práctica (qué tocar primero)</h2>
|
||||
<p>Empieza por los <strong>identificadores de enlace</strong> (email/teléfono/dirección) y por lo que "propaga" a terceros.</p>
|
||||
<div class="grid" style="margin-top:1.5rem;">
|
||||
<div class="group">
|
||||
<h3>Alta prioridad</h3>
|
||||
<p class="section-desc">Email/teléfono, direcciones históricas, perfiles públicos, fotos con metadatos, directorios/brokers, páginas indexadas con tu nombre.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Media prioridad</h3>
|
||||
<p class="section-desc">Historial de compras y suscripciones, cuentas secundarias, contenidos dispersos (comentarios/foros), alias repetidos.</p>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Baja prioridad (pero no ignorar)</h3>
|
||||
<p class="section-desc">Señales técnicas menores o aisladas sin correlación clara. Suelen resolverse con higiene de navegador/dispositivo.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Acciones -->
|
||||
<h2 style="margin-top:2.5rem;">Acciones recomendadas</h2>
|
||||
<div class="grid" style="margin-top:1.5rem;">
|
||||
<div class="group">
|
||||
<h3>Identificadores</h3>
|
||||
<div class="item"><label><input type="checkbox"> Unificar/rotar emails (según caso de uso)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Revisar teléfonos publicados y directorios</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Solicitudes de supresión (GDPR) donde aplique</label></div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Publicaciones e indexación</h3>
|
||||
<div class="item"><label><input type="checkbox"> Retirar en origen (web/foro) primero</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Desindexar (formularios buscador) como refuerzo</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Reducir "señales" (perfiles públicos/SEO personal)</label></div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<h3>Dispositivos y trackers</h3>
|
||||
<div class="item"><label><input type="checkbox"> Revisar permisos de apps y SDKs</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Reducir tracking (navegador, bloqueadores, etc.)</label></div>
|
||||
<div class="item"><label><input type="checkbox"> Limpiar metadatos en documentos e imágenes</label></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div><!-- /panel-tipos -->
|
||||
|
||||
<!-- ══ PANEL: BÚSQUEDA AVANZADA ═════════════════════════════════ -->
|
||||
<div id="panel-avanzada" hidden>
|
||||
|
||||
<!-- RESULTADOS -->
|
||||
<section class="results-section" id="results-section">
|
||||
<div class="container">
|
||||
<div class="results-header">
|
||||
<h2>Resultados</h2>
|
||||
<span class="results-query" id="results-query"></span>
|
||||
</div>
|
||||
<div id="results-list"></div>
|
||||
<div id="results-list"><div class="search-state"><h3>Introduce un dato y busca</h3><p>Escribe tu nombre, email, alias o teléfono en el buscador de arriba y pulsa Buscar.</p></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══ OSINT DORKING PROFESIONAL ════════════════════════════════ -->
|
||||
<!-- OSINT DORKING -->
|
||||
<section class="dork-section info" id="dorking">
|
||||
<div class="container">
|
||||
<h2>OSINT dorking avanzado</h2>
|
||||
|
|
@ -426,13 +563,12 @@
|
|||
<div class="dork-tip">
|
||||
Escribe tu nombre, email, alias o teléfono en el buscador de arriba antes de lanzar un dork.
|
||||
</div>
|
||||
|
||||
<div class="dork-tabs" id="dork-tabs"></div>
|
||||
<div id="dork-panes"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══ HERRAMIENTAS OSINT ════════════════════════════════════════ -->
|
||||
<!-- HERRAMIENTAS COMPLEMENTARIAS -->
|
||||
<section class="info alt">
|
||||
<div class="container">
|
||||
<h2>Herramientas complementarias</h2>
|
||||
|
|
@ -490,6 +626,8 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
</div><!-- /panel-avanzada -->
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
|
|
@ -512,10 +650,10 @@ const MODES = {
|
|||
|
||||
let currentMode = 'nombre';
|
||||
|
||||
const modeBtns = document.querySelectorAll('.mode-btn');
|
||||
const modeHint = document.getElementById('mode-hint');
|
||||
const egoInput = document.getElementById('ego-input');
|
||||
const egoBtn = document.getElementById('ego-btn');
|
||||
const modeBtns = document.querySelectorAll('.mode-btn');
|
||||
const modeHint = document.getElementById('mode-hint');
|
||||
const egoInput = document.getElementById('ego-input');
|
||||
const egoBtn = document.getElementById('ego-btn');
|
||||
const resultsSec = document.getElementById('results-section');
|
||||
const resultsQuery = document.getElementById('results-query');
|
||||
const resultsList = document.getElementById('results-list');
|
||||
|
|
@ -533,6 +671,25 @@ modeBtns.forEach(btn => {
|
|||
egoInput.addEventListener('keydown', e => { if (e.key === 'Enter') doSearch(); });
|
||||
egoBtn.addEventListener('click', doSearch);
|
||||
|
||||
/* ── Toggle paneles ─────────────────────────────────────────── */
|
||||
(function () {
|
||||
function setupToggle(btnId, panelId) {
|
||||
const btn = document.getElementById(btnId);
|
||||
const panel = document.getElementById(panelId);
|
||||
if (!btn || !panel) return;
|
||||
|
||||
btn.addEventListener('click', function () {
|
||||
const isOpen = !panel.hidden;
|
||||
panel.hidden = isOpen;
|
||||
btn.classList.toggle('active', !isOpen);
|
||||
btn.setAttribute('aria-expanded', String(!isOpen));
|
||||
});
|
||||
}
|
||||
|
||||
setupToggle('btn-tipos', 'panel-tipos');
|
||||
setupToggle('btn-avanzada', 'panel-avanzada');
|
||||
})();
|
||||
|
||||
/* ── OSINT Dorking — categorías ──────────────────────────────── */
|
||||
const DORK_CATEGORIES = [
|
||||
{
|
||||
|
|
@ -677,21 +834,21 @@ const DORK_CATEGORIES = [
|
|||
]
|
||||
},
|
||||
];
|
||||
|
||||
/* ── Renderizar tabs y panes ─────────────────────────────────── */
|
||||
(function initDorks() {
|
||||
/* ── Renderizar tabs y panes (lazy) ─────────────────────────── */
|
||||
let dorksInited = false;
|
||||
function initDorks() {
|
||||
if (dorksInited) return;
|
||||
dorksInited = true;
|
||||
const tabsEl = document.getElementById('dork-tabs');
|
||||
const panesEl = document.getElementById('dork-panes');
|
||||
|
||||
DORK_CATEGORIES.forEach((cat, i) => {
|
||||
/* Tab */
|
||||
const tab = document.createElement('button');
|
||||
tab.className = 'dtab' + (i === 0 ? ' active' : '');
|
||||
tab.textContent = cat.label;
|
||||
tab.dataset.cat = i;
|
||||
tabsEl.appendChild(tab);
|
||||
|
||||
/* Pane */
|
||||
const pane = document.createElement('div');
|
||||
pane.className = 'dork-pane' + (i === 0 ? ' active' : '');
|
||||
pane.id = 'dpane-' + i;
|
||||
|
|
@ -713,7 +870,6 @@ const DORK_CATEGORIES = [
|
|||
panesEl.appendChild(pane);
|
||||
});
|
||||
|
||||
/* Tab switching */
|
||||
tabsEl.addEventListener('click', e => {
|
||||
const tab = e.target.closest('.dtab');
|
||||
if (!tab) return;
|
||||
|
|
@ -723,7 +879,6 @@ const DORK_CATEGORIES = [
|
|||
document.getElementById('dpane-' + tab.dataset.cat).classList.add('active');
|
||||
});
|
||||
|
||||
/* Lanzar dork al hacer clic en Buscar */
|
||||
panesEl.addEventListener('click', e => {
|
||||
const btn = e.target.closest('.dork-run-btn');
|
||||
if (!btn) return;
|
||||
|
|
@ -741,14 +896,29 @@ const DORK_CATEGORIES = [
|
|||
modeHint.textContent = MODES.libre.hint;
|
||||
doSearch();
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
/* Inicializar dorks cuando se abre el panel avanzado */
|
||||
document.getElementById('btn-avanzada').addEventListener('click', function () {
|
||||
/* slight delay to let the panel become visible first */
|
||||
setTimeout(initDorks, 10);
|
||||
});
|
||||
|
||||
/* ── Búsqueda ───────────────────────────────────────────────── */
|
||||
async function doSearch() {
|
||||
const raw = egoInput.value.trim();
|
||||
if (!raw) { egoInput.focus(); return; }
|
||||
|
||||
resultsSec.hidden = false;
|
||||
/* Abrir panel avanzada si está cerrado */
|
||||
const panelAv = document.getElementById('panel-avanzada');
|
||||
const btnAv = document.getElementById('btn-avanzada');
|
||||
if (panelAv && panelAv.hidden) {
|
||||
panelAv.hidden = false;
|
||||
btnAv && btnAv.classList.add('active');
|
||||
btnAv && btnAv.setAttribute('aria-expanded', 'true');
|
||||
initDorks();
|
||||
}
|
||||
|
||||
resultsList.innerHTML = `
|
||||
<div class="search-state">
|
||||
<div class="spinner"></div>
|
||||
|
|
@ -780,15 +950,14 @@ function renderResults(results) {
|
|||
if (!results || results.length === 0) {
|
||||
resultsList.innerHTML = `
|
||||
<div class="search-state">
|
||||
<div class="state-icon">🔍</div>
|
||||
<h3>Sin resultados visibles</h3>
|
||||
<p>No se encontraron menciones públicas. Eso es una buena señal.<br>
|
||||
Prueba variantes de tu nombre o usa los dorks de abajo.</p>
|
||||
Prueba variantes de tu nombre o usa los dorks en "Búsqueda avanzada".</p>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
resultsList.innerHTML = results.map((r, i) => {
|
||||
resultsList.innerHTML = results.map((r) => {
|
||||
const rtbfUrl = rtbfLink(r.url);
|
||||
return `
|
||||
<div class="result-card">
|
||||
|
|
@ -823,14 +992,13 @@ function rtbfLink(url) {
|
|||
if (host.includes('bing.')) return 'https://www.bing.com/webmasters/tools/content-removal';
|
||||
if (host.includes('yahoo.')) return 'https://io.help.yahoo.com/contact/index?page=contact';
|
||||
} catch {}
|
||||
/* Para cualquier otro dominio: derecho al olvido Google */
|
||||
return 'https://reportcontent.google.com/forms/rtbf';
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
resultsList.innerHTML = `
|
||||
<div class="search-state">
|
||||
<div class="state-icon">⚠️</div>
|
||||
|
||||
<h3>Error en la búsqueda</h3>
|
||||
<p>${esc(msg)}</p>
|
||||
</div>`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue