Hugging Face's logo

Spaces:
privateuserh
/
StreamAI
Running

App Files Community
1
privateuserh commited on
Commit
d80f8ab
·
verified ·
1 Parent(s): 47208dd

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +4 -443
index.html CHANGED
@@ -6,451 +6,12 @@
6
  <title>StreamAI - Personalized Streaming Recommendations</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
- <link rel="stylesheet" href="style.css">
10
- <script src="app.js" defer></script>
11
-
12
-
13
  </head>
14
  <body class="bg-gray-100 font-sans">
15
- <!-- Notification -->
16
- <div id="notification" class="notification hidden">
17
- <div class="flex items-center">
18
- <i class="fas fa-bell text-yellow-300 mr-3"></i>
19
- <div>
20
- <p class="font-semibold" id="notification-title">Reminder Set!</p>
21
- <p class="text-sm" id="notification-message">We'll notify you when this show is about to broadcast.</p>
22
- </div>
23
- </div>
24
- </div>
25
-
26
- <!-- Production Button & Panel -->
27
- <div class="production-button" id="production-button">
28
- <i class="fas fa-video"></i>
29
- <div class="recording-indicator hidden" id="recording-indicator"></div>
30
- </div>
31
 
32
- <div class="production-panel" id="production-panel">
33
- <div class="flex mb-4">
34
- <div class="tab active" id="record-tab">Record</div>
35
- <div class="tab inactive" id="edit-tab">Edit</div>
36
- <div class="tab inactive" id="share-tab">Share</div>
37
- <div class="tab inactive" id="rank-tab">Rankings</div>
38
- </div>
39
-
40
- <div id="record-section">
41
- <h3 class="font-bold text-lg mb-4">Create Video Clips</h3>
42
- <p class="text-sm text-gray-600 mb-4">Record your screen and audio to create short clips for your production. Perfect for capturing highlights or creating content snippets.</p>
43
-
44
- <div class="clip-preview" id="clip-preview">
45
- <div class="clip-preview-placeholder">
46
- <i class="fas fa-video"></i>
47
- <p>Preview will appear here</p>
48
- </div>
49
- </div>
50
-
51
- <div class="mb-4">
52
- <button id="start-recording" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm font-medium transition">
53
- <i class="fas fa-circle mr-1"></i> Start Recording (5s clips)
54
- </button>
55
- <button id="stop-recording" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-full text-sm font-medium transition ml-2 hidden">
56
- <i class="fas fa-stop mr-1"></i> Stop
57
- </button>
58
- </div>
59
-
60
- <div class="progress-bar">
61
- <div class="progress-fill" id="progress-fill"></div>
62
- </div>
63
-
64
- <div id="clips-container" class="mb-4 max-h-40 overflow-y-auto">
65
- <p class="text-gray-500 text-sm">Clips will appear here when recorded...</p>
66
- </div>
67
- </div>
68
-
69
- <div id="edit-section" class="hidden">
70
- <h3 class="font-bold text-lg mb-4">Edit Your Production</h3>
71
- <p class="text-sm text-gray-600 mb-4">Combine your clips, add transitions, and create a polished final video.</p>
72
-
73
- <div class="mb-4">
74
- <label class="block text-sm font-medium text-gray-700 mb-1">Video Title</label>
75
- <input type="text" id="video-title" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="My Awesome Video">
76
- </div>
77
-
78
- <div class="mb-4">
79
- <label class="block text-sm font-medium text-gray-700 mb-1">Select Transition</label>
80
- <select id="video-transition" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
81
- <option value="none">No Transition</option>
82
- <option value="fade">Fade</option>
83
- <option value="slide">Slide</option>
84
- <option value="zoom">Zoom</option>
85
- </select>
86
- </div>
87
- </div>
88
-
89
- <div id="share-section" class="hidden">
90
- <h3 class="font-bold text-lg mb-4">Share with Bluetooth Group</h3>
91
- <p class="text-sm text-gray-600 mb-4">Connect with nearby devices and share your clips with the group.</p>
92
-
93
- <div class="flex items-center mb-4">
94
- <button id="bluetooth-connect" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium transition">
95
- <i class="fas fa-bluetooth-b mr-1"></i> Connect Devices
96
- </button>
97
- <div id="connection-status" class="ml-3 text-sm">
98
- <i class="fas fa-circle bluetooth-disconnected mr-1"></i>
99
- <span>Not connected</span>
100
- </div>
101
- </div>
102
-
103
- <div class="mb-4">
104
- <label class="block text-sm font-medium text-gray-700 mb-1">Your Username</label>
105
- <input type="text" id="username" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="Enter a username">
106
- </div>
107
-
108
- <div class="mb-4">
109
- <label class="block text-sm font-medium text-gray-700 mb-1">Content Category</label>
110
- <select id="content-category" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
111
- <option value="general">General</option>
112
- <option value="gaming">Gaming</option>
113
- <option value="education">Education</option>
114
- <option value="entertainment">Entertainment</option>
115
- <option value="news">News</option>
116
- </select>
117
- </div>
118
-
119
- <button id="share-clips" class="w-full bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium transition mb-4">
120
- <i class="fas fa-share-alt mr-1"></i> Share Selected Clips
121
- </button>
122
-
123
- <div id="shared-clips-container" class="max-h-40 overflow-y-auto">
124
- <p class="text-gray-500 text-sm">Shared clips will appear here...</p>
125
- </div>
126
- </div>
127
-
128
- <div id="rank-section" class="hidden">
129
- <h3 class="font-bold text-lg mb-4">Group Rankings</h3>
130
- <p class="text-sm text-gray-600 mb-4">See how your clips rank against others in your group.</p>
131
-
132
- <div class="mb-4">
133
- <label class="block text-sm font-medium text-gray-700 mb-1">Ranking Algorithm</label>
134
- <select id="ranking-algorithm" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
135
- <option value="engagement">Engagement Score</option>
136
- <option value="quality">Quality Score</option>
137
- <option value="consistency">Consistency Score</option>
138
- <option value="composite">Composite Score</option>
139
- </select>
140
- </div>
141
-
142
- <div id="rankings-container" class="max-h-60 overflow-y-auto">
143
- <p class="text-gray-500 text-sm">Rankings will appear here when available...</p>
144
- </div>
145
- </div>
146
-
147
- <div class="flex space-x-2">
148
- <button id="generate-video" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full text-sm font-medium transition flex-1">
149
- <i class="fas fa-magic mr-1"></i> Generate Video
150
- </button>
151
- <button id="clear-clips" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-full text-sm font-medium transition">
152
- <i class="fas fa-trash mr-1"></i>
153
- </button>
154
- </div>
155
- </div>
156
-
157
- <!-- Header -->
158
- <header class="gradient-bg text-white shadow-lg">
159
- <div class="container mx-auto px-4 py-6">
160
- <div class="flex justify-between items-center">
161
- <div class="flex items-center space-x-3">
162
- <i class="fas fa-stream text-3xl"></i>
163
- <h1 class="text-2xl font-bold">StreamAI</h1>
164
- </div>
165
- <nav class="hidden md:flex space-x-6">
166
- <a href="#" class="hover:text-indigo-200 transition">Home</a>
167
- <a href="#" class="hover:text-indigo-200 transition">Features</a>
168
- <a href="#" class="hover:text-indigo-200 transition">About</a>
169
- <a href="#" class="hover:text-indigo-200 transition">Contact</a>
170
- </nav>
171
- <button class="md:hidden text-xl">
172
- <i class="fas fa-bars"></i>
173
- </button>
174
- </div>
175
- </div>
176
- </header>
177
-
178
- <!-- Hero Section -->
179
- <section class="gradient-bg text-white py-16">
180
- <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
181
- <div class="md:w-1/2 mb-10 md:mb-0">
182
- <h2 class="text-4xl md:text-5xl font-bold mb-4">AI-Powered Streaming Recommendations</h2>
183
- <p class="text-xl mb-8 text-indigo-100">Get personalized streaming suggestions powered by Cloudflare Workers AI.</p>
184
- <div class="flex space-x-4">
185
- <button class="bg-white text-indigo-600 px-6 py-3 rounded-full font-semibold hover:bg-indigo-100 transition">
186
- Try It Now
187
- </button>
188
- <button class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-600 transition">
189
- How It Works
190
- </button>
191
- </div>
192
- </div>
193
- <div class="md:w-1/2 flex justify-center">
194
- <div class="relative w-64 h-64 md:w-80 md:h-80">
195
- <div class="absolute inset-0 bg-indigo-500 rounded-full opacity-20 floating"></div>
196
- <div class="absolute inset-4 bg-indigo-400 rounded-full opacity-30 floating" style="animation-delay: 0.5s;"></div>
197
- <div class="absolute inset-8 bg-indigo-300 rounded-full opacity-40 floating" style="animation-delay: 1s;"></div>
198
- <div class="absolute inset-12 bg-white rounded-full flex items-center justify-center">
199
- <i class="fas fa-robot text-6xl text-indigo-600"></i>
200
- </div>
201
- </div>
202
- </div>
203
- </div>
204
- </section>
205
-
206
- <!-- AI Chat Interface -->
207
- <section class="py-12 bg-white">
208
- <div class="container mx-auto px-4">
209
- <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Your Personal Streaming Assistant</h2>
210
-
211
- <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
212
- <!-- Chat header -->
213
- <div class="bg-indigo-600 text-white p-4 flex items-center">
214
- <div class="w-10 h-10 rounded-full bg-indigo-400 flex items-center justify-center mr-3">
215
- <i class="fas fa-robot"></i>
216
- </div>
217
- <div>
218
- <h3 class="font-semibold">StreamAI Assistant</h3>
219
- <p class="text-xs text-indigo-200">Powered by Cloudflare Workers AI</p>
220
- </div>
221
- <div class="ml-auto flex space-x-2">
222
- <button class="w-8 h-8 rounded-full bg-indigo-500 hover:bg-indigo-400 flex items-center justify-center">
223
- <i class="fas fa-ellipsis-h text-sm"></i>
224
- </button>
225
- </div>
226
- </div>
227
-
228
- <!-- Chat messages -->
229
- <div class="h-96 overflow-y-auto p-4 space-y-4" id="chat-messages">
230
- <div class="chat-bubble ai-bubble p-4 w-3/4">
231
- <p>Hi there! 👋 I'm your StreamAI assistant powered by Cloudflare Workers AI. I can recommend movies, TV shows, and other streaming content based on your preferences. What are you in the mood for today?</p>
232
- </div>
233
- </div>
234
-
235
- <!-- User input -->
236
- <div class="border-t border-gray-200 p-4 bg-white">
237
- <div class="flex items-center">
238
- <input type="text" id="user-input" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-full py-3 px-4 focus:outline-none focus:ring-2 focus:ring-indigo-500">
239
- <button id="send-btn" class="ml-3 w-12 h-12 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 flex items-center justify-center transition">
240
- <i class="fas fa-paper-plane"></i>
241
- </button>
242
- </div>
243
- <div class="mt-2 flex space-x-2">
244
- <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full transition" onclick="quickPrompt('Recommend a comedy movie')">
245
- Comedy
246
- </button>
247
- <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full transition" onclick="quickPrompt('What should I watch if I feel nostalgic?')">
248
- Nostalgic
249
- </button>
250
- <button class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded-full transition" onclick="quickPrompt('Suggest a thriller series')">
251
- Thriller
252
- </button>
253
- </div>
254
- </div>
255
- </div>
256
- </div>
257
- </section>
258
-
259
- <!-- Recommended Streams Section -->
260
- <section class="py-12 bg-gray-50">
261
- <div class="container mx-auto px-4">
262
- <h2 class="text-3xl font-bold text-center mb-6 text-gray-800">Recommended For You</h2>
263
-
264
- <!-- RSS Feed Integration -->
265
- <div class="max-w-4xl mx-auto mb-8 bg-white p-4 rounded-lg shadow">
266
- <div class="flex items-center mb-2">
267
- <i class="fas fa-rss-square text-orange-500 mr-2"></i>
268
- <h3 class="font-semibold">Personalized RSS Feed</h3>
269
- </div>
270
- <div class="flex items-center space-x-2 overflow-x-auto pb-2">
271
- <button class="rss-filter-btn px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm whitespace-nowrap" data-filter="all">
272
- All Content
273
- </button>
274
- <button class="rss-filter-btn px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap" data-filter="news">
275
- News Updates
276
- </button>
277
- <button class="rss-filter-btn px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap" data-filter="trending">
278
- Trending Now
279
- </button>
280
- <button class="rss-filter-btn px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm whitespace-nowrap" data-filter="personalized">
281
- For You
282
- </button>
283
- </div>
284
- <div id="rss-feed" class="mt-4 space-y-3">
285
- <!-- RSS items will be loaded here -->
286
- </div>
287
- </div>
288
-
289
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" id="recommendations-container">
290
- <!-- Recommendations will be dynamically inserted here -->
291
- </div>
292
- </div>
293
- </section>
294
-
295
- <!-- How It Works Section -->
296
- <section class="py-12 bg-white">
297
- <div class="container mx-auto px-4">
298
- <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How StreamAI Works</h2>
299
-
300
- <div class="grid md:grid-cols-3 gap-8">
301
- <div class="text-center p-6 rounded-xl bg-gray-50 hover:shadow-lg transition">
302
- <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
303
- <i class="fas fa-comment-alt text-indigo-600 text-xl"></i>
304
- </div>
305
- <h3 class="text-xl font-semibold mb-2">1. Chat with AI</h3>
306
- <p class="text-gray-600">Tell our AI assistant what you're in the mood for or ask for recommendations based on your preferences.</p>
307
- </div>
308
- <div class="text-center p-6 rounded-xl bg-gray-50 hover:shadow-lg transition">
309
- <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
310
- <i class="fas fa-brain text-indigo-600 text-xl"></i>
311
- </div>
312
- <h3 class="text-xl font-semibold mb-2">2. AI Processing</h3>
313
- <p class="text-gray-600">Our Cloudflare Workers AI analyzes your request using advanced natural language processing.</p>
314
- </div>
315
- <div class="text-center p-6 rounded-xl bg-gray-50 hover:shadow-lg transition">
316
- <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
317
- <i class="fas fa-film text-indigo-600 text-xl"></i>
318
- </div>
319
- <h3 class="text-xl font-semibold mb-2">3. Get Recommendations</h3>
320
- <p class="text-gray-600">Receive personalized streaming suggestions with direct links to watch on your favorite platforms.</p>
321
- </div>
322
- </div>
323
- </div>
324
- </section>
325
-
326
- <!-- Video Production Section -->
327
- <section class="py-12 bg-gray-50">
328
- <div class="container mx-auto px-4">
329
- <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Create Your Own Content</h2>
330
-
331
- <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
332
- <div class="p-8">
333
- <div class="flex items-center mb-6">
334
- <div class="w-14 h-14 rounded-full bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center text-white mr-4">
335
- <i class="fas fa-video text-2xl"></i>
336
- </div>
337
- <div>
338
- <h3 class="text-2xl font-bold">Video Production Tools</h3>
339
- <p class="text-gray-600">Record, edit, and share your own streaming content</p>
340
- </div>
341
- </div>
342
-
343
- <div class="grid md:grid-cols-2 gap-8">
344
- <div>
345
- <h4 class="font-semibold text-lg mb-3">Record Live Clips</h4>
346
- <p class="text-gray-600 mb-4">Easily capture 5-second clips of your screen and audio to create highlight reels or content snippets.</p>
347
- <ul class="space-y-2 text-sm text-gray-600">
348
- <li class="flex items-start">
349
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
350
- <span>Automatically segmented into manageable clips</span>
351
- </li>
352
- <li class="flex items-start">
353
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
354
- <span>Screen and audio recording with one click</span>
355
- </li>
356
- <li class="flex items-start">
357
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
358
- <span>Preview clips before adding to your production</span>
359
- </li>
360
- <li class="flex items-start">
361
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
362
- <span>Share with Bluetooth-connected groups</span>
363
- </li>
364
- </ul>
365
- </div>
366
- <div>
367
- <h4 class="font-semibold text-lg mb-3">Edit & Combine</h4>
368
- <p class="text-gray-600 mb-4">Combine your clips with smooth transitions to create professional-looking videos.</p>
369
- <ul class="space-y-2 text-sm text-gray-600">
370
- <li class="flex items-start">
371
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
372
- <span>Multiple transition effects available</span>
373
- </li>
374
- <li class="flex items-start">
375
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
376
- <span>Add titles and descriptions to your videos</span>
377
- </li>
378
- <li class="flex items-start">
379
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
380
- <span>Export in multiple formats for sharing</span>
381
- </li>
382
- <li class="flex items-start">
383
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
384
- <span>Benchmark your content against group submissions</span>
385
- </li>
386
- </ul>
387
- </div>
388
- </div>
389
-
390
- <div class="mt-8 pt-6 border-t border-gray-200">
391
- <h4 class="font-semibold text-lg mb-4">Try It Now</h4>
392
- <p class="text-gray-600 mb-4">Click the video production button in the bottom right corner to start creating your own content.</p>
393
- <div class="flex items-center text-sm text-indigo-600">
394
- <i class="fas fa-info-circle mr-2"></i>
395
- <span>You'll need to grant screen recording permissions when prompted</span>
396
- </div>
397
- </div>
398
- </div>
399
- </div>
400
- </div>
401
- </section>
402
-
403
- <!-- Footer -->
404
- <footer class="bg-gray-800 text-white py-12">
405
- <div class="container mx-auto px-4">
406
- <div class="grid md:grid-cols-4 gap-8">
407
- <div>
408
- <h3 class="text-xl font-bold mb-4 flex items-center">
409
- <i class="fas fa-stream mr-2"></i> StreamAI
410
- </h3>
411
- <p class="text-gray-400">Your personal streaming assistant powered by Cloudflare Workers AI technology.</p>
412
- </div>
413
- <div>
414
- <h4 class="font-semibold mb-4">Quick Links</h4>
415
- <ul class="space-y-2">
416
- <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
417
- <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
418
- <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
419
- <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
420
- </ul>
421
- </div>
422
- <div>
423
- <h4 class="font-semibold mb-4">Streaming Platforms</h4>
424
- <ul class="space-y-2">
425
- <li><a href="#" class="text-gray-400 hover:text-white transition">Netflix</a></li>
426
- <li><a href="#" class="text-gray-400 hover:text-white transition">Amazon Prime</a></li>
427
- <li><a href="#" class="text-gray-400 hover:text-white transition">Disney+</a></li>
428
- <li><a href="#" class="text-gray-400 hover:text-white transition">HBO Max</a></li>
429
- <li><a href="https://smplus.vhx.tv" target="_blank" class="text-gray-400 hover:text-white transition">SMPlus VHX</a></li>
430
- </ul>
431
- </div>
432
- <div>
433
- <h4 class="font-semibold mb-4">Connect With Us</h4>
434
- <div class="flex space-x-4">
435
- <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-indigo-600 flex items-center justify-center transition">
436
- <i class="fab fa-twitter"></i>
437
- </a>
438
- <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-indigo-600 flex items-center justify-center transition">
439
- <i class="fab fa-facebook-f"></i>
440
- </a>
441
- <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-indigo-600 flex items-center justify-center transition">
442
- <i class="fab fa-instagram"></i>
443
- </a>
444
- <a href="#" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-indigo-600 flex items-center justify-center transition">
445
- <i class="fab fa-discord"></i>
446
- </a>
447
- </div>
448
- </div>
449
- </div>
450
- <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
451
- <p>&copy; 2023 StreamAI. All rights reserved.</p>
452
- </div>
453
- </div>
454
- </footer>
455
  </body>
456
  </html>
 
6
  <title>StreamAI - Personalized Streaming Recommendations</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
+ /* ... All your CSS styles remain here ... */
11
+ </style>
 
12
  </head>
13
  <body class="bg-gray-100 font-sans">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
+ <script src="scripts/app.js" type="module"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  </body>
17
  </html>