w | Programming Project | OrangeApple Learning Platform

{"id":569162,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003e網頁導覽\u003c/title\u003e\\n    \u003cstyle\u003e\\n        /* CSS 樣式設定可以放在這裡 */\\n\\n        /* 導覽列樣式 */\\n        ul.navbar {\\n            list-style-type: none;\\n            margin: 0;\\n            padding: 0;\\n            background-color: #000;\\n            /* 將背景顏色改為深黑色 */\\n        }\\n\\n        ul.navbar li {\\n            display: inline-block;\\n        }\\n\\n        ul.navbar li a {\\n            display: block;\\n            padding: 10px 20px;\\n            text-decoration: none;\\n            color: #fff;\\n            /* 將文字顏色改為白色 */\\n        }\\n\\n        ul.navbar li a:hover {\\n            background-color: #555;\\n            /* 將滑鼠懸停時的背景顏色改為深灰色 */\\n        }\\n\\n        .logo {\\n            display: inline-block;\\n            margin-right: 10px;\\n            vertical-align: middle;\\n        }\\n    \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cul class=\\\"navbar\\\"\u003e\\n        \u003c!-- Logo圖片 --\u003e\\n        \u003cli\u003e\u003cimg src=\\\"logo.png\\\" alt=\\\"Logo\\\" class=\\\"logo\\\"\u003e\u003c/li\u003e\\n\\n        \u003c!-- 影片創作連結 --\u003e\\n        \u003cli\u003e\u003ca href=\\\"#\\\"\u003e影片創作\u003c/a\u003e\u003c/li\u003e\\n\\n        \u003c!-- 故事繪本連結 --\u003e\\n        \u003cli\u003e\u003ca href=\\\"#\\\"\u003e故事繪本\u003c/a\u003e\u003c/li\u003e\\n\\n        \u003c!-- 圖片作品連結 --\u003e\\n        \u003cli\u003e\u003ca href=\\\"#\\\"\u003e圖片作品\u003c/a\u003e\u003c/li\u003e\\n\\n        \u003c!-- 音樂作品連結 --\u003e\\n        \u003cli\u003e\u003ca href=\\\"#\\\"\u003e音樂作品\u003c/a\u003e\u003c/li\u003e\\n    \u003c/ul\u003e\\n\\n    \u003cdiv style=\\\"display: flex; background-color: #222; color: #fff;\\\"\u003e\\n        \u003c!-- 左側區塊，顯示文字 --\u003e\\n        \u003cdiv style=\\\"flex: 1;\\\"\u003e\\n            \u003cp\u003e\\n                這是影片的內文說明。\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n        \u003c!-- 右側區塊，顯示嵌入影片 --\u003e\\n        \u003cdiv style=\\\"flex: 1;\\\"\u003e\\n            \u003c!-- 嵌入的影片 --\u003e\\n            \u003ciframe src=\\\"https://clipchamp.com/watch/DN5dNRvKc3M/embed\\\" allow=\\\"autoplay\\\" height=\\\"500\\\" width=\\\"100%\\\"\u003e\u003c/iframe\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003cdiv style=\\\"display: flex; flex-wrap: wrap; background-color: #f9f9f9; padding: 50px 0;\\\"\u003e\\n        \u003c!-- 左側區塊，嵌入網頁 --\u003e\\n        \u003cdiv style=\\\"flex-basis: 58.33%; text-align: left;\\\"\u003e\\n            \u003ciframe src=\\\"https://www.canva.com/design/DAFjt53lzSQ/view?embed\\\" width=\\\"100%\\\" height=\\\"600px\\\" frameborder=\\\"0\\\" allowfullscreen=\\\"true\\\"\u003e\u003c/iframe\u003e\\n        \u003c/div\u003e\\n\\n        \u003c!-- 右側區塊，文字說明 --\u003e\\n        \u003cdiv style=\\\"flex-basis: 41.67%; text-align: left;\\\"\u003e\\n            \u003cp\u003e\\n                這裡是故事繪本的內文說明。\\n            \u003c/p\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\\n\\n\\n    \u003cdiv class=\\\"image-gallery\\\"\u003e\\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cimg src=\\\"1.png\\\" alt=\\\"Image 1\\\"\u003e\\n            \u003ch4\u003eImage 1\u003c/h4\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cimg src=\\\"2.png\\\" alt=\\\"Image 2\\\"\u003e\\n            \u003ch4\u003eImage 2\u003c/h4\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cimg src=\\\"3.png\\\" alt=\\\"Image 3\\\"\u003e\\n            \u003ch4\u003eImage 3\u003c/h4\u003e\\n        \u003c/div\u003e\\n        \u003c!-- 其他卡片 --\u003e\\n    \u003c/div\u003e\\n\\n    \u003cstyle\u003e\\n       .music-block {\\n  width: 100%;\\n  background-color: #f0f0f0;\\n  padding: 20px;\\n}\\n\\n.music-list {\\n  list-style-type: none;\\n  padding: 0;\\n  margin: 0;\\n}\\n\\n.music-list li {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  margin-bottom: 10px;\\n  background-color: #f0f0f0;\\n  padding: 10px;\\n}\\n\\n.music-list li:nth-child(even) {\\n  background-color: #f7f7f7;\\n}\\n\\n.music-name {\\n  font-weight: bold;\\n}\\n\\n.music-player {\\n  width: 60%;\\n}\\n\\n\\n\\n\\n    \u003c/style\u003e\\n\\n\\n\u003cdiv class=\\\"music-block\\\"\u003e\\n  \u003cul class=\\\"music-list\\\"\u003e\\n    \u003cli\u003e\\n      \u003cspan class=\\\"music-name\\\"\u003e音樂名稱 1\u003c/span\u003e\\n      \u003caudio class=\\\"music-player\\\" src=\\\"1.mp3\\\" controls\u003e\u003c/audio\u003e\\n    \u003c/li\u003e\\n    \u003cli\u003e\\n      \u003cspan class=\\\"music-name\\\"\u003e音樂名稱 2\u003c/span\u003e\\n      \u003caudio class=\\\"music-player\\\" src=\\\"2.mp3\\\" controls\u003e\u003c/audio\u003e\\n    \u003c/li\u003e\\n  \u003c/ul\u003e\\n\u003c/div\u003e\\n\\n\\n\\n\\n\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2023-07-16T21:52:04.702+08:00","updated_at":"2023-07-17T11:23:18.602+08:00","name":"w","language":"web","screenshot":{"url":"/uploads/project/screenshot/569162/d991e91715a12f8e250302638c9e6b0b.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":323,"hashid":"p93s4pqyj","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":12934487,"file_name":"logo.png","project_id":569162,"asset_id":640576,"created_at":"2023-07-16T21:58:02.147+08:00","updated_at":"2023-07-16T21:58:02.147+08:00"},{"id":12934521,"file_name":"1.png","project_id":569162,"asset_id":655046,"created_at":"2023-07-16T22:35:23.016+08:00","updated_at":"2023-07-16T22:35:23.016+08:00"},{"id":12934431,"file_name":"koding.png","project_id":569162,"asset_id":302342,"created_at":"2023-07-16T21:52:04.707+08:00","updated_at":"2023-07-16T21:52:04.707+08:00"},{"id":12934515,"file_name":"4.png","project_id":569162,"asset_id":655043,"created_at":"2023-07-16T22:35:14.648+08:00","updated_at":"2023-07-16T22:35:14.648+08:00"},{"id":12934516,"file_name":"5.png","project_id":569162,"asset_id":655043,"created_at":"2023-07-16T22:35:14.650+08:00","updated_at":"2023-07-16T22:35:14.650+08:00"},{"id":12934517,"file_name":"3.png","project_id":569162,"asset_id":655044,"created_at":"2023-07-16T22:35:18.292+08:00","updated_at":"2023-07-16T22:35:18.292+08:00"},{"id":12934518,"file_name":"6.png","project_id":569162,"asset_id":655044,"created_at":"2023-07-16T22:35:18.294+08:00","updated_at":"2023-07-16T22:35:18.294+08:00"},{"id":12934519,"file_name":"2.png","project_id":569162,"asset_id":655045,"created_at":"2023-07-16T22:35:22.142+08:00","updated_at":"2023-07-16T22:35:22.142+08:00"},{"id":12934520,"file_name":"7.png","project_id":569162,"asset_id":655045,"created_at":"2023-07-16T22:35:22.144+08:00","updated_at":"2023-07-16T22:35:22.144+08:00"},{"id":12934522,"file_name":"8.png","project_id":569162,"asset_id":655046,"created_at":"2023-07-16T22:35:23.018+08:00","updated_at":"2023-07-16T22:35:23.018+08:00"}]