From e111cbb2b1aed76fa6541087b7476c3c9871701f Mon Sep 17 00:00:00 2001
From: shaoyongjun <mylomen.shao@freebrio.com>
Date: Wed, 2 Oct 2024 01:01:30 +0800
Subject: [PATCH] to:sync

---
 static/css/shuidi.css   | 171 ++++++++++++++++++++++++++++++++++++++++
 static/login2.html      | 116 +++++++++++++++++++++++++++
 static/login_shudi.html |  30 +++++++
 static/static_router.go |   2 +-
 4 files changed, 318 insertions(+), 1 deletion(-)
 create mode 100644 static/css/shuidi.css
 create mode 100644 static/login2.html
 create mode 100644 static/login_shudi.html

diff --git a/static/css/shuidi.css b/static/css/shuidi.css
new file mode 100644
index 0000000..ea1ac48
--- /dev/null
+++ b/static/css/shuidi.css
@@ -0,0 +1,171 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    background: #eff0f4;
+    overflow: hidden;
+}
+
+.box {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    margin: 150px auto;
+    width: 470px;
+}
+
+.box .content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    width: 350px;
+    height: 350px;
+    padding: 60px 20px;
+    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
+    25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
+    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
+}
+
+.box .content {
+    border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
+    transition: 0.5s;
+}
+
+.box .content:hover {
+    border-radius: 50%;
+}
+
+.box .content::before {
+    content: "";
+    position: absolute;
+    top: 50px;
+    left: 85px;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    background: #fff;
+    opacity: 0.9;
+}
+
+.box .content::after {
+    content: "";
+    position: absolute;
+    top: 90px;
+    left: 110px;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background: #fff;
+    opacity: 0.9;
+}
+
+.box .content div {
+    position: relative;
+    width: 225px;
+    border-radius: 25px;
+    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
+    inset -2px -5px 10px rgba(255, 255, 255, 1),
+    15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
+}
+
+.box .content div::before {
+    content: "";
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 65%;
+    height: 5px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 5px;
+}
+
+.box .content input {
+    width: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 16px;
+    padding: 10px 15px;
+}
+
+.box .content input[type="submit"] {
+    color: #fff;
+    cursor: pointer;
+}
+
+.box .content div:last-child {
+    width: 120px;
+    background: #ff0f5b;
+    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
+    15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
+    transition: 0.5s;
+}
+
+.box .content div:last-child:hover {
+    width: 150px;
+}
+
+.btns {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 120px;
+    height: 120px;
+    background: #c61dff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+    color: #fff;
+    font-size: 14px;
+    box-shadow: inset 10px 10px 10px rgba(190, 1, 254, 0.05),
+    15px 25px 10px rgba(190, 1, 254, 0.1), 15px 20px 20px rgba(190, 1, 254, 0.1),
+    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
+    border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
+}
+
+.register {
+    bottom: 150px;
+    right: 0px;
+    width: 80px;
+    height: 80px;
+    border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;
+    background: #01b4ff;
+    box-shadow: inset 10px 10px 10px rgba(1, 180, 255, 0.05),
+    15px 25px 10px rgba(1, 180, 255, 0.1), 15px 20px 20px rgba(1, 180, 255, 0.1),
+    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
+}
+
+.btns::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 30px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #fff;
+    opacity: 0.45;
+}
+
+.register::before {
+    left: 20px;
+    width: 15px;
+    height: 15px;
+}
+
+.btns {
+    transition: 0.25s;
+}
+
+.btns:hover {
+    border-radius: 50%;
+}
\ No newline at end of file
diff --git a/static/login2.html b/static/login2.html
new file mode 100644
index 0000000..a578554
--- /dev/null
+++ b/static/login2.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <link rel="stylesheet" href="/v1/static/css/login.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
+</head>
+<body>
+<div class="container right-panel-active">
+    <!-- Sign Up -->
+    <div class="container__form container--signup">
+        <form action="#" class="form" id="form1" method="post">
+            <h2 class="form__title">Sign Up</h2>
+            <input type="text" placeholder="User" class="input" name="name"/>
+            <input type="email" placeholder="email" class="input" name="account"/>
+            <input type="password" placeholder="password" class="input" name="password" autocomplete="off"/>
+            <button class="btn" onclick="register(this)">Sign Up</button>
+        </form>
+    </div>
+
+    <!-- Sign In -->
+    <div class="container__form container--signin">
+        <form action="#" class="form" id="form2" method="post">
+            <h2 class="form__title">Sign In</h2>
+            <input type="email" placeholder="email" class="input" name="account"/>
+            <input type="password" placeholder="password" class="input" name="password" autocomplete="off"/>
+            <a href="#" class="link">Forgot your password?</a>
+            <button class="btn" onclick="login(this)">Sign In</button>
+        </form>
+    </div>
+
+    <!-- Overlay -->
+    <div class="container__overlay">
+        <div class="overlay">
+            <div class="overlay__panel overlay--left">
+                <button class="btn" id="signIn">Sign In</button>
+            </div>
+            <div class="overlay__panel overlay--right">
+                <button class="btn" id="signUp">Sign Up</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div>
+    <p><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">沪ICP备18034819号</a></p>
+    <p><a href="" target="_blank" rel="nofollow"><i class="police-ico"></i>沪公网安备31011302007198号</a></p>
+</div>
+</body>
+<script>
+    const signInBtn = document.getElementById("signIn");
+    const signUpBtn = document.getElementById("signUp");
+    const fistForm = document.getElementById("form1");
+    const secondForm = document.getElementById("form2");
+    const container = document.querySelector(".container");
+
+    signInBtn.addEventListener("click", () => {
+        container.classList.remove("right-panel-active");
+    });
+
+    signUpBtn.addEventListener("click", () => {
+        container.classList.add("right-panel-active");
+    });
+
+    fistForm.addEventListener("submit", (e) => e.preventDefault());
+    secondForm.addEventListener("submit", (e) => e.preventDefault());
+
+    function register(obj){
+        var fields = $(obj).parent().serializeArray();
+        var obj = {}; //声明一个对象
+        $.each(fields, function(index, field) {
+            obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
+        })
+        $.ajax({
+            url:"https://gateway.mylomen.com/v1/user/register",
+            type: "POST",
+            contentType: "application/json; charset=utf-8",
+            data: JSON.stringify(obj),//将对象转为json字符串
+            dataType: "json",
+            success: function(result) {
+                if (result.code==0){
+                    localStorage.setItem("token",result.data.token);
+                    location.href ="/chat"
+                }else{
+                    alert(result.msg);
+                }
+            }
+        });
+    }
+
+    function login(obj){
+        var fields = $(obj).parent().serializeArray();
+        var obj = {}; //声明一个对象
+        $.each(fields, function(index, field) {
+            obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
+        })
+        $.ajax({
+            url:"https://gateway.mylomen.com/v1/user/login",
+            type: "POST",
+            contentType: "application/json; charset=utf-8",
+            data: JSON.stringify(obj),//将对象转为json字符串
+            dataType: "json",
+            success: function(result){
+                if (result.code==0){
+                    localStorage.setItem("token",result.data.token);
+                    location.href ="/chat"
+                }else{
+                    alert(result.msg);
+                }
+            }
+        });
+    }
+
+</script>
+</html>
\ No newline at end of file
diff --git a/static/login_shudi.html b/static/login_shudi.html
new file mode 100644
index 0000000..7f38c62
--- /dev/null
+++ b/static/login_shudi.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>水滴登录页</title>
+    <link rel="stylesheet" href="/v1/static/css/shuidi.css">
+</head>
+
+<body>
+<div class="box">
+    <div class="content">
+        <h2>登录</h2>
+        <div>
+            <input type="text" placeholder="请输入用户名">
+        </div>
+        <div>
+            <input type="password" placeholder="请输入密码">
+        </div>
+        <div>
+            <input type="submit" value="登录">
+        </div>
+    </div>
+    <a href="#" class="btns">忘记密码</a>
+    <a href="#" class="btns register">注册</a>
+</div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/static/static_router.go b/static/static_router.go
index 8c4bed7..8731e44 100644
--- a/static/static_router.go
+++ b/static/static_router.go
@@ -50,7 +50,7 @@ func InitStaticGroup(g *echo.Group) {
 		c.Response().Header().Set("Content-Type", "text/html; charset=utf-8")
 		c.Response().Header().Set("Cache-Control", "max-age=3600")
 
-		return c.Blob(http.StatusOK, "text/html; charset=utf-8", pageMap["login.html"])
+		return c.Blob(http.StatusOK, "text/html; charset=utf-8", pageMap["login_shudi.html"])
 	})
 
 	g.GET("css/:name", func(c echo.Context) error {