Hugging Face's logo

Spaces:
privateuserh
/
dynrep1-0
Running

App Files Community
privateuserh commited on
Commit
78ce844
·
verified ·
1 Parent(s): 1bec327

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +744 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dynrep1 0
3
- emoji: 🔥
4
- colorFrom: red
5
- colorTo: pink
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: dynrep1-0
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,744 @@
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
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ .gradient-bg {
26
+ background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%);
27
+ }
28
+ .score-ring {
29
+ stroke-dasharray: 440;
30
+ transform: rotate(-90deg);
31
+ transform-origin: 50% 50%;
32
+ }
33
+ .pulse {
34
+ animation: pulse 2s infinite;
35
+ }
36
+ @keyframes pulse {
37
+ 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7); }
38
+ 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
39
+ 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
40
+ }
41
+ .social-icon {
42
+ transition: all 0.3s ease;
43
+ }
44
+ .social-icon:hover {
45
+ transform: translateY(-5px);
46
+ }
47
+ .license-tier {
48
+ transition: all 0.3s ease;
49
+ }
50
+ .license-tier:hover {
51
+ transform: scale(1.03);
52
+ }
53
+ .license-tier.active {
54
+ border-color: #4F46E5;
55
+ box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3);
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-50 font-sans">
60
+ <!-- Header -->
61
+ <header class="gradient-bg text-white">
62
+ <div class="container mx-auto px-4 py-8">
63
+ <div class="flex justify-between items-center">
64
+ <div class="flex items-center space-x-2">
65
+ <i class="fas fa-chart-line text-3xl"></i>
66
+ <h1 class="text-2xl font-bold">Dynamic Reputation Score</h1>
67
+ </div>
68
+ <nav class="hidden md:flex space-x-6">
69
+ <a href="#" class="hover:text-accent transition">Home</a>
70
+ <a href="#" class="hover:text-accent transition">How It Works</a>
71
+ <a href="#" class="hover:text-accent transition">Benefits</a>
72
+ <a href="#" class="hover:text-accent transition">Pricing</a>
73
+ </nav>
74
+ <button class="md:hidden text-2xl">
75
+ <i class="fas fa-bars"></i>
76
+ </button>
77
+ </div>
78
+
79
+ <div class="mt-16 mb-20 text-center">
80
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">Your Content Value, Quantified</h2>
81
+ <p class="text-xl max-w-3xl mx-auto mb-8">
82
+ Measure your digital reputation across platforms to unlock better crypto loan terms and content monetization opportunities.
83
+ </p>
84
+ <button class="bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full transition">
85
+ Calculate Your Score Now
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </header>
90
+
91
+ <!-- Main Content -->
92
+ <main class="container mx-auto px-4 py-12">
93
+ <!-- Score Dashboard -->
94
+ <section class="bg-white rounded-xl shadow-lg p-6 mb-12">
95
+ <div class="flex flex-col md:flex-row items-center">
96
+ <!-- Score Visualization -->
97
+ <div class="w-full md:w-1/3 flex justify-center mb-8 md:mb-0">
98
+ <div class="relative w-64 h-64">
99
+ <svg class="w-full h-full" viewBox="0 0 160 160">
100
+ <circle cx="80" cy="80" r="70" stroke="#E5E7EB" stroke-width="10" fill="none"/>
101
+ <circle id="score-ring" class="score-ring" cx="80" cy="80" r="70" stroke="#4F46E5" stroke-width="10" fill="none" stroke-dashoffset="220"/>
102
+ </svg>
103
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
104
+ <span id="main-score" class="text-5xl font-bold text-dark">0</span>
105
+ <span class="text-gray-500">Reputation Score</span>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Score Details -->
111
+ <div class="w-full md:w-2/3">
112
+ <h3 class="text-2xl font-bold text-dark mb-4">Your Digital Reputation Breakdown</h3>
113
+
114
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
115
+ <div class="bg-light p-4 rounded-lg">
116
+ <div class="flex justify-between items-center mb-2">
117
+ <span class="text-gray-600">Content Value Score</span>
118
+ <span id="content-score" class="font-bold">0</span>
119
+ </div>
120
+ <div class="w-full bg-gray-200 rounded-full h-2">
121
+ <div id="content-score-bar" class="bg-primary h-2 rounded-full" style="width: 0%"></div>
122
+ </div>
123
+ </div>
124
+
125
+ <div class="bg-light p-4 rounded-lg">
126
+ <div class="flex justify-between items-center mb-2">
127
+ <span class="text-gray-600">Engagement Score</span>
128
+ <span id="engagement-score" class="font-bold">0</span>
129
+ </div>
130
+ <div class="w-full bg-gray-200 rounded-full h-2">
131
+ <div id="engagement-score-bar" class="bg-secondary h-2 rounded-full" style="width: 0%"></div>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="bg-light p-4 rounded-lg">
136
+ <div class="flex justify-between items-center mb-2">
137
+ <span class="text-gray-600">Longevity Score</span>
138
+ <span id="longevity-score" class="font-bold">0</span>
139
+ </div>
140
+ <div class="w-full bg-gray-200 rounded-full h-2">
141
+ <div id="longevity-score-bar" class="bg-accent h-2 rounded-full" style="width: 0%"></div>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="bg-light p-4 rounded-lg">
146
+ <div class="flex justify-between items-center mb-2">
147
+ <span class="text-gray-600">Borrowing Power</span>
148
+ <span id="borrowing-power" class="font-bold">$0</span>
149
+ </div>
150
+ <div class="w-full bg-gray-200 rounded-full h-2">
151
+ <div id="borrowing-power-bar" class="bg-purple-500 h-2 rounded-full" style="width: 0%"></div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-100">
157
+ <div class="flex items-start">
158
+ <div class="flex-shrink-0 pt-1">
159
+ <i class="fas fa-info-circle text-blue-500 text-xl"></i>
160
+ </div>
161
+ <div class="ml-3">
162
+ <h4 class="text-sm font-medium text-blue-800">Licensing Impact</h4>
163
+ <p class="text-sm text-blue-700" id="license-impact-text">
164
+ Your current licensing activity is not impacting your score. Increase your licensing to boost your reputation and borrowing power.
165
+ </p>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <button id="update-btn" class="bg-primary hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-full transition">
171
+ Update My Score
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </section>
176
+
177
+ <!-- Licensing Activity Section (New Prominent Section) -->
178
+ <section class="bg-white rounded-xl shadow-lg p-8 mb-12">
179
+ <div class="flex items-center mb-6">
180
+ <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-4">
181
+ <i class="fas fa-file-contract text-xl"></i>
182
+ </div>
183
+ <div>
184
+ <h2 class="text-3xl font-bold text-dark">Licensing Activity</h2>
185
+ <p class="text-gray-600">Your content licensing history is a strong indicator of repayment ability</p>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
190
+ <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="basic">
191
+ <div class="flex justify-between items-start mb-4">
192
+ <div>
193
+ <h3 class="font-bold text-lg">Basic Licensing</h3>
194
+ <p class="text-gray-500 text-sm">Occasional content licensing</p>
195
+ </div>
196
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+15 pts</div>
197
+ </div>
198
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
199
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 1-5 licenses per year</li>
200
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Small-scale partnerships</li>
201
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Standard verification</li>
202
+ </ul>
203
+ <div class="text-center">
204
+ <button class="select-tier-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50">
205
+ Select Tier
206
+ </button>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="professional">
211
+ <div class="flex justify-between items-start mb-4">
212
+ <div>
213
+ <h3 class="font-bold text-lg">Professional Licensing</h3>
214
+ <p class="text-gray-500 text-sm">Regular content licensing</p>
215
+ </div>
216
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+30 pts</div>
217
+ </div>
218
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
219
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 6-20 licenses per year</li>
220
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Medium-scale partnerships</li>
221
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Enhanced verification</li>
222
+ </ul>
223
+ <div class="text-center">
224
+ <button class="select-tier-btn w-full py-2 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
225
+ Select Tier
226
+ </button>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="license-tier border-2 border-gray-200 rounded-xl p-6 cursor-pointer" data-tier="enterprise">
231
+ <div class="flex justify-between items-start mb-4">
232
+ <div>
233
+ <h3 class="font-bold text-lg">Enterprise Licensing</h3>
234
+ <p class="text-gray-500 text-sm">High-volume content licensing</p>
235
+ </div>
236
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-bold">+50 pts</div>
237
+ </div>
238
+ <ul class="text-sm text-gray-600 space-y-2 mb-4">
239
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> 20+ licenses per year</li>
240
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Large-scale partnerships</li>
241
+ <li class="flex items-center"><i class="fas fa-check-circle text-blue-500 mr-2"></i> Premium verification</li>
242
+ </ul>
243
+ <div class="text-center">
244
+ <button class="select-tier-btn w-full py-2 px-4 border border-gray-300 rounded-lg hover:bg-gray-50">
245
+ Select Tier
246
+ </button>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="bg-blue-50 rounded-lg p-4">
252
+ <h3 class="font-bold text-blue-800 mb-2">Why Licensing Matters</h3>
253
+ <p class="text-blue-700 text-sm">
254
+ Content licensing demonstrates your ability to generate consistent revenue from your digital assets.
255
+ This is a strong indicator of repayment ability for crypto loans, making it a heavily weighted factor
256
+ in your reputation score. Higher licensing tiers unlock better loan terms and increased borrowing limits.
257
+ </p>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Social Media Integration -->
262
+ <section class="mb-12">
263
+ <h2 class="text-3xl font-bold text-dark mb-8 text-center">Connect Your Social Profiles</h2>
264
+
265
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
266
+ <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="youtube">
267
+ <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">
268
+ <i class="fab fa-youtube text-3xl"></i>
269
+ </div>
270
+ <h3 class="font-bold mb-2">YouTube</h3>
271
+ <p class="text-gray-500 text-sm">Subscribers & Watch Time</p>
272
+ </div>
273
+
274
+ <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="twitter">
275
+ <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">
276
+ <i class="fab fa-twitter text-3xl"></i>
277
+ </div>
278
+ <h3 class="font-bold mb-2">Twitter</h3>
279
+ <p class="text-gray-500 text-sm">Followers & Engagement</p>
280
+ </div>
281
+
282
+ <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="instagram">
283
+ <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">
284
+ <i class="fab fa-instagram text-3xl"></i>
285
+ </div>
286
+ <h3 class="font-bold mb-2">Instagram</h3>
287
+ <p class="text-gray-500 text-sm">Followers & Engagement</p>
288
+ </div>
289
+
290
+ <div class="social-card bg-white p-6 rounded-xl shadow-md text-center cursor-pointer" data-platform="tiktok">
291
+ <div class="social-icon bg-black text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
292
+ <i class="fab fa-tiktok text-3xl"></i>
293
+ </div>
294
+ <h3 class="font-bold mb-2">TikTok</h3>
295
+ <p class="text-gray-500 text-sm">Followers & Views</p>
296
+ </div>
297
+ </div>
298
+ </section>
299
+
300
+ <!-- Metrics Input -->
301
+ <section class="bg-white rounded-xl shadow-lg p-8 mb-12">
302
+ <h2 class="text-3xl font-bold text-dark mb-6">Enhance Your Score</h2>
303
+
304
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
305
+ <!-- Left Column -->
306
+ <div>
307
+ <div class="mb-6">
308
+ <label class="block text-gray-700 mb-2">Content Uploads (per month)</label>
309
+ <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">
310
+ <div class="flex justify-between text-sm text-gray-500 mt-1">
311
+ <span>0</span>
312
+ <span>10</span>
313
+ <span>20</span>
314
+ <span>30</span>
315
+ <span>40</span>
316
+ <span>50+</span>
317
+ </div>
318
+ </div>
319
+
320
+ <div class="mb-6">
321
+ <label class="block text-gray-700 mb-2">Content Performance (avg. views)</label>
322
+ <select id="content-performance" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary">
323
+ <option value="100">Under 100</option>
324
+ <option value="1000">100-1,000</option>
325
+ <option value="10000" selected>1,000-10,000</option>
326
+ <option value="100000">10,000-100,000</option>
327
+ <option value="1000000">100,000-1M</option>
328
+ <option value="10000000">1M+</option>
329
+ </select>
330
+ </div>
331
+
332
+ <div class="mb-6">
333
+ <label class="block text-gray-700 mb-2">Community Building</label>
334
+ <div class="flex space-x-4">
335
+ <button class="community-btn flex-1 py-2 px-4 border rounded-lg" data-value="0">None</button>
336
+ <button class="community-btn flex-1 py-2 px-4 border rounded-lg bg-primary text-white" data-value="1">Some</button>
337
+ <button class="community-btn flex-1 py-2 px-4 border rounded-lg" data-value="2">Strong</button>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Right Column -->
343
+ <div>
344
+ <div class="mb-6">
345
+ <label class="block text-gray-700 mb-2">Curation Participation</label>
346
+ <div class="flex items-center">
347
+ <input type="checkbox" id="curation-check" class="w-5 h-5 text-primary rounded focus:ring-primary">
348
+ <label for="curation-check" class="ml-2 text-gray-700">Actively curate content</label>
349
+ </div>
350
+ <div class="flex items-center mt-2">
351
+ <input type="checkbox" id="moderation-check" class="w-5 h-5 text-primary rounded focus:ring-primary">
352
+ <label for="moderation-check" class="ml-2 text-gray-700">Community moderation</label>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="mb-6">
357
+ <label class="block text-gray-700 mb-2">Years of Activity</label>
358
+ <div class="flex items-center space-x-2">
359
+ <button id="years-minus" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
360
+ <i class="fas fa-minus"></i>
361
+ </button>
362
+ <span id="years-value" class="text-xl font-bold">3</span>
363
+ <button id="years-plus" class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
364
+ <i class="fas fa-plus"></i>
365
+ </button>
366
+ <span class="text-gray-500 ml-2">years</span>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="mb-6">
371
+ <label class="block text-gray-700 mb-2">Verified Revenue Streams</label>
372
+ <div class="flex flex-wrap gap-2">
373
+ <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="ads">
374
+ <i class="fas fa-ad mr-1"></i> Ad Revenue
375
+ </button>
376
+ <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="sponsorships">
377
+ <i class="fas fa-handshake mr-1"></i> Sponsorships
378
+ </button>
379
+ <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="merch">
380
+ <i class="fas fa-tshirt mr-1"></i> Merchandise
381
+ </button>
382
+ <button class="revenue-btn py-1 px-3 border rounded-full text-sm" data-stream="donations">
383
+ <i class="fas fa-donate mr-1"></i> Donations
384
+ </button>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </section>
390
+
391
+ <!-- Benefits Section -->
392
+ <section class="mb-12">
393
+ <h2 class="text-3xl font-bold text-dark mb-8 text-center">Unlock New Opportunities</h2>
394
+
395
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
396
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
397
+ <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4">
398
+ <i class="fas fa-coins text-xl"></i>
399
+ </div>
400
+ <h3 class="font-bold text-xl mb-2">Better Crypto Loan Terms</h3>
401
+ <p class="text-gray-600">Higher reputation scores qualify you for lower interest rates and higher borrowing limits.</p>
402
+ </div>
403
+
404
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
405
+ <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4">
406
+ <i class="fas fa-handshake text-xl"></i>
407
+ </div>
408
+ <h3 class="font-bold text-xl mb-2">Premium Partnerships</h3>
409
+ <p class="text-gray-600">Brands seek out creators with high reputation scores for collaborations.</p>
410
+ </div>
411
+
412
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
413
+ <div class="w-12 h-12 gradient-bg text-white rounded-full flex items-center justify-center mb-4">
414
+ <i class="fas fa-chart-pie text-xl"></i>
415
+ </div>
416
+ <h3 class="font-bold text-xl mb-2">Content Monetization</h3>
417
+ <p class="text-gray-600">Access exclusive monetization options based on your content value.</p>
418
+ </div>
419
+ </div>
420
+ </section>
421
+
422
+ <!-- Testimonials -->
423
+ <section class="mb-12">
424
+ <h2 class="text-3xl font-bold text-dark mb-8 text-center">Trusted by Creators</h2>
425
+
426
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
427
+ <div class="bg-white p-6 rounded-xl shadow-md">
428
+ <div class="flex items-center mb-4">
429
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
430
+ <div>
431
+ <h4 class="font-bold">Sarah Johnson</h4>
432
+ <p class="text-gray-500 text-sm">Tech YouTuber</p>
433
+ </div>
434
+ </div>
435
+ <p class="text-gray-700">
436
+ "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!"
437
+ </p>
438
+ <div class="flex mt-4">
439
+ <i class="fas fa-star text-yellow-400"></i>
440
+ <i class="fas fa-star text-yellow-400"></i>
441
+ <i class="fas fa-star text-yellow-400"></i>
442
+ <i class="fas fa-star text-yellow-400"></i>
443
+ <i class="fas fa-star text-yellow-400"></i>
444
+ </div>
445
+ </div>
446
+
447
+ <div class="bg-white p-6 rounded-xl shadow-md">
448
+ <div class="flex items-center mb-4">
449
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-12 h-12 rounded-full mr-4">
450
+ <div>
451
+ <h4 class="font-bold">Michael Chen</h4>
452
+ <p class="text-gray-500 text-sm">Photography Influencer</p>
453
+ </div>
454
+ </div>
455
+ <p class="text-gray-700">
456
+ "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."
457
+ </p>
458
+ <div class="flex mt-4">
459
+ <i class="fas fa-star text-yellow-400"></i>
460
+ <i class="fas fa-star text-yellow-400"></i>
461
+ <i class="fas fa-star text-yellow-400"></i>
462
+ <i class="fas fa-star text-yellow-400"></i>
463
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+ </main>
469
+
470
+ <!-- Footer -->
471
+ <footer class="bg-dark text-white py-12">
472
+ <div class="container mx-auto px-4">
473
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
474
+ <div>
475
+ <h3 class="text-xl font-bold mb-4 flex items-center">
476
+ <i class="fas fa-chart-line mr-2"></i> Dynamic Reputation
477
+ </h3>
478
+ <p class="text-gray-400">
479
+ Quantifying your digital footprint to unlock financial opportunities and content monetization.
480
+ </p>
481
+ </div>
482
+
483
+ <div>
484
+ <h4 class="font-bold mb-4">Resources</h4>
485
+ <ul class="space-y-2">
486
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
487
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li>
488
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
489
+ </ul>
490
+ </div>
491
+
492
+ <div>
493
+ <h4 class="font-bold mb-4">Company</h4>
494
+ <ul class="space-y-2">
495
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
496
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
497
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
498
+ </ul>
499
+ </div>
500
+
501
+ <div>
502
+ <h4 class="font-bold mb-4">Connect</h4>
503
+ <div class="flex space-x-4">
504
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition">
505
+ <i class="fab fa-twitter"></i>
506
+ </a>
507
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition">
508
+ <i class="fab fa-discord"></i>
509
+ </a>
510
+ <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary transition">
511
+ <i class="fab fa-telegram"></i>
512
+ </a>
513
+ </div>
514
+ </div>
515
+ </div>
516
+
517
+ <div class="pt-6 border-t border-gray-800 text-center text-gray-400">
518
+ <p>© 2023 Dynamic Reputation Score. All rights reserved.</p>
519
+ </div>
520
+ </div>
521
+ </footer>
522
+
523
+ <!-- Scripts -->
524
+ <script>
525
+ document.addEventListener('DOMContentLoaded', function() {
526
+ // Initialize scores
527
+ let scores = {
528
+ main: 0,
529
+ content: 0,
530
+ engagement: 0,
531
+ longevity: 0,
532
+ borrowing: 0,
533
+ licenseTier: null,
534
+ revenueStreams: []
535
+ };
536
+
537
+ // Social media connections
538
+ const socialCards = document.querySelectorAll('.social-card');
539
+ socialCards.forEach(card => {
540
+ card.addEventListener('click', function() {
541
+ this.classList.toggle('ring-2');
542
+ this.classList.toggle('ring-primary');
543
+ this.classList.toggle('pulse');
544
+ calculateScore();
545
+ });
546
+ });
547
+
548
+ // License tiers
549
+ const licenseTiers = document.querySelectorAll('.license-tier');
550
+ const selectTierBtns = document.querySelectorAll('.select-tier-btn');
551
+
552
+ licenseTiers.forEach(tier => {
553
+ tier.addEventListener('click', function() {
554
+ // Remove active class from all tiers
555
+ licenseTiers.forEach(t => t.classList.remove('active', 'border-blue-500'));
556
+
557
+ // Add active class to clicked tier
558
+ this.classList.add('active', 'border-blue-500');
559
+
560
+ // Update selected tier
561
+ scores.licenseTier = this.dataset.tier;
562
+
563
+ // Update button states
564
+ selectTierBtns.forEach(btn => {
565
+ btn.classList.remove('bg-blue-600', 'text-white');
566
+ btn.classList.add('border', 'border-gray-300');
567
+ });
568
+
569
+ // Highlight the selected button
570
+ const btn = this.querySelector('.select-tier-btn');
571
+ btn.classList.add('bg-blue-600', 'text-white');
572
+ btn.classList.remove('border', 'border-gray-300');
573
+
574
+ // Update license impact text
575
+ updateLicenseImpactText();
576
+ calculateScore();
577
+ });
578
+ });
579
+
580
+ // Community buttons
581
+ const communityBtns = document.querySelectorAll('.community-btn');
582
+ communityBtns.forEach(btn => {
583
+ btn.addEventListener('click', function() {
584
+ communityBtns.forEach(b => b.classList.remove('bg-primary', 'text-white'));
585
+ this.classList.add('bg-primary', 'text-white');
586
+ calculateScore();
587
+ });
588
+ });
589
+
590
+ // Revenue stream buttons
591
+ const revenueBtns = document.querySelectorAll('.revenue-btn');
592
+ revenueBtns.forEach(btn => {
593
+ btn.addEventListener('click', function() {
594
+ const stream = this.dataset.stream;
595
+ const index = scores.revenueStreams.indexOf(stream);
596
+
597
+ if (index === -1) {
598
+ // Add stream
599
+ scores.revenueStreams.push(stream);
600
+ this.classList.add('bg-blue-100', 'border-blue-500', 'text-blue-800');
601
+ } else {
602
+ // Remove stream
603
+ scores.revenueStreams.splice(index, 1);
604
+ this.classList.remove('bg-blue-100', 'border-blue-500', 'text-blue-800');
605
+ }
606
+
607
+ calculateScore();
608
+ });
609
+ });
610
+
611
+ // Years counter
612
+ const yearsValue = document.getElementById('years-value');
613
+ const yearsMinus = document.getElementById('years-minus');
614
+ const yearsPlus = document.getElementById('years-plus');
615
+
616
+ yearsMinus.addEventListener('click', function() {
617
+ let value = parseInt(yearsValue.textContent);
618
+ if (value > 0) {
619
+ yearsValue.textContent = value - 1;
620
+ calculateScore();
621
+ }
622
+ });
623
+
624
+ yearsPlus.addEventListener('click', function() {
625
+ let value = parseInt(yearsValue.textContent);
626
+ yearsValue.textContent = value + 1;
627
+ calculateScore();
628
+ });
629
+
630
+ // Checkboxes
631
+ document.getElementById('curation-check').addEventListener('change', calculateScore);
632
+ document.getElementById('moderation-check').addEventListener('change', calculateScore);
633
+
634
+ // Sliders and selects
635
+ document.getElementById('content-uploads').addEventListener('input', calculateScore);
636
+ document.getElementById('content-performance').addEventListener('change', calculateScore);
637
+
638
+ // Update button
639
+ document.getElementById('update-btn').addEventListener('click', function() {
640
+ // Simulate loading
641
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Calculating...';
642
+ setTimeout(() => {
643
+ calculateScore();
644
+ this.textContent = 'Update My Score';
645
+ }, 1000);
646
+ });
647
+
648
+ // Update license impact text
649
+ function updateLicenseImpactText() {
650
+ const impactText = document.getElementById('license-impact-text');
651
+ if (!scores.licenseTier) {
652
+ impactText.textContent = "Your current licensing activity is not impacting your score. Increase your licensing to boost your reputation and borrowing power.";
653
+ return;
654
+ }
655
+
656
+ const tierMap = {
657
+ 'basic': "Your Basic Licensing tier adds 15 points to your score, demonstrating initial repayment capacity.",
658
+ 'professional': "Your Professional Licensing tier adds 30 points, showing strong repayment ability and unlocking better loan terms.",
659
+ 'enterprise': "Your Enterprise Licensing tier adds 50 points, qualifying you for premium lending options with the best rates."
660
+ };
661
+
662
+ impactText.textContent = tierMap[scores.licenseTier];
663
+ }
664
+
665
+ // Calculate score function
666
+ function calculateScore() {
667
+ // Content score (uploads + performance)
668
+ const uploads = parseInt(document.getElementById('content-uploads').value);
669
+ const performance = parseInt(document.getElementById('content-performance').value);
670
+ scores.content = Math.min(100, uploads * 0.5 + Math.log10(performance) * 10);
671
+
672
+ // Engagement score (social media + community)
673
+ const connectedSocials = document.querySelectorAll('.social-card.ring-2').length;
674
+ const communityValue = document.querySelector('.community-btn.bg-primary')?.dataset.value || 0;
675
+ scores.engagement = Math.min(100, connectedSocials * 15 + communityValue * 20);
676
+
677
+ // Longevity score (years + curation)
678
+ const years = parseInt(yearsValue.textContent);
679
+ const curationChecked = document.getElementById('curation-check').checked;
680
+ const moderationChecked = document.getElementById('moderation-check').checked;
681
+ scores.longevity = Math.min(100, years * 8 + (curationChecked ? 20 : 0) + (moderationChecked ? 15 : 0));
682
+
683
+ // License bonus (weighted heavily for repayment ability)
684
+ let licenseBonus = 0;
685
+ if (scores.licenseTier === 'basic') licenseBonus = 15;
686
+ if (scores.licenseTier === 'professional') licenseBonus = 30;
687
+ if (scores.licenseTier === 'enterprise') licenseBonus = 50;
688
+
689
+ // Revenue streams bonus
690
+ const revenueBonus = scores.revenueStreams.length * 5;
691
+
692
+ // Main score (weighted average with heavy emphasis on licensing)
693
+ scores.main = Math.min(100,
694
+ (scores.content * 0.3) +
695
+ (scores.engagement * 0.2) +
696
+ (scores.longevity * 0.2) +
697
+ (licenseBonus * 1.5) + // 1.5x weight for licensing
698
+ revenueBonus
699
+ );
700
+
701
+ // Borrowing power (based on main score with multiplier for licensing)
702
+ let borrowingMultiplier = 1;
703
+ if (scores.licenseTier === 'professional') borrowingMultiplier = 1.5;
704
+ if (scores.licenseTier === 'enterprise') borrowingMultiplier = 2;
705
+
706
+ scores.borrowing = Math.floor(Math.pow(scores.main, 1.5) * 100 * borrowingMultiplier);
707
+
708
+ // Update UI
709
+ updateScoreUI();
710
+ }
711
+
712
+ // Update UI with scores
713
+ function updateScoreUI() {
714
+ // Main score
715
+ document.getElementById('main-score').textContent = Math.round(scores.main);
716
+ document.getElementById('score-ring').style.strokeDashoffset = 440 - (440 * scores.main / 100);
717
+
718
+ // Sub-scores
719
+ document.getElementById('content-score').textContent = Math.round(scores.content);
720
+ document.getElementById('content-score-bar').style.width = `${scores.content}%`;
721
+
722
+ document.getElementById('engagement-score').textContent = Math.round(scores.engagement);
723
+ document.getElementById('engagement-score-bar').style.width = `${scores.engagement}%`;
724
+
725
+ document.getElementById('longevity-score').textContent = Math.round(scores.longevity);
726
+ document.getElementById('longevity-score-bar').style.width = `${scores.longevity}%`;
727
+
728
+ // Borrowing power
729
+ document.getElementById('borrowing-power').textContent = `$${scores.borrowing.toLocaleString()}`;
730
+ document.getElementById('borrowing-power-bar').style.width = `${Math.min(100, scores.borrowing / 10000 * 100)}%`;
731
+ }
732
+
733
+ // Initial calculation
734
+ calculateScore();
735
+
736
+ // Auto-select professional tier by default
737
+ const professionalTier = document.querySelector('.license-tier[data-tier="professional"]');
738
+ if (professionalTier) {
739
+ professionalTier.click();
740
+ }
741
+ });
742
+ </script>
743
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/dynrep1-0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
744
+ </html>