Hugging Face's logo

Spaces:
Sunilsahani
/
website
Running

App Files Community
Sunilsahani commited on
Commit
f03a6ca
·
verified ·
1 Parent(s): 4f356a7

create a website which is work on youtube algoritham step by step - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +969 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Website
3
- emoji: 🏆
4
  colorFrom: green
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: website
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: gray
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,969 @@
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>YouTube Algorithm Explorer</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
+ <style>
10
+ .progress-container {
11
+ width: 100%;
12
+ height: 6px;
13
+ background: #e0e0e0;
14
+ border-radius: 3px;
15
+ }
16
+
17
+ .progress-bar {
18
+ height: 100%;
19
+ background: linear-gradient(90deg, #FF0000, #FF3333);
20
+ border-radius: 3px;
21
+ transition: width 0.3s ease;
22
+ }
23
+
24
+ .algorithm-step {
25
+ opacity: 0.5;
26
+ transform: scale(0.95);
27
+ transition: all 0.3s ease;
28
+ }
29
+
30
+ .algorithm-step.active {
31
+ opacity: 1;
32
+ transform: scale(1);
33
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
34
+ }
35
+
36
+ @keyframes pulse {
37
+ 0% { transform: scale(1); }
38
+ 50% { transform: scale(1.05); }
39
+ 100% { transform: scale(1); }
40
+ }
41
+
42
+ .pulse-animation {
43
+ animation: pulse 2s infinite;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-100 font-sans">
48
+ <div class="min-h-screen flex flex-col">
49
+ <!-- Header -->
50
+ <header class="bg-white shadow-sm">
51
+ <div class="container mx-auto px-4 py-4 flex items-center justify-between">
52
+ <div class="flex items-center space-x-2">
53
+ <i class="fab fa-youtube text-red-600 text-3xl"></i>
54
+ <h1 class="text-xl font-bold text-gray-800">YouTube Algorithm Explorer</h1>
55
+ </div>
56
+ <button id="mobile-menu-button" class="md:hidden text-gray-600">
57
+ <i class="fas fa-bars text-xl"></i>
58
+ </button>
59
+ <nav class="hidden md:flex space-x-6">
60
+ <a href="#" class="text-gray-700 hover:text-red-600">Home</a>
61
+ <a href="#how-it-works" class="text-gray-700 hover:text-red-600">How It Works</a>
62
+ <a href="#try-it" class="text-gray-700 hover:text-red-600">Try It</a>
63
+ <a href="#tips" class="text-gray-700 hover:text-red-600">Optimization Tips</a>
64
+ </nav>
65
+ </div>
66
+
67
+ <!-- Mobile Menu -->
68
+ <div id="mobile-menu" class="hidden md:hidden bg-white px-4 py-2 border-t">
69
+ <a href="#" class="block py-2 text-gray-700 hover:text-red-600">Home</a>
70
+ <a href="#how-it-works" class="block py-2 text-gray-700 hover:text-red-600">How It Works</a>
71
+ <a href="#try-it" class="block py-2 text-gray-700 hover:text-red-600">Try It</a>
72
+ <a href="#tips" class="block py-2 text-gray-700 hover:text-red-600">Optimization Tips</a>
73
+ </div>
74
+ </header>
75
+
76
+ <!-- Hero Section -->
77
+ <section class="bg-gradient-to-r from-red-600 to-red-800 text-white py-16">
78
+ <div class="container mx-auto px-4 text-center">
79
+ <h2 class="text-4xl font-bold mb-4">Understand YouTube's Recommendation System</h2>
80
+ <p class="text-xl mb-8 max-w-3xl mx-auto">A step-by-step interactive guide to demystify how YouTube decides what videos to recommend to you</p>
81
+ <a href="#how-it-works" class="bg-white text-red-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300 inline-flex items-center">
82
+ Start Learning
83
+ <i class="fas fa-arrow-down ml-2"></i>
84
+ </a>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- How It Works Section -->
89
+ <section id="how-it-works" class="py-16 bg-white">
90
+ <div class="container mx-auto px-4">
91
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How YouTube's Algorithm Works</h2>
92
+
93
+ <!-- Progress Bar -->
94
+ <div class="max-w-3xl mx-auto mb-10">
95
+ <div class="progress-container">
96
+ <div id="progress-bar" class="progress-bar" style="width: 20%;"></div>
97
+ </div>
98
+ <div class="flex justify-between mt-2 text-sm text-gray-600">
99
+ <span>Step 1</span>
100
+ <span>Step 5</span>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Steps Container -->
105
+ <div class="max-w-3xl mx-auto">
106
+ <!-- Step 1 -->
107
+ <div id="step1" class="algorithm-step active bg-gray-50 rounded-xl p-6 mb-6">
108
+ <div class="flex items-start">
109
+ <div class="bg-red-100 text-red-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 font-bold">1</div>
110
+ <div>
111
+ <h3 class="text-xl font-semibold mb-3">Watch History Analysis</h3>
112
+ <p class="text-gray-700 mb-4">YouTube starts by analyzing your watch history. It looks at:</p>
113
+ <ul class="list-disc pl-5 space-y-2 text-gray-700 mb-4">
114
+ <li>Videos you've watched completely</li>
115
+ <li>Videos you skipped or disliked</li>
116
+ <li>Time spent watching specific content types</li>
117
+ <li>Your watch patterns (time of day, duration)</li>
118
+ </ul>
119
+ <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
120
+ <div class="flex items-center">
121
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i>
122
+ <p class="text-blue-800">This is why logging in improves recommendations - it allows YouTube to personalize suggestions based on your history.</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Step 2 -->
130
+ <div id="step2" class="algorithm-step bg-gray-50 rounded-xl p-6 mb-6">
131
+ <div class="flex items-start">
132
+ <div class="bg-red-100 text-red-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 font-bold">2</div>
133
+ <div>
134
+ <h3 class="text-xl font-semibold mb-3">Content Similarity Matching</h3>
135
+ <p class="text-gray-700 mb-4">The algorithm then finds videos that are similar to what you've watched, considering:</p>
136
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
137
+ <div class="bg-purple-50 p-3 rounded-lg border border-purple-200">
138
+ <h4 class="font-medium text-purple-800 mb-1 flex items-center">
139
+ <i class="fas fa-tags mr-2"></i> Topics & Keywords
140
+ </h4>
141
+ <p class="text-sm text-purple-700">Video titles, descriptions, and metadata are analyzed for keywords.</p>
142
+ </div>
143
+ <div class="bg-green-50 p-3 rounded-lg border border-green-200">
144
+ <h4 class="font-medium text-green-800 mb-1 flex items-center">
145
+ <i class="fas fa-users mr-2"></i> Viewing Patterns
146
+ </h4>
147
+ <p class="text-sm text-green-700">"People who watched X also watched Y" patterns are identified.</p>
148
+ </div>
149
+ </div>
150
+ <p class="text-gray-700">YouTube uses natural language processing and deep learning to understand video content beyond just keywords.</p>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Step 3 -->
156
+ <div id="step3" class="algorithm-step bg-gray-50 rounded-xl p-6 mb-6">
157
+ <div class="flex items-start">
158
+ <div class="bg-red-100 text-red-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 font-bold">3</div>
159
+ <div>
160
+ <h3 class="text-xl font-semibold mb-3">User Engagement Signals</h3>
161
+ <p class="text-gray-700 mb-4">For each potential recommendation, YouTube evaluates how users typically engage with the video:</p>
162
+ <div class="flex flex-wrap gap-3 mb-4">
163
+ <span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm">Click-through Rate</span>
164
+ <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">Watch Duration</span>
165
+ <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm">Likes/Dislikes</span>
166
+ <span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm">Comments</span>
167
+ <span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">Shares</span>
168
+ </div>
169
+ <div class="relative h-40 bg-gray-200 rounded-lg overflow-hidden">
170
+ <div class="absolute h-full w-1/3 bg-green-100 border-r border-green-200">
171
+ <div class="p-3">
172
+ <div class="text-xs text-green-700 font-medium mb-1">High Engagement</div>
173
+ <ul class="text-xs text-green-700 space-y-1">
174
+ <li>70%+ watch time</li>
175
+ <li>20%+ CTR</li>
176
+ <li>Positive interactions</li>
177
+ </ul>
178
+ </div>
179
+ </div>
180
+ <div class="absolute h-full left-1/3 w-1/3 bg-yellow-100 border-r border-yellow-200">
181
+ <div class="p-3">
182
+ <div class="text-xs text-yellow-700 font-medium mb-1">Medium Engagement</div>
183
+ <ul class="text-xs text-yellow-700 space-y-1">
184
+ <li>30-70% watch time</li>
185
+ <li>5-20% CTR</li>
186
+ <li>Neutral interactions</li>
187
+ </ul>
188
+ </div>
189
+ </div>
190
+ <div class="absolute h-full right-0 w-1/3 bg-red-100">
191
+ <div class="p-3">
192
+ <div class="text-xs text-red-700 font-medium mb-1">Low Engagement</div>
193
+ <ul class="text-xs text-red-700 space-y-1">
194
+ <li>Under 30% watch time</li>
195
+ <li>Under 5% CTR</li>
196
+ <li>Negative interactions</li>
197
+ </ul>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Step 4 -->
206
+ <div id="step4" class="algorithm-step bg-gray-50 rounded-xl p-6 mb-6">
207
+ <div class="flex items-start">
208
+ <div class="bg-red-100 text-red-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 font-bold">4</div>
209
+ <div>
210
+ <h3 class="text-xl font-semibold mb-3">Personalization Factors</h3>
211
+ <p class="text-gray-700 mb-4">The algorithm then personalizes recommendations based on your specific preferences:</p>
212
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
213
+ <div class="border rounded-lg p-4 hover:bg-blue-50 transition">
214
+ <div class="flex items-center mb-2">
215
+ <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-3">
216
+ <i class="fas fa-clock"></i>
217
+ </div>
218
+ <h4 class="font-medium">Session Context</h4>
219
+ </div>
220
+ <p class="text-sm text-gray-600">Your current watch session influences what's recommended next.</p>
221
+ </div>
222
+ <div class="border rounded-lg p-4 hover:bg-purple-50 transition">
223
+ <div class="flex items-center mb-2">
224
+ <div class="bg-purple-100 text-purple-600 p-2 rounded-lg mr-3">
225
+ <i class="fas fa-map-marker-alt"></i>
226
+ </div>
227
+ <h4 class="font-medium">Location & Device</h4>
228
+ </div>
229
+ <p class="text-sm text-gray-600">Local trends and device type affect recommendations.</p>
230
+ </div>
231
+ <div class="border rounded-lg p-4 hover:bg-green-50 transition">
232
+ <div class="flex items-center mb-2">
233
+ <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-3">
234
+ <i class="fas fa-user"></i>
235
+ </div>
236
+ <h4 class="font-medium">Demographics</h4>
237
+ </div>
238
+ <p class="text-sm text-gray-600">Age, gender, and other demographic data influence suggestions.</p>
239
+ </div>
240
+ <div class="border rounded-lg p-4 hover:bg-yellow-50 transition">
241
+ <div class="flex items-center mb-2">
242
+ <div class="bg-yellow-100 text-yellow-600 p-2 rounded-lg mr-3">
243
+ <i class="fas fa-bell"></i>
244
+ </div>
245
+ <h4 class="font-medium">Notifications</h4>
246
+ </div>
247
+ <p class="text-sm text-gray-600">Subscriptions and notification settings impact what you see first.</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Step 5 -->
255
+ <div id="step5" class="algorithm-step bg-gray-50 rounded-xl p-6">
256
+ <div class="flex items-start">
257
+ <div class="bg-red-100 text-red-600 rounded-full w-10 h-10 flex items-center justify-center mr-4 font-bold">5</div>
258
+ <div>
259
+ <h3 class="text-xl font-semibold mb-3">Final Ranking & Display</h3>
260
+ <p class="text-gray-700 mb-4">The system combines all these factors to rank and display recommendations:</p>
261
+ <div class="relative bg-gray-900 rounded-lg p-6 text-white mb-4">
262
+ <div class="absolute top-0 left-0 bg-red-600 text-xs px-2 py-1 rounded-br-lg">YOUTUBE UI (SIMULATED)</div>
263
+ <div class="flex mb-4">
264
+ <div class="w-1/4 mr-4">
265
+ <div class="bg-gray-700 aspect-video rounded mb-2"></div>
266
+ <div class="h-3 bg-gray-700 rounded mb-1 w-3/4"></div>
267
+ <div class="h-2 bg-gray-700 rounded w-1/2"></div>
268
+ </div>
269
+ <div class="w-1/4 mr-4">
270
+ <div class="bg-gray-700 aspect-video rounded mb-2"></div>
271
+ <div class="h-3 bg-gray-700 rounded mb-1 w-3/4"></div>
272
+ <div class="h-2 bg-gray-700 rounded w-1/2"></div>
273
+ </div>
274
+ <div class="w-1/4 mr-4">
275
+ <div class="bg-gray-700 aspect-video rounded mb-2 pulse-animation">
276
+ <div class="absolute inset-0 flex items-center justify-center text-red-500">
277
+ <i class="fas fa-bolt text-xl"></i>
278
+ </div>
279
+ </div>
280
+ <div class="h-3 bg-gray-700 rounded mb-1 w-3/4"></div>
281
+ <div class="h-2 bg-gray-700 rounded w-1/2"></div>
282
+ </div>
283
+ <div class="w-1/4">
284
+ <div class="bg-gray-700 aspect-video rounded mb-2"></div>
285
+ <div class="h-3 bg-gray-700 rounded mb-1 w-3/4"></div>
286
+ <div class="h-2 bg-gray-700 rounded w-1/2"></div>
287
+ </div>
288
+ </div>
289
+ <div class="h-2 bg-gray-700 rounded mb-2 w-full"></div>
290
+ <div class="flex justify-between">
291
+ <div class="h-2 bg-gray-700 rounded w-1/4"></div>
292
+ <div class="h-2 bg-gray-700 rounded w-1/4"></div>
293
+ </div>
294
+ </div>
295
+ <p class="text-gray-700">The glow effect indicates the video the algorithm predicts you're most likely to watch next based on all analyzed factors.</p>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Navigation Buttons -->
302
+ <div class="max-w-3xl mx-auto flex justify-between mt-8">
303
+ <button id="prev-step" class="bg-gray-200 hover:bg-gray-300 px-6 py-2 rounded-lg font-medium text-gray-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
304
+ <i class="fas fa-arrow-left mr-2"></i> Previous
305
+ </button>
306
+ <button id="next-step" class="bg-red-600 hover:bg-red-700 px-6 py-2 rounded-lg font-medium text-white transition">
307
+ Next <i class="fas fa-arrow-right ml-2"></i>
308
+ </button>
309
+ </div>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- Try It Section -->
314
+ <section id="try-it" class="py-16 bg-gray-50">
315
+ <div class="container mx-auto px-4">
316
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Try the Algorithm Simulator</h2>
317
+
318
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
319
+ <h3 class="text-xl font-semibold mb-6">Simulate how videos get recommended</h3>
320
+
321
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
322
+ <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
323
+ <h4 class="font-medium mb-3 text-blue-800 flex items-center">
324
+ <i class="fas fa-user mr-2"></i> Your Preferences
325
+ </h4>
326
+ <div class="space-y-3">
327
+ <div>
328
+ <label class="block text-sm text-gray-600 mb-1">Watch History</label>
329
+ <select id="history-select" class="w-full border rounded p-2 text-sm">
330
+ <option value="tech-heavy">Tech-heavy</option>
331
+ <option value="balanced">Balanced</option>
332
+ <option value="entertainment-heavy">Entertainment-heavy</option>
333
+ <option value="educational-heavy">Educational-heavy</option>
334
+ </select>
335
+ </div>
336
+ <div>
337
+ <label class="block text-sm text-gray-600 mb-1">Watch Duration</label>
338
+ <select id="duration-select" class="w-full border rounded p-2 text-sm">
339
+ <option value="long">Watch most videos to end</option>
340
+ <option value="medium">Watch 50-70% of videos</option>
341
+ <option value="short">Skip around frequently</option>
342
+ </select>
343
+ </div>
344
+ <div>
345
+ <label class="block text-sm text-gray-600 mb-1">Interaction Style</label>
346
+ <select id="interaction-select" class="w-full border rounded p-2 text-sm">
347
+ <option value="active">Like/comment/share often</option>
348
+ <option value="passive">Rarely interact</option>
349
+ <option value="negative">Often dislike/skip</option>
350
+ </select>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="bg-green-50 rounded-lg p-4 border border-green-200">
356
+ <h4 class="font-medium mb-3 text-green-800 flex items-center">
357
+ <i class="fas fa-video mr-2"></i> Video Attributes
358
+ </h4>
359
+ <div class="space-y-3">
360
+ <div>
361
+ <label class="block text-sm text-gray-600 mb-1">Video Topic</label>
362
+ <select id="topic-select" class="w-full border rounded p-2 text-sm">
363
+ <option value="tech">Technology</option>
364
+ <option value="gaming">Gaming</option>
365
+ <option value="cooking">Cooking</option>
366
+ <option value="travel">Travel</option>
367
+ <option value="education">Education</option>
368
+ </select>
369
+ </div>
370
+ <div>
371
+ <label class="block text-sm text-gray-600 mb-1">Video Quality</label>
372
+ <select id="quality-select" class="w-full border rounded p-2 text-sm">
373
+ <option value="high">High production quality</option>
374
+ <option value="medium">Average quality</option>
375
+ <option value="low">Low production quality</option>
376
+ </select>
377
+ </div>
378
+ <div>
379
+ <label class="block text-sm text-gray-600 mb-1">Title Effectiveness</label>
380
+ <select id="title-select" class="w-full border rounded p-2 text-sm">
381
+ <option value="clickbaity">Clickbaity but accurate</option>
382
+ <option value="straightforward">Straightforward and descriptive</option>
383
+ <option value="vague">Vague or misleading</option>
384
+ </select>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
390
+ <h4 class="font-medium mb-3 text-purple-800 flex items-center">
391
+ <i class="fas fa-chart-line mr-2"></i> Performance Metrics
392
+ </h4>
393
+ <div class="space-y-3">
394
+ <div>
395
+ <label class="block text-sm text-gray-600 mb-1">Average Watch %</label>
396
+ <input id="watch-percent" type="range" min="10" max="90" value="60" class="w-full">
397
+ <div class="flex justify-between text-xs text-gray-500">
398
+ <span>10%</span>
399
+ <span id="watch-percent-value">60%</span>
400
+ <span>90%</span>
401
+ </div>
402
+ </div>
403
+ <div>
404
+ <label class="block text-sm text-gray-600 mb-1">Click-Through Rate</label>
405
+ <input id="ctr" type="range" min="1" max="30" value="10" class="w-full">
406
+ <div class="flex justify-between text-xs text-gray-500">
407
+ <span>1%</span>
408
+ <span id="ctr-value">10%</span>
409
+ <span>30%</span>
410
+ </div>
411
+ </div>
412
+ <div>
413
+ <label class="block text-sm text-gray-600 mb-1">Engagement Rate</label>
414
+ <input id="engagement" type="range" min="1" max="20" value="5" class="w-full">
415
+ <div class="flex justify-between text-xs text-gray-500">
416
+ <span>1%</span>
417
+ <span id="engagement-value">5%</span>
418
+ <span>20%</span>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <button id="simulate-btn" class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-semibold block mx-auto transition flex items-center">
426
+ <i class="fas fa-play mr-2"></i> Run Simulation
427
+ </button>
428
+
429
+ <div id="results" class="mt-8 hidden">
430
+ <h4 class="text-lg font-medium mb-4">Simulation Results</h4>
431
+ <div class="bg-gray-100 rounded-lg p-4 border border-gray-200">
432
+ <div class="mb-4">
433
+ <div class="flex justify-between mb-1">
434
+ <span class="text-sm font-medium">Recommendation Score</span>
435
+ <span id="score-value" class="text-sm font-medium">0/100</span>
436
+ </div>
437
+ <div class="progress-container">
438
+ <div id="score-bar" class="progress-bar" style="width: 0%"></div>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
443
+ <div class="bg-white rounded-lg p-3 border">
444
+ <h5 class="font-medium text-gray-800 mb-2 flex items-center">
445
+ <i class="fas fa-thumbs-up text-green-500 mr-2"></i> Strengths
446
+ </h5>
447
+ <ul id="strengths" class="text-sm text-gray-700 space-y-1">
448
+ <!-- Filled by JavaScript -->
449
+ </ul>
450
+ </div>
451
+ <div class="bg-white rounded-lg p-3 border">
452
+ <h5 class="font-medium text-gray-800 mb-2 flex items-center">
453
+ <i class="fas fa-thumbs-down text-red-500 mr-2"></i> Weaknesses
454
+ </h5>
455
+ <ul id="weaknesses" class="text-sm text-gray-700 space-y-1">
456
+ <!-- Filled by JavaScript -->
457
+ </ul>
458
+ </div>
459
+ </div>
460
+
461
+ <div class="mt-4 bg-blue-50 border border-blue-200 rounded-lg p-4">
462
+ <h5 class="font-medium text-blue-800 mb-2 flex items-center">
463
+ <i class="fas fa-lightbulb text-blue-500 mr-2"></i> Suggestions for Improvement
464
+ </h5>
465
+ <ul id="suggestions" class="text-sm text-blue-700 space-y-1">
466
+ <!-- Filled by JavaScript -->
467
+ </ul>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </section>
474
+
475
+ <!-- Optimization Tips Section -->
476
+ <section id="tips" class="py-16 bg-white">
477
+ <div class="container mx-auto px-4">
478
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Algorithm Optimization Tips</h2>
479
+
480
+ <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
481
+ <!-- Tip 1 -->
482
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-200 hover:shadow-md transition">
483
+ <div class="bg-red-600 p-4 text-white">
484
+ <div class="flex items-center">
485
+ <div class="bg-white text-red-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 font-bold">
486
+ 1
487
+ </div>
488
+ <h3 class="font-semibold">Encourage Watch Time</h3>
489
+ </div>
490
+ </div>
491
+ <div class="p-5">
492
+ <ul class="space-y-3 text-sm text-gray-700">
493
+ <li class="flex items-start">
494
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
495
+ <span>Hook viewers in the first 15 seconds</span>
496
+ </li>
497
+ <li class="flex items-start">
498
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
499
+ <span>Use chapters to help navigation</span>
500
+ </li>
501
+ <li class="flex items-start">
502
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
503
+ <span>Create content that maintains interest throughout</span>
504
+ </li>
505
+ </ul>
506
+ </div>
507
+ </div>
508
+
509
+ <!-- Tip 2 -->
510
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-200 hover:shadow-md transition">
511
+ <div class="bg-red-600 p-4 text-white">
512
+ <div class="flex items-center">
513
+ <div class="bg-white text-red-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 font-bold">
514
+ 2
515
+ </div>
516
+ <h3 class="font-semibold">Optimize Metadata</h3>
517
+ </div>
518
+ </div>
519
+ <div class="p-5">
520
+ <ul class="space-y-3 text-sm text-gray-700">
521
+ <li class="flex items-start">
522
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
523
+ <span>Create compelling, accurate titles</span>
524
+ </li>
525
+ <li class="flex items-start">
526
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
527
+ <span>Write detailed descriptions with keywords</span>
528
+ </li>
529
+ <li class="flex items-start">
530
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
531
+ <span>Use relevant tags (but don't over-tag)</span>
532
+ </li>
533
+ <li class="flex items-start">
534
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
535
+ <span>Create custom thumbnails that stand out</span>
536
+ </li>
537
+ </ul>
538
+ </div>
539
+ </div>
540
+
541
+ <!-- Tip 3 -->
542
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-200 hover:shadow-md transition">
543
+ <div class="bg-red-600 p-4 text-white">
544
+ <div class="flex items-center">
545
+ <div class="bg-white text-red-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 font-bold">
546
+ 3
547
+ </div>
548
+ <h3 class="font-semibold">Boost Engagement</h3>
549
+ </div>
550
+ </div>
551
+ <div class="p-5">
552
+ <ul class="space-y-3 text-sm text-gray-700">
553
+ <li class="flex items-start">
554
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
555
+ <span>Ask questions to prompt comments</span>
556
+ </li>
557
+ <li class="flex items-start">
558
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
559
+ <span>Include clear calls-to-action</span>
560
+ </li>
561
+ <li class="flex items-start">
562
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
563
+ <span>Respond to comments to build community</span>
564
+ </li>
565
+ <li class="flex items-start">
566
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
567
+ <span>Use polls and cards to increase interaction</span>
568
+ </li>
569
+ </ul>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- Tip 4 -->
574
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-200 hover:shadow-md transition">
575
+ <div class="bg-red-600 p-4 text-white">
576
+ <div class="flex items-center">
577
+ <div class="bg-white text-red-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 font-bold">
578
+ 4
579
+ </div>
580
+ <h3 class="font-semibold">Understand Your Audience</h3>
581
+ </div>
582
+ </div>
583
+ <div class="p-5">
584
+ <ul class="space-y-3 text-sm text-gray-700">
585
+ <li class="flex items-start">
586
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
587
+ <span>Study your YouTube Analytics regularly</span>
588
+ </li>
589
+ <li class="flex items-start">
590
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
591
+ <span>Identify your best-performing content</span>
592
+ </li>
593
+ <li class="flex items-start">
594
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
595
+ <span>Notice when your audience is most active</span>
596
+ </li>
597
+ <li class="flex items-start">
598
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
599
+ <span>Adapt your content strategy based on data</span>
600
+ </li>
601
+ </ul>
602
+ </div>
603
+ </div>
604
+
605
+ <!-- Tip 5 -->
606
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-200 hover:shadow-md transition">
607
+ <div class="bg-red-600 p-4 text-white">
608
+ <div class="flex items-center">
609
+ <div class="bg-white text-red-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 font-bold">
610
+ 5
611
+ </div>
612
+ <h3 class="font-semibold">Publish Consistently</h3>
613
+ </div>
614
+ </div>
615
+ <div class="p-5">
616
+ <ul class="space-y-3 text-sm text-gray-700">
617
+ <li class="flex items-start">
618
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
619
+ <span>Establish a regular upload schedule</span>
620
+ </li>
621
+ <li class="flex items-start">
622
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
623
+ <span>Create content in series or sequences</span>
624
+ </li>
625
+ <li class="flex items-start">
626
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
627
+ <span>Use playlists to organize related videos</span>
628
+ </li>
629
+ <li class="flex items-start">
630
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
631
+ <span>Coordinate with YouTube trends and seasons</span>
632
+ </li>
633
+ </ul>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- Tip 6 -->
638
+ <div class="bg-gray-50 rounded-xl overflow-hidden border border-gray-200 hover:shadow-md transition">
639
+ <div class="bg-red-600 p-4 text-white">
640
+ <div class="flex items-center">
641
+ <div class="bg-white text-red-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 font-bold">
642
+ 6
643
+ </div>
644
+ <h3 class="font-semibold">Cross-Promote Wisely</h3>
645
+ </div>
646
+ </div>
647
+ <div class="p-5">
648
+ <ul class="space-y-3 text-sm text-gray-700">
649
+ <li class="flex items-start">
650
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
651
+ <span>Link to related videos in descriptions</span>
652
+ </li>
653
+ <li class="flex items-start">
654
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
655
+ <span>Use end screens effectively</span>
656
+ </li>
657
+ <li class="flex items-start">
658
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
659
+ <span>Promote on other platforms (e.g., social media)</span>
660
+ </li>
661
+ <li class="flex items-start">
662
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
663
+ <span>Collaborate with creators in your niche</span>
664
+ </li>
665
+ </ul>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ </div>
670
+ </section>
671
+
672
+ <!-- Newsletter Section -->
673
+ <section class="py-16 bg-gray-100">
674
+ <div class="container mx-auto px-4 text-center">
675
+ <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-sm p-8">
676
+ <h2 class="text-2xl font-bold mb-4 text-gray-800">Stay Updated on Algorithm Changes</h2>
677
+ <p class="text-gray-600 mb-6">YouTube's algorithm evolves constantly. Subscribe to get notified about important updates and new strategies.</p>
678
+ <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
679
+ <input type="email" placeholder="Your email address" class="flex-grow border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
680
+ <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg font-semibold transition">
681
+ Subscribe
682
+ </button>
683
+ </form>
684
+ <p class="text-xs text-gray-500 mt-3">We respect your privacy. Unsubscribe at any time.</p>
685
+ </div>
686
+ </div>
687
+ </section>
688
+
689
+ <!-- Footer -->
690
+ <footer class="bg-gray-900 text-white py-8">
691
+ <div class="container mx-auto px-4">
692
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
693
+ <div>
694
+ <h4 class="text-lg font-semibold mb-4 flex items-center">
695
+ <i class="fab fa-youtube text-red-500 mr-2"></i> YouTube Algorithm Explorer
696
+ </h4>
697
+ <p class="text-gray-400">Understanding how YouTube decides what videos to recommend through interactive exploration.</p>
698
+ </div>
699
+ <div>
700
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
701
+ <ul class="space-y-2">
702
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
703
+ <li><a href="#how-it-works" class="text-gray-400 hover:text-white transition">How It Works</a></li>
704
+ <li><a href="#try-it" class="text-gray-400 hover:text-white transition">Try It</a></li>
705
+ <li><a href="#tips" class="text-gray-400 hover:text-white transition">Optimization Tips</a></li>
706
+ </ul>
707
+ </div>
708
+ <div>
709
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
710
+ <ul class="space-y-2">
711
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Creator Academy</a></li>
712
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Case Studies</a></li>
713
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Research Papers</a></li>
714
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
715
+ </ul>
716
+ </div>
717
+ <div>
718
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
719
+ <div class="flex space-x-4 mb-4">
720
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
721
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
722
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
723
+ <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-youtube"></i></a>
724
+ </div>
725
+ <p class="text-gray-400">contact@ytalgorithme.edu</p>
726
+ </div>
727
+ </div>
728
+ <div class="border-t border-gray-800 mt-8 pt-6 text-center text-gray-400 text-sm">
729
+ <p>© 2023 YouTube Algorithm Explorer. For educational purposes only.</p>
730
+ <p class="mt-1">YouTube is a trademark of Google LLC. This site is not affiliated with YouTube or Google.</p>
731
+ </div>
732
+ </div>
733
+ </footer>
734
+ </div>
735
+
736
+ <script>
737
+ // Mobile menu toggle
738
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
739
+ const menu = document.getElementById('mobile-menu');
740
+ menu.classList.toggle('hidden');
741
+ });
742
+
743
+ // Step navigation
744
+ let currentStep = 1;
745
+ const totalSteps = 5;
746
+
747
+ function updateStepNavigation() {
748
+ // Update progress bar
749
+ const progress = (currentStep / totalSteps) * 100;
750
+ document.getElementById('progress-bar').style.width = `${progress}%`;
751
+
752
+ // Update step visibility
753
+ for (let i = 1; i <= totalSteps; i++) {
754
+ const step = document.getElementById(`step${i}`);
755
+ if (i === currentStep) {
756
+ step.classList.add('active');
757
+ step.classList.remove('opacity-50');
758
+ } else {
759
+ step.classList.remove('active');
760
+ step.classList.add('opacity-50');
761
+ }
762
+ }
763
+
764
+ // Update button states
765
+ document.getElementById('prev-step').disabled = currentStep === 1;
766
+ document.getElementById('next-step').disabled = currentStep === totalSteps;
767
+
768
+ // Change next button text if last step
769
+ if (currentStep === totalSteps) {
770
+ document.getElementById('next-step').textContent = 'Finish';
771
+ document.getElementById('next-step').innerHTML = 'Finish <i class="fas fa-check ml-2"></i>';
772
+ } else {
773
+ document.getElementById('next-step').textContent = 'Next';
774
+ document.getElementById('next-step').innerHTML = 'Next <i class="fas fa-arrow-right ml-2"></i>';
775
+ }
776
+ }
777
+
778
+ document.getElementById('next-step').addEventListener('click', function() {
779
+ if (currentStep < totalSteps) {
780
+ currentStep++;
781
+ updateStepNavigation();
782
+ } else {
783
+ // Reset or redirect when finished
784
+ currentStep = 1;
785
+ updateStepNavigation();
786
+ window.scrollTo({ top: 0, behavior: 'smooth' });
787
+ }
788
+ });
789
+
790
+ document.getElementById('prev-step').addEventListener('click', function() {
791
+ if (currentStep > 1) {
792
+ currentStep--;
793
+ updateStepNavigation();
794
+ }
795
+ });
796
+
797
+ // Initialize
798
+ updateStepNavigation();
799
+
800
+ // Range sliders
801
+ document.getElementById('watch-percent').addEventListener('input', function() {
802
+ document.getElementById('watch-percent-value').textContent = this.value + '%';
803
+ });
804
+
805
+ document.getElementById('ctr').addEventListener('input', function() {
806
+ document.getElementById('ctr-value').textContent = this.value + '%';
807
+ });
808
+
809
+ document.getElementById('engagement').addEventListener('input', function() {
810
+ document.getElementById('engagement-value').textContent = this.value + '%';
811
+ });
812
+
813
+ // Simulation logic
814
+ document.getElementById('simulate-btn').addEventListener('click', function() {
815
+ // Get all input values
816
+ const history = document.getElementById('history-select').value;
817
+ const duration = document.getElementById('duration-select').value;
818
+ const interaction = document.getElementById('interaction-select').value;
819
+ const topic = document.getElementById('topic-select').value;
820
+ const quality = document.getElementById('quality-select').value;
821
+ const title = document.getElementById('title-select').value;
822
+ const watchPercent = parseInt(document.getElementById('watch-percent').value);
823
+ const ctr = parseInt(document.getElementById('ctr').value);
824
+ const engagement = parseInt(document.getElementById('engagement').value);
825
+
826
+ // Calculate score (simplified for demo)
827
+ let score = 50; // Base score
828
+
829
+ // Adjust based on watch history match
830
+ const topicMatches = {
831
+ 'tech-heavy': ['tech'],
832
+ 'balanced': ['tech', 'gaming', 'cooking', 'travel', 'education'],
833
+ 'entertainment-heavy': ['gaming', 'travel'],
834
+ 'educational-heavy': ['education', 'tech']
835
+ };
836
+
837
+ if (topicMatches[history].includes(topic)) {
838
+ score += 15;
839
+ }
840
+
841
+ // Adjust based on watch duration
842
+ if (duration === 'long' && watchPercent >= 70) {
843
+ score += 10;
844
+ } else if (duration === 'medium' && watchPercent >= 50) {
845
+ score += 5;
846
+ } else if (duration === 'short' && watchPercent >= 30) {
847
+ score += 3;
848
+ }
849
+
850
+ // Adjust based on interaction
851
+ if (interaction === 'active' && engagement >= 8) {
852
+ score += 8;
853
+ } else if (interaction === 'passive') {
854
+ score += 3;
855
+ }
856
+
857
+ // Adjust based on video quality
858
+ if (quality === 'high') {
859
+ score += 7;
860
+ } else if (quality === 'medium') {
861
+ score += 3;
862
+ }
863
+
864
+ // Adjust based on title
865
+ if (title === 'clickbaity') {
866
+ score += 5;
867
+ } else if (title === 'straightforward') {
868
+ score += 3;
869
+ }
870
+
871
+ // Adjust based on CTR
872
+ const ctrScore = Math.min(ctr * 0.5, 10); // Max 10 points
873
+ score += ctrScore;
874
+
875
+ // Ensure score is within bounds
876
+ score = Math.max(0, Math.min(score, 100));
877
+
878
+ // Update UI with results
879
+ document.getElementById('score-value').textContent = score + '/100';
880
+ document.getElementById('score-bar').style.width = score + '%';
881
+
882
+ // Generate strengths
883
+ const strengthsList = document.getElementById('strengths');
884
+ strengthsList.innerHTML = '';
885
+
886
+ if (topicMatches[history].includes(topic)) {
887
+ strengthsList.innerHTML += '<li>Excellent match with viewer preferences</li>';
888
+ }
889
+
890
+ if (watchPercent >= 70) {
891
+ strengthsList.innerHTML += '<li>High watch percentage indicates engaging content</li>';
892
+ } else if (watchPercent >= 50) {
893
+ strengthsList.innerHTML += '<li>Above average watch percentage</li>';
894
+ }
895
+
896
+ if (ctr >= 15) {
897
+ strengthsList.innerHTML += '<li>Strong click-through rate</li>';
898
+ } else if (ctr >= 8) {
899
+ strengthsList.innerHTML += '<li>Good click-through rate</li>';
900
+ }
901
+
902
+ if (quality === 'high') {
903
+ strengthsList.innerHTML += '<li>High production quality</li>';
904
+ }
905
+
906
+ // Generate weaknesses
907
+ const weaknessesList = document.getElementById('weaknesses');
908
+ weaknessesList.innerHTML = '';
909
+
910
+ if (!topicMatches[history].includes(topic)) {
911
+ weaknessesList.innerHTML += '<li>Content doesn\'t match viewer preferences well</li>';
912
+ }
913
+
914
+ if (watchPercent < 30) {
915
+ weaknessesList.innerHTML += '<li>Low watch percentage suggests content may not meet expectations</li>';
916
+ }
917
+
918
+ if (ctr < 5) {
919
+ weaknessesList.innerHTML += '<li>Low click-through rate indicates unappealing title/thumbnail</li>';
920
+ }
921
+
922
+ if (engagement < 5 && interaction === 'active') {
923
+ weaknessesList.innerHTML += '<li>Low engagement from typically active viewers</li>';
924
+ }
925
+
926
+ if (quality === 'low') {
927
+ weaknessesList.innerHTML += '<li>Low production quality may deter viewers</li>';
928
+ }
929
+
930
+ if (title === 'vague') {
931
+ weaknessesList.innerHTML += '<li>Vague/misleading title may hurt long-term performance</li>';
932
+ }
933
+
934
+ // Generate suggestions
935
+ const suggestionsList = document.getElementById('suggestions');
936
+ suggestionsList.innerHTML = '';
937
+
938
+ if (!topicMatches[history].includes(topic)) {
939
+ suggestionsList.innerHTML += '<li>Consider creating content more aligned with viewer preferences</li>';
940
+ }
941
+
942
+ if (watchPercent < 50) {
943
+ suggestionsList.innerHTML += '<li>Work on making your content more engaging throughout</li>';
944
+ suggestionsList.innerHTML += '<li>Use analytics to identify drop-off points and improve those sections</li>';
945
+ }
946
+
947
+ if (ctr < 8) {
948
+ suggestionsList.innerHTML += '<li>Experiment with different title styles to improve click-through rate</li>';
949
+ suggestionsList.innerHTML += '<li>Test different thumbnail designs to find what works best</li>';
950
+ }
951
+
952
+ if (engagement < 5) {
953
+ suggestionsList.innerHTML += '<li>Include clear calls-to-action to encourage likes, comments, and shares</li>';
954
+ suggestionsList.innerHTML += '<li>Ask questions to prompt discussion in the comments</li>';
955
+ }
956
+
957
+ if (quality === 'low') {
958
+ suggestionsList.innerHTML += '<li>Invest in better equipment or editing to improve production quality</li>';
959
+ }
960
+
961
+ // Show results
962
+ document.getElementById('results').classList.remove('hidden');
963
+
964
+ // Scroll to results
965
+ document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
966
+ });
967
+ </script>
968
+ <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=Sunilsahani/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
969
+ </html>