Spaces:

Privasea
/

Secure-Face-ID-Verification

Running

App Files Files Community

wuping1980 commited on Sep 9, 2023

Commit

b4bef7e

1 Parent(s): c3deaf1

update

Browse files

Files changed (2) hide show

index.html +191 -18
style.css +780 -21

index.html CHANGED Viewed

@@ -1,19 +1,192 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="description" content="FR">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="/assets/css/style.css">
+    <link rel="stylesheet" href="/assets/css/starts.css">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <meta name="viewport" content="width=600px, initial-scale=0.6, maximum-scale=0.8, user-scalable=no">
+    <title>PRIVASEA</title>
+  </head>
+  <body class="bg-black dark-theme  landing-page-demo">
+        <!--Start Page Header-->
+    <div class="wrap mt-5" id="app">
+        <!-- <header>
+            <div>
+              <nav class="flex set-nav set-between">
+                <div class="header-logo"><a class="logo-link" href="/platform/mainpanel.html"><img draggable="false" class="logo-img light-logo" loading="lazy" src="/assets/images/logo.svg" alt="logo"></a></div>
+                <div class="asdie-user user-name flex-align-center" v-if="user_name && user_name!='' && user_name!='null'">
+                    <div title="Switch To Light Mode "><img draggable="false" class="logo-img light-logo" loading="lazy" src="/assets/images/mask_group.svg" alt="logo"></div>
+                    <div class="ml-2">
+                        <span>User name</span>
+                        <span class="name">{{user_name}}</span>
+                    </div>
+                </div>
+              </nav>
+            </div>
+          </header> -->
+          <div class="body-login">
+              <div class="main-box">
+                  <div class="welcome">Welcome to</div>
+                  <div class="header-logo mt-1"><a class="logo-link" href="#"><img draggable="false" class="logo-img light-logo" loading="lazy" src="/assets/images/logo.svg" alt="logo"></a></div>
+                  <div class="body-type mt-1">Login</div>
+                  <div class="input mt-1">
+                    <div class="username mt-2">
+                      <label>Username</label>
+                      <input class="mt-1" v-model="username" type="text" placeholder="Enter Username"></input>
+                    </div>
+                    <div class="password mt-2">
+                      <label>Password</label>
+                      <input class="mt-1" v-model="password" type="password" placeholder="Enter Password"></input>
+                    </div>
+                </div>
+                <div class="text-center mt-6">
+                  <button class="login-btn upper-text change-btn w-100 border-r25" @click="submitForm">login</button>
+                </div>
+                <div class="register-tips mt-2 text-center">
+                  Dont't have an account? <a href="/platform" class="ml-1">Sign up now</a>
+                </div>
+              </div>
+              <div class="notes mt-10">
+                <div>
+                  <div class="dev-team">💡Notes from the dev team: </div>
+                  <ul>
+                    <li>This presentation serves as a demo and is not representative of a fully-fledged commercial product. </li>
+                    <li>While our facial recognition algorithm boasts high accuracy, it's essential to acknowledge that achieving a 100% accuracy rate is not always feasible. In instances of recognition failure, we would recommend attempting the identification process multiple times for optimal results.</li>
+                  </ul>
+                </div>
+            </div>
+          </div>
+    </div>
+    <footer class="copyright">
+      <div class="cc-box">
+        <div class="header-logo"><img draggable="false" class="logo-img light-logo" loading="lazy" src="/assets/images/logo.svg" alt="logo"></div>
+        <div class="c-box flex mt-2">
+          <div class="f1">Made in Göteborg 🇸🇪 © 2023 | Privasea AB | Org No. 559361-0941</div>
+          <div class="f2 flex flex-align-center">
+            <div>Demo Introduction</div>
+            <div><img draggable="false" class="i-icon no-select" src="/assets/images/huggingface.svg"></div>
+            <div class="ml-4"><img draggable="false" class="i-icon no-select" src="/assets/images/discord.svg"></div>
+            <div class="ml-1"><img draggable="false" class="i-icon no-select" src="/assets/images/x.svg"></div>
+          </div>
+        </div>
+        <div class="c-line mt-3"></div>
+        <div class="bt-txt mt-3">Privasea AB, a Swedish entity, is dedicated to the advancement of privacy computing technology and does not engage in any activities related to token launches. Any information regarding coin issuance by Privasea on third-party websites, platforms, IDOs, IEOs, ICOs, or similar platforms is inaccurate. All subsequent updates and announcements will be officially released and verified only through the official website: <a class="a-tg" href="https://www.privasea.ai/" target="_blank">privasea.ai.</a></div>
+    </div>
+     </footer>
+        <!-- End back-to-top Component-->
+      <!-- <div class="set-starts-box" id="starts-box">
+        <div class="star comet"></div>
+        <div class="star comet"></div>
+      </div> -->
+      <!-- <script  src="/assets/js/starts.js"></script> -->
+            <!--     JQuery     -->
+            <script src="/assets/js/jquery-3.6.1.min.js"></script>
+            <!--     swiper     -->
+            <script src="/assets/js/starts.js"></script>
+            <script src="/index.bundle.js"></script>
+            <script src="/assets/js/anima.js"></script>
+            <script src="/assets/js/vue.min.js"></script>
+            <script src="/assets/js/axios.min.js"></script>
+            <script>
+                new Vue({
+                    el: '#app',
+                    data: {
+                      user_name: '',
+                      username:'',
+                      password: '',
+                    },
+                    methods: {
+                      check_is_login(){
+                          // 若已经存在数据则写入cookie直接跳转到主面板；
+                          if(localStorage.getItem('private_key') == null || localStorage.getItem('private_key') == '' ||
+                          localStorage.getItem('user_id') == null || localStorage.getItem('user_id') == '' || getCookie('access_token') == '' || getCookie('access_token') == null) {
+                          }else{
+                            deleteCookie('user_name');
+                            deleteCookie('user_id');
+                            deleteCookie('access_token');
+                            deleteCookie('expires');
+                            sessionStorage.clear();
+                            //setCookie('user_name', localStorage.getItem('user_name'), 3);
+                            //setCookie('user_id', localStorage.getItem('user_id'), 3);
+                            //window.location.href = '/platform/mainpanel.html';
+                          }
+                      },
+                      load_header_user_info(){
+                        let user_name = getCookie('user_name');
+                        if(user_name == null || user_name == 'null' || user_name == '' || user_name == undefined || user_name == 'undefined'){
+                          this.username = '';
+                          return;
+                        }
+                        this.user_name = user_name;
+                        this.username = user_name;
+                      },
+                      submitForm() {
+                        if(this.username == '' || this.password == '') {
+                          showToast('Please enter username and password!', 'error',2);
+                          return false;
+                        }
+                        const usernameRegex = /^[a-zA-Z0-9]+$/;
+                        if (!usernameRegex.test(this.username)) {
+                          showToast('Please make sure your username and password are both between 8 and 16 characters in length!', 'error',3);
+                          return;
+                        }
+                        if(this.username.length < 8 || this.username.length > 16 || this.password.length < 8 || this.password.length > 16) {
+                          showToast('The length of username and password is between 8 and 16','error',3);
+                          return;
+                        }
+                        const formData = {
+                          name: this.username,
+                          password: this.password
+                        };
+                        axios.post('/api/v1/user/login', formData)
+                          .then(response => {
+                            let data = response.data;
+                            if (data.code == 0 ){
+                              let refresh_token = data.data.refresh_token;
+                              let rt_expires = data.data.rt_expires;
+                              setCookie('access_token', refresh_token, 3);
+                              setCookie('expires', rt_expires, 3);
+                              showToast('Login successful, loading panel!', 'success',2);
+                              setTimeout(()=>{
+                                if (localStorage.getItem('user_id') && localStorage.getItem('private_key')){
+                                  window.location.href = '/platform/mainpanel.html';
+                                }else{
+                                  window.location.href = '/platform/importkey.html';
+                                }
+                              },1500);
+                            }else{
+                              if (data.code == '10113'){
+                                showToast("The account name and password you entered don't match our records. Please verify and try again.", 'error',3);
+                              }else{
+                                showToast(data.message, 'error',3);
+                              }
+                              this.is_disable = false;
+                            }
+                            // 处理请求成功的响应
+                          })
+                          .catch(error => {
+                            showToast('system errors','error',3);
+                          });
+                      }
+                    },
+                    mounted(){
+                      this.check_is_login();
+                      this.load_header_user_info();
+                    },
+                    beforeDestroy() {
+                    }
+                  });
+            </script>
+      </body>
+    </html>

style.css CHANGED Viewed

@@ -1,28 +1,787 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+*{
+    font-family: Noto Sans!important;
 }
+.bg-black{
+    background: var(--primary-black, #000);
+    color: white;
 }
+.set-nav{
+    position: fixed;
+    justify-content: space-between;
+    width: calc(100% - 100px)!important;
+    min-width: none;
+    top: 5vh;
+}
+.aside-select-item{
+    position: absolute;
+    z-index: 999;
+    padding: 15px 5px;
+    /* height: 50px; */
+    border-radius: 8px;
+    background: var(--primary-light-blue, #C8E8FF);
+    transition: ease-in-out .3s;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+.s-item:hover{
+    color: #ff5d5d !important;
+    text-decoration-line: underline;
+}
+.aside-select-item{
+    top: calc(5vh + 60px);
+    right: 4%;
+    width: 85px;
+}
+.aside-select-item::before {
+    content: "";
+    position: absolute;
+    top: -18px;
+    right: 5px;
+    border-width: 12px;
+    border-style: solid;
+    border-color: transparent transparent #C8E8FF transparent;
+  }
+.aside-select-item .s-item{
+    text-transform: capitalize;
+    font-size: 0.9rem;
+    color: #000;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: space-around;
+}
+.aside-select-item .s-item img{
+    width: 20px;
+}
+.flex{
+    display: flex!important;
+    flex-wrap: unset!important;
+}
+.p-2{
+    padding: 20px;
+}
+.wrap{
+    padding: 0 50px;
+}
+.mt-5{
+    margin-top: 40px;
+}
+.set-between{
+    justify-content: space-between;
+    align-items: center;
+}
+.flex-align-center{
+    display: flex;
+    align-items: center;
+}
+.header-logo{
+    user-select: none;
+}
+.header-logo .logo-img{
+    height: 50px!important;
+}
+.asdie-user .logo-img{
+    height: 35px!important;
+}
+.asdie-user{
+    cursor: pointer;
+    user-select: none;
+}
+.user-name{
+    color: rgb(178,178,178);
+}
+.asdie-user .name{
+    color: white;
+    font-weight: bold;
+    font-size: large;
+    display: inline-block;
+    margin-top: 4px;
+    margin-left: 4px;
+}
+.ml-2{
+    margin-left: 22px;
+}
+.ml-1{
+    margin-left: 5px;
+}
+.body-login{
+    position: relative;
+    margin-top: 20vh;
+}
+.main-box{
+    width: 45vw;
+    max-width: 500px;
+    margin: 0 auto;
+}
+.set-main-box{
+    width: 45vw!important;
+    max-width: 500px!important;
+    margin: 0 auto!important;
+}
+.upload-box{
+    width: 45vw;
+    max-width: 750px!important;
+}
+.main-box .welcome{
+    font-size: 20px;
+}
+.main-box .logo-img{
+    height: 40px!important;
+}
+.mt-1{
+    margin-top: 12px;
+}
+.mt-2{
+    margin-top: 22px;
+}
+.mt-6{
+    margin-top: 62px;
+}
+.body-type{
+    font-size: 25px;
+}
+.input div{
+    display: grid;
+    justify-items: stretch;
+    align-items: center;
+}
+.w-60{
+    width: 60%;
+}
+.verify-box{
+    max-width: 850px!important;
+}
+.set-up-input div{
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    word-wrap: break-word;
 }
+.input input{
+    height: 20px;
+    border-radius: 5px;
+    padding: 8px 15px;
+    font-size: 15px;
+}
+.mt-3{
+    margin-top: 32px;
+}
+.mt-4{
+    margin-top: 42px;
+}
+.text-center{
+    text-align: center;
+}
+.login-btn{
+    padding: 10px 25px;
+    background-color: transparent;
+    font-size: 20px;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    letter-spacing: 2px;
+    border: 1px solid transparent;
+    transition: ease-out .2s;
+}
+.login-btn:hover{
+    /* background-color: #ffcc6d; */
+    border: 1px white solid;
+    transition: ease-in-out .3s;
+}
+.login-btn:active{
+    /* background-color: #ff5d5d; */
+    transition: ease-in .2s;
+}
+.upper-text{
+    text-transform: uppercase;
+}
+.register-tips a{
+    color: rgb(126,201,255);
+}
+.mt-10{
+    margin-top: 100px;
+}
+.notes{
+    padding: 20px;
+    margin: 0 auto;
+    margin-top: 100px;
+    max-width: 900px!important;
+    background: rgba(88, 91, 115, 0.4);
+    border-radius: 18px;
+}
+.notes .dev-team{
+    font-size: 20px;
+}
+.notes ul {
+    margin-bottom: 0!important;
+    font-size: 13px;
+    line-height: 1.4;
+    list-style-type: decimal;
+}
+.notes ul li{
+    margin-top: 5px;
+}
+.create-btn{
+    border-radius: 100px;
+    padding: 13px 30px;
+    width: 100%;
+    opacity: 0.3;
+    background: var(--primary-white, #FFF);
+    color: var(--primary-black, #000);
+    text-align: center;
+    font-family: Roboto Mono;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-transform: uppercase;
+    border: unset;
+}
+.success-bg{
+    opacity: unset!important;
+    background-color: #7EC9FF!important;
+    transition: ease-out .2s;
+}
+.create-btn-hover:hover{
+    background-color: #5EB6F5!important;
+    transition: ease-in-out .3s;
+}
+.create-btn-hover:active{
+    /* background-color: #ff5d5d!important; */
+    transition: ease-in .2s;
+}
+.font-size-smaller{
+    font-size: smaller;
+}
+.gray-font{
+    color: rgb(178,178,178);
+}
+.font-size-large{
+    font-size: 2.2rem;
+}
+.bold-font{
+    font-size: 18px;
+    color: white;
+    font-weight: bold;
+}
+.shadow-box{
+    display: grid;
+    justify-items: center!important;
+    align-items:unset!important;
+    align-content: center;
+    width: 100%;
+    height: 180px;
+    border-radius: 4px;
+    background: var(--gradient, linear-gradient(90deg, #5B5E7B 0%, rgba(91, 94, 123, 0.00) 100%));
+}
+.jsonico-wh{
+    width: 55px;
+}
+.jsonico-wh2{
+    width: 25px;
+}
+.select-file-btn{
+    height: 40px;
+    font-size: large;
+    font-weight: bold;
+    padding: 10px 16px;
+    border-radius: 23px;
+    width: 50%;
+    background: var(--primary-white, #FFF);
+}
+.no-grid{
+    display: flex!important;
+}
+.no-top{
+    margin-top: 0!important;
+}
+.is_disabled_btn{
+    opacity: 0.3!important;
+    background: var(--primary-white, #FFF)!important;
+}
+.download-file-btn{
+    font-size: smaller;
+    font-weight: bold;
+    width: 40%;
+    right: 10%;
+    top: -2px;
+    position: absolute;
+    /* padding: 5px 10px; */
+    border-radius: 23px;
+    /* width: 50%; */
+    background: var(--primary-white, #FFF);
+    height: 35px;
+}
+.aside-text-bt{
+    color: var(--primary-blue, #7EC9FF);
+}
+.ct-box-h{
+    height: 140px!important;
+}
+.set-ct-top{
+    position: absolute;
+    top: 5%;
+    left: 2.5%;
+    width: 100%;
+    height: 40%;
+    display: flex!important;
+}
+.justify-items-center{
+    justify-items:center!important;
+}
+.normal-btn-hover{
+    font-family: Roboto Mono!important;
+    border: 1px solid transparent;
+    transition: ease-out .2s;
+}
+.normal-btn-hover:hover{
+    /* background-color: #ffcc6d!important; */
+    transition: ease-in-out .3s;
+}
+.normal-btn-hover:active{
+    /* background-color: #ff5d5d!important; */
+    transition: ease-in .2s;
+}
+.primary-btn-hover{
+    font-family: Roboto Mono!important;
+    background-color: #7EC9FF;
+    border: 1px solid transparent;
+    transition: ease-out .2s;
+}
+.primary-btn-hover:hover{
+    background-color: #5EB6F5!important;
+    transition: ease-in-out .3s;
+}
+.primary-btn-hover:active{
+    /* background-color: #ff5d5d!important; */
+    transition: ease-in .2s;
+}
+.info-btn-hover{
+    background-color: white;
+    font-family: Roboto Mono!important;
+    border: 1px solid transparent;
+    transition: ease-out .2s;
+}
+.info-btn-hover:hover{
+    background-color: #C8E8FF!important;
+    transition: ease-in-out .3s;
+}
+.info-btn-hover:active{
+    /* background-color: #ff5d5d!important; */
+    transition: ease-in .2s;
+}
+.btn{
+    font-size: large;
+    font-weight: bold;
+    padding: 10px 16px;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    text-transform: uppercase;
+    font-family: Roboto Mono!important;
+    border-radius: 23px;
+}
+.w-100{
+    width: 100%;
+}
+.border-r25{
+    border-radius: 25px;
+}
+.bottom-bg{
+    position: relative;
+    width: 35vw;
+    z-index: -1;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.bottom-bg img{
+    cursor: default !important;
+    width: 100%;
+}
+.big-user-profile{
+    width: 100%;
+}
+.set-user-profile{
+    justify-content: space-evenly;
+    align-items: flex-end;
+}
+.select-item-box{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-radius: 8px;
+    box-shadow: 0.5px 0.5px 3px white;
+    background: var(--gradient, linear-gradient(90deg, #5B5E7B 0%, rgba(91, 94, 123, 0.00) 100%));
+    transition: ease-out .3s;
+}
+.select-item-box{
+    cursor: default;
+    user-select: none!important;
+}
+.select-item-box img{
+    width: 15%;
+}
+.select-item-box .font{
+    font-size: 1.3rem;
+}
+.box-shadow-white{
+    box-shadow: 1px 1px 3px white;
+}
+.box-shadow-white-smaller{
+    box-shadow: 0.5px 0.5px 3px white;
+}
+.select-item-box:hover{
+    transition: ease-in .3s;
+}
+.disable-select-item{
+    opacity: 0.25;
+    background: var(--gradient, linear-gradient(90deg, #5B5E7B 0%, rgba(91, 94, 123, 0.00) 100%))!important;
+    transition: ease-in-out .3s;
+}
+.copyright{
+    padding: 20px 0;
+    color: rgb(178,178,178);
+    background: radial-gradient(27.91% 177.83% at 46.85% -20.11%, rgba(91, 94, 123, 0.60) 0%, rgba(91, 94, 123, 0.00) 100%)!important;
+    font-size: smaller;
+    margin: 0 auto;
+    top: 40px;
+    width: 100%;
+    text-align: center;
+    font-family: 'sans'!important;
+    position: relative;
+}
+.frame-box{
+    border-radius: 24px;
+    border: 1px solid #5B5E7B;
+    background: var(--primary-black, #000);
+}
+.copyright .cc-box{
+    width: 80%;
+    margin-left: 10%;
+}
+.copyright .bt-txt{
+    margin-top: 15px!important;
+}
+.copyright .f2 .ml-4{
+    margin-left: 20px!important;
+}
+.copyright .c-box{
+    margin-top: 0px!important;
+}
+.copyright .header-logo img{
+    width: 140px;
+}
+@font-face {
+    font-family: 'sans';
+    src: url('/assets/font/notosans/NotoSans-Regular-2.ttf') format('truetype')
 }
+.copyright .f1{
+    color: var(--primary-white, #FFF);
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 3px;
+}
+.copyright .f2{
+    color: #FFF;
+    text-align: center;
+    font-family: 'sans'!important;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 176.2%; /* 21.144px */
+}
+.copyright .i-icon{
+    width: 28px;
+}
+.copyright .i-icon:last-of-type{
+    margin-left: 5px;
+}
+.copyright .i-icon:first-of-type{
+    margin-left: 5px;
+}
+.copyright .c-line{
+    height: 1px;
+    width: 100%;
+    background: linear-gradient(90deg, rgba(35, 36, 46, 0.00) -2.52%, rgba(35, 36, 46, 0.98) 12.21%, #23242E 87.94%, rgba(35, 36, 46, 0.00) 105.79%);
+}
+.copyright .c-box{
+    margin-left: 1%;
+    justify-content: space-between;
+    align-items: center;
+}
+.copyright .header-logo{
+    margin-left: 1%;
+    text-align: left;
+}
+.copyright .bt-txt{
+    color: var(--primary-white, #FFF);
+    text-align: center;
+    font-family: Noto Sans;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 176.2%; /* 17.62px */
+    opacity: 0.6;
+}
+.copyright .a-tg{
+    color: var(--primary-white, #FFF)!important;
+    font-family: Noto Sans;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 176.2%;
+    text-decoration-line: underline;
+}
+.c-white{
+    color: white;
+}
+.item-circle{
+    width: 48px;
+    height: 48px;
+    flex-shrink: 0;
+    text-align: center;
+    border-radius: 50%;
+    display: grid;
+    align-items:center;
+    background: linear-gradient(90deg, #5B5E7B 0%, rgba(91, 94, 123, 0.00) 100%);
+}
+.item-circle span{
+    font-size: 1.6rem;
+    z-index: 1;
+    color: white;
+    line-height: 1;
+}
+.box-shadow-small{
+    box-shadow: 0.5px 0.5px 3px white;
+}
+.item-line{
+    background: transparent;
+    width: 7vw;
+    max-width: 80px;
+    min-width: 5px;
+    height: 2px;
+    border-radius: 25%;
+}
+.font-size-noraml{
+    font-size: 1.1rem;
+}
+.item-active{
+    background-color: var(--primary-blue, #7EC9FF);
+    transition: ease-in .3s;
+}
+.line-active{
+    background: #7EC9FF;
+    transition: ease-in .3s;
+}
+.user-face-wh{
+    height: 150px;
+}
+.user-lock-h{
+    overflow: hidden;
+    height: 250px;
+}
+.no-h-set-p{
+    padding: 15px 20px;
+    height: unset!important;
+}
+.step-item{
+    justify-content: center;
+}
+.no-select{
+    user-select: none !important;
+}
+.set-upload-tips{
+    width: 100%;
+    /* max-width: 100%; */
+    height: 100%;
+    object-fit: contain;
+}
+.upload-tips{
+    display: flex;
+    justify-content: space-around;
+    align-items: stretch;
+}
+.ml-4{
+    margin-left: 44px;
+}
+.no-p-and-lf{
+    border-radius: 16px!important;
+    /* padding: 0 10px!important; */
+    padding: 16px!important;
+}
+.p-t2{
+    padding: 20px 0;
+    border-radius: 16px!important;
+}
+.no-p-and-lf .dev-team{
+    /* margin-top: 5%; */
+}
+.w-50{
+    width: 50%;
+    min-width: 200px;
+}
+.ww-50{
+    width: 50%!important;
+}
+.set-switch-ico{
+    position: absolute;
+    bottom: 5%;
+    right: 5%;
+    width: 38px;
+}
+.rel{
+    position: relative;
+}
+.c-black{
+    color: black!important;
+}
+.hidden-file-input{
+    position: absolute;
+    width: 100%;
+    height: 100%!important;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    z-index: 1;
+}
+.up-default-h{
+    height: 26vh;
+    width: 30%;
+    object-fit: contain;
+}
+.encryot-anima1{
+ display: inline-block;
+ animation: jump1 1.5s infinite alternate;
+ transition:  ease-in 0.3s;
+}
+.encryot-anima2{
+ display: inline-block;
+ animation: jump2 1.3s infinite alternate;
+ transition:  ease-out 0.3s;
+}
+@keyframes jump1 {
+    0% { transform: translateY(1px); }
+    30% { transform: translateY(0px); }
+    60% { transform: translateY(-2px); }
+}
+@keyframes jump2 {
+    0% { transform: translateY(-2px); }
+    30% { transform: translateY(0px); }
+    60% { transform: translateY(1px); }
+}
+.letter-sp2{
+    user-select: none;
+    letter-spacing: 2px;
+}
+.mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    z-index: 9999;
+    display: none;
+  }
+.code-anima-box{
+    opacity: .3;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    overflow: hidden; /* 隐藏溢出的内容 */
+    position: absolute; /* 设置子元素绝对定位时的参考对象 */
+    user-select: none;
+    cursor: default;
+}
+.code-anima-box img {
+    position: absolute; /* 绝对定位，使图像重叠在一起 */
+    width: 100%; /* 图片宽度与盒子相同 */
+    height: 100%; /* 图片高度与盒子相同 */
+    animation: scroll-animation 10s linear infinite; /* 使用滚动动画 */
+}
+  .code-anima-box div {
+    width: 100%; /* 图片宽度与盒子相同 */
+    height: 100%; /* 图片高度与盒子相同 */
+  }
+  @keyframes scroll-animation {
+    0% { transform: translateY(0); } /* 初始位置：不移动 */
+    50%, 100% { transform: translateY(-100%); } /* 向上滚动到顶部 */
+  }
+  .top0{
+    top: 0;
+  }
+  .top20{
+    top: 60%;
+  }
+  .top40{
+    top: 120%;
+  }
+  .top60{
+    top: 180%;
+  }
+  .toast {
+    position: fixed;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 4px;
+    background: rgba(239, 133, 192, 0.50);
+    color: #ffffff;
+    padding: 10px 20px;
+    user-select: none;
+    letter-spacing: 1px;
+    max-width: 750px;
+    opacity: 0;
+    z-index: 999;
+    transition: opacity 0.3s ease-in-out;
+  }
+  .toast-tips{
+    background: rgb(121 255 113 / 50%)!important;
+  }
+  .no-flex{
+    display: inherit!important;
+  }
+  .break-word{
+    word-wrap: break-word;
+  }
+  .toast.show {
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
+  }
+  .disabled-input{
+    background: #4b4b4b!important;
+    color: white!important;
+    opacity: .8;
+  }
+  .change-btn{
+    font-family: Roboto Mono!important;
+    letter-spacing:unset!important;
+    padding: 10px 30px!important;
+    background-color:#7EC9FF!important;
+    color: black!important;
+    width: 100%;
+    border: none!important;
+  }
+  .change-btn:hover{
+    border: none!important;
+    background-color: #5EB6F5!important;
+    transition: ease-in-out .3s;
+  }
+  .change-btn:active{
+    /* background-color: #ff5d5d!important; */
+    transition: ease-in .2s;
 }
+.lottie-box{
+    width: 30%;
+    margin: 0 auto;
+}