web/index.html at main · IzanVil/web · GitHub

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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CleanTech — Recicla, Escanea y Gana Recompensas Reales</title>
<meta name="description" content="CleanTech convierte tus dispositivos electrónicos en desuso en puntos canjeables por recompensas reales. Deposita, escanea el QR y gana dinero, descuentos y premios reciclando e-waste.">
<meta name="keywords" content="reciclaje electrónico, e-waste, sostenibilidad, puntos, recompensas, contenedores inteligentes">
<meta name="author" content="Jorge, Marco e Izan">
<meta name="robots" content="index, follow">

<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<style>
/* ============================================================
   RESET & CUSTOM PROPERTIES
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --green: #0BDA51;
  --green-dark: #09b843;
  --dark: #0a0f0d;
  --dark-2: #0d1a10;
  --cream: #e8f5e0;
  --lime: #c6ff00;
  --white: #f4f9f0;
  --gray: #9aab9d;
  --gray-border: rgba(11,218,81,.12);
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-pill: 60px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--dark); color: var(--white); font-family: var(--font-body); overflow-x: hidden; line-height: 1.6; }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
nav {
  position: sticky; top: 0; left: 0; width: 100%; z-index: 100;
  padding: var(--space-sm) var(--space-2xl);
  display: flex; justify-content: space-between; align-items: center;
  backdrop-filter: blur(20px); background: rgba(10,15,13,.85);
  border-bottom: 1px solid var(--gray-border);
}

.logo { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--green); text-decoration: none; }
.logo span { color: var(--white); }

.nav-links { list-style: none; display: flex; gap: var(--space-lg); }
.nav-links a { color: var(--white); text-decoration: none; font-size: .9rem; opacity: .7; transition: 0.3s; }
.nav-links a:hover { opacity: 1; color: var(--green); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 90vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-2xl) var(--space-md); position: relative;
}

.hero h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 8vw, 6rem); font-weight: 800; line-height: .95; margin-bottom: var(--space-md); }
.hero h1 .accent { color: var(--green); }
.hero p { font-size: 1.15rem; color: var(--gray); max-width: 650px; margin: 0 auto var(--space-lg); }

.cta {
  display: inline-block; padding: .9rem 2.4rem; background: var(--green); color: var(--dark);
  font-family: var(--font-display); font-weight: 700; border-radius: var(--radius-pill);
  text-decoration: none; transition: 0.3s; border: 2px solid var(--green);
}

/* ============================================================
   ESTRUCTURA DE SECCIONES
   ============================================================ */
section { padding: var(--space-2xl) var(--space-2xl); }
.section-label { font-family: var(--font-display); font-size: .75rem; text-transform: uppercase; letter-spacing: 3px; color: var(--green); margin-bottom: var(--space-sm); display: block; }
.section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 700; margin-bottom: var(--space-md); }
.section-desc { color: var(--gray); max-width: 600px; margin-bottom: var(--space-xl); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); }
.card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); padding: var(--space-lg); border-radius: var(--radius-md); transition: 0.3s; }
.card:hover { border-color: var(--green); transform: translateY(-5px); }
.card h3 { font-family: var(--font-display); margin-bottom: var(--space-xs); color: var(--white); }
.card p { color: var(--gray); font-size: 0.95rem; }

/* ============================================================
   ESTILOS ESPECÍFICOS
   ============================================================ */
.list-style { list-style: none; margin-top: var(--space-sm); }
.list-style li { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.tag-pro { color: var(--green); font-weight: bold; }
.tag-contra { color: #ff5c5c; font-weight: bold; }

.dashboard-mockup {
    background: #0d1a10; border: 1px dashed var(--green); padding: var(--space-lg); border-radius: var(--radius-md);
    margin-top: var(--space-md); opacity: 0.8;
}

.legal-footer {
    background: rgba(255,255,255,0.02); padding: var(--space-xl); border-top: 1px solid var(--gray-border);
    font-size: 0.85rem; color: var(--gray); text-align: left;
}

@media (max-width: 768px) {
    section { padding: var(--space-xl) var(--space-md); }
    nav { padding: var(--space-sm) var(--space-md); }
}
</style>
</head>
<body>

<nav>
  <a href="#" class="logo">Clean<span>Tech</span></a>
  <ul class="nav-links">
    <li><a href="#arquitectura">Tecnología</a></li>
    <li><a href="#donde">Despliegue</a></li>
    <li><a href="#dispositivos">Clasificación</a></li>
    <li><a href="#negocio">Viabilidad</a></li>
  </ul>
</nav>

<section class="hero">
    <div>
        <span class="section-label">Proyecto Académico de Sistemas</span>
        <h1>Clean<span class="accent">Tech</span> System</h1>
        <p>A pesar de su potencial de reutilización, gran parte de la basura electrónica acaba en vertederos por falta de infraestructuras accesibles. CleanTech aborda este problema proponiendo una red de contenedores inteligentes (IoT) que incentiva el reciclaje mediante un sistema centralizado de trazabilidad y recompensas.</p>
        <a href="#arquitectura" class="cta">Ver Documentación Técnica ↓</a>
    </div>
</section>

<section id="arquitectura">
    <span class="section-label">Ingeniería de Sistemas</span>
    <h2 class="section-title">Arquitectura del Sistema Propuesto</h2>
    <p class="section-desc"><strong>El Problema:</strong> La gestión convencional de residuos electrónicos en el ámbito local carece de trazabilidad detallada e incentivos directos para el ciudadano. <br><br><strong>La Solución CleanTech:</strong> Se plantea un ecosistema digital (Prueba de Concepto) basado en la comunicación entre el hardware de recogida y un servidor centralizado, dividiendo el sistema en tres capas lógicas.</p>

    <div class="grid-3">
        <div class="card">
            <h3>Nodos Físicos (Hardware IoT)</h3>
            <p>Contenedores equipados con sensores de peso (celdas de carga) y lectores de códigos. Operan mediante microcontroladores (ej. ESP32 o Raspberry Pi) empleando el protocolo MQTT sobre redes Wi-Fi/4G para transmitir la telemetría al servidor de forma eficiente.</p>
        </div>
        <div class="card">
            <h3>Servidor Central (Backend API)</h3>
            <p>Arquitectura modular responsable de procesar las peticiones de los contenedores, validar los depósitos comprobando los rangos de peso registrados, y gestionar la persistencia y la lógica de negocio en una base de datos relacional (ej. PostgreSQL).</p>
        </div>
        <div class="card">
            <h3>Plataforma Cliente (Frontend)</h3>
            <p>Aplicación web tipo SPA (Single Page Application) que consume una API RESTful securizada mediante tokens JWT. Esta interfaz permite al usuario registrado consultar su historial, visualizar métricas de impacto y gestionar los puntos obtenidos.</p>
        </div>
    </div>
</section>

<section id="donde" style="background: var(--dark-2);">
    <span class="section-label">Despliegue Logístico</span>
    <h2 class="section-title">Propuesta de Despliegue (Piloto)</h2>
    <p class="section-desc">Planteamiento de ubicación estratégica en zonas de afluencia diaria para reducir la fricción de entrada y acercar el reciclaje tecnológico al ciudadano en su entorno cotidiano.</p>

    <div class="grid-3">
        <div class="card">
            <h3>Campus Universitarios</h3>
            <p>Propuesta de instalación inicial en facultades de ingeniería, ciencias y bibliotecas universitarias, entornos donde la rotación de hardware es frecuente y existe un alto nivel de concienciación ambiental.</p>
        </div>
        <div class="card">
            <h3>Centros Municipales</h3>
            <p>Estudio de viabilidad para colaborar con la administración local y situar contenedores en centros culturales o dependencias administrativas, facilitando el acceso a un público más amplio y heterogéneo.</p>
        </div>
        <div class="card">
            <h3>Zonas Comerciales</h3>
            <p>Planteamiento de instalaciones cerca de puntos de venta de electrónica, con el objetivo de fomentar el reciclaje del dispositivo antiguo justo en el momento en que se adquiere el nuevo hardware.</p>
        </div>
    </div>
</section>

<section id="dispositivos">
    <span class="section-label">Especificaciones de Entrada</span>
    <h2 class="section-title">Clasificación de Dispositivos</h2>
    <p class="section-desc">Criterios de admisión definidos a nivel teórico para ajustarse a las dimensiones físicas del contenedor propuesto y minimizar posibles incidentes logísticos o de seguridad.</p>

    <div class="grid-3">
        <div class="card">
            <h3><span class="tag-pro">✅</span> Perfil de Admisión</h3>
            <ul class="list-style">
                <li>Smartphones, tablets y lectores de e-books</li>
                <li>Componentes de PC (placas, RAM, CPU, GPU)</li>
                <li>Periféricos pequeños, cargadores y cableado</li>
                <li>Dispositivos wearables y pequeños accesorios</li>
            </ul>
        </div>
        <div class="card">
            <h3><span class="tag-contra">❌</span> Restricciones del Sistema</h3>
            <ul class="list-style">
                <li>Baterías hinchadas o visiblemente deterioradas</li>
                <li>Pantallas de gran formato o televisores antiguos</li>
                <li>Electrodomésticos u ofimática de gran tamaño</li>
                <li>Tóneres de impresión o elementos con fluidos</li>
            </ul>
        </div>
        <div class="card">
            <h3>Justificación Técnica</h3>
            <p>Las restricciones de tamaño impuestas en la boca del contenedor y el filtrado previo del usuario aseguran la integridad de los sensores de pesaje internos y evitan riesgos (como la compresión accidental de baterías inestables).</p>
        </div>
    </div>
</section>

<section id="negocio" style="background: var(--dark-2);">
    <span class="section-label">Estudio de Viabilidad</span>
    <h2 class="section-title">Viabilidad del Proyecto</h2>
    <p class="section-desc">Análisis preliminar de las posibles vías de sostenimiento económico necesarias para escalar la infraestructura tecnológica del proyecto en un escenario de implementación real.</p>

    <div class="grid-3">
        <div class="card">
            <h3>Financiación Institucional</h3>
            <p>Posible acceso a programas municipales de fomento de la sostenibilidad y convenios de gestión de residuos locales, alineándose con las normativas vigentes sobre tratamiento de e-waste urbano.</p>
        </div>
        <div class="card">
            <h3>Economía Circular</h3>
            <p>Recuperación de dispositivos funcionales para programas de reacondicionamiento (refurbished) y derivación de placas base a plantas autorizadas especializadas en la extracción y reciclaje de materiales útiles.</p>
        </div>
        <div class="card">
            <h3>Patrocinios Corporativos (RSC)</h3>
            <p>Propuesta de colaboración con empresas del sector tecnológico interesadas en patrocinar el sistema de recompensas para los usuarios como parte activa de sus programas de Responsabilidad Social Corporativa.</p>
        </div>
    </div>
</section>

<section id="panel">
    <span class="section-label">Interfaz Frontend</span>
    <h2 class="section-title">Panel de Usuario (Funcionalidades)</h2>
    <p class="section-desc">Esquema de la interfaz web a la que accede el usuario registrado tras interactuar con el contenedor escaneando el código QR de identificación.</p>

    <div class="dashboard-mockup">
        <div class="grid-3">
            <div>
                <h4>Historial de Reciclaje</h4>
                <p>Registro detallado de los depósitos validados en los nodos, mostrando fecha de la operación, categoría aproximada del hardware entregado y el peso devuelto por el sensor.</p>
            </div>
            <div>
                <h4>Gestión de Puntos</h4>
                <p>Sistema de gamificación donde la asignación de puntos se calcula centralizadamente en el servidor para evitar manipulaciones, acumulando saldo canjeable por futuros incentivos.</p>
            </div>
            <div>
                <h4>Métricas de Impacto</h4>
                <p>Visualización de datos (ej. integrando librerías como Chart.js) para estimar y mostrar de forma gráfica la cantidad aproximada de e-waste evitado por el usuario a lo largo del tiempo.</p>
            </div>
        </div>
    </div>
</section>

<div class="legal-footer">
    <div style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px;">
        <div>
            <h4 style="color: var(--white); margin-bottom: 15px;">Privacidad y Manejo de Datos</h4>
            <p>Siguiendo directrices de buenas prácticas en seguridad de aplicaciones, el sistema propuesto aplica el principio de minimización de datos. Solo se recogen los datos estrictamente necesarios (ej. correo electrónico) y las contraseñas se almacenan empleando algoritmos de hash seguros. Las comunicaciones web utilizan protocolos TLS estándar.</p>
        </div>
        <div>
            <h4 style="color: var(--white); margin-bottom: 15px;">Naturaleza Académica del Proyecto</h4>
            <p>Este sistema ha sido conceptualizado, estructurado y documentado <strong>exclusivamente con fines didácticos</strong> como proyecto evaluable. La presente página y los sistemas descritos actúan únicamente como un entorno simulado (Prueba de Concepto / PoC) para la calificación académica en el ámbito de la Formación Profesional o Grado, sin fines comerciales activos.</p>
        </div>
        <div>
            <h4 style="color: var(--white); margin-bottom: 15px;">Seguridad en Dispositivos IoT</h4>
            <p>A nivel de arquitectura de red, se contempla el uso de mecanismos de autenticación básicos entre los microcontroladores (nodos) y el servidor backend (como el uso de tokens en el protocolo MQTT) para garantizar que las lecturas de peso provienen de contenedores autorizados de la red CleanTech.</p>
        </div>
    </div>
    <div style="text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.05); font-family: var(--font-display); font-weight: 600;">
        © 2026 CleanTech — Proyecto Académico de Informática / Sistemas Operativos en Red
    </div>
</div>

</body>
</html>