WEBOS - 長留裕平のブログ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>仮想OS Pro</title>
  <style>
    body {
      margin: 0;
      background: #2c3e50;
      font-family: 'Segoe UI', sans-serif;
      overflow: hidden;
    }
    #desktop {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 40px;
      background: linear-gradient(#2980b9, #34495e);
    }
    .icon {
      width: 70px;
      text-align: center;
      margin: 20px;
      cursor: pointer;
      color: white;
    }
    .window {
      position: absolute;
      width: 300px;
      height: 200px;
      background: white;
      border: 2px solid #555;
      display: none;
      box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    }
    .window-header {
      background: #3498db;
      padding: 5px;
      cursor: move;
      color: white;
    }
    .window-body {
      padding: 10px;
    }
    #taskbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40px;
      background: #2c3e50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      color: white;
    }
  </style>
</head>
<body onload="playStartupSound(); updateClock(); setInterval(updateClock, 1000);">

  <div id="desktop">
    <div class="icon" onclick="openWindow('memo')"><br>メモ帳</div>
    <div class="icon" onclick="openWindow('calc')"><br>電卓</div>
  </div>

  <div id="taskbar">
    <div>仮想OS Pro</div>
    <div id="clock"></div>
  </div>

  <!-- メモ帳 -->
  <div class="window" id="memo">
    <div class="window-header" onmousedown="dragWindow(event, this.parentElement)">メモ帳</div>
    <div class="window-body">
      <textarea style="width: 100%; height: 100px;">メモを入力してください</textarea>
    </div>
  </div>

  <!-- 電卓 -->
  <div class="window" id="calc">
    <div class="window-header" onmousedown="dragWindow(event, this.parentElement)">電卓</div>
    <div class="window-body">
      <input type="text" id="calcDisplay" style="width:100%; font-size: 1.2em;" />
      <button onclick="calculate()">計算</button>
    </div>
  </div>

  <!-- 起動音 -->
  <audio id="bootSound" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Windows_95_startup.ogg" preload="auto"></audio>

  <script>
    function openWindow(id) {
      document.getElementById(id).style.display = 'block';
    }

    function dragWindow(e, el) {
      e.preventDefault();
      let offsetX = e.clientX - el.offsetLeft;
      let offsetY = e.clientY - el.offsetTop;

      function move(e) {
        el.style.left = (e.clientX - offsetX) + 'px';
        el.style.top = (e.clientY - offsetY) + 'px';
      }

      function stop() {
        document.removeEventListener('mousemove', move);
        document.removeEventListener('mouseup', stop);
      }

      document.addEventListener('mousemove', move);
      document.addEventListener('mouseup', stop);
    }

    function calculate() {
      let result;
      try {
        result = eval(document.getElementById('calcDisplay').value);
      } catch {
        result = "エラー";
      }
      document.getElementById('calcDisplay').value = result;
    }

    function playStartupSound() {
      document.getElementById("bootSound").play();
    }

    function updateClock() {
      const now = new Date();
      const time = now.toLocaleTimeString();
      document.getElementById("clock").textContent = time;
    }
  </script>
</body>
</html>