view assets/login.html.hbs @ 42:dfef5a8263c3

Make login form more beautiful
author Lewin Bormann <lbo@spheniscida.de>
date Mon, 18 Jul 2022 08:21:35 -0700
parents 43cd5bbe858e
children 2ecb25f3adfe
line wrap: on
line source

<html>
    <head>
        <title>Analyrics Login</title>

        <meta name="robots" content="noindex">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            #logo { color: #22bb22; font-size: 20pt; font-style: bold; }
            #header { color: #bb2222; }
            #flashtext {  }
            .flash { text-align: center; border-style: solid; border-color: #22aa22; margin-left: 30%; margin-right: 30%; }

            #loginformbox {  display: flex; justify-content: center; }
            #loginform { }
            #innerformbox { width: 25em; text-align: right; }
            .entryline { padding: 3px; }
            .submitbutton { text-align: right; padding: 1em; }

            input { height: 2.5em; border: lightgray solid; }
            input:focus { outline: 0; }
            label { }
        </style>
    </head>
    <body>
    <div id="header">
        <span id="logo">AnaLyrics</span>
    </div>
{{#if flash}}<div class="flash">{{flash}}</div>{{/if}}

        <div id="loginformbox">
            <div id="innerformbox">
            <form action="" method="POST" id="loginform">
                <div class="entryline"><label>User name: </label><input type="text" name="username" /></div>
                <div class="entryline"><label>Password: </label><input type="password" name="password" /></div>
                <div class="submitbutton"><input type="submit" value="Log in" /></div>
            </form>
            </div>
        </div>


    </body>
</html>