Style login page
Signed-off-by: Marcel Müller <neikos@neikos.email>
This commit is contained in:
parent
a1474dab43
commit
79305724f2
6 changed files with 85 additions and 49 deletions
|
|
@ -11,20 +11,24 @@
|
|||
</head>
|
||||
|
||||
<body class="min-h-screen flex flex-col">
|
||||
<nav class="bg-orange-300 px-2 py-2 inset-shadow-2xs">
|
||||
<div class="mx-auto container flex">
|
||||
<a href="/" class="bg-gray-700 rounded text-white p-2 select-none">
|
||||
<nav class="bg-orange-300 px-2 py-2 inset-shadow-2xs border-b-2 border-orange-900">
|
||||
<div class="mx-auto container flex select-none">
|
||||
<a href="/" class="outline-2 outline-gray-800 bg-gray-700 rounded text-white p-2">
|
||||
<span class="text-green-200">>_</span>
|
||||
Nixie CI ❄️
|
||||
</a>
|
||||
<div class="grow"></div>
|
||||
|
||||
<a href="/login" class="outline-2 outline-r-none hover:outline-emerald-900 outline-emerald-700 p-2 select-none rounded-l bg-emerald-600 text-white">Sign in</a>
|
||||
<a href="/register" class="outline-2 hover:outline-emerald-900 outline-blue-700 p-2 select-none rounded-r bg-blue-600 text-white">Register</a>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="grow px-2">
|
||||
<div class="mx-auto container">
|
||||
<main class="grow px-2 flex flex-col inset-shadow-sm">
|
||||
<div class="grow flex mx-auto container">
|
||||
{% block content %}{% endblock content %}
|
||||
</div>
|
||||
</div>
|
||||
<footer class="bg-orange-400 px-2 min-h-10 py-4 inset-shadow-2xs">
|
||||
</main>
|
||||
<footer class="bg-zinc-300 px-2 min-h-10 py-4">
|
||||
<div class="mx-auto container font-bold">
|
||||
{% block footer %}
|
||||
© Copyright 2026 by Hemera
|
||||
|
|
|
|||
6
nixie-server/templates/inputs.tera.html
Normal file
6
nixie-server/templates/inputs.tera.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{% macro text_input(label, name, id="",type="text") %}
|
||||
<div class="flex flex-col">
|
||||
<label for="{{id}}" class="font-bold">{{label}}:</label>
|
||||
<input class="border rounded p-1 bg-gray-50" type="{{type}}" name="{{name}}" id="{{id}}" />
|
||||
</div>
|
||||
{% endmacro text_input %}
|
||||
28
nixie-server/templates/users/login.tera.html
Normal file
28
nixie-server/templates/users/login.tera.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{% extends "base.tera.html" %}
|
||||
{% import "inputs.tera.html" as inputs %}
|
||||
|
||||
{% block title %}
|
||||
Login
|
||||
{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow sm:flex justify-center items-center">
|
||||
<div class="border-2 border-zinc-300 sm:rounded-2xl lg:rounded-4xl my-2 px-20 pb-14 pt-10 sm:shadow-lg space-y-4">
|
||||
<h1 class="font-bold text-3xl">Login</h1>
|
||||
<form action="/login" method="POST" class="space-y-4">
|
||||
{{ inputs::text_input(label="Username", name="username", id="username") }}
|
||||
{{ inputs::text_input(label="Password", name="password", id="password", type="password") }}
|
||||
<div class="flex flex-col">
|
||||
<button type="submit" class="bg-blue-500 p-2 rounded-lg text-white">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<a href="/register" class="bg-zinc-500 p-2 rounded-lg text-white text-center">
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue