feat: added login page

no functionality tho
This commit is contained in:
Itsigo
2024-04-12 16:33:37 +02:00
parent 98301fa904
commit 96ec48483a
4 changed files with 54 additions and 10 deletions

10
handler/login.go Normal file
View File

@@ -0,0 +1,10 @@
package handler
import (
"github.com/gofiber/fiber/v3"
"github.com/itsig0/tallytome/view/login"
)
func Login(c fiber.Ctx) error {
return render(c, login.Show())
}

View File

@@ -39,6 +39,7 @@ func main() {
// app.Get("/*", func(c *fiber.Ctx) error { // app.Get("/*", func(c *fiber.Ctx) error {
// return c.SendString("Hello, World!") // return c.SendString("Hello, World!")
// }) // })
app.Get("/login", handler.Login)
app.Listen(fmt.Sprint(":", port)) app.Listen(fmt.Sprint(":", port))
} }

25
view/login/login.templ Normal file
View File

@@ -0,0 +1,25 @@
package login
templ Show() {
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/tallytome.css"/>
<script src="/scripts/htmx.js"></script>
<script src="/scripts/tallytome.js"></script>
<title>Anmelden | Tallytome</title>
</head>
<body>
<main id="loginContainer" class="container">
<h1>Anmelden</h1>
<form>
<input type="text" placeholder="Login"/>
<input type="password" placeholder="Passwort"/>
<button type="submit">Anmelden</button>
</form>
</main>
</body>
</html>
}

View File

@@ -191,7 +191,7 @@ progress{
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: calc(var(--pico-spacing) * .5); margin-bottom: calc(var(--pico-spacing) * .5);
.progress-label{ .progress-label{
position: absolute; position: absolute;
@@ -226,7 +226,7 @@ progress{
100% {width: var(--hp-to-width);} 100% {width: var(--hp-to-width);}
} }
} }
} }
} }
@@ -259,6 +259,14 @@ progress{
margin-bottom: var(--pico-spacing); margin-bottom: var(--pico-spacing);
} }
#loginContainer {
height: 100vh;
max-width: 510px;
display: flex;
flex-direction: column;
justify-content: center;
}
// form elements // form elements
// form{ // form{
@@ -284,7 +292,7 @@ progress{
// &:not([type="checkbox"], [type="radio"]), select, textarea { // &:not([type="checkbox"], [type="radio"]), select, textarea {
// margin-bottom: 1rem; // margin-bottom: 1rem;
// } // }
// &:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus { // &:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus {
// border-color: var(--primary); // border-color: var(--primary);
// } // }
@@ -385,10 +393,10 @@ progress{
// } // }
// &[value]::-webkit-progress-value { // &[value]::-webkit-progress-value {
// border-radius: var(--border-radius); // border-radius: var(--border-radius);
// } // }
// &::-moz-progress-bar { // &::-moz-progress-bar {
// background-color: var(--primary); // background-color: var(--primary);
@@ -401,14 +409,14 @@ progress{
// to right, // to right,
// var(--primary) 30%, // var(--primary) 30%,
// var(--grey9) 30% // var(--grey9) 30%
// ) // )
// top left/150% 150% no-repeat; // top left/150% 150% no-repeat;
// animation: progress-indeterminate 1.5s linear infinite; // animation: progress-indeterminate 1.5s linear infinite;
// &[value]::-webkit-progress-value { // &[value]::-webkit-progress-value {
// background-color: transparent; // background-color: transparent;
// } // }
// &::-moz-progress-bar { // &::-moz-progress-bar {
// background-color: transparent; // background-color: transparent;
// } // }
@@ -418,7 +426,7 @@ progress{
// 0% { // 0% {
// background-position: 200% 0; // background-position: 200% 0;
// } // }
// 100% { // 100% {
// background-position: -200% 0; // background-position: -200% 0;
// } // }