Hugging Face's logo

Spaces:
dhishooooom
/
clipstack
Running

App Files Community
dhishooooom commited on
Commit
c6f2918
·
verified ·
1 Parent(s): 4b1a094

Create a tool for a small, specific group of people who desperately need something that should exist but doesn't. The tool should: - Serve 10-1000 people who are currently invisible to mainstream solutions - Fill a gap so obvious that its absence seems absurd once noticed - Work with the constraints these people actually have (old tech, limited resources, different contexts) - Build trust through imperfection rather than polish - Create space for these users to grow into a new world, not force them to adapt Focus on tools that: - The market ignores because the users are "unprofitable" - Require deep cultural or contextual understanding - Solve problems that only exist when you truly see the users - Enable dignity, not just functionality Examples of gaps: - People who need X but only have access to Y - Communities speaking languages no one builds for - Workers in industries tech pretends don't exist - Anyone navigating systems not designed for them The tool succeeds when users say "finally, something that sees me" rather than "wow, what advanced technology." Make it real, make it specific, make it exist. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +348 -321
index.html CHANGED
@@ -3,376 +3,403 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ClipStack - Never Lose Copied Text Again</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
- .clipboard-item {
11
- transition: all 0.2s ease;
12
  }
13
- .clipboard-item:hover {
14
- transform: translateY(-2px);
15
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
16
  }
17
- .fade-in {
18
- animation: fadeIn 0.3s ease-in;
 
19
  }
20
- @keyframes fadeIn {
21
- from { opacity: 0; transform: translateY(10px); }
22
- to { opacity: 1; transform: translateY(0); }
 
 
 
23
  }
24
- .text-ellipsis {
25
- display: -webkit-box;
26
- -webkit-line-clamp: 2;
27
- -webkit-box-orient: vertical;
28
- overflow: hidden;
29
- text-overflow: ellipsis;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
  </style>
32
  </head>
33
- <body class="bg-gray-50 min-h-screen">
34
  <div class="container mx-auto px-4 py-8 max-w-4xl">
35
  <!-- Header -->
36
- <header class="mb-8 text-center">
37
- <h1 class="text-4xl font-bold text-indigo-600 mb-2">ClipStack</h1>
38
- <p class="text-gray-600">Your personal clipboard history manager</p>
39
- <div class="mt-4 flex justify-center space-x-2">
40
- <button id="clearAllBtn" class="px-4 py-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition">
41
- <i class="fas fa-trash mr-2"></i>Clear All
42
- </button>
43
- <button id="toggleAutoSave" class="px-4 py-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition">
44
- <i class="fas fa-save mr-2"></i>Auto-save: ON
45
- </button>
46
  </div>
47
  </header>
48
 
49
  <!-- Main Content -->
50
- <div class="bg-white rounded-xl shadow-lg overflow-hidden">
51
- <!-- Search Bar -->
52
- <div class="p-4 bg-indigo-50">
53
- <div class="relative">
54
- <input type="text" id="searchInput" placeholder="Search your clipboard history..."
55
- class="w-full px-4 py-3 rounded-lg border border-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-400">
56
- <i class="fas fa-search absolute right-4 top-3.5 text-indigo-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  </div>
58
- </div>
59
 
60
- <!-- Clipboard Items -->
61
- <div id="clipboardItems" class="divide-y divide-gray-100 max-h-[60vh] overflow-y-auto">
62
- <!-- Items will be added here dynamically -->
63
- <div class="text-center py-12 text-gray-400" id="emptyState">
64
- <i class="fas fa-clipboard text-4xl mb-4"></i>
65
- <p>Your clipboard history will appear here</p>
66
- <p class="text-sm mt-2">Try copying some text and it will automatically appear</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  </div>
68
- </div>
69
 
70
- <!-- Current Clipboard -->
71
- <div class="p-4 border-t border-gray-200 bg-gray-50">
72
- <h3 class="font-medium text-gray-700 mb-2">Current Clipboard</h3>
73
- <div class="flex items-start">
74
- <textarea id="currentClipboard" rows="3"
75
- class="flex-1 px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-400 resize-none"
76
- placeholder="Paste here or it will update automatically when you copy"></textarea>
77
- <button id="copyCurrentBtn" class="ml-2 px-4 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
78
- <i class="fas fa-copy"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  </button>
80
  </div>
81
- </div>
82
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
 
84
- <!-- Stats Footer -->
85
- <footer class="mt-6 text-center text-sm text-gray-500">
86
- <div class="inline-flex items-center space-x-4">
87
- <span id="itemCount">0 items saved</span>
88
- <span id="storageStatus">Using 0KB of storage</span>
 
 
 
 
 
 
 
 
 
89
  </div>
90
  </footer>
91
  </div>
92
 
93
- <!-- Toast Notification -->
94
- <div id="toast" class="fixed bottom-4 right-4 px-6 py-3 bg-green-500 text-white rounded-lg shadow-lg transform translate-y-10 opacity-0 transition-all duration-300">
95
- <i class="fas fa-check-circle mr-2"></i>
96
- <span id="toastMessage">Copied to clipboard!</span>
97
- </div>
98
-
99
  <script>
100
  document.addEventListener('DOMContentLoaded', function() {
101
- // Elements
102
- const clipboardItems = document.getElementById('clipboardItems');
103
- const currentClipboard = document.getElementById('currentClipboard');
104
- const copyCurrentBtn = document.getElementById('copyCurrentBtn');
105
- const clearAllBtn = document.getElementById('clearAllBtn');
106
- const toggleAutoSave = document.getElementById('toggleAutoSave');
107
- const searchInput = document.getElementById('searchInput');
108
- const emptyState = document.getElementById('emptyState');
109
- const itemCount = document.getElementById('itemCount');
110
- const storageStatus = document.getElementById('storageStatus');
111
- const toast = document.getElementById('toast');
112
-
113
- // State
114
- let autoSave = true;
115
- let items = JSON.parse(localStorage.getItem('clipboardItems') || '[]');
116
 
117
- // Initialize
118
- renderItems();
119
- updateStats();
120
- checkCurrentClipboard();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
 
122
- // Clipboard monitoring
123
- setInterval(checkCurrentClipboard, 1000);
 
 
 
 
 
124
 
125
- // Event Listeners
126
- copyCurrentBtn.addEventListener('click', copyCurrentToClipboard);
127
- clearAllBtn.addEventListener('click', clearAllItems);
128
- toggleAutoSave.addEventListener('click', toggleAutoSaveFeature);
129
- searchInput.addEventListener('input', filterItems);
130
- currentClipboard.addEventListener('input', handleManualInput);
 
 
131
 
132
- // Functions
133
- function checkCurrentClipboard() {
134
- navigator.clipboard.readText().then(text => {
135
- if (text && text !== currentClipboard.value) {
136
- currentClipboard.value = text;
137
- if (autoSave && text.trim() && !items.some(item => item.text === text)) {
138
- addNewItem(text);
139
- }
140
- }
141
- }).catch(err => {
142
- console.log('Clipboard access denied', err);
143
  });
144
- }
145
 
146
- function addNewItem(text) {
147
- const newItem = {
148
- id: Date.now(),
149
- text: text,
150
- timestamp: new Date().toISOString(),
151
- pinned: false
152
- };
153
-
154
- items.unshift(newItem);
155
- saveItems();
156
- renderItems();
157
- showToast('Text saved to history!');
158
- }
159
 
160
- function renderItems(filteredItems = null) {
161
- const itemsToRender = filteredItems || items;
162
-
163
- if (itemsToRender.length === 0) {
164
- emptyState.style.display = 'block';
165
- return;
166
- }
167
-
168
- emptyState.style.display = 'none';
169
- clipboardItems.innerHTML = '';
170
-
171
- itemsToRender.forEach(item => {
172
- const itemElement = document.createElement('div');
173
- itemElement.className = `clipboard-item p-4 hover:bg-gray-50 cursor-pointer fade-in ${item.pinned ? 'bg-yellow-50' : ''}`;
174
- itemElement.innerHTML = `
175
- <div class="flex justify-between items-start">
176
- <div class="flex-1 min-w-0">
177
- <div class="text-ellipsis text-gray-800">${escapeHtml(item.text)}</div>
178
- <div class="text-xs text-gray-500 mt-1">${formatDate(item.timestamp)}</div>
179
- </div>
180
- <div class="flex space-x-2 ml-3">
181
- <button class="p-2 text-gray-400 hover:text-indigo-600 copy-btn" data-id="${item.id}">
182
- <i class="fas fa-copy"></i>
183
- </button>
184
- <button class="p-2 text-gray-400 hover:text-yellow-600 pin-btn" data-id="${item.id}">
185
- <i class="fas ${item.pinned ? 'fa-thumbtack' : 'fa-thumbtack rotate-45'}"></i>
186
- </button>
187
- <button class="p-2 text-gray-400 hover:text-red-600 delete-btn" data-id="${item.id}">
188
- <i class="fas fa-trash"></i>
189
- </button>
190
- </div>
191
  </div>
 
 
 
192
  `;
 
 
193
 
194
- clipboardItems.appendChild(itemElement);
195
- });
196
-
197
- // Add event listeners to new buttons
198
- document.querySelectorAll('.copy-btn').forEach(btn => {
199
- btn.addEventListener('click', (e) => {
200
- e.stopPropagation();
201
- const id = parseInt(btn.dataset.id);
202
- copyItemToClipboard(id);
203
  });
204
- });
205
-
206
- document.querySelectorAll('.pin-btn').forEach(btn => {
207
- btn.addEventListener('click', (e) => {
208
- e.stopPropagation();
209
- const id = parseInt(btn.dataset.id);
210
- togglePinItem(id);
211
- });
212
- });
213
-
214
- document.querySelectorAll('.delete-btn').forEach(btn => {
215
- btn.addEventListener('click', (e) => {
216
- e.stopPropagation();
217
- const id = parseInt(btn.dataset.id);
218
- deleteItem(id);
219
- });
220
- });
221
-
222
- // Click on item to expand
223
- document.querySelectorAll('.clipboard-item').forEach(item => {
224
- item.addEventListener('click', (e) => {
225
- if (e.target.tagName !== 'BUTTON') {
226
- const id = parseInt(item.querySelector('.copy-btn').dataset.id);
227
- const clickedItem = items.find(i => i.id === id);
228
- if (clickedItem) {
229
- currentClipboard.value = clickedItem.text;
230
- copyTextToClipboard(clickedItem.text);
231
- }
232
  }
233
  });
234
- });
235
- }
236
-
237
- function copyCurrentToClipboard() {
238
- const text = currentClipboard.value.trim();
239
- if (text) {
240
- copyTextToClipboard(text);
241
- if (autoSave && !items.some(item => item.text === text)) {
242
- addNewItem(text);
243
- }
244
  }
245
- }
246
 
247
- function copyItemToClipboard(id) {
248
- const item = items.find(item => item.id === id);
249
- if (item) {
250
- copyTextToClipboard(item.text);
251
- currentClipboard.value = item.text;
252
  }
253
- }
254
-
255
- function copyTextToClipboard(text) {
256
- navigator.clipboard.writeText(text).then(() => {
257
- showToast('Copied to clipboard!');
258
- }).catch(err => {
259
- console.error('Failed to copy text: ', err);
260
- });
261
- }
262
 
263
- function togglePinItem(id) {
264
- const itemIndex = items.findIndex(item => item.id === id);
265
- if (itemIndex !== -1) {
266
- items[itemIndex].pinned = !items[itemIndex].pinned;
267
-
268
- // Move pinned items to top
269
- if (items[itemIndex].pinned) {
270
- const [pinnedItem] = items.splice(itemIndex, 1);
271
- items.unshift(pinnedItem);
272
  }
273
-
274
- saveItems();
275
- renderItems();
276
- }
277
- }
278
-
279
- function deleteItem(id) {
280
- items = items.filter(item => item.id !== id);
281
- saveItems();
282
- renderItems();
283
- showToast('Item deleted');
284
- }
285
-
286
- function clearAllItems() {
287
- if (confirm('Are you sure you want to delete all clipboard items?')) {
288
- items = [];
289
- saveItems();
290
- renderItems();
291
- showToast('All items cleared');
292
- }
293
- }
294
-
295
- function toggleAutoSaveFeature() {
296
- autoSave = !autoSave;
297
- toggleAutoSave.innerHTML = autoSave
298
- ? '<i class="fas fa-save mr-2"></i>Auto-save: ON'
299
- : '<i class="fas fa-save mr-2"></i>Auto-save: OFF';
300
- toggleAutoSave.className = autoSave
301
- ? 'px-4 py-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition'
302
- : 'px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition';
303
-
304
- localStorage.setItem('clipboardAutoSave', autoSave);
305
- showToast(`Auto-save ${autoSave ? 'enabled' : 'disabled'}`);
306
- }
307
-
308
- function filterItems() {
309
- const searchTerm = searchInput.value.toLowerCase();
310
- if (!searchTerm) {
311
- renderItems();
312
- return;
313
- }
314
-
315
- const filtered = items.filter(item =>
316
- item.text.toLowerCase().includes(searchTerm)
317
- );
318
- renderItems(filtered);
319
- }
320
-
321
- function handleManualInput() {
322
- // Optional: You could add auto-save when user types manually
323
- }
324
-
325
- function saveItems() {
326
- localStorage.setItem('clipboardItems', JSON.stringify(items));
327
- updateStats();
328
- }
329
-
330
- function updateStats() {
331
- itemCount.textContent = `${items.length} ${items.length === 1 ? 'item' : 'items'} saved`;
332
-
333
- // Calculate approximate storage usage
334
- const dataSize = JSON.stringify(items).length;
335
- const sizeInKB = Math.round(dataSize / 1024);
336
- storageStatus.textContent = `Using ${sizeInKB}KB of storage`;
337
- }
338
-
339
- function showToast(message) {
340
- document.getElementById('toastMessage').textContent = message;
341
- toast.style.transform = 'translateY(0)';
342
- toast.style.opacity = '1';
343
-
344
- setTimeout(() => {
345
- toast.style.transform = 'translateY(10px)';
346
- toast.style.opacity = '0';
347
- }, 3000);
348
- }
349
-
350
- function formatDate(isoString) {
351
- const date = new Date(isoString);
352
- return date.toLocaleString();
353
- }
354
 
355
- function escapeHtml(unsafe) {
356
- return unsafe
357
- .replace(/&/g, "&amp;")
358
- .replace(/</g, "&lt;")
359
- .replace(/>/g, "&gt;")
360
- .replace(/"/g, "&quot;")
361
- .replace(/'/g, "&#039;")
362
- .replace(/\n/g, '<br>');
363
- }
364
 
365
- // Load auto-save preference
366
- const savedAutoSave = localStorage.getItem('clipboardAutoSave');
367
- if (savedAutoSave !== null) {
368
- autoSave = savedAutoSave === 'true';
369
- toggleAutoSave.innerHTML = autoSave
370
- ? '<i class="fas fa-save mr-2"></i>Auto-save: ON'
371
- : '<i class="fas fa-save mr-2"></i>Auto-save: OFF';
372
- toggleAutoSave.className = autoSave
373
- ? 'px-4 py-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition'
374
- : 'px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition';
375
- }
376
  });
377
  </script>
378
  <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=dhishooooom/clipstack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>EldersConnect - Simple Technology for Seniors</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
+ .text-xxl {
11
+ font-size: 2.5rem;
12
  }
13
+ .text-xxxl {
14
+ font-size: 3rem;
 
15
  }
16
+ .btn-huge {
17
+ padding: 1.5rem 3rem;
18
+ font-size: 2rem;
19
  }
20
+ .speech-bubble {
21
+ position: relative;
22
+ background: #f8fafc;
23
+ border-radius: 1.5rem;
24
+ padding: 1.5rem;
25
+ margin-bottom: 2rem;
26
  }
27
+ .speech-bubble:after {
28
+ content: '';
29
+ position: absolute;
30
+ bottom: 0;
31
+ left: 50%;
32
+ width: 0;
33
+ height: 0;
34
+ border: 20px solid transparent;
35
+ border-top-color: #f8fafc;
36
+ border-bottom: 0;
37
+ border-left: 0;
38
+ margin-left: -10px;
39
+ margin-bottom: -20px;
40
+ }
41
+ .voice-btn {
42
+ animation: pulse 2s infinite;
43
+ }
44
+ @keyframes pulse {
45
+ 0% {
46
+ transform: scale(1);
47
+ }
48
+ 50% {
49
+ transform: scale(1.05);
50
+ }
51
+ 100% {
52
+ transform: scale(1);
53
+ }
54
+ }
55
+ .simple-input {
56
+ font-size: 2rem;
57
+ padding: 1rem;
58
+ border: 3px solid #cbd5e1;
59
+ border-radius: 0.5rem;
60
  }
61
  </style>
62
  </head>
63
+ <body class="bg-blue-50 min-h-screen">
64
  <div class="container mx-auto px-4 py-8 max-w-4xl">
65
  <!-- Header -->
66
+ <header class="bg-blue-600 text-white rounded-xl p-6 mb-8 shadow-lg">
67
+ <div class="flex items-center justify-between">
68
+ <div>
69
+ <h1 class="text-xxxl font-bold">EldersConnect</h1>
70
+ <p class="text-xl mt-2">Simple technology for staying connected</p>
71
+ </div>
72
+ <div class="bg-white rounded-full p-4">
73
+ <i class="fas fa-heart text-blue-600 text-4xl"></i>
74
+ </div>
 
75
  </div>
76
  </header>
77
 
78
  <!-- Main Content -->
79
+ <main>
80
+ <!-- Voice Assistant Section -->
81
+ <section class="mb-12 bg-white rounded-xl p-6 shadow-md">
82
+ <h2 class="text-xxl font-bold text-blue-800 mb-6">How can I help you today?</h2>
83
+
84
+ <div class="flex flex-col items-center">
85
+ <button id="voiceBtn" class="voice-btn bg-blue-500 hover:bg-blue-600 text-white rounded-full p-8 mb-6">
86
+ <i class="fas fa-microphone text-4xl"></i>
87
+ </button>
88
+ <p class="text-xl text-gray-700 mb-4">Tap and speak clearly</p>
89
+
90
+ <div class="w-full">
91
+ <div id="voiceResponse" class="speech-bubble hidden">
92
+ <p class="text-xl">I heard you say: <span id="userRequest" class="font-bold"></span></p>
93
+ </div>
94
+
95
+ <div id="helpOptions" class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
96
+ <button class="action-btn bg-blue-100 hover:bg-blue-200 text-blue-800 text-xl p-4 rounded-lg border-2 border-blue-200 flex items-center">
97
+ <i class="fas fa-phone-alt mr-3"></i> Call Family
98
+ </button>
99
+ <button class="action-btn bg-green-100 hover:bg-green-200 text-green-800 text-xl p-4 rounded-lg border-2 border-green-200 flex items-center">
100
+ <i class="fas fa-video mr-3"></i> Video Chat
101
+ </button>
102
+ <button class="action-btn bg-yellow-100 hover:bg-yellow-200 text-yellow-800 text-xl p-4 rounded-lg border-2 border-yellow-200 flex items-center">
103
+ <i class="fas fa-shopping-cart mr-3"></i> Order Groceries
104
+ </button>
105
+ <button class="action-btn bg-red-100 hover:bg-red-200 text-red-800 text-xl p-4 rounded-lg border-2 border-red-200 flex items-center">
106
+ <i class="fas fa-ambulance mr-3"></i> Emergency Help
107
+ </button>
108
+ </div>
109
+ </div>
110
  </div>
111
+ </section>
112
 
113
+ <!-- Simple Contacts -->
114
+ <section class="mb-12 bg-white rounded-xl p-6 shadow-md">
115
+ <h2 class="text-xxl font-bold text-blue-800 mb-6">Your Important People</h2>
116
+
117
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
118
+ <div class="contact-card bg-blue-50 p-4 rounded-lg border-2 border-blue-100">
119
+ <div class="flex items-center">
120
+ <div class="bg-blue-100 rounded-full p-4 mr-4">
121
+ <i class="fas fa-user text-blue-600 text-2xl"></i>
122
+ </div>
123
+ <div>
124
+ <h3 class="text-xl font-bold">Sarah (Daughter)</h3>
125
+ <button class="call-btn mt-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
126
+ <i class="fas fa-phone-alt mr-2"></i> Call Now
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="contact-card bg-green-50 p-4 rounded-lg border-2 border-green-100">
133
+ <div class="flex items-center">
134
+ <div class="bg-green-100 rounded-full p-4 mr-4">
135
+ <i class="fas fa-user text-green-600 text-2xl"></i>
136
+ </div>
137
+ <div>
138
+ <h3 class="text-xl font-bold">Dr. Johnson</h3>
139
+ <button class="call-btn mt-2 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center">
140
+ <i class="fas fa-phone-alt mr-2"></i> Call Now
141
+ </button>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="contact-card bg-yellow-50 p-4 rounded-lg border-2 border-yellow-100">
147
+ <div class="flex items-center">
148
+ <div class="bg-yellow-100 rounded-full p-4 mr-4">
149
+ <i class="fas fa-user text-yellow-600 text-2xl"></i>
150
+ </div>
151
+ <div>
152
+ <h3 class="text-xl font-bold">Neighbor Mary</h3>
153
+ <button class="call-btn mt-2 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg flex items-center">
154
+ <i class="fas fa-phone-alt mr-2"></i> Call Now
155
+ </button>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="contact-card bg-purple-50 p-4 rounded-lg border-2 border-purple-100">
161
+ <div class="flex items-center">
162
+ <div class="bg-purple-100 rounded-full p-4 mr-4">
163
+ <i class="fas fa-plus text-purple-600 text-2xl"></i>
164
+ </div>
165
+ <div>
166
+ <h3 class="text-xl font-bold">Add New Contact</h3>
167
+ <button class="call-btn mt-2 bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center">
168
+ <i class="fas fa-user-plus mr-2"></i> Add Now
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </div>
173
  </div>
174
+ </section>
175
 
176
+ <!-- Emergency Section -->
177
+ <section class="mb-12 bg-red-50 rounded-xl p-6 shadow-md border-2 border-red-100">
178
+ <h2 class="text-xxl font-bold text-red-800 mb-6">Emergency Help</h2>
179
+
180
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
181
+ <button class="emergency-btn bg-red-500 hover:bg-red-600 text-white btn-huge rounded-full flex flex-col items-center justify-center">
182
+ <i class="fas fa-ambulance text-4xl mb-2"></i>
183
+ <span>Medical Emergency</span>
184
+ </button>
185
+
186
+ <button class="emergency-btn bg-red-400 hover:bg-red-500 text-white btn-huge rounded-full flex flex-col items-center justify-center">
187
+ <i class="fas fa-fire-extinguisher text-4xl mb-2"></i>
188
+ <span>Fire Department</span>
189
+ </button>
190
+
191
+ <button class="emergency-btn bg-red-300 hover:bg-red-400 text-white btn-huge rounded-full flex flex-col items-center justify-center">
192
+ <i class="fas fa-shield-alt text-4xl mb-2"></i>
193
+ <span>Police</span>
194
+ </button>
195
+
196
+ <button class="emergency-btn bg-red-200 hover:bg-red-300 text-red-800 btn-huge rounded-full flex flex-col items-center justify-center">
197
+ <i class="fas fa-user-nurse text-4xl mb-2"></i>
198
+ <span>Family Alert</span>
199
  </button>
200
  </div>
201
+
202
+ <div class="mt-8 bg-white p-4 rounded-lg">
203
+ <h3 class="text-xl font-bold mb-3">Your Emergency Information</h3>
204
+ <p class="text-lg mb-2"><span class="font-bold">Name:</span> Margaret Smith</p>
205
+ <p class="text-lg mb-2"><span class="font-bold">Address:</span> 123 Maple St, Apt 4B</p>
206
+ <p class="text-lg mb-2"><span class="font-bold">Medical Conditions:</span> High blood pressure, Diabetes</p>
207
+ <p class="text-lg"><span class="font-bold">Medications:</span> Lisinopril, Metformin</p>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Simple Reminders -->
212
+ <section class="mb-12 bg-white rounded-xl p-6 shadow-md">
213
+ <h2 class="text-xxl font-bold text-blue-800 mb-6">Your Daily Reminders</h2>
214
+
215
+ <div class="mb-6">
216
+ <div class="flex items-center mb-4">
217
+ <input type="text" id="newReminder" placeholder="Add a new reminder" class="simple-input flex-grow mr-4">
218
+ <button id="addReminder" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg text-xl">
219
+ Add
220
+ </button>
221
+ </div>
222
+ </div>
223
+
224
+ <div id="remindersList" class="space-y-3">
225
+ <div class="reminder-item bg-blue-50 p-4 rounded-lg flex items-center justify-between">
226
+ <div class="flex items-center">
227
+ <input type="checkbox" class="w-6 h-6 mr-3">
228
+ <span class="text-xl">Take morning medication at 8 AM</span>
229
+ </div>
230
+ <button class="delete-reminder text-red-500 hover:text-red-700">
231
+ <i class="fas fa-times text-2xl"></i>
232
+ </button>
233
+ </div>
234
+
235
+ <div class="reminder-item bg-blue-50 p-4 rounded-lg flex items-center justify-between">
236
+ <div class="flex items-center">
237
+ <input type="checkbox" class="w-6 h-6 mr-3">
238
+ <span class="text-xl">Call Sarah on Thursday</span>
239
+ </div>
240
+ <button class="delete-reminder text-red-500 hover:text-red-700">
241
+ <i class="fas fa-times text-2xl"></i>
242
+ </button>
243
+ </div>
244
+
245
+ <div class="reminder-item bg-blue-50 p-4 rounded-lg flex items-center justify-between">
246
+ <div class="flex items-center">
247
+ <input type="checkbox" class="w-6 h-6 mr-3" checked>
248
+ <span class="text-xl line-through text-gray-500">Water the plants</span>
249
+ </div>
250
+ <button class="delete-reminder text-red-500 hover:text-red-700">
251
+ <i class="fas fa-times text-2xl"></i>
252
+ </button>
253
+ </div>
254
+ </div>
255
+ </section>
256
+ </main>
257
 
258
+ <!-- Simple Footer -->
259
+ <footer class="bg-blue-800 text-white rounded-xl p-6 text-center">
260
+ <p class="text-xl mb-4">Need help? Call our support line anytime</p>
261
+ <p class="text-2xl font-bold mb-6">1-800-ELDER-CARE</p>
262
+ <div class="flex justify-center space-x-6">
263
+ <button class="bg-white text-blue-800 rounded-full p-3">
264
+ <i class="fas fa-question-circle text-2xl"></i>
265
+ </button>
266
+ <button class="bg-white text-blue-800 rounded-full p-3">
267
+ <i class="fas fa-cog text-2xl"></i>
268
+ </button>
269
+ <button class="bg-white text-blue-800 rounded-full p-3">
270
+ <i class="fas fa-volume-up text-2xl"></i>
271
+ </button>
272
  </div>
273
  </footer>
274
  </div>
275
 
 
 
 
 
 
 
276
  <script>
277
  document.addEventListener('DOMContentLoaded', function() {
278
+ // Voice button functionality
279
+ const voiceBtn = document.getElementById('voiceBtn');
280
+ const voiceResponse = document.getElementById('voiceResponse');
281
+ const userRequest = document.getElementById('userRequest');
 
 
 
 
 
 
 
 
 
 
 
282
 
283
+ voiceBtn.addEventListener('click', function() {
284
+ voiceBtn.innerHTML = '<i class="fas fa-microphone-alt text-4xl"></i>';
285
+ voiceBtn.classList.add('bg-red-500');
286
+ voiceBtn.classList.remove('bg-blue-500');
287
+
288
+ // Simulate voice recognition
289
+ setTimeout(() => {
290
+ voiceBtn.innerHTML = '<i class="fas fa-microphone text-4xl"></i>';
291
+ voiceBtn.classList.remove('bg-red-500');
292
+ voiceBtn.classList.add('bg-blue-500');
293
+
294
+ const sampleResponses = [
295
+ "I'd like to call my daughter",
296
+ "Can you help me order groceries?",
297
+ "I need to talk to my doctor",
298
+ "How do I video chat with my grandson?"
299
+ ];
300
+
301
+ const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)];
302
+ userRequest.textContent = randomResponse;
303
+ voiceResponse.classList.remove('hidden');
304
+ }, 3000);
305
+ });
306
 
307
+ // Action buttons
308
+ const actionButtons = document.querySelectorAll('.action-btn');
309
+ actionButtons.forEach(button => {
310
+ button.addEventListener('click', function() {
311
+ alert('This feature would connect you to the appropriate service. In a real app, this would initiate a call, video chat, or service request.');
312
+ });
313
+ });
314
 
315
+ // Call buttons
316
+ const callButtons = document.querySelectorAll('.call-btn');
317
+ callButtons.forEach(button => {
318
+ button.addEventListener('click', function() {
319
+ const contactName = this.closest('.contact-card').querySelector('h3').textContent;
320
+ alert(`This would call ${contactName}. In a real app, it would dial the pre-configured number.`);
321
+ });
322
+ });
323
 
324
+ // Emergency buttons
325
+ const emergencyButtons = document.querySelectorAll('.emergency-btn');
326
+ emergencyButtons.forEach(button => {
327
+ button.addEventListener('click', function() {
328
+ const service = this.textContent.trim();
329
+ alert(`EMERGENCY: Connecting you to ${service}. In a real app, this would immediately call emergency services and provide your location and medical information.`);
 
 
 
 
 
330
  });
331
+ });
332
 
333
+ // Reminders functionality
334
+ const addReminder = document.getElementById('addReminder');
335
+ const newReminder = document.getElementById('newReminder');
336
+ const remindersList = document.getElementById('remindersList');
 
 
 
 
 
 
 
 
 
337
 
338
+ addReminder.addEventListener('click', function() {
339
+ if (newReminder.value.trim() !== '') {
340
+ const reminderItem = document.createElement('div');
341
+ reminderItem.className = 'reminder-item bg-blue-50 p-4 rounded-lg flex items-center justify-between';
342
+ reminderItem.innerHTML = `
343
+ <div class="flex items-center">
344
+ <input type="checkbox" class="w-6 h-6 mr-3">
345
+ <span class="text-xl">${newReminder.value}</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
  </div>
347
+ <button class="delete-reminder text-red-500 hover:text-red-700">
348
+ <i class="fas fa-times text-2xl"></i>
349
+ </button>
350
  `;
351
+ remindersList.appendChild(reminderItem);
352
+ newReminder.value = '';
353
 
354
+ // Add event listener to new delete button
355
+ reminderItem.querySelector('.delete-reminder').addEventListener('click', function() {
356
+ reminderItem.remove();
 
 
 
 
 
 
357
  });
358
+
359
+ // Add event listener to new checkbox
360
+ reminderItem.querySelector('input[type="checkbox"]').addEventListener('change', function() {
361
+ const text = this.nextElementSibling;
362
+ if (this.checked) {
363
+ text.classList.add('line-through', 'text-gray-500');
364
+ } else {
365
+ text.classList.remove('line-through', 'text-gray-500');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
366
  }
367
  });
 
 
 
 
 
 
 
 
 
 
368
  }
369
+ });
370
 
371
+ // Allow pressing Enter to add reminder
372
+ newReminder.addEventListener('keypress', function(e) {
373
+ if (e.key === 'Enter') {
374
+ addReminder.click();
 
375
  }
376
+ });
 
 
 
 
 
 
 
 
377
 
378
+ // Existing reminder checkboxes
379
+ document.querySelectorAll('.reminder-item input[type="checkbox"]').forEach(checkbox => {
380
+ checkbox.addEventListener('change', function() {
381
+ const text = this.nextElementSibling;
382
+ if (this.checked) {
383
+ text.classList.add('line-through', 'text-gray-500');
384
+ } else {
385
+ text.classList.remove('line-through', 'text-gray-500');
 
386
  }
387
+ });
388
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
389
 
390
+ // Existing delete buttons
391
+ document.querySelectorAll('.delete-reminder').forEach(button => {
392
+ button.addEventListener('click', function() {
393
+ this.closest('.reminder-item').remove();
394
+ });
395
+ });
 
 
 
396
 
397
+ // Make everything bigger if requested
398
+ const textSizeButtons = document.querySelectorAll('footer button');
399
+ textSizeButtons[2].addEventListener('click', function() {
400
+ document.body.classList.toggle('text-2xl');
401
+ alert('Text size increased. In a real app, this would make all text larger for better visibility.');
402
+ });
 
 
 
 
 
403
  });
404
  </script>
405
  <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=dhishooooom/clipstack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>