#controllers/frontend/login/get.py
import config
from copy import deepcopy
from bottle import template

def call():
    kdict = deepcopy(config.kdict)
    kdict['pageTitle'] = 'ទំព័រ​ចុះ​ឈ្មោះ'

    return template('frontend/login', data=kdict)

 

<!--views/frontend/login.tpl-->
% rebase('base.tpl')
<link href="/static/styles/login.css" rel="stylesheet"></link>

<section>
    <header>​ចុះ​ឈ្មោះចូល​ទំព័រ​គ្រប់គ្រង</header>
    <form method="post" action="/login">
        <a>Email:</a><input type='email' name="email" required />
        <a>ពាក្យ​សំងាត់ៈ</a><input type='password' name="password" required />
        <a></a><input type='submit' value='បញ្ជូន' />
        <a></a><div>{{ data['message'] }}</div>
    </form>
</section>

 

<!--views/base.tpl-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>{{ data['siteTitle'] }}/{{data['pageTitle']}}</title>
    <script src="/static/scripts/jQuery.js"></script>
    <link href="/static/images/site_logo.png" rel="icon" ></link>
    <link href="/static/fonts/setup.css" rel="stylesheet"></link>
    <link href="/static/styles/base.css" rel="stylesheet"></link>
  </head>
  <body>
    <link href="/static/styles/base.css" rel="stylesheet"></link>
    {{!base}}
  </body>
</html>

 

/*asset/css/base.css*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
    color: #f9db0f;
}

a:hover{
    opacity: 0.7;
}

.region{
    max-width: 1100px;
    margin: 0 auto;
}

:root{
    --body-font: 14px/1.5 Vidaloka, OdorMeanChey;
    --background-dark: #003399;
    --foreground: #0099cc;
    --background-light: #66ccff;
    --background: #ccffcc;
    --color: white;
}

body{
    background: var(--background);
    font: var(--body-font);
    color: var(--color);
}

 

/*asset/css/login.css*/
section{
    width: 400px;
    margin: 100px auto;
    background: var(--foreground);
}

section header{
    text-align: center;
    font: 16px/1.5 Oswald, Koulen;
    border-bottom: 1px solid white;
    padding: 5px;
}

section form{
    display: grid;
    grid-template-columns: 21% auto;
    grid-gap: 5px;
    align-items: center;
    padding: 20px;
}

section form a{
    text-align: right;
    color: var(--color);
}

section form input{
    padding: 2px 5px;
    font: 14px/1.5 Vidaloka, OdorMeanChey;
}

section form div{
    text-align: center;
}

 

GitHub: https://github.com/Sokhavuth/khmerweb-multimedia

Vercel: https://khmerweb-multimedia.vercel.app/