Hugging Face's logo

Spaces:
CHBINHAYDDE
/
digitale
Running

App Files Community
CHBINHAYDDE commited on
Commit
f8e379a
路
verified 路
1 Parent(s): 934af68

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +399 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Digitale
3
- emoji: 馃弮
4
- colorFrom: yellow
5
- colorTo: gray
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: digitale
3
+ emoji: 馃惓
4
+ colorFrom: red
5
+ colorTo: purple
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,399 @@
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="he" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>讚讬讙讬讟诇讗 - 讻诇讬诐 诇讞讬讬诐 注诇 驻讬 讛讛诇讻讛</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 href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
10
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@400;500;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --primary-color: #6C63FF;
14
+ --secondary-color: #00BFA6;
15
+ --text-primary: #2D3748;
16
+ --text-secondary: #4A5568;
17
+ --bg-primary: #FFFFFF;
18
+ --bg-secondary: #F8F9FC;
19
+ --bg-tertiary: #F0F2F8;
20
+ }
21
+
22
+ @media (prefers-color-scheme: dark) {
23
+ :root {
24
+ --primary-color: #6C63FF;
25
+ --secondary-color: #00BFA6;
26
+ --text-primary: #F7FAFC;
27
+ --text-secondary: #E2E8F0;
28
+ --bg-primary: #1A202C;
29
+ --bg-secondary: #2D3748;
30
+ --bg-tertiary: #4A5568;
31
+ }
32
+ }
33
+
34
+ body {
35
+ font-family: 'Rubik', 'Noto Sans Hebrew', sans-serif;
36
+ direction: rtl;
37
+ background-color: var(--bg-primary);
38
+ color: var(--text-primary);
39
+ transition: all 0.3s ease;
40
+ line-height: 1.8;
41
+ }
42
+
43
+ .glass-effect {
44
+ background: rgba(255, 255, 255, 0.1);
45
+ backdrop-filter: blur(10px);
46
+ -webkit-backdrop-filter: blur(10px);
47
+ }
48
+
49
+ .header {
50
+ height: 80px;
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .header.scrolled {
55
+ height: 60px;
56
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
57
+ }
58
+
59
+ .tool-card {
60
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
61
+ }
62
+
63
+ .tool-card:hover {
64
+ transform: scale(1.02);
65
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
66
+ }
67
+
68
+ .earth-animation {
69
+ animation: rotate 30s linear infinite;
70
+ }
71
+
72
+ @keyframes rotate {
73
+ from { transform: rotate(0deg); }
74
+ to { transform: rotate(360deg); }
75
+ }
76
+
77
+ .balloon {
78
+ position: absolute;
79
+ width: 120px;
80
+ height: 145px;
81
+ background-size: contain;
82
+ background-repeat: no-repeat;
83
+ animation: float 8s ease-in-out infinite;
84
+ opacity: 0;
85
+ }
86
+
87
+ @keyframes float {
88
+ 0% { transform: translateY(0) rotate(0deg); opacity: 0; }
89
+ 20% { opacity: 1; }
90
+ 100% { transform: translateY(-300px) rotate(10deg); opacity: 0; }
91
+ }
92
+
93
+ .fade-in {
94
+ animation: fadeIn 0.5s ease-in forwards;
95
+ }
96
+
97
+ @keyframes fadeIn {
98
+ from { opacity: 0; transform: translateY(20px); }
99
+ to { opacity: 1; transform: translateY(0); }
100
+ }
101
+
102
+ .menu-item::after {
103
+ content: '';
104
+ position: absolute;
105
+ width: 0;
106
+ height: 2px;
107
+ bottom: -5px;
108
+ right: 0;
109
+ background-color: var(--primary-color);
110
+ transition: width 0.3s ease;
111
+ }
112
+
113
+ .menu-item:hover::after {
114
+ width: 100%;
115
+ }
116
+
117
+ .wave-shape {
118
+ position: absolute;
119
+ top: 0;
120
+ left: 0;
121
+ width: 100%;
122
+ overflow: hidden;
123
+ line-height: 0;
124
+ }
125
+
126
+ .wave-shape svg {
127
+ position: relative;
128
+ display: block;
129
+ width: calc(100% + 1.3px);
130
+ height: 50px;
131
+ }
132
+
133
+ .wave-shape .shape-fill {
134
+ fill: var(--bg-secondary);
135
+ }
136
+
137
+ .dark .wave-shape .shape-fill {
138
+ fill: var(--bg-tertiary);
139
+ }
140
+
141
+ @media (max-width: 768px) {
142
+ .header {
143
+ height: 70px;
144
+ }
145
+
146
+ .header.scrolled {
147
+ height: 50px;
148
+ }
149
+ }
150
+ </style>
151
+ </head>
152
+ <body class="bg-gray-50 dark:bg-gray-900">
153
+ <!-- Header -->
154
+ <header class="header fixed top-0 w-full z-50 bg-white/90 dark:bg-gray-900/90 backdrop-blur-md">
155
+ <div class="container mx-auto px-4 h-full flex items-center justify-between">
156
+ <!-- Logo -->
157
+ <div class="flex items-center">
158
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold text-xl">
159
+ 讚
160
+ </div>
161
+ <span class="mr-2 text-xl font-bold text-gray-800 dark:text-white">讚讬讙讬讟诇讗</span>
162
+ </div>
163
+
164
+ <!-- Desktop Navigation -->
165
+ <nav class="hidden md:flex items-center space-x-8 space-x-reverse">
166
+ <a href="#" class="menu-item relative text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium">讚祝 讛讘讬转</a>
167
+ <a href="#tools" class="menu-item relative text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium">讻诇讬诐 谞驻讜爪讬诐</a>
168
+ <a href="#about" class="menu-item relative text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium">讗讜讚讜转</a>
169
+ <a href="#contact" class="menu-item relative text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium">讬爪讬专转 拽砖专</a>
170
+ </nav>
171
+
172
+ <!-- Right Side Icons -->
173
+ <div class="flex items-center space-x-4 space-x-reverse">
174
+ <button id="search-btn" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400">
175
+ <i class="fas fa-search"></i>
176
+ </button>
177
+ <button id="theme-toggle" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400">
178
+ <i class="fas fa-moon dark:hidden"></i>
179
+ <i class="fas fa-sun hidden dark:block"></i>
180
+ </button>
181
+ <button class="bg-gradient-to-r from-purple-500 to-blue-500 text-white px-4 py-2 rounded-lg hover:opacity-90 transition">
182
+ <i class="fas fa-user mr-2"></i>讛转讞讘专讜转
183
+ </button>
184
+ <button id="mobile-menu-btn" class="md:hidden text-gray-600 dark:text-gray-300">
185
+ <i class="fas fa-bars text-xl"></i>
186
+ </button>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Mobile Menu -->
191
+ <div id="mobile-menu" class="md:hidden fixed top-0 right-0 w-64 h-full bg-white dark:bg-gray-800 shadow-lg transform translate-x-full transition-transform duration-300 z-50">
192
+ <div class="p-4 flex justify-between items-center border-b dark:border-gray-700">
193
+ <div class="flex items-center">
194
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold text-xl">
195
+ 讚
196
+ </div>
197
+ <span class="mr-2 text-xl font-bold text-gray-800 dark:text-white">讚讬讙讬讟诇讗</span>
198
+ </div>
199
+ <button id="mobile-menu-close" class="text-gray-600 dark:text-gray-300">
200
+ <i class="fas fa-times text-xl"></i>
201
+ </button>
202
+ </div>
203
+ <nav class="p-4 flex flex-col space-y-4">
204
+ <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 border-b dark:border-gray-700">讚祝 讛讘讬转</a>
205
+ <a href="#tools" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 border-b dark:border-gray-700">讻诇讬诐 谞驻讜爪讬诐</a>
206
+ <a href="#about" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2 border-b dark:border-gray-700">讗讜讚讜转</a>
207
+ <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 font-medium py-2">讬爪讬专转 拽砖专</a>
208
+ </nav>
209
+ </div>
210
+
211
+ <!-- Search Bar -->
212
+ <div id="search-bar" class="hidden absolute top-full left-0 w-full bg-white dark:bg-gray-800 shadow-md p-4 z-40">
213
+ <div class="container mx-auto flex items-center">
214
+ <input type="text" placeholder="讞驻砖 讘讗转专..." class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white">
215
+ <button class="mr-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400">
216
+ <i class="fas fa-search"></i>
217
+ </button>
218
+ </div>
219
+ </div>
220
+ </header>
221
+
222
+ <!-- Hero Section -->
223
+ <section class="pt-32 pb-20 relative overflow-hidden">
224
+ <div class="wave-shape">
225
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
226
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
227
+ </svg>
228
+ </div>
229
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
230
+ <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
231
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6">讻诇讬诐 诇讞讬讬诐 注诇 驻讬 讛讛诇讻讛</h1>
232
+ <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">驻诇讟驻讜专诪讛 讚讬讙讬讟诇讬转 讛诪住驻拽转 讻诇讬诐 讛诇讻转讬讬诐 诪转拽讚诪讬诐 诇爪讬讘讜专 砖讜诪专 讛转讜专讛 讜讛诪爪讜讜转</p>
233
+ <div class="flex space-x-4 space-x-reverse">
234
+ <a href="#tools" class="bg-gradient-to-r from-purple-500 to-blue-500 text-white px-6 py-3 rounded-lg hover:opacity-90 transition font-medium">讙诇讛 讗转 讛讻诇讬诐</a>
235
+ <a href="#about" class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white px-6 py-3 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition font-medium">诇诪讬讚注 谞讜住祝</a>
236
+ </div>
237
+ </div>
238
+ <div class="md:w-1/2 flex justify-center fade-in">
239
+ <div class="relative w-64 h-64 md:w-80 md:h-80">
240
+ <img src="https://cdn.pixabay.com/photo/2016/08/24/14/29/earth-1617121_960_720.jpg" alt="Earth" class="w-full h-full object-contain earth-animation rounded-full shadow-xl">
241
+ <div class="absolute inset-0 flex items-center justify-center">
242
+ <div class="w-3/4 h-3/4 rounded-full bg-gradient-to-r from-purple-500/10 to-blue-500/10 blur-xl"></div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Featured Tools -->
250
+ <section id="tools" class="py-16 bg-gray-50 dark:bg-gray-800">
251
+ <div class="container mx-auto px-4">
252
+ <div class="text-center mb-16 fade-in">
253
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">讻诇讬诐 谞驻讜爪讬诐</h2>
254
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">诪讙讜讜谉 讻诇讬诐 讚讬讙讬讟诇讬讬诐 砖讬住讬讬注讜 诇讱 讘讞讬讬 讛讬讜诐 讬讜诐 注诇 驻讬 讛讛诇讻讛</p>
255
+ </div>
256
+
257
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
258
+ <!-- Tool 1 -->
259
+ <div class="tool-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden fade-in" style="animation-delay: 0.1s;">
260
+ <div class="h-48 bg-gradient-to-r from-purple-100 to-blue-100 dark:from-purple-900/30 dark:to-blue-900/30 flex items-center justify-center">
261
+ <i class="fas fa-shabbat text-6xl text-purple-500"></i>
262
+ </div>
263
+ <div class="p-6">
264
+ <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-3">专砖讬诪转 讛讻谞讜转 诇砖讘转</h3>
265
+ <p class="text-gray-600 dark:text-gray-300 mb-4">驻诇讟驻讜专诪讛 谞讜讞讛 诇专讬砖讜诐 讛讛讻谞讜转 讛讚专讜砖讜转 诇驻谞讬 砖讘转 注诐 讗驻砖专讜转 诇住诪谉 诪讛 讛讜砖诇诐 讜诪讛 诇讗 讛讜砖诇诐.</p>
266
+ <a href="#" class="text-purple-500 dark:text-purple-400 font-medium hover:underline flex items-center">
267
+ 诇讻谞讬住讛 诇讻诇讬
268
+ <i class="fas fa-arrow-left mr-2"></i>
269
+ </a>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Tool 2 -->
274
+ <div class="tool-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden fade-in" style="animation-delay: 0.2s;">
275
+ <div class="h-48 bg-gradient-to-r from-green-100 to-teal-100 dark:from-green-900/30 dark:to-teal-900/30 flex items-center justify-center">
276
+ <i class="fas fa-pray text-6xl text-green-500"></i>
277
+ </div>
278
+ <div class="p-6">
279
+ <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-3">讘讜讞谉 转驻讬诇讛</h3>
280
+ <p class="text-gray-600 dark:text-gray-300 mb-4">驻诇讟驻讜专诪讛 讛讘讜讚拽转 讘讗诪爪注讜转 AI 讗诐 讛讟拽住讟 讞祝 诪砖讙讬讗讜转, 讜诪转拽谞转 讛讬讻谉 砖讛诪砖转诪砖 讚讬诇讙 讗讜 讛讜住讬祝 拽讟注 诪讬讜转专 讘转驻讬诇讛.</p>
281
+ <a href="#" class="text-green-500 dark:text-green-400 font-medium hover:underline flex items-center">
282
+ 诇讻谞讬住讛 诇讻诇讬
283
+ <i class="fas fa-arrow-left mr-2"></i>
284
+ </a>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Tool 3 -->
289
+ <div class="tool-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden fade-in" style="animation-delay: 0.3s;">
290
+ <div class="h-48 bg-gradient-to-r from-yellow-100 to-orange-100 dark:from-yellow-900/30 dark:to-orange-900/30 flex items-center justify-center">
291
+ <i class="fas fa-ruler-combined text-6xl text-yellow-500"></i>
292
+ </div>
293
+ <div class="p-6">
294
+ <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-3">讞讬砖讜讘 诪讬讚讜转 讜砖讬注讜专讬 转讜专讛</h3>
295
+ <p class="text-gray-600 dark:text-gray-300 mb-4">诪讞砖讘讜谉 诪讬讚讜转 讛诇讻转讬讜转 讻诪讜 讻讝讬转, 讟驻讞, 讻讘讬爪讛, 诪讬诇, 驻专住讛, 讗诪讛, 注诐 讞讬砖讜讘 诪讬讚讜转 谞驻讞 讜诪砖拽诇.</p>
296
+ <a href="#" class="text-yellow-500 dark:text-yellow-400 font-medium hover:underline flex items-center">
297
+ 诇讻谞讬住讛 诇讻诇讬
298
+ <i class="fas fa-arrow-left mr-2"></i>
299
+ </a>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Tool 4 -->
304
+ <div class="tool-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden fade-in" style="animation-delay: 0.4s;">
305
+ <div class="h-48 bg-gradient-to-r from-red-100 to-pink-100 dark:from-red-900/30 dark:to-pink-900/30 flex items-center justify-center">
306
+ <i class="fas fa-calculator text-6xl text-red-500"></i>
307
+ </div>
308
+ <div class="p-6">
309
+ <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-3">诪讞砖讘讜谉 诪注砖专讜转</h3>
310
+ <p class="text-gray-600 dark:text-gray-300 mb-4">诪注专讻转 讛诪讗驻砖专转 讛讝谞转 诪拽讜专讜转 讛讻谞住讛 讜诪讞砖讘转 讻诪讛 诇转转 诇诪注砖专讜转, 注诐 拽讬砖讜专讬诐 诇诪拽讜诪讜转 爪讚拽讛.</p>
311
+ <a href="#" class="text-red-500 dark:text-red-400 font-medium hover:underline flex items-center">
312
+ 诇讻谞讬住讛 诇讻诇讬
313
+ <i class="fas fa-arrow-left mr-2"></i>
314
+ </a>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Tool 5 -->
319
+ <div class="tool-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden fade-in" style="animation-delay: 0.5s;">
320
+ <div class="h-48 bg-gradient-to-r from-indigo-100 to-blue-100 dark:from-indigo-900/30 dark:to-blue-900/30 flex items-center justify-center">
321
+ <i class="fas fa-hands-helping text-6xl text-indigo-500"></i>
322
+ </div>
323
+ <div class="p-6">
324
+ <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-3">诪诪诇讬抓 讙诪讞讬"诐</h3>
325
+ <p class="text-gray-600 dark:text-gray-300 mb-4">诪注专讻转 讛诪诪诇讬爪讛 诪讛 讻讚讗讬 诇驻转讜讞 讻讙诪"讞 (砖讬专讜转 讞讬谞诪讬 诇讟讜讘转 讛讻诇诇) 诇驻讬 诪讬拽讜诐 讜讛注讚驻讜转.</p>
326
+ <a href="#" class="text-indigo-500 dark:text-indigo-400 font-medium hover:underline flex items-center">
327
+ 诇讻谞讬住讛 诇讻诇讬
328
+ <i class="fas fa-arrow-left mr-2"></i>
329
+ </a>
330
+ </div>
331
+ </div>
332
+
333
+ <!-- Tool 6 -->
334
+ <div class="tool-card bg-white dark:bg-gray-700 rounded-xl shadow-md overflow-hidden fade-in" style="animation-delay: 0.6s;">
335
+ <div class="h-48 bg-gradient-to-r from-teal-100 to-cyan-100 dark:from-teal-900/30 dark:to-cyan-900/30 flex items-center justify-center">
336
+ <i class="fas fa-user-friends text-6xl text-teal-500"></i>
337
+ </div>
338
+ <div class="p-6">
339
+ <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-3">诪讞砖讘讜谉 讬讬讞讜讚</h3>
340
+ <p class="text-gray-600 dark:text-gray-300 mb-4">驻诇讟驻讜专诪讛 诇讝讬讛讜讬 讜讛爪讙转 讚讬谞讬 讬讬讞讜讚. 讛诪砖转诪砖 讘讜讞专 讗转 讛住讬讟讜讗爪讬讛 讜讛诪注专讻转 诪砖讬讘讛 讻讬爪讚 诇谞讛讜讙.</p>
341
+ <a href="#" class="text-teal-500 dark:text-teal-400 font-medium hover:underline flex items-center">
342
+ 诇讻谞讬住讛 诇讻诇讬
343
+ <i class="fas fa-arrow-left mr-2"></i>
344
+ </a>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Shabbat Preparation Demo -->
352
+ <section class="py-16 bg-white dark:bg-gray-900">
353
+ <div class="container mx-auto px-4">
354
+ <div class="text-center mb-12 fade-in">
355
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">讛讻谞讜转 诇砖讘转 - 讛讚讙诪讛</h2>
356
+ <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">谞住讜 注讻砖讬讜 讗转 讻诇讬 讛讛讻谞讜转 诇砖讘转 砖诇谞讜</p>
357
+ </div>
358
+
359
+ <div class="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden fade-in">
360
+ <div class="p-6 border-b dark:border-gray-700">
361
+ <h3 class="text-xl font-bold text-gray-800 dark:text-white flex items-center">
362
+ <i class="fas fa-shabbat text-purple-500 mr-2"></i>
363
+ 专砖讬诪转 讛讻谞讜转 诇砖讘转
364
+ </h3>
365
+ </div>
366
+
367
+ <div class="p-6">
368
+ <div class="mb-6">
369
+ <div class="flex items-center justify-between mb-4">
370
+ <h4 class="font-medium text-gray-700 dark:text-gray-300">讛讜住祝 诪砖讬诪讛 讞讚砖讛</h4>
371
+ <button id="add-task" class="bg-purple-500 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-600 transition">
372
+ <i class="fas fa-plus mr-1"></i> 讛讜住祝
373
+ </button>
374
+ </div>
375
+ <div class="flex">
376
+ <input type="text" id="new-task" placeholder="诪讛 爪专讬讱 诇讛讻讬谉 诇砖讘转?" class="flex-grow px-4 py-2 rounded-r-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:text-white">
377
+ <select class="px-3 py-2 rounded-l-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 dark:text-white">
378
+ <option>拽讟讙讜专讬讛</option>
379
+ <option>讗讜讻诇</option>
380
+ <option>讘讬转</option>
381
+ <option>讛讻谞讜转 讗讬砖讬讜转</option>
382
+ <option>讛讻谞讜转 专讜讞谞讬讜转</option>
383
+ </select>
384
+ </div>
385
+ </div>
386
+
387
+ <div class="space-y-3" id="tasks-list">
388
+ <div class="flex items-center p-3 bg-white dark:bg-gray-700 rounded-lg shadow">
389
+ <input type="checkbox" class="h-5 w-5 text-purple-500 rounded focus:ring-purple-500">
390
+ <span class="mr-3 text-gray-800 dark:text-gray-200">诇讛讻讬谉 讞诇讜转</span>
391
+ <span class="ml-auto px-2 py-1 bg-purple-100 dark:bg-purple-900/50 text-purple-800 dark:text-purple-200 text-xs rounded-full">讗讜讻诇</span>
392
+ <button class="ml-2 text-gray-400 hover:text-red-500">
393
+ <i class="fas fa-trash"></i>
394
+ </button>
395
+ </div>
396
+ <div class="flex items-center p-3 bg-white dark:bg-gray-700 rounded-lg shadow">
397
+ <input type="checkbox" class="h-5 w-5 text-purple-500 rounded focus:ring-purple-500">
398
+ <span
399
+ </html>