Hugging Face's logo

Spaces:
yhzion
/
macos
Running

App Files Community
macos / index.html
yhzion's picture
yhzion
Add 3 files
8e84f86 verified
Raw
History Blame Contribute Delete
15.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>macOS Desktop</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>
 @keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
.desktop-icon {
 transition: all 0.2s ease;
 }
.desktop-icon:hover {
 background-color: rgba(255, 255, 255, 0.2);
 border-radius: 8px;
 }
.dock-item {
 transition: all 0.2s ease;
 }
.dock-item:hover {
 transform: scale(1.2);
 margin: 0 15px;
 }
.menu-bar {
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 }
.window {
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
 border-radius: 10px;
 overflow: hidden;
 }
.window-header {
 cursor: move;
 }
.traffic-light {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 margin-right: 8px;
 }
.folder-icon {
 background: linear-gradient(135deg, #4A90E2 0%, #3B7FD9 100%);
 }
.wallpaper {
 background-image: url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
 background-size: cover;
 background-position: center;
 }
 </style>
</head>
<body class="wallpaper h-screen w-screen overflow-hidden select-none">
 <!-- Menu Bar -->
 <div class="menu-bar fixed top-0 left-0 right-0 h-8 bg-gray-800 bg-opacity-30 text-white text-sm flex items-center px-4 z-50">
 <div class="flex items-center space-x-4">
 <div class="font-semibold">Finder</div>
 <div>File</div>
 <div>Edit</div>
 <div>View</div>
 <div>Go</div>
 <div>Window</div>
 <div>Help</div>
 </div>
 <div class="ml-auto flex items-center space-x-4">
 <div id="time" class="text-xs">10:15 AM</div>
 <div id="date" class="text-xs">Mon, Jun 12</div>
 <div class="w-4 h-4">
 <i class="fas fa-wifi"></i>
 </div>
 <div class="w-4 h-4">
 <i class="fas fa-battery-three-quarters"></i>
 </div>
 </div>
 </div>
<!-- Desktop Icons -->
 <div class="pt-10 pl-6 grid grid-cols-1 gap-6 w-32">
 <div class="desktop-icon flex flex-col items-center text-white text-center p-2 cursor-pointer">
 <div class="folder-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-1">
 <i class="fas fa-folder text-white text-3xl"></i>
 </div>
 <span class="text-xs mt-1 text-shadow">Documents</span>
 </div>
<div class="desktop-icon flex flex-col items-center text-white text-center p-2 cursor-pointer">
 <div class="folder-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-1">
 <i class="fas fa-desktop text-white text-3xl"></i>
 </div>
 <span class="text-xs mt-1 text-shadow">Applications</span>
 </div>
<div class="desktop-icon flex flex-col items-center text-white text-center p-2 cursor-pointer">
 <div class="folder-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-1">
 <i class="fas fa-download text-white text-3xl"></i>
 </div>
 <span class="text-xs mt-1 text-shadow">Downloads</span>
 </div>
<div class="desktop-icon flex flex-col items-center text-white text-center p-2 cursor-pointer">
 <div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-1 bg-gradient-to-br from-purple-500 to-pink-500">
 <i class="fas fa-music text-white text-3xl"></i>
 </div>
 <span class="text-xs mt-1 text-shadow">Music</span>
 </div>
 </div>
<!-- Finder Window -->
 <div id="finder-window" class="window fixed top-16 left-16 w-3/4 h-3/4 bg-gray-100 bg-opacity-80 backdrop-filter backdrop-blur-lg" style="display: none;">
 <div class="window-header bg-gray-200 bg-opacity-70 h-8 flex items-center px-3">
 <div class="flex">
 <div class="traffic-light bg-red-500"></div>
 <div class="traffic-light bg-yellow-500"></div>
 <div class="traffic-light bg-green-500"></div>
 </div>
 <div class="ml-2 text-sm text-gray-700">Finder</div>
 </div>
 <div class="flex h-full">
 <div class="w-48 bg-gray-100 bg-opacity-70 border-r border-gray-300 p-2">
 <div class="p-2 text-sm font-medium text-gray-700">Favorites</div>
 <div class="p-2 text-sm text-gray-700 hover:bg-gray-200 rounded cursor-pointer flex items-center">
 <i class="fas fa-desktop mr-2 text-gray-500"></i> Desktop
 </div>
 <div class="p-2 text-sm text-gray-700 hover:bg-gray-200 rounded cursor-pointer flex items-center">
 <i class="fas fa-download mr-2 text-gray-500"></i> Downloads
 </div>
 <div class="p-2 text-sm text-gray-700 hover:bg-gray-200 rounded cursor-pointer flex items-center">
 <i class="fas fa-folder mr-2 text-gray-500"></i> Documents
 </div>
 <div class="p-2 text-sm text-gray-700 hover:bg-gray-200 rounded cursor-pointer flex items-center">
 <i class="fas fa-music mr-2 text-gray-500"></i> Music
 </div>
 </div>
 <div class="flex-1 p-4 overflow-auto">
 <div class="grid grid-cols-5 gap-4">
 <!-- Folder items would go here -->
 </div>
 </div>
 </div>
 </div>
<!-- Dock -->
 <div class="dock fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl px-4 py-2 flex items-end">
 <div class="dock-item flex flex-col items-center mx-2 cursor-pointer" onclick="openFinder()">
 <div class="w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center">
 <i class="fas fa-face-smile text-white text-2xl"></i>
 </div>
 </div>
 <div class="dock-item flex flex-col items-center mx-2 cursor-pointer">
 <div class="w-12 h-12 bg-blue-400 rounded-xl flex items-center justify-center">
 <i class="fas fa-safari text-white text-2xl"></i>
 </div>
 </div>
 <div class="dock-item flex flex-col items-center mx-2 cursor-pointer">
 <div class="w-12 h-12 bg-green-500 rounded-xl flex items-center justify-center">
 <i class="fas fa-messages text-white text-2xl"></i>
 </div>
 </div>
 <div class="dock-item flex flex-col items-center mx-2 cursor-pointer">
 <div class="w-12 h-12 bg-purple-500 rounded-xl flex items-center justify-center">
 <i class="fas fa-music text-white text-2xl"></i>
 </div>
 </div>
 <div class="dock-item flex flex-col items-center mx-2 cursor-pointer">
 <div class="w-12 h-12 bg-red-500 rounded-xl flex items-center justify-center">
 <i class="fas fa-photo-film text-white text-2xl"></i>
 </div>
 </div>
 <div class="dock-item flex flex-col items-center mx-2 cursor-pointer">
 <div class="w-12 h-12 bg-yellow-500 rounded-xl flex items-center justify-center">
 <i class="fas fa-envelope text-white text-2xl"></i>
 </div>
 </div>
 <div class="dock-item flex flex-col items-center mx-2 cursor-pointer">
 <div class="w-12 h-12 bg-gray-600 rounded-xl flex items-center justify-center">
 <i class="fas fa-terminal text-white text-2xl"></i>
 </div>
 </div>
 <div class="dock-separator h-12 w-px bg-gray-500 mx-2"></div>
 <div class="dock-item flex flex-col items-center mx-2 cursor-pointer">
 <div class="w-12 h-12 bg-gray-700 rounded-xl flex items-center justify-center">
 <i class="fas fa-trash text-white text-2xl"></i>
 </div>
 </div>
 </div>
<!-- Launchpad (hidden by default) -->
 <div id="launchpad" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col items-center justify-center" style="display: none;">
 <div class="grid grid-cols-7 gap-8 p-8 max-w-4xl">
 <!-- App icons -->
 <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center cursor-pointer transform hover:scale-110 transition">
 <i class="fas fa-safari text-white text-2xl"></i>
 </div>
 <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center cursor-pointer transform hover:scale-110 transition">
 <i class="fas fa-messages text-white text-2xl"></i>
 </div>
 <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center cursor-pointer transform hover:scale-110 transition">
 <i class="fas fa-music text-white text-2xl"></i>
 </div>
 <div class="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center cursor-pointer transform hover:scale-110 transition">
 <i class="fas fa-photo-film text-white text-2xl"></i>
 </div>
 <div class="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center cursor-pointer transform hover:scale-110 transition">
 <i class="fas fa-envelope text-white text-2xl"></i>
 </div>
 <div class="w-16 h-16 bg-gray-600 rounded-2xl flex items-center justify-center cursor-pointer transform hover:scale-110 transition">
 <i class="fas fa-terminal text-white text-2xl"></i>
 </div>
 <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center cursor-pointer transform hover:scale-110 transition">
 <i class="fas fa-calendar text-white text-2xl"></i>
 </div>
 <!-- More apps... -->
 </div>
 <div class="text-white text-sm mt-8">
 Press Esc to exit
 </div>
 </div>
<script>
 // Update time and date
 function updateTime() {
 const now = new Date();
 const timeElement = document.getElementById('time');
 const dateElement = document.getElementById('date');
// Format time (e.g., 10:15 AM)
 let hours = now.getHours();
 const ampm = hours >= 12 ? 'PM' : 'AM';
 hours = hours % 12;
 hours = hours ? hours : 12; // the hour '0' should be '12'
 const minutes = now.getMinutes().toString().padStart(2, '0');
 timeElement.textContent = `${hours}:${minutes} ${ampm}`;
// Format date (e.g., Mon, Jun 12)
 const options = { weekday: 'short', month: 'short', day: 'numeric' };
 dateElement.textContent = now.toLocaleDateString('en-US', options);
 }
// Update time immediately and then every minute
 updateTime();
 setInterval(updateTime, 60000);
// Open Finder window
 function openFinder() {
 document.getElementById('finder-window').style.display = 'block';
 }
// Close Finder window
 function closeFinder() {
 document.getElementById('finder-window').style.display = 'none';
 }
// Toggle Launchpad
 document.addEventListener('keydown', function(e) {
 if (e.key === 'Escape') {
 document.getElementById('launchpad').style.display = 'none';
 }
 });
// Make windows draggable
 function makeDraggable(element) {
 let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 const header = element.querySelector('.window-header');
header.onmousedown = dragMouseDown;
function dragMouseDown(e) {
 e = e || window.event;
 e.preventDefault();
 // get the mouse cursor position at startup:
 pos3 = e.clientX;
 pos4 = e.clientY;
 document.onmouseup = closeDragElement;
 // call a function whenever the cursor moves:
 document.onmousemove = elementDrag;
 }
function elementDrag(e) {
 e = e || window.event;
 e.preventDefault();
 // calculate the new cursor position:
 pos1 = pos3 - e.clientX;
 pos2 = pos4 - e.clientY;
 pos3 = e.clientX;
 pos4 = e.clientY;
 // set the element's new position:
 element.style.top = (element.offsetTop - pos2) + "px";
 element.style.left = (element.offsetLeft - pos1) + "px";
 }
function closeDragElement() {
 // stop moving when mouse button is released:
 document.onmouseup = null;
 document.onmousemove = null;
 }
 }
// Initialize draggable windows
 document.addEventListener('DOMContentLoaded', function() {
 const windows = document.querySelectorAll('.window');
 windows.forEach(window => {
 makeDraggable(window);
 });
 });
// Simulate boot sequence
 setTimeout(() => {
 document.body.style.animation = 'fadeIn 1.5s ease-in-out';
 setTimeout(() => {
 document.getElementById('finder-window').style.display = 'block';
 }, 1000);
 }, 500);
 </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=yhzion/macos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>