Spaces:
Running
Running
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
c6f2918
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EldersConnect - Simple Technology for Seniors</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .text-xxl { | |
| font-size: 2.5rem; | |
| } | |
| .text-xxxl { | |
| font-size: 3rem; | |
| } | |
| .btn-huge { | |
| padding: 1.5rem 3rem; | |
| font-size: 2rem; | |
| } | |
| .speech-bubble { | |
| position: relative; | |
| background: #f8fafc; | |
| border-radius: 1.5rem; | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .speech-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border: 20px solid transparent; | |
| border-top-color: #f8fafc; | |
| border-bottom: 0; | |
| border-left: 0; | |
| margin-left: -10px; | |
| margin-bottom: -20px; | |
| } | |
| .voice-btn { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| .simple-input { | |
| font-size: 2rem; | |
| padding: 1rem; | |
| border: 3px solid #cbd5e1; | |
| border-radius: 0.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-blue-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <!-- Header --> | |
| <header class="bg-blue-600 text-white rounded-xl p-6 mb-8 shadow-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-xxxl font-bold">EldersConnect</h1> | |
| <p class="text-xl mt-2">Simple technology for staying connected</p> | |
| </div> | |
| <div class="bg-white rounded-full p-4"> | |
| <i class="fas fa-heart text-blue-600 text-4xl"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Voice Assistant Section --> | |
| <section class="mb-12 bg-white rounded-xl p-6 shadow-md"> | |
| <h2 class="text-xxl font-bold text-blue-800 mb-6">How can I help you today?</h2> | |
| <div class="flex flex-col items-center"> | |
| <button id="voiceBtn" class="voice-btn bg-blue-500 hover:bg-blue-600 text-white rounded-full p-8 mb-6"> | |
| <i class="fas fa-microphone text-4xl"></i> | |
| </button> | |
| <p class="text-xl text-gray-700 mb-4">Tap and speak clearly</p> | |
| <div class="w-full"> | |
| <div id="voiceResponse" class="speech-bubble hidden"> | |
| <p class="text-xl">I heard you say: <span id="userRequest" class="font-bold"></span></p> | |
| </div> | |
| <div id="helpOptions" class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6"> | |
| <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"> | |
| <i class="fas fa-phone-alt mr-3"></i> Call Family | |
| </button> | |
| <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"> | |
| <i class="fas fa-video mr-3"></i> Video Chat | |
| </button> | |
| <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"> | |
| <i class="fas fa-shopping-cart mr-3"></i> Order Groceries | |
| </button> | |
| <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"> | |
| <i class="fas fa-ambulance mr-3"></i> Emergency Help | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Simple Contacts --> | |
| <section class="mb-12 bg-white rounded-xl p-6 shadow-md"> | |
| <h2 class="text-xxl font-bold text-blue-800 mb-6">Your Important People</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="contact-card bg-blue-50 p-4 rounded-lg border-2 border-blue-100"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 rounded-full p-4 mr-4"> | |
| <i class="fas fa-user text-blue-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">Sarah (Daughter)</h3> | |
| <button class="call-btn mt-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> Call Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-card bg-green-50 p-4 rounded-lg border-2 border-green-100"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 rounded-full p-4 mr-4"> | |
| <i class="fas fa-user text-green-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">Dr. Johnson</h3> | |
| <button class="call-btn mt-2 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> Call Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-card bg-yellow-50 p-4 rounded-lg border-2 border-yellow-100"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 rounded-full p-4 mr-4"> | |
| <i class="fas fa-user text-yellow-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">Neighbor Mary</h3> | |
| <button class="call-btn mt-2 bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> Call Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-card bg-purple-50 p-4 rounded-lg border-2 border-purple-100"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-100 rounded-full p-4 mr-4"> | |
| <i class="fas fa-plus text-purple-600 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">Add New Contact</h3> | |
| <button class="call-btn mt-2 bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-user-plus mr-2"></i> Add Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Emergency Section --> | |
| <section class="mb-12 bg-red-50 rounded-xl p-6 shadow-md border-2 border-red-100"> | |
| <h2 class="text-xxl font-bold text-red-800 mb-6">Emergency Help</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <button class="emergency-btn bg-red-500 hover:bg-red-600 text-white btn-huge rounded-full flex flex-col items-center justify-center"> | |
| <i class="fas fa-ambulance text-4xl mb-2"></i> | |
| <span>Medical Emergency</span> | |
| </button> | |
| <button class="emergency-btn bg-red-400 hover:bg-red-500 text-white btn-huge rounded-full flex flex-col items-center justify-center"> | |
| <i class="fas fa-fire-extinguisher text-4xl mb-2"></i> | |
| <span>Fire Department</span> | |
| </button> | |
| <button class="emergency-btn bg-red-300 hover:bg-red-400 text-white btn-huge rounded-full flex flex-col items-center justify-center"> | |
| <i class="fas fa-shield-alt text-4xl mb-2"></i> | |
| <span>Police</span> | |
| </button> | |
| <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"> | |
| <i class="fas fa-user-nurse text-4xl mb-2"></i> | |
| <span>Family Alert</span> | |
| </button> | |
| </div> | |
| <div class="mt-8 bg-white p-4 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-3">Your Emergency Information</h3> | |
| <p class="text-lg mb-2"><span class="font-bold">Name:</span> Margaret Smith</p> | |
| <p class="text-lg mb-2"><span class="font-bold">Address:</span> 123 Maple St, Apt 4B</p> | |
| <p class="text-lg mb-2"><span class="font-bold">Medical Conditions:</span> High blood pressure, Diabetes</p> | |
| <p class="text-lg"><span class="font-bold">Medications:</span> Lisinopril, Metformin</p> | |
| </div> | |
| </section> | |
| <!-- Simple Reminders --> | |
| <section class="mb-12 bg-white rounded-xl p-6 shadow-md"> | |
| <h2 class="text-xxl font-bold text-blue-800 mb-6">Your Daily Reminders</h2> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <input type="text" id="newReminder" placeholder="Add a new reminder" class="simple-input flex-grow mr-4"> | |
| <button id="addReminder" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg text-xl"> | |
| Add | |
| </button> | |
| </div> | |
| </div> | |
| <div id="remindersList" class="space-y-3"> | |
| <div class="reminder-item bg-blue-50 p-4 rounded-lg flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="w-6 h-6 mr-3"> | |
| <span class="text-xl">Take morning medication at 8 AM</span> | |
| </div> | |
| <button class="delete-reminder text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="reminder-item bg-blue-50 p-4 rounded-lg flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="w-6 h-6 mr-3"> | |
| <span class="text-xl">Call Sarah on Thursday</span> | |
| </div> | |
| <button class="delete-reminder text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="reminder-item bg-blue-50 p-4 rounded-lg flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="w-6 h-6 mr-3" checked> | |
| <span class="text-xl line-through text-gray-500">Water the plants</span> | |
| </div> | |
| <button class="delete-reminder text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Simple Footer --> | |
| <footer class="bg-blue-800 text-white rounded-xl p-6 text-center"> | |
| <p class="text-xl mb-4">Need help? Call our support line anytime</p> | |
| <p class="text-2xl font-bold mb-6">1-800-ELDER-CARE</p> | |
| <div class="flex justify-center space-x-6"> | |
| <button class="bg-white text-blue-800 rounded-full p-3"> | |
| <i class="fas fa-question-circle text-2xl"></i> | |
| </button> | |
| <button class="bg-white text-blue-800 rounded-full p-3"> | |
| <i class="fas fa-cog text-2xl"></i> | |
| </button> | |
| <button class="bg-white text-blue-800 rounded-full p-3"> | |
| <i class="fas fa-volume-up text-2xl"></i> | |
| </button> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Voice button functionality | |
| const voiceBtn = document.getElementById('voiceBtn'); | |
| const voiceResponse = document.getElementById('voiceResponse'); | |
| const userRequest = document.getElementById('userRequest'); | |
| voiceBtn.addEventListener('click', function() { | |
| voiceBtn.innerHTML = '<i class="fas fa-microphone-alt text-4xl"></i>'; | |
| voiceBtn.classList.add('bg-red-500'); | |
| voiceBtn.classList.remove('bg-blue-500'); | |
| // Simulate voice recognition | |
| setTimeout(() => { | |
| voiceBtn.innerHTML = '<i class="fas fa-microphone text-4xl"></i>'; | |
| voiceBtn.classList.remove('bg-red-500'); | |
| voiceBtn.classList.add('bg-blue-500'); | |
| const sampleResponses = [ | |
| "I'd like to call my daughter", | |
| "Can you help me order groceries?", | |
| "I need to talk to my doctor", | |
| "How do I video chat with my grandson?" | |
| ]; | |
| const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)]; | |
| userRequest.textContent = randomResponse; | |
| voiceResponse.classList.remove('hidden'); | |
| }, 3000); | |
| }); | |
| // Action buttons | |
| const actionButtons = document.querySelectorAll('.action-btn'); | |
| actionButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| alert('This feature would connect you to the appropriate service. In a real app, this would initiate a call, video chat, or service request.'); | |
| }); | |
| }); | |
| // Call buttons | |
| const callButtons = document.querySelectorAll('.call-btn'); | |
| callButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const contactName = this.closest('.contact-card').querySelector('h3').textContent; | |
| alert(`This would call ${contactName}. In a real app, it would dial the pre-configured number.`); | |
| }); | |
| }); | |
| // Emergency buttons | |
| const emergencyButtons = document.querySelectorAll('.emergency-btn'); | |
| emergencyButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const service = this.textContent.trim(); | |
| alert(`EMERGENCY: Connecting you to ${service}. In a real app, this would immediately call emergency services and provide your location and medical information.`); | |
| }); | |
| }); | |
| // Reminders functionality | |
| const addReminder = document.getElementById('addReminder'); | |
| const newReminder = document.getElementById('newReminder'); | |
| const remindersList = document.getElementById('remindersList'); | |
| addReminder.addEventListener('click', function() { | |
| if (newReminder.value.trim() !== '') { | |
| const reminderItem = document.createElement('div'); | |
| reminderItem.className = 'reminder-item bg-blue-50 p-4 rounded-lg flex items-center justify-between'; | |
| reminderItem.innerHTML = ` | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="w-6 h-6 mr-3"> | |
| <span class="text-xl">${newReminder.value}</span> | |
| </div> | |
| <button class="delete-reminder text-red-500 hover:text-red-700"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| `; | |
| remindersList.appendChild(reminderItem); | |
| newReminder.value = ''; | |
| // Add event listener to new delete button | |
| reminderItem.querySelector('.delete-reminder').addEventListener('click', function() { | |
| reminderItem.remove(); | |
| }); | |
| // Add event listener to new checkbox | |
| reminderItem.querySelector('input[type="checkbox"]').addEventListener('change', function() { | |
| const text = this.nextElementSibling; | |
| if (this.checked) { | |
| text.classList.add('line-through', 'text-gray-500'); | |
| } else { | |
| text.classList.remove('line-through', 'text-gray-500'); | |
| } | |
| }); | |
| } | |
| }); | |
| // Allow pressing Enter to add reminder | |
| newReminder.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| addReminder.click(); | |
| } | |
| }); | |
| // Existing reminder checkboxes | |
| document.querySelectorAll('.reminder-item input[type="checkbox"]').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const text = this.nextElementSibling; | |
| if (this.checked) { | |
| text.classList.add('line-through', 'text-gray-500'); | |
| } else { | |
| text.classList.remove('line-through', 'text-gray-500'); | |
| } | |
| }); | |
| }); | |
| // Existing delete buttons | |
| document.querySelectorAll('.delete-reminder').forEach(button => { | |
| button.addEventListener('click', function() { | |
| this.closest('.reminder-item').remove(); | |
| }); | |
| }); | |
| // Make everything bigger if requested | |
| const textSizeButtons = document.querySelectorAll('footer button'); | |
| textSizeButtons[2].addEventListener('click', function() { | |
| document.body.classList.toggle('text-2xl'); | |
| alert('Text size increased. In a real app, this would make all text larger for better visibility.'); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |