Hugging Face's logo

Spaces:
JayStormX8
/
brand-roi-calculator
Running

App Files Community
JayStormX8 commited on
Commit
4ff1670
·
verified ·
1 Parent(s): 4a7b94a

Create a comprehensive personal and business Brand ROI calculator that should be fun to play with, gamified and UI uses color codes of #ff330c, #f2f2f2, #e4e4e4, #fdfdfd, #1d1d1d - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +714 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Brand Roi Calculator
3
- emoji: 👁
4
- colorFrom: gray
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: brand-roi-calculator
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
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,714 @@
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>Brand ROI Calculator | Measure Your Brand Impact</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: '#ff330c',
15
+ light: '#f2f2f2',
16
+ lighter: '#e4e4e4',
17
+ lightest: '#fdfdfd',
18
+ dark: '#1d1d1d',
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
+ <style>
25
+ @keyframes pulse {
26
+ 0%, 100% { transform: scale(1); }
27
+ 50% { transform: scale(1.05); }
28
+ }
29
+ .pulse-animation {
30
+ animation: pulse 2s infinite;
31
+ }
32
+ .progress-ring__circle {
33
+ transition: stroke-dashoffset 0.5s;
34
+ transform: rotate(-90deg);
35
+ transform-origin: 50% 50%;
36
+ }
37
+ .tooltip {
38
+ position: relative;
39
+ display: inline-block;
40
+ }
41
+ .tooltip .tooltiptext {
42
+ visibility: hidden;
43
+ width: 200px;
44
+ background-color: #1d1d1d;
45
+ color: #f2f2f2;
46
+ text-align: center;
47
+ border-radius: 6px;
48
+ padding: 8px;
49
+ position: absolute;
50
+ z-index: 1;
51
+ bottom: 125%;
52
+ left: 50%;
53
+ margin-left: -100px;
54
+ opacity: 0;
55
+ transition: opacity 0.3s;
56
+ }
57
+ .tooltip:hover .tooltiptext {
58
+ visibility: visible;
59
+ opacity: 1;
60
+ }
61
+ input[type="range"] {
62
+ -webkit-appearance: none;
63
+ height: 8px;
64
+ border-radius: 4px;
65
+ background: #e4e4e4;
66
+ }
67
+ input[type="range"]::-webkit-slider-thumb {
68
+ -webkit-appearance: none;
69
+ appearance: none;
70
+ width: 20px;
71
+ height: 20px;
72
+ border-radius: 50%;
73
+ background: #ff330c;
74
+ cursor: pointer;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-lightest font-sans text-dark">
79
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
80
+ <!-- Header -->
81
+ <header class="text-center mb-12">
82
+ <h1 class="text-4xl md:text-5xl font-bold mb-4 text-primary">Brand ROI Calculator</h1>
83
+ <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
84
+ Measure the impact of your personal or business brand with our gamified calculator.
85
+ Discover your brand's true value and potential!
86
+ </p>
87
+ </header>
88
+
89
+ <!-- Toggle Switch -->
90
+ <div class="flex justify-center mb-10">
91
+ <div class="inline-flex items-center bg-lighter rounded-full p-1">
92
+ <button id="personalBtn" class="px-6 py-2 rounded-full font-medium text-white bg-primary focus:outline-none transition">
93
+ Personal Brand
94
+ </button>
95
+ <button id="businessBtn" class="px-6 py-2 rounded-full font-medium text-dark bg-transparent focus:outline-none transition">
96
+ Business Brand
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Calculator Sections -->
102
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
103
+ <!-- Input Section -->
104
+ <div class="bg-white p-6 rounded-xl shadow-lg lg:col-span-2">
105
+ <h2 class="text-2xl font-bold mb-6 text-primary">Brand Metrics</h2>
106
+
107
+ <!-- Personal Brand Metrics (Visible by default) -->
108
+ <div id="personalMetrics">
109
+ <div class="mb-6">
110
+ <label class="block text-lg font-medium mb-2">Social Media Following</label>
111
+ <div class="flex items-center mb-2">
112
+ <input type="range" id="socialFollowing" min="0" max="1000000" step="1000" value="50000" class="w-full mr-4">
113
+ <span id="socialFollowingValue" class="font-bold">50,000</span>
114
+ </div>
115
+ <div class="flex justify-between text-sm text-gray-500">
116
+ <span>0</span>
117
+ <span>1M+</span>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="mb-6">
122
+ <label class="block text-lg font-medium mb-2">Engagement Rate (%)</label>
123
+ <div class="flex items-center mb-2">
124
+ <input type="range" id="engagementRate" min="0" max="20" step="0.5" value="3" class="w-full mr-4">
125
+ <span id="engagementRateValue" class="font-bold">3%</span>
126
+ </div>
127
+ <div class="flex justify-between text-sm text-gray-500">
128
+ <span>0%</span>
129
+ <span>20%</span>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="mb-6">
134
+ <label class="block text-lg font-medium mb-2">Content Quality Score</label>
135
+ <div class="flex items-center mb-2">
136
+ <input type="range" id="contentQuality" min="1" max="10" step="1" value="5" class="w-full mr-4">
137
+ <span id="contentQualityValue" class="font-bold">5/10</span>
138
+ </div>
139
+ <div class="flex justify-between text-sm text-gray-500">
140
+ <span>Basic</span>
141
+ <span>Exceptional</span>
142
+ </div>
143
+ </div>
144
+
145
+ <div class="mb-6">
146
+ <label class="block text-lg font-medium mb-2">Networking Score</label>
147
+ <div class="flex items-center mb-2">
148
+ <input type="range" id="networkingScore" min="1" max="10" step="1" value="5" class="w-full mr-4">
149
+ <span id="networkingScoreValue" class="font-bold">5/10</span>
150
+ </div>
151
+ <div class="flex justify-between text-sm text-gray-500">
152
+ <span>Limited</span>
153
+ <span>Extensive</span>
154
+ </div>
155
+ </div>
156
+
157
+ <div class="mb-6">
158
+ <label class="block text-lg font-medium mb-2">Industry Authority</label>
159
+ <div class="flex items-center mb-2">
160
+ <input type="range" id="industryAuthority" min="1" max="10" step="1" value="5" class="w-full mr-4">
161
+ <span id="industryAuthorityValue" class="font-bold">5/10</span>
162
+ </div>
163
+ <div class="flex justify-between text-sm text-gray-500">
164
+ <span>Newcomer</span>
165
+ <span>Thought Leader</span>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Business Brand Metrics (Hidden by default) -->
171
+ <div id="businessMetrics" class="hidden">
172
+ <div class="mb-6">
173
+ <label class="block text-lg font-medium mb-2">Brand Awareness (%)</label>
174
+ <div class="flex items-center mb-2">
175
+ <input type="range" id="brandAwareness" min="0" max="100" step="1" value="30" class="w-full mr-4">
176
+ <span id="brandAwarenessValue" class="font-bold">30%</span>
177
+ </div>
178
+ <div class="flex justify-between text-sm text-gray-500">
179
+ <span>0%</span>
180
+ <span>100%</span>
181
+ </div>
182
+ </div>
183
+
184
+ <div class="mb-6">
185
+ <label class="block text-lg font-medium mb-2">Customer Loyalty Score</label>
186
+ <div class="flex items-center mb-2">
187
+ <input type="range" id="customerLoyalty" min="1" max="10" step="1" value="5" class="w-full mr-4">
188
+ <span id="customerLoyaltyValue" class="font-bold">5/10</span>
189
+ </div>
190
+ <div class="flex justify-between text-sm text-gray-500">
191
+ <span>Low</span>
192
+ <span>High</span>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="mb-6">
197
+ <label class="block text-lg font-medium mb-2">Marketing Spend ($)</label>
198
+ <div class="flex items-center mb-2">
199
+ <input type="range" id="marketingSpend" min="0" max="100000" step="1000" value="10000" class="w-full mr-4">
200
+ <span id="marketingSpendValue" class="font-bold">$10,000</span>
201
+ </div>
202
+ <div class="flex justify-between text-sm text-gray-500">
203
+ <span>$0</span>
204
+ <span>$100K</span>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="mb-6">
209
+ <label class="block text-lg font-medium mb-2">Brand Differentiation</label>
210
+ <div class="flex items-center mb-2">
211
+ <input type="range" id="brandDifferentiation" min="1" max="10" step="1" value="5" class="w-full mr-4">
212
+ <span id="brandDifferentiationValue" class="font-bold">5/10</span>
213
+ </div>
214
+ <div class="flex justify-between text-sm text-gray-500">
215
+ <span>Generic</span>
216
+ <span>Unique</span>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="mb-6">
221
+ <label class="block text-lg font-medium mb-2">Market Position</label>
222
+ <div class="flex items-center mb-2">
223
+ <input type="range" id="marketPosition" min="1" max="10" step="1" value="5" class="w-full mr-4">
224
+ <span id="marketPositionValue" class="font-bold">5/10</span>
225
+ </div>
226
+ <div class="flex justify-between text-sm text-gray-500">
227
+ <span>Challenger</span>
228
+ <span>Leader</span>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <button id="calculateBtn" class="w-full bg-primary hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-lg transition duration-300 transform hover:scale-105 mt-6">
234
+ Calculate My Brand ROI
235
+ </button>
236
+ </div>
237
+
238
+ <!-- Results Section -->
239
+ <div class="bg-white p-6 rounded-xl shadow-lg">
240
+ <h2 class="text-2xl font-bold mb-6 text-primary">Your Brand ROI</h2>
241
+
242
+ <div class="text-center mb-8">
243
+ <div class="relative inline-block">
244
+ <svg class="w-40 h-40">
245
+ <circle class="text-lighter" stroke-width="10" stroke="currentColor" fill="transparent" r="70" cx="80" cy="80" />
246
+ <circle class="text-primary progress-ring__circle" stroke-width="10" stroke-linecap="round" stroke="currentColor" fill="transparent" r="70" cx="80" cy="80" />
247
+ </svg>
248
+ <div class="absolute inset-0 flex items-center justify-center flex-col" style="top: 80px; left: 80px; transform: translate(-50%, -50%);">
249
+ <span id="roiScore" class="text-4xl font-bold">0</span>
250
+ <span class="text-sm text-gray-500">ROI Score</span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="space-y-4 mb-6">
256
+ <div class="flex items-center">
257
+ <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
258
+ <i class="fas fa-chart-line text-primary"></i>
259
+ </div>
260
+ <div>
261
+ <p class="font-medium">Brand Strength</p>
262
+ <div class="w-full bg-lighter rounded-full h-2.5">
263
+ <div id="brandStrengthBar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="flex items-center">
269
+ <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
270
+ <i class="fas fa-dollar-sign text-primary"></i>
271
+ </div>
272
+ <div>
273
+ <p class="font-medium">Monetization Potential</p>
274
+ <div class="w-full bg-lighter rounded-full h-2.5">
275
+ <div id="monetizationBar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="flex items-center">
281
+ <div class="w-8 h-8 rounded-full bg-primary bg-opacity-20 flex items-center justify-center mr-3">
282
+ <i class="fas fa-users text-primary"></i>
283
+ </div>
284
+ <div>
285
+ <p class="font-medium">Influence Level</p>
286
+ <div class="w-full bg-lighter rounded-full h-2.5">
287
+ <div id="influenceBar" class="bg-primary h-2.5 rounded-full" style="width: 0%"></div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <div id="personalInsights" class="bg-lighter p-4 rounded-lg">
294
+ <h3 class="font-bold text-lg mb-2 text-primary">Personal Brand Insights</h3>
295
+ <p id="personalInsightText" class="text-sm">Calculate your metrics to get personalized insights about your personal brand's performance and potential.</p>
296
+ </div>
297
+
298
+ <div id="businessInsights" class="bg-lighter p-4 rounded-lg hidden">
299
+ <h3 class="font-bold text-lg mb-2 text-primary">Business Brand Insights</h3>
300
+ <p id="businessInsightText" class="text-sm">Calculate your metrics to get personalized insights about your business brand's performance and potential.</p>
301
+ </div>
302
+
303
+ <div class="mt-6">
304
+ <button id="shareBtn" class="w-full bg-dark hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center space-x-2">
305
+ <i class="fas fa-share-alt"></i>
306
+ <span>Share Your Results</span>
307
+ </button>
308
+ </div>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Badges Section -->
313
+ <div class="mt-12 text-center">
314
+ <h2 class="text-2xl font-bold mb-6 text-primary">Earn Brand Badges</h2>
315
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
316
+ <div id="influencerBadge" class="bg-white p-4 rounded-lg shadow-md border-2 border-lighter opacity-50">
317
+ <div class="w-16 h-16 mx-auto mb-2 bg-lighter rounded-full flex items-center justify-center">
318
+ <i class="fas fa-bullhorn text-gray-400 text-2xl"></i>
319
+ </div>
320
+ <p class="font-medium">Influencer</p>
321
+ <p class="text-xs text-gray-500">10K+ followers</p>
322
+ </div>
323
+ <div id="thoughtLeaderBadge" class="bg-white p-4 rounded-lg shadow-md border-2 border-lighter opacity-50">
324
+ <div class="w-16 h-16 mx-auto mb-2 bg-lighter rounded-full flex items-center justify-center">
325
+ <i class="fas fa-lightbulb text-gray-400 text-2xl"></i>
326
+ </div>
327
+ <p class="font-medium">Thought Leader</p>
328
+ <p class="text-xs text-gray-500">High authority</p>
329
+ </div>
330
+ <div id="monetizerBadge" class="bg-white p-4 rounded-lg shadow-md border-2 border-lighter opacity-50">
331
+ <div class="w-16 h-16 mx-auto mb-2 bg-lighter rounded-full flex items-center justify-center">
332
+ <i class="fas fa-money-bill-wave text-gray-400 text-2xl"></i>
333
+ </div>
334
+ <p class="font-medium">Monetizer</p>
335
+ <p class="text-xs text-gray-500">Strong ROI</p>
336
+ </div>
337
+ <div id="connectorBadge" class="bg-white p-4 rounded-lg shadow-md border-2 border-lighter opacity-50">
338
+ <div class="w-16 h-16 mx-auto mb-2 bg-lighter rounded-full flex items-center justify-center">
339
+ <i class="fas fa-handshake text-gray-400 text-2xl"></i>
340
+ </div>
341
+ <p class="font-medium">Connector</p>
342
+ <p class="text-xs text-gray-500">Strong network</p>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Tips Section -->
348
+ <div class="mt-12 bg-primary bg-opacity-10 p-6 rounded-xl">
349
+ <h2 class="text-2xl font-bold mb-4 text-primary">Brand Growth Tips</h2>
350
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
351
+ <div class="bg-white p-4 rounded-lg">
352
+ <div class="flex items-center mb-2">
353
+ <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-3">
354
+ <i class="fas fa-pen-fancy"></i>
355
+ </div>
356
+ <h3 class="font-bold">Content Strategy</h3>
357
+ </div>
358
+ <p class="text-sm">Focus on creating high-quality, valuable content that resonates with your target audience. Consistency is key to building brand recognition.</p>
359
+ </div>
360
+ <div class="bg-white p-4 rounded-lg">
361
+ <div class="flex items-center mb-2">
362
+ <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-3">
363
+ <i class="fas fa-network-wired"></i>
364
+ </div>
365
+ <h3 class="font-bold">Networking</h3>
366
+ </div>
367
+ <p class="text-sm">Build authentic relationships with peers, mentors, and potential collaborators. Strategic partnerships can amplify your brand reach.</p>
368
+ </div>
369
+ <div class="bg-white p-4 rounded-lg">
370
+ <div class="flex items-center mb-2">
371
+ <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mr-3">
372
+ <i class="fas fa-analytics"></i>
373
+ </div>
374
+ <h3 class="font-bold">Metrics Tracking</h3>
375
+ </div>
376
+ <p class="text-sm">Regularly measure your brand performance metrics to identify what's working and where you can improve. Data-driven decisions lead to better ROI.</p>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <script>
383
+ // DOM Elements
384
+ const personalBtn = document.getElementById('personalBtn');
385
+ const businessBtn = document.getElementById('businessBtn');
386
+ const personalMetrics = document.getElementById('personalMetrics');
387
+ const businessMetrics = document.getElementById('businessMetrics');
388
+ const personalInsights = document.getElementById('personalInsights');
389
+ const businessInsights = document.getElementById('businessInsights');
390
+ const calculateBtn = document.getElementById('calculateBtn');
391
+ const shareBtn = document.getElementById('shareBtn');
392
+ const roiScore = document.getElementById('roiScore');
393
+
394
+ // Slider elements for personal brand
395
+ const socialFollowing = document.getElementById('socialFollowing');
396
+ const socialFollowingValue = document.getElementById('socialFollowingValue');
397
+ const engagementRate = document.getElementById('engagementRate');
398
+ const engagementRateValue = document.getElementById('engagementRateValue');
399
+ const contentQuality = document.getElementById('contentQuality');
400
+ const contentQualityValue = document.getElementById('contentQualityValue');
401
+ const networkingScore = document.getElementById('networkingScore');
402
+ const networkingScoreValue = document.getElementById('networkingScoreValue');
403
+ const industryAuthority = document.getElementById('industryAuthority');
404
+ const industryAuthorityValue = document.getElementById('industryAuthorityValue');
405
+
406
+ // Slider elements for business brand
407
+ const brandAwareness = document.getElementById('brandAwareness');
408
+ const brandAwarenessValue = document.getElementById('brandAwarenessValue');
409
+ const customerLoyalty = document.getElementById('customerLoyalty');
410
+ const customerLoyaltyValue = document.getElementById('customerLoyaltyValue');
411
+ const marketingSpend = document.getElementById('marketingSpend');
412
+ const marketingSpendValue = document.getElementById('marketingSpendValue');
413
+ const brandDifferentiation = document.getElementById('brandDifferentiation');
414
+ const brandDifferentiationValue = document.getElementById('brandDifferentiationValue');
415
+ const marketPosition = document.getElementById('marketPosition');
416
+ const marketPositionValue = document.getElementById('marketPositionValue');
417
+
418
+ // Progress bars
419
+ const brandStrengthBar = document.getElementById('brandStrengthBar');
420
+ const monetizationBar = document.getElementById('monetizationBar');
421
+ const influenceBar = document.getElementById('influenceBar');
422
+
423
+ // Badges
424
+ const influencerBadge = document.getElementById('influencerBadge');
425
+ const thoughtLeaderBadge = document.getElementById('thoughtLeaderBadge');
426
+ const monetizerBadge = document.getElementById('monetizerBadge');
427
+ const connectorBadge = document.getElementById('connectorBadge');
428
+
429
+ // Insight texts
430
+ const personalInsightText = document.getElementById('personalInsightText');
431
+ const businessInsightText = document.getElementById('businessInsightText');
432
+
433
+ // Toggle between personal and business brand
434
+ personalBtn.addEventListener('click', () => {
435
+ personalBtn.classList.add('bg-primary', 'text-white');
436
+ personalBtn.classList.remove('bg-transparent', 'text-dark');
437
+ businessBtn.classList.remove('bg-primary', 'text-white');
438
+ businessBtn.classList.add('bg-transparent', 'text-dark');
439
+ personalMetrics.classList.remove('hidden');
440
+ businessMetrics.classList.add('hidden');
441
+ personalInsights.classList.remove('hidden');
442
+ businessInsights.classList.add('hidden');
443
+ });
444
+
445
+ businessBtn.addEventListener('click', () => {
446
+ businessBtn.classList.add('bg-primary', 'text-white');
447
+ businessBtn.classList.remove('bg-transparent', 'text-dark');
448
+ personalBtn.classList.remove('bg-primary', 'text-white');
449
+ personalBtn.classList.add('bg-transparent', 'text-dark');
450
+ businessMetrics.classList.remove('hidden');
451
+ personalMetrics.classList.add('hidden');
452
+ businessInsights.classList.remove('hidden');
453
+ personalInsights.classList.add('hidden');
454
+ });
455
+
456
+ // Update slider values in real-time
457
+ socialFollowing.addEventListener('input', () => {
458
+ socialFollowingValue.textContent = numberWithCommas(socialFollowing.value);
459
+ });
460
+
461
+ engagementRate.addEventListener('input', () => {
462
+ engagementRateValue.textContent = engagementRate.value + '%';
463
+ });
464
+
465
+ contentQuality.addEventListener('input', () => {
466
+ contentQualityValue.textContent = contentQuality.value + '/10';
467
+ });
468
+
469
+ networkingScore.addEventListener('input', () => {
470
+ networkingScoreValue.textContent = networkingScore.value + '/10';
471
+ });
472
+
473
+ industryAuthority.addEventListener('input', () => {
474
+ industryAuthorityValue.textContent = industryAuthority.value + '/10';
475
+ });
476
+
477
+ brandAwareness.addEventListener('input', () => {
478
+ brandAwarenessValue.textContent = brandAwareness.value + '%';
479
+ });
480
+
481
+ customerLoyalty.addEventListener('input', () => {
482
+ customerLoyaltyValue.textContent = customerLoyalty.value + '/10';
483
+ });
484
+
485
+ marketingSpend.addEventListener('input', () => {
486
+ marketingSpendValue.textContent = '$' + numberWithCommas(marketingSpend.value);
487
+ });
488
+
489
+ brandDifferentiation.addEventListener('input', () => {
490
+ brandDifferentiationValue.textContent = brandDifferentiation.value + '/10';
491
+ });
492
+
493
+ marketPosition.addEventListener('input', () => {
494
+ marketPositionValue.textContent = marketPosition.value + '/10';
495
+ });
496
+
497
+ // Calculate ROI
498
+ calculateBtn.addEventListener('click', () => {
499
+ // Show loading state
500
+ calculateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Calculating...';
501
+
502
+ // Simulate calculation delay
503
+ setTimeout(() => {
504
+ let score, brandStrength, monetization, influence;
505
+
506
+ if (!businessMetrics.classList.contains('hidden')) {
507
+ // Business brand calculation
508
+ score = calculateBusinessROI();
509
+ updateBusinessInsights(score);
510
+ } else {
511
+ // Personal brand calculation
512
+ score = calculatePersonalROI();
513
+ updatePersonalInsights(score);
514
+ }
515
+
516
+ // Update UI
517
+ updateROIDisplay(score);
518
+ updateBadges(score);
519
+
520
+ // Reset button
521
+ calculateBtn.innerHTML = 'Calculate My Brand ROI';
522
+
523
+ // Scroll to results
524
+ document.querySelector('.bg-white.p-6.rounded-xl.shadow-lg').scrollIntoView({ behavior: 'smooth' });
525
+ }, 1000);
526
+ });
527
+
528
+ // Share results
529
+ shareBtn.addEventListener('click', () => {
530
+ alert('Share functionality would be implemented here! In a real app, this would share your Brand ROI score on social media.');
531
+ });
532
+
533
+ // Helper functions
534
+ function numberWithCommas(x) {
535
+ return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
536
+ }
537
+
538
+ function calculatePersonalROI() {
539
+ const followingScore = Math.min(100, parseInt(socialFollowing.value) / 10000);
540
+ const engagementScore = parseInt(engagementRate.value) * 5;
541
+ const contentScore = parseInt(contentQuality.value) * 10;
542
+ const networkScore = parseInt(networkingScore.value) * 10;
543
+ const authorityScore = parseInt(industryAuthority.value) * 10;
544
+
545
+ // Weighted average
546
+ const totalScore = (followingScore * 0.2) + (engagementScore * 0.25) +
547
+ (contentScore * 0.25) + (networkScore * 0.15) +
548
+ (authorityScore * 0.15);
549
+
550
+ // Cap at 100
551
+ return Math.min(100, Math.round(totalScore));
552
+ }
553
+
554
+ function calculateBusinessROI() {
555
+ const awarenessScore = parseInt(brandAwareness.value);
556
+ const loyaltyScore = parseInt(customerLoyalty.value) * 10;
557
+ const spendEfficiency = Math.min(100, 100 - (parseInt(marketingSpend.value) / 1000));
558
+ const differentiationScore = parseInt(brandDifferentiation.value) * 10;
559
+ const positionScore = parseInt(marketPosition.value) * 10;
560
+
561
+ // Weighted average
562
+ const totalScore = (awarenessScore * 0.3) + (loyaltyScore * 0.25) +
563
+ (spendEfficiency * 0.15) + (differentiationScore * 0.15) +
564
+ (positionScore * 0.15);
565
+
566
+ // Cap at 100
567
+ return Math.min(100, Math.round(totalScore));
568
+ }
569
+
570
+ function updateROIDisplay(score) {
571
+ // Animate the score increase
572
+ let currentScore = 0;
573
+ const increment = score / 20;
574
+
575
+ const timer = setInterval(() => {
576
+ currentScore += increment;
577
+ if (currentScore >= score) {
578
+ currentScore = score;
579
+ clearInterval(timer);
580
+ }
581
+ roiScore.textContent = Math.round(currentScore);
582
+
583
+ // Update progress circle
584
+ const circle = document.querySelector('.progress-ring__circle');
585
+ const radius = 70;
586
+ const circumference = radius * 2 * Math.PI;
587
+ const offset = circumference - (currentScore / 100) * circumference;
588
+ circle.style.strokeDasharray = `${circumference} ${circumference}`;
589
+ circle.style.strokeDashoffset = offset;
590
+
591
+ // Update progress bars
592
+ brandStrengthBar.style.width = `${Math.min(100, score + 10)}%`;
593
+ monetizationBar.style.width = `${Math.min(100, score - 5)}%`;
594
+ influenceBar.style.width = `${Math.min(100, score + 5)}%`;
595
+ }, 50);
596
+ }
597
+
598
+ function updatePersonalInsights(score) {
599
+ let insight = '';
600
+
601
+ if (score < 30) {
602
+ insight = 'Your personal brand is in the early stages. Focus on building your online presence and creating valuable content to establish your authority.';
603
+ } else if (score < 60) {
604
+ insight = 'Your personal brand is growing! Continue engaging with your audience and expanding your network to increase your influence.';
605
+ } else if (score < 80) {
606
+ insight = 'Strong personal brand! You have good recognition in your industry. Consider monetizing your influence through partnerships or products.';
607
+ } else {
608
+ insight = 'Exceptional personal brand! You are a recognized authority with significant influence. Leverage this to create new opportunities and scale your impact.';
609
+ }
610
+
611
+ personalInsightText.textContent = insight;
612
+ }
613
+
614
+ function updateBusinessInsights(score) {
615
+ let insight = '';
616
+
617
+ if (score < 30) {
618
+ insight = 'Your business brand needs more recognition. Invest in marketing and brand differentiation to stand out in your market.';
619
+ } else if (score < 60) {
620
+ insight = 'Your business brand is gaining traction. Focus on customer loyalty and consistent messaging to strengthen your position.';
621
+ } else if (score < 80) {
622
+ insight = 'Strong business brand! You have good market awareness. Optimize your marketing spend to improve ROI and consider expanding your offerings.';
623
+ } else {
624
+ insight = 'Exceptional business brand! You are a market leader with strong customer loyalty. Explore new markets and innovative ways to leverage your brand equity.';
625
+ }
626
+
627
+ businessInsightText.textContent = insight;
628
+ }
629
+
630
+ function updateBadges(score) {
631
+ // Reset all badges
632
+ [influencerBadge, thoughtLeaderBadge, monetizerBadge, connectorBadge].forEach(badge => {
633
+ badge.classList.add('opacity-50');
634
+ badge.querySelector('i').classList.remove('text-primary');
635
+ badge.querySelector('i').classList.add('text-gray-400');
636
+ badge.classList.remove('border-primary', 'pulse-animation');
637
+ });
638
+
639
+ // Award badges based on score and metrics
640
+ if (score >= 40) {
641
+ if (!businessMetrics.classList.contains('hidden')) {
642
+ // Business brand badges
643
+ if (parseInt(brandAwareness.value) >= 50) {
644
+ influencerBadge.classList.remove('opacity-50');
645
+ influencerBadge.querySelector('i').classList.remove('text-gray-400');
646
+ influencerBadge.querySelector('i').classList.add('text-primary');
647
+ influencerBadge.classList.add('border-primary', 'pulse-animation');
648
+ }
649
+
650
+ if (parseInt(brandDifferentiation.value) >= 7) {
651
+ thoughtLeaderBadge.classList.remove('opacity-50');
652
+ thoughtLeaderBadge.querySelector('i').classList.remove('text-gray-400');
653
+ thoughtLeaderBadge.querySelector('i').classList.add('text-primary');
654
+ thoughtLeaderBadge.classList.add('border-primary', 'pulse-animation');
655
+ }
656
+
657
+ if (score >= 70) {
658
+ monetizerBadge.classList.remove('opacity-50');
659
+ monetizerBadge.querySelector('i').classList.remove('text-gray-400');
660
+ monetizerBadge.querySelector('i').classList.add('text-primary');
661
+ monetizerBadge.classList.add('border-primary', 'pulse-animation');
662
+ }
663
+
664
+ if (parseInt(customerLoyalty.value) >= 7) {
665
+ connectorBadge.classList.remove('opacity-50');
666
+ connectorBadge.querySelector('i').classList.remove('text-gray-400');
667
+ connectorBadge.querySelector('i').classList.add('text-primary');
668
+ connectorBadge.classList.add('border-primary', 'pulse-animation');
669
+ }
670
+ } else {
671
+ // Personal brand badges
672
+ if (parseInt(socialFollowing.value) >= 10000) {
673
+ influencerBadge.classList.remove('opacity-50');
674
+ influencerBadge.querySelector('i').classList.remove('text-gray-400');
675
+ influencerBadge.querySelector('i').classList.add('text-primary');
676
+ influencerBadge.classList.add('border-primary', 'pulse-animation');
677
+ }
678
+
679
+ if (parseInt(industryAuthority.value) >= 7) {
680
+ thoughtLeaderBadge.classList.remove('opacity-50');
681
+ thoughtLeaderBadge.querySelector('i').classList.remove('text-gray-400');
682
+ thoughtLeaderBadge.querySelector('i').classList.add('text-primary');
683
+ thoughtLeaderBadge.classList.add('border-primary', 'pulse-animation');
684
+ }
685
+
686
+ if (score >= 70) {
687
+ monetizerBadge.classList.remove('opacity-50');
688
+ monetizerBadge.querySelector('i').classList.remove('text-gray-400');
689
+ monetizerBadge.querySelector('i').classList.add('text-primary');
690
+ monetizerBadge.classList.add('border-primary', 'pulse-animation');
691
+ }
692
+
693
+ if (parseInt(networkingScore.value) >= 7) {
694
+ connectorBadge.classList.remove('opacity-50');
695
+ connectorBadge.querySelector('i').classList.remove('text-gray-400');
696
+ connectorBadge.querySelector('i').classList.add('text-primary');
697
+ connectorBadge.classList.add('border-primary', 'pulse-animation');
698
+ }
699
+ }
700
+ }
701
+ }
702
+
703
+ // Initialize progress circle
704
+ document.addEventListener('DOMContentLoaded', () => {
705
+ const circle = document.querySelector('.progress-ring__circle');
706
+ const radius = 70;
707
+ const circumference = radius * 2 * Math.PI;
708
+
709
+ circle.style.strokeDasharray = `${circumference} ${circumference}`;
710
+ circle.style.strokeDashoffset = circumference;
711
+ });
712
+ </script>
713
+ <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=JayStormX8/brand-roi-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
714
+ </html>