| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>My Device App</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> |
| |
| ::-webkit-scrollbar { |
| width: 6px; |
| } |
| ::-webkit-scrollbar-track { |
| background: #f1f1f1; |
| } |
| ::-webkit-scrollbar-thumb { |
| background: #888; |
| border-radius: 3px; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: #555; |
| } |
| |
| |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| |
| .charging { |
| animation: pulse 1.5s infinite; |
| } |
| |
| |
| .switch { |
| position: relative; |
| display: inline-block; |
| width: 52px; |
| height: 26px; |
| } |
| |
| .switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| |
| .slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #ccc; |
| transition: .4s; |
| border-radius: 34px; |
| } |
| |
| .slider:before { |
| position: absolute; |
| content: ""; |
| height: 20px; |
| width: 20px; |
| left: 3px; |
| bottom: 3px; |
| background-color: white; |
| transition: .4s; |
| border-radius: 50%; |
| } |
| |
| input:checked + .slider { |
| background-color: #3b82f6; |
| } |
| |
| input:checked + .slider:before { |
| transform: translateX(26px); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden flex flex-col"> |
| |
| <header class="bg-blue-600 text-white p-4 shadow-md"> |
| <div class="flex items-center justify-between"> |
| <button id="backBtn" class="text-white opacity-0"> |
| <i class="fas fa-arrow-left"></i> |
| </button> |
| <h1 class="text-xl font-bold">My Device</h1> |
| <button id="settingsBtn" class="text-white"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| </header> |
| |
| |
| <main class="flex-1 overflow-y-auto"> |
| |
| <div id="overviewView" class="p-4"> |
| <div class="bg-white rounded-xl shadow-md p-6 mb-4"> |
| <div class="flex items-center justify-between mb-6"> |
| <div> |
| <h2 class="text-xl font-semibold">Device Information</h2> |
| <p class="text-gray-500 text-sm">Your device details</p> |
| </div> |
| <div class="bg-blue-100 p-2 rounded-full"> |
| <i class="fas fa-mobile-alt text-blue-600 text-xl"></i> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-microchip text-gray-500 mr-3"></i> |
| <span>Model</span> |
| </div> |
| <span id="deviceModel" class="font-medium">Loading...</span> |
| </div> |
| |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-code-branch text-gray-500 mr-3"></i> |
| <span>OS Version</span> |
| </div> |
| <span id="osVersion" class="font-medium">Loading...</span> |
| </div> |
| |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-wifi text-gray-500 mr-3"></i> |
| <span>Network</span> |
| </div> |
| <span id="networkType" class="font-medium">Loading...</span> |
| </div> |
| |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-memory text-gray-500 mr-3"></i> |
| <span>Memory</span> |
| </div> |
| <span id="deviceMemory" class="font-medium">Loading...</span> |
| </div> |
| |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-battery-three-quarters text-gray-500 mr-3"></i> |
| <span>Battery</span> |
| </div> |
| <div class="flex items-center"> |
| <span id="batteryLevel" class="font-medium mr-2">Loading...</span> |
| <div id="batteryIcon" class="relative w-6 h-4 border border-gray-400 rounded-sm"> |
| <div id="batteryFill" class="absolute top-0 left-0 h-full bg-green-500" style="width: 50%;"></div> |
| <div class="absolute top-1/2 -right-1 w-1 h-2 bg-gray-400 transform -translate-y-1/2"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-4"> |
| <h2 class="text-lg font-semibold mb-4">Quick Actions</h2> |
| <div class="grid grid-cols-2 gap-4"> |
| <button class="bg-blue-100 text-blue-600 p-4 rounded-lg flex flex-col items-center"> |
| <i class="fas fa-wifi text-xl mb-2"></i> |
| <span>Wi-Fi</span> |
| </button> |
| <button class="bg-purple-100 text-purple-600 p-4 rounded-lg flex flex-col items-center"> |
| <i class="fas fa-bluetooth-b text-xl mb-2"></i> |
| <span>Bluetooth</span> |
| </button> |
| <button class="bg-green-100 text-green-600 p-4 rounded-lg flex flex-col items-center"> |
| <i class="fas fa-sun text-xl mb-2"></i> |
| <span>Display</span> |
| </button> |
| <button class="bg-yellow-100 text-yellow-600 p-4 rounded-lg flex flex-col items-center"> |
| <i class="fas fa-volume-up text-xl mb-2"></i> |
| <span>Sound</span> |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-lg font-semibold mb-4">Storage</h2> |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mb-2"> |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> |
| </div> |
| <div class="flex justify-between text-sm text-gray-600"> |
| <span>45% used</span> |
| <span>32 GB of 64 GB</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="settingsView" class="p-4 hidden"> |
| <div class="bg-white rounded-xl shadow-md p-6 mb-4"> |
| <h2 class="text-lg font-semibold mb-4">Device Settings</h2> |
| |
| <div class="space-y-4"> |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-moon text-gray-500 mr-3"></i> |
| <span>Dark Mode</span> |
| </div> |
| <label class="switch"> |
| <input type="checkbox" id="darkModeToggle"> |
| <span class="slider"></span> |
| </label> |
| </div> |
| |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-bell text-gray-500 mr-3"></i> |
| <span>Notifications</span> |
| </div> |
| <label class="switch"> |
| <input type="checkbox" id="notificationsToggle" checked> |
| <span class="slider"></span> |
| </label> |
| </div> |
| |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-lock text-gray-500 mr-3"></i> |
| <span>Security</span> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-language text-gray-500 mr-3"></i> |
| <span>Language</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="mr-2">English</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-info-circle text-gray-500 mr-3"></i> |
| <span>About Device</span> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6 mb-4"> |
| <h2 class="text-lg font-semibold mb-4">System</h2> |
| |
| <div class="space-y-4"> |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-sync-alt text-gray-500 mr-3"></i> |
| <span>System Update</span> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-green-500 text-sm mr-2">Up to date</span> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| |
| <div class="flex justify-between items-center border-b pb-3"> |
| <div class="flex items-center"> |
| <i class="fas fa-trash-alt text-gray-500 mr-3"></i> |
| <span>Storage Cleanup</span> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-power-off text-gray-500 mr-3"></i> |
| <span>Restart Device</span> |
| </div> |
| <i class="fas fa-chevron-right text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| |
| <button id="resetSettingsBtn" class="w-full bg-red-50 text-red-600 py-3 rounded-lg font-medium"> |
| Reset All Settings |
| </button> |
| </div> |
| </main> |
| |
| |
| <nav class="bg-white border-t flex justify-around p-2"> |
| <button class="p-3 text-blue-600"> |
| <i class="fas fa-home text-xl"></i> |
| </button> |
| <button class="p-3 text-gray-500"> |
| <i class="fas fa-chart-bar text-xl"></i> |
| </button> |
| <button class="p-3 text-gray-500"> |
| <i class="fas fa-tools text-xl"></i> |
| </button> |
| <button class="p-3 text-gray-500"> |
| <i class="fas fa-user text-xl"></i> |
| </button> |
| </nav> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const overviewView = document.getElementById('overviewView'); |
| const settingsView = document.getElementById('settingsView'); |
| const settingsBtn = document.getElementById('settingsBtn'); |
| const backBtn = document.getElementById('backBtn'); |
| const darkModeToggle = document.getElementById('darkModeToggle'); |
| const resetSettingsBtn = document.getElementById('resetSettingsBtn'); |
| |
| |
| const deviceModel = document.getElementById('deviceModel'); |
| const osVersion = document.getElementById('osVersion'); |
| const networkType = document.getElementById('networkType'); |
| const deviceMemory = document.getElementById('deviceMemory'); |
| const batteryLevel = document.getElementById('batteryLevel'); |
| const batteryFill = document.getElementById('batteryFill'); |
| const batteryIcon = document.getElementById('batteryIcon'); |
| |
| |
| function loadDeviceInfo() { |
| |
| deviceModel.textContent = navigator.userAgent.match(/\((.*?)\)/)[1] || "Unknown Device"; |
| osVersion.textContent = navigator.platform || "Unknown OS"; |
| |
| |
| const networks = ["Wi-Fi", "4G LTE", "5G", "3G"]; |
| networkType.textContent = networks[Math.floor(Math.random() * networks.length)]; |
| |
| |
| deviceMemory.textContent = "4 GB RAM"; |
| |
| |
| updateBattery(); |
| } |
| |
| |
| function updateBattery() { |
| const level = Math.floor(Math.random() * 100); |
| batteryLevel.textContent = `${level}%`; |
| batteryFill.style.width = `${level}%`; |
| |
| |
| if (level > 70) { |
| batteryFill.className = "absolute top-0 left-0 h-full bg-green-500"; |
| } else if (level > 30) { |
| batteryFill.className = "absolute top-0 left-0 h-full bg-yellow-500"; |
| } else { |
| batteryFill.className = "absolute top-0 left-0 h-full bg-red-500"; |
| } |
| |
| |
| if (Math.random() > 0.7) { |
| batteryIcon.classList.add("charging"); |
| batteryLevel.textContent += " (Charging)"; |
| } else { |
| batteryIcon.classList.remove("charging"); |
| } |
| |
| |
| setTimeout(updateBattery, 10000); |
| } |
| |
| |
| settingsBtn.addEventListener('click', function() { |
| overviewView.classList.add('hidden'); |
| settingsView.classList.remove('hidden'); |
| backBtn.classList.remove('opacity-0'); |
| document.querySelector('header h1').textContent = "Settings"; |
| }); |
| |
| backBtn.addEventListener('click', function() { |
| settingsView.classList.add('hidden'); |
| overviewView.classList.remove('hidden'); |
| backBtn.classList.add('opacity-0'); |
| document.querySelector('header h1').textContent = "My Device"; |
| }); |
| |
| |
| darkModeToggle.addEventListener('change', function() { |
| if (this.checked) { |
| document.documentElement.classList.add('dark'); |
| document.body.classList.add('bg-gray-900'); |
| document.body.classList.remove('bg-gray-100'); |
| } else { |
| document.documentElement.classList.remove('dark'); |
| document.body.classList.remove('bg-gray-900'); |
| document.body.classList.add('bg-gray-100'); |
| } |
| }); |
| |
| |
| resetSettingsBtn.addEventListener('click', function() { |
| if (confirm("Are you sure you want to reset all settings to default?")) { |
| darkModeToggle.checked = false; |
| document.getElementById('notificationsToggle').checked = true; |
| alert("All settings have been reset to default values."); |
| } |
| }); |
| |
| |
| loadDeviceInfo(); |
| |
| |
| document.querySelectorAll('button').forEach(button => { |
| button.addEventListener('mousedown', function() { |
| this.classList.add('scale-95', 'opacity-80'); |
| }); |
| |
| button.addEventListener('mouseup', function() { |
| this.classList.remove('scale-95', 'opacity-80'); |
| }); |
| |
| button.addEventListener('mouseleave', function() { |
| this.classList.remove('scale-95', 'opacity-80'); |
| }); |
| }); |
| }); |
| </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=Shahid72/my" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
