90 lines
3.6 KiB
HTML
90 lines
3.6 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>veryextra.net</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<div id="desktop">
|
||
|
||
<main id="icons">
|
||
<button class="desktop-icon" data-app="mycomputer">
|
||
<span class="emoji">🖥️</span>
|
||
<span>My Computer</span>
|
||
</button>
|
||
|
||
<button class="desktop-icon" data-app="notepad">
|
||
<span class="emoji">📝</span>
|
||
<span>Notepad.txt</span>
|
||
</button>
|
||
|
||
<button class="desktop-icon" data-app="paint">
|
||
<span class="emoji">🎨</span>
|
||
<span>Paint</span>
|
||
</button>
|
||
|
||
<button class="desktop-icon" data-app="ie">
|
||
<span class="emoji">🌐</span>
|
||
<span>Internet Explorer</span>
|
||
</button>
|
||
|
||
<button class="desktop-icon" data-app="recycle">
|
||
<span class="emoji">🗑️</span>
|
||
<span>Recycle Bin</span>
|
||
</button>
|
||
</main>
|
||
|
||
<footer id="taskbar">
|
||
<button id="start-btn">start</button>
|
||
<div id="taskbar-windows" aria-label="open windows"></div>
|
||
<div id="taskbar-right" aria-label="taskbar tray">
|
||
<span id="taskbar-brand">veryextraOS 1.0</span>
|
||
<div id="taskbar-tray-buttons">
|
||
<button id="reset-layout-btn" title="Reset icon layout" aria-label="Reset icon layout"><span aria-hidden="true">⟲</span></button>
|
||
<button id="show-desktop-btn" title="Show desktop" aria-label="Show desktop"><span aria-hidden="true">▭</span></button>
|
||
</div>
|
||
<div id="clock"><span class="clock-time">--:--</span><span class="clock-date">--/--/----</span></div>
|
||
</div>
|
||
</footer>
|
||
|
||
<section id="start-menu" class="hidden" aria-label="Start menu">
|
||
<div class="start-menu-top">
|
||
<span class="start-user">Dion</span>
|
||
</div>
|
||
<div class="start-menu-body">
|
||
<div class="start-col start-col-left">
|
||
<button class="start-item" data-open-app="ie">🌐 Internet</button>
|
||
<button class="start-item" data-open-app="notepad">📝 Notepad</button>
|
||
<button class="start-item" data-open-app="paint">🎨 Paint</button>
|
||
<button class="start-item" data-open-app="mycomputer">🖥️ My Computer</button>
|
||
</div>
|
||
<div class="start-col start-col-right">
|
||
<button class="start-item secondary" data-open-path="/C:/Documents and Settings/Dion/My Documents">📂 My Documents</button>
|
||
<button class="start-item secondary" data-open-path="/C:/Documents and Settings/Dion/My Pictures">🖼️ My Pictures</button>
|
||
<button class="start-item secondary" data-open-path="/D:/Music">🎵 Music</button>
|
||
<button class="start-item secondary" data-system-action="control-panel">⚙️ Control Panel</button>
|
||
<button class="start-item secondary" data-system-action="run">🏃 Run...</button>
|
||
<button class="start-item secondary" data-system-action="help">❓ Help and Support</button>
|
||
</div>
|
||
</div>
|
||
<div class="start-menu-footer">
|
||
<button class="start-footer-btn" data-system-action="logoff">🔒 Log Off</button>
|
||
<button class="start-footer-btn" data-system-action="shutdown">⏻ Turn Off Computer</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<section id="window-template" class="app-window hidden" aria-live="polite">
|
||
<div class="window-titlebar">
|
||
<strong class="window-title">Window</strong>
|
||
<button class="window-close" aria-label="close">×</button>
|
||
</div>
|
||
<div class="window-content"></div>
|
||
</section>
|
||
|
||
<script src="./script.js"></script>
|
||
</body>
|
||
</html>
|