橘子蘋果程式學苑AI創意實戰營 - 上課用提示詞工具 | 程式專案

{"id":984367,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"zh-TW\\\"\u003e\\n\u003chead\u003e\\n  \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n  \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n  \u003ctitle\u003e橘子蘋果程式學苑AI創意實戰營\u003c/title\u003e\\n  \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\"\u003e\\n  \u003cstyle\u003e\\n    * {\\n      font-size: 18px;\\n    }\\n    body {\\n      display: flex;\\n      align-items: center;\\n      justify-content: center;\\n      height: 100vh;\\n      width: 100vw;\\n      padding: 50px;\\n      box-sizing: border-box;\\n      background-color: #f8f9fa;\\n      flex-direction: column;\\n    }\\n    h1 {\\n      font-size: 30px;\\n      text-align: center;\\n      margin: 10px 0 10px;\\n      letter-spacing: 5px;\\n    }\\n    h2 {\\n      font-size: 12px;\\n      text-align: center;\\n      margin: 10px 0 30px;\\n      letter-spacing: 5px;\\n    }\\n    h3 {\\n      font-size: 18px;\\n    }\\n    .copy-section {\\n      background-color: #fff;\\n      padding: 30px;\\n      border-radius: 0.5rem;\\n      box-shadow: 0 2px 4px rgba(0,0,0,0.1);\\n      width: 100%;\\n    }\\n    .copy-section textarea {\\n      resize: vertical;\\n      min-height: 60vh;\\n      width: 100%;\\n    }\\n    .copy-btn {\\n      transition: background-color 0.2s ease;\\n      width: 100%;\\n    }\\n    /* 右下角提示框樣式 */\\n    .alert-position {\\n      position: fixed;\\n      bottom: 20px;\\n      right: 20px;\\n      z-index: 1000;\\n      display: none;\\n    }\\n  \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n  \u003cdiv class=\\\"copy-section\\\"\u003e\\n    \u003ch1\u003e上課用提示詞\u003c/h1\u003e\\n    \u003ch2\u003e橘子蘋果程式學苑AI創意實戰營\u003c/h2\u003e\\n    \u003ch3 id=\\\"title\\\"\u003e載入中...\u003c/h3\u003e\\n    \u003cdiv\u003e\\n      \u003ctextarea id=\\\"text1\\\" class=\\\"form-control\\\" rows=\\\"3\\\"\u003e載入中...\u003c/textarea\u003e\\n    \u003c/div\u003e\\n    \u003cbutton class=\\\"btn btn-dark copy-btn mt-3\\\" type=\\\"button\\\" id=\\\"copyBtn\\\"\u003e\\n      複製\\n    \u003c/button\u003e\\n  \u003c/div\u003e\\n\\n  \u003c!-- 右下角提示框 --\u003e\\n  \u003cdiv class=\\\"alert alert-success alert-position\\\" role=\\\"alert\\\" id=\\\"copyAlert\\\"\u003e\\n    已複製！\\n  \u003c/div\u003e\\n\\n  \u003cscript src=\\\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\\\"\u003e\u003c/script\u003e\\n  \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js\\\"\u003e\u003c/script\u003e\\n  \u003cscript\u003e\\n    $(document).ready(function(){\\n      // 從網址參數取得 id\\n      var urlParams = new URLSearchParams(window.location.search);\\n      var promptId = urlParams.get('id');\\n      var apiBaseUrl = \\\"https://script.google.com/macros/s/AKfycbzGXmflBWRnhMxJAU2rwUA743M0sH_ITrp_87DSIksXKDP2ze86aRY5KQYecBxc6IU81w/exec\\\";\\n      \\n      // DOM 參考\\n      var $titleEl   = $('#title');\\n      var $textarea  = $('#text1');\\n      var $copyBtn   = $('#copyBtn');\\n      var $copyAlert = $('#copyAlert');\\n      var $titleTag  = $('title');\\n\\n      // 阻止 textarea 輸入，使其無法修改\\n      $textarea.on('beforeinput', function(event){\\n        event.preventDefault();\\n      });\\n\\n      // 取得 API 資料並更新介面\\n      if(promptId){\\n        var apiUrl = apiBaseUrl + \\\"?id=\\\" + promptId;\\n        $.getJSON(apiUrl)\\n          .done(function(data){\\n            if(data.error){\\n              throw new Error(data.error);\\n            }\\n            $titleEl.text(data.title || \\\"無標題\\\");\\n            $textarea.val(data.prompt || \\\"無內容\\\");\\n            $titleTag.text((data.title ? data.title : \\\"\\\") + \\\"｜橘子蘋果程式學苑AI創意實戰營\\\");\\n          })\\n          .fail(function(jqXHR, textStatus, errorThrown){\\n            console.error(\\\"取得資料失敗：\\\", textStatus, errorThrown);\\n            $titleEl.text(\\\"資料載入失敗！\\\");\\n            $textarea.val(\\\"請檢查網址參數或稍後再試。\\\");\\n          });\\n      } else {\\n        $titleEl.text(\\\"缺少 id 參數！\\\");\\n        $textarea.val(\\\"請在網址上加入 ?id=你的提示詞ID\\\");\\n      }\\n\\n      // 複製按鈕處理\\n      $copyBtn.on('click', function(){\\n        var textToCopy = $textarea.val();\\n        if(navigator.clipboard \u0026\u0026 window.isSecureContext) {\\n          navigator.clipboard.writeText(textToCopy)\\n            .then(function(){\\n              $copyAlert.fadeIn(200).delay(2000).fadeOut(200);\\n            })\\n            .catch(function(err){\\n              console.error(\\\"複製失敗：\\\", err);\\n              alert(\\\"複製失敗，請手動選擇文字並複製。\\\");\\n            });\\n        } else {\\n          $textarea.select();\\n          var success = document.execCommand('copy');\\n          if(success){\\n            window.getSelection().removeAllRanges();\\n            $copyAlert.fadeIn(200).delay(2000).fadeOut(200);\\n          } else {\\n            console.error(\\\"備援方法複製失敗\\\");\\n            alert(\\\"複製失敗，請手動選擇文字並複製。\\\");\\n          }\\n        }\\n      });\\n    });\\n  \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"\",\"js\":\"\"}","created_at":"2025-04-10T11:43:31.785+08:00","updated_at":"2025-04-10T11:58:34.084+08:00","name":"橘子蘋果程式學苑AI創意實戰營 - 上課用提示詞工具","language":"web","screenshot":{"url":null},"parent_id":984365,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":66,"hashid":"jzmsre6kj","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}