Added HTML
This commit is contained in:
110
frontend/assets/css/style.css
Normal file
110
frontend/assets/css/style.css
Normal file
@@ -0,0 +1,110 @@
|
||||
:root {
|
||||
--bg: #111827;
|
||||
--card: #1f2937;
|
||||
--border: #374151;
|
||||
--text: #f9fafb;
|
||||
--accent: #3b82f6;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: system-ui;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 1400px;
|
||||
|
||||
margin: auto;
|
||||
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
|
||||
grid-template-columns:
|
||||
repeat(auto-fit,minmax(250px,1fr));
|
||||
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
|
||||
border: 1px solid var(--border);
|
||||
|
||||
border-radius: 12px;
|
||||
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
|
||||
background: #1f2937;
|
||||
|
||||
color: white;
|
||||
|
||||
border: 1px solid var(--border);
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
padding: .8rem;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
@media(max-width:768px){
|
||||
|
||||
nav{
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
table{
|
||||
display:block;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -5,10 +5,14 @@ import (
|
||||
"net/http"
|
||||
)
|
||||
|
||||
var dashbaord = template.Must(template.ParseFiles(
|
||||
"frontend/htmx/contents/dash/base.html",
|
||||
"frontend/htmx/contents/dash/dashboard.html"))
|
||||
var home = template.Must(template.ParseFiles("frontend/htmx/home.html"))
|
||||
|
||||
func Home(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
var tmpl = template.Must(template.ParseFiles("frontend/htmx/home.html"))
|
||||
err := tmpl.Execute(w, struct {
|
||||
err := home.Execute(w, struct {
|
||||
Name string
|
||||
}{
|
||||
Name: "Miau",
|
||||
@@ -17,3 +21,15 @@ func Home(w http.ResponseWriter, r *http.Request) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
func Dashboard(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
err := dashbaord.Execute(w, struct {
|
||||
Title string
|
||||
}{
|
||||
Title: "Miau",
|
||||
})
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
27
frontend/htmx/contents/dash/base.html
Normal file
27
frontend/htmx/contents/dash/base.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ .Title }}</title>
|
||||
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
|
||||
<link rel="stylesheet" href="/static/css/app.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<a href="/dashboard">Dashboard</a>
|
||||
<a href="/items">Inventar</a>
|
||||
<a href="/projects">Projekte</a>
|
||||
<a href="/locations">Orte</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
{{ template "content" . }}
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
frontend/htmx/contents/dash/dashboard.html
Normal file
24
frontend/htmx/contents/dash/dashboard.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{{ define "content" }}
|
||||
|
||||
<h1>Dashboard</h1>
|
||||
|
||||
<div class="cards">
|
||||
|
||||
<div class="card">
|
||||
<h2>{{ .Stats.Items }}</h2>
|
||||
<p>Items</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>{{ .Stats.Projects }}</h2>
|
||||
<p>Projekte</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>{{ .Stats.Locations }}</h2>
|
||||
<p>Orte</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
21
frontend/htmx/contents/dash/inventory.html
Normal file
21
frontend/htmx/contents/dash/inventory.html
Normal file
@@ -0,0 +1,21 @@
|
||||
{{ define "content" }}
|
||||
|
||||
<h1>Inventar</h1>
|
||||
|
||||
<input
|
||||
type="search"
|
||||
name="q"
|
||||
placeholder="Suchen..."
|
||||
hx-get="/api/items/search"
|
||||
hx-trigger="keyup changed delay:300ms"
|
||||
hx-target="#items"
|
||||
>
|
||||
|
||||
<div
|
||||
id="items"
|
||||
hx-get="/api/items"
|
||||
hx-trigger="load"
|
||||
>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
32
frontend/htmx/contents/dash/itemlist.html
Normal file
32
frontend/htmx/contents/dash/itemlist.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<table>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Kategorie</th>
|
||||
<th>Gesamt</th>
|
||||
<th>Frei</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{{ range . }}
|
||||
|
||||
<tr>
|
||||
|
||||
<td>{{ .Name }}</td>
|
||||
|
||||
<td>{{ .Category }}</td>
|
||||
|
||||
<td>{{ .TotalQuantity }}</td>
|
||||
|
||||
<td>{{ .FreeQuantity }}</td>
|
||||
|
||||
</tr>
|
||||
|
||||
{{ end }}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
11
frontend/htmx/contents/dash/locations.html
Normal file
11
frontend/htmx/contents/dash/locations.html
Normal file
@@ -0,0 +1,11 @@
|
||||
{{ define "content" }}
|
||||
|
||||
<h1>Lagerorte</h1>
|
||||
|
||||
<div
|
||||
hx-get="/api/locations"
|
||||
hx-trigger="load"
|
||||
>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
21
frontend/htmx/contents/dash/projects.html
Normal file
21
frontend/htmx/contents/dash/projects.html
Normal file
@@ -0,0 +1,21 @@
|
||||
{{ define "content" }}
|
||||
|
||||
<h1>Projekte</h1>
|
||||
|
||||
<button
|
||||
hx-get="/projects/new"
|
||||
hx-target="#modal"
|
||||
>
|
||||
Neues Projekt
|
||||
</button>
|
||||
|
||||
<div
|
||||
hx-get="/api/projects"
|
||||
hx-trigger="load"
|
||||
hx-target="this"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div id="modal"></div>
|
||||
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user