黃金點遊戲（三）——bs前端設計
阿新 • • 發佈：2020-11-16
黃金點遊戲bs架構——前端設計
-
index.html主頁- 主頁左側為導航欄，設計實現遊戲導航和結果資料表統計選項
- 在開始遊戲介面，建立房間
- 建立遊戲
- 制定遊戲規則
- 規定遊戲人數
- 規定黃金點數字範圍（暫時設想為數字上界）
- 制定遊戲規則
- 然後點選下一步進入填寫數字選項
- 輸入本輪選擇的數字（暫時設計為整數）
- 點選下一步，等候結果產生
- 顯示本輪名次
- 顯示本輪黃金點
-
login.html登入介面-
當有登入時重定向到使用者主頁
-
當沒有登入時提供使用者名稱框、密碼框，將資訊加密後發給伺服器
-
提供註冊按鈕選項，點選後，給出使用者名稱框、密碼框、重複密碼框、電子郵件框，按要求填寫後，將資訊加密後傳送給伺服器
-
登入 註冊 忘記密碼 程式碼展示如下
<!DOCTYPE html> <!-- Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme Author: KeenThemes Website: http://www.keenthemes.com/ Contact: [email protected] Follow: www.twitter.com/keenthemes Dribbble: www.dribbble.com/keenthemes Like: www.facebook.com/keenthemes Purchase: https://1.envato.market/EA4JP Renew Support: https://1.envato.market/EA4JP License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project. <base href="../../../../"> --> <html lang="en"> <!--begin::Head--> <head> <meta charset="utf-8" /> <title>Login</title> <meta name="description" content="Login page example" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <link rel="canonical" href="https://keenthemes.com/metronic" /> <!--begin::Fonts--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" /> <!--end::Fonts--> <!--begin::Page Custom Styles(used by this page)--> <link href="assets/css/pages/login/classic/login-4.css" rel="stylesheet" type="text/css" /> <!--end::Page Custom Styles--> <!--begin::Global Theme Styles(used by all pages)--> <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" /> <link href="assets/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" /> <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" /> <!--end::Global Theme Styles--> <!--begin::Layout Themes(used by all pages)--> <link href="assets/css/themes/layout/header/base/light.css" rel="stylesheet" type="text/css" /> <link href="assets/css/themes/layout/header/menu/light.css" rel="stylesheet" type="text/css" /> <link href="assets/css/themes/layout/brand/dark.css" rel="stylesheet" type="text/css" /> <link href="assets/css/themes/layout/aside/dark.css" rel="stylesheet" type="text/css" /> <!--end::Layout Themes--> <link rel="shortcut icon" href="assets/media/logos/favicon.ico" /> </head> <!--end::Head--> <!--begin::Body--> <body id="kt_body" class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"> <!--begin::Main--> <div class="d-flex flex-column flex-root"> <!--begin::Login--> <div class="login login-4 login-signin-on d-flex flex-row-fluid" id="kt_login"> <div class="d-flex flex-center flex-row-fluid bgi-size-cover bgi-position-top bgi-no-repeat" style="background-image: url('assets/media/bg/bg-3.jpg');"> <div class="login-form text-center p-7 position-relative overflow-hidden"> <!--begin::Login Header--> <div class="d-flex flex-center mb-15"> <a href="#"> <!-- <img src="assets/media/logos/logo-letter-13.png" class="max-h-75px" alt="" /> --> </a> </div> <!--end::Login Header--> <!--begin::Login Sign in form--> <div class="login-signin"> <div class="mb-20"> <h3 style="font-size: 3em;font-family: Microsoft Yahei;font-weight: bold;">登入</h3> <div class="text-muted font-weight-bold">黃金點遊戲</div> </div> <form class="form" id="kt_login_signin_form"> <div class="form-group mb-5"> <input class="form-control h-auto form-control-solid py-4 px-8" type="text" placeholder="賬號" name="username" autocomplete="off" /> </div> <div class="form-group mb-5"> <input class="form-control h-auto form-control-solid py-4 px-8" type="password" placeholder="密碼" name="password" /> </div> <div class="form-group d-flex flex-wrap justify-content-between align-items-center"> <div class="checkbox-inline"> <label class="checkbox m-0 text-muted"> <input type="checkbox" name="remember" /> <span></span>記住密碼</label> </div> <a href="javascript:;" id="kt_login_forgot" class="text-muted text-hover-primary">忘記密碼 ?</a> </div> <button id="kt_login_signin_submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-4">提交</button> </form> <div class="mt-10"> <span class="opacity-70 mr-4">還未有賬號?</span> <a href="javascript:;" id="kt_login_signup" class="text-muted text-hover-primary font-weight-bold">註冊一個!</a> </div> </div> <!--end::Login Sign in form--> <!--begin::Login Sign up form--> <div class="login-signup"> <div class="mb-20"> <h3 style="font-size: 3em;font-family: Microsoft Yahei;font-weight: bold;">註冊</h3> <div class="text-muted font-weight-bold">輸入詳細資訊</div> </div> <form class="form" id="kt_login_signup_form"> <div class="form-group mb-5"> <input class="form-control h-auto form-control-solid py-4 px-8" type="text" placeholder="賬號" name="fullname" /> </div> <div class="form-group mb-5"> <input class="form-control h-auto form-control-solid py-4 px-8" type="text" placeholder="郵箱" name="email" autocomplete="off" /> </div> <div class="form-group mb-5"> <input class="form-control h-auto form-control-solid py-4 px-8" type="password" placeholder="密碼" name="password" /> </div> <div class="form-group mb-5"> <input class="form-control h-auto form-control-solid py-4 px-8" type="password" placeholder="確認密碼" name="cpassword" /> </div> <div class="form-group mb-5 text-left"> <div class="checkbox-inline"> <label class="checkbox m-0"> <input type="checkbox" name="agree" /> <span></span>我同意 <a href="#" class="font-weight-bold ml-1">專案條款</a>.</label> </div> <div class="form-text text-muted text-center"></div> </div> <div class="form-group d-flex flex-wrap flex-center mt-10"> <button id="kt_login_signup_submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-2">註冊</button> <button id="kt_login_signup_cancel" class="btn btn-light-primary font-weight-bold px-9 py-4 my-3 mx-2">取消</button> </div> </form> </div> <!--end::Login Sign up form--> <!--begin::Login forgot password form--> <div class="login-forgot"> <div class="mb-20"> <h3 style="font-size: 3em;font-family: Microsoft Yahei;font-weight: bold;">忘記密碼 ?</h3> <div class="text-muted font-weight-bold">請輸入您的註冊郵箱來重置密碼</div> </div> <form class="form" id="kt_login_forgot_form"> <div class="form-group mb-10"> <input class="form-control form-control-solid h-auto py-4 px-8" type="text" placeholder="註冊郵箱" name="email" autocomplete="off" /> </div> <div class="form-group d-flex flex-wrap flex-center mt-10"> <button id="kt_login_forgot_submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-2">傳送申請</button> <button id="kt_login_forgot_cancel" class="btn btn-light-primary font-weight-bold px-9 py-4 my-3 mx-2">取消</button> </div> </form> </div> <!--end::Login forgot password form--> </div> </div> </div> <!--end::Login--> </div> <!--end::Main--> <script>var HOST_URL = "https://preview.keenthemes.com/metronic/theme/html/tools/preview";</script> <!--begin::Global Config(global config for global JS scripts)--> <script>var KTAppSettings = { "breakpoints": { "sm": 576, "md": 768, "lg": 992, "xl": 1200, "xxl": 1400 }, "colors": { "theme": { "base": { "white": "#ffffff", "primary": "#3699FF", "secondary": "#E5EAEE", "success": "#1BC5BD", "info": "#8950FC", "warning": "#FFA800", "danger": "#F64E60", "light": "#E4E6EF", "dark": "#181C32" }, "light": { "white": "#ffffff", "primary": "#E1F0FF", "secondary": "#EBEDF3", "success": "#C9F7F5", "info": "#EEE5FF", "warning": "#FFF4DE", "danger": "#FFE2E5", "light": "#F3F6F9", "dark": "#D6D6E0" }, "inverse": { "white": "#ffffff", "primary": "#ffffff", "secondary": "#3F4254", "success": "#ffffff", "info": "#ffffff", "warning": "#ffffff", "danger": "#ffffff", "light": "#464E5F", "dark": "#ffffff" } }, "gray": { "gray-100": "#F3F6F9", "gray-200": "#EBEDF3", "gray-300": "#E4E6EF", "gray-400": "#D1D3E0", "gray-500": "#B5B5C3", "gray-600": "#7E8299", "gray-700": "#5E6278", "gray-800": "#3F4254", "gray-900": "#181C32" } }, "font-family": "Poppins" };</script> <!--end::Global Config--> <!--begin::Global Theme Bundle(used by all pages)--> <script src="assets/plugins/global/plugins.bundle.js"></script> <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script> <script src="assets/js/scripts.bundle.js"></script> <!--end::Global Theme Bundle--> <!--begin::Page Scripts(used by this page)--> <script src="assets/js/pages/custom/login/login-general.js"></script> <!--end::Page Scripts--> </body> <!--end::Body--> </html>
-
-
home.html使用者主頁- 當沒有登入時重定向到登入介面
- 當登入時提供使用者分值、最近使用者歷史的展示
- 提供主頁、退出登入按鈕
- 進行投票
- （暫時還未實現該前端設計，後續增加）