Spaces:

dhishooooom
/

clipstack

Running

File size: 21,343 Bytes

<!DOCTYPE html>
<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>