HTML 信件產生器 | Programming Project | OrangeApple Learning Platform

{"id":447685,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\\n\u003chead\u003e\\n  \u003cmeta http-equiv=\\\"content-type\\\" content=\\\"text/html; charset=utf-8\\\" /\u003e\\n  \u003clink href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css\\\" rel=\\\"stylesheet\\\" integrity=\\\"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi\\\" crossorigin=\\\"anonymous\\\"\u003e\\n\u003c/head\u003e\\n\\n\u003cbody\u003e\\n  \\n  \u003c!-- 這裡是預設信件模板 --\u003e\\n  \u003cdiv id=\\\"templates\\\" style=\\\"display: none;\\\"\u003e\\n\\n    \u003c!-- 信件模板A --\u003e\\n    \u003cdiv data-name=\\\"模板A\\\"\u003e\\n      \u003cdiv style=\\\"padding: 32px 32px 10px 32px; background-image: url(https://sb.koding.school/project_assets/d23d75c393efc098fb842cead5fc7211.png?v=1);\\\"\u003e\\n        \u003cdiv style=\\\"text-align:center; padding-bottom:10px\\\"\u003e\\n          \u003cimg src=\\\"https://orangeapple.co/brand_folded_white.png\\\" width=\\\"160px\\\"\u003e\\n        \u003c/div\u003e\\n        \u003cdiv style=\\\"padding: 10px; background-color:white; border-radius:8px;\\\"\u003e\\n          \u003ch1 style=\\\"font-size:2.8em; text-align:center; color:#ff5859;border-bottom: 1px solid #777;margin-top: 0;\\\"\u003e\\n            {{title}}\u003c/h1\u003e\\n        \u003c/div\u003e\\n        \u003cp\u003e\\n          \u003cspan style=\\\"font-size:2rem;\\\"\u003e橘子蘋果兒童程式學苑\u003c/span\u003e\u003cbr\u003e\\n          \u003cspan\u003e聯絡電話\u003c/span\u003e\u003ca href=\\\"tel:0277098027\\\" style=\\\"color:#fff;\\\"\u003e\u003cu\u003e{{ 091234567 | 096543210 | 097777777 }}\u003c/u\u003e\u003c/a\u003e\\n          \u003cspan\u003e \u003c/span\u003e\u003ca href=\\\"https://www.facebook.com/OrangeApplePad/\\\"\u003e\u003cu\u003eFacebook 粉絲團\u003c/u\u003e\u003c/a\u003e\\n          \u003cspan\u003e \u003c/span\u003e\u003ca href=\\\"https://orangeapple.co\\\"\u003e\u003cu\u003e官方網站\u003c/u\u003e\u003c/a\u003e\\n        \u003c/p\u003e\\n        \u003cp style=\\\"color:#fff;text-align: right;padding-bottom: 0px;\\\"\u003e\\n          ＊切換至淺色模式，獲得最好的閱讀體驗\\n        \u003c/p\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n    \\n    \u003c!-- 信件模板B --\u003e\\n    \u003cdiv data-name=\\\"模板B\\\"\u003e\\n      \u003cdiv style=\\\"padding: 32px 32px 10px 32px; background-image: url(https://sb.koding.school/project_assets/d23d75c393efc098fb842cead5fc7211.png?v=1);\\\"\u003e\\n        \u003cdiv style=\\\"text-align:center; padding-bottom:10px\\\"\u003e\\n          \u003cimg src=\\\"https://orangeapple.co/brand_folded_white.png\\\" width=\\\"160px\\\"\u003e\\n        \u003c/div\u003e\\n        \u003cdiv style=\\\"padding: 10px; background-color:white; border-radius:8px;\\\"\u003e\\n          \u003ch1 style=\\\"font-size:2.8em; text-align:center; color:#ff5859;border-bottom: 1px solid #777;margin-top: 0;\\\"\u003e{{title}}\u003c/h1\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n    \\n    \u003c!-- 信件模板B --\u003e\\n    \u003cdiv data-name=\\\"模板C\\\"\u003e\\n        \u003cdiv style=\\\"background-color: #eeeeee;\\\"\u003e\\n            \u003cp style=\\\"color: orange;\\\"\u003e面試者：{{ name }}\u003c/p\u003e\\n            \u003cp style=\\\"color: #aaaaaa;\\\"\u003e面試時間：{{ 時段A | 時段B | 時段C }}\u003c/p\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n  \u003c/div\u003e\\n\\n\\n\\n\\n\\n\\n  \u003c!-- 這裡是產生器主程式 --\u003e\\n  \u003cdiv id=\\\"app\\\" class=\\\"p-3\\\"\u003e\\n    \u003cul class=\\\"nav nav-tabs mb-3\\\"\u003e\\n      \u003cli v-for=\\\"(_, i) in templates\\\" class=\\\"nav-item\\\" @click=\\\"index = i\\\"\u003e\\n        \u003ca class=\\\"nav-link\\\" :class=\\\"{ active: index === i }\\\" href=\\\"#\\\"\u003e{{names[i]}}\u003c/a\u003e\\n      \u003c/li\u003e\\n    \u003c/ul\u003e\\n    \u003cdiv class=\\\"row g-3 mb-3\\\"\u003e\\n      \u003cdiv class=\\\"col-4\\\"\u003e\\n        \u003cdiv class=\\\"border p-2 rounded\\\"\u003e\\n          \u003cdiv class=\\\"input-group mb-2\\\" v-for=\\\"field in fields\\\"\u003e\\n            \u003cspan class=\\\"input-group-text\\\" style=\\\"width: 130px;\\\"\u003e{{ field.label }}\u003c/span\u003e\\n            \u003cinput class=\\\"form-control\\\" v-if=\\\"field.type === 'text'\\\" v-model=\\\"data[field.key]\\\" /\u003e\\n            \u003cselect class=\\\"form-control\\\" v-if=\\\"field.type === 'select'\\\" v-model=\\\"data[field.key]\\\"\u003e\\n              \u003coption v-for=\\\"opt in field.options\\\"\u003e{{ opt }}\u003c/option\u003e\\n            \u003c/select\u003e\\n          \u003c/div\u003e\\n        \u003c/div\u003e\\n      \u003c/div\u003e\\n      \u003cdiv class=\\\"col-8\\\"\u003e\\n        \u003cdiv class=\\\"border p-2 rounded\\\" v-html=\\\"review\\\"\u003e\u003c/div\u003e\\n      \u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cdiv class=\\\"border p-2 rounded mb-3 d-flex justify-content-end\\\"\u003e\\n      \u003cbutton class=\\\"ms-2 btn btn-warning\\\" @click=\\\"copy\\\"\u003e複製 HTML\u003c/button\u003e\\n      \u003cbutton class=\\\"ms-2 btn btn-secondary\\\" @click=\\\"showTool = !showTool\\\"\u003e{{showTool ? '關閉模板編輯' : '編輯模板'}}\u003c/button\u003e\\n    \u003c/div\u003e\\n    \u003cdiv class=\\\"mb-3\\\"\u003e\\n        \u003ctextarea class=\\\"form-control\\\" rows=\\\"20\\\" v-if=\\\"showTool\\\" v-model=\\\"templates[index]\\\" style=\\\"font-family: monospace;\\\"\u003e\u003c/textarea\u003e\\n    \u003c/div\u003e\\n    \u003cdiv\u003e\\n      \u003cpre class=\\\"alert alert-warning\\\" style=\\\"text-align: left;\\\"\u003e{{ review }}\u003c/pre\u003e\\n    \u003c/div\u003e\\n  \u003c/div\u003e\\n  \u003cscript src=\\\"https://unpkg.com/vue@3/dist/vue.global.js\\\"\u003e\u003c/script\u003e\\n\u003c/body\u003e\\n\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"const templatesEl = [...document.querySelectorAll('#templates \u003e div')]\\nVue.createApp({\\n    data() {\\n        return {\\n            templates: templatesEl.map(el =\u003e el.innerHTML),\\n            names: templatesEl.map(el =\u003e el.dataset.name),\\n            index: 0,\\n            data: {},\\n            showTool: false,\\n        }\\n    },\\n    methods: {\\n        copy() {\\n            navigator.clipboard.writeText(this.review).then(() =\u003e alert('複製成功！'), () =\u003e alert('複製失敗'))\\n        },\\n    },\\n    computed: {\\n        template() {\\n            return this.templates[this.index] || ''\\n        },\\n        fields() {\\n            const regexp = /\\\\{\\\\{.*\\\\}\\\\}/g\\n            const fields = [...this.template.matchAll(regexp)].map(item =\u003e item[0].slice(2, -2))\\n            return fields.map(key =\u003e {\\n                const options = key.split('|').map(opt =\u003e opt.trim())\\n                const isSelect = options.length \u003e 1\\n                return {\\n                    label: isSelect ? '下拉選單': key, type: isSelect ? 'select': 'text', options, key\\n                }\\n            })\\n        },\\n        review() {\\n            let htmlString = this.templates[this.index]\\n            this.fields.forEach(field =\u003e {\\n                htmlString = htmlString.replaceAll(`{{${field.key}}}`, this.data[field.key] || `{{${field.key}}}`)\\n            })\\n            return htmlString\\n        },\\n    },\\n}).mount('#app')\"}","created_at":"2022-10-15T11:21:33.600+08:00","updated_at":"2022-10-15T14:12:30.434+08:00","name":"HTML 信件產生器","language":"web","screenshot":{"url":"/uploads/project/screenshot/447685/4e5aa6528be4d7601fb31272c6e2e0c0.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":307,"hashid":"qmds3gdwd","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}