Hugging Face's logo

Spaces:
samihalawa
/
visualingo
Running

App Files Community
Sami Halawa commited on
Commit
03be85d
·
verified ·
1 Parent(s): 084c900

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +350 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Visualingo
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: pink
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: visualingo
3
+ emoji: 🐳
4
+ colorFrom: green
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,350 @@
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>Visualingo - Learn Languages Visually</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
+ /* Custom styles */
11
+ .blob {
12
+ position: absolute;
13
+ width: 500px;
14
+ height: 500px;
15
+ background: linear-gradient(45deg, #4f46e5 0%, #10b981 100%);
16
+ border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
17
+ filter: blur(80px);
18
+ opacity: 0.15;
19
+ z-index: 0;
20
+ animation: morph 8s ease-in-out infinite;
21
+ }
22
+
23
+ .blob2 {
24
+ width: 300px;
25
+ height: 300px;
26
+ right: -100px;
27
+ bottom: -100px;
28
+ background: linear-gradient(45deg, #f43f5e 0%, #f59e0b 100%);
29
+ animation-delay: 2s;
30
+ }
31
+
32
+ @keyframes morph {
33
+ 0% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
34
+ 50% { border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; }
35
+ 100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
36
+ }
37
+
38
+ .gradient-text {
39
+ background: linear-gradient(90deg, #4f46e5, #10b981);
40
+ -webkit-background-clip: text;
41
+ background-clip: text;
42
+ color: transparent;
43
+ }
44
+
45
+ .language-card {
46
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
47
+ }
48
+
49
+ .language-card:hover {
50
+ transform: translateY(-5px) scale(1.02);
51
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
52
+ }
53
+
54
+ .animate-float {
55
+ animation: float 6s ease-in-out infinite;
56
+ }
57
+
58
+ @keyframes float {
59
+ 0% { transform: translateY(0px); }
60
+ 50% { transform: translateY(-10px); }
61
+ 100% { transform: translateY(0px); }
62
+ }
63
+
64
+ .feature-icon {
65
+ width: 60px;
66
+ height: 60px;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ border-radius: 16px;
71
+ font-size: 24px;
72
+ flex-shrink: 0;
73
+ }
74
+
75
+ @media (max-width: 767px) {
76
+ .hero-content {
77
+ flex-direction: column-reverse;
78
+ text-align: center;
79
+ }
80
+
81
+ .hero-image {
82
+ max-width: 300px;
83
+ margin: 0 auto 2rem;
84
+ }
85
+
86
+ .feature-card {
87
+ text-align: center;
88
+ }
89
+
90
+ .feature-icon {
91
+ margin: 0 auto;
92
+ }
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="font-sans antialiased bg-gray-50">
97
+ <!-- Navigation -->
98
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
99
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
100
+ <div class="flex justify-between h-16">
101
+ <div class="flex items-center">
102
+ <div class="h-8 w-8 rounded-md bg-indigo-600 flex items-center justify-center">
103
+ <i class="fas fa-language text-white"></i>
104
+ </div>
105
+ <span class="ml-2 text-xl font-bold text-gray-900">Visualingo</span>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </nav>
110
+
111
+ <!-- Hero Section -->
112
+ <section class="relative overflow-hidden">
113
+ <div class="blob"></div>
114
+ <div class="blob blob2"></div>
115
+
116
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-20 md:pt-24 md:pb-32">
117
+ <div class="flex flex-col md:flex-row hero-content items-center">
118
+ <div class="md:w-1/2 text-center md:text-left mb-12 md:mb-0">
119
+ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
120
+ <span class="block">Learn languages the</span>
121
+ <span class="block gradient-text">visual way</span>
122
+ </h1>
123
+ <p class="mt-3 max-w-md mx-auto text-lg text-gray-600 sm:text-xl md:mt-5 md:max-w-3xl">
124
+ Associate words with vivid images that create lasting mental connections.
125
+ </p>
126
+ </div>
127
+ <div class="md:w-1/2 hero-image">
128
+ <div class="animate-float">
129
+ <div class="relative">
130
+ <div class="w-full max-w-md mx-auto rounded-lg shadow-xl bg-white p-4">
131
+ <div class="flex items-center justify-between mb-4">
132
+ <div class="flex items-center">
133
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
134
+ <i class="fas fa-user text-indigo-600"></i>
135
+ </div>
136
+ <div class="ml-3">
137
+ <div class="h-3 w-24 bg-indigo-200 rounded"></div>
138
+ <div class="h-2 w-16 bg-gray-200 rounded mt-1"></div>
139
+ </div>
140
+ </div>
141
+ <div class="text-xs text-gray-400">Now learning</div>
142
+ </div>
143
+
144
+ <div class="bg-gray-100 rounded-lg p-4 h-48 flex items-center justify-center">
145
+ <div class="text-center">
146
+ <img src="https://img.icons8.com/color/96/000000/apple.png" class="mx-auto h-16 w-16" alt="apple">
147
+ <div class="mt-2 text-xl font-bold">Apple</div>
148
+ <div class="mt-1 text-lg text-gray-600">Manzana</div>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="flex justify-between mt-4">
153
+ <button class="px-4 py-2 bg-gray-200 rounded-lg text-gray-700">
154
+ <i class="fas fa-times"></i> Don't know
155
+ </button>
156
+ <button class="px-4 py-2 bg-green-100 text-green-700 rounded-lg">
157
+ <i class="fas fa-check"></i> Know it
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </section>
167
+
168
+ <!-- Features Section -->
169
+ <section class="py-12 bg-white">
170
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
171
+ <div class="text-center">
172
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
173
+ How visual learning works
174
+ </h2>
175
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
176
+ Our brain processes images 60,000x faster than text
177
+ </p>
178
+ </div>
179
+
180
+ <div class="mt-16">
181
+ <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
182
+
183
+ <div class="feature-card pt-6">
184
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
185
+ <div class="feature-icon bg-indigo-50 text-indigo-600 mx-auto">
186
+ <i class="fas fa-brain"></i>
187
+ </div>
188
+ <h3 class="mt-8 text-lg font-medium text-gray-900">Dual Coding</h3>
189
+ <p class="mt-5 text-base text-gray-600">
190
+ Words + images create two memory pathways, making recall easier.
191
+ </p>
192
+ <div class="mt-4 p-2 bg-white rounded border">
193
+ <div class="flex">
194
+ <img src="https://img.icons8.com/color/48/000000/dog.png" class="h-10 w-10">
195
+ <div class="ml-2">
196
+ <div class="font-medium">Dog</div>
197
+ <div class="text-sm text-gray-500">Perro (Spanish)</div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="feature-card pt-6">
205
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
206
+ <div class="feature-icon bg-green-50 text-green-600 mx-auto">
207
+ <i class="fas fa-history"></i>
208
+ </div>
209
+ <h3 class="mt-8 text-lg font-medium text-gray-900">Spaced Repetition</h3>
210
+ <p class="mt-5 text-base text-gray-600">
211
+ Optimal timing between reviews strengthens memory retention.
212
+ </p>
213
+ <div class="mt-4 flex justify-around">
214
+ <div class="text-center">
215
+ <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mx-auto">1</div>
216
+ <div class="text-xs mt-1">Today</div>
217
+ </div>
218
+ <div class="text-center">
219
+ <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mx-auto">2</div>
220
+ <div class="text-xs mt-1">3 days</div>
221
+ </div>
222
+ <div class="text-center">
223
+ <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mx-auto">3</div>
224
+ <div class="text-xs mt-1">1 week</div>
225
+ </div>
226
+ <div class="text-center">
227
+ <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mx-auto">4</div>
228
+ <div class="text-xs mt-1">1 month</div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="feature-card pt-6">
235
+ <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full">
236
+ <div class="feature-icon bg-blue-50 text-blue-600 mx-auto">
237
+ <i class="fas fa-film"></i>
238
+ </div>
239
+ <h3 class="mt-8 text-lg font-medium text-gray-900">Contextual Learning</h3>
240
+ <p class="mt-5 text-base text-gray-600">
241
+ Words learned in context are remembered better than isolated vocabulary.
242
+ </p>
243
+ <div class="mt-4 p-2 bg-white rounded border text-sm italic">
244
+ "The <span class="font-bold text-blue-600">dog</span> chased its <span class="font-bold text-blue-600">ball</span> in the park"
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Demonstration -->
254
+ <section class="py-16 bg-gray-50">
255
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
256
+ <div class="text-center">
257
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
258
+ Try it yourself
259
+ </h2>
260
+ <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto">
261
+ A sample of our visual learning system
262
+ </p>
263
+ </div>
264
+
265
+ <div class="mt-12 max-w-lg mx-auto">
266
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
267
+ <div class="p-4 bg-indigo-600 text-white text-center font-bold">
268
+ Visual Vocabulary Trainer
269
+ </div>
270
+
271
+ <div id="flashcard-container" class="p-6">
272
+ <div id="flashcard" class="bg-gray-100 rounded-lg p-8 h-64 flex flex-col items-center justify-center cursor-pointer transition-all duration-300">
273
+ <img id="flashcard-image" src="https://img.icons8.com/color/96/000000/dog.png" class="h-24 w-24">
274
+ <div id="flashcard-text" class="mt-4 text-center">
275
+ <div class="text-2xl font-bold">Dog</div>
276
+ <div class="text-lg text-gray-600 mt-2">Click to reveal translation</div>
277
+ </div>
278
+ </div>
279
+
280
+ <div class="flex justify-between mt-6">
281
+ <button onclick="handleDonKnow()" class="px-4 py-2 bg-gray-200 rounded-lg text-gray-700">
282
+ <i class="fas fa-times"></i> Don't know
283
+ </button>
284
+ <button onclick="handleKnowIt()" class="px-4 py-2 bg-green-100 text-green-700 rounded-lg">
285
+ <i class="fas fa-check"></i> Know it
286
+ </button>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="p-4 bg-gray-50 border-t text-center text-sm text-gray-500">
291
+ Progress: <span id="progress">0</span>/5 words learned
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </section>
297
+
298
+ <script>
299
+ // Flashcard data
300
+ const vocabulary = [
301
+ { word: "Dog", translation: "Perro (Spanish)", image: "https://img.icons8.com/color/96/000000/dog.png" },
302
+ { word: "House", translation: "Maison (French)", image: "https://img.icons8.com/color/96/000000/home.png" },
303
+ { word: "Book", translation: "本 (Japanese)", image: "https://img.icons8.com/color/96/000000/book.png" },
304
+ { word: "Apple", translation: "Manzana (Spanish)", image: "https://img.icons8.com/color/96/000000/apple.png" },
305
+ { word: "Water", translation: "水 (Japanese)", image: "https://img.icons8.com/color/96/000000/water.png" }
306
+ ];
307
+
308
+ let currentCard = 0;
309
+ let score = 0;
310
+ let revealed = false;
311
+
312
+ // Initialize first card
313
+ updateCard();
314
+
315
+ function updateCard() {
316
+ const card = vocabulary[currentCard];
317
+ document.getElementById('flashcard-image').src = card.image;
318
+ document.getElementById('flashcard-text').innerHTML = `
319
+ <div class="text-2xl font-bold">${card.word}</div>
320
+ <div class="text-lg text-gray-600 mt-2">${revealed ? card.translation : 'Click to reveal translation'}</div>
321
+ `;
322
+ }
323
+
324
+ document.getElementById('flashcard').addEventListener('click', function() {
325
+ revealed = !revealed;
326
+ updateCard();
327
+ });
328
+
329
+ function handleDonKnow() {
330
+ nextCard();
331
+ }
332
+
333
+ function handleKnowIt() {
334
+ score++;
335
+ document.getElementById('progress').textContent = score;
336
+ nextCard();
337
+ }
338
+
339
+ function nextCard() {
340
+ revealed = false;
341
+ currentCard = (currentCard + 1) % vocabulary.length;
342
+ updateCard();
343
+
344
+ if (score >= 5) {
345
+ document.getElementById('progress').textContent = '5';
346
+ }
347
+ }
348
+ </script>
349
+ <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=luigi12345/visualingo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
350
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ create a complete beautiful SPA landing massive and complete fully responsive and very polished and complete launched but (without fake thigns like 10000 active users etc) and self contained app for Visualingo.app an languages learning platform. dont add auth nor external or broken links. all msu tbe self contained. Use this logo for logo and icon and all https://i.ibb.co/PGNr65VK/d8a3663e-9fb0-4804-b3c1-86a9608267af.png   The info for footer and contact etc WordList Visual Learning SLU NIF: B86792462 C/ Alberto Aguilera 54 28015, Madrid, España
2
+ all links msut work rmeove all fake social and fake links unless in the pagenope the images must all be real valid oens from cdns , not placehodlers. and responsive msut be perfect and much more polished all.
3
+ make sure taht it does never tell like links tha twudl ened otehr pages for work. all self contianed. no blog not othe rshit not related
4
+ remove all links and thigns that need form other features like get started or blog or help center.. all msut be fully self contianed.