86 lines
4.0 KiB
HTML
86 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Phone UI</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
|
|
|
|
<!-- Phone Container -->
|
|
<div id="phone" class="~hidden w-72 h-[600px] rounded-3xl shadow-lg flex flex-col overflow-hidden">
|
|
|
|
<!-- Top Bar -->
|
|
<div id="topbar" class="h-12 bg-gray-200 flex items-center justify-between px-4 relative z-20">
|
|
<span id="time" class="text-xs text-gray-700">9:41</span>
|
|
<div class="flex space-x-1">
|
|
<span class="w-3 h-3 bg-gray-700 rounded-full"></span>
|
|
<span class="w-3 h-3 bg-gray-700 rounded-full"></span>
|
|
<span class="w-3 h-3 bg-gray-700 rounded-full"></span>
|
|
</div>
|
|
<button class="app flex flex-col items-center justify-center bg-gray-100/70 rounded-xl p-2 hover:bg-blue-100/80 transition transform hover:scale-105">
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Wallpaper -->
|
|
<div id="wallpaper" class="absolute inset-0 bg-cover bg-center"></div>
|
|
|
|
<!-- Homescreen App Grid -->
|
|
<div class="flex-1 p-3 overflow-y-auto relative z-10">
|
|
<div class="grid grid-cols-4 gap-3">
|
|
<button class="app text-white flex flex-col items-center justify-center rounded-xl p-2 hover:bg-blue-100 transition transform hover:scale-105">
|
|
<img src="img/apps/messages.png" alt="Messages" class="w-10 h-10 mb-1"/>
|
|
<span class="text-xs">Messages</span>
|
|
</button>
|
|
<button class="app text-white flex flex-col items-center justify-center rounded-xl p-2 hover:bg-green-100 transition transform hover:scale-105">
|
|
<img src="img/apps/camera.png" alt="Camera" class="w-10 h-10 mb-1"/>
|
|
<span class="text-xs">Camera</span>
|
|
</button>
|
|
<button class="app text-white flex flex-col items-center justify-center rounded-xl p-2 hover:bg-yellow-100 transition transform hover:scale-105">
|
|
<img src="img/apps/photos.png" alt="Photos" class="w-10 h-10 mb-1"/>
|
|
<span class="text-xs">Photos</span>
|
|
</button>
|
|
<button class="app text-white flex flex-col items-center justify-center rounded-xl p-2 hover:bg-purple-100 transition transform hover:scale-105">
|
|
<img src="img/apps/settings.png" alt="Settings" class="w-10 h-10 mb-1"/>
|
|
<span class="text-xs">Settings</span>
|
|
</button>
|
|
<button class="app text-white flex flex-col items-center justify-center rounded-xl p-2 hover:bg-red-100 transition transform hover:scale-105">
|
|
<img src="img/apps/mail.png" alt="Mail" class="w-10 h-10 mb-1"/>
|
|
<span class="text-xs">Mail</span>
|
|
</button>
|
|
<button class="app text-white flex flex-col items-center justify-center rounded-xl p-2 hover:bg-pink-100 transition transform hover:scale-105">
|
|
<img src="img/apps/music.png" alt="Music" class="w-10 h-10 mb-1"/>
|
|
<span class="text-xs">Music</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dock -->
|
|
<div class="h-20 bg-gray-200 flex justify-around items-center p-2 rounded-t-3xl relative z-10">
|
|
<button class="flex flex-col items-center text-gray-600 hover:text-blue-500">
|
|
<img src="img/apps/phone.png" class="w-8 h-8 mb-1"/>
|
|
<span class="text-xs">Phone</span>
|
|
</button>
|
|
<button class="flex flex-col items-center text-gray-600 hover:text-blue-500">
|
|
<img src="img/apps/messages.png" class="w-8 h-8 mb-1"/>
|
|
<span class="text-xs">Messages</span>
|
|
</button>
|
|
<button class="flex flex-col items-center text-gray-600 hover:text-blue-500">
|
|
<img src="img/apps/browser.png" class="w-8 h-8 mb-1"/>
|
|
<span class="text-xs">Browser</span>
|
|
</button>
|
|
<button class="flex flex-col items-center text-gray-600 hover:text-blue-500">
|
|
<img src="img/apps/settings.png" class="w-8 h-8 mb-1"/>
|
|
<span class="text-xs">Settings</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|