<!--templates/base.html-->
<!--pip install Jinja2-->

<!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>
        <link href="/static/fonts/setup.css" rel="stylesheet">
        <link href="/static/styles/base.css" rel="stylesheet">
        <link href="/static/images/siteLogo.png" rel="icon" ></link>
        <script src="/static/scripts/jquery.js"></script>
    </head>
    <body>
        {% if(data['route'] == '/') %}
            {% include './front/home.html' %}
        {% elif(data['route'] == '/login') %}
            {% include './front/login.html' %}
        {% endif %}
    </body>
</html>

 

<!--templates/front/login.html-->

<link rel="stylesheet" href="/static/styles/front/login.css" />

<section class="Login">
    <div class="outer">
        <div class="title">{{data['pageTitle']}}</div>
        <form action="/login" method="post">
            <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 class="info">{{data['message']}}</div>
        </form>
    </div>
</section>

 

/* static/styles/front/login.css */

.Login .outer{
    background: var(--background);
    max-width: 400px;
    margin: 100px auto;
}

.Login .outer .title{
    background: var(--background-dark);
    color: white;
    text-align: center;
    font: 22px/1.5 Oswald,Limonf3;
    padding: 3px;
}

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

.Login .outer form a{
    text-align: right;
}

.Login .outer form input{
    font: var(--body-font);
    padding: 2px 5px;
}

.Login .outer form .info{
    text-align: center;
}

 

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

Heroku: https://khmerweb-multinews.herokuapp.com/login