課程素材字卡產生器 | 程式專案

{"id":294351,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n    \u003ctitle\u003e課程素材字卡產生器\u003c/title\u003e\\n    \u003clink rel=\\\"preconnect\\\" href=\\\"https://fonts.googleapis.com\\\"\u003e\\n    \u003clink rel=\\\"preconnect\\\" href=\\\"https://fonts.gstatic.com\\\" crossorigin\u003e\\n    \u003clink href=\\\"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500\u0026display=swap\\\" rel=\\\"stylesheet\\\"\u003e\\n    \u003clink rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"./style.css\\\"\u003e\\n\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\\n    \u003c!-- partial:index.partial.html --\u003e\\n    \u003cnav class=\\\"navbar navbar-light bg-light mb-4\\\"\u003e\\n        \u003cdiv class=\\\"container-fluid\\\"\u003e\\n            \u003ca class=\\\"navbar-brand\\\" href=\\\"#\\\"\u003e\u003cimg class=\\\"d-inline-block align-text-top\\\" src=\\\"https://cdn1.koding.school/assets/logo/oa-logo-mini-730fe59f98d967929255f884abf83ff8f3934387d50b67403be1c4cd1eac6561.png\\\" alt=\\\"\\\" width=\\\"auto\\\" height=\\\"30\\\" /\u003e\u003c/a\u003e\\n        \u003c/div\u003e\\n    \u003c/nav\u003e\\n    \u003cdiv class=\\\"container\\\"\u003e\\n        \u003cdiv class=\\\"row mb-3\\\"\u003e\\n            \u003cdiv class=\\\"col-12\\\"\u003e\\n                \u003ch4\u003e課程素材字卡產生器\u003c/h4\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"row mb-3\\\"\u003e\\n            \u003cdiv class=\\\"col-12\\\"\u003e\\n                \u003ctextarea class=\\\"form-control\\\" placeholder=\\\"請填入字卡內容\\\"\u003e\u003c/textarea\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"row\\\"\u003e\\n            \u003cdiv class=\\\"col-12\\\"\u003e\\n                \u003cdiv class=\\\"alert alert-warning alert-dismissible fade show\\\" role=\\\"alert\\\"\u003e\\n                    \u003cstrong\u003e注意!\u003c/strong\u003e 下載圖檔不含底部示意圖\\n                    \u003cbutton type=\\\"button\\\" class=\\\"btn-close\\\" data-bs-dismiss=\\\"alert\\\" aria-label=\\\"Close\\\"\u003e\u003c/button\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"row mb-3\\\"\u003e\\n            \u003cdiv class=\\\"col-12\\\"\u003e\\n                \u003cul class=\\\"list-group\\\"\u003e\\n                    \u003cli class=\\\"list-group-item\\\"\u003e\u003cpre class=\\\"m-0\\\"\u003e老師口誤：\\n不是分數陣列，是速度陣列唷！\u003c/pre\u003e\\n                    \u003c/li\u003e\\n                \u003c/ul\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n\\n        \u003cdiv class=\\\"row mb-3\\\"\u003e\\n            \u003cdiv class=\\\"col-12\\\"\u003e\\n                \u003cdiv class=\\\"btn-toolbar\\\" role=\\\"toolbar\\\" aria-label=\\\"Toolbar with button groups\\\"\u003e\\n                    \u003cdiv class=\\\"btn-group me-2\\\" role=\\\"group\\\" aria-label=\\\"First group\\\"\u003e\\n                        \u003cbutton class=\\\"btn btn-dark\\\" type=\\\"button\\\" id=\\\"blackBtn\\\"\u003e黑色字卡\u003c/button\u003e\\n                        \u003cbutton class=\\\"btn btn-white border-dark\\\" type=\\\"button\\\" id=\\\"whiteBtn\\\"\u003e白字字卡\u003c/button\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv class=\\\"btn-group me-2\\\" role=\\\"group\\\" aria-label=\\\"Second group\\\"\u003e\\n                        \u003cbutton class=\\\"btn btn-success btnScreenShot\\\" id=\\\"btnScreenShot\\\" type=\\\"button\\\"\u003e下載字卡圖檔\u003c/button\u003e\\n                    \u003c/div\u003e\\n                    \u003cdiv id=\\\"img-out\\\"\u003e\u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"row mb-3\\\"\u003e\\n            \u003cdiv class=\\\"col-12\\\"\u003e\\n                \u003cdiv id=\\\"videoBox\\\"\u003e\\n                    \u003cdiv id=\\\"capture\\\" draggable=\\\"true\\\"\u003e\\n                        等待輸入內容...\\n                    \u003c/div\u003e\\n                    \u003cdiv id=\\\"bg\\\"\u003e\u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003c!-- partial --\u003e\\n    \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js'\u003e\u003c/script\u003e\\n    \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'\u003e\u003c/script\u003e\\n    \u003cscript src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js'\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"./script.js\\\"\u003e\u003c/script\u003e\\n\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"* {\\n  font-family: \\\"Noto Sans TC\\\", sans-serif;\\n}\\n\\ntextarea {\\n  height: 100px;\\n}\\n\\n#capture {\\n  display: inline-block;\\n  position: absolute;\\n  color: white;\\n  background: rgba(0, 0, 0, 0.7);\\n  font-size: 50px;\\n  margin: 10px;\\n  padding: 20px 50px;\\n  line-height: 1.2;\\n}\\n\\n#bg {\\n  display: inline-block;\\n  width: 100%;\\n  height: 1080px;\\n  background-repeat: no-repeat;\\n  background-image: url(https://cdn6.koding.school/uploads/course/header_bg/297/9b2afd3f30d37e7d1760396d23af6c84.jpg);\\n  background-size: cover;\\n  visibility: hidden;\\n}\\n\\n.line {\\n  width: 100%;\\n}\\n\\n\",\"js\":\"$(document).ready(function() {\\n  getW();\\n  $(\\\"#bg\\\").css(\\\"visibility\\\", \\\"visible\\\");\\n});\\n\\n$(document).on(\\\"resize\\\", function () {\\n  getW();\\n});\\n\\n$(\\\"textarea\\\").bind(\\\"input propertychange\\\", function () {\\n  getW()\\n  let val = this.value;\\n  if (val == \\\"\\\") {\\n    val = \\\"等待輸入內容...\\\";\\n  }\\n  val = val.replace(/\\\\n/g, \\\"\u003cbr\u003e\\\");\\n  $(\\\"#capture\\\").html(val);\\n});\\n\\n$(\\\"#blackBtn\\\").on(\\\"click\\\", function () {\\n  $(\\\"#capture\\\").css(\\\"background\\\", \\\"rgba(0, 0, 0, 0.7)\\\");\\n  $(\\\"#capture\\\").css(\\\"color\\\", \\\"white\\\");\\n});\\n\\n$(\\\"#whiteBtn\\\").on(\\\"click\\\", function () {\\n  $(\\\"#capture\\\").css(\\\"background\\\", \\\"rgba(255, 255, 255, 0.7)\\\");\\n  $(\\\"#capture\\\").css(\\\"color\\\", \\\"black\\\");\\n});\\n\\nfunction getW() {\\n  let bgW = $(\\\"#bg\\\").width();\\n  let bgh = (bgW / 1920) * 1080;\\n  $(\\\"#bg\\\").css(\\\"height\\\", bgh + \\\"px\\\");\\n}\\n\\nvar btn = document.getElementById(\\\"btnScreenShot\\\");\\nbtn.addEventListener(\\\"mousedown\\\", onScreenShotClick);\\n\\nfunction onScreenShotClick(ev) {\\n  html2canvas(document.querySelector(\\\"#capture\\\"),{backgroundColor:null}).then((canvas) =\u003e {\\n    let a = document.createElement(\\\"a\\\");\\n    a.href = canvas.toDataURL(\\\"image/png\\\", 1.0);\\n    a.download = $(\\\"#capture\\\").text() +\\\".png\\\";\\n    a.click();\\n  });\\n}\"}","created_at":"2021-09-01T16:38:35.715+08:00","updated_at":"2023-05-22T15:23:39.028+08:00","name":"課程素材字卡產生器","language":"web","screenshot":{"url":"https://cdn4.koding.school/uploads/project/screenshot/294351/f0663a3d65f8e512d87d6617bf689460.jpg"},"parent_id":294319,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":81,"hashid":"6rps9z5yg","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}