Hugging Face's logo

Spaces:
privateuserh
/
dynrepv1-01
Running

App Files Community
privateuserh commited on
Commit
aaa54c8
·
verified ·
1 Parent(s): 2dd4206

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +633 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dynrepv1 01
3
- emoji: 👀
4
- colorFrom: pink
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: dynrepv1-01
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,633 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Dynamic Reputation Score | Content Value Assessment</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#10B981',
16
+ dark: '#1F2937',
17
+ light: '#F3F4F6',
18
+ accent: '#F59E0B',
19
+ platinum: '#E5E4E2',
20
+ gold: '#FFD700',
21
+ silver: '#C0C0C0',
22
+ bronze: '#CD7F32'
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ .gradient-bg {
30
+ background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
31
+ }
32
+ .score-ring {
33
+ stroke-dasharray: 440;
34
+ transform: rotate(-90deg);
35
+ transform-origin: 50% 50%;
36
+ }
37
+ .pulse {
38
+ animation: pulse 2s infinite;
39
+ }
40
+ @keyframes pulse {
41
+ 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
42
+ 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
43
+ 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
44
+ }
45
+ .social-icon {
46
+ transition: all 0.3s ease;
47
+ }
48
+ .social-icon:hover {
49
+ transform: translateY(-5px);
50
+ }
51
+ .license-tier {
52
+ transition: all 0.3s ease;
53
+ }
54
+ .license-tier:hover {
55
+ transform: scale(1.03);
56
+ }
57
+ .license-tier.active {
58
+ border-color: #4F46E5;
59
+ box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
60
+ }
61
+ .greek-letter {
62
+ font-family: 'Times New Roman', Times, serif;
63
+ font-style: italic;
64
+ }
65
+ .boost-card {
66
+ transition: all 0.3s ease;
67
+ background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
68
+ }
69
+ .boost-card:hover {
70
+ transform: translateY(-5px);
71
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
72
+ }
73
+ </style>
74
+ </head>
75
+ <body class="bg-gray-50 font-sans">
76
+ <!-- Header -->
77
+ <header class="gradient-bg text-white">
78
+ <div class="container mx-auto px-4 py-8">
79
+ <div class="flex justify-between items-center">
80
+ <div class="flex items-center space-x-2">
81
+ <i class="fas fa-chart-line text-3xl"></i>
82
+ <h1 class="text-2xl font-bold">Dynamic Reputation Score</h1>
83
+ </div>
84
+ <nav class="hidden md:flex space-x-6">
85
+ <a href="#" class="hover:text-accent transition">Home</a>
86
+ <a href="#" class="hover:text-accent transition">How It Works</a>
87
+ <a href="#" class="hover:text-accent transition">Benefits</a>
88
+ <a href="#" class="hover:text-accent transition">Pricing</a>
89
+ </nav>
90
+ <button class="md:hidden text-2xl">
91
+ <i class="fas fa-bars"></i>
92
+ </button>
93
+ </div>
94
+
95
+ <div class="mt-16 mb-20 text-center">
96
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">Your Content Value, Quantified</h2>
97
+ <p class="text-xl max-w-3xl mx-auto mb-8">
98
+ Measure your digital reputation across platforms to unlock better crypto loan terms and content monetization opportunities.
99
+ </p>
100
+ <button class="bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full transition">
101
+ Calculate Your Score Now
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </header>
106
+
107
+ <!-- Main Content -->
108
+ <main class="container mx-auto px-4 py-12">
109
+ <!-- Score Dashboard -->
110
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-12">
111
+ <div class="flex flex-col md:flex-row items-center">
112
+ <!-- Score Visualization -->
113
+ <div class="w-full md:w-1/3 flex justify-center mb-8 md:mb-0">
114
+ <div class="relative w-64 h-64">
115
+ <svg class="w-full h-full" viewBox="0 0 160 160">
116
+ <circle cx="80" cy="80" r="70" stroke="#E5E7EB" stroke-width="10" fill="none"/>
117
+ <circle id="score-ring" class="score-ring" cx="80" cy="80" r="70" stroke="#4F46E5" stroke-width="10" fill="none" stroke-dashoffset="440"/>
118
+ </svg>
119
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
120
+ <div class="flex flex-col items-center">
121
+ <div class="flex items-end">
122
+ <span id="greek-letter" class="greek-letter text-5xl font-bold text-primary"></span>
123
+ </div>
124
+ <span id="level-title" class="text-xl font-medium text-dark"></span>
125
+ <span id="main-score" class="text-sm text-gray-500 mt-1">Score: <span class="font-medium">0</span></span>
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Score Details -->
132
+ <div class="w-full md:w-2/3">
133
+ <h3 class="text-2xl font-bold text-dark mb-4">Your Digital Reputation Breakdown</h3>
134
+
135
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
136
+ <div class="bg-light p-4 rounded-lg">
137
+ <div class="flex justify-between items-center mb-2">
138
+ <span class="text-gray-600">Content Value Score</span>
139
+ <span id="content-score" class="font-bold">0</span>
140
+ </div>
141
+ <div class="w-full bg-gray-200 rounded-full h-2">
142
+ <div id="content-score-bar" class="bg-primary h-2 rounded-full" style="width: 0%"></div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="bg-light p-4 rounded-lg">
147
+ <div class="flex justify-between items-center mb-2">
148
+ <span class="text-gray-600">Engagement Score</span>
149
+ <span id="engagement-score" class="font-bold">0</span>
150
+ </div>
151
+ <div class="w-full bg-gray-200 rounded-full h-2">
152
+ <div id="engagement-score-bar" class="bg-secondary h-2 rounded-full" style="width: 0%"></div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="bg-light p-4 rounded-lg">
157
+ <div class="flex justify-between items-center mb-2">
158
+ <span class="text-gray-600">Longevity Score</span>
159
+ <span id="longevity-score" class="font-bold">0</span>
160
+ </div>
161
+ <div class="w-full bg-gray-200 rounded-full h-2">
162
+ <div id="longevity-score-bar" class="bg-accent h-2 rounded-full" style="width: 0%"></div>
163
+ </div>
164
+ </div>
165
+
166
+ <div class="bg-light p-4 rounded-lg">
167
+ <div class="flex justify-between items-center mb-2">
168
+ <span class="text-gray-600">Borrowing Power</span>
169
+ <span id="borrowing-power" class="font-bold">$0</span>
170
+ </div>
171
+ <div class="w-full bg-gray-200 rounded-full h-2">
172
+ <div id="borrowing-power-bar" class="bg-purple-500 h-2 rounded-full" style="width: 0%"></div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100">
178
+ <div class="flex items-start">
179
+ <div class="flex-shrink-0 pt-1">
180
+ <i class="fas fa-info-circle text-blue-500 text-xl"></i>
181
+ </div>
182
+ <div class="ml-3">
183
+ <h4 class="text-sm font-medium text-blue-800">Licensing Impact</h4>
184
+ <p class="text-sm text-blue-700" id="license-impact-text">
185
+ Your current licensing activity is not impacting your score. Increase your licensing to boost your reputation and borrowing power.
186
+ </p>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <button id="update-btn" class="bg-primary hover:bg-indigo-7 00 text-white font-bold py-2 px-6 rounded-full transition">
192
+ Update My Score
193
+ </button>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Boost Section -->
199
+ <section class="bg-white rounded-xl shadow-lg p-8 mb-12">
200
+ <div class="flex items-center mb-6">
201
+ <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mr-4">
202
+ <i class="fas fa-bolt text-xl"></i>
203
+ </div>
204
+ <div>
205
+ <h2 class="text-3xl font-bold text-dark">Boost Your Score</h2>
206
+ <p class="text-gray-600">Annuitize your earnings for stable income verification with unspent.cash</p>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
211
+ <div class="boost-card border border-gray-200 rounded-xl p-6 cursor-pointer" data-boost="basic">
212
+ <div class="flex justify-between items-start mb-4">
213
+ <div>
214
+ <h3 class="font-bold text-lg">Basic Stability</h3>
215
+ <p class="text-gray-500 text-sm">3-month annuitization</p>
216
+ </div>
217
+ <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-bold">+5 pts</div>
218
+ </div>
219
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
220
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 3-month income verification</li>
221
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Basic unspent.cash integration</li>
222
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Small boost to reputation</li>
223
+ </ul>
224
+ <div class="text-center">
225
+ <button class="select-boost-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50">
226
+ Connect to unspent.app
227
+ </button>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="boost-card border border-gray-200 rounded-xl p-6 cursor-pointer" data-boost="professional">
232
+ <div class="flex justify-between items-start mb-4">
233
+ <div>
234
+ <h3 class="font-bold text-lg">Professional Stability</h3>
235
+ <p class="text-gray-500 text-sm">6-month annuitization</p>
236
+ </div>
237
+ <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-bold">+15 pts</div>
238
+ </div>
239
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
240
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 6-month income verification</li>
241
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Full unspent.cash integration</li>
242
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Medium boost to reputation</li>
243
+ </ul>
244
+ <div class="text-center">
245
+ <button class="select-boost-btn w-full py-2 px-4 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
246
+ Connect to unspent.app
247
+ </button>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="boost-card border border-gray-200 rounded-xl p-6 cursor-pointer" data-boost="enterprise">
252
+ <div class="flex justify-between items-start mb-4">
253
+ <div>
254
+ <h3 class="font-bold text-lg">Enterprise Stability</h3>
255
+ <p class="text-gray-500 text-sm">12-month annuitization</p>
256
+ </div>
257
+ <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-bold">+30 pts</div>
258
+ </div>
259
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
260
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> 12-month income verification</li>
261
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Premium unspent.cash features</li>
262
+ <li class="flex items-center"><i class="fas fa-check-circle text-purple-500 mr-2"></i> Large boost to reputation</li>
263
+ </ul>
264
+ <div class="text-center">
265
+ <button class="select-boost-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50">
266
+ Connect to unspent.app
267
+ </button>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="mt-6 bg-purple-50 rounded-lg p-4">
273
+ <h3 class="font-bold text-purple-800 mb-2">How Annuitization Boosts Your Score</h3>
274
+ <p class="text-purple-700 text-sm">
275
+ By connecting your unspent.cash account and annuitizing a portion of your earnings, you demonstrate
276
+ stable income streams to lenders. This significantly improves your reputation score by verifying
277
+ your ability to repay loans. The longer the annuitization period, the greater the boost to your score.
278
+ </p>
279
+ </div>
280
+ </section>
281
+
282
+ <!-- Licensing Activity Section -->
283
+ <section class="bg-white rounded-xl shadow-lg p-8 mb-12">
284
+ <div class="flex items-center mb-6">
285
+ <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-4">
286
+ <i class="fas fa-file-contract text-xl"></i>
287
+ </div>
288
+ <div>
289
+ <h2 class="text-3xl font-bold text-dark">Licensing Activity</h2>
290
+ <p class="text-gray-600">Your content licensing history is a strong indicator of repayment ability</p>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
295
+ <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="basic">
296
+ <div class="flex justify-between items-start mb-4">
297
+ <div>
298
+ <h3 class="font-bold text-lg">Basic Licensing</h3>
299
+ <p class="text-gray-500 text-sm">Occasional content licensing</p>
300
+ </div>
301
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+15 pts</div>
302
+ </div>
303
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
304
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 1-5 licenses per year</li>
305
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Small-scale partnerships</li>
306
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Standard verification</li>
307
+ </ul>
308
+ <div class="text-center">
309
+ <button class="select-tier-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50">
310
+ Select Tier
311
+ </button>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="professional">
316
+ <div class="flex justify-between items-start mb-4">
317
+ <div>
318
+ <h3 class="font-bold text-lg">Professional Licensing</h3>
319
+ <p class="text-gray-500 text-sm">Regular content licensing</p>
320
+ </div>
321
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+30 pts</div>
322
+ </div>
323
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
324
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 6-20 licenses per year</li>
325
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Medium-scale partnerships</li>
326
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Enhanced verification</li>
327
+ </ul>
328
+ <div class="text-center">
329
+ <button class="select-tier-btn w-full py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
330
+ Select Tier
331
+ </button>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="enterprise">
336
+ <div class="flex justify-between items-start mb-4">
337
+ <div>
338
+ <h3 class="font-bold text-lg">Enterprise Licensing</h3>
339
+ <p class="text-gray-500 text-sm">High-volume content licensing</p>
340
+ </div>
341
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+50 pts</div>
342
+ </div>
343
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
344
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 20+ licenses per year</li>
345
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Large-scale partnerships</li>
346
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Premium verification</li>
347
+ </ul>
348
+ <div class="text-center">
349
+ <button class="select-tier-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50">
350
+ Select Tier
351
+ </button>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="bg-blue-50 rounded-lg p-4">
357
+ <h3 class="font-bold text-blue-800 mb-2">Why Licensing Matters</h3>
358
+ <p class="text-blue-700 text-sm">
359
+ Content licensing demonstrates your ability to generate consistent revenue from your digital assets.
360
+ This is a strong indicator of repayment ability for crypto loans, making it a heavily weighted factor
361
+ in your reputation score. Higher licensing tiers unlock better loan terms and increased borrowing limits.
362
+ </p>
363
+ </div>
364
+ </section>
365
+
366
+ <!-- Social Media Integration -->
367
+ <section class="mb-12">
368
+ <h2 class="text-3xl font-bold text-dark mb-8 text-center">Connect Your Social Profiles</h2>
369
+
370
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
371
+ <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="youtube">
372
+ <div class="social-icon bg-red-100 text-red-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
373
+ <i class="fab fa-youtube text-3xl"></i>
374
+ </div>
375
+ <h3 class="font-bold mb-2">YouTube</h3>
376
+ <p class="text-gray-500 text-sm">Subscribers & Watch Time</p>
377
+ </div>
378
+
379
+ <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="twitter">
380
+ <div class="social-icon bg-blue-100 text-blue-500 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
381
+ <i class="fab fa-twitter text-3xl"></i>
382
+ </div>
383
+ <h3 class="font-bold mb-2">Twitter</h3>
384
+ <p class="text-gray-500 text-sm">Followers & Engagement</p>
385
+ </div>
386
+
387
+ <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="instagram">
388
+ <div class="social-icon bg-pink-100 text-pink-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
389
+ <i class="fab fa-instagram text-3xl"></i>
390
+ </div>
391
+ <h3 class="font-bold mb-2">Instagram</h3>
392
+ <p class="text-gray-500 text-sm">Followers & Engagement</p>
393
+ </div>
394
+
395
+ <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="tiktok">
396
+ <div class="social-icon bg-black text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
397
+ <i class="fab fa-tiktok text-3xl"></i>
398
+ </div>
399
+ <h3 class="font-bold mb-2">TikTok</h3>
400
+ <p class="text-gray-500 text-sm">Followers & Views</p>
401
+ </div>
402
+ </div>
403
+ </section>
404
+
405
+ <!-- Metrics Input -->
406
+ <section class="bg-white rounded-xl shadow-lg p-8 mb-12">
407
+ <h2 class="text-3xl font-bold text-dark mb-6">Enhance Your Score</h2>
408
+
409
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
410
+ <!-- Left Column -->
411
+ <div>
412
+ <div class="mb-6">
413
+ <label class="block text-gray-700 mb-2">Content Uploads (per month)</label>
414
+ <input type="range" id="content-uploads" min="0" max="50" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
415
+ <div class="flex justify-between text-sm text-gray-500 mt-1">
416
+ <span>0</span>
417
+ <span>10</span>
418
+ <span>20</span>
419
+ <span>30</span>
420
+ <span>40</span>
421
+ <span>50+</span>
422
+ </div>
423
+ </div>
424
+
425
+ <div class="mb-6">
426
+ <label class="block text-gray-700 mb-2">Content Performance (avg. views)</label>
427
+ <select id="content-performance" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
428
+ <option value="100">Under 100</option>
429
+ <option value="1000">100-1,000</option>
430
+ <option value="10000" selected>1,000-10,000</option>
431
+ <option value="100000">10,000-100,000</option>
432
+ <option value="1000000">100,000-1M</option>
433
+ <option value="10000000">1M+</option>
434
+ </select>
435
+ </div>
436
+
437
+ <div class="mb-6">
438
+ <label class="block text-gray-700 mb-2">Community Building</label>
439
+ <div class="flex space-x-4">
440
+ <button class="community-btn flex-1 py-2 px-4 border rounded-lg" data-value="0">None</button>
441
+ <button class="community-btn flex-1 py-2 px-4 border rounded-lg bg-primary text-white" data-value="1">Some</button>
442
+ <button class="community-btn flex-1 py-2 px-4 border rounded-lg" data-value="2">Strong</button>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Right Column -->
448
+ <div>
449
+ <div class="mb-6">
450
+ <label class="block text-gray-700 mb-2">Curation Participation</label>
451
+ <div class="flex items-center">
452
+ <input type="checkbox" id="curation-check" class="w-5 h-5 text-primary rounded focus:ring-primary">
453
+ <label for="curation-check" class="ml-2 text-gray-700">Actively curate content</label>
454
+ </div>
455
+ <div class="flex items-center mt-2">
456
+ <input type="checkbox" id="moderation-check" class="w-5 h-5 text-primary rounded focus:ring-primary">
457
+ <label for="moderation-check" class="ml-2 text-gray-700">Community moderation</label>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="mb-6">
462
+ <label class="block text-gray-700 mb-2">Years of Activity</label>
463
+ <div class="flex items-center space-x-2">
464
+ <button id="years-minus" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
465
+ <i class="fas fa-minus"></i>
466
+ </button>
467
+ <span id="years-value" class="text-xl font-bold">3</span>
468
+ <button id="years-plus" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
469
+ <i class="fas fa-plus"></i>
470
+ </button>
471
+ <span class="text-gray-500 ml-2">years</span>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="mb-6">
476
+ <label class="block text-gray-700 mb-2">Verified Revenue Streams</label>
477
+ <div class="flex flex-wrap gap-2">
478
+ <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="ads">
479
+ <i class="fas fa-ad mr-1"></i> Ad Revenue
480
+ </button>
481
+ <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="sponsorships">
482
+ <i class="fas fa-handshake mr-1"></i> Sponsorships
483
+ </button>
484
+ <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="merch">
485
+ <i class="fas fa-tshirt mr-1"></i> Merchandise
486
+ </button>
487
+ <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="donations">
488
+ <i class="fas fa-donate mr-1"></i> Donations
489
+ </button>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </section>
495
+
496
+ <!-- Benefits Section -->
497
+ <section class="mb-12">
498
+ <h2 class="text-3xl font-bold text-dark mb-8 text-center">Unlock New Opportunities</h2>
499
+
500
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
501
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
502
+ <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4">
503
+ <i class="fas fa-coins text-xl"></i>
504
+ </div>
505
+ <h3 class="font-bold text-xl mb-2">Better Crypto Loan Terms</h3>
506
+ <p class="text-gray-600">Higher reputation scores qualify you for lower interest rates and higher borrowing limits.</p>
507
+ </div>
508
+
509
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
510
+ <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4">
511
+ <i class="fas fa-handshake text-xl"></i>
512
+ </div>
513
+ <h3 class="font-bold text-xl mb-2">Premium Partnerships</h3>
514
+ <p class="text-gray-600">Brands seek out creators with high reputation scores for collaborations.</p>
515
+ </div>
516
+
517
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
518
+ <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4">
519
+ <i class="fas fa-chart-pie text-xl"></i>
520
+ </div>
521
+ <h3 class="font-bold text-xl mb-2">Content Monetization</h3>
522
+ <p class="text-gray-600">Access exclusive monetization options based on your content value.</p>
523
+ </div>
524
+ </div>
525
+ </section>
526
+
527
+ <!-- Testimonials -->
528
+ <section class="mb-12">
529
+ <h2 class="text-3xl font-bold text-dark mb-8 text-center">Trusted by Creators</h2>
530
+
531
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
532
+ <div class="bg-white p-6 rounded-xl shadow-md">
533
+ <div class="flex items-center mb-4">
534
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
535
+ <div>
536
+ <h4 class="font-bold">Sarah Johnson</h4>
537
+ <p class="text-gray-500 text-sm">Tech YouTuber</p>
538
+ </div>
539
+ </div>
540
+ <p class="text-gray-700">
541
+ "After documenting my licensing deals, my reputation score jumped 25 points and I qualified for a crypto loan at 3% lower interest. The impact was immediate!"
542
+ </p>
543
+ <div class="flex mt-4">
544
+ <i class="fas fa-star text-yellow-400"></i>
545
+ <i class="fas fa-star text-yellow-400"></i>
546
+ <i class="fas fa-star text-yellow-400"></i>
547
+ <i class="fas fa-star text-yellow-400"></i>
548
+ <i class="fas fa-star text-yellow-400"></i>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="bg-white p-6 rounded-xl shadow-md">
553
+ <div class="flex items-center mb-4">
554
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
555
+ <div>
556
+ <h4 class="font-bold">Michael Chen</h4>
557
+ <p class="text-gray-500 text-sm">Photography Influencer</p>
558
+ </div>
559
+ </div>
560
+ <p class="text-gray-700">
561
+ "The licensing verification process was simple, and the boost to my borrowing power was substantial. I was able to secure funding for new equipment within days."
562
+ </p>
563
+ <div class="flex mt-4">
564
+ <i class="fas fa-star text-yellow-400"></i>
565
+ <i class="fas fa-star text-yellow-400"></i>
566
+ <i class="fas fa-star text-yellow-400"></i>
567
+ <i class="fas fa-star text-yellow-400"></i>
568
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </section>
573
+ </main>
574
+
575
+ <!-- Footer -->
576
+ <footer class="bg-dark text-white py-12">
577
+ <div class="container mx-auto px-4">
578
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
579
+ <div>
580
+ <h3 class="text-xl font-bold mb-4 flex items-center">
581
+ <i class="fas fa-chart-line mr-2"></i> Dynamic Reputation
582
+ </h3>
583
+ <p class="text-gray-400">
584
+ Quantifying your digital footprint to unlock financial opportunities and content monetization.
585
+ </p>
586
+ </div>
587
+
588
+ <div>
589
+ <h4 class="font-bold mb-4">Resources</h4>
590
+ <ul class="space-y-2">
591
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
592
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
593
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
594
+ </ul>
595
+ </div>
596
+
597
+ <div>
598
+ <h4 class="font-bold mb-4">Company</h4>
599
+ <ul class="space-y-2">
600
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
601
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
602
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
603
+ </ul>
604
+ </div>
605
+
606
+ <div>
607
+ <h4 class="font-bold mb-4">Connect</h4>
608
+ <div class="flex space-x-4">
609
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition">
610
+ <i class="fab fa-twitter"></i>
611
+ </a>
612
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition">
613
+ <i class="fab fa-discord"></i>
614
+ </a>
615
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition">
616
+ <i class="fab fa-telegram"></i>
617
+ </a>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="pt-6 border-t border-gray-800 text-center text-gray-400">
623
+ <p>© 2023 Dynamic Reputation Score. All rights reserved.</p>
624
+ </div>
625
+ </div>
626
+ </footer>
627
+
628
+ <!-- Scripts -->
629
+ <script>
630
+ document.addEventListener('DOMContentLoaded', function() {
631
+ // Initialize scores
632
+
633
+ </html>