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) => {