Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HomeControl iOS</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background-color: #f2f2f7; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .ios-card { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| } | |
| .status-bar { | |
| height: 44px; | |
| } | |
| .home-indicator { | |
| width: 134px; | |
| height: 5px; | |
| border-radius: 100px; | |
| background-color: black; | |
| } | |
| .device-card { | |
| transition: all 0.3s ease; | |
| } | |
| .device-card:active { | |
| transform: scale(0.95); | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: white; | |
| cursor: pointer; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col items-center justify-between pb-8 max-w-md mx-auto overflow-hidden"> | |
| <!-- iOS Status Bar --> | |
| <div class="status-bar w-full px-6 flex items-center justify-between text-black"> | |
| <span class="font-semibold">9:41</span> | |
| <div class="flex space-x-1"> | |
| <i data-feather="signal" class="w-4 h-4"></i> | |
| <i data-feather="wifi" class="w-4 h-4"></i> | |
| <i data-feather="battery" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <div class="w-full px-6 py-4"> | |
| <h1 class="text-3xl font-bold text-gray-900">Home</h1> | |
| <p class="text-gray-500 mt-1">Good afternoon</p> | |
| </div> | |
| <!-- Favorite Devices --> | |
| <div class="w-full px-6"> | |
| <h2 class="text-xl font-semibold text-gray-900 mb-4">Favorites</h2> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <!-- Living Room Lights --> | |
| <div class="ios-card device-card rounded-2xl p-4 shadow-sm border border-gray-100 flex flex-col items-center justify-center" onclick="toggleDevice('living-room-lights')"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-3"> | |
| <i data-feather="sun" class="text-blue-500 w-6 h-6"></i> | |
| </div> | |
| <span class="font-medium text-gray-900">Living Room</span> | |
| <span class="text-xs text-gray-500">Lights</span> | |
| <div class="mt-3 w-full"> | |
| <input type="range" min="0" max="100" value="75" class="slider w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| </div> | |
| </div> | |
| <!-- Thermostat --> | |
| <div class="ios-card device-card rounded-2xl p-4 shadow-sm border border-gray-100 flex flex-col items-center justify-center" onclick="toggleDevice('thermostat')"> | |
| <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-3"> | |
| <i data-feather="thermometer" class="text-red-500 w-6 h-6"></i> | |
| </div> | |
| <span class="font-medium text-gray-900">Home</span> | |
| <span class="text-xs text-gray-500">Thermostat</span> | |
| <div class="mt-3 flex items-center"> | |
| <span class="text-xl font-bold text-gray-900">22°</span> | |
| <span class="text-gray-400 ml-1">C</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- All Devices --> | |
| <div class="w-full px-6 mt-8"> | |
| <h2 class="text-xl font-semibold text-gray-900 mb-4">All Devices</h2> | |
| <div class="space-y-3"> | |
| <!-- Kitchen Lights --> | |
| <div class="ios-card device-card rounded-xl p-4 shadow-sm border border-gray-100 flex items-center justify-between" onclick="toggleDevice('kitchen-lights')"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="sun" class="text-yellow-500 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-900 block">Kitchen</span> | |
| <span class="text-xs text-gray-500">Lights • On</span> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="w-12 h-6 flex items-center bg-gray-300 rounded-full p-1 toggle-switch" id="kitchen-lights"> | |
| <div class="toggle-circle bg-white w-5 h-5 rounded-full shadow-md transform translate-x-0"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bedroom Lights --> | |
| <div class="ios-card device-card rounded-xl p-4 shadow-sm border border-gray-100 flex items-center justify-between" onclick="toggleDevice('bedroom-lights')"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="sun" class="text-purple-500 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-900 block">Bedroom</span> | |
| <span class="text-xs text-gray-500">Lights • Off</span> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="w-12 h-6 flex items-center bg-gray-300 rounded-full p-1 toggle-switch" id="bedroom-lights"> | |
| <div class="toggle-circle bg-white w-5 h-5 rounded-full shadow-md transform translate-x-6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Front Door Lock --> | |
| <div class="ios-card device-card rounded-xl p-4 shadow-sm border border-gray-100 flex items-center justify-between" onclick="toggleDevice('front-door')"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="lock" class="text-green-500 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-900 block">Front Door</span> | |
| <span class="text-xs text-gray-500">Lock • Locked</span> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="w-12 h-6 flex items-center bg-blue-500 rounded-full p-1 toggle-switch" id="front-door"> | |
| <div class="toggle-circle bg-white w-5 h-5 rounded-full shadow-md transform translate-x-6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Security Camera --> | |
| <div class="ios-card device-card rounded-xl p-4 shadow-sm border border-gray-100 flex items-center justify-between" onclick="toggleDevice('camera')"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3"> | |
| <i data-feather="video" class="text-indigo-500 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <span class="font-medium text-gray-900 block">Security</span> | |
| <span class="text-xs text-gray-500">Camera • Active</span> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="w-12 h-6 flex items-center bg-blue-500 rounded-full p-1 toggle-switch" id="camera"> | |
| <div class="toggle-circle bg-white w-5 h-5 rounded-full shadow-md transform translate-x-6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab Bar --> | |
| <div class="ios-card w-full max-w-md fixed bottom-0 left-0 right-0 mx-auto h-16 bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg border-t border-gray-100 flex items-center justify-around"> | |
| <button class="flex flex-col items-center justify-center text-blue-500"> | |
| <i data-feather="home" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center text-gray-500"> | |
| <i data-feather="calendar" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Scenes</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center text-gray-500"> | |
| <i data-feather="settings" class="w-6 h-6"></i> | |
| <span class="text-xs mt-1">Settings</span> | |
| </button> | |
| </div> | |
| <!-- iOS Home Indicator --> | |
| <div class="home-indicator mt-4"></div> | |
| <script> | |
| feather.replace(); | |
| function toggleDevice(deviceId) { | |
| const device = document.getElementById(deviceId); | |
| const circle = device.querySelector('.toggle-circle'); | |
| const isOn = circle.classList.contains('translate-x-6'); | |
| if (isOn) { | |
| circle.classList.remove('translate-x-6'); | |
| circle.classList.add('translate-x-0'); | |
| device.classList.remove('bg-blue-500'); | |
| device.classList.add('bg-gray-300'); | |
| } else { | |
| circle.classList.remove('translate-x-0'); | |
| circle.classList.add('translate-x-6'); | |
| device.classList.remove('bg-gray-300'); | |
| device.classList.add('bg-blue-500'); | |
| } | |
| // Update status text if needed | |
| const statusElement = document.querySelector(`[onclick="toggleDevice('${deviceId}')"] .text-gray-500`); | |
| if (statusElement) { | |
| const currentText = statusElement.textContent; | |
| if (currentText.includes('On')) { | |
| statusElement.textContent = currentText.replace('On', 'Off'); | |
| } else if (currentText.includes('Off')) { | |
| statusElement.textContent = currentText.replace('Off', 'On'); | |
| } else if (currentText.includes('Locked')) { | |
| statusElement.textContent = currentText.replace('Locked', 'Unlocked'); | |
| } else if (currentText.includes('Unlocked')) { | |
| statusElement.textContent = currentText.replace('Unlocked', 'Locked'); | |
| } else if (currentText.includes('Active')) { | |
| statusElement.textContent = currentText.replace('Active', 'Inactive'); | |
| } else if (currentText.includes('Inactive')) { | |
| statusElement.textContent = currentText.replace('Inactive', 'Active'); | |
| } | |
| } | |
| } | |
| // Add ripple effect to device cards | |
| document.querySelectorAll('.device-card').forEach(card => { | |
| card.addEventListener('click', function(e) { | |
| const rect = this.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| const ripple = document.createElement('span'); | |
| ripple.className = 'absolute bg-black bg-opacity-10 rounded-full -translate-x-1/2 -translate-y-1/2'; | |
| ripple.style.left = `${x}px`; | |
| ripple.style.top = `${y}px`; | |
| ripple.style.width = '0'; | |
| ripple.style.height = '0'; | |
| ripple.style.opacity = '0.5'; | |
| this.appendChild(ripple); | |
| const size = Math.max(rect.width, rect.height); | |
| ripple.style.width = `${size}px`; | |
| ripple.style.height = `${size}px`; | |
| ripple.style.opacity = '0'; | |
| setTimeout(() => { | |
| ripple.remove(); | |
| }, 600); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |