From da7f2d6475c1520558e5fd6d18bdaea1ad7ac359 Mon Sep 17 00:00:00 2001 From: moecinnamo Date: Tue, 25 Nov 2025 16:49:22 +0800 Subject: [PATCH] Please add the language selection interface (although it is not yet completed) --- internal/handler/install.go | 30 ++++++----- internal/handler/web/css/install.css | 79 ++++++++++++++++++++++++++-- internal/handler/web/js/i18n.js | 8 ++- internal/handler/web/js/install.js | 19 ++++++- 4 files changed, 117 insertions(+), 19 deletions(-) diff --git a/internal/handler/install.go b/internal/handler/install.go index 8f8fb2a..e6fdecc 100644 --- a/internal/handler/install.go +++ b/internal/handler/install.go @@ -7,22 +7,26 @@ import ( "github.com/OmniX-Space/MeowBox-Core/internal/service" ) +func StartInstall(config *service.Config) { + log.Println("[Info] Starting installation process.") + server := service.CreateWebService(config) + router := http.NewServeMux() + router.Handle("/", RouteInstall()) + staticRouter := RouteStaticFiles() + router.Handle("/favicon.ico", staticRouter) + router.Handle("/css/", staticRouter) + router.Handle("/font-awesome/", staticRouter) + router.Handle("/js/", staticRouter) + router.Handle("/img/", staticRouter) + router.Handle("/.well-known/", RouteWebDevTools()) + server.Handler = InjectWebServerHeaders(config, router) + service.ListenWebService(config, server) +} + func CheckInstall(config *service.Config) { if GetInstallLock(config) == false { log.Println("[Info] MeowBox-Core is not installed.") - log.Println("[Info] Starting installation process.") - server := service.CreateWebService(config) - router := http.NewServeMux() - router.Handle("/", RouteInstall()) - staticRouter := RouteStaticFiles() - router.Handle("/favicon.ico", staticRouter) - router.Handle("/css/", staticRouter) - router.Handle("/font-awesome/", staticRouter) - router.Handle("/js/", staticRouter) - router.Handle("/img/", staticRouter) - router.Handle("/.well-known/", RouteWebDevTools()) - server.Handler = InjectWebServerHeaders(config, router) - service.ListenWebService(config, server) + StartInstall(config) return } log.Println("[Info] MeowBox-Core is already installed.") diff --git a/internal/handler/web/css/install.css b/internal/handler/web/css/install.css index feadb10..37a6bdb 100644 --- a/internal/handler/web/css/install.css +++ b/internal/handler/web/css/install.css @@ -10,18 +10,33 @@ .welcome-button { position: absolute; + height: 32px; + width: 32px; bottom: 64px; - width: 150px; backdrop-filter: blur(3px); border: 0; - border-radius: 20px; + border-radius: 100%; background-color: rgba(255, 255, 255, 0.2); color: white; - padding: 8px; + padding: 6px; font-size: 24px; cursor: pointer; } +.welcome-button i { + position: relative; + top: -3px; + left: -5px; +} + +.welcome-button:hover { + background-color: rgba(255, 255, 255, 0.3); +} + +.welcome-button:active { + background-color: rgba(255, 255, 255, 0.4); +} + .welcome h1 { font-weight: bold; font-size: 64px; @@ -53,6 +68,39 @@ animation: fadeInOut 3s forwards; } +.language-select { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + height: 95%; + border-radius: 20px; + background-color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); +} + +.language-select i { + position: absolute; + color: rgb(0, 102, 255); + font-size: 256px; + left: 32px; +} + +.language-select-container { + position: absolute; + width: calc(100% - 416px); + height: calc(90% - 64px); + right: 32px; + bottom: 64px; + border-radius: 16px; + background-color: rgba(0, 0, 0, 0.08); +} + .container { width: 80%; height: calc(100% - 100px); @@ -60,4 +108,29 @@ backdrop-filter: blur(3px); background-color: rgba(255, 255, 255, 0.2); margin: 50px auto; +} + +@media (max-width: 768px) { + .language-select { + width: 65%; + } + + .language-select i { + font-size: 128px; + left: auto; + top: 64px; + } + + .language-select-container { + width: 80%; + height: calc(100% - 288px); + right: auto; + bottom: 64px; + } +} + +@media (max-width: 480px) { + .language-select { + width: 85%; + } } \ No newline at end of file diff --git a/internal/handler/web/js/i18n.js b/internal/handler/web/js/i18n.js index 9584d4b..4bae23f 100644 --- a/internal/handler/web/js/i18n.js +++ b/internal/handler/web/js/i18n.js @@ -9,11 +9,17 @@ const en = { "hello": "Hello", }; + const zhCN = { "hello": "你好", }; + +const zhTW = { + "hello": "哈囉", +}; + const jp = { "hello": "こんにちは", }; -const languages = [en, zhCN, jp]; \ No newline at end of file +const languages = [en, zhCN, zhTW, jp]; \ No newline at end of file diff --git a/internal/handler/web/js/install.js b/internal/handler/web/js/install.js index 2982481..28f079a 100644 --- a/internal/handler/web/js/install.js +++ b/internal/handler/web/js/install.js @@ -6,7 +6,11 @@ function welcome() { welcomeDiv.classList.add("welcome"); const welcomeButton = document.createElement("button"); welcomeButton.classList.add("welcome-button"); - welcomeButton.innerHTML = 'Next '; + welcomeButton.innerHTML = ''; + welcomeButton.addEventListener("click", () => { + page.removeChild(welcomeDiv); + language_select(); + }); welcomeDiv.appendChild(welcomeButton); function displayNextLanguage() { if (currentIndex >= languages.length) { @@ -26,9 +30,20 @@ function welcome() { page.appendChild(welcomeDiv); } -function install() { +function language_select() { + const languageSelectDiv = document.createElement("div"); + languageSelectDiv.classList.add("language-select"); + const languageIcon = document.createElement("i"); + languageIcon.classList.add("fa-solid", "fa-earth-americas"); + languageSelectDiv.appendChild(languageIcon); + const languageSelectContainer = document.createElement("div"); + languageSelectContainer.classList.add("language-select-container"); + languageSelectDiv.appendChild(languageSelectContainer); + page.appendChild(languageSelectDiv); } +function env_detection() { } + // Load external script function loadScript(scriptUrl) { return new Promise((resolve, reject) => {