Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
aaron-1015
/
mechanical
1
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

menu navbar

huaisianhuang 3 gadi atpakaļ
vecāks
fd32d348ee
revīzija
b4e34611f9
9 mainītis faili ar 318 papildinājumiem un 74 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. BIN
      static/img/PMS_LOGO.png
  2. BIN
      static/img/sidebar.png
  3. BIN
      static/img/technology.jpg
  4. 105 28
      static/index.css
  5. 37 18
      templates/index.html
  6. 12 14
      templates/login.html
  7. 76 0
      templates/login_test.html
  8. 12 14
      templates/register.html
  9. 76 0
      templates/rigister_test.html

BIN
static/img/PMS_LOGO.png
Parādīt failu


BIN
static/img/sidebar.png
Parādīt failu


BIN
static/img/technology.jpg
Parādīt failu


+ 105 - 28
static/index.css
Parādīt failu 

@@ -1,30 +1,7 @@
 
 #sitebody{
 
-    /*     width:1200px; */
 
         margin:0 auto;
 
+        margin-top: -80px;
 
         font-size:13px;
 
-    /*     border-style:solid; */
 
-}
 
-
 
-
 
-#top-side-bar{
 
-    /* background-color; */
 
-/*     width:600px; */
 
-    height:120px;
 
-    text-align:center;
 
-    line-height:100px;
 
-    float:center;
 
-    border-style:solid;
 
-}
 
-
 
-#logo{
 
-    float:left;
 
-/*     border-style:solid; */
 
-
 
-}
 
-#member{
 
-    float:right;
 
-/*     border-style:solid; */
 
-    border: 5px;    
 }
 
 
 #nav-side-bar{
 
@@ -32,17 +9,40 @@
 
     /* width:120px; */
 
 /*     height:120px; */
 
 /*     text-align:center; */
 
-    line-height:60px;
 
-    float:left;
 
-    border-style:solid;
 
+    line-height:40px;
 
+    height: 100%;
 
+    width: 250px;
 
+    position: fixed;
 
+    z-index: 1;
 
+    top: 59.6333px;
 
+    left: 0;
 
+    background: url(../static/img/sidebar.png);
 
+    background-size: cover;
 
+    overflow-x: hidden;
 
+    transition: 0.5s;
 
 }
 
 
+#nav-side-bar .bar_img {
 
+    transform: rotate(270deg);
 
+    position: absolute;
 
+    right: -110%;
 
+    top: 15rem;
 
+    z-index: 3;
 
+}
 
 
 #content{
 
-    float:center;
 
+    width: calc(100% - 250px);
 
+    margin-left: 250px;
 
 /*     border-style:solid; */
 
 }
 
 
+#content_login {
 
+    width: calc(100% - 250px);
 
+    height: calc(100vh - 60px);
 
+    margin-left: 250px;
 
+    background: linear-gradient(105deg, rgba(255, 255, 255, 0.884) 0%, rgba(255, 255, 255, 0.884) 100%, transparent 100%), url(../static/img/technology.jpg);
 
+}
 
+
 
 
 #show_factory_class_1{
 
     border-style:solid;
 
@@ -52,4 +52,81 @@
 
 #show_factory_class_2{
 
     border-style:solid;
 
     text-align:center;
 
+}
 
+
 
+.navbar {
 
+    box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
 
+}
 
+
 
+.navbar-brand img{
 
+    width: 120px;
 
+}
 
+
 
+.nav-side-bar ul {
 
+    margin-top: 3rem;
 
+    margin-left: 2.5rem;
 
+    padding-left: 0rem;
 
+
 
+}
 
+
 
+.nav-side-bar li {
 
+    padding: .5rem 0; 
+
 
+}
 
+
 
+.nav-side-bar .side-bar-link {
 
+    display: block;
 
+    text-decoration-line: none;
 
+    font-size: .9rem;
 
+    color: white;
 
+    padding-left: 2rem;
 
+}
 
+
 
+.nav-side-bar .side-bar-link.active, .nav-side-bar .side-bar-link:hover {
 
+    background: white;
 
+    color: black;
 
+    border-top-left-radius: 8px;
 
+    border-bottom-left-radius: 8px;
 
+    position: relative;
 
+}
 
+
 
+.nav-side-bar .side-bar-link.active::after {
 
+    position: absolute;
 
+    right: 1rem;
 
+    top: -2px;
 
+    content: ">";
 
+}
 
+
 
+.login_form {
 
+    display: block;
 
+    margin: 5rem auto;
 
+    width: 60%;
 
+    padding-top: 7rem;
 
+}
 
+
 
+.login_form h2 {
 
+    text-align: center;
 
+    font-size: 2.5rem;
 
+    color: #002e86;
 
+    margin-bottom: 4rem;
 
+}
 
+
 
+.login_form label {
 
+    color: #002e86;
 
+}
 
+
 
+.login_form input {
 
+    border-radius: 10px;
 
+    padding-top: .5rem;
 
+    padding-bottom: .5rem;
 
+}
 
+
 
+.login_form #btn_login,.login_form #btn_register {
 
+    display: block;
 
+    width: 100%;
 
+    border-radius: 10px;
 
+    background: #002e86;
 
+    border-color: #002e86;
 
+    padding-top: .5rem;
 
+    padding-bottom: .5rem;
 
 }

+ 37 - 18
templates/index.html
Parādīt failu 

@@ -4,6 +4,9 @@
 
       <meta charset="UTF-8">
 
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
       <!-- link -->
 
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
 
+        rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
 
+        crossorigin="anonymous">
 
       <link rel="stylesheet" href="static/index.css">
 
       <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
       <script type="text/javascript" charset="utf-8" src="static/echarts.js "></script>
 
@@ -13,32 +16,41 @@
 
       <title set-lan="html:title">機械所水塔監控網站 - {% block title %}{% endblock %}</title>
 
   </head>
 
 
-    
   <body>
 
-      <div id='sitebody'>
 
-        <div id="top-side-bar">
 
-            <div id="logo">
 
-              <img src="static/img/logo.png" alt="Logo" />
 
-            </div>
 
-            <div id="member">
 
-                <button >訊息通知</button>
 
-                <button onclick="javascript:location.href='/login'">會員登入</button>
 
-            </div>
 
+    <nav class="navbar navbar-expand-lg navbar-light">
 
+      <div class="container-fluid">
 
+        <a class="navbar-brand" href="#"><img src="static/img/PMS_LOGO.png" alt=""></a>
 
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
+          <span class="navbar-toggler-icon"></span>
 
+        </button>
 
+        <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
+          <ul class="navbar-nav ms-auto">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="">訊息通知</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="/login">會員登入</a>
 
+            </li>
 
+            
+          </ul>
 
         </div>
 
+      </div>
 
+    </nav>
 
+      <div id='sitebody'>
 
         <div id="nav-side-bar" class="nav-side-bar">
 
             <ul>
 
-              <li><a href="/home">總覽</a></li>
 
-              <li><a href="/tower">水塔監控</a></li>
 
-              <li><a href="/optim">智能最佳化</a></li>
 
-              <li><a href="/vibration">震動監控</a></li>
 
-              <li><a href="/history">歷史資料</a></li>
 
-              <li><a href="/device">設備設定</a></li>
 
-              <li><a href="/system">系統設定</a></li>
 
+              <li><a href="/home" class="side-bar-link active">總覽</a></li>
 
+              <li><a href="/tower" class="side-bar-link">水塔監控</a></li>
 
+              <li><a href="/optim" class="side-bar-link">智能最佳化</a></li>
 
+              <li><a href="/vibration" class="side-bar-link">震動監控</a></li>
 
+              <li><a href="/history" class="side-bar-link">歷史資料</a></li>
 
+              <li><a href="/device" class="side-bar-link">設備設定</a></li>
 
+              <li><a href="/system" class="side-bar-link">系統設定</a></li>
 
             </ul>
 
         </div>
 
         <div id='content'>
 
             {% block body %}
 
-      
+              
             {% endblock %}
 
         </div>
 
       
@@ -48,6 +60,13 @@
 
       
 
       </div>
 
+      <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://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
       <script type="text/javascript" src="static/index.js"></script>
 
     </body>

+ 12 - 14
templates/login.html
Parādīt failu 

@@ -6,18 +6,16 @@
 
 
 
 {% block body %}
 
-<div class="tab-pane fade p-lg-3" id="register" role="tabpanel" aria-labelledby="register-tab">
 
-    <form method="post" action="login">
 
-        <div class="form-floating mb-3">
 
-            <input type="text" class="form-control" id="username" name="username" placeholder="請輸入帳號">
 
-        </div>
 
-        <div class="form-floating mb-3">
 
-            <input type="password" class="form-control" id="password" name="password"  placeholder="請輸入密碼">
 
-        </div>
 
-        <div class="d-flex justify-content-center">
 
-            <button type="submit" class="btn btn-primary align-items-center" id="btn_login">登入</button>
 
-        </div>
 
-
 
-    </form>
 
-</div>
 
+<form method="post" action="login" class="login_form">
 
+    <h2>Sign in</h2>
 
+    <div class="mb-3">
 
+      <label for="exampleInputEmail1" class="form-label">User name</label>
 
+      <input type="text" class="form-control" id="username" name="username" placeholder="請輸入帳號">
 
+    </div>
 
+    <div class="mb-3">
 
+      <label for="exampleInputPassword1" class="form-label">Password</label>
 
+      <input type="password" class="form-control" id="password" name="password"  placeholder="請輸入密碼">
 
+    </div>
 
+    <button type="submit" class="btn btn-primary" id="btn_login">Login</button>
 
+</form>
 
 {% endblock %}

+ 76 - 0
templates/login_test.html
Parādīt failu 

@@ -0,0 +1,76 @@
 
+<!DOCTYPE html>
 
+<html lang='zh-TW'>
 
+  <head>
 
+      <meta charset="UTF-8">
 
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+      <!-- link -->
 
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
 
+        rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
 
+        crossorigin="anonymous">
 
+      <link rel="stylesheet" href="static/index.css">
 
+      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
+      <script type="text/javascript" charset="utf-8" src="static/echarts.js "></script>
 
+      <script type="text/javascript" src="static/time.js"></script>
 
+      <!-- <script type="text/javascript" charset="utf-8" src="static/echarts-liquidfill.js"></script> -->
 
+      
+      <title set-lan="html:title">機械所水塔監控網站 - {% block title %}{% endblock %}</title>
 
+  </head>
 
+
 
+  <body>
 
+    <nav class="navbar navbar-expand-lg navbar-light">
 
+      <div class="container-fluid">
 
+        <a class="navbar-brand" href="#"><img src="static/img/PMS_LOGO.png" alt=""></a>
 
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
+          <span class="navbar-toggler-icon"></span>
 
+        </button>
 
+        <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
+          <ul class="navbar-nav ms-auto">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="">訊息通知</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="/login">會員登入</a>
 
+            </li>
 
+            
+          </ul>
 
+        </div>
 
+      </div>
 
+    </nav>
 
+      <div id='sitebody'>
 
+        <div id="nav-side-bar" class="nav-side-bar">
 
+            <img src="static/img/PMS_LOGO.png" alt="" width="650" class="bar_img">
 
+        </div>
 
+        <div id='content_login'>
 
+            <!-- {% block body %} -->
 
+              <form method="post" action="login" class="login_form">
 
+                  <h2>Sign in</h2>
 
+                  <div class="mb-3">
 
+                    <label for="username" class="form-label">User name</label>
 
+                    <input type="text" class="form-control" id="username" name="username" placeholder="請輸入帳號">
 
+                  </div>
 
+                  <div class="mb-3">
 
+                    <label for="password" class="form-label">Password</label>
 
+                    <input type="password" class="form-control" id="password" name="password"  placeholder="請輸入密碼">
 
+                  </div>
 
+                  <button type="submit" class="btn btn-primary" id="btn_login">Login</button>
 
+              </form>
 
+            <!-- {% endblock %} -->
 
+        </div>
 
+      
+        
+          
+
 
+      
+
 
+      </div>
 
+      <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://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
+      <script type="text/javascript" src="static/index.js"></script>
 
+    </body>
 
+
 
+</html>

+ 12 - 14
templates/register.html
Parādīt failu 

@@ -6,18 +6,16 @@
 
 
 
 {% block body %}
 
-<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="請輸入帳號">
 
-        </div>
 
-        <div class="form-floating mb-3">
 
-            <input type="password" class="form-control" id="password" name="password"  placeholder="請輸入密碼">
 
-        </div>
 
-        <div class="d-flex justify-content-center">
 
-            <button type="submit" class="btn btn-primary align-items-center" id="btn_register">註冊</button>
 
-        </div>
 
-
 
-    </form>
 
-</div>
 
+<form method="post" action="register" class="login_form">
 
+    <h2>Sign up</h2>
 
+    <div class="mb-3">
 
+      <label for="username" class="form-label">User name</label>
 
+      <input type="text" class="form-control" id="username" name="username" placeholder="請輸入帳號">
 
+    </div>
 
+    <div class="mb-3">
 
+      <label for="password" class="form-label">Password</label>
 
+      <input type="password" class="form-control" id="password" name="password"  placeholder="請輸入密碼">
 
+    </div>
 
+    <button type="submit" class="btn btn-primary" id="btn_register">註冊</button>
 
+</form>
 
 {% endblock %}

+ 76 - 0
templates/rigister_test.html
Parādīt failu 

@@ -0,0 +1,76 @@
 
+<!DOCTYPE html>
 
+<html lang='zh-TW'>
 
+  <head>
 
+      <meta charset="UTF-8">
 
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+      <!-- link -->
 
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
 
+        rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
 
+        crossorigin="anonymous">
 
+      <link rel="stylesheet" href="static/index.css">
 
+      <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 
+      <script type="text/javascript" charset="utf-8" src="static/echarts.js "></script>
 
+      <script type="text/javascript" src="static/time.js"></script>
 
+      <!-- <script type="text/javascript" charset="utf-8" src="static/echarts-liquidfill.js"></script> -->
 
+      
+      <title set-lan="html:title">機械所水塔監控網站 - {% block title %}{% endblock %}</title>
 
+  </head>
 
+
 
+  <body>
 
+    <nav class="navbar navbar-expand-lg navbar-light">
 
+      <div class="container-fluid">
 
+        <a class="navbar-brand" href="#"><img src="static/img/PMS_LOGO.png" alt=""></a>
 
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 
+          <span class="navbar-toggler-icon"></span>
 
+        </button>
 
+        <div class="collapse navbar-collapse ms-auto" id="navbarNav">
 
+          <ul class="navbar-nav ms-auto">
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="">訊息通知</a>
 
+            </li>
 
+            <li class="nav-item">
 
+              <a class="nav-link" href="/login">會員登入</a>
 
+            </li>
 
+            
+          </ul>
 
+        </div>
 
+      </div>
 
+    </nav>
 
+      <div id='sitebody'>
 
+        <div id="nav-side-bar" class="nav-side-bar">
 
+            <img src="static/img/PMS_LOGO.png" alt="" width="650" class="bar_img">
 
+        </div>
 
+        <div id='content_login'>
 
+            <!-- {% block body %} -->
 
+            <form method="post" action="register" class="login_form">
 
+                <h2>Sign up</h2>
 
+                <div class="mb-3">
 
+                  <label for="username" class="form-label">User name</label>
 
+                  <input type="text" class="form-control" id="username" name="username" placeholder="請輸入帳號">
 
+                </div>
 
+                <div class="mb-3">
 
+                  <label for="password" class="form-label">Password</label>
 
+                  <input type="password" class="form-control" id="password" name="password"  placeholder="請輸入密碼">
 
+                </div>
 
+                <button type="submit" class="btn btn-primary" id="btn_register">註冊</button>
 
+            </form>
 
+            <!-- {% endblock %} -->
 
+        </div>
 
+      
+        
+          
+
 
+      
+
 
+      </div>
 
+      <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://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
+      <script type="text/javascript" src="static/index.js"></script>
 
+    </body>
 
+
 
+</html>