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