<!DOCTYPE html>
<html>
<head>
  <title>HTML OS 2</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, sans-serif;
      background-color: #1e1e1e;
      color: #fff;
    }
    
    #taskbar {
      width: 100%;
      height: 50px;
      background-color: #0078d4;
      border-top: 1px solid #005a9e;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    
    #taskbar-icons {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 10px;
    }
    
    .taskbar-icon {
      width: 40px;
      height: 40px;
      background-color: #0078d4;
      margin-right: 5px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      border-radius: 5px;
      border: 1px solid #005a9e;
      color: #fff;
    }
    
    #desktop {
      width: 100%;
      height: calc(100vh - 50px);
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 10px;
    }
    
    .icon {
      width: 150px;
      height: 150px;
      background-color: #333;
      margin: 10px;
      text-align: center;
      line-height: 150px;
      cursor: pointer;
      border-radius: 10px;
      border: 2px solid #0078d4;
    }
  </style>
</head>
<body>
  <div id="taskbar">
    <div id="taskbar-icons">
      <div class="taskbar-icon" onclick="openApp('notepad')">📝</div>
      <div class="taskbar-icon" onclick="openApp('browser')">🌐</div>
      <div class="taskbar-icon" onclick="openApp('settings')">⚙️</div>
      <div class="taskbar-icon" onclick="openApp('calculator')">🧮</div>
    </div>
  </div>
  
  <div id="desktop">
    <div class="icon" onclick="openApp('email')">Email</div>
    <div class="icon" onclick="openApp('music')">Music Player</div>
    <div class="icon" onclick="openApp('fileExplorer')">File Explorer</div>
  </div>
  <a class="button" href="#">Default Button</a>
  <div id="apps" style="display: none;">
    <div id="email" style="display: none;">
      Email App
    </div>
    
    <div id="music" style="display: none;">
      Music Player App
    </div>
    
    <div id="fileExplorer" style="display: none;">
      File Explorer App
    </div>
    
    <div id="notepad" style="display: none;">
      Notepad App
    </div>
    
    <div id="browser" style="display: none;">
      Browser App
    </div>
    
    <div id="settings" style="display: none;">
      Settings App
    </div>
    
    <div id="calculator" style="display: none;">
      Calculator App
    </div>
  </div>
  
  <script>
    function openApp(appName) {
      var apps = document.getElementById('apps').children;
      for (var i = 0; i < apps.length; i++) {
        apps[i].style.display = 'none';
      }
      
      document.getElementById(appName).style.display = 'block';
    }
  </script>
</body>
</html>
by