{"id":25950,"date":"2025-04-01T22:14:07","date_gmt":"2025-04-01T13:14:07","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25950"},"modified":"2025-04-01T22:14:09","modified_gmt":"2025-04-01T13:14:09","slug":"webos","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25950","title":{"rendered":"WEBOS"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>\u4eee\u60f3OS Pro<\/title>\n  <style>\n    body {\n      margin: 0;\n      background: #2c3e50;\n      font-family: 'Segoe UI', sans-serif;\n      overflow: hidden;\n    }\n    #desktop {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 40px;\n      background: linear-gradient(#2980b9, #34495e);\n    }\n    .icon {\n      width: 70px;\n      text-align: center;\n      margin: 20px;\n      cursor: pointer;\n      color: white;\n    }\n    .window {\n      position: absolute;\n      width: 300px;\n      height: 200px;\n      background: white;\n      border: 2px solid #555;\n      display: none;\n      box-shadow: 4px 4px 10px rgba(0,0,0,0.5);\n    }\n    .window-header {\n      background: #3498db;\n      padding: 5px;\n      cursor: move;\n      color: white;\n    }\n    .window-body {\n      padding: 10px;\n    }\n    #taskbar {\n      position: fixed;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: 40px;\n      background: #2c3e50;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 0 10px;\n      color: white;\n    }\n  <\/style>\n<\/head>\n<body onload=\"playStartupSound(); updateClock(); setInterval(updateClock, 1000);\">\n\n  <div id=\"desktop\">\n    <div class=\"icon\" onclick=\"openWindow('memo')\">\ud83d\udcdd<br>\u30e1\u30e2\u5e33<\/div>\n    <div class=\"icon\" onclick=\"openWindow('calc')\">\ud83e\uddee<br>\u96fb\u5353<\/div>\n  <\/div>\n\n  <div id=\"taskbar\">\n    <div>\u4eee\u60f3OS Pro<\/div>\n    <div id=\"clock\"><\/div>\n  <\/div>\n\n  <!-- \u30e1\u30e2\u5e33 -->\n  <div class=\"window\" id=\"memo\">\n    <div class=\"window-header\" onmousedown=\"dragWindow(event, this.parentElement)\">\u30e1\u30e2\u5e33<\/div>\n    <div class=\"window-body\">\n      <textarea style=\"width: 100%; height: 100px;\">\u30e1\u30e2\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/textarea>\n    <\/div>\n  <\/div>\n\n  <!-- \u96fb\u5353 -->\n  <div class=\"window\" id=\"calc\">\n    <div class=\"window-header\" onmousedown=\"dragWindow(event, this.parentElement)\">\u96fb\u5353<\/div>\n    <div class=\"window-body\">\n      <input type=\"text\" id=\"calcDisplay\" style=\"width:100%; font-size: 1.2em;\" \/>\n      <button onclick=\"calculate()\">\u8a08\u7b97<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- \u8d77\u52d5\u97f3 -->\n  <audio id=\"bootSound\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2f\/Windows_95_startup.ogg\" preload=\"auto\"><\/audio>\n\n  <script>\n    function openWindow(id) {\n      document.getElementById(id).style.display = 'block';\n    }\n\n    function dragWindow(e, el) {\n      e.preventDefault();\n      let offsetX = e.clientX - el.offsetLeft;\n      let offsetY = e.clientY - el.offsetTop;\n\n      function move(e) {\n        el.style.left = (e.clientX - offsetX) + 'px';\n        el.style.top = (e.clientY - offsetY) + 'px';\n      }\n\n      function stop() {\n        document.removeEventListener('mousemove', move);\n        document.removeEventListener('mouseup', stop);\n      }\n\n      document.addEventListener('mousemove', move);\n      document.addEventListener('mouseup', stop);\n    }\n\n    function calculate() {\n      let result;\n      try {\n        result = eval(document.getElementById('calcDisplay').value);\n      } catch {\n        result = \"\u30a8\u30e9\u30fc\";\n      }\n      document.getElementById('calcDisplay').value = result;\n    }\n\n    function playStartupSound() {\n      document.getElementById(\"bootSound\").play();\n    }\n\n    function updateClock() {\n      const now = new Date();\n      const time = now.toLocaleTimeString();\n      document.getElementById(\"clock\").textContent = time;\n    }\n  <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[80],"tags":[],"class_list":["post-25950","post","type-post","status-publish","format-standard","hentry","category-html"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25950"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25950\/revisions"}],"predecessor-version":[{"id":25952,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25950\/revisions\/25952"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25950"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}