Khmer Web: បង្កើតទំព័រពាក្យសំងាត់

ជាទូទៅ ទំព័រពាក្យសំងាត់ដែលភាសាអង់គ្លេសហៅថា login page គឺជាកន្លែងសំរាប់សរសេរបញ្ចូលឈ្មោះអ្នកប្រើប្រាស់និងពាក្យសំងាត់ ក្នុងគោលបំណងចូលទៅកាន់ទំព័រហាមឃាត់ទាំងឡាយ។ ក៏ប៉ុន្តែ មុននឹងចាប់ផ្តើមសរសេរកូដបង្កើតយន្តការត្រួតពិនិត្យឈ្មោះអ្នកប្រើប្រាស់និងពាក្យសំងាត់នានា យើងចាំបាច់ត្រូវធ្វើការរចនាទំព័រ login នេះជាមុនសិន ដោយធ្វើដូចខាងក្រោមនេះ៖

<!--login.ejs-->
<!DOCTYPE html>
<html>
  <head>
    <title>ទំព័រពាក្យសំងាត់</title>
    <link rel='stylesheet' href='/stylesheets/login-style.css' />
    <link href="https://fonts.googleapis.com/css?family=Odor+Mean+Chey|Moul|Koulen|Bayon|Bokor|Nokora" rel="stylesheet">
    <link rel="icon" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmkI_umfGWKYToVU5kG2rgkyqTktVhRpv5K4Z1s6V2bFjFy-8xsiBxoHwqEEvK0U4La74VFMxO5tQ8ktKOQMOGvl72c0piL_jAsy0Tl_X35E2eFWfz33hyphenhyphenJ-Dc4G_P9MeXYdH-F8KF5F4/s1600/download.png">
  </head>
  <body>
    <div class="form-outer">
    <div class="title">ទំព័រពាក្យសំងាត់</div>
    <div class="info">
        បញ្ចូលឈ្មោះអ្នកប្រើប្រាស់និងពាក្យសំងាត់របស់អ្នក ដើម្បី៊ចូលទៅកាន់ទំព័រគ្រប់គ្រង។
    </div>
    <form action="/users/login" method="post">    
        <div class="input-wrapper">
            <label>ឈ្មោះអ្នកប្រើប្រាស់:</label>
            <input type="text" name="username"/>
        </div>
        <div class="input-wrapper">
            <label>ពាក្យសំងាត់:</label>
            <input type="password" name="password"/>
        </div>
        <div>
            <input class="submit" type="submit" value="បញ្ចូល"/>
        </div> 
    </form>
    </div>
  </body>
</html>

/* login-style.css */
body{
  padding:0;
  margin:0;
  font:14px "Lucida Grande", Helvetica, Arial, sans-serif,"Odor Mean Chey";
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9m5NuPryxy8WnkBzzIEi5xgvjeePytMILjAaRSiGVtaQMrLFaLCPA8lVb5dOrfdzopb1sJYTeNK4_lYMgifOFfgTb650mIF4A6vkyrd4-oTs2RSSFcRFA4VJvPKlL67z6oenGXGOXdI/s1600/ADB3.jpg');
  background-repeat:no-repeat;
  background-size:100% auto;
}
.form-outer{
  background:#e6e6e6;
  width:500px;
  height:520px;
  margin:50px auto;
  opacity:.7;
  border-radius:4px;
  position:relative;
}
.form-outer .title{
  background:rgb(9, 161, 231);
  text-align:center;
  font:18px Bayon;
  color:rgb(70, 67, 67);
  padding:3px;
}
.form-outer .info{
  font:italic 24px/1.5 Nokora;
  position:absolute;
  top:130px;
  padding:0 30px;
}
form{
  position:absolute;
  bottom:100px;
  text-align:center;
  width:100%
}
.input-wrapper{
  display:grid;
  grid-template-columns:25% 75%;
  align-items:center;
  width:calc(100% - 60px);
  margin:0 auto;
  text-align:left;
  margin-bottom:5px;
}
.input-wrapper label{
  text-align:right;
}
.input-wrapper input{
  height:30px;
  padding:0 10px;
}
.submit{
  font:14px "Odor Mean Chey";
  padding:2px 20px;
}
@media only screen and (max-width: 768px){
  .form-outer{
    width:100%;
  }
  .input-wrapper{
    width:calc(100% - 10px);
  }
}