Start styling with bootstrap

4 files changed, 38 insertions, 17 deletions

diff --git a/static/euro-money.svg b/static/euro-money.svg
new file mode 100644
index 0000000..241945e
--- /dev/null
+++ b/static/euro-money.svg
@@ -0,0 +1,11 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <circle style="fill:#99c1f1;" cx="255.997" cy="255.997" r="167.991"/> <g> <path style="fill:#1a5fb4;" d="M256,0c-7.664,0-13.877,6.213-13.877,13.877S248.336,27.753,256,27.753 c57.945,0,110.905,21.716,151.199,57.422l-32.781,32.781C341.468,89.6,299.928,74.132,256,74.132 c-45.156,0-86.517,16.549-118.35,43.892L95.044,75.42c-0.075-0.075-0.158-0.139-0.235-0.212c-0.071-0.075-0.132-0.154-0.205-0.228 c-5.417-5.419-14.206-5.419-19.624,0C26.628,123.332,0,187.62,0,256c0,141.159,114.841,256,256,256 c68.38,0,132.667-26.628,181.02-74.98C485.372,388.668,512,324.38,512,256C512,114.841,397.159,0,256,0z M365.043,147.093 c5.416,5.423,14.203,5.429,19.624,0.011c0.402-0.402,0.766-0.828,1.109-1.264c0.029-0.029,0.061-0.053,0.09-0.082l40.957-40.957 c32.834,37.054,53.823,84.82,56.987,137.322h-15.439c-7.664,0-13.877,6.213-13.877,13.877s6.213,13.877,13.877,13.877h15.443 c-3.047,51.144-22.904,99.082-56.912,137.403l-32.929-32.929c27.344-31.833,43.892-73.193,43.892-118.35 c0-7.664-6.213-13.877-13.877-13.877s-13.877,6.213-13.877,13.877c0,84.978-69.135,154.115-154.115,154.115 S101.883,340.979,101.883,256s69.135-154.115,154.115-154.115C297.201,101.885,335.927,117.941,365.043,147.093z M256,453.159 c-7.664,0-13.877,6.213-13.877,13.877v16.777c-52.502-3.165-100.269-24.154-137.322-56.987l32.849-32.849 c31.833,27.344,73.193,43.892,118.35,43.892s86.517-16.549,118.35-43.892l32.929,32.929 c-38.319,34.009-86.259,53.867-137.403,56.912v-16.782C269.877,459.371,263.664,453.159,256,453.159z M28.188,269.877h46.47 c3.011,39.73,18.85,75.932,43.367,104.473l-32.85,32.849C52.342,370.146,31.353,322.379,28.188,269.877z M85.096,104.72 l32.929,32.929c-24.517,28.542-40.355,64.743-43.367,104.473H28.182C31.229,190.979,51.087,143.041,85.096,104.72z"/> <path style="fill:#1a5fb4;" d="M336.905,276.043c-0.803-0.884-1.943-1.388-3.136-1.388h-19.005c-2.054,0-3.813,1.472-4.174,3.496 c-1.987,11.118-4.751,19.626-8.47,26.042c-6.72,11.84-16.295,17.596-29.27,17.596c-14.231,0-24.569-5.483-31.631-16.813 c-3.643-5.669-6.433-12.354-8.326-19.928h55.85c1.869,0,3.521-1.225,4.06-3.017l5.023-16.658c0.387-1.284,0.143-2.675-0.656-3.752 c-0.799-1.077-2.062-1.712-3.404-1.712h-63.723c-0.001-0.534-0.001-1.069-0.001-1.6c0-3.101,0.058-5.864,0.173-8.351h58.636 c1.88,0,3.534-1.238,4.066-3.039l4.915-16.658c0.379-1.284,0.13-2.668-0.67-3.74c-0.799-1.07-2.058-1.701-3.396-1.701h-59.829 c1.998-7.478,4.771-13.605,8.408-18.61c7.994-10.839,18.152-16.108,31.051-16.108c10.599,0,18.471,2.766,24.115,8.505 c5.777,5.681,9.712,13.764,11.697,24.023c0.387,1.994,2.133,3.434,4.164,3.434h19.115c0.017,0,0.033,0,0.042,0 c2.344,0,4.241-1.898,4.241-4.241c0-0.329-0.037-0.651-0.108-0.956c-1.359-15.216-7.356-28.97-17.84-40.895 c-10.877-12.353-26.233-18.616-45.645-18.616c-22.777,0-40.892,9.521-53.835,28.283c-6.99,10.061-11.999,21.881-14.916,35.177 h-21.279c-1.88,0-3.534,1.238-4.066,3.039l-4.915,16.658c-0.379,1.284-0.13,2.668,0.67,3.74c0.799,1.07,2.058,1.701,3.396,1.701 h23.366c-0.055,1.47-0.083,2.938-0.083,4.389c0,1.857,0.035,3.716,0.101,5.562h-18.468c-1.876,0-3.53,1.234-4.064,3.033 l-4.915,16.549c-0.382,1.284-0.135,2.671,0.666,3.744c0.799,1.073,2.061,1.704,3.397,1.704h25.823 c3.397,19.452,10.532,35,21.22,46.232c12.135,12.918,27.351,19.466,45.226,19.466c20.753,0,37.462-7.975,49.655-23.694 c10.047-12.88,16.047-28.911,17.836-47.644C338.104,278.11,337.71,276.927,336.905,276.043z"/> </g> </g>
+
+</svg>
\ No newline at end of file
diff --git a/templ/base.tpl b/templ/base.tpl
index 89e095f..af248dd 100644
--- a/templ/base.tpl
+++ b/templ/base.tpl
@@ -2,8 +2,10 @@
 <html lang="de">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{block "title" .}}Kosten{{end}}</title>
-    <link rel="stylesheet" href="/static/style.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 </head>
 <body>
 {{block "body" .}}
diff --git a/templ/form.tpl b/templ/form.tpl
index deb8d58..4d20557 100644
--- a/templ/form.tpl
+++ b/templ/form.tpl
@@ -1,17 +1,22 @@
 {{define "formItem"}}
-    <label {{with .ID}}for="{{.}}"{{end}}>{{.Label}}</label>
-    <input
-        {{with .ID}}id="{{.}}"{{end}}
-        type="{{.Type}}"
-        name="{{.Name}}"
-        placeholder="{{.Placeholder}}"
-        {{with .Value}}value="{{.}}"{{end}}
-        {{with .Class}}class="{{.}}"{{end}}
-        {{range .Options}} {{.}} {{end}}
-    >
+    {{- $cb := eq .Type "checkbox" -}}
+    <div class="{{if $cb}}form-check form-switch{{else}}form-floating{{end}} mb-3">
+        <input
+            {{with .ID}}id="{{.}}"{{end}}
+            type="{{.Type}}"
+            name="{{.Name}}"
+            placeholder="{{.Placeholder}}"
+            {{with .Value}}value="{{.}}"{{end}}
+            {{with .Class}}class="{{.}}"{{end}}
+            class="{{if $cb}}form-check-input{{else}}form-control{{end}}"
+            {{range .Options}} {{.}} {{end}}
+        >
+    <label {{with .ID}}for="{{.}}"{{end}}
+           {{- if $cb}}class="form-check-label"{{end}}>{{.Label}}</label>
+
     {{range errors}}
         <p style="color:red">{{.}}</p>
     {{end}}
     {{with .Footer}}<p>{{.}}</p>{{end}}
-    <br />
+    </div>
 {{end}}
\ No newline at end of file
diff --git a/templ/login.tpl b/templ/login.tpl
index 205b030..a0c17d1 100644
--- a/templ/login.tpl
+++ b/templ/login.tpl
@@ -1,7 +1,10 @@
 {{define "body"}}
-    <form action="/login" method="post">
-        {{inputs_and_errors_for . .Errors}}
-        {{.CsrfField}}
-        <button type="submit">Log In!</button>
-    </form>
+    <main class="d-flex align-items-center min-vh-100">
+        <form action="/login" method="post" class="container m-auto" style="max-width: 440px;">
+            <img src="/static/euro-money.svg" width="96" height="96" class="mb-4"/>
+            {{inputs_and_errors_for . .Errors}}
+            {{.CsrfField}}
+            <button class="btn btn-primary w-100" type="submit">Log In!</button>
+        </form>
+    </main>
 {{end}}
\ No newline at end of file