diff --git a/CNAME b/CNAME
new file mode 100644
index 0000000..09a48df
--- /dev/null
+++ b/CNAME
@@ -0,0 +1 @@
+bcspanel-web-login-preview.bddjr.com
\ No newline at end of file
diff --git a/api-login/color-scheme b/api-login/color-scheme
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fa15ff3
--- /dev/null
+++ b/index.html
@@ -0,0 +1 @@
+<script> document.location.assign("/login/") </script>
diff --git a/login/assets/index.css b/login/assets/index.css
new file mode 100644
index 0000000..3234024
--- /dev/null
+++ b/login/assets/index.css
@@ -0,0 +1 @@
+*{font-family:system-ui;color-scheme:light;transition:background-color .2s}div{margin:0}a{text-decoration:underline 1px;cursor:pointer}body{height:100%;margin:0;min-width:300px;display:flex}.main{background-color:#fff;max-width:400px;min-width:300px;box-shadow:0 0 12px #0000001f;border-radius:12px;border:1px solid #e4e7ed;margin:auto;padding:20px;width:100%;text-align:center}.titleBox{display:flex;align-items:center;justify-content:space-between;min-width:100%;white-space:nowrap}.titleBoxLeft{display:flex;justify-content:flex-start;align-items:center;padding-left:2px}.titleBoxRight{display:flex;justify-content:space-between;align-items:center;width:153px}.titleBoxImgHide .titleBoxRight{width:70px}.loginTitleTab{background-color:#d3d3d3;width:1px;height:24px;margin:0 9px}.titleBox:not(.titleBoxImgHide) #titleImg-BCSP{display:none}.titleBoxImgHide #titleImg-BCSPanel{display:none}.loginTitle{font-size:20px;cursor:pointer;text-decoration:none;color:#000;background:none;border:none;padding:0}.loginTitle:hover{color:#0072eb}.loginTitleSelect{text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:#0072eb;text-underline-offset:8px;color:#0069da;cursor:default}.form{border:1px solid lightgray;background-color:#d3d3d3;border-radius:8px;overflow:hidden;margin:16px 0}input{width:100%;height:40px;padding:0 8px;font-size:14px;border:1px solid lightgray;outline-color:#0072eb;outline-width:2px;outline-offset:-2px}input:focus{outline-style:solid}input:first-child{border-radius:8px 8px 0 0}.inputLastChild{border-radius:0 0 8px 8px}.divLoginButton{display:block flex;justify-content:space-between;width:100%}.loginStatus{margin:0;text-align:left;font-size:16px;line-height:24px}.forgotPassword{color:gray;font-size:14px}.loginbutton{width:100px;padding:8px;height:100%;color:#fff;background-color:#1987fd;border-style:none;border-radius:8px;font-size:18px;margin:0;float:right;cursor:pointer;transition:background-color .2s}.loginbutton:hover{background-color:#0072eb}.loginbutton:active{background-color:#004ea2}.loginbutton:disabled{background-color:#a2cfff;cursor:no-drop}.button_lang{text-align:center;font-size:24px;width:32px;height:28px;padding:0;border:none;text-decoration:none;background-color:#0000;color:#fff;cursor:pointer}.button_lang>svg>path{fill:#000}.div_change_lang{position:relative;display:inline-block}.div_change_lang_content{display:none;width:70px;height:auto!important;background-color:#fff;border-radius:8px;padding:10px 14px;margin-left:-33px;line-height:28px;box-shadow:0 0 8px gray}.div_change_lang_content_a{color:#000}.div_change_lang_content_a:hover{color:#646464}.div_change_lang_content_a:active{color:#a0a0a0}.div_change_lang:hover .div_change_lang_content{display:table;position:absolute;left:0;right:0}footer{font-size:14px;margin-top:16px}footer p{margin:6px auto}footer :last-child{margin-bottom:0}footer a{color:gray}html.dark *{color-scheme:dark}html.dark p{color:#fff}html.dark .main{background-color:#1d1e1f;border:1px solid #414243}html.dark .loginTitleTab{background-color:gray}html.dark .loginTitle{color:#fff}html.dark .loginTitle:hover{color:#1aadff}html.dark .loginTitleSelect{text-decoration-color:#1aadff;color:#1aadff}html.dark .form{border-color:gray;background-color:gray}html.dark input{color-scheme:light;color:#fff;background-color:#343434;border-color:gray;outline-color:#1aadff}html.dark .loginbutton{background-color:#0066d3}html.dark .loginbutton:hover{background-color:#0072eb}html.dark .loginbutton:active{background-color:#004ea2}html.dark .loginbutton:disabled{background-color:#212a34}html.dark .div_button_lang{color:#000}html.dark .div_change_lang_content{background-color:#333}html.dark .div_change_lang_content_a{color:#fff}html.dark .div_change_lang_content_a:hover{color:#d1d1d1}html.dark .div_change_lang_content_a:active{color:#a0a0a0}html.dark .button_lang>svg>path{fill:#fff}
diff --git a/login/assets/index.js b/login/assets/index.js
new file mode 100644
index 0000000..f5fe073
--- /dev/null
+++ b/login/assets/index.js
@@ -0,0 +1 @@
+function e(e,t,o){t?e.classList.add(o):e.classList.remove(o)}const t={en:{langName:"English",loginTitleLogin:"Login",loginTitleRegister:"Register",form_username:"User Name",form_password:"Password",form_repeat_password:"Repeat Your Password",form_verification_code:"Verify Code",loginStatus:{status:{not_logged_in:"Not logged in",user_name_or_password_not_filled_in:"The user name or password is not entered",the_verification_code_is_not_entered:"The verify code is not entered",attempting_to_login:"Attempting to login……",login_failed:"Login failed, {{error}}",login_succeeded:"Login succeeded ✔",do_not_enter_two_different_passwords:"Don't enter two different passwords",wrong_username_or_password:"Wrong user name or password",wrong_verification_code:"Wrong verify code",please_try_again:"Please try again",password_strength_is_insufficient:"The password is not strong enough. It must contain uppercase and lowercase letters and digits and cannot be less than 12 characters in length",password_too_long:"The password length exceeds 128 characters",incorrect_username_format:"User name format is wrong, it must match the regular expression ^[0-9a-zA-Z\\-_]{1,32}$"}},forgotPassword:"Forgot Password",loginbutton:{status:{login:"Login",register:"Sign Up"}}},"zh-CN":{langName:"简体中文",loginTitleLogin:"登录",loginTitleRegister:"注册",form_username:"用户名",form_password:"密码",form_repeat_password:"重复密码",form_verification_code:"验证码",loginStatus:{status:{not_logged_in:"未登录",user_name_or_password_not_filled_in:"未填写用户名或密码",the_verification_code_is_not_entered:"未填写验证码",attempting_to_login:"正在尝试登录……",login_failed:"登录失败，{{error}}",login_succeeded:"登录成功 ✔",do_not_enter_two_different_passwords:"不能输入两个不同的密码",wrong_username_or_password:"用户名或密码错误",wrong_verification_code:"验证码错误",please_try_again:"请重试",the_username_already_exists:"用户名已存在",password_strength_is_insufficient:"密码强度不足，必须含有大写、小写字母和数字，长度不能小于12",password_too_long:"密码长度超过了128个字符",incorrect_username_format:"用户名格式错误，必须匹配正则表达式 ^[0-9a-zA-Z\\-_]{1,32}$"}},forgotPassword:"忘记密码",loginbutton:{status:{login:"登录",register:"注册"}}}},o=Object.keys(t),n={"en-US":"en","en-GB":"en","zh-Hans-CN":"zh-CN"},s={};var i;const r="BCSPanelI18nLangName";function a(e,o=!1){if("string"!=typeof e&&(e=localStorage.getItem(r)),e&&"default"!==e)return i=Object.keys(t).includes(e)?e:"en",localStorage.setItem(r,i),void(o||d());localStorage.removeItem(r);for(let s of navigator.languages)if(Object.hasOwn(n,s)&&(s=n[s]),Object.hasOwn(t,s))return i=s,void(o||d());i="en",o||d()}function l(){self.divLoginButton.style.height="",self.divLoginButton.style.height=document.getElementsByClassName("loginStatus")[0].offsetHeight+"px";var e=0;if("zh-CN"===i)e=0;else e=292;const t=self.titleBox.classList,o="titleBoxImgHide";self.divmain2.offsetWidth<e+24?t.add(o):t.remove(o)}function d(e,o,n,r=!1){const a=t[i];function d(e,t,o){const n=document.querySelectorAll(`[i18n_id="${e}"]`);if(0==n.length)return;let i=a[e];if("object"==typeof i)if(o?s[e]=o:o=s[e],void 0===t&&(t=n[0].attributes.i18n_statu?.value),i=i.status[t],i){if(o)for(let s in o)i=i.replace(`{{${s}}}`,o[s])}else i=t;for(const s of n){const e=s.attributes?.i18n_statu;if(void 0!==e&&(e.value=t),!r){const e=s.attributes.i18n_property_name.value;s[e]=i;const t=s.attributes.i18n_mirror_elementIds?.value?.split(",");if(t)for(const o of t){const t=document.getElementById(o);t&&(t[e]=i)}}}}if(e)d(e,o,n);else for(let t in a)"langName"!=t&&d(t,o,n);l()}function c(e,t=void 0,o=void 0){d("loginStatus",e,o),void 0!==t&&(self.loginStatus.style.color=t)}function f(e,...t){for(const o of t)o.style.display=e?"":"none"}a(null,!0);var _=!1;function g(){return _}function u(t){if(_==t)return;_=t,f(t,self.repeat_password,self.verification_code),d("loginbutton",t?"register":"login",void 0,!1);const o="loginTitleSelect";e(self.loginTitleLogin,!t,o),e(self.loginTitleRegister,t,o),e(self.password,!t,"inputLastChild")}const m={login_api:"../api/login/login",login_success_redirect(){location.replace("../")}},p=e=>new Promise((t=>{setTimeout(t,e)}));function w(e){self.loginbutton.disabled=e}var v=null;async function h(){if(!self.loginbutton.disabled){var e=!1,t=null;try{let o=function(e,t="user_name_or_password_not_filled_in"){const o=document.getElementById(e);return""===o.value&&(c(t,"red"),o.focus(),!0)};if(v&&(v(),await p(10)),o("username"))return;if(o("password"))return;if(self.password.value.length>128)return void c("password_too_long","red");if(g()){{const e=self.password.value;if(e.length<12||!/[a-z]/.test(e)||!/[A-Z]/.test(e)||!/[0-9]/.test(e))return void c("password_strength_is_insufficient","red")}if(o("repeat_password"))return;if(o("verification_code","the_verification_code_is_not_entered"))return;if(self.password.value!==self.repeat_password.value)return void c("do_not_enter_two_different_passwords","red")}w(!0),c("attempting_to_login","gray");const n={secure:isSecureContext,isregister:g(),username:self.username.value,password:self.password.value,verification_code:self.verification_code.value},s=new AbortController;v=()=>{e=!0,s?.abort()},t=setTimeout((()=>{w(!1)}),1300);const i=await fetch(m.login_api,{method:"POST",body:JSON.stringify(n),signal:s.signal});if(i.ok)c("login_succeeded",document.children[0].classList.contains("dark")?"lightgreen":"green"),w(!0),m.login_success_redirect();else{if(401!=i.status)throw i.status;{console.error(401);const e=(await i.text()).trim();if(""==e)throw 401;c(e,"red"),await p(1e3),w(!1)}}}catch(o){if(e)return;console.error(o),c("login_failed","red",{error:String(o)}),w(!1)}finally{null!=t&&clearTimeout(t),v=null}}}const y=self.matchMedia("(prefers-color-scheme: dark)");let L="";try{L=(await(await fetch("../api/color-scheme/")).text()).trim()}catch(S){console.error(S)}function b(){e(document.children[0],L?"dark"==L:y.matches,"dark")}b(),L||y.addEventListener("change",b),self.loading_style?.remove();const E=document.createElement("template");async function T(){function e(e,t){switch(typeof t){case"function":var o=e=>{"Enter"==e.key&&t()};break;case"string":o=e=>{"Enter"==e.key&&document.getElementById(t).focus()};break;default:throw new TypeError("Don't input other type to func!")}document.getElementById(e).addEventListener("keyup",o)}function t(e){a(e.target.id.replace("changeLang_",""))}e("username","password"),e("password",(()=>{g()?self.repeat_password.focus():h()})),e("repeat_password","verification_code"),e("verification_code",h),self.loginbutton.addEventListener("click",h),self.loginTitleLogin.addEventListener("click",(()=>u(!1))),self.loginTitleRegister.addEventListener("click",(()=>u(!0)));for(const n of o.concat("default"))document.getElementById("changeLang_"+n)?.addEventListener("click",t);self.footer.appendChild(E.content.cloneNode(!0)),self.addEventListener("resize",l),f(!0,self.divmain),d()}E.innerHTML=await(await fetch("./config/footer.html")).text(),"loading"==document.readyState?document.addEventListener("DOMContentLoaded",T):await T();
diff --git a/login/config/footer.html b/login/config/footer.html
new file mode 100644
index 0000000..d6736b1
--- /dev/null
+++ b/login/config/footer.html
@@ -0,0 +1,2 @@
+<!-- <p><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">京ICP备99999999号-9</a></p> -->
+<!-- <p><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=99999999999999">京公网安备99999999999999号</a></p> -->
\ No newline at end of file
diff --git a/login/icon/BCSP-64x64.png b/login/icon/BCSP-64x64.png
new file mode 100644
index 0000000..c22a04d
Binary files /dev/null and b/login/icon/BCSP-64x64.png differ
diff --git a/login/icon/BCSPanel.png b/login/icon/BCSPanel.png
new file mode 100644
index 0000000..5a9911b
Binary files /dev/null and b/login/icon/BCSPanel.png differ
diff --git a/login/ie/icon/chrome-32-ie6.png b/login/ie/icon/chrome-32-ie6.png
new file mode 100644
index 0000000..e672fd6
Binary files /dev/null and b/login/ie/icon/chrome-32-ie6.png differ
diff --git a/login/ie/icon/edge-32-ie6.png b/login/ie/icon/edge-32-ie6.png
new file mode 100644
index 0000000..feff2e7
Binary files /dev/null and b/login/ie/icon/edge-32-ie6.png differ
diff --git a/login/ie/icon/firefox-32-ie6.png b/login/ie/icon/firefox-32-ie6.png
new file mode 100644
index 0000000..f94ffd5
Binary files /dev/null and b/login/ie/icon/firefox-32-ie6.png differ
diff --git a/login/ie/icon/supermium-32-ie6.png b/login/ie/icon/supermium-32-ie6.png
new file mode 100644
index 0000000..7919c44
Binary files /dev/null and b/login/ie/icon/supermium-32-ie6.png differ
diff --git a/login/ie/index.html b/login/ie/index.html
new file mode 100644
index 0000000..7aa3fae
--- /dev/null
+++ b/login/ie/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<!-- v1.2.5 , MIT license. https://github.com/bddjr/iehtml -->
+<html>
+
+<head>
+	<meta charset="UTF-8" />
+
+	<script type="module">
+		// ES2022
+		if ((class {
+			static {
+				this.a = location.hash[1]
+			}
+		}).a == '/') {
+			stop()
+			try { document.getElementsByTagName('html')[0].style.display = 'none' } catch (e) { }
+			location.replace(location.origin + location.hash.slice(1))
+		}
+	</script>
+
+	<meta name="robots" content="noindex, nofollow" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Please upgrade or change browser</title>
+	<link rel="shortcut icon" href="data:," />
+	<link rel="icon" href="data:," />
+	<style>
+		* {
+			font-family: Arial, "Microsoft Yahei", system-ui;
+		}
+
+		html {
+			background-color: #ececec;
+		}
+
+		body {
+			margin: 32px auto;
+			text-align: center;
+		}
+
+		.divBrowsers {
+			width: 280px;
+			max-width: 100%;
+			margin: 50px auto;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+
+		.browsera {
+			color: #0069c2;
+			border: 2px solid #ffffff;
+			background-color: #ffffff;
+			text-decoration: none;
+			display: inline-block;
+			cursor: pointer;
+			width: 100px;
+			padding: 11px 8px;
+			margin: 8px;
+		}
+
+		.browsera:hover {
+			border-color: #0069c2;
+		}
+
+		img {
+			background: none;
+			border-width: 0;
+			width: 32px;
+			height: 32px;
+			display: block;
+			margin: 0 auto;
+		}
+
+		.browserspantitle {
+			font-size: 18px;
+			line-height: 22px;
+			height: 22px;
+			cursor: pointer;
+			display: block;
+			margin: 12px 0;
+		}
+
+		.browserspanVersion {
+			color: #808080;
+			font-size: 14px;
+			display: block;
+		}
+
+		.h1 {
+			font-weight: normal;
+		}
+
+		.footerLinkP {
+			margin: 8px auto;
+		}
+
+		.footerLinkA {
+			color: #808080;
+			text-decoration: none;
+			font-size: 14px;
+		}
+
+		.footerLinkA:hover {
+			text-decoration: underline;
+		}
+	</style>
+</head>
+
+<body>
+	<h1 class="h1" id="h1">Please upgrade or change browser</h1>
+	<div class="divBrowsers">
+		<a class="browsera" target="_blank" rel="noopener" href="https://www.google.cn/chrome/">
+			<img src="./icon/chrome-32-ie6.png" alt />
+			<span class="browserspantitle">Chrome</span>
+			<span class="browserspanVersion">≥ 94</span>
+		</a>
+		<a class="browsera" target="_blank" rel="noopener" href="https://www.microsoft.com/edge/download">
+			<img src="./icon/edge-32-ie6.png" alt />
+			<span class="browserspantitle">Edge</span>
+			<span class="browserspanVersion">≥ 94</span>
+		</a>
+		<a class="browsera" target="_blank" rel="noopener" href="http://win32subsystem.live/supermium/">
+			<img src="./icon/supermium-32-ie6.png" alt />
+			<span class="browserspantitle">Supermium</span>
+			<span class="browserspanVersion">≥ 115</span>
+		</a>
+		<a class="browsera" target="_blank" rel="noopener" href="https://www.mozilla.org/firefox/new/">
+			<img src="./icon/firefox-32-ie6.png" alt />
+			<span class="browserspantitle">Firefox</span>
+			<span class="browserspanVersion">≥ 93</span>
+		</a>
+	</div>
+
+	<div class="footer">
+		<p class="footerLinkP">
+			<a class="footerLinkA" href="https://github.com/bddjr/iehtml" target="_blank" rel="noopener">iehtml</a>
+		</p>
+	</div>
+
+	<script>
+		(function (langs) {
+			if (!langs[0]) return;
+			// The last item cannot be ended with a comma
+			// 最后一项行尾不能加逗号
+			var allLangs = {
+				"anotherName": {
+					"en": "en-us",
+					"en-gb": "en-us",
+					"zh-hans-cn": "zh-cn"
+				},
+				"values": {
+					"en-us": "",
+					"zh-cn": "请升级或更换浏览器"
+				}
+			};
+			for (var i = 0; i < langs.length; i++) {
+				var name = langs[i].toLowerCase();
+				var v = allLangs.values[allLangs.anotherName[name] || name];
+				if (v) document.title = h1.innerHTML = v;
+				if (v !== undefined) return;
+			}
+		})(navigator.languages || [navigator.language || navigator.browserLanguage])
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/login/index.html b/login/index.html
new file mode 100644
index 0000000..d332a92
--- /dev/null
+++ b/login/index.html
@@ -0,0 +1 @@
+<html><head><meta charset=utf-8><script>try{eval("(class { static { this.a = 1 } })").a.b}catch(t){window.stop&&stop();try{document.getElementsByTagName("html")[0].style.display="none"}catch(t){}document.location.replace("./ie/#"+document.location.pathname+document.location.search+document.location.hash)}</script><title id=title>BCSPanel</title><meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0"><meta name=robots content="noindex, nofollow"><style>html{background-color:#cce8fe;--body-dark-bgcolor:#1d3043}html.dark{background-color:var(--body-dark-bgcolor)}</style><style id=loading_style>@media (prefers-color-scheme:dark){html{background-color:var(--body-dark-bgcolor)}}</style><link rel=icon href=icon/BCSP-64x64.png><link rel=preload as=fetch crossorigin href=../api/color-scheme/ ><link rel=preload as=fetch crossorigin href=config/footer.html><script type=module crossorigin src=./assets/index.js></script><link rel=stylesheet crossorigin href=./assets/index.css></head><body><div id=divmain class=main style=display:none><div id=divmain2><div id=titleBox class=titleBox><div id=titleBoxLeft class=titleBoxLeft><button id=loginTitleLogin class="loginTitle loginTitleSelect" i18n_id=loginTitleLogin i18n_property_name=innerText i18n_statu=login></button><div class=loginTitleTab></div><button id=loginTitleRegister class=loginTitle i18n_id=loginTitleRegister i18n_property_name=innerText i18n_statu=login></button></div><div id=titleBoxRight class=titleBoxRight><div id=div_change_lang class=div_change_lang><button class=button_lang><svg viewBox="0 0 24 24" height=24 style=transform:translateY(1px)><path d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg></button><div id=div_change_lang_content class=div_change_lang_content><a id=changeLang_default class=div_change_lang_content_a>Default</a><br><a id=changeLang_zh-CN class=div_change_lang_content_a>简体中文</a><br><a id=changeLang_en class=div_change_lang_content_a>English</a><br></div></div><img id=titleImg-BCSP alt="" draggable=false src=icon/BCSP-64x64.png height=24> <img id=titleImg-BCSPanel alt="" draggable=false src=icon/BCSPanel.png height=20></div></div><form id=form class=form><input id=username name=username autocomplete=username maxlength=32 placeholder="" i18n_id=form_username i18n_property_name=placeholder><br><input class=inputLastChild type=password id=password name=password autocomplete=current-password maxlength=128 placeholder="" i18n_id=form_password i18n_property_name=placeholder><br><input style=display:none type=password id=repeat_password name=repeat_password maxlength=128 autocomplete=off i18n_id=form_repeat_password i18n_property_name=placeholder placeholder=""> <input style=display:none class=inputLastChild id=verification_code name=verification_code maxlength=16 autocomplete=off i18n_id=form_verification_code i18n_property_name=placeholder placeholder=""></form><div id=divLoginButton class=divLoginButton><p class=loginStatus><span id=loginStatus i18n_id=loginStatus i18n_property_name=innerText i18n_statu=not_logged_in></span><br><a id=forgotPassword class=forgotPassword href=https://bcspanel.bddjr.com/docs/forgotPassword target=_blank rel=noopener i18n_id=forgotPassword i18n_property_name=innerText></a></p><button id=loginbutton class=loginbutton i18n_id=loginbutton i18n_property_name=innerText i18n_statu=login></button></div><footer id=footer><p><a href=https://github.com/bddjr/BCSPanel target=_blank rel=noopener>BCSPanel</a></p></footer></div></div></body></html>
\ No newline at end of file
diff --git a/web-login/index.html b/web-login/index.html
new file mode 100644
index 0000000..fa15ff3
--- /dev/null
+++ b/web-login/index.html
@@ -0,0 +1 @@
+<script> document.location.assign("/login/") </script>
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..fa15ff3
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1 @@
+<script> document.location.assign("/login/") </script>