Hugging Face's logo

Spaces:
Maoudali2033
/
yooutube
Running

App Files Community
Maoudali2033 commited on
Commit
ef433bc
·
verified ·
1 Parent(s): 90498e2

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +490 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Yooutube
3
- emoji: 🌖
4
- colorFrom: pink
5
- colorTo: green
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: yooutube
3
+ emoji: 🐳
4
+ colorFrom: green
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,490 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YouTube Video Tracker</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: '#FF0000',
15
+ secondary: '#282828',
16
+ accent: '#FFD700'
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
24
+
25
+ body {
26
+ font-family: 'Cairo', sans-serif;
27
+ background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
28
+ min-height: 100vh;
29
+ }
30
+
31
+ .channel-card {
32
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
33
+ }
34
+
35
+ .channel-card:hover {
36
+ transform: translateY(-5px);
37
+ box-shadow: 0 10px 25px rgba(255, 0, 0, 0.2);
38
+ }
39
+
40
+ .video-item {
41
+ transition: all 0.3s ease;
42
+ border-left: 3px solid transparent;
43
+ }
44
+
45
+ .video-item:hover {
46
+ background-color: rgba(255, 215, 0, 0.05);
47
+ border-left-color: #FFD700;
48
+ }
49
+
50
+ .summary-modal {
51
+ animation: modalFadeIn 0.4s ease-out;
52
+ }
53
+
54
+ @keyframes modalFadeIn {
55
+ from { opacity: 0; transform: translateY(20px); }
56
+ to { opacity: 1; transform: translateY(0); }
57
+ }
58
+
59
+ .pulse {
60
+ animation: pulse 2s infinite;
61
+ }
62
+
63
+ @keyframes pulse {
64
+ 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); }
65
+ 70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
66
+ 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="text-white">
71
+ <!-- Header Section -->
72
+ <header class="bg-secondary py-6 shadow-lg">
73
+ <div class="container mx-auto px-4">
74
+ <div class="flex flex-col md:flex-row justify-between items-center">
75
+ <div class="flex items-center mb-4 md:mb-0">
76
+ <i class="fab fa-youtube text-primary text-4xl mr-3"></i>
77
+ <h1 class="text-3xl font-bold">YouTube Video Tracker</h1>
78
+ </div>
79
+ <div class="flex items-center">
80
+ <div class="relative">
81
+ <input type="text" placeholder="ابحث عن قناة..." class="bg-gray-800 rounded-full py-2 px-6 pl-10 focus:outline-none focus:ring-2 focus:ring-primary w-64">
82
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
83
+ </div>
84
+ <button class="ml-4 bg-primary hover:bg-red-700 py-2 px-6 rounded-full font-semibold transition duration-300">
85
+ <i class="fas fa-user-plus mr-2"></i>حساب
86
+ </button>
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </header>
91
+
92
+ <!-- Main Content -->
93
+ <main class="container mx-auto px-4 py-8">
94
+ <!-- Channels Section -->
95
+ <section class="mb-12">
96
+ <div class="flex justify-between items-center mb-6">
97
+ <h2 class="text-2xl font-bold flex items-center">
98
+ <i class="fas fa-satellite-dish text-primary mr-3"></i>
99
+ القنوات التي تتابعها
100
+ </h2>
101
+ <button id="addChannelBtn" class="bg-primary hover:bg-red-700 py-2 px-6 rounded-full font-semibold transition duration-300 pulse">
102
+ <i class="fas fa-plus mr-2"></i>إضافة قناة
103
+ </button>
104
+ </div>
105
+
106
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
107
+ <!-- Channel Card 1 -->
108
+ <div class="channel-card bg-secondary rounded-xl overflow-hidden shadow-lg">
109
+ <div class="relative">
110
+ <img src="https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Tech Channel" class="w-full h-48 object-cover">
111
+ <div class="absolute top-4 right-4 bg-primary rounded-full py-1 px-3 text-sm font-bold">قناة جديدة</div>
112
+ </div>
113
+ <div class="p-5">
114
+ <div class="flex items-center mb-3">
115
+ <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-12 h-12 rounded-full border-2 border-primary mr-3">
116
+ <div>
117
+ <h3 class="font-bold text-lg">تكنولوجيا المستقبل</h3>
118
+ <p class="text-gray-400 text-sm">1.2M مشترك</p>
119
+ </div>
120
+ </div>
121
+ <p class="text-gray-300 mb-4">أحدث أخبار التكنولوجيا والابتكارات التقنية من حول العالم</p>
122
+ <div class="flex justify-between items-center">
123
+ <span class="text-accent font-bold"><i class="fas fa-video mr-1"></i> 3 فيديوهات جديدة</span>
124
+ <button class="bg-gray-700 hover:bg-gray-600 py-1 px-4 rounded-full text-sm transition duration-300">
125
+ <i class="fas fa-eye mr-1"></i>عرض الفيديوهات
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Channel Card 2 -->
132
+ <div class="channel-card bg-secondary rounded-xl overflow-hidden shadow-lg">
133
+ <div class="relative">
134
+ <img src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Cooking Channel" class="w-full h-48 object-cover">
135
+ </div>
136
+ <div class="p-5">
137
+ <div class="flex items-center mb-3">
138
+ <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-12 h-12 rounded-full border-2 border-primary mr-3">
139
+ <div>
140
+ <h3 class="font-bold text-lg">مطبخ أم يوسف</h3>
141
+ <p class="text-gray-400 text-sm">850K مشترك</p>
142
+ </div>
143
+ </div>
144
+ <p class="text-gray-300 mb-4">وصفات طبخ سهلة وسريعة ولذيذة من المطبخ العربي</p>
145
+ <div class="flex justify-between items-center">
146
+ <span class="text-accent font-bold"><i class="fas fa-video mr-1"></i> 2 فيديوهات جديدة</span>
147
+ <button class="bg-gray-700 hover:bg-gray-600 py-1 px-4 rounded-full text-sm transition duration-300">
148
+ <i class="fas fa-eye mr-1"></i>عرض الفيديوهات
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Channel Card 3 -->
155
+ <div class="channel-card bg-secondary rounded-xl overflow-hidden shadow-lg">
156
+ <div class="relative">
157
+ <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Fitness Channel" class="w-full h-48 object-cover">
158
+ </div>
159
+ <div class="p-5">
160
+ <div class="flex items-center mb-3">
161
+ <img src="https://images.unsplash.com/photo-1571019614242-cfeaca0c7c3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-12 h-12 rounded-full border-2 border-primary mr-3">
162
+ <div>
163
+ <h3 class="font-bold text-lg">لياقة بدنية</h3>
164
+ <p class="text-gray-400 text-sm">1.5M مشترك</p>
165
+ </div>
166
+ </div>
167
+ <p class="text-gray-300 mb-4">تمارين رياضية ونصائح صحية لتحقيق أفضل لياقة بدنية</p>
168
+ <div class="flex justify-between items-center">
169
+ <span class="text-accent font-bold"><i class="fas fa-video mr-1"></i> 1 فيديو جديد</span>
170
+ <button class="bg-gray-700 hover:bg-gray-600 py-1 px-4 rounded-full text-sm transition duration-300">
171
+ <i class="fas fa-eye mr-1"></i>عرض الفيديوهات
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Videos Section -->
180
+ <section>
181
+ <div class="flex justify-between items-center mb-6">
182
+ <h2 class="text-2xl font-bold flex items-center">
183
+ <i class="fas fa-video text-primary mr-3"></i>
184
+ الفيديوهات الجديدة
185
+ </h2>
186
+ <div class="flex items-center">
187
+ <span class="mr-3">ترتيب حسب:</span>
188
+ <select class="bg-gray-800 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-primary">
189
+ <option>الأحدث</option>
190
+ <option>الأكثر مشاهدة</option>
191
+ <option>الأعلى تقييماً</option>
192
+ </select>
193
+ </div>
194
+ </div>
195
+
196
+ <div class="bg-secondary rounded-xl shadow-lg overflow-hidden">
197
+ <!-- Video List Header -->
198
+ <div class="grid grid-cols-12 gap-4 px-6 py-4 bg-gray-800 font-bold">
199
+ <div class="col-span-1">#</div>
200
+ <div class="col-span-5">الفيديو</div>
201
+ <div class="col-span-3">القناة</div>
202
+ <div class="col-span-2">تاريخ النشر</div>
203
+ <div class="col-span-1">الرابط</div>
204
+ </div>
205
+
206
+ <!-- Video Item 1 -->
207
+ <div class="video-item grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-700">
208
+ <div class="col-span-1 flex items-center">1</div>
209
+ <div class="col-span-5 flex items-center">
210
+ <div class="relative mr-4">
211
+ <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video thumbnail" class="w-24 h-14 rounded-lg object-cover">
212
+ <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 px-1 text-xs rounded">10:25</div>
213
+ </div>
214
+ <div>
215
+ <h3 class="font-bold">أحدث تكنولوجيا الذكاء الاصطناعي في 2023</h3>
216
+ <p class="text-gray-400 text-sm">25K مشاهدة • 2 ساعة</p>
217
+ </div>
218
+ </div>
219
+ <div class="col-span-3 flex items-center">
220
+ <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-8 h-8 rounded-full mr-2">
221
+ <span>تكنولوجيا المستقبل</span>
222
+ </div>
223
+ <div class="col-span-2 flex items-center">
224
+ <i class="fas fa-clock text-gray-400 mr-2"></i>
225
+ <span>منذ 3 ساعات</span>
226
+ </div>
227
+ <div class="col-span-1 flex items-center justify-center">
228
+ <button class="summary-btn bg-primary hover:bg-red-700 p-2 rounded-full transition duration-300" data-video="أحدث تكنولوجيا الذكاء الاصطناعي في 2023">
229
+ <i class="fas fa-link"></i>
230
+ </button>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Video Item 2 -->
235
+ <div class="video-item grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-700">
236
+ <div class="col-span-1 flex items-center">2</div>
237
+ <div class="col-span-5 flex items-center">
238
+ <div class="relative mr-4">
239
+ <img src="https://i.ytimg.com/vi/5y_KJAg8bHI/hqdefault.jpg" alt="Video thumbnail" class="w-24 h-14 rounded-lg object-cover">
240
+ <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 px-1 text-xs rounded">15:42</div>
241
+ </div>
242
+ <div>
243
+ <h3 class="font-bold">طريقة عمل الكنافة بالقشطة خطوة بخطوة</h3>
244
+ <p class="text-gray-400 text-sm">18K مشاهدة • 5 ساعات</p>
245
+ </div>
246
+ </div>
247
+ <div class="col-span-3 flex items-center">
248
+ <img src="https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-8 h-8 rounded-full mr-2">
249
+ <span>مطبخ أم يوسف</span>
250
+ </div>
251
+ <div class="col-span-2 flex items-center">
252
+ <i class="fas fa-clock text-gray-400 mr-2"></i>
253
+ <span>منذ 6 ساعات</span>
254
+ </div>
255
+ <div class="col-span-1 flex items-center justify-center">
256
+ <button class="summary-btn bg-primary hover:bg-red-700 p-2 rounded-full transition duration-300" data-video="طريقة عمل الكنافة بالقشطة خطوة بخطوة">
257
+ <i class="fas fa-link"></i>
258
+ </button>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Video Item 3 -->
263
+ <div class="video-item grid grid-cols-12 gap-4 px-6 py-4">
264
+ <div class="col-span-1 flex items-center">3</div>
265
+ <div class="col-span-5 flex items-center">
266
+ <div class="relative mr-4">
267
+ <img src="https://i.ytimg.com/vi/UBMk30rjy0o/hqdefault.jpg" alt="Video thumbnail" class="w-24 h-14 rounded-lg object-cover">
268
+ <div class="absolute bottom-1 right-1 bg-black bg-opacity-70 px-1 text-xs rounded">8:17</div>
269
+ </div>
270
+ <div>
271
+ <h3 class="font-bold">تمارين البطن في 10 دقائق فقط</h3>
272
+ <p class="text-gray-400 text-sm">32K مشاهدة • 1 يوم</p>
273
+ </div>
274
+ </div>
275
+ <div class="col-span-3 flex items-center">
276
+ <img src="https://images.unsplash.com/photo-1571019614242-cfeaca0c7c3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Channel Logo" class="w-8 h-8 rounded-full mr-2">
277
+ <span>لياقة بدنية</span>
278
+ </div>
279
+ <div class="col-span-2 flex items-center">
280
+ <i class="fas fa-clock text-gray-400 mr-2"></i>
281
+ <span>منذ 1 يوم</span>
282
+ </div>
283
+ <div class="col-span-1 flex items-center justify-center">
284
+ <button class="summary-btn bg-primary hover:bg-red-700 p-2 rounded-full transition duration-300" data-video="تمارين البطن في 10 دقائق فقط">
285
+ <i class="fas fa-link"></i>
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </section>
291
+ </main>
292
+
293
+ <!-- Add Channel Modal -->
294
+ <div id="addChannelModal" class="fixed inset-0 bg-black bg-opacity-70 hidden items-center justify-center z-50 p-4">
295
+ <div class="bg-secondary rounded-xl w-full max-w-2xl">
296
+ <div class="flex justify-between items-center p-6 border-b border-gray-700">
297
+ <h3 class="text-xl font-bold"><i class="fas fa-plus-circle text-primary mr-2"></i>إضافة قناة جديدة</h3>
298
+ <button id="closeModalBtn" class="text-gray-400 hover:text-white">
299
+ <i class="fas fa-times text-xl"></i>
300
+ </button>
301
+ </div>
302
+ <div class="p-6">
303
+ <div class="mb-6">
304
+ <label class="block mb-2 font-bold">رابط القناة</label>
305
+ <input type="text" placeholder="https://www.youtube.com/channel/..." class="w-full bg-gray-800 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary">
306
+ </div>
307
+ <div class="mb-6">
308
+ <label class="block mb-2 font-bold">اسم القناة</label>
309
+ <input type="text" placeholder="أدخل اسم القناة..." class="w-full bg-gray-800 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary">
310
+ </div>
311
+ <div class="mb-6">
312
+ <label class="block mb-2 font-bold">فئة القناة</label>
313
+ <select class="w-full bg-gray-800 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-primary">
314
+ <option>تكنولوجيا</option>
315
+ <option>طبخ</option>
316
+ <option>لياقة وصحة</option>
317
+ <option>تعليمي</option>
318
+ <option>ترفيه</option>
319
+ <option>أخرى</option>
320
+ </select>
321
+ </div>
322
+ <div class="flex justify-end">
323
+ <button class="bg-gray-700 hover:bg-gray-600 py-2 px-6 rounded-full mr-3 transition duration-300">إلغاء</button>
324
+ <button class="bg-primary hover:bg-red-700 py-2 px-6 rounded-full font-semibold transition duration-300">إضافة القناة</button>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+
330
+ <!-- Summary Modal -->
331
+ <div id="summaryModal" class="fixed inset-0 bg-black bg-opacity-70 hidden items-center justify-center z-50 p-4">
332
+ <div class="bg-secondary rounded-xl w-full max-w-3xl">
333
+ <div class="flex justify-between items-center p-6 border-b border-gray-700">
334
+ <h3 class="text-xl font-bold"><i class="fas fa-file-alt text-accent mr-2"></i>رابط تلخيص الفيديو</h3>
335
+ <button id="closeSummaryModalBtn" class="text-gray-400 hover:text-white">
336
+ <i class="fas fa-times text-xl"></i>
337
+ </button>
338
+ </div>
339
+ <div class="p-6">
340
+ <div class="mb-6">
341
+ <h4 id="videoTitle" class="text-lg font-bold mb-2 text-accent">أحدث تكنولوجيا الذكاء الاصطناعي في 2023</h4>
342
+ <p class="text-gray-300 mb-4">تم إنشاء رابط التلخيص بنجاح. يمكنك نسخ الرابط أدناه ومشاركته أو استخدامه لتلخيص الفيديو.</p>
343
+ </div>
344
+ <div class="mb-6">
345
+ <label class="block mb-2 font-bold">رابط التلخيص</label>
346
+ <div class="flex">
347
+ <input id="summaryLink" type="text" value="https://ytsummary.com/video/dQw4w9WgXcQ" class="w-full bg-gray-800 rounded-l-lg py-3 px-4 focus:outline-none" readonly>
348
+ <button id="copyLinkBtn" class="bg-primary hover:bg-red-700 py-3 px-6 rounded-r-lg font-semibold transition duration-300">
349
+ <i class="fas fa-copy mr-2"></i>نسخ
350
+ </button>
351
+ </div>
352
+ </div>
353
+ <div class="bg-gray-800 rounded-lg p-4 mb-6">
354
+ <h4 class="font-bold mb-3"><i class="fas fa-lightbulb text-accent mr-2"></i>كيفية استخدام الرابط</h4>
355
+ <ul class="list-disc list-inside text-gray-300 pl-4">
356
+ <li class="mb-2">انسخ الرابط وشاركه مع الآخرين للحصول على ملخص الفيديو</li>
357
+ <li class="mb-2">أرسل الرابط إلى مساعد الذكاء الاصطناعي لتحليل محتوى الفيديو</li>
358
+ <li>استخدم الرابط في تطبيقات التلخيص التلقائي</li>
359
+ </ul>
360
+ </div>
361
+ <div class="flex justify-end">
362
+ <button id="closeSummaryBtn" class="bg-primary hover:bg-red-700 py-2 px-6 rounded-full font-semibold transition duration-300">تم</button>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Footer -->
369
+ <footer class="bg-secondary py-8 mt-12">
370
+ <div class="container mx-auto px-4">
371
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
372
+ <div>
373
+ <h3 class="text-lg font-bold mb-4">YouTube Video Tracker</h3>
374
+ <p class="text-gray-400">أداة متابعة القنوات واستخراج روابط الفيديوهات الجديدة بسهولة</p>
375
+ </div>
376
+ <div>
377
+ <h4 class="text-lg font-bold mb-4">روابط سريعة</h4>
378
+ <ul>
379
+ <li class="mb-2"><a href="#" class="text-gray-400 hover:text-white transition duration-300">القنوات</a></li>
380
+ <li class="mb-2"><a href="#" class="text-gray-400 hover:text-white transition duration-300">الفيديوهات</a></li>
381
+ <li class="mb-2"><a href="#" class="text-gray-400 hover:text-white transition duration-300">الإعدادات</a></li>
382
+ <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">المساعدة</a></li>
383
+ </ul>
384
+ </div>
385
+ <div>
386
+ <h4 class="text-lg font-bold mb-4">التواصل</h4>
387
+ <ul>
388
+ <li class="mb-2 flex items-center">
389
+ <i class="fas fa-envelope text-primary mr-2"></i>
390
+ <span class="text-gray-400">support@yt-tracker.com</span>
391
+ </li>
392
+ <li class="mb-2 flex items-center">
393
+ <i class="fab fa-twitter text-primary mr-2"></i>
394
+ <span class="text-gray-400">@yt_tracker</span>
395
+ </li>
396
+ <li class="flex items-center">
397
+ <i class="fab fa-facebook text-primary mr-2"></i>
398
+ <span class="text-gray-400">fb.com/yt_tracker</span>
399
+ </li>
400
+ </ul>
401
+ </div>
402
+ <div>
403
+ <h4 class="text-lg font-bold mb-4">النشرة البريدية</h4>
404
+ <p class="text-gray-400 mb-3">اشترك ليصلك كل جديد عن التحديثات والميزات</p>
405
+ <div class="flex">
406
+ <input type="email" placeholder="بريدك الإلكتروني" class="bg-gray-800 rounded-l-lg py-2 px-4 focus:outline-none w-full">
407
+ <button class="bg-primary hover:bg-red-700 py-2 px-4 rounded-r-lg">
408
+ <i class="fas fa-paper-plane"></i>
409
+ </button>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-500">
414
+ <p>© 2023 YouTube Video Tracker. جميع الحقوق محفوظة.</p>
415
+ </div>
416
+ </div>
417
+ </footer>
418
+
419
+ <script>
420
+ // Add Channel Modal
421
+ const addChannelBtn = document.getElementById('addChannelBtn');
422
+ const addChannelModal = document.getElementById('addChannelModal');
423
+ const closeModalBtn = document.getElementById('closeModalBtn');
424
+
425
+ addChannelBtn.addEventListener('click', () => {
426
+ addChannelModal.classList.remove('hidden');
427
+ addChannelModal.classList.add('flex');
428
+ });
429
+
430
+ closeModalBtn.addEventListener('click', () => {
431
+ addChannelModal.classList.add('hidden');
432
+ addChannelModal.classList.remove('flex');
433
+ });
434
+
435
+ // Summary Modal
436
+ const summaryBtns = document.querySelectorAll('.summary-btn');
437
+ const summaryModal = document.getElementById('summaryModal');
438
+ const closeSummaryModalBtn = document.getElementById('closeSummaryModalBtn');
439
+ const closeSummaryBtn = document.getElementById('closeSummaryBtn');
440
+ const videoTitle = document.getElementById('videoTitle');
441
+ const summaryLink = document.getElementById('summaryLink');
442
+ const copyLinkBtn = document.getElementById('copyLinkBtn');
443
+
444
+ summaryBtns.forEach(btn => {
445
+ btn.addEventListener('click', () => {
446
+ const video = btn.getAttribute('data-video');
447
+ videoTitle.textContent = video;
448
+ summaryModal.classList.remove('hidden');
449
+ summaryModal.classList.add('flex');
450
+ });
451
+ });
452
+
453
+ closeSummaryModalBtn.addEventListener('click', () => {
454
+ summaryModal.classList.add('hidden');
455
+ summaryModal.classList.remove('flex');
456
+ });
457
+
458
+ closeSummaryBtn.addEventListener('click', () => {
459
+ summaryModal.classList.add('hidden');
460
+ summaryModal.classList.remove('flex');
461
+ });
462
+
463
+ // Copy Link Functionality
464
+ copyLinkBtn.addEventListener('click', () => {
465
+ summaryLink.select();
466
+ document.execCommand('copy');
467
+
468
+ // Show copied message
469
+ const originalText = copyLinkBtn.innerHTML;
470
+ copyLinkBtn.innerHTML = '<i class="fas fa-check mr-2"></i>تم النسخ!';
471
+
472
+ setTimeout(() => {
473
+ copyLinkBtn.innerHTML = originalText;
474
+ }, 2000);
475
+ });
476
+
477
+ // Close modals when clicking outside
478
+ window.addEventListener('click', (e) => {
479
+ if (e.target === addChannelModal) {
480
+ addChannelModal.classList.add('hidden');
481
+ addChannelModal.classList.remove('flex');
482
+ }
483
+ if (e.target === summaryModal) {
484
+ summaryModal.classList.add('hidden');
485
+ summaryModal.classList.remove('flex');
486
+ }
487
+ });
488
+ </script>
489
+ <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=Maoudali2033/yooutube" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
490
+ </html>