Barkmaster commited on
Commit
84a0da2
Β·
verified Β·
1 Parent(s): d5928d3

Create index.md

Browse files
Files changed (1) hide show
  1. index.md +1044 -0
index.md ADDED
@@ -0,0 +1,1044 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WARZONE β€” COMMAND CENTER</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --bg: #060a0f;
12
+ --bg2: #0c1219;
13
+ --bg3: #111b25;
14
+ --border: #1e3048;
15
+ --accent: #00d4ff;
16
+ --red: #ff4444;
17
+ --gold: #ffd700;
18
+ --green: #39ff14;
19
+ --purple: #b044ff;
20
+ --text: #cee8ff;
21
+ --dim: #4a7a9b;
22
+ --glow: 0 0 20px rgba(0,212,255,.35);
23
+ --glow-red: 0 0 20px rgba(255,68,68,.35);
24
+ }
25
+ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
26
+ body{background:var(--bg);color:var(--text);font-family:'Share Tech Mono',monospace;min-height:100vh;overflow-x:hidden}
27
+ body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:9999}
28
+
29
+ /* ── GLOBAL ── */
30
+ .page{display:none;min-height:100vh}
31
+ .page.active{display:block}
32
+ .btn{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:2px;padding:8px 20px;cursor:pointer;transition:all .2s;border:0}
33
+ .btn-primary{background:var(--accent);color:var(--bg);border:none}
34
+ .btn-primary:hover{box-shadow:var(--glow);filter:brightness(1.1)}
35
+ .btn-primary:disabled{opacity:.45;cursor:not-allowed}
36
+ .btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}
37
+ .btn-outline:hover{background:var(--accent);color:var(--bg)}
38
+ .btn-danger{background:transparent;border:1px solid var(--red);color:var(--red)}
39
+ .btn-danger:hover{background:var(--red);color:#fff}
40
+ .btn-danger:disabled{opacity:.45;cursor:not-allowed;background:transparent;color:var(--red)}
41
+ .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--dim)}
42
+ .btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
43
+ .form-group{margin-bottom:20px}
44
+ .form-group label{display:block;font-size:10px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:7px}
45
+ .form-group input,.form-group select{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:14px;padding:10px 14px;outline:none;transition:border-color .2s}
46
+ .form-group input:focus,.form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 1px rgba(0,212,255,.15)}
47
+ .form-group input.error{border-color:var(--red)}
48
+ .alert{padding:11px 16px;font-size:12px;letter-spacing:1px;margin-bottom:18px;display:none}
49
+ .alert.error{background:rgba(255,68,68,.1);border:1px solid var(--red);color:var(--red);display:block}
50
+ .alert.success{background:rgba(57,255,20,.1);border:1px solid var(--green);color:var(--green);display:block}
51
+ .card{background:var(--bg2);border:1px solid var(--border);padding:24px;position:relative}
52
+ .card::before,.card::after{content:'';position:absolute;width:12px;height:12px;border-color:var(--accent);border-style:solid}
53
+ .card::before{top:0;left:0;border-width:2px 0 0 2px}
54
+ .card::after{bottom:0;right:0;border-width:0 2px 2px 0}
55
+ .section-title{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:600;letter-spacing:4px;color:var(--dim);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px}
56
+ .section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
57
+ .live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.2s ease-in-out infinite;box-shadow:0 0 6px var(--green);display:inline-block}
58
+ @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
59
+ @keyframes pulse{0%,100%{box-shadow:var(--glow)}50%{box-shadow:0 0 35px rgba(0,212,255,.7)}}
60
+ @keyframes spin{to{transform:rotate(360deg)}}
61
+ @keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
62
+ .fade-in{animation:fadeIn .4s ease forwards}
63
+ .spinner{width:40px;height:40px;background:var(--accent);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);animation:spin .9s linear infinite}
64
+
65
+ /* ── NAV ── */
66
+ .nav{background:linear-gradient(135deg,#060f1a,#0d1f33);border-bottom:2px solid var(--accent);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;box-shadow:0 4px 30px rgba(0,212,255,.15)}
67
+ .nav-brand{display:flex;align-items:center;gap:14px;cursor:pointer}
68
+ .nav-hex{width:38px;height:38px;background:var(--accent);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-size:17px;animation:pulse 2.5s ease-in-out infinite}
69
+ .nav-title{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;letter-spacing:4px;color:var(--accent);text-shadow:var(--glow)}
70
+ .nav-sub{font-size:10px;color:var(--dim);letter-spacing:2px}
71
+ .nav-right{display:flex;align-items:center;gap:14px}
72
+ .nav-badge{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--green)}
73
+
74
+ /* ── LOGIN/REGISTER PAGES ── */
75
+ .auth-page{min-height:100vh;display:flex;flex-direction:column}
76
+ .auth-body{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 70px)}
77
+ @media(max-width:900px){.auth-body{grid-template-columns:1fr}}
78
+ .auth-hero{background:linear-gradient(135deg,#060f1a 0%,#0d1f33 60%,#091828 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 40px;position:relative;overflow:hidden}
79
+ .auth-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(0,212,255,.12),transparent 70%)}
80
+ .hero-icon{font-size:80px;margin-bottom:28px;filter:drop-shadow(0 0 20px rgba(0,212,255,.5))}
81
+ .hero-title{font-family:'Orbitron',sans-serif;font-size:32px;font-weight:900;letter-spacing:5px;color:var(--accent);text-shadow:var(--glow);text-align:center;margin-bottom:12px}
82
+ .hero-sub{font-size:13px;color:var(--dim);letter-spacing:2px;text-align:center;max-width:320px;line-height:1.8;margin-bottom:36px}
83
+ .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:280px}
84
+ .hero-stat{background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.15);padding:12px 16px;text-align:center}
85
+ .hero-stat-val{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:700;color:var(--accent)}
86
+ .hero-stat-lbl{font-size:10px;color:var(--dim);letter-spacing:2px;margin-top:3px}
87
+ .auth-form-panel{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:60px 40px}
88
+ .auth-form-box{width:100%;max-width:420px}
89
+ .auth-form-title{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:700;letter-spacing:4px;color:var(--accent);text-shadow:var(--glow);margin-bottom:6px}
90
+ .auth-form-sub{font-size:12px;color:var(--dim);letter-spacing:2px;margin-bottom:30px}
91
+ .auth-link{color:var(--accent);cursor:pointer;text-decoration:underline;font-size:12px;letter-spacing:1px}
92
+ .auth-link:hover{color:#fff}
93
+ .test-panel{background:rgba(0,212,255,.04);border:1px solid rgba(0,212,255,.2);border-left:3px solid var(--accent);padding:16px 18px;margin-top:22px}
94
+ .test-panel-title{font-size:10px;letter-spacing:3px;color:var(--accent);margin-bottom:12px;text-transform:uppercase}
95
+ .test-account{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(30,48,72,.5);cursor:pointer;transition:background .15s}
96
+ .test-account:last-child{border-bottom:none}
97
+ .test-account:hover .ta-email{color:var(--accent)}
98
+ .ta-user{font-size:12px;color:var(--text)}
99
+ .ta-email{font-size:11px;color:var(--dim);transition:color .15s}
100
+ .ta-use{font-size:10px;color:var(--accent);letter-spacing:1px;opacity:0;transition:opacity .15s}
101
+ .test-account:hover .ta-use{opacity:1}
102
+ .test-note{font-size:10px;color:var(--dim);margin-top:10px;line-height:1.7;border-top:1px solid var(--border);padding-top:10px}
103
+ .test-note .warn{color:var(--gold)}
104
+
105
+ /* ── DASHBOARD PAGE ── */
106
+ .dash-body{padding:24px 28px;max-width:1600px;margin:0 auto}
107
+ .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:14px;margin-bottom:28px}
108
+ .kpi-card{background:var(--bg2);border:1px solid var(--border);padding:18px 20px;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s}
109
+ .kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px}
110
+ .kpi-card.c::before{background:var(--accent);box-shadow:var(--glow)}
111
+ .kpi-card.r::before{background:var(--red);box-shadow:var(--glow-red)}
112
+ .kpi-card.g::before{background:var(--gold);box-shadow:0 0 18px rgba(255,215,0,.35)}
113
+ .kpi-card.e::before{background:var(--green)}
114
+ .kpi-card:hover{border-color:var(--accent);box-shadow:var(--glow)}
115
+ .kpi-icon{font-size:20px;margin-bottom:8px}
116
+ .kpi-label{font-size:10px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin-bottom:5px}
117
+ .kpi-value{font-family:'Orbitron',sans-serif;font-size:24px;font-weight:700;line-height:1}
118
+ .kpi-card.c .kpi-value{color:var(--accent)}
119
+ .kpi-card.r .kpi-value{color:var(--red)}
120
+ .kpi-card.g .kpi-value{color:var(--gold)}
121
+ .kpi-card.e .kpi-value{color:var(--green)}
122
+ .kpi-sub{font-size:11px;color:var(--dim);margin-top:4px}
123
+ .charts-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:28px}
124
+ @media(max-width:1100px){.charts-row{grid-template-columns:1fr 1fr}}
125
+ @media(max-width:700px){.charts-row{grid-template-columns:1fr}}
126
+ .chart-card{background:var(--bg2);border:1px solid var(--border);padding:20px;position:relative}
127
+ .chart-card::before,.chart-card::after{content:'';position:absolute;width:10px;height:10px;border-color:var(--accent);border-style:solid}
128
+ .chart-card::before{top:0;left:0;border-width:2px 0 0 2px}
129
+ .chart-card::after{bottom:0;right:0;border-width:0 2px 2px 0}
130
+ .chart-card h3{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:600;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:16px}
131
+ .chart-card canvas{max-height:200px}
132
+ .table-card{background:var(--bg2);border:1px solid var(--border);padding:20px;margin-bottom:28px;overflow-x:auto;position:relative}
133
+ .table-card::before,.table-card::after{content:'';position:absolute;width:10px;height:10px;border-color:var(--accent);border-style:solid}
134
+ .table-card::before{top:0;left:0;border-width:2px 0 0 2px}
135
+ .table-card::after{bottom:0;right:0;border-width:0 2px 2px 0}
136
+ .table-card h3{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:600;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:16px}
137
+ .data-table{width:100%;border-collapse:collapse;font-size:13px}
138
+ .data-table thead th{text-align:left;padding:9px 13px;border-bottom:1px solid var(--border);color:var(--dim);font-size:10px;letter-spacing:2px;text-transform:uppercase;white-space:nowrap;cursor:pointer;user-select:none}
139
+ .data-table thead th:hover{color:var(--accent)}
140
+ .data-table tbody td{padding:9px 13px;border-bottom:1px solid rgba(30,48,72,.5);white-space:nowrap}
141
+ .data-table tbody tr:hover{background:rgba(0,212,255,.04)}
142
+ .data-table tbody tr:last-child td{border-bottom:none}
143
+ .data-table tbody tr.own-row{background:rgba(0,212,255,.06);border-left:3px solid var(--accent)}
144
+ .rank-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700}
145
+ .r1{background:var(--gold);color:#000}
146
+ .r2{background:#aaa;color:#000}
147
+ .r3{background:#cd7f32;color:#000}
148
+ .rn{background:var(--bg3);color:var(--dim)}
149
+ .tier{display:inline-block;padding:2px 9px;font-size:10px;font-family:'Orbitron',sans-serif;letter-spacing:1px}
150
+ .td{background:rgba(0,212,255,.15);color:var(--accent);border:1px solid var(--accent)}
151
+ .tp{background:rgba(200,200,255,.1);color:#b0c4de;border:1px solid #b0c4de}
152
+ .tg{background:rgba(255,215,0,.1);color:var(--gold);border:1px solid var(--gold)}
153
+ .ts{background:rgba(170,170,170,.1);color:#aaa;border:1px solid #aaa}
154
+ .tb{background:rgba(205,127,50,.1);color:#cd7f32;border:1px solid #cd7f32}
155
+ .weapon-tag{display:inline-block;padding:2px 8px;border:1px solid var(--border);font-size:11px;color:var(--accent)}
156
+ .armor-tag{display:inline-block;padding:2px 8px;border:1px solid var(--border);font-size:11px;color:var(--gold)}
157
+ .kd-g{color:var(--green)}.kd-o{color:var(--accent)}.kd-b{color:var(--red)}
158
+ .gold-val{color:var(--gold);font-family:'Orbitron',sans-serif;font-size:12px}
159
+ .filter-row{display:flex;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
160
+ .filter-row label{font-size:11px;color:var(--dim);letter-spacing:1px}
161
+ .filter-row select{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:12px;padding:6px 12px;outline:none;cursor:pointer}
162
+ .filter-row select:focus{border-color:var(--accent)}
163
+ .anon-banner{background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.2);border-left:3px solid var(--accent);padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
164
+ .anon-text{font-size:12px;color:var(--dim);letter-spacing:1px}
165
+ .anon-text span{color:var(--accent)}
166
+ .locked-section{position:relative;overflow:hidden}
167
+ .locked-overlay{position:absolute;inset:0;background:rgba(6,10,15,.87);backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;z-index:10}
168
+ .locked-icon{font-size:30px}
169
+ .locked-text{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;color:var(--dim);text-align:center}
170
+
171
+ /* ── PROFILE PAGE ── */
172
+ .profile-body{padding:28px;max-width:1200px;margin:0 auto}
173
+ .profile-header{background:linear-gradient(135deg,#060f1a,#0d1f33);border:1px solid var(--border);border-top:3px solid var(--accent);padding:30px 32px;margin-bottom:28px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden}
174
+ .profile-header::after{content:'';position:absolute;top:0;right:0;width:300px;height:100%;background:radial-gradient(ellipse at right,rgba(0,212,255,.07),transparent 70%)}
175
+ .profile-avatar{width:72px;height:72px;background:var(--accent);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:24px;font-weight:900;color:var(--bg);flex-shrink:0}
176
+ .profile-info{flex:1}
177
+ .profile-username{font-family:'Orbitron',sans-serif;font-size:24px;font-weight:700;color:var(--accent);letter-spacing:3px;text-shadow:var(--glow);margin-bottom:4px}
178
+ .profile-email{font-size:12px;color:var(--dim);letter-spacing:1px;margin-bottom:8px}
179
+ .profile-badges{display:flex;gap:8px;flex-wrap:wrap}
180
+ .profile-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}
181
+ @media(max-width:900px){.profile-grid{grid-template-columns:1fr}}
182
+ .profile-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-bottom:24px}
183
+ .pstat{background:var(--bg3);border:1px solid var(--border);padding:14px 16px;text-align:center;transition:border-color .2s}
184
+ .pstat:hover{border-color:var(--accent)}
185
+ .pstat-val{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:var(--accent)}
186
+ .pstat-lbl{font-size:10px;color:var(--dim);letter-spacing:2px;margin-top:3px}
187
+ .edit-section{margin-bottom:24px}
188
+ .edit-section-title{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
189
+ .edit-row{display:flex;gap:10px;align-items:flex-end}
190
+ .edit-row .form-group{flex:1;margin-bottom:0}
191
+ .edit-row .btn{white-space:nowrap;padding:10px 16px}
192
+ .danger-zone{background:rgba(255,68,68,.04);border:1px solid rgba(255,68,68,.25);border-left:3px solid var(--red);padding:20px}
193
+ .danger-title{font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;color:var(--red);margin-bottom:14px;display:flex;justify-content:space-between;}
194
+ .sidebar-card{background:var(--bg2);border:1px solid var(--border);padding:20px;margin-bottom:20px;position:relative}
195
+ .sidebar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent)}
196
+ .sidebar-title{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:600;letter-spacing:3px;color:var(--dim);margin-bottom:16px;text-transform:uppercase}
197
+ .stat-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid rgba(30,48,72,.4)}
198
+ .stat-row:last-child{border-bottom:none}
199
+ .stat-row-label{font-size:12px;color:var(--dim);letter-spacing:1px}
200
+ .stat-row-val{font-size:13px;color:var(--text);font-family:'Orbitron',sans-serif;font-size:12px}
201
+ .rank-bar{height:6px;background:var(--bg3);margin-top:8px;overflow:hidden}
202
+ .rank-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));transition:width 1s ease;border-radius:0}
203
+ .progress-label{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-top:5px}
204
+
205
+ /* loading / overlays */
206
+ #loading-screen{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;z-index:9998;transition:opacity .4s}
207
+ #loading-screen.hidden{opacity:0;pointer-events:none}
208
+ .loading-title{font-family:'Orbitron',sans-serif;font-size:13px;letter-spacing:4px;color:var(--accent)}
209
+
210
+ .error-banner{background:rgba(255,68,68,.1);border:1px solid var(--red);color:var(--red);padding:12px 18px;font-size:12px;letter-spacing:1px;margin-bottom:18px;display:none}
211
+
212
+ /* Delete Modal */
213
+ #delete-modal { position:fixed; inset:0; background:rgba(6,10,15,.95); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px; }
214
+ .delete-box { background:var(--bg2); border:1px solid var(--red); padding:32px; width:100%; max-width:440px; box-shadow: 0 0 40px rgba(255,68,68,.15); position:relative; }
215
+ .delete-box::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--red); }
216
+ </style>
217
+ </head>
218
+ <body>
219
+
220
+ <div id="loading-screen">
221
+ <div class="spinner"></div>
222
+ <div class="loading-title">CONNECTING TO WARZONE DATABASE...</div>
223
+ </div>
224
+
225
+ <div class="page" id="page-login">
226
+ <nav class="nav">
227
+ <div class="nav-brand" onclick="goto('login')">
228
+ <div class="nav-hex">⬑</div>
229
+ <div><div class="nav-title">WARZONE</div><div class="nav-sub">COMMAND CENTER</div></div>
230
+ </div>
231
+ <div class="nav-right">
232
+ <div class="nav-badge"><div class="live-dot"></div>&nbsp;LIVE</div>
233
+ </div>
234
+ </nav>
235
+
236
+ <div class="auth-body">
237
+ <div class="auth-hero">
238
+ <div class="hero-icon">🎯</div>
239
+ <div class="hero-title">OPERATOR ACCESS</div>
240
+ <div class="hero-sub">Sign in to access full combat analytics, personal stats, and your operator profile.</div>
241
+ <div class="hero-stats" id="login-hero-stats">
242
+ <div class="hero-stat"><div class="hero-stat-val" id="hs-players">β€”</div><div class="hero-stat-lbl">PLAYERS</div></div>
243
+ <div class="hero-stat"><div class="hero-stat-val" id="hs-kills">β€”</div><div class="hero-stat-lbl">KILLS</div></div>
244
+ <div class="hero-stat"><div class="hero-stat-val" id="hs-gold">β€”</div><div class="hero-stat-lbl">GOLD</div></div>
245
+ <div class="hero-stat"><div class="hero-stat-val" id="hs-top">β€”</div><div class="hero-stat-lbl">TOP RANK</div></div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="auth-form-panel">
250
+ <div class="auth-form-box fade-in">
251
+ <div class="auth-form-title">SIGN IN</div>
252
+ <div class="auth-form-sub">ENTER YOUR CREDENTIALS TO PROCEED</div>
253
+
254
+ <div id="login-alert" class="alert"></div>
255
+
256
+ <div class="form-group">
257
+ <label>Email Address</label>
258
+ <input type="email" id="login-email" placeholder="operator@warzone.gg" />
259
+ </div>
260
+ <div class="form-group">
261
+ <label>Password</label>
262
+ <input type="password" id="login-password" placeholder="β€’β€’β€’β€’β€’β€’β€’β€’" onkeydown="if(event.key==='Enter')doLogin()" />
263
+ </div>
264
+ <button class="btn btn-primary" id="login-btn" onclick="doLogin()" style="width:100%;font-size:13px;padding:12px;font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:4px">AUTHENTICATE</button>
265
+
266
+ <div style="text-align:center;margin-top:18px;font-size:12px;color:var(--dim)">
267
+ No account? <span class="auth-link" onclick="goto('register')">Register here</span>
268
+ &nbsp;Β·&nbsp;
269
+ <span class="auth-link" onclick="goto('dashboard')">Browse as guest</span>
270
+ </div>
271
+
272
+ <div class="test-panel">
273
+ <div class="test-panel-title">βš— TEST ACCOUNTS β€” CLICK TO AUTO-FILL</div>
274
+ <div id="test-accounts-list"></div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="page" id="page-register">
282
+ <nav class="nav">
283
+ <div class="nav-brand" onclick="goto('login')">
284
+ <div class="nav-hex">⬑</div>
285
+ <div><div class="nav-title">WARZONE</div><div class="nav-sub">COMMAND CENTER</div></div>
286
+ </div>
287
+ <div class="nav-right">
288
+ <button class="btn btn-outline" onclick="goto('login')" style="font-size:11px;padding:6px 16px">← BACK TO LOGIN</button>
289
+ </div>
290
+ </nav>
291
+
292
+ <div class="auth-body">
293
+ <div class="auth-hero">
294
+ <div class="hero-icon">⚑</div>
295
+ <div class="hero-title">ENLIST NOW</div>
296
+ <div class="hero-sub">Create your operator profile and join the combat leaderboard. Track your kills, rank up, and dominate.</div>
297
+ <div style="margin-top:24px;text-align:center">
298
+ <div style="font-size:11px;color:var(--dim);letter-spacing:2px;margin-bottom:16px">WHAT YOU GET</div>
299
+ <div style="display:flex;flex-direction:column;gap:10px;width:100%;max-width:280px">
300
+ <div style="background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);padding:10px 16px;font-size:12px;color:var(--text);letter-spacing:1px">πŸ“Š Full analytics dashboard</div>
301
+ <div style="background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);padding:10px 16px;font-size:12px;color:var(--text);letter-spacing:1px">πŸ† Global leaderboard ranking</div>
302
+ <div style="background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);padding:10px 16px;font-size:12px;color:var(--text);letter-spacing:1px">βš” Personal stat tracking</div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="auth-form-panel">
308
+ <div class="auth-form-box fade-in">
309
+ <div class="auth-form-title">CREATE ACCOUNT</div>
310
+ <div class="auth-form-sub">REGISTER YOUR OPERATOR PROFILE</div>
311
+
312
+ <div id="reg-alert" class="alert"></div>
313
+
314
+ <div class="form-group"><label>Username (your callsign)</label><input type="text" id="reg-username" placeholder="e.g. ShadowSniper99" maxlength="24" /></div>
315
+ <div class="form-group"><label>Email Address</label><input type="email" id="reg-email" placeholder="operator@warzone.gg" /></div>
316
+ <div class="form-group"><label>Password</label><input type="password" id="reg-password" placeholder="Min 6 characters" /></div>
317
+ <div class="form-group"><label>Confirm Password</label><input type="password" id="reg-confirm" placeholder="Repeat password" onkeydown="if(event.key==='Enter')doRegister()" /></div>
318
+
319
+ <button class="btn btn-primary" id="reg-btn" onclick="doRegister()" style="width:100%;font-size:13px;padding:12px;font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:4px">ENLIST</button>
320
+
321
+ <div style="text-align:center;margin-top:18px;font-size:12px;color:var(--dim)">
322
+ Already enlisted? <span class="auth-link" onclick="goto('login')">Sign in</span>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="page" id="page-dashboard">
330
+ <nav class="nav">
331
+ <div class="nav-brand" onclick="goto('dashboard')">
332
+ <div class="nav-hex">⬑</div>
333
+ <div><div class="nav-title">WARZONE</div><div class="nav-sub">COMMAND CENTER</div></div>
334
+ </div>
335
+ <div class="nav-right">
336
+ <div class="nav-badge"><div class="live-dot"></div>&nbsp;LIVE</div>
337
+ <span id="dash-last-refresh" style="font-size:11px;color:var(--dim)">β€”</span>
338
+ <button class="btn btn-ghost" onclick="loadData()" style="font-size:11px;padding:6px 14px">⟳ REFRESH</button>
339
+ <button class="btn btn-outline" id="dash-login-btn" onclick="goto('login')" style="font-size:11px;padding:6px 14px">⚿ LOGIN</button>
340
+ <div id="dash-user-panel" style="display:none;align-items:center;gap:10px">
341
+ <span style="font-size:11px;color:var(--dim)">β–Έ</span>
342
+ <span id="dash-username" style="font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;color:var(--accent)">β€”</span>
343
+ <button class="btn btn-ghost" onclick="goto('profile')" style="font-size:11px;padding:5px 12px">πŸ‘€ PROFILE</button>
344
+ <button class="btn btn-danger" onclick="doLogout(false)" style="font-size:11px;padding:5px 12px">LOGOUT</button>
345
+ </div>
346
+ </div>
347
+ </nav>
348
+
349
+ <div class="dash-body">
350
+ <div class="error-banner" id="dash-error"></div>
351
+
352
+ <div class="anon-banner" id="dash-anon-banner">
353
+ <div class="anon-text">πŸ‘ Viewing <span>public data only</span> β€” Login to unlock full stats, charts, K/D ratios and your personal profile.</div>
354
+ <div style="display:flex;gap:10px">
355
+ <button class="btn btn-outline" onclick="goto('login')" style="font-size:11px;padding:5px 14px">⚿ LOGIN</button>
356
+ <button class="btn btn-ghost" onclick="goto('register')" style="font-size:11px;padding:5px 14px">+ REGISTER</button>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="section-title">GLOBAL STATS</div>
361
+ <div class="kpi-row">
362
+ <div class="kpi-card c"><div class="kpi-icon">🎯</div><div class="kpi-label">Total Players</div><div class="kpi-value" id="dk-players">β€”</div><div class="kpi-sub">Registered combatants</div></div>
363
+ <div class="kpi-card g"><div class="kpi-icon">πŸͺ™</div><div class="kpi-label">Gold in Circulation</div><div class="kpi-value" id="dk-gold">β€”</div><div class="kpi-sub">Combined balance</div></div>
364
+ <div class="kpi-card c"><div class="kpi-icon">πŸ†</div><div class="kpi-label">Top Rank</div><div class="kpi-value" id="dk-toprank">β€”</div><div class="kpi-sub" id="dk-topplayer">β€”</div></div>
365
+ <div class="kpi-card e"><div class="kpi-icon">πŸ“ˆ</div><div class="kpi-label">Best Win Rate</div><div class="kpi-value" id="dk-topwr">β€”</div><div class="kpi-sub" id="dk-topwrplayer">β€”</div></div>
366
+ <div class="kpi-card r" id="dk-kills-card" style="display:none"><div class="kpi-icon">πŸ’€</div><div class="kpi-label">Total Kills</div><div class="kpi-value" id="dk-kills">β€”</div><div class="kpi-sub">All players combined</div></div>
367
+ <div class="kpi-card e" id="dk-hs-card" style="display:none"><div class="kpi-icon">🎯</div><div class="kpi-label">Headshots</div><div class="kpi-value" id="dk-hs">β€”</div><div class="kpi-sub">Precision kills</div></div>
368
+ <div class="kpi-card r" id="dk-play-card" style="display:none"><div class="kpi-icon">⏱</div><div class="kpi-label">Playtime hrs</div><div class="kpi-value" id="dk-play">β€”</div><div class="kpi-sub">Combined hours</div></div>
369
+ </div>
370
+
371
+ <div class="section-title">ANALYTICS</div>
372
+ <div class="locked-section" id="dash-charts-section">
373
+ <div class="charts-row">
374
+ <div class="chart-card"><h3>Top 5 Rank Points</h3><canvas id="rankChart"></canvas></div>
375
+ <div class="chart-card"><h3>Weapon Loadouts</h3><canvas id="weaponChart"></canvas></div>
376
+ <div class="chart-card"><h3>K/D Ratio β€” Top 8</h3><canvas id="kdChart"></canvas></div>
377
+ </div>
378
+ <div class="charts-row" style="grid-template-columns:1fr 1fr">
379
+ <div class="chart-card"><h3>Gold Holdings β€” Top 5</h3><canvas id="goldChart"></canvas></div>
380
+ <div class="chart-card"><h3>Wins vs Losses</h3><canvas id="winChart"></canvas></div>
381
+ </div>
382
+ <div class="locked-overlay" id="charts-lock">
383
+ <div class="locked-icon">πŸ”’</div>
384
+ <div class="locked-text">FULL ANALYTICS β€” AUTHORISED PERSONNEL ONLY</div>
385
+ <button class="btn btn-outline" onclick="goto('login')" style="font-size:11px;padding:6px 18px;margin-top:4px">⚿ LOGIN TO UNLOCK</button>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="section-title" style="margin-top:28px">PLAYER LEADERBOARD</div>
390
+ <div class="filter-row" id="dash-filters" style="display:none">
391
+ <label>WEAPON</label><select id="filter-weapon" onchange="renderTable()"><option value="">ALL</option></select>
392
+ <label>SORT BY</label>
393
+ <select id="sort-by" onchange="renderTable()">
394
+ <option value="rank_points">Rank Points</option>
395
+ <option value="kills">Kills</option>
396
+ <option value="gold">Gold</option>
397
+ <option value="kd">K/D</option>
398
+ <option value="headshots">Headshots</option>
399
+ </select>
400
+ </div>
401
+ <div class="table-card">
402
+ <h3>βš” ACTIVE ROSTER</h3>
403
+ <table class="data-table">
404
+ <thead id="lb-head"></thead>
405
+ <tbody id="lb-body"></tbody>
406
+ </table>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="page" id="page-profile">
412
+ <nav class="nav">
413
+ <div class="nav-brand" onclick="goto('dashboard')">
414
+ <div class="nav-hex">⬑</div>
415
+ <div><div class="nav-title">WARZONE</div><div class="nav-sub">COMMAND CENTER</div></div>
416
+ </div>
417
+ <div class="nav-right">
418
+ <button class="btn btn-ghost" onclick="goto('dashboard')" style="font-size:11px;padding:6px 14px">← DASHBOARD</button>
419
+ <span id="prof-username-nav" style="font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;color:var(--accent)">β€”</span>
420
+ <button class="btn btn-danger" onclick="doLogout(false)" style="font-size:11px;padding:5px 12px">LOGOUT</button>
421
+ </div>
422
+ </nav>
423
+
424
+ <div class="profile-body">
425
+
426
+ <div class="profile-header">
427
+ <div class="profile-avatar" id="prof-avatar">?</div>
428
+ <div class="profile-info">
429
+ <div class="profile-username" id="prof-display-name">β€”</div>
430
+ <div class="profile-email" id="prof-email">β€”</div>
431
+ <div class="profile-badges">
432
+ <span class="tier" id="prof-tier-badge">β€”</span>
433
+ <span style="background:rgba(176,68,255,.15);border:1px solid var(--purple);padding:2px 10px;font-size:10px;font-family:'Orbitron',sans-serif;color:var(--purple)" id="prof-level-badge">β€”</span>
434
+ <span style="background:rgba(255,215,0,.1);border:1px solid var(--gold);padding:2px 10px;font-size:10px;font-family:'Share Tech Mono',monospace;color:var(--gold)" id="prof-gold-badge">β€”</span>
435
+ </div>
436
+ </div>
437
+ <div style="text-align:right;margin-left:auto">
438
+ <div style="font-size:10px;color:var(--dim);letter-spacing:2px;margin-bottom:4px">RANK POINTS</div>
439
+ <div style="font-family:'Orbitron',sans-serif;font-size:36px;font-weight:900;color:var(--accent);text-shadow:var(--glow)" id="prof-rank-pts">β€”</div>
440
+ <div class="rank-bar" style="width:180px;margin-top:8px"><div class="rank-bar-fill" id="prof-rank-bar" style="width:0%"></div></div>
441
+ <div class="progress-label" style="width:180px"><span id="prof-tier-cur">β€”</span><span id="prof-tier-next">β€”</span></div>
442
+ </div>
443
+ </div>
444
+
445
+ <div class="profile-grid">
446
+ <div>
447
+ <div class="section-title">COMBAT STATS</div>
448
+ <div class="profile-stats-grid" id="prof-stats-grid"></div>
449
+
450
+ <div class="section-title">ACCOUNT SETTINGS</div>
451
+ <div class="card" style="margin-bottom:20px">
452
+ <div class="edit-section-title">CHANGE CALLSIGN (USERNAME)</div>
453
+ <div id="prof-username-alert" class="alert"></div>
454
+ <div class="edit-row">
455
+ <div class="form-group"><label>New Username</label><input type="text" id="prof-new-username" placeholder="Enter new callsign" maxlength="24" /></div>
456
+ <button class="btn btn-primary" onclick="updateUsername()" style="font-size:11px">UPDATE</button>
457
+ </div>
458
+ </div>
459
+
460
+ <div class="card" style="margin-bottom:20px">
461
+ <div class="edit-section-title">CHANGE EMAIL ADDRESS</div>
462
+ <div id="prof-email-alert" class="alert"></div>
463
+ <div class="edit-row">
464
+ <div class="form-group"><label>New Email</label><input type="email" id="prof-new-email" placeholder="new@email.com" /></div>
465
+ <button class="btn btn-primary" onclick="updateEmail()" style="font-size:11px">UPDATE</button>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="card" style="margin-bottom:20px">
470
+ <div class="edit-section-title">CHANGE PASSWORD</div>
471
+ <div id="prof-pw-alert" class="alert"></div>
472
+ <div class="form-group">
473
+ <label>Current Password</label>
474
+ <input type="password" id="prof-old-pw" placeholder="Verify current password" />
475
+ </div>
476
+ <div class="edit-row">
477
+ <div class="form-group"><label>New Password</label><input type="password" id="prof-new-pw" placeholder="Min 6 characters" /></div>
478
+ <div class="form-group"><label>Confirm New</label><input type="password" id="prof-confirm-pw" placeholder="Repeat password" /></div>
479
+ <button class="btn btn-primary" onclick="updatePassword()" style="font-size:11px">UPDATE</button>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="danger-zone">
484
+ <div class="danger-title"><span>⚠ DANGER ZONE</span></div>
485
+ <p style="font-size:12px;color:var(--dim);line-height:1.7;margin-bottom:16px">Manage session security or permanently erase your operator data from the servers.</p>
486
+ <div style="display:flex; gap:12px;">
487
+ <button class="btn btn-danger" onclick="doLogout(true)" style="font-size:11px;padding:9px 18px">⏻ LOG OUT ALL SESSIONS</button>
488
+ <button class="btn btn-danger" onclick="showDeleteModal()" style="font-size:11px;padding:9px 18px; border-color:var(--red); color:var(--red);">☠ DELETE ACCOUNT</button>
489
+ </div>
490
+ </div>
491
+ </div>
492
+
493
+ <div>
494
+ <div class="sidebar-card">
495
+ <div class="sidebar-title">RANK BREAKDOWN</div>
496
+ <div class="stat-row"><span class="stat-row-label">Current Tier</span><span class="stat-row-val" id="sb-tier">β€”</span></div>
497
+ <div class="stat-row"><span class="stat-row-label">Rank Points</span><span class="stat-row-val" id="sb-rp">β€”</span></div>
498
+ <div class="stat-row"><span class="stat-row-label">Next Tier At</span><span class="stat-row-val" id="sb-next">β€”</span></div>
499
+ <div class="stat-row"><span class="stat-row-label">Points Needed</span><span class="stat-row-val" id="sb-needed" style="color:var(--gold)">β€”</span></div>
500
+ </div>
501
+
502
+ <div class="sidebar-card">
503
+ <div class="sidebar-title">CURRENT LOADOUT</div>
504
+ <div class="stat-row"><span class="stat-row-label">Weapon</span><span class="weapon-tag" id="sb-weapon">β€”</span></div>
505
+ <div class="stat-row"><span class="stat-row-label">Armor</span><span class="armor-tag" id="sb-armor">β€”</span></div>
506
+ <div class="stat-row"><span class="stat-row-label">Level</span><span class="stat-row-val" id="sb-level" style="color:var(--purple)">β€”</span></div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <div id="delete-modal" style="display:none;">
514
+ <div class="delete-box">
515
+ <div style="font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;letter-spacing:3px;color:var(--red);margin-bottom:12px;text-align:center;">PERMANENT DELETION</div>
516
+
517
+ <div id="del-alert" class="alert" style="display:none"></div>
518
+
519
+ <div id="delete-step-1">
520
+ <p style="font-size:12px;color:var(--dim);line-height:1.6;margin-bottom:20px;text-align:center;">This action cannot be undone. All stats and progress will be permanently wiped. Verify your password to receive a deletion code.</p>
521
+ <div class="form-group"><label>Verify Password</label><input type="password" id="del-pw1" /></div>
522
+ <div class="form-group"><label>Confirm Password</label><input type="password" id="del-pw2" /></div>
523
+ <div style="display:flex;gap:10px;margin-top:20px;">
524
+ <button class="btn btn-ghost" onclick="cancelDelete()" style="flex:1">CANCEL</button>
525
+ <button class="btn btn-danger" id="del-btn-send" onclick="sendDeleteCode()" style="flex:2;background:rgba(255,68,68,.1)">SEND CODE</button>
526
+ </div>
527
+ </div>
528
+
529
+ <div id="delete-step-2" style="display:none;">
530
+ <p style="font-size:12px;color:var(--dim);line-height:1.6;margin-bottom:20px;text-align:center;">We've sent a 6-digit confirmation code to your email. Enter it below to execute the deletion sequence.</p>
531
+ <div class="form-group"><label>6-Digit Code</label><input type="text" id="del-code" placeholder="------" style="text-align:center;font-size:24px;letter-spacing:10px;" maxlength="6" /></div>
532
+ <div style="display:flex;gap:10px;margin-top:20px;">
533
+ <button class="btn btn-ghost" onclick="cancelDelete()" style="flex:1">CANCEL</button>
534
+ <button class="btn btn-danger" id="del-btn-confirm" onclick="confirmDelete()" style="flex:2;background:var(--red);color:#fff;">DELETE FOREVER</button>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+
540
+ <script>
541
+ // ── CONFIG ──
542
+ const SB_URL = 'https://kkezjquxsrpifsbvggzs.supabase.co';
543
+ const SB_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtrZXpqcXV4c3JwaWZzYnZnZ3pzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODA2NjI4MDksImV4cCI6MjA5NjIzODgwOX0.LkuUHbFIKswz7QEYrm9-7O6WnjvFn9WWo6UtE5o0bAQ';
544
+
545
+ const TEST_ACCOUNTS = [
546
+ { username:'ShadowSniper99', email:'shadowsniper99@warzone.gg' },
547
+ { username:'NightHawkX', email:'nighthawkx@warzone.gg' },
548
+ { username:'BlazeFury', email:'blazefury@warzone.gg' },
549
+ { username:'PixelDestroyer', email:'pixeldestroyer@warzone.gg' },
550
+ ];
551
+ const TEST_PASSWORD = 'Warzone2024!';
552
+
553
+ // ── STATE ──
554
+ let players = [];
555
+ let charts = {};
556
+ let authUser = null;
557
+ let currentPage = '';
558
+ let currentDeletionCode = null;
559
+
560
+ // ── HELPERS ──
561
+ const fmt = n => n >= 1e6 ? (n/1e6).toFixed(1)+'M' : n >= 1e3 ? (n/1e3).toFixed(1)+'K' : (n||0).toLocaleString();
562
+ const $ = id => document.getElementById(id);
563
+ function setAlert(elId, type, msg) {
564
+ const el = $(elId); if(el) { el.className = `alert ${type}`; el.textContent = msg; el.style.display = 'block'; }
565
+ }
566
+ function clearAlert(elId) { const el=$(elId); if(el) el.style.display='none'; }
567
+
568
+ function getTier(pts) {
569
+ if (pts >= 3000) return { name:'DIAMOND', cls:'td', next: null, nextPts: null };
570
+ if (pts >= 2500) return { name:'PLATINUM', cls:'tp', next:'DIAMOND', nextPts: 3000 };
571
+ if (pts >= 1800) return { name:'GOLD', cls:'tg', next:'PLATINUM',nextPts: 2500 };
572
+ if (pts >= 1200) return { name:'SILVER', cls:'ts', next:'GOLD', nextPts: 1800 };
573
+ return { name:'BRONZE', cls:'tb', next:'SILVER', nextPts: 1200 };
574
+ }
575
+
576
+ // ── ROUTING ──
577
+ function goto(page) {
578
+ document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
579
+ const target = $(`page-${page}`);
580
+ if(target) target.classList.add('active');
581
+ currentPage = page;
582
+ window.scrollTo(0,0);
583
+ if (page === 'dashboard') refreshDashNav();
584
+ if (page === 'profile') { if (!authUser) { goto('login'); return; } loadProfile(); }
585
+ if (page === 'login') buildTestAccounts();
586
+ }
587
+
588
+ function refreshDashNav() {
589
+ const li = isLoggedIn();
590
+ $('dash-login-btn').style.display = li ? 'none' : '';
591
+ $('dash-user-panel').style.display = li ? 'flex' : 'none';
592
+ if (li && authUser) $('dash-username').textContent = authUser.username || authUser.email;
593
+ $('dash-anon-banner').style.display = li ? 'none' : '';
594
+ ['dk-kills-card','dk-hs-card','dk-play-card'].forEach(id => { const el=$(id); if(el) el.style.display = li ? '' : 'none'; });
595
+ $('charts-lock').style.display = li ? 'none' : 'flex';
596
+ $('dash-filters').style.display = li ? 'flex' : 'none';
597
+ }
598
+
599
+ // ── AUTH & SESSIONS ──
600
+ function isLoggedIn() { return authUser !== null; }
601
+ function isBotAccount(email) { return email && email.endsWith('@warzone.gg'); }
602
+
603
+ function parseUrlHash() {
604
+ const hash = window.location.hash.substring(1);
605
+ if (!hash) return null;
606
+ const params = new URLSearchParams(hash);
607
+ const access_token = params.get('access_token');
608
+ if (access_token) {
609
+ return { access_token, email: params.get('email') || '', uid: params.get('user_id') || '' };
610
+ }
611
+ return null;
612
+ }
613
+
614
+ async function doLogin() {
615
+ const email = $('login-email').value.trim();
616
+ const pass = $('login-password').value;
617
+ clearAlert('login-alert');
618
+ if (!email || !pass) { setAlert('login-alert','error','⚠ EMAIL AND PASSWORD REQUIRED'); return; }
619
+
620
+ const btn = $('login-btn');
621
+ btn.disabled = true; btn.textContent = 'AUTHENTICATING...';
622
+
623
+ try {
624
+ const res = await fetch(`${SB_URL}/auth/v1/token?grant_type=password`, {
625
+ method:'POST', headers:{'apikey':SB_KEY,'Content-Type':'application/json'}, body:JSON.stringify({email,password:pass})
626
+ });
627
+ const data = await res.json();
628
+ if (!res.ok) throw new Error(data.error_description || data.message || 'Login failed');
629
+ await completeLoginSession(data);
630
+ } catch(e) {
631
+ setAlert('login-alert','error',`⚠ ${e.message.toUpperCase()}`);
632
+ } finally {
633
+ btn.disabled=false; btn.textContent='AUTHENTICATE';
634
+ }
635
+ }
636
+
637
+ async function completeLoginSession(authData) {
638
+ const userId = authData.user?.id;
639
+ let username = "Operator";
640
+ if (authData.user && authData.user.email) username = authData.user.email.split('@')[0];
641
+
642
+ const sr = await fetch(`${SB_URL}/rest/v1/player_stats?id=eq.${userId}&select=*`, {
643
+ headers:{'apikey':SB_KEY,'Authorization':`Bearer ${authData.access_token}`}
644
+ });
645
+ const sd = await sr.json();
646
+
647
+ if (!sd || sd.length === 0) {
648
+ await fetch(`${SB_URL}/rest/v1/player_stats`, {
649
+ method:'POST',
650
+ headers:{ 'apikey':SB_KEY, 'Authorization':`Bearer ${authData.access_token}`, 'Content-Type':'application/json', 'Prefer':'return=minimal' },
651
+ body:JSON.stringify({ id: userId, username: username, kills: 0, deaths: 0, rank_points: 1000, gold: 0, level: 1, equipped_weapon: 'Pistol', equipped_armor: 'None', headshots: 0, wins: 0, losses: 0, playtime_hours: 0 })
652
+ });
653
+ } else if (sd[0].username) {
654
+ username = sd[0].username;
655
+ }
656
+
657
+ authUser = { id:userId, email:authData.user?.email, username, token:authData.access_token };
658
+ if (!isBotAccount(authUser.email)) localStorage.setItem('warzone_session', JSON.stringify(authUser));
659
+
660
+ $('login-email').value=''; $('login-password').value='';
661
+ window.location.hash = "";
662
+ await loadData();
663
+ goto('dashboard');
664
+ }
665
+
666
+ async function doRegister() {
667
+ const username = $('reg-username').value.trim();
668
+ const email = $('reg-email').value.trim();
669
+ const pass = $('reg-password').value;
670
+ const confirm = $('reg-confirm').value;
671
+ clearAlert('reg-alert');
672
+
673
+ if (!username || !email || !pass) { setAlert('reg-alert','error','⚠ ALL FIELDS REQUIRED'); return; }
674
+ if (pass !== confirm) { setAlert('reg-alert','error','⚠ PASSWORDS DO NOT MATCH'); return; }
675
+ if (pass.length < 6) { setAlert('reg-alert','error','⚠ PASSWORD MUST BE AT LEAST 6 CHARACTERS'); return; }
676
+ if (!/^[a-zA-Z0-9_]+$/.test(username)) { setAlert('reg-alert','error','⚠ USERNAME: LETTERS, NUMBERS AND UNDERSCORES ONLY'); return; }
677
+
678
+ const btn = $('reg-btn');
679
+ btn.disabled=true; btn.textContent='ENLIST...';
680
+ try {
681
+ const authRes = await fetch(`${SB_URL}/auth/v1/signup`, {
682
+ method:'POST', headers:{'apikey':SB_KEY,'Content-Type':'application/json'}, body:JSON.stringify({email,password:pass})
683
+ });
684
+ const authData = await authRes.json();
685
+ if (!authRes.ok) throw new Error(authData.error_description || authData.message || 'Registration failed');
686
+
687
+ const userId = authData.user?.id;
688
+ const token = authData.access_token || SB_KEY;
689
+
690
+ await fetch(`${SB_URL}/rest/v1/player_stats`, {
691
+ method:'POST',
692
+ headers:{ 'apikey':SB_KEY, 'Authorization':`Bearer ${token}`, 'Content-Type':'application/json', 'Prefer':'return=minimal' },
693
+ body:JSON.stringify({ id:userId, username, kills:0, deaths:0, rank_points:1000, gold:0, level:1, equipped_weapon:'Pistol', equipped_armor:'None', headshots:0, wins:0, losses:0, playtime_hours:0 })
694
+ });
695
+
696
+ setAlert('reg-alert','success','βœ“ CONFIRMATION EMAIL SENT via RESEND! Check inbox to activate.');
697
+ } catch(e) {
698
+ setAlert('reg-alert','error',`⚠ ${e.message.toUpperCase()}`);
699
+ } finally {
700
+ btn.disabled=false; btn.textContent='ENLIST';
701
+ }
702
+ }
703
+
704
+ async function doLogout(global = false) {
705
+ if (global) {
706
+ if (authUser && isBotAccount(authUser.email)) {
707
+ alert("⚠ ACTION DENIED: Bot test accounts cannot be globally signed out.");
708
+ return;
709
+ }
710
+ try { await fetch(`${SB_URL}/auth/v1/logout?scope=global`, { method: 'POST', headers: { 'apikey': SB_KEY, 'Authorization': `Bearer ${authUser.token}` }}); } catch(e) {}
711
+ } else {
712
+ try { if(authUser) await fetch(`${SB_URL}/auth/v1/logout?scope=local`, { method: 'POST', headers: { 'apikey': SB_KEY, 'Authorization': `Bearer ${authUser.token}` }}); } catch(e) {}
713
+ }
714
+
715
+ authUser = null;
716
+ localStorage.removeItem('warzone_session');
717
+ players = [];
718
+ Object.values(charts).forEach(c=>c.destroy()); charts={};
719
+ await loadData();
720
+ goto('login');
721
+ }
722
+
723
+ // ── DATA & CHARTS (Simplified for brevity) ──
724
+ async function loadData() {
725
+ try {
726
+ const res = await fetch(`${SB_URL}/rest/v1/player_stats?select=*&order=rank_points.desc`, { headers:{'apikey':SB_KEY,'Authorization':`Bearer ${SB_KEY}`} });
727
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
728
+ const raw = await res.json();
729
+ players = raw.map(p => ({ ...p, kd: p.deaths > 0 ? p.kills/p.deaths : p.kills, win_rate: (p.wins+p.losses) > 0 ? p.wins/(p.wins+p.losses)*100 : 0 }));
730
+ renderKPIs(); renderCharts(); populateFilters(); renderTable();
731
+ $('dash-last-refresh').textContent = new Date().toLocaleTimeString();
732
+ $('dash-error').style.display = 'none';
733
+ } catch(e) {
734
+ $('dash-error').style.display='block'; $('dash-error').textContent=`⚠ DATABASE ERROR: ${e.message}`;
735
+ }
736
+ }
737
+
738
+ function renderKPIs() {
739
+ const top = players[0];
740
+ const topWR = [...players].sort((a,b)=>b.win_rate-a.win_rate)[0];
741
+ $('dk-players').textContent = players.length;
742
+ $('dk-gold').textContent = fmt(players.reduce((a,p)=>a+(p.gold||0),0));
743
+ $('dk-kills').textContent = fmt(players.reduce((a,p)=>a+(p.kills||0),0));
744
+ $('dk-hs').textContent = fmt(players.reduce((a,p)=>a+(p.headshots||0),0));
745
+ $('dk-play').textContent = Math.round(players.reduce((a,p)=>a+(parseFloat(p.playtime_hours)||0),0)).toLocaleString();
746
+ if (top) { $('dk-toprank').textContent=fmt(top.rank_points); $('dk-topplayer').textContent=top.username||'β€”'; }
747
+ if (topWR) { $('dk-topwr').textContent=topWR.win_rate.toFixed(0)+'%'; $('dk-topwrplayer').textContent=topWR.username||'β€”'; }
748
+ }
749
+
750
+ const CC = { c:'#00d4ff',r:'#ff4444',g:'#ffd700',e:'#39ff14',p:'#b044ff',o:'#ff8800',b:'#4488ff' };
751
+ function renderCharts() {
752
+ Object.values(charts).forEach(c=>c.destroy()); charts={};
753
+ if (!isLoggedIn() || !$('rankChart')) return;
754
+ try {
755
+ Chart.defaults.color='#4a7a9b'; Chart.defaults.font.family="'Share Tech Mono',monospace";
756
+ const top5=players.slice(0,5), top8=players.slice(0,8);
757
+ charts.rank = new Chart($('rankChart'), { type:'bar', data:{ labels:top5.map(p=>p.username), datasets:[{label:'Rank Points',data:top5.map(p=>p.rank_points),backgroundColor:top5.map((_,i)=>i===0?CC.g:i===1?CC.c:CC.b+'99'),borderWidth:0,borderRadius:2}] }, options:{responsive:true,maintainAspectRatio:true,plugins:{legend:{display:false}},scales:{x:{grid:{color:'#1e304840'},ticks:{color:'#4a7a9b',font:{size:10}}},y:{grid:{color:'#1e304840'},ticks:{color:'#4a7a9b',font:{size:10}}}}}});
758
+ const wm={}; players.forEach(p=>{const w=p.equipped_weapon||'Unknown';wm[w]=(wm[w]||0)+1;});
759
+ charts.weapon = new Chart($('weaponChart'), { type:'doughnut', data:{ labels:Object.keys(wm),datasets:[{data:Object.values(wm),backgroundColor:[CC.c,CC.r,CC.g,CC.e,CC.p,CC.o,CC.b],borderColor:'#060a0f',borderWidth:3}] }, options:{responsive:true,maintainAspectRatio:true,cutout:'65%',plugins:{legend:{position:'right',labels:{color:'#cee8ff',font:{size:10},padding:8,boxWidth:10}}}}});
760
+ charts.kd = new Chart($('kdChart'), { type:'bar', data:{ labels:top8.map(p=>p.username), datasets:[{label:'K/D',data:top8.map(p=>+p.kd.toFixed(2)),backgroundColor:top8.map(p=>p.kd>=3?CC.g+'cc':p.kd>=2?CC.e+'cc':p.kd>=1?CC.c+'cc':CC.r+'cc'),borderWidth:0,borderRadius:2}] }, options:{responsive:true,maintainAspectRatio:true,plugins:{legend:{display:false}},scales:{x:{grid:{color:'#1e304840'},ticks:{color:'#4a7a9b',font:{size:10}}},y:{grid:{color:'#1e304840'},ticks:{color:'#4a7a9b',font:{size:10}}}}}});
761
+ const tg=[...players].sort((a,b)=>b.gold-a.gold).slice(0,5);
762
+ charts.gold = new Chart($('goldChart'), { type:'bar', data:{ labels:tg.map(p=>p.username),datasets:[{label:'Gold',data:tg.map(p=>p.gold),backgroundColor:CC.g+'bb',borderWidth:0,borderRadius:2}] }, options:{indexAxis:'y',responsive:true,maintainAspectRatio:true,plugins:{legend:{display:false}},scales:{x:{grid:{color:'#1e304840'},ticks:{color:'#4a7a9b',font:{size:10}}},y:{grid:{display:false},ticks:{color:'#cee8ff',font:{size:11}}}}}});
763
+ const wd=[...players].sort((a,b)=>b.win_rate-a.win_rate);
764
+ charts.win = new Chart($('winChart'), { type:'bar', data:{ labels:wd.map(p=>p.username), datasets:[{label:'Wins',data:wd.map(p=>p.wins),backgroundColor:CC.e+'bb',borderWidth:0,borderRadius:2},{label:'Losses',data:wd.map(p=>p.losses),backgroundColor:CC.r+'bb',borderWidth:0,borderRadius:2}] }, options:{responsive:true,maintainAspectRatio:true,plugins:{legend:{labels:{color:'#cee8ff',font:{size:10},boxWidth:10,padding:8}}},scales:{x:{stacked:true,grid:{color:'#1e304840'},ticks:{color:'#4a7a9b',font:{size:9},maxRotation:35}},y:{stacked:true,grid:{color:'#1e304840'},ticks:{color:'#4a7a9b',font:{size:10}}}}}});
765
+ } catch(err) {}
766
+ }
767
+
768
+ function populateFilters() {
769
+ const weapons=[...new Set(players.map(p=>p.equipped_weapon).filter(Boolean))];
770
+ const sel=$('filter-weapon'); if(!sel) return;
771
+ sel.innerHTML='<option value="">ALL</option>';
772
+ weapons.forEach(w=>{const o=document.createElement('option');o.value=w;o.textContent=w;sel.appendChild(o);});
773
+ }
774
+
775
+ function renderTable() {
776
+ const li=isLoggedIn();
777
+ const lbHead = $('lb-head');
778
+ if(!lbHead) return;
779
+
780
+ lbHead.innerHTML = li
781
+ ? `<tr><th>#</th><th>PLAYER</th><th>TIER</th><th>RANK PTS</th><th>K/D</th><th>HEADSHOTS</th><th>WEAPON</th><th>ARMOR</th><th>GOLD</th><th>LEVEL</th><th>WIN RATE</th><th>PLAYTIME</th></tr>`
782
+ : `<tr><th>#</th><th>PLAYER</th><th>TIER</th><th>RANK PTS</th><th>GOLD</th><th>WIN RATE</th></tr>`;
783
+
784
+ const wf = li ? $('filter-weapon').value : '';
785
+ const sb = li ? $('sort-by').value : 'rank_points';
786
+ let data=[...players];
787
+ if (wf) data=data.filter(p=>p.equipped_weapon===wf);
788
+ data.sort((a,b)=>sb==='kd'?b.kd-a.kd:(b[sb]||0)-(a[sb]||0));
789
+ if (!li) data=data.slice(0,10);
790
+
791
+ const tbody=$('lb-body'); tbody.innerHTML='';
792
+ data.forEach((p,i)=>{
793
+ const rank=i+1, tier=getTier(p.rank_points);
794
+ const rc=rank===1?'r1':rank===2?'r2':rank===3?'r3':'rn';
795
+ const isOwn=li&&authUser&&p.id===authUser.id;
796
+ const tr=document.createElement('tr');
797
+ if(isOwn)tr.classList.add('own-row');
798
+ if(li){
799
+ const kd=p.kd.toFixed(2),kdC=p.kd>=3?'kd-g':p.kd>=1?'kd-o':'kd-b';
800
+ tr.innerHTML=`<td><span class="rank-badge ${rc}">${rank}</span></td>
801
+ <td><strong style="color:${isOwn?'var(--accent)':'#cee8ff'}">${p.username||'β€”'}${isOwn?' β—€':''}</strong></td>
802
+ <td><span class="tier ${tier.cls}">${tier.name}</span></td>
803
+ <td style="color:var(--accent);font-family:'Orbitron',sans-serif;font-size:13px">${(p.rank_points||0).toLocaleString()}</td>
804
+ <td class="${kdC}">${kd}</td><td style="color:var(--green)">${(p.headshots||0).toLocaleString()}</td>
805
+ <td><span class="weapon-tag">${p.equipped_weapon||'β€”'}</span></td>
806
+ <td><span class="armor-tag" style="${(!p.equipped_armor||p.equipped_armor==='None')?'color:var(--dim);border-color:transparent':''}"> ${p.equipped_armor||'None'}</span></td>
807
+ <td><span class="gold-val">⬑ ${(p.gold||0).toLocaleString()}</span></td>
808
+ <td style="color:var(--purple);font-family:'Orbitron',sans-serif;font-size:12px">LVL ${p.level||1}</td>
809
+ <td>${p.win_rate.toFixed(0)}%</td>
810
+ <td style="color:var(--dim)">${parseFloat(p.playtime_hours||0).toFixed(1)}h</td>`;
811
+ } else {
812
+ tr.innerHTML=`<td><span class="rank-badge ${rc}">${rank}</span></td>
813
+ <td><strong>${p.username||'β€”'}</strong></td>
814
+ <td><span class="tier ${tier.cls}">${tier.name}</span></td>
815
+ <td style="color:var(--accent);font-family:'Orbitron',sans-serif;font-size:13px">${(p.rank_points||0).toLocaleString()}</td>
816
+ <td><span class="gold-val">⬑ ${(p.gold||0).toLocaleString()}</span></td>
817
+ <td>${p.win_rate.toFixed(0)}%</td>`;
818
+ }
819
+ tbody.appendChild(tr);
820
+ });
821
+ }
822
+
823
+ // ── PROFILE ──
824
+ function loadProfile() {
825
+ if (!authUser) return;
826
+ const me = players.find(p=>p.id===authUser.id);
827
+ $('prof-username-nav').textContent = authUser.username || authUser.email;
828
+ $('prof-display-name').textContent = authUser.username || 'β€”';
829
+ $('prof-email').textContent = authUser.email || 'β€”';
830
+ $('prof-avatar').textContent = (authUser.username||'?')[0].toUpperCase();
831
+ $('prof-new-username').value = authUser.username || '';
832
+ $('prof-new-email').value = authUser.email || '';
833
+
834
+ if (!me) return;
835
+
836
+ const tier = getTier(me.rank_points);
837
+ $('prof-tier-badge').textContent = tier.name; $('prof-tier-badge').className = `tier ${tier.cls}`;
838
+ $('prof-level-badge').textContent = `LVL ${me.level||1}`;
839
+ $('prof-gold-badge').textContent = `⬑ ${(me.gold||0).toLocaleString()} GOLD`;
840
+ $('prof-rank-pts').textContent = (me.rank_points||0).toLocaleString();
841
+
842
+ const Tiers = [{min:0,max:1200},{min:1200,max:1800},{min:1800,max:2500},{min:2500,max:3000},{min:3000,max:4000}];
843
+ const cur = Tiers.find(t=>me.rank_points>=t.min&&me.rank_points<t.max) || Tiers[4];
844
+ const pct = Math.min(100, ((me.rank_points-cur.min)/(cur.max-cur.min))*100);
845
+ $('prof-rank-bar').style.width = pct+'%';
846
+ $('prof-tier-cur').textContent = tier.name; $('prof-tier-next').textContent = tier.next || 'MAX RANK';
847
+
848
+ const stats = [
849
+ {val:(me.kills||0).toLocaleString(), lbl:'KILLS'}, {val:(me.deaths||0).toLocaleString(), lbl:'DEATHS'}, {val:me.kd.toFixed(2), lbl:'K/D RATIO'},
850
+ {val:(me.headshots||0).toLocaleString(), lbl:'HEADSHOTS'}, {val:(me.wins||0).toLocaleString(), lbl:'WINS'}, {val:(me.losses||0).toLocaleString(), lbl:'LOSSES'},
851
+ {val:me.win_rate.toFixed(0)+'%', lbl:'WIN RATE'}, {val:(me.rank_points||0).toLocaleString(), lbl:'RANK PTS'}, {val:parseFloat(me.playtime_hours||0).toFixed(1)+'h', lbl:'PLAYTIME'},
852
+ ];
853
+ $('prof-stats-grid').innerHTML = stats.map(s=>`<div class="pstat"><div class="pstat-val">${s.val}</div><div class="pstat-lbl">${s.lbl}</div></div>`).join('');
854
+
855
+ $('sb-tier').innerHTML = `<span class="tier ${tier.cls}">${tier.name}</span>`;
856
+ $('sb-rp').textContent = (me.rank_points||0).toLocaleString();
857
+ $('sb-next').textContent = tier.nextPts ? tier.nextPts.toLocaleString() : 'MAX';
858
+ $('sb-needed').textContent = tier.nextPts ? Math.max(0,tier.nextPts-me.rank_points).toLocaleString()+' pts' : 'β€”';
859
+ $('sb-weapon').textContent = me.equipped_weapon||'β€”'; $('sb-armor').textContent = me.equipped_armor||'None';
860
+ $('sb-level').textContent = `LVL ${me.level||1}`;
861
+ $('sb-wins').textContent = me.wins||0; $('sb-losses').textContent = me.losses||0;
862
+ $('sb-wr').textContent = me.win_rate.toFixed(0)+'%'; $('sb-play').textContent = parseFloat(me.playtime_hours||0).toFixed(1)+' hrs';
863
+ $('sb-lastseen').textContent = me.last_seen ? new Date(me.last_seen).toLocaleDateString() : 'β€”';
864
+ const pos = players.findIndex(p=>p.id===authUser.id)+1; $('sb-lbpos').textContent = pos > 0 ? `#${pos}` : 'β€”';
865
+ }
866
+
867
+ // ── ACCOUNT MANAGEMENT ──
868
+ async function updateUsername() {
869
+ const newName = $('prof-new-username').value.trim();
870
+ clearAlert('prof-username-alert');
871
+ if (!newName) { setAlert('prof-username-alert','error','⚠ USERNAME CANNOT BE EMPTY'); return; }
872
+ if (!/^[a-zA-Z0-9_]+$/.test(newName)) { setAlert('prof-username-alert','error','⚠ LETTERS, NUMBERS AND UNDERSCORES ONLY'); return; }
873
+ try {
874
+ const res = await fetch(`${SB_URL}/rest/v1/player_stats?id=eq.${authUser.id}`, {
875
+ method:'PATCH', headers:{'apikey':SB_KEY,'Authorization':`Bearer ${authUser.token}`,'Content-Type':'application/json','Prefer':'return=minimal'}, body:JSON.stringify({username:newName})
876
+ });
877
+ if (!res.ok) throw new Error('Database rejected update. Check RLS Policies.');
878
+ authUser.username = newName; localStorage.setItem('warzone_session', JSON.stringify(authUser));
879
+ $('prof-display-name').textContent = newName; $('prof-username-nav').textContent = newName; $('prof-avatar').textContent = newName[0].toUpperCase();
880
+ if($('dash-username')) $('dash-username').textContent = newName;
881
+ const p=players.find(p=>p.id===authUser.id); if(p) p.username=newName;
882
+ setAlert('prof-username-alert','success','βœ“ CALLSIGN UPDATED SUCCESSFULLY');
883
+ await loadData();
884
+ } catch(e) { setAlert('prof-username-alert','error',`⚠ ${e.message.toUpperCase()}`); }
885
+ }
886
+
887
+ async function updateEmail() {
888
+ const newEmail = $('prof-new-email').value.trim();
889
+ clearAlert('prof-email-alert');
890
+ if (!newEmail || !newEmail.includes('@')) { setAlert('prof-email-alert','error','⚠ ENTER A VALID EMAIL'); return; }
891
+ try {
892
+ const res = await fetch(`${SB_URL}/auth/v1/user`, {
893
+ method:'PUT', headers:{'apikey':SB_KEY,'Authorization':`Bearer ${authUser.token}`,'Content-Type':'application/json'}, body:JSON.stringify({email:newEmail})
894
+ });
895
+ const data = await res.json();
896
+ if (!res.ok) throw new Error(data.message||'Update failed');
897
+ authUser.email = newEmail; $('prof-email').textContent = newEmail;
898
+ setAlert('prof-email-alert','success','βœ“ EMAIL UPDATED β€” CHECK YOUR INBOX TO CONFIRM');
899
+ } catch(e) { setAlert('prof-email-alert','error',`⚠ ${e.message.toUpperCase()}`); }
900
+ }
901
+
902
+ // FIXED: Validate old password before updating
903
+ async function updatePassword() {
904
+ const oldPw = $('prof-old-pw').value;
905
+ const pw = $('prof-new-pw').value;
906
+ const cpw = $('prof-confirm-pw').value;
907
+ clearAlert('prof-pw-alert');
908
+ if (!oldPw) { setAlert('prof-pw-alert','error','⚠ CURRENT PASSWORD REQUIRED'); return; }
909
+ if (!pw || pw.length < 6) { setAlert('prof-pw-alert','error','⚠ NEW PASSWORD MUST BE AT LEAST 6 CHARACTERS'); return; }
910
+ if (pw !== cpw) { setAlert('prof-pw-alert','error','⚠ NEW PASSWORDS DO NOT MATCH'); return; }
911
+
912
+ try {
913
+ // 1. Secretly log in to verify the OLD password is correct
914
+ const loginRes = await fetch(`${SB_URL}/auth/v1/token?grant_type=password`, {
915
+ method:'POST', headers:{'apikey':SB_KEY,'Content-Type':'application/json'},
916
+ body:JSON.stringify({email: authUser.email, password: oldPw})
917
+ });
918
+ if (!loginRes.ok) throw new Error('INCORRECT CURRENT PASSWORD');
919
+
920
+ // 2. If it succeeds, execute the password change
921
+ const res = await fetch(`${SB_URL}/auth/v1/user`, {
922
+ method:'PUT', headers:{'apikey':SB_KEY,'Authorization':`Bearer ${authUser.token}`,'Content-Type':'application/json'},
923
+ body:JSON.stringify({password:pw})
924
+ });
925
+ const data = await res.json();
926
+ if (!res.ok) throw new Error(data.message||'Update failed');
927
+
928
+ $('prof-old-pw').value=''; $('prof-new-pw').value=''; $('prof-confirm-pw').value='';
929
+ setAlert('prof-pw-alert','success','βœ“ PASSWORD UPDATED SUCCESSFULLY');
930
+ } catch(e) {
931
+ setAlert('prof-pw-alert','error',`⚠ ${e.message.toUpperCase()}`);
932
+ }
933
+ }
934
+
935
+ // ── ACCOUNT DELETION ──
936
+ function showDeleteModal() {
937
+ if (isBotAccount(authUser.email)) { alert("Test bot accounts cannot be deleted."); return; }
938
+ $('delete-modal').style.display = 'flex';
939
+ $('delete-step-1').style.display = 'block';
940
+ $('delete-step-2').style.display = 'none';
941
+ $('del-pw1').value = ''; $('del-pw2').value = ''; $('del-code').value = '';
942
+ clearAlert('del-alert');
943
+ }
944
+
945
+ function cancelDelete() {
946
+ $('delete-modal').style.display = 'none';
947
+ currentDeletionCode = null;
948
+ }
949
+
950
+ async function sendDeleteCode() {
951
+ const p1 = $('del-pw1').value;
952
+ const p2 = $('del-pw2').value;
953
+ clearAlert('del-alert');
954
+
955
+ if(!p1 || !p2) { setAlert('del-alert','error','⚠ ENTER PASSWORD TWICE'); return; }
956
+ if(p1 !== p2) { setAlert('del-alert','error','⚠ PASSWORDS DO NOT MATCH'); return; }
957
+
958
+ const btn = $('del-btn-send');
959
+ btn.disabled = true; btn.textContent = 'VERIFYING...';
960
+
961
+ try {
962
+ // 1. Verify password matches account
963
+ const loginRes = await fetch(`${SB_URL}/auth/v1/token?grant_type=password`, {
964
+ method:'POST', headers:{'apikey':SB_KEY,'Content-Type':'application/json'},
965
+ body:JSON.stringify({email: authUser.email, password: p1})
966
+ });
967
+ if (!loginRes.ok) throw new Error('INCORRECT PASSWORD');
968
+
969
+ // 2. Generate 6 digit code
970
+ currentDeletionCode = Math.floor(100000 + Math.random() * 900000).toString();
971
+
972
+ // 3. Try sending email via Edge Function
973
+ try {
974
+ await fetch(`${SB_URL}/functions/v1/send-login-alert`, {
975
+ method: 'POST', headers: { 'Authorization': `Bearer ${SB_KEY}`, 'Content-Type': 'application/json' },
976
+ body: JSON.stringify({ email: authUser.email, type: 'delete', code: currentDeletionCode })
977
+ });
978
+ } catch(edgeErr) { console.warn('Edge function email skipped/failed', edgeErr); }
979
+
980
+ // 4. Test backup: Alert the code just in case the Edge function isn't ready
981
+ alert(`TEST MODE BACKUP: Your code is ${currentDeletionCode} \n(Check your email as well)`);
982
+
983
+ $('delete-step-1').style.display = 'none';
984
+ $('delete-step-2').style.display = 'block';
985
+ setAlert('del-alert','success','βœ“ VERIFICATION CODE SENT TO EMAIL');
986
+ } catch(e) {
987
+ setAlert('del-alert','error',`⚠ ${e.message.toUpperCase()}`);
988
+ } finally {
989
+ btn.disabled = false; btn.textContent = 'SEND CODE';
990
+ }
991
+ }
992
+
993
+ async function confirmDelete() {
994
+ const code = $('del-code').value.trim();
995
+ clearAlert('del-alert');
996
+ if(code !== currentDeletionCode) { setAlert('del-alert','error','⚠ INVALID VERIFICATION CODE'); return; }
997
+
998
+ const btn = $('del-btn-confirm');
999
+ btn.disabled = true; btn.textContent = 'DELETING...';
1000
+
1001
+ try {
1002
+ // Call the custom Supabase SQL RPC function to wipe the account
1003
+ const res = await fetch(`${SB_URL}/rest/v1/rpc/delete_user`, {
1004
+ method: 'POST',
1005
+ headers: { 'apikey': SB_KEY, 'Authorization': `Bearer ${authUser.token}`, 'Content-Type': 'application/json' }
1006
+ });
1007
+
1008
+ if (!res.ok) {
1009
+ const err = await res.json();
1010
+ throw new Error(err.message || 'Deletion failed. Did you run the SQL command in Step 1?');
1011
+ }
1012
+
1013
+ alert("Account permanently deleted. Reverting to login screen.");
1014
+ cancelDelete();
1015
+ doLogout(true);
1016
+ } catch(e) {
1017
+ setAlert('del-alert','error',`⚠ ${e.message.toUpperCase()}`);
1018
+ btn.disabled = false; btn.textContent = 'DELETE FOREVER';
1019
+ }
1020
+ }
1021
+
1022
+ // ── INIT ──
1023
+ (async function init() {
1024
+ const hashSession = parseUrlHash();
1025
+ if (hashSession) {
1026
+ try {
1027
+ const fakeAuthData = { access_token: hashSession.access_token, user: { id: hashSession.uid || '', email: hashSession.email || 'operator@warzone.gg' } };
1028
+ await completeLoginSession(fakeAuthData); return;
1029
+ } catch(err) {}
1030
+ }
1031
+
1032
+ const savedSession = localStorage.getItem('warzone_session');
1033
+ if (savedSession) { try { authUser = JSON.parse(savedSession); } catch(e) { localStorage.removeItem('warzone_session'); } }
1034
+
1035
+ await loadData();
1036
+
1037
+ const overlay = $('loading-screen');
1038
+ if(overlay) { overlay.classList.add('hidden'); setTimeout(()=>overlay.style.display='none',500); }
1039
+
1040
+ if (authUser) goto('dashboard'); else goto('login');
1041
+ })();
1042
+ </script>
1043
+ </body>
1044
+ </html>