Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WinUI</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| user-select: none; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #0078d7; | |
| background-image: url('https://4kwallpapers.com/images/wallpapers/windows-11-dark-mode-stock-official-3840x2400-5630.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 100vh; | |
| overflow: hidden; | |
| color: white; | |
| } | |
| .desktop { | |
| height: calc(100vh - 40px); | |
| padding: 10px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, 80px); | |
| grid-auto-rows: min-content; | |
| gap: 20px; | |
| align-content: start; | |
| } | |
| .desktop-icon { | |
| width: 80px; | |
| text-align: center; | |
| cursor: pointer; | |
| padding: 5px; | |
| border-radius: 5px; | |
| } | |
| .desktop-icon:hover { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .desktop-icon img { | |
| width: 40px; | |
| height: 40px; | |
| margin-bottom: 5px; | |
| } | |
| .desktop-icon span { | |
| font-size: 12px; | |
| display: block; | |
| text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); | |
| word-break: break-word; | |
| } | |
| .taskbar { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 40px; | |
| background-color: rgba(32, 32, 32, 0.8); | |
| backdrop-filter: blur(10px); | |
| display: flex; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| .start-button { | |
| height: 100%; | |
| padding: 0 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .start-button:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .taskbar-icons { | |
| display: flex; | |
| height: 100%; | |
| align-items: center; | |
| gap: 2px; | |
| margin-left: 10px; | |
| } | |
| .taskbar-icon { | |
| width: 24px; | |
| height: 24px; | |
| padding: 8px; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| } | |
| .taskbar-icon:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .taskbar-icon img { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .clock { | |
| margin-left: auto; | |
| padding: 0 15px; | |
| font-size: 12px; | |
| } | |
| .start-menu { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 0; | |
| width: 500px; | |
| height: 600px; | |
| background-color: rgba(32, 32, 32, 0.9); | |
| backdrop-filter: blur(20px); | |
| border-radius: 8px 8px 0 0; | |
| display: none; | |
| z-index: 1001; | |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | |
| overflow: hidden; | |
| } | |
| .start-menu-header { | |
| padding: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .start-menu-header input { | |
| flex-grow: 1; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: none; | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| color: white; | |
| outline: none; | |
| } | |
| .start-menu-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| height: calc(100% - 60px); | |
| } | |
| .pinned-apps, .recommended { | |
| padding: 10px; | |
| overflow-y: auto; | |
| } | |
| .pinned-apps h3, .recommended h3 { | |
| margin-bottom: 15px; | |
| font-weight: normal; | |
| font-size: 14px; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .app-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| } | |
| .app { | |
| padding: 10px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .app:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .app img { | |
| width: 30px; | |
| height: 30px; | |
| margin-bottom: 5px; | |
| } | |
| .app span { | |
| font-size: 12px; | |
| } | |
| .user-profile { | |
| margin-top: auto; | |
| padding: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| cursor: pointer; | |
| } | |
| .user-profile:hover { | |
| background-color: rgba(0, 0, 0, 0.3); | |
| } | |
| .user-profile img { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| } | |
| .window { | |
| position: absolute; | |
| min-width: 300px; | |
| min-height: 200px; | |
| background-color: rgba(32, 32, 32, 0.9); | |
| backdrop-filter: blur(20px); | |
| border-radius: 8px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); | |
| display: none; | |
| flex-direction: column; | |
| overflow: hidden; | |
| z-index: 10; | |
| } | |
| .window.active { | |
| z-index: 100; | |
| display: flex; | |
| } | |
| .window-header { | |
| padding: 8px 10px; | |
| display: flex; | |
| align-items: center; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| cursor: move; | |
| } | |
| .window-icon { | |
| width: 16px; | |
| height: 16px; | |
| margin-right: 8px; | |
| } | |
| .window-title { | |
| flex-grow: 1; | |
| font-size: 12px; | |
| } | |
| .window-controls { | |
| display: flex; | |
| } | |
| .window-btn { | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| background: none; | |
| border: none; | |
| color: white; | |
| } | |
| .window-btn:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .window-btn.close:hover { | |
| background-color: #e81123; | |
| } | |
| .window-content { | |
| flex-grow: 1; | |
| padding: 15px; | |
| overflow: auto; | |
| } | |
| .window-footer { | |
| padding: 8px; | |
| background-color: rgba(0, 0, 0, 0.1); | |
| font-size: 12px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| /* Explorer window specific */ | |
| .explorer-nav { | |
| display: flex; | |
| padding: 5px 10px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .explorer-nav-btn { | |
| background: none; | |
| border: none; | |
| color: white; | |
| padding: 5px 10px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| border-radius: 3px; | |
| } | |
| .explorer-nav-btn:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .explorer-path { | |
| flex-grow: 1; | |
| padding: 5px; | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.7); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 3px; | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| .explorer-body { | |
| display: flex; | |
| height: calc(100% - 60px); | |
| } | |
| .explorer-sidebar { | |
| width: 200px; | |
| padding: 10px; | |
| border-right: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .explorer-files { | |
| flex-grow: 1; | |
| padding: 10px; | |
| overflow-y: auto; | |
| } | |
| .folder { | |
| display: flex; | |
| align-items: center; | |
| padding: 5px; | |
| cursor: pointer; | |
| border-radius: 3px; | |
| } | |
| .folder:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .folder-icon { | |
| width: 20px; | |
| height: 20px; | |
| margin-right: 8px; | |
| } | |
| /* Notepad window specific */ | |
| .notepad-textarea { | |
| width: 100%; | |
| height: 100%; | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-family: 'Consolas', monospace; | |
| resize: none; | |
| outline: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="desktop"> | |
| <div class="desktop-icon" onclick="openWindow('explorer')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer"> | |
| <span>File Explorer</span> | |
| </div> | |
| <div class="desktop-icon" onclick="openWindow('notepad')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad"> | |
| <span>Notepad</span> | |
| </div> | |
| <div class="desktop-icon" onclick="openWindow('calculator')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator"> | |
| <span>Calculator</span> | |
| </div> | |
| <div class="desktop-icon"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/888/888882.png" alt="Chrome"> | |
| <span>Google Chrome</span> | |
| </div> | |
| </div> | |
| <div class="taskbar"> | |
| <div class="start-button" id="startButton" onclick="toggleStartMenu()"> | |
| <i class="fab fa-windows"></i> | |
| </div> | |
| <div class="taskbar-icons"> | |
| <div class="taskbar-icon" onclick="openWindow('explorer')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer"> | |
| </div> | |
| <div class="taskbar-icon" onclick="openWindow('notepad')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad"> | |
| </div> | |
| <div class="taskbar-icon" onclick="openWindow('calculator')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator"> | |
| </div> | |
| </div> | |
| <div class="clock" id="clock">12:00 PM</div> | |
| </div> | |
| <div class="start-menu" id="startMenu"> | |
| <div class="start-menu-header"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" placeholder="Type here to search"> | |
| </div> | |
| <div class="start-menu-content"> | |
| <div class="pinned-apps"> | |
| <h3>Pinned</h3> | |
| <div class="app-grid"> | |
| <div class="app" onclick="openWindow('explorer')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="File Explorer"> | |
| <span>File Explorer</span> | |
| </div> | |
| <div class="app" onclick="openWindow('notepad')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad"> | |
| <span>Notepad</span> | |
| </div> | |
| <div class="app" onclick="openWindow('calculator')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator"> | |
| <span>Calculator</span> | |
| </div> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/888/888882.png" alt="Chrome"> | |
| <span>Google Chrome</span> | |
| </div> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2965/2965278.png" alt="Settings"> | |
| <span>Settings</span> | |
| </div> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2965/2965256.png" alt="Store"> | |
| <span>Microsoft Store</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="recommended"> | |
| <h3>Recommended</h3> | |
| <div class="app-grid"> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2965/2965283.png" alt="Word"> | |
| <span>Word</span> | |
| </div> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2965/2965335.png" alt="Excel"> | |
| <span>Excel</span> | |
| </div> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2965/2965291.png" alt="PowerPoint"> | |
| <span>PowerPoint</span> | |
| </div> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/2913/2913111.png" alt="Visual Studio"> | |
| <span>Visual Studio</span> | |
| </div> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/5968/5968666.png" alt="Edge"> | |
| <span>Edge</span> | |
| </div> | |
| <div class="app"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/3046/3046125.png" alt="Outlook"> | |
| <span>Outlook</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="user-profile" onclick="openWindow('user-settings')"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png" alt="User"> | |
| <span>User</span> | |
| </div> | |
| </div> | |
| <div class="window" id="explorerWindow"> | |
| <div class="window-header"> | |
| <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965300.png" alt="Explorer"> | |
| <div class="window-title">File Explorer</div> | |
| <div class="window-controls"> | |
| <button class="window-btn minimize"><i class="fas fa-minus"></i></button> | |
| <button class="window-btn maximize"><i class="far fa-square"></i></button> | |
| <button class="window-btn close" onclick="closeWindow('explorerWindow')"><i class="fas fa-times"></i></button> | |
| </div> | |
| </div> | |
| <div class="explorer-nav"> | |
| <button class="explorer-nav-btn"><i class="fas fa-arrow-left"></i></button> | |
| <button class="explorer-nav-btn"><i class="fas fa-arrow-right"></i></button> | |
| <button class="explorer-nav-btn"><i class="fas fa-arrow-up"></i></button> | |
| <input type="text" class="explorer-path" value="This PC > Documents"> | |
| </div> | |
| <div class="explorer-body"> | |
| <div class="explorer-sidebar"> | |
| <div class="folder"> | |
| <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965318.png" alt="Desktop"> | |
| <span>Desktop</span> | |
| </div> | |
| <div class="folder"> | |
| <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965316.png" alt="Documents"> | |
| <span>Documents</span> | |
| </div> | |
| <div class="folder"> | |
| <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965311.png" alt="Downloads"> | |
| <span>Downloads</span> | |
| </div> | |
| <div class="folder"> | |
| <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965334.png" alt="Music"> | |
| <span>Music</span> | |
| </div> | |
| <div class="folder"> | |
| <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965351.png" alt="Pictures"> | |
| <span>Pictures</span> | |
| </div> | |
| <div class="folder"> | |
| <img class="folder-icon" src="https://cdn-icons-png.flaticon.com/512/2965/2965341.png" alt="Videos"> | |
| <span>Videos</span> | |
| </div> | |
| </div> | |
| <div class="explorer-files"> | |
| Some files would be listed here... | |
| </div> | |
| </div> | |
| <div class="window-footer"> | |
| <div>5 items</div> | |
| <div>100 GB free of 256 GB</div> | |
| </div> | |
| </div> | |
| <div class="window" id="notepadWindow"> | |
| <div class="window-header"> | |
| <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/2809/2809932.png" alt="Notepad"> | |
| <div class="window-title">Untitled - Notepad</div> | |
| <div class="window-controls"> | |
| <button class="window-btn minimize"><i class="fas fa-minus"></i></button> | |
| <button class="window-btn maximize"><i class="far fa-square"></i></button> | |
| <button class="window-btn close" onclick="closeWindow('notepadWindow')"><i class="fas fa-times"></i></button> | |
| </div> | |
| </div> | |
| <div class="window-content"> | |
| <textarea class="notepad-textarea">This is a sample text in Notepad. | |
| You can type here whatever you want. | |
| • List item 1 | |
| • List item 2 | |
| • List item 3 | |
| 1234567890 | |
| ABCDEFGHIJKLMNOPQRSTUVWXYZ | |
| abcdefghijklmnopqrstuvwxyz</textarea> | |
| </div> | |
| <div class="window-footer"> | |
| <div>Ln 7, Col 1</div> | |
| <div>Windows (CRLF)</div> | |
| <div>UTF-8</div> | |
| </div> | |
| </div> | |
| <div class="window" id="calculatorWindow"> | |
| <div class="window-header"> | |
| <img class="window-icon" src="https://cdn-icons-png.flaticon.com/512/210/210826.png" alt="Calculator"> | |
| <div class="window-title">Calculator</div> | |
| <div class="window-controls"> | |
| <button class="window-btn minimize"><i class="fas fa-minus"></i></button> | |
| <button class="window-btn maximize"><i class="far fa-square"></i></button> | |
| <button class="window-btn close" onclick="closeWindow('calculatorWindow')"><i class="fas fa-times"></i></button> | |
| </div> | |
| </div> | |
| <div class="window-content"> | |
| <p>Calculator functionality would go here...</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Clock functionality | |
| function updateClock() { | |
| const now = new Date(); | |
| const hours = now.getHours(); | |
| const minutes = now.getMinutes().toString().padStart(2, '0'); | |
| const ampm = hours >= 12 ? 'PM' : 'AM'; | |
| const formattedHours = hours % 12 || 12; | |
| document.getElementById('clock').textContent = `${formattedHours}:${minutes} ${ampm}`; | |
| } | |
| setInterval(updateClock, 1000); | |
| updateClock(); | |
| // Start menu functionality | |
| function toggleStartMenu() { | |
| const startMenu = document.getElementById('startMenu'); | |
| startMenu.style.display = startMenu.style.display === 'block' ? 'none' : 'block'; | |
| } | |
| // Close start menu when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const startMenu = document.getElementById('startMenu'); | |
| const startButton = document.getElementById('startButton'); | |
| if (!startMenu.contains(event.target) && event.target !== startButton) { | |
| startMenu.style.display = 'none'; | |
| } | |
| }); | |
| // Window management | |
| function openWindow(windowId) { | |
| document.getElementById(windowId + 'Window').classList.add('active'); | |
| document.getElementById('startMenu').style.display = 'none'; | |
| } | |
| function closeWindow(windowId) { | |
| document.getElementById(windowId).classList.remove('active'); | |
| } | |
| // Make windows draggable | |
| const windows = document.querySelectorAll('.window'); | |
| windows.forEach(window => { | |
| const header = window.querySelector('.window-header'); | |
| let isDragging = false; | |
| let offsetX, offsetY; | |
| header.addEventListener('mousedown', function(e) { | |
| isDragging = true; | |
| offsetX = e.clientX - window.getBoundingClientRect().left; | |
| offsetY = e.clientY - window.getBoundingClientRect().top; | |
| // Bring to front | |
| windows.forEach(w => w.style.zIndex = 10); | |
| window.style.zIndex = 100; | |
| }); | |
| document.addEventListener('mousemove', function(e) { | |
| if (!isDragging) return; | |
| const x = e.clientX - offsetX; | |
| const y = e.clientY - offsetY; | |
| window.style.left = x + 'px'; | |
| window.style.top = y + 'px'; | |
| }); | |
| document.addEventListener('mouseup', function() { | |
| isDragging = false; | |
| }); | |
| }); | |
| // Open File Explorer by default | |
| openWindow('explorer'); | |
| </script> | |
| </body> | |
| </html> |