diff --git a/handler/login.go b/handler/login.go
new file mode 100644
index 0000000..eba65c7
--- /dev/null
+++ b/handler/login.go
@@ -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())
+}
diff --git a/main.go b/main.go
index 56b63e6..add4b9d 100644
--- a/main.go
+++ b/main.go
@@ -39,6 +39,7 @@ func main() {
// app.Get("/*", func(c *fiber.Ctx) error {
// return c.SendString("Hello, World!")
// })
+ app.Get("/login", handler.Login)
app.Listen(fmt.Sprint(":", port))
}
diff --git a/view/login/login.templ b/view/login/login.templ
new file mode 100644
index 0000000..9d2dd54
--- /dev/null
+++ b/view/login/login.templ
@@ -0,0 +1,25 @@
+package login
+
+templ Show() {
+
+
+
+
+
+
+
+
+ Anmelden | Tallytome
+
+
+
+ Anmelden
+
+
+
+
+}
diff --git a/view/stylesheets/tallytome.scss b/view/stylesheets/tallytome.scss
index 72de217..16a0766 100644
--- a/view/stylesheets/tallytome.scss
+++ b/view/stylesheets/tallytome.scss
@@ -191,7 +191,7 @@ progress{
justify-content: center;
align-items: center;
margin-bottom: calc(var(--pico-spacing) * .5);
-
+
.progress-label{
position: absolute;
@@ -226,7 +226,7 @@ progress{
100% {width: var(--hp-to-width);}
}
}
-
+
}
}
@@ -259,6 +259,14 @@ progress{
margin-bottom: var(--pico-spacing);
}
+#loginContainer {
+ height: 100vh;
+ max-width: 510px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
// form elements
// form{
@@ -284,7 +292,7 @@ progress{
// &:not([type="checkbox"], [type="radio"]), select, textarea {
// margin-bottom: 1rem;
// }
-
+
// &:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus {
// border-color: var(--primary);
// }
@@ -385,10 +393,10 @@ progress{
// }
// &[value]::-webkit-progress-value {
-
+
// border-radius: var(--border-radius);
-
-// }
+
+// }
// &::-moz-progress-bar {
// background-color: var(--primary);
@@ -401,14 +409,14 @@ progress{
// to right,
// var(--primary) 30%,
// var(--grey9) 30%
-// )
+// )
// top left/150% 150% no-repeat;
// animation: progress-indeterminate 1.5s linear infinite;
-
+
// &[value]::-webkit-progress-value {
// background-color: transparent;
// }
-
+
// &::-moz-progress-bar {
// background-color: transparent;
// }
@@ -418,7 +426,7 @@ progress{
// 0% {
// background-position: 200% 0;
// }
-
+
// 100% {
// background-position: -200% 0;
// }