{"id":26052,"date":"2025-06-07T13:55:29","date_gmt":"2025-06-07T04:55:29","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26052"},"modified":"2025-06-07T13:55:31","modified_gmt":"2025-06-07T04:55:31","slug":"eternal-html-%e7%94%bb%e5%83%8f%e6%8a%95%e7%a8%bf%e3%82%b5%e3%82%a4%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26052","title":{"rendered":"Eternal.html \u753b\u50cf\u6295\u7a3f\u30b5\u30a4\u30c8"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Eternal&lt;\/title>\n  &lt;style>\n    body {\n      font-family: sans-serif;\n      background: #f5f5f5;\n      margin: 0;\n      padding: 0;\n    }\n\n    header {\n      background: #e60023;\n      color: white;\n      padding: 1em;\n      text-align: center;\n      font-size: 1.8em;\n    }\n\n    .controls {\n      padding: 1em;\n      background: #fff;\n      text-align: center;\n    }\n\n    .controls input, .controls button {\n      margin: 0.5em;\n      padding: 0.5em;\n      font-size: 1em;\n    }\n\n    .grid {\n      column-count: 4;\n      column-gap: 1em;\n      padding: 1em;\n    }\n\n    .pin {\n      background: white;\n      display: inline-block;\n      margin-bottom: 1em;\n      width: 100%;\n      box-sizing: border-box;\n      border-radius: 10px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n      overflow: hidden;\n      position: relative;\n    }\n\n    .pin img {\n      width: 100%;\n      cursor: pointer;\n    }\n\n    .description, .tags {\n      padding: 0.5em;\n    }\n\n    .favorite {\n      position: absolute;\n      top: 8px;\n      right: 8px;\n      font-size: 22px;\n      color: gray;\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .favorite.active {\n      color: gold;\n    }\n\n    .likes {\n      font-size: 0.9em;\n      text-align: right;\n      padding: 0 0.5em 0.5em 0;\n      color: #888;\n    }\n\n    .tag {\n      display: inline-block;\n      background: #eee;\n      padding: 0.2em 0.5em;\n      border-radius: 5px;\n      margin: 0.2em;\n      cursor: pointer;\n    }\n\n    .tag:hover {\n      background: #ccc;\n    }\n\n    @media screen and (max-width: 1024px) {\n      .grid {\n        column-count: 3;\n      }\n    }\n\n    @media screen and (max-width: 768px) {\n      .grid {\n        column-count: 2;\n      }\n    }\n\n    @media screen and (max-width: 480px) {\n      .grid {\n        column-count: 1;\n      }\n    }\n\n    #modal {\n      position: fixed;\n      top: 0; left: 0; right: 0; bottom: 0;\n      background: rgba(0,0,0,0.7);\n      display: none;\n      justify-content: center;\n      align-items: center;\n      z-index: 1000;\n    }\n\n    #modal img {\n      max-width: 90%;\n      max-height: 80vh;\n      border-radius: 10px;\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;header>Pintorrest \u5b8c\u5168\u7248&lt;\/header>\n\n&lt;div class=\"controls\">\n  &lt;input type=\"file\" id=\"imageInput\" accept=\"image\/*\">\n  &lt;input type=\"text\" id=\"descInput\" placeholder=\"\u8aac\u660e\">\n  &lt;input type=\"text\" id=\"tagInput\" placeholder=\"\u30bf\u30b0\uff08\u30ab\u30f3\u30de\u533a\u5207\u308a\uff09\">\n  &lt;button onclick=\"addPin()\">\u6295\u7a3f&lt;\/button>\n  &lt;br>\n  &lt;input type=\"text\" id=\"searchBox\" placeholder=\"\u691c\u7d22...\" oninput=\"filterPins()\">\n&lt;\/div>\n\n&lt;div class=\"grid\" id=\"grid\">&lt;\/div>\n\n&lt;div id=\"modal\" onclick=\"this.style.display='none'\">\n  &lt;img id=\"modalImg\" src=\"\">\n&lt;\/div>\n\n&lt;script>\n  let pins = JSON.parse(localStorage.getItem(\"pins\") || \"&#91;]\");\n\n  function renderPins() {\n    const grid = document.getElementById(\"grid\");\n    grid.innerHTML = '';\n    pins.forEach((pin, index) => {\n      const pinElem = document.createElement(\"div\");\n      pinElem.className = \"pin\";\n      pinElem.innerHTML = `\n        &lt;span class=\"favorite ${pin.favorited ? 'active' : ''}\" onclick=\"toggleFavorite(${index}, this)\">\u2605&lt;\/span>\n        &lt;img src=\"${pin.image}\" onclick=\"showModal('${pin.image}')\">\n        &lt;div class=\"description\">${pin.desc}&lt;\/div>\n        &lt;div class=\"tags\">${pin.tags.map(tag => `&lt;span class=\"tag\" onclick=\"filterByTag('${tag}')\">${tag}&lt;\/span>`).join(' ')}&lt;\/div>\n        &lt;div class=\"likes\">\u2665 ${pin.likes}&lt;\/div>\n      `;\n      grid.appendChild(pinElem);\n    });\n  }\n\n  function addPin() {\n    const imageInput = document.getElementById(\"imageInput\");\n    const desc = document.getElementById(\"descInput\").value.trim();\n    const tags = document.getElementById(\"tagInput\").value.split(',').map(t => t.trim()).filter(Boolean);\n    const file = imageInput.files&#91;0];\n    if (!file || !desc) return alert(\"\u753b\u50cf\u3068\u8aac\u660e\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\");\n\n    const reader = new FileReader();\n    reader.onload = function(e) {\n      pins.unshift({\n        image: e.target.result,\n        desc: desc,\n        tags: tags,\n        likes: 0,\n        favorited: false\n      });\n      savePins();\n      renderPins();\n      document.getElementById(\"descInput\").value = '';\n      document.getElementById(\"tagInput\").value = '';\n      document.getElementById(\"imageInput\").value = '';\n    };\n    reader.readAsDataURL(file);\n  }\n\n  function showModal(src) {\n    document.getElementById(\"modalImg\").src = src;\n    document.getElementById(\"modal\").style.display = 'flex';\n  }\n\n  function toggleFavorite(index, elem) {\n    pins&#91;index].favorited = !pins&#91;index].favorited;\n    pins&#91;index].likes += pins&#91;index].favorited ? 1 : -1;\n    savePins();\n    renderPins();\n  }\n\n  function savePins() {\n    localStorage.setItem(\"pins\", JSON.stringify(pins));\n  }\n\n  function filterPins() {\n    const keyword = document.getElementById(\"searchBox\").value.toLowerCase();\n    document.querySelectorAll(\".pin\").forEach(pin => {\n      const text = pin.textContent.toLowerCase();\n      pin.style.display = text.includes(keyword) ? \"inline-block\" : \"none\";\n    });\n  }\n\n  function filterByTag(tag) {\n    document.getElementById(\"searchBox\").value = tag;\n    filterPins();\n  }\n\n  renderPins();\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/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-26052","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\/26052","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=26052"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26052\/revisions"}],"predecessor-version":[{"id":26053,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26052\/revisions\/26053"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26052"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}