simplycodes-ptr-2/dashboard.html at main · michaelquoc/simplycodes-ptr-2 · 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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Validator Console | SimplyCodes Truth Engine</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        sc: {
                            black: '#070707',
                            surface: '#111111',
                            border: '#222222',
                            neon: '#86FC4F',
                            text: '#E5E5E5',
                            muted: '#737373'
                        }
                    },
                    fontFamily: {
                        sans: ['Figtree', 'sans-serif'],
                        mono: ['JetBrains Mono', 'monospace'],
                    }
                }
            }
        }
    </script>

    <style>
        .neon-text { text-shadow: 0 0 10px rgba(134, 252, 79, 0.3); }
        .glass-panel { background: rgba(17, 17, 17, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }
    </style>
</head>
<body class="bg-sc-black text-sc-text font-sans antialiased selection:bg-sc-neon selection:text-black">

    <nav class="fixed top-0 w-full z-50 border-b border-sc-border bg-sc-black/90 backdrop-blur-md">
        <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
            <div class="flex items-center gap-8">
                <a href="index.html" class="flex items-center gap-2 group">
                    <div class="w-6 h-6 rounded bg-sc-neon flex items-center justify-center text-black font-bold text-lg">S</div>
                    <span class="font-bold tracking-tight text-white">SimplyCodes</span>
                </a>
                <div class="hidden md:flex items-center gap-6 text-sm font-medium text-white">
                    <a href="dashboard.html" class="text-sc-neon">Console</a>
                    <a href="tasks.html" class="hover:text-white transition-colors text-sc-muted">Tasks</a>
                    <a href="leaderboards.html" class="hover:text-white transition-colors text-sc-muted">Leaderboards</a>
                </div>
            </div>

            <div class="flex items-center gap-4">
                <div class="hidden md:flex flex-col items-end mr-2">
                    <span class="text-xs font-mono text-sc-neon">$42.50 USD</span>
                    <span class="text-[10px] text-sc-muted">Tier 3 Validator</span>
                </div>
                <div class="w-8 h-8 rounded bg-sc-surface border border-sc-border flex items-center justify-center text-xs font-bold text-white cursor-pointer hover:border-sc-neon transition-colors">
                    JS
                </div>
            </div>
        </div>
    </nav>

    <main class="pt-24 pb-20 px-6 max-w-7xl mx-auto">

        <div class="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
            <div>
                <h1 class="text-3xl font-bold text-white mb-2">Operator Console</h1>
                <p class="text-sc-muted text-sm font-mono">ID: usr_88291 • Region: US-WEST • Status: ONLINE</p>
            </div>
            <div class="flex gap-3">
                <a href="tasks.html" class="bg-sc-neon text-black px-6 py-2 rounded font-bold hover:bg-white transition-colors">
                    Find Tasks
                </a>
                <button class="bg-sc-surface border border-sc-border text-white px-6 py-2 rounded font-bold hover:border-white transition-colors">
                    Withdraw
                </button>
            </div>
        </div>

        <div class="grid md:grid-cols-4 gap-6 mb-12">

            <div class="p-6 bg-sc-surface border border-sc-border rounded-xl">
                <div class="text-xs font-mono text-sc-muted uppercase tracking-widest mb-2">Current Balance</div>
                <div class="text-4xl font-mono font-bold text-sc-neon neon-text">$42.50</div>
                <div class="text-xs text-sc-muted mt-2">Min Payout: $50.00</div>
            </div>

            <div class="p-6 bg-sc-surface border border-sc-border rounded-xl">
                <div class="text-xs font-mono text-sc-muted uppercase tracking-widest mb-2">Accuracy Score</div>
                <div class="text-4xl font-mono font-bold text-white">98.4%</div>
                <div class="text-xs text-sc-muted mt-2">Top 5% of workforce</div>
            </div>

            <div class="p-6 bg-sc-surface border border-sc-border rounded-xl">
                <div class="text-xs font-mono text-sc-muted uppercase tracking-widest mb-2">Total Verified</div>
                <div class="text-4xl font-mono font-bold text-white">1,204</div>
                <div class="text-xs text-sc-muted mt-2">Lifetime Contribution</div>
            </div>

            <div class="p-6 bg-sc-surface border border-sc-border rounded-xl relative overflow-hidden">
                <div class="absolute top-0 right-0 p-2">
                    <svg class="w-6 h-6 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                </div>
                <div class="text-xs font-mono text-sc-muted uppercase tracking-widest mb-2">Trust Tier</div>
                <div class="text-2xl font-bold text-white">Tier 3</div>
                <div class="w-full bg-sc-black h-1.5 rounded-full mt-4 overflow-hidden">
                    <div class="bg-yellow-500 w-[85%] h-full"></div>
                </div>
                <div class="text-[10px] text-sc-muted mt-2 font-mono">Next Tier: 150 more tasks</div>
            </div>

        </div>

        <div class="grid lg:grid-cols-3 gap-12">

            <div class="lg:col-span-2">
                <h3 class="text-lg font-bold text-white mb-6">Recent Validations</h3>

                <div class="space-y-2">
                    <div class="flex items-center justify-between p-4 bg-sc-surface border border-sc-border rounded-lg">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded bg-sc-black flex items-center justify-center text-xs font-bold text-sc-muted">N</div>
                            <div>
                                <div class="text-sm font-bold text-white">Nike.com</div>
                                <div class="text-xs text-sc-muted font-mono">Code: SUMMER20 • Verified Valid</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-bold text-sc-neon">+$1.50</div>
                            <div class="text-xs text-sc-muted">2m ago</div>
                        </div>
                    </div>

                    <div class="flex items-center justify-between p-4 bg-sc-surface border border-sc-border rounded-lg">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded bg-sc-black flex items-center justify-center text-xs font-bold text-sc-muted">A</div>
                            <div>
                                <div class="text-sm font-bold text-white">Adidas</div>
                                <div class="text-xs text-sc-muted font-mono">Code: FAIL50 • Flagged Invalid</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-bold text-sc-neon">+$0.50</div>
                            <div class="text-xs text-sc-muted">15m ago</div>
                        </div>
                    </div>

                    <div class="flex items-center justify-between p-4 bg-sc-surface border border-sc-border rounded-lg">
                        <div class="flex items-center gap-4">
                            <div class="w-10 h-10 rounded bg-sc-black flex items-center justify-center text-xs font-bold text-sc-muted">S</div>
                            <div>
                                <div class="text-sm font-bold text-white">Sephora</div>
                                <div class="text-xs text-sc-muted font-mono">Price Check • Confirmed</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-bold text-sc-neon">+$0.25</div>
                            <div class="text-xs text-sc-muted">1h ago</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="space-y-8">

                <div class="p-6 bg-sc-surface border border-sc-border rounded-xl">
                    <h3 class="text-sm font-bold text-white mb-4">Contribution Streak</h3>
                    <div class="grid grid-cols-7 gap-1 h-24 mb-4 opacity-80">
                        <div class="bg-sc-black rounded-sm"></div><div class="bg-sc-neon rounded-sm"></div><div class="bg-green-900 rounded-sm"></div><div class="bg-sc-neon rounded-sm"></div>
                        <div class="bg-green-900 rounded-sm"></div><div class="bg-sc-black rounded-sm"></div><div class="bg-sc-neon rounded-sm"></div>
                        <div class="bg-sc-neon rounded-sm"></div><div class="bg-green-900 rounded-sm"></div><div class="bg-sc-black rounded-sm"></div><div class="bg-green-900 rounded-sm"></div>
                        <div class="bg-sc-black rounded-sm"></div><div class="bg-sc-neon rounded-sm"></div><div class="bg-sc-neon rounded-sm"></div>
                        <div class="bg-sc-neon rounded-sm"></div><div class="bg-sc-black rounded-sm"></div><div class="bg-green-900 rounded-sm"></div><div class="bg-green-900 rounded-sm"></div>
                        <div class="bg-green-900 rounded-sm"></div><div class="bg-sc-neon rounded-sm"></div><div class="bg-sc-black rounded-sm"></div>
                        </div>
                    <div class="text-xs text-sc-muted flex justify-between font-mono">
                        <span>Current: 12 Days</span>
                        <span>Best: 42 Days</span>
                    </div>
                </div>

                <div class="p-6 bg-sc-black border border-sc-border rounded-xl">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-sm font-bold text-white">Available Now</h3>
                        <a href="tasks.html" class="text-xs text-sc-neon hover:underline">View All →</a>
                    </div>
                    <div class="space-y-3">
                        <div class="text-sm text-gray-400 border-l-2 border-sc-neon pl-3">
                            <div class="flex justify-between">
                                <span>Wayfair (Desktop)</span>
                                <span class="text-white font-bold">$2.00</span>
                            </div>
                        </div>
                        <div class="text-sm text-gray-400 border-l-2 border-sc-border pl-3">
                            <div class="flex justify-between">
                                <span>Uber Eats (Mobile)</span>
                                <span class="text-white font-bold">$0.50</span>
                            </div>
                        </div>
                        <div class="text-sm text-gray-400 border-l-2 border-sc-border pl-3">
                            <div class="flex justify-between">
                                <span>Lululemon</span>
                                <span class="text-white font-bold">$1.25</span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </main>

    <footer class="bg-sc-black border-t border-sc-border pt-20 pb-10 px-6">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-12 mb-20">
                <div>
                    <h4 class="font-mono text-xs text-sc-muted uppercase tracking-widest mb-6">Platform</h4>
                    <ul class="space-y-4 text-sm font-medium text-gray-400">
                        <li><a href="extension.html" class="hover:text-white hover:text-sc-neon transition-colors">Extension</a></li>
                        <li><a href="mobile-app.html" class="hover:text-white hover:text-sc-neon transition-colors">Mobile App</a></li>
                        <li><a href="chatgpt.html" class="hover:text-white hover:text-sc-neon transition-colors">ChatGPT App</a></li>
                        <li><a href="api.html" class="hover:text-white hover:text-sc-neon transition-colors">Developer API</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-mono text-xs text-sc-muted uppercase tracking-widest mb-6">Truth</h4>
                    <ul class="space-y-4 text-sm font-medium text-gray-400">
                        <li><a href="live.html" class="hover:text-white hover:text-sc-neon transition-colors">Live Ledger</a></li>
                        <li><a href="truth.html" class="hover:text-white hover:text-sc-neon transition-colors">Methodology</a></li>
                        <li><a href="taxonomy.html" class="hover:text-white hover:text-sc-neon transition-colors">Failure Taxonomy</a></li>
                        <li><a href="privacy.html" class="hover:text-white hover:text-sc-neon transition-colors">Privacy Promise</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-mono text-xs text-sc-muted uppercase tracking-widest mb-6">Workforce</h4>
                    <ul class="space-y-4 text-sm font-medium text-gray-400">
                        <li><a href="workforce.html" class="hover:text-white hover:text-sc-neon transition-colors">Join the Workforce</a></li>
                        <li><a href="leaderboards.html" class="hover:text-white hover:text-sc-neon transition-colors">Leaderboards</a></li>
                        <li><a href="#" class="hover:text-white hover:text-sc-neon transition-colors">ShopGraph Tasks</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-mono text-xs text-sc-muted uppercase tracking-widest mb-6">Status</h4>
                    <div class="flex items-center gap-2 mb-4">
                        <span class="w-2 h-2 rounded-full bg-sc-neon"></span>
                        <span class="text-sm text-white font-mono">Operational</span>
                    </div>
                    <p class="text-xs text-sc-muted">Latency: 12ms</p>
                    <p class="text-xs text-sc-muted">San Francisco, CA</p>
                </div>
            </div>
            <div class="border-t border-sc-border pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <div class="text-sm text-sc-muted">© 2026 Demand.io. All rights reserved.</div>
                <div class="flex gap-6 text-sm text-sc-muted">
                    <a href="#" class="hover:text-white">Twitter / X</a>
                    <a href="#" class="hover:text-white">LinkedIn</a>
                </div>
            </div>
        </div>
    </footer>

</body>
</html>