-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprofile_HTB.html
More file actions
239 lines (227 loc) · 13 KB
/
Copy pathprofile_HTB.html
File metadata and controls
239 lines (227 loc) · 13 KB
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XPL0DAY | Perfil</title>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/profile_HTB.css">
<link rel="stylesheet" href="css/global.css">
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
</head>
<body>
<aside class="sidebar">
<img src="assets/logo.svg" alt="XPL0DAY Icon" class="logo-icon">
<div class="sidebar-logo">XPL<span>0</span>DAY</div>
<nav class="sidebar-nav">
<a href="dashboard_HTB.html" class="active">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7" rx="1" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="3" width="7" height="7" rx="1" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="14" width="7" height="7" rx="1" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="14" width="7" height="7" rx="1" stroke-linecap="round" stroke-linejoin="round"/></svg>
DASHBOARD
</a>
<a href="machines_HTB.html">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 17.25v-.228a4.5 4.5 0 00-.12-1.03l-2.268-9.64a3.375 3.375 0 00-3.285-2.602H7.923a3.375 3.375 0 00-3.285 2.602l-2.268 9.64a4.5 4.5 0 00-.12 1.03v.228m19.5 0a3 3 0 01-3 3H5.25a3 3 0 01-3-3m19.5 0a3 3 0 00-3-3H5.25a3 3 0 00-3 3m16.5 0h.008v.008h-.008v-.008zm-3 0h.008v.008h-.008v-.008z"/></svg>
MÁQUINAS
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5"/></svg>
RETOS
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/></svg>
ACADEMIA
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>
EQUIPOS
</a>
<a href="#" id="logoutBtn" class="logout-link">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1012.728 0M12 3v9"/></svg>
DESCONECTAR
</a>
</nav>
<div class="user-profile">
<div class="avatar" id="sidebarAvatar">RT</div>
<div class="user-info">
<p class="username" id="sidebarUsername">Root_User</p>
<p class="rank" id="sidebarRank">Script Kiddie</p>
</div>
</div>
</aside>
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<main class="main-content">
<header class="top-bar">
<button id="sidebar-toggle" aria-label="Abrir menú">☰</button>
<h1>Perfil de Usuario</h1>
<div class="stats-overview">
<div class="mini-stat">Puntos: <span id="headerPoints">0</span></div>
<div class="mini-stat">Rank: <span id="headerRank">#—</span></div>
</div>
</header>
<!-- TARJETA PRINCIPAL DEL PERFIL -->
<section class="profile-hero">
<div class="profile-avatar-wrap">
<div class="profile-avatar" id="profileAvatar">RT</div>
<div class="avatar-ring"></div>
</div>
<div class="profile-info">
<h2 id="profileUsername">Root_User</h2>
<span class="profile-rank-badge" id="profileRank">Script Kiddie</span>
<p class="profile-joined">Miembro desde <span id="profileJoined">—</span></p>
</div>
<div class="profile-quick-stats">
<div class="quick-stat">
<span class="quick-value" id="quickPoints">0</span>
<span class="quick-label">Puntos</span>
</div>
<div class="quick-stat">
<span class="quick-value" id="quickMachines">0</span>
<span class="quick-label">Máquinas</span>
</div>
<div class="quick-stat">
<span class="quick-value" id="quickFlags">0</span>
<span class="quick-label">Flags</span>
</div>
</div>
</section>
<div class="profile-grid">
<!-- ESTADÍSTICAS Y RANKING -->
<div class="card stats-card">
<h3>Estadísticas</h3>
<div class="stat-row">
<span class="stat-label">Posición global</span>
<span class="stat-value green" id="statRanking">#12,402</span>
</div>
<div class="stat-row">
<span class="stat-label">Puntos totales</span>
<span class="stat-value" id="statPoints">150</span>
</div>
<div class="stat-row">
<span class="stat-label">Máquinas completadas</span>
<span class="stat-value" id="statMachines">3</span>
</div>
<div class="stat-row">
<span class="stat-label">Retos completados</span>
<span class="stat-value" id="statChallenges">7</span>
</div>
<div class="stat-row">
<span class="stat-label">Rango actual</span>
<span class="stat-value green" id="statRank">Script Kiddie</span>
</div>
</div>
<!-- BARRA DE PROGRESO -->
<div class="card progress-card">
<h3>Progreso de Rango</h3>
<div class="rank-journey">
<div class="rank-step done">Script Kiddie</div>
<div class="rank-arrow">▶</div>
<div class="rank-step current">Hacker</div>
<div class="rank-arrow">▶</div>
<div class="rank-step">Pro Hacker</div>
<div class="rank-arrow">▶</div>
<div class="rank-step">Elite</div>
</div>
<div class="progress-info">
<span id="progressLabel">150 / 500 puntos para <strong>Hacker</strong></span>
</div>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar" style="width: 30%;"></div>
</div>
<p class="progress-hint">Te faltan <span class="green" id="pointsLeft">350</span> puntos para subir de rango</p>
</div>
<!-- ACTIVIDAD RECIENTE -->
<div class="card activity-card">
<h3>Actividad Reciente</h3>
<div class="activity-list" id="activityList">
<div class="activity-item">
<span class="activity-icon success">✔</span>
<div class="activity-detail">
<p class="activity-text">Completó la máquina <span class="green">Inception</span></p>
<p class="activity-time">Hace 2 días</p>
</div>
<span class="activity-points">+20 pts</span>
</div>
<div class="activity-item">
<span class="activity-icon success">✔</span>
<div class="activity-detail">
<p class="activity-text">Resolvió el reto <span class="green">CryptoBasic</span></p>
<p class="activity-time">Hace 5 días</p>
</div>
<span class="activity-points">+15 pts</span>
</div>
<div class="activity-item">
<span class="activity-icon warning">⚑</span>
<div class="activity-detail">
<p class="activity-text">Inició ataque a <span class="green">X-Vault</span></p>
<p class="activity-time">Hace 1 semana</p>
</div>
<span class="activity-points">En progreso</span>
</div>
<div class="activity-item">
<span class="activity-icon success">✔</span>
<div class="activity-detail">
<p class="activity-text">Completó módulo <span class="green">Nmap Basics</span></p>
<p class="activity-time">Hace 2 semanas</p>
</div>
<span class="activity-points">+10 pts</span>
</div>
</div>
</div>
<!-- BADGES / LOGROS -->
<div class="card badges-card">
<h3>Logros</h3>
<div class="badges-grid">
<div class="badge earned">
<div class="badge-icon">🎯</div>
<p class="badge-name">Primera Flag</p>
<p class="badge-desc">Captura tu primera flag</p>
</div>
<div class="badge earned">
<div class="badge-icon">🔍</div>
<p class="badge-name">Reconocimiento</p>
<p class="badge-desc">Completa un escaneo Nmap</p>
</div>
<div class="badge earned">
<div class="badge-icon">💻</div>
<p class="badge-name">Primer Login</p>
<p class="badge-desc">Accede por primera vez</p>
</div>
<div class="badge locked">
<div class="badge-icon">🔓</div>
<p class="badge-name">Escalada</p>
<p class="badge-desc">Consigue root en una máquina</p>
</div>
<div class="badge locked">
<div class="badge-icon">🏆</div>
<p class="badge-name">Hacker</p>
<p class="badge-desc">Alcanza el rango Hacker</p>
</div>
<div class="badge locked">
<div class="badge-icon">⚡</div>
<p class="badge-name">Speed Run</p>
<p class="badge-desc">Completa una máquina en menos de 1h</p>
</div>
</div>
</div>
</div>
</main>
<script src="js/profile-logic_HTB.js"></script>
<script>
// Hamburguesa: mostrar/ocultar sidebar en móvil
const sidebarToggle = document.getElementById('sidebar-toggle');
const sidebar = document.querySelector('.sidebar');
const overlay = document.getElementById('sidebarOverlay');
if (sidebarToggle) {
sidebarToggle.addEventListener('click', function() {
sidebar.classList.toggle('sidebar-open');
overlay.classList.toggle('active');
});
overlay.addEventListener('click', function() {
sidebar.classList.remove('sidebar-open');
overlay.classList.remove('active');
});
}
</script>
<script src="js/enigma.js"></script>
<div class="aviso-prototipo">Prototipo de interfaz · sin backend funcional</div>
</body>
</html>