ContactBridge

Log | Files | Refs | README

login.html (3157B)


      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5     <meta charset="utf-8">
      6     <meta name="viewport" content="width=device-width, initial-scale=1">
      7     <title>CB | {{ page_title }}</title>
      8 
      9     <link rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}">
     10     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     11     <script defer src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
     12     <link rel="preconnect" href="https://fonts.googleapis.com">
     13     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     14     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
     15     <style>
     16 
     17       body {
     18         background-color: #f4f4f4;
     19       }
     20 
     21       .container .z-depth-1 {
     22         background-color: #ffffff;
     23         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
     24       }
     25 
     26       /* Existing styles for input fields */
     27       .input-field input:focus {
     28         border-bottom: 1px solid #2c3e50;
     29         box-shadow: 0 1px 0 0 #2c3e50;
     30       }
     31 
     32       .input-field input:focus + label {
     33         color: #2c3e50;
     34       }
     35 
     36       input:-webkit-autofill,
     37       input:-webkit-autofill:hover,
     38       input:-webkit-autofill:focus,
     39       input:-webkit-autofill:active {
     40         -webkit-box-shadow: 0 0 0 30px #f4f4f4 inset !important;
     41       }
     42 </style>
     43 </head>
     44 
     45 
     46 <body>
     47     <main>
     48         <center>
     49             <div class="section"></div>
     50             <div class="container">
     51                 <div class="z-depth-1 grey lighten-4 card-panel" style="max-width:350px; padding: 40px 30px 30px 30px; border: 1px solid #EEE;">
     52                     <form class="col s12" method="post">
     53                         <h5 class="login-label">Login</h5>
     54                         <div class='row'>
     55                             <div class='input-field col s12'>
     56                                 <input class='validate' type='text' name='username' id='username' />
     57                                 <label for='username'>Username</label>
     58                             </div>
     59                         </div>
     60                         <div class='row'>
     61                             <div class='input-field col s12'>
     62                                 <input class='validate' type='password' name='password' id='password' />
     63                                 <label for='password'>Password</label>
     64                             </div>
     65                         </div>
     66                         <div class='row'>
     67                             <button type='submit' name='btn_login' class='col s12 btn btn-large waves-effect indigo'>Login</button>
     68                         </div>
     69                         <div class='row'>
     70                             Server:
     71                             <span id="domain-label"></span>
     72                         </div>
     73                     </form>
     74                 </div>
     75             </div>
     76         </center>
     77     </main>
     78     <script>
     79         document.addEventListener('DOMContentLoaded', function() {
     80             var serverDomain = window.location.hostname;
     81             document.getElementById('domain-label').textContent = serverDomain;
     82         });
     83     </script>
     84 </body>
     85 
     86 </html>