fix UI

LastStranger · Jun 6, 2023 · d666298 · d666298
1 parent 4da6114
commit d666298
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 49 deletions.
diff --git a/.postcssrc.json b/.postcssrc.json
@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "autoprefixer": {}
+  }
+}
diff --git a/package.json b/package.json
@@ -1,29 +1,33 @@
 {
-  "name": "unblockNCM",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "tauri": "tauri"
-  },
-  "dependencies": {
-    "@tauri-apps/api": "^1.2.0",
-    "normalize.css": "^8.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@tauri-apps/cli": "^1.2.3",
-    "@types/node": "^18.7.10",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^3.0.0",
-    "eslint-config-lz": "^2.0.0",
-    "prettier": "^2.8.8",
-    "typescript": "^4.9.5",
-    "vite": "^4.2.1"
-  }
+    "name": "unblockNCM",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview",
+        "tauri": "tauri"
+    },
+    "dependencies": {
+        "@tauri-apps/api": "^1.2.0",
+        "normalize.css": "^8.0.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@tauri-apps/cli": "^1.2.3",
+        "@types/node": "^18.7.10",
+        "@types/react": "^18.0.15",
+        "@types/react-dom": "^18.0.6",
+        "@vitejs/plugin-react": "^3.0.0",
+        "autoprefixer": "^10.4.14",
+        "eslint-config-lz": "^2.0.0",
+        "prettier": "^2.8.8",
+        "typescript": "^4.9.5",
+        "vite": "^4.2.1"
+    },
+    "browserslist": [
+        "defaults"
+    ]
 }
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -13,7 +13,7 @@ edition = "2021"
 tauri-build = { version = "1.2", features = [] }
 
 [dependencies]
-tauri = { version = "1.2", features = ["notification-all", "path-all", "shell-all", "system-tray"] }
+tauri = { version = "1.2", features = ["macos-private-api", "notification-all", "path-all", "shell-all", "system-tray"] }
 serde = { version = "1.0", features = ["derive"] }
 port_check = "0.1.5"
 serde_json = "1.0"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -66,9 +66,13 @@
         "resizable": true,
         "title": "unblockNCM",
         "width": 800,
-        "height": 600
+        "height": 600,
+        "hiddenTitle": true,
+        "titleBarStyle": "Overlay",
+        "transparent": true
       }
     ],
+    "macOSPrivateApi": true,
     "systemTray": {
       "iconPath":"icons/icon.png",
       "iconAsTemplate": true

diff --git a/src/App.css b/src/App.css
@@ -1,10 +1,32 @@
+/*@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");*/
+
+html,
+body {
+    /*border-radius: 10px;*/
+    overflow: hidden;
+    /*background-color: red;*/
+    /*padding-top: 10px;*/
+}
+
+* {
+    user-select: none;
+}
+
+.element-inside-your-body {
+    overflow: auto;
+}
+
 .container {
-    /* background-color: red; */
+    /* background-color: #fff; */
     width: 100vw;
     height: 100vh;
-    padding: 8px;
+    padding: 28px 8px 8px;
     display: flex;
     box-sizing: border-box;
+    background-color: #202124;
+    /*color: ;*/
+    color: #21ebff;
+    /*color: #00ffe7;*/
 }
 .left-content {
     width: 35vw;
@@ -18,6 +40,7 @@
 .port-status {
     /* color: red; */
     margin: 0 auto;
+    user-select: none;
 }
 .right-content {
     width: 65vw;
@@ -71,15 +94,125 @@
     margin-right: 10px;
 }
 .button {
-    width: 100%;
+    width: 140px;
     height: 40px;
-    margin-top: 10px;
-    background-color: #ccc;
+    /*width: max-content;*/
+    margin-top: 20px;
+    /*background-color: #ccc;*/
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    position: relative;
+    color: #21ebff;
+    font-size: 20px;
+    letter-spacing: 2px;
+    padding: 2px 10px;
+    overflow: hidden;
+    transition: 0.5s;
+}
+.button:hover {
+    background-color: #21ebff;
+    color: #111;
+    box-shadow: 0 0 50px #21ebff;
+    transition-delay: 0.1s;
+}
+.button-wrp {
+    width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    /*justify-content: center;*/
+    align-items: center;
+}
+.button:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 5px;
+    height: 5px;
+    border-top: 2px solid #21ebff;
+    border-left: 2px solid #21ebff;
+    /*background-color: #21ebff;*/
+    transition: 0.5s;
+}
+.button:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 5px;
+    height: 5px;
+    border-bottom: 2px solid #21ebff;
+    border-right: 2px solid #21ebff;
+    /*background-color: #21ebff;*/
+    transition: 0.5s;
+}
+.button:hover:before {
+    width: 100%;
+    height: 100%;
+    /*transition: 0s;*/
+}
+.button:hover:after {
+    width: 100%;
+    height: 100%;
+    /*transition: 0s;*/
 }
 .button:active {
     opacity: 0.5;
 }
+
+.author-wrp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    bottom: -10px;
+    right: 10px;
+}
+.author-wrp>sub{
+    margin-right: 4px;
+}
+.author {
+    font-size: 24px;
+}
+.author span {
+    display: table-cell;
+    margin: 0;
+    padding: 0;
+    animation: animate 2s linear infinite;
+}
+.author span:nth-child(1) {
+    animation-delay: 0s;
+}
+.author span:nth-child(2) {
+    animation-delay: 0.25s;
+}
+.author span:nth-child(3) {
+    animation-delay: 0.5s;
+}
+.author span:nth-child(4) {
+    animation-delay: 0.75s;
+}
+.author span:nth-child(5) {
+    animation-delay: 1s;
+}
+.author span:nth-child(6) {
+    animation-delay: 1.25s;
+}
+
+@keyframes animate {
+    0%,
+    100% {
+        color: #fff;
+        filter: blur(2px);
+        text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, 0 0 80px #00b3ff, 0 0 120px #00b3ff,
+            0 0 200px #00b3ff, 0 0 300px #00b3ff, 0 0 400px #00b3ff;
+    }
+    5%,
+    95% {
+        color: #111;
+        filter: blur(0);
+        text-shadow: none;
+    }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -174,20 +174,22 @@ function App() {
                         {/*<input type="checkbox" />*/}
                         {/*酷我*/}
                     </div>
-                    <div className="button" onClick={start}>
-                        开启代理
-                    </div>
-                    <div className="button" onClick={handleClose}>
-                        关闭代理
-                    </div>
-                    <div className="button" onClick={handleReleasePort}>
-                        强制释放端口
-                    </div>
-                    <div className="button" onClick={handleStartSysProxy}>
-                        开启系统代理
-                    </div>
-                    <div className="button" onClick={handleCloseSysProxy}>
-                        关闭系统代理
+                    <div className="button-wrp">
+                        <div className="button" onClick={start}>
+                            开启代理
+                        </div>
+                        <div className="button" onClick={handleClose}>
+                            关闭代理
+                        </div>
+                        <div className="button" onClick={handleReleasePort}>
+                            强制释放端口
+                        </div>
+                        <div className="button" onClick={handleStartSysProxy}>
+                            开启系统代理
+                        </div>
+                        <div className="button" onClick={handleCloseSysProxy}>
+                            关闭系统代理
+                        </div>
                     </div>
                 </div>
                 <h3 className="port-status">8080端口状态: {portStatus ? "已开启" : "空闲"}</h3>
@@ -206,6 +208,17 @@ function App() {
                         </div>
                     ))}
                 </div>
+                <div className="author-wrp">
+                    <sub>made by</sub>
+                    <h1 className="author">
+                        <span>R</span>
+                        <span>u</span>
+                        <span>s</span>
+                        <span>k</span>
+                        <span>e</span>
+                        <span>r</span>
+                    </h1>
+                </div>
             </div>
         </div>
     );