Home Explore Help
Register Sign In
choozmo
/
AI_Anchor
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

login ui optimization

huaisianhuang 3 years ago
parent
bbf1de9d4c
commit
6d9651356a
9 changed files with 191 additions and 75 deletions
Split View Show Diff Stats
  1. BIN
      .DS_Store
  2. BIN
      api/.DS_Store
  3. 0 0
      api/static/img/undraw_male_avatar_323b.svg
  4. 0 0
      api/static/img/undraw_video_upload_3d4u.svg
  5. BIN
      api/static/img/wave.png
  6. 115 0
      api/static/style.css
  7. 6 10
      api/templates/index.html
  8. 69 65
      api/templates/login.html
  9. 1 0
      api/templates/script_index.js

BIN
.DS_Store
View File


BIN
api/.DS_Store
View File


File diff suppressed because it is too large
+ 0 - 0
api/static/img/undraw_male_avatar_323b.svg


File diff suppressed because it is too large
+ 0 - 0
api/static/img/undraw_video_upload_3d4u.svg


BIN
api/static/img/wave.png
View File


+ 115 - 0
api/static/style.css
View File 

@@ -749,6 +749,121 @@ body {
 
   margin-left: 50px;
 
 }
 
 
+.container-login {
 
+	width: 100vw;
 
+    height: 100vh;
 
+    display: grid;
 
+    grid-template-columns: repeat(2, 1fr);
 
+    grid-gap :7rem;
 
+	padding: 0 2rem;
 
+}
 
+
 
+.img-wave {
 
+	position: fixed;
 
+	bottom: 0;
 
+	left: 0;
 
+	height: 100%;
 
+	z-index: -1;
 
+}
 
+
 
+.row-img {
 
+	display: flex;
 
+	justify-content: flex-end;
 
+	align-items: center;
 
+}
 
+
 
+.row-login {
 
+	display: flex;
 
+	justify-content: flex-start;
 
+	align-items: center;
 
+	text-align: center;
 
+}
 
+
 
+.login-content {
 
+	width: 80%;
 
+	min-width: 350px;
 
+}
 
+
 
+.login-content img {
 
+	height: 80px;
 
+}
 
+
 
+.row-img img {
 
+	width: 450px;
 
+}
 
+
 
+.login-content .form-floating input{
 
+	border: none;
 
+	border-bottom: 2px solid #d9d9d9;
 
+	border-radius: 0;
 
+}
 
+
 
+.login-content .form-floating input:focus{
 
+	box-shadow: none;
 
+}
 
+
 
+.login-content #btn_login {
 
+	background: linear-gradient(90deg, #0162c8, #55e7fc);
 
+	font-weight: bold;
 
+	color: white;
 
+	border: 0 none;
 
+	border-radius: 40px;
 
+	cursor: pointer;
 
+	padding: 10px 50px;
 
+	margin: 10px auto;
 
+	display: block;
 
+}
 
+
 
+.login-content #btn_login:hover {
 
+	box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
 
+}
 
+
 
+.login-content .nav-tabs {
 
+	border-bottom: none;
 
+}
 
+
 
+.login-content .nav {
 
+	flex-direction: column;
 
+	align-items: center;
 
+}
 
+
 
+.login-content .nav-tabs .nav-link {
 
+	color: grey;
 
+}
 
+
 
+.login-content .nav-tabs .nav-link.active {
 
+	border-color: #fff;
 
+	text-transform: uppercase;
 
+	color: black;
 
+}
 
+
 
+.navbar .btn-gocreate {
 
+	background: linear-gradient(90deg, #0162c8, #55e7fc);
 
+	color: white;
 
+	border: 0 none;
 
+	border-radius: 40px;
 
+	cursor: pointer;
 
+	padding: 10px 50px;
 
+}
 
+
 
+@media screen and (max-width: 900px){
 
+	.container-login{
 
+		grid-template-columns: 1fr;
 
+	}
 
+
 
+	.row-img{
 
+		display: none;
 
+	}
 
+
 
+	.img-wave {
 
+		display: none;
 
+	}
 
+
 
+	.row-login{
 
+		justify-content: center;
 
+	}
 
+}
 
+
 
 @media screen and (max-height: 450px) {
 
   .sidenav {padding-top: 15px;}
 
   .sidenav a {font-size: 18px;}

+ 6 - 10
api/templates/index.html
View File 

@@ -29,9 +29,9 @@
 
 <body>
 
     <!-- ================================================================= -->
 
     <!-- navbar -->
 
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
 
+    <nav class="navbar navbar-expand-lg navbar-light">
 
         <div class="container-fluid">
 
-            <a class="navbar-brand" href="#">Navbar</a>
 
+            <a class="navbar-brand" href="/index">AI Anchor Go</a>
 
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
 
                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
 
                 aria-label="Toggle navigation">
 
@@ -40,10 +40,7 @@
 
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 
                     <li class="nav-item">
 
-                        <a class="nav-link active" aria-current="page" href="/index">Home</a>
 
-                    </li>
 
-                    <li class="nav-item">
 
-                        <a class="nav-link active" aria-current="page" href="/make_video">製作影片</a>
 
+                        <a class="nav-link active btn-gocreate text-white" aria-current="page" href="/make_video">製作影片</a>
 
                     </li>
 
                 </ul>
 
                 
@@ -52,10 +49,10 @@
 
                         <a class="nav-link active" aria-current="page" href="/login">Login</a>
 
                     </li>
 
                     <li class="nav-item">
 
-                        <a class="nav-link active" aria-current="page" href="/user_profile">User Profile</a>
 
+                        <a class="nav-link" aria-current="page" href="/user_profile">User Profile</a>
 
                     </li>
 
                     <li class="nav-item">
 
-                        <a class="nav-link active" aria-current="page" href="/logout">Logout</a>
 
+                        <a class="nav-link" aria-current="page" href="/logout">Logout</a>
 
                     </li>
 
                 </ul>
 
             </div>
 
@@ -66,7 +63,7 @@
 
 
     <!-- ================================================================= -->
 
     <!-- content -->
 
-    <div class="container mt-5">
 
+    <div class="container-fluid px-0">
 
         {% block content %}{% endblock %}
 
     </div>
 
     <!-- ================================================================= -->
 
@@ -86,7 +83,6 @@
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
 
-    <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
 
     <script src="static/owl.carousel.min.js"></script>
 
     <script src="static/script_util.js"></script>
 
     <script src="templates/script_index.js"></script>

+ 69 - 65
api/templates/login.html
View File 

@@ -6,79 +6,83 @@
 
 {% block content %}
 
 
 
-<div class="row justify-content-center">
 
-    <div class="col-lg-6">
 
-        {% if success %}
 
-
 
-        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 
-            <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
 
-                <path
 
-                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
 
-            </symbol>
 
-        </svg>
 
-        <div class="alert alert-success d-flex align-items-center alert-dismissible" role="alert">
 
-            <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
 
-                <use xlink:href="#check-circle-fill" />
 
+<div class="container-login">
 
+    <img class="img-wave" src="static/img/wave.png" alt="">
 
+    <div class="row-img">
 
+        <img src="static/img/undraw_video_upload_3d4u.svg" alt="">
 
+    </div>
 
+    <div class="row-login">
 
+        <div class="login-content">
 
+            {% if success %}
 
+            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 
+                <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
 
+                    <path
 
+                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
 
+                </symbol>
 
             </svg>
 
-            <div>
 
-                Registered successfully!
 
+            <div class="alert alert-success d-flex align-items-center alert-dismissible" role="alert">
 
+                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
 
+                    <use xlink:href="#check-circle-fill" />
 
+                </svg>
 
+                <div>
 
+                    Registered successfully!
 
+                </div>
 
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 
             </div>
 
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 
-        </div>
 
-        {% endif %}
 
-        <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
 
-            <li class="nav-item" role="presentation">
 
-                <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login"
 
-                    type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
 
-            </li>
 
-            <li class="nav-item" role="presentation">
 
-                <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button"
 
-                    role="tab" aria-controls="register" aria-selected="false">Register</button>
 
-            </li>
 
-        </ul>
 
-        <div class="tab-content" id="myTabContent">
 
-            <div class="tab-pane fade p-lg-3 show active" id="login" role="tabpanel" aria-labelledby="login-tab">
 
-                
-                    <div class="form-floating mb-3">
 
-                        <input type="text" class="form-control" id="username" name="username" placeholder="User name">
 
-                        <label for="username">User name</label>
 
-                    </div>
 
-                    <div class="form-floating mb-3">
 
-                        <input type="password" class="form-control" id="password" name="password" placeholder="Password">
 
-                        <label for="password">Password</label>
 
-                    </div>
 
-                    <div class="d-flex justify-content-center">
 
-                        <button id="btn_login" class="btn btn-primary align-items-center">Login</button>
 
-                    </div>
 
-         
+            {% endif %}
 
+            <img src="static/img/undraw_male_avatar_323b.svg" alt="">
 
+            <h2 class="my-3">WELCOME</h2>
 
+            <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
 
+                <li class="nav-item" role="presentation">
 
+                    <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login"
 
+                        type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
 
+                </li>
 
+                <li class="nav-item" role="presentation">
 
+                    <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button"
 
+                        role="tab" aria-controls="register" aria-selected="false">New Here? Register</button>
 
+                </li>
 
+            </ul>
 
+            <div class="tab-content" id="myTabContent">
 
+                <div class="tab-pane fade p-lg-3 show active" id="login" role="tabpanel" aria-labelledby="login-tab">
 
+                    
+                        <div class="form-floating mb-3">
 
+                            <input type="text" class="form-control" id="username" name="username" placeholder="User name">
 
+                            <label for="username"><i class="fas fa-user me-2"></i>User name</label>
 
+                        </div>
 
+                        <div class="form-floating mb-3">
 
+                            <input type="password" class="form-control" id="password" name="password" placeholder="Password">
 
+                            <label for="password"><i class="fas fa-lock me-2"></i>Password</label>
 
+                        </div>
 
+                        <div class="d-flex justify-content-center">
 
+                            <button id="btn_login" class="">Login</button>
 
+                        </div>
 
+            
 
-            </div>
 
-            <div class="tab-pane fade p-lg-3" id="register" role="tabpanel" aria-labelledby="register-tab">
 
-                <form method="post" action="register">
 
-                    <div class="form-floating mb-3">
 
-                        <input type="text" class="form-control" id="username" name="username" placeholder="User name">
 
-                        <label for="username">User name</label>
 
-                    </div>
 
-                    <div class="form-floating mb-3">
 
-                        <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com">
 
-                        <label for="email">Email address</label>
 
-                    </div>
 
-                    <div class="form-floating mb-3">
 
-                        <input type="password" class="form-control" id="password" name="password"  placeholder="Password">
 
-                        <label for="password">Password</label>
 
-                    </div>
 
-                    <div class="d-flex justify-content-center">
 
-                        <button type="submit" class="btn btn-primary align-items-center">Register</button>
 
-                    </div>
 
+                </div>
 
+                <div class="tab-pane fade p-lg-3" id="register" role="tabpanel" aria-labelledby="register-tab">
 
+                    <form method="post" action="register">
 
+                        <div class="form-floating mb-3">
 
+                            <input type="text" class="form-control" id="username" name="username" placeholder="User name">
 
+                            <label for="username"><i class="fas fa-user me-2"></i>User name</label>
 
+                        </div>
 
+                        <div class="form-floating mb-3">
 
+                            <input type="email" class="form-control" id="email" name="email" placeholder="name@example.com">
 
+                            <label for="email"><i class="fas fa-envelope me-2"></i>Email address</label>
 
+                        </div>
 
+                        <div class="form-floating mb-3">
 
+                            <input type="password" class="form-control" id="password" name="password"  placeholder="Password">
 
+                            <label for="password"><i class="fas fa-lock me-2"></i>Password</label>
 
+                        </div>
 
+                        <div class="d-flex justify-content-center">
 
+                            <button type="submit" class="btn btn-primary align-items-center">Register</button>
 
+                        </div>
 
 
-                </form>
 
+                    </form>
 
+                </div>
 
             </div>
 
         </div>
 
-
 
     </div>
 
 </div>
 
 
 
-
 
-
 
 {% endblock %}

+ 1 - 0
api/templates/script_index.js
View File 

@@ -25,3 +25,4 @@ $("#btn_login").click(function () {
 
   console.log(data);    // test 
   xhr.send(data);
 
 });
 
+

Some files were not shown because too many files changed in this diff