diff --git a/html/index.html b/html/index.html index dfe46cb..75f20c0 100644 --- a/html/index.html +++ b/html/index.html @@ -87,17 +87,21 @@

我的動畫生涯個人喜好表

加入作品

-
+
- +
  
- - + +
diff --git a/html/index.js b/html/index.js index 5a3338a..715abbb 100644 --- a/html/index.js +++ b/html/index.js @@ -41,8 +41,7 @@ function addRow({ numColumns, descriptionList }) { const row = table.insertRow(-1); for (let i = 0; i < numColumns; i++) { const cell = row.insertCell(i); - cell.innerHTML = - `
data:,
`; + cell.innerHTML = `
data:,
`; targetImg = cell.querySelector(".cell-img"); targetDescription = cell.querySelector(".cell-description"); if (descriptionList) { @@ -51,7 +50,7 @@ function addRow({ numColumns, descriptionList }) { getRandomArbitrary(250, 300) + "/" + getRandomArbitrary(400, 450), - descriptionList[i], + descriptionList[i] ); } else { editTargetCell( @@ -59,7 +58,7 @@ function addRow({ numColumns, descriptionList }) { getRandomArbitrary(250, 300) + "/" + getRandomArbitrary(400, 450), - "點擊選擇", + "點擊選擇" ); } } @@ -217,7 +216,8 @@ async function triggerSearch() { }); imgContainer.appendChild(img); } - searchResult.innerHTML = "找不到想要的圖片嗎？" + + searchResult.innerHTML = + "找不到想要的圖片嗎？" + `在Google圖片搜尋` + "
(右鍵複製圖片後在此貼上)
"; } @@ -229,6 +229,7 @@ async function searchWikiTitle(keyword) { keyword = encodeURIComponent(keyword); // wiki page title search // docs: https://www.mediawiki.org/wiki/API:Opensearch + let url = new URL("https://zh.wikipedia.org/w/api.php"); url.searchParams.set("action", "opensearch"); url.searchParams.set("limit", "10"); @@ -237,6 +238,7 @@ async function searchWikiTitle(keyword) { url.searchParams.set("format", "json"); url.searchParams.set("origin", "*"); url.searchParams.set("search", keyword); + try { let response = await fetch(url); let json = await response.json(); @@ -245,6 +247,7 @@ async function searchWikiTitle(keyword) { keyword = json[1][0]; // langlinks search // docs: https://www.mediawiki.org/wiki/API:Langlinks + // url = // `?action=query&lllimit=1&prop=langlinks&lllang=ja&titles=${keyword}&format=json&origin=*`; url = new URL("https://zh.wikipedia.org/w/api.php"); @@ -255,6 +258,7 @@ async function searchWikiTitle(keyword) { url.searchParams.set("format", "json"); url.searchParams.set("origin", "*"); url.searchParams.set("titles", keyword); + response = await fetch(url); json = await response.json(); @@ -393,21 +397,18 @@ const templateOptions = [ "最過譽", "最離譜", "最討厭", - "最治癒", - "最感動", - "最虐心", - "最被低估", - "最過譽", - "最離譜", - "最討厭", "最暴死", "最佳原創", "最佳漫改", + "最佳輕改", + "最佳劇場版", "最荒謬", "最後悔看", "最冷門神作", "最佳OP", "最佳ED", + "最期待續作", + "最意猶未盡", ]; function addOption(options) { diff --git a/html/style.css b/html/style.css index 917197d..170c1cf 100644 --- a/html/style.css +++ b/html/style.css @@ -1,3 +1,224 @@ +body { + display: flex; + justify-content: center; + flex-direction: column; + font-family: "Noto Sans TC", sans-serif; + margin: 0; + font-weight: 500; +} +main { + max-width: 800px; + margin: 0 auto; +} +.main-section { + padding: 1rem 1rem; +} +@media only screen and (min-width: 320px) and (max-width: 479px) { + main { + padding: 0; + } + .dialog-content { + width: 85vw; + } + #my_table th, + td { + height: 150px !important; + } + #my_table { + font-size: 0.9rem !important; + } + #table_container_wrapper { + margin: 0 !important; + } + h1 { + font-size: 1.5rem; + } +} +@media only screen and (min-width: 480px) and (max-width: 767px) { +} +@media only screen and (min-width: 768px) and (max-width: 991px) { +} +@media only screen and (min-width: 992px) { + main { + padding: 1rem; + } +} +footer { + text-align: center; + font-size: 12px; + padding-top: 15px; +} +footer a { + text-decoration: none; + color: #666; +} +footer span { + color: #999; + padding: 0 5px; +} +#table_container { + margin: 1rem; +} +#table_container_wrapper { + margin: 5vh auto; +} +#table_container { + background-color: white; +} +#table_container h1 { + top: 50px; + text-align: center; +} +#table_container span { + color: silver; +} +#table_container a { + color: silver; + text-decoration: none; +} +#my_table { + border-collapse: collapse; + border: 3px solid #000000; + cursor: pointer; + font-size: 1.2rem; +} +#my_table th, +td { + border: 1px solid #000000; + width: 250px; + height: 200px; + text-align: center; +} +.cell-wrapper { + position: relative; + height: 100%; +} +.cell-wrapper img { + height: auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -58%); + max-width: 100%; + max-height: 85%; +} +.cell-wrapper div { + position: absolute; + bottom: 0; + width: 98%; + padding: 5px 0; +} +.dialog { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9999; + max-height: 100%; + overflow-y: auto; +} +.dialog-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 10px #888; +} +.dialog-header { + text-align: center; + margin-bottom: 20px; +} +.dialog-body { + margin-bottom: 20px; + display: flex; + gap: 15px; + flex-direction: column; + max-height: 80vh; + overflow-y: auto; +} +.dialog-footer { + display: flex; + justify-content: center; +} +button, +#img_upload_label_browse { + padding: 10px 20px; + border-radius: 5px; + background-color: #1a8cd8; + color: white; + border: none; + cursor: pointer; + font-family: "Noto Sans TC", sans-serif; + font-size: 1rem; +} +#img_container { + display: flex; + flex-wrap: wrap; + justify-content: center; + max-height: 50vh; + overflow-y: auto; +} +#img_container img { + max-width: 150px; + height: auto; + object-fit: contain; + margin: 10px; + outline: none; + transition: outline 0.1s ease; +} +#img_container img:hover { + outline: 3px solid #1a8cd8; +} +#img_preview { + width: 200px; + height: auto; + margin: auto; +} +#save_button { + width: 100%; + text-align: center; +} +.buttons-container { + display: flex; + gap: 10px; +} +label { + font-size: 1.2rem; +} + +#search_work_input, +#img_file_input, +#description { + font-family: "Noto Sans TC", sans-serif; +} + +#search_work_input { + width: 65%; + margin-left: 0.5rem; +} + +.dialog-title { + white-space: nowrap; +} + +#img_upload_label { + display: flex; + align-items: center; + cursor: pointer; +} + +#img_upload_label_browse { + margin-left: 1rem; +} + +#description { + margin-left: 0.5rem; +} body { display: flex; justify-content: center; @@ -222,4 +443,5 @@ dialog h2 { size: auto; size: A4; } + }