Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini OS Simulation</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background: #1e1e1e;
    color: #fff;
    overflow: hidden;
  }
  #desktop {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #2c3e50, #34495e);
  }
  .taskbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #111;
    display: flex;
    align-items: center;
    padding: 0 10px;
  }
  .start-button {
    background: #0078d7;
    border: none;
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    margin-right: 10px;
  }
  .start-menu {
    position: absolute;
    bottom: 40px;
    left: 10px;
    width: 200px;
    background: #222;
    border: 1px solid #555;
    display: none;
    flex-direction: column;
  }
  .start-menu button {
    background: none;
    border: none;
    color: #fff;
    text-align: left;
    padding: 10px;
    cursor: pointer;
  }
  .window {
    position: absolute;
    background: #333;
    border: 2px solid #555;
    width: 300px;
    height: 200px;
    top: 50px;
    left: 50px;
    display: flex;
    flex-direction: column;
    color: #fff;
    box-shadow: 0 0 10px #000;
  }
  .window-header {
    background: #444;
    padding: 5px;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .window-body {
    flex: 1;
    padding: 10px;
    background: #555;
  }
  .close-btn {
    background: #ff5c5c;
    border: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  button.app-btn {
    margin: 5px 0;
    padding: 5px;
    width: 90%;
    cursor: pointer;
  }
</style>
</head>
<body>
<div id="desktop">
  <div class="taskbar">
    <button class="start-button">Start</button>
  </div>

  <div class="start-menu" id="startMenu">
    <button class="app-btn" onclick="openWindow('Notepad')">Notepad</button>
    <button class="app-btn" onclick="openWindow('Calculator')">Calculator</button>
  </div>
</div>

<script>
let zIndex = 1;

document.querySelector('.start-button').addEventListener('click', () => {
  const menu = document.getElementById('startMenu');
  menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
});

function openWindow(appName) {
  const win = document.createElement('div');
  win.classList.add('window');
  win.style.zIndex = zIndex++;
  
  const header = document.createElement('div');
  header.classList.add('window-header');
  header.innerHTML = `<span>${appName}</span>`;
  
  const closeBtn = document.createElement('button');
  closeBtn.classList.add('close-btn');
  closeBtn.onclick = () => win.remove();
  header.appendChild(closeBtn);
  
  const body = document.createElement('div');
  body.classList.add('window-body');
  body.innerHTML = appName === 'Notepad' ? '<textarea style="width:100%; height:100%;"></textarea>' :
               appName === 'Calculator' ? '<input type="text" id="calcDisplay" style="width:100%; margin-bottom:5px;"><br><button onclick="calculate(this)" style="width:100%;">=</button>' :
               '';

  win.appendChild(header);
  win.appendChild(body);
  document.getElementById('desktop').appendChild(win);

  dragElement(win, header);
}

function dragElement(elmnt, header) {
  let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  header.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
    elmnt.style.zIndex = zIndex++;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

function calculate(btn) {
  const input = btn.parentElement.querySelector('#calcDisplay');
  try {
    input.value = eval(input.value);
  } catch {
    input.value = 'Error';
  }
}
</script>
</body>
</html>