Hugging Face's logo

Spaces:
theaimoron
/
pecs-app-for-students
Running

App Files Community
theaimoron commited on
Commit
b156ae2
·
verified ·
1 Parent(s): b207e59

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +407 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pecs App For Students
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: pecs-app-for-students
3
+ emoji: 🐳
4
+ colorFrom: pink
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,407 @@
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>ConnectPics - Visual communication, simplified</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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+
16
+ .logo-container {
17
+ display: flex;
18
+ align-items: center;
19
+ }
20
+
21
+ .logo-icon {
22
+ width: 40px;
23
+ height: 40px;
24
+ background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
25
+ border-radius: 10px;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ margin-right: 10px;
30
+ color: white;
31
+ font-size: 20px;
32
+ font-weight: bold;
33
+ }
34
+
35
+ .logo-text {
36
+ font-family: 'Poppins', sans-serif;
37
+ font-weight: 700;
38
+ background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
39
+ -webkit-background-clip: text;
40
+ background-clip: text;
41
+ color: transparent;
42
+ display: inline-block;
43
+ font-size: 24px;
44
+ }
45
+
46
+ .tagline {
47
+ font-size: 14px;
48
+ color: #6b7280;
49
+ font-style: italic;
50
+ margin-left: 10px;
51
+ }
52
+
53
+ .card {
54
+ transition: all 0.3s ease;
55
+ }
56
+
57
+ .card:hover {
58
+ transform: translateY(-2px);
59
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
60
+ }
61
+
62
+ .sentence-strip {
63
+ min-height: 100px;
64
+ background-color: #f3f4f6;
65
+ border-radius: 0.5rem;
66
+ }
67
+
68
+ .drag-item {
69
+ cursor: grab;
70
+ transition: all 0.2s ease;
71
+ }
72
+
73
+ .drag-item:active {
74
+ cursor: grabbing;
75
+ }
76
+
77
+ .drag-item.dragging {
78
+ opacity: 0.5;
79
+ transform: scale(1.05);
80
+ }
81
+
82
+ .drop-zone {
83
+ transition: all 0.3s ease;
84
+ }
85
+
86
+ .symbol-img {
87
+ width: 80px;
88
+ height: 80px;
89
+ object-fit: contain;
90
+ }
91
+
92
+ .recent-symbol {
93
+ width: 40px;
94
+ height: 40px;
95
+ object-fit: contain;
96
+ }
97
+ </style>
98
+ </head>
99
+ <body class="bg-gray-50">
100
+ <!-- Header -->
101
+ <header class="bg-white shadow-sm">
102
+ <div class="container mx-auto px-4 py-3 flex items-center justify-between">
103
+ <div class="flex items-center">
104
+ <div class="logo-container">
105
+ <div class="logo-icon">CP</div>
106
+ <div>
107
+ <span class="logo-text">ConnectPics</span>
108
+ <span class="tagline">Visual communication, simplified</span>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ <div class="flex items-center space-x-4">
113
+ <button class="text-gray-600 hover:text-gray-900">
114
+ <i class="fas fa-user-circle text-2xl"></i>
115
+ </button>
116
+ <button class="text-gray-600 hover:text-gray-900">
117
+ <i class="fas fa-cog text-2xl"></i>
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </header>
122
+
123
+ <!-- Main Content -->
124
+ <main class="container mx-auto px-4 py-6">
125
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
126
+ <!-- Sidebar -->
127
+ <div class="lg:col-span-1 bg-white rounded-lg shadow p-4">
128
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Categories</h2>
129
+ <ul class="space-y-2">
130
+ <li>
131
+ <button class="w-full text-left px-3 py-2 rounded-md bg-indigo-100 text-indigo-700 font-medium">
132
+ <i class="fas fa-utensils mr-2"></i> Food
133
+ </button>
134
+ </li>
135
+ <li>
136
+ <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 text-gray-700">
137
+ <i class="fas fa-running mr-2"></i> Activities
138
+ </button>
139
+ </li>
140
+ <li>
141
+ <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 text-gray-700">
142
+ <i class="fas fa-smile mr-2"></i> Emotions
143
+ </button>
144
+ </li>
145
+ <li>
146
+ <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 text-gray-700">
147
+ <i class="fas fa-home mr-2"></i> Places
148
+ </button>
149
+ </li>
150
+ <li>
151
+ <button class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 text-gray-700">
152
+ <i class="fas fa-users mr-2"></i> People
153
+ </button>
154
+ </li>
155
+ </ul>
156
+
157
+ <div class="mt-6">
158
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Quick Actions</h2>
159
+ <button class="w-full mb-2 flex items-center justify-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
160
+ <i class="fas fa-plus-circle mr-2"></i> New Card
161
+ </button>
162
+ <button class="w-full flex items-center justify-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
163
+ <i class="fas fa-save mr-2"></i> Save Sentence
164
+ </button>
165
+ </div>
166
+
167
+ <div class="mt-6">
168
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Recent Sentences</h2>
169
+ <div class="space-y-2">
170
+ <div class="bg-gray-100 p-2 rounded-md">
171
+ <div class="flex items-center">
172
+ <img src="https://cdn-icons-png.flaticon.com/512/4322/4322991.png" alt="I" class="recent-symbol rounded-md mr-2">
173
+ <img src="https://cdn-icons-png.flaticon.com/512/1057/1057241.png" alt="want" class="recent-symbol rounded-md mr-2">
174
+ <img src="https://cdn-icons-png.flaticon.com/512/415/415733.png" alt="apple" class="recent-symbol rounded-md">
175
+ </div>
176
+ <div class="mt-1 text-sm text-gray-600">"I want apple"</div>
177
+ </div>
178
+ <div class="bg-gray-100 p-2 rounded-md">
179
+ <div class="flex items-center">
180
+ <img src="https://cdn-icons-png.flaticon.com/512/4322/4322991.png" alt="I" class="recent-symbol rounded-md mr-2">
181
+ <img src="https://cdn-icons-png.flaticon.com/512/1049/1049204.png" alt="feel" class="recent-symbol rounded-md mr-2">
182
+ <img src="https://cdn-icons-png.flaticon.com/512/2583/2583344.png" alt="happy" class="recent-symbol rounded-md">
183
+ </div>
184
+ <div class="mt-1 text-sm text-gray-600">"I feel happy"</div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Main Content Area -->
191
+ <div class="lg:col-span-3 space-y-6">
192
+ <!-- Search and Filter -->
193
+ <div class="bg-white rounded-lg shadow p-4">
194
+ <div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-2 md:space-y-0">
195
+ <div class="relative flex-grow">
196
+ <input type="text" placeholder="Search cards..." class="w-full pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
197
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
198
+ </div>
199
+ <select class="px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
200
+ <option>All Sizes</option>
201
+ <option>Small</option>
202
+ <option>Medium</option>
203
+ <option>Large</option>
204
+ </select>
205
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
206
+ <i class="fas fa-filter mr-2"></i> Filter
207
+ </button>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Picture Cards Grid -->
212
+ <div class="bg-white rounded-lg shadow p-4">
213
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Food Cards</h2>
214
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
215
+ <!-- Food items with cartoon/symbol images -->
216
+ <div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true">
217
+ <img src="https://cdn-icons-png.flaticon.com/512/415/415733.png" alt="Apple" class="symbol-img mb-2">
218
+ <span class="text-sm font-medium text-center">Apple</span>
219
+ </div>
220
+ <div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true">
221
+ <img src="https://cdn-icons-png.flaticon.com/512/2909/2909503.png" alt="Banana" class="symbol-img mb-2">
222
+ <span class="text-sm font-medium text-center">Banana</span>
223
+ </div>
224
+ <div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true">
225
+ <img src="https://cdn-icons-png.flaticon.com/512/2707/2707987.png" alt="Bread" class="symbol-img mb-2">
226
+ <span class="text-sm font-medium text-center">Bread</span>
227
+ </div>
228
+ <div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true">
229
+ <img src="https://cdn-icons-png.flaticon.com/512/2505/2505475.png" alt="Milk" class="symbol-img mb-2">
230
+ <span class="text-sm font-medium text-center">Milk</span>
231
+ </div>
232
+ <div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true">
233
+ <img src="https://cdn-icons-png.flaticon.com/512/305/305991.png" alt="Juice" class="symbol-img mb-2">
234
+ <span class="text-sm font-medium text-center">Juice</span>
235
+ </div>
236
+ <div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true">
237
+ <img src="https://cdn-icons-png.flaticon.com/512/3196/3196879.png" alt="Cookie" class="symbol-img mb-2">
238
+ <span class="text-sm font-medium text-center">Cookie</span>
239
+ </div>
240
+ <div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true">
241
+ <img src="https://cdn-icons-png.flaticon.com/512/1404/1404945.png" alt="Pizza" class="symbol-img mb-2">
242
+ <span class="text-sm font-medium text-center">Pizza</span>
243
+ </div>
244
+ <div class="card drag-item bg-white border rounded-lg p-3 flex flex-col items-center cursor-move" draggable="true">
245
+ <img src="https://cdn-icons-png.flaticon.com/512/2718/2718224.png" alt="Sandwich" class="symbol-img mb-2">
246
+ <span class="text-sm font-medium text-center">Sandwich</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Sentence Strip Builder -->
252
+ <div class="bg-white rounded-lg shadow p-4">
253
+ <div class="flex items-center justify-between mb-4">
254
+ <h2 class="text-xl font-semibold text-gray-800">Sentence Builder</h2>
255
+ <div class="flex space-x-2">
256
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
257
+ <i class="fas fa-play mr-1"></i> Speak
258
+ </button>
259
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300">
260
+ <i class="fas fa-trash-alt mr-1"></i> Clear
261
+ </button>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="sentence-strip drop-zone p-4 mb-4 flex items-center min-h-24">
266
+ <div class="flex items-center space-x-2" id="sentence-container">
267
+ <div class="text-gray-400 italic">Drag cards here to build a sentence</div>
268
+ </div>
269
+ </div>
270
+
271
+ <div class="flex justify-between">
272
+ <div class="text-sm text-gray-500">
273
+ <span id="word-count">0</span> words in sentence
274
+ </div>
275
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
276
+ <i class="fas fa-share-alt mr-2"></i> Share with Partner
277
+ </button>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </main>
283
+
284
+ <!-- Footer -->
285
+ <footer class="bg-gray-800 text-white py-6">
286
+ <div class="container mx-auto px-4">
287
+ <div class="flex flex-col md:flex-row justify-between items-center">
288
+ <div class="mb-4 md:mb-0">
289
+ <div class="logo-container">
290
+ <div class="logo-icon">CP</div>
291
+ <div>
292
+ <span class="logo-text">ConnectPics</span>
293
+ <span class="tagline">Visual communication, simplified</span>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ <div class="flex space-x-6">
298
+ <a href="#" class="text-gray-300 hover:text-white">About</a>
299
+ <a href="#" class="text-gray-300 hover:text-white">Features</a>
300
+ <a href="#" class="text-gray-300 hover:text-white">Support</a>
301
+ <a href="#" class="text-gray-300 hover:text-white">Privacy</a>
302
+ </div>
303
+ </div>
304
+ <div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
305
+ &copy; 2023 ConnectPics. All rights reserved.
306
+ </div>
307
+ </div>
308
+ </footer>
309
+
310
+ <script>
311
+ // Drag and drop functionality
312
+ document.addEventListener('DOMContentLoaded', function() {
313
+ const dragItems = document.querySelectorAll('.drag-item');
314
+ const dropZone = document.querySelector('.drop-zone');
315
+ const sentenceContainer = document.getElementById('sentence-container');
316
+ const wordCount = document.getElementById('word-count');
317
+
318
+ // Add drag start event to all draggable items
319
+ dragItems.forEach(item => {
320
+ item.addEventListener('dragstart', function(e) {
321
+ e.dataTransfer.setData('text/plain', item.innerHTML);
322
+ item.classList.add('dragging');
323
+ });
324
+
325
+ item.addEventListener('dragend', function() {
326
+ item.classList.remove('dragging');
327
+ });
328
+ });
329
+
330
+ // Drop zone events
331
+ dropZone.addEventListener('dragover', function(e) {
332
+ e.preventDefault();
333
+ this.classList.add('active');
334
+ });
335
+
336
+ dropZone.addEventListener('dragleave', function() {
337
+ this.classList.remove('active');
338
+ });
339
+
340
+ dropZone.addEventListener('drop', function(e) {
341
+ e.preventDefault();
342
+ this.classList.remove('active');
343
+
344
+ const data = e.dataTransfer.getData('text/plain');
345
+
346
+ // If the drop zone has the default message, clear it
347
+ if (sentenceContainer.innerHTML.includes('Drag cards here')) {
348
+ sentenceContainer.innerHTML = '';
349
+ }
350
+
351
+ // Create a new card in the sentence strip
352
+ const newCard = document.createElement('div');
353
+ newCard.className = 'card bg-white border rounded-lg p-2 flex flex-col items-center cursor-move';
354
+ newCard.innerHTML = data;
355
+
356
+ // Add delete button
357
+ const deleteBtn = document.createElement('button');
358
+ deleteBtn.className = 'absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs';
359
+ deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
360
+ deleteBtn.addEventListener('click', function() {
361
+ newCard.remove();
362
+ updateWordCount();
363
+ });
364
+
365
+ const cardWrapper = document.createElement('div');
366
+ cardWrapper.className = 'relative mx-1';
367
+ cardWrapper.appendChild(newCard);
368
+ cardWrapper.appendChild(deleteBtn);
369
+
370
+ sentenceContainer.appendChild(cardWrapper);
371
+ updateWordCount();
372
+ });
373
+
374
+ // Update word count
375
+ function updateWordCount() {
376
+ const words = sentenceContainer.querySelectorAll('.card');
377
+ wordCount.textContent = words.length;
378
+
379
+ if (words.length === 0) {
380
+ sentenceContainer.innerHTML = '<div class="text-gray-400 italic">Drag cards here to build a sentence</div>';
381
+ }
382
+ }
383
+
384
+ // Speak button functionality
385
+ document.querySelector('.fa-play').closest('button').addEventListener('click', function() {
386
+ const words = [];
387
+ sentenceContainer.querySelectorAll('.card span').forEach(span => {
388
+ words.push(span.textContent);
389
+ });
390
+
391
+ if (words.length > 0) {
392
+ const utterance = new SpeechSynthesisUtterance(words.join(' '));
393
+ speechSynthesis.speak(utterance);
394
+ } else {
395
+ alert('Please add some words to the sentence first.');
396
+ }
397
+ });
398
+
399
+ // Clear button functionality
400
+ document.querySelector('.fa-trash-alt').closest('button').addEventListener('click', function() {
401
+ sentenceContainer.innerHTML = '<div class="text-gray-400 italic">Drag cards here to build a sentence</div>';
402
+ updateWordCount();
403
+ });
404
+ });
405
+ </script>
406
+ <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=theaimoron/pecs-app-for-students" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
407
+ </html>