seperator forms.html into templates and improve page styling
This commit is contained in:
Patryk Hegenberg
parent
a0738a7665
commit
24c11cbd50
7 changed files with 407 additions and 181 deletions
|
|
@ -47,6 +47,7 @@
|
|||
|
||||
<body class="bg-gray-100 h-screen flex items-center justify-center">
|
||||
|
||||
<img src="images/banner.jpg">
|
||||
<div data-theme="dark" class="bg-white p-6 rounded-lg shadow-md w-full max-w-lg">
|
||||
<div class="navbar bg-base-100">
|
||||
<a class="btn btn-ghost text-xl">Dungeons & Dragons</a>
|
||||
|
|
|
|||
BIN
images/banner.jpg
Normal file
BIN
images/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
17
main.go
17
main.go
|
|
@ -98,8 +98,9 @@ type Source struct {
|
|||
var (
|
||||
mu sync.Mutex
|
||||
chars []Character
|
||||
//go:embed forms.html
|
||||
page embed.FS
|
||||
//go:embed templates/*.html
|
||||
//go:embed images/*
|
||||
content embed.FS
|
||||
)
|
||||
|
||||
func main() {
|
||||
|
|
@ -107,21 +108,27 @@ func main() {
|
|||
|
||||
http.HandleFunc("/", formHandler(filename))
|
||||
http.HandleFunc("/submit", submitHandler(filename))
|
||||
http.Handle("/images/", http.StripPrefix("/images/", http.FileServer(http.FS(content))))
|
||||
|
||||
fmt.Println("Server gestartet, erreichbar unter http://localhost:8080")
|
||||
http.ListenAndServe(":8080", nil)
|
||||
}
|
||||
|
||||
// formHandler zeigt das Formular an
|
||||
func formHandler(filename string) http.HandlerFunc {
|
||||
return func(w http.ResponseWriter, r *http.Request) {
|
||||
tmpl, err := template.ParseFS(page, "forms.html")
|
||||
tmpl, err := template.ParseFS(content, "templates/base.html", "templates/header.html", "templates/main.html", "templates/footer.html")
|
||||
if err != nil {
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
tmpl.Execute(w, nil)
|
||||
err = tmpl.ExecuteTemplate(w, "base", map[string]interface{}{
|
||||
"Title": "Dungeons & Dragons Monster Generator",
|
||||
})
|
||||
if err != nil {
|
||||
fmt.Println("Template execution error:", err)
|
||||
http.Error(w, err.Error(), http.StatusInternalServerError)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
64
templates/base.html
Normal file
64
templates/base.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
{{ define "base" }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.Title}}</title>
|
||||
<!-- Hier könnten weitere Meta-Tags, Stylesheets, JavaScript-Dateien usw. eingefügt werden -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.31.0/dist/full.css" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-family: 'arial', sans-serif;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-item2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
{{ template "header" . }}
|
||||
|
||||
{{ template "main" . }}
|
||||
|
||||
{{ template "footer" . }}
|
||||
|
||||
<!-- Hier könnten weitere Scripts eingefügt werden, z.B., htmx und andere Abhängigkeiten -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
{{ end }}
|
||||
7
templates/footer.html
Normal file
7
templates/footer.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{{ define "footer" }}
|
||||
<footer class="footer footer-center p-4 bg-base-300 text-base-content">
|
||||
<aside>
|
||||
<p class="text-gray-600">© {{.Year}} Dungeons and Dragons. Alle Rechte vorbehalten.</p>
|
||||
</aside>
|
||||
</footer>
|
||||
{{ end }}
|
||||
15
templates/header.html
Normal file
15
templates/header.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{{ define "header" }}
|
||||
<header>
|
||||
<div id="banner" class="bg-gray-800 p-8 text-white">
|
||||
<!-- Hier könntest du ein Dungeons-and-Dragons-Banner einfügen -->
|
||||
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
|
||||
<a href="https://dnd.wizards.com/resources/press-assets">image credits</a>
|
||||
<h1 class="text-4xl font-bold">Dungeons and Dragons</h1>
|
||||
</div>
|
||||
<nav class="navbar bg-base-100">
|
||||
<a href="#" class="btn btn-ghost text-xl">Dungeons & Dragons</a>
|
||||
<a href="#" class="btn btn-ghost text-xl">About</a>
|
||||
<a href="#" class="btn btn-ghost text-xl">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
{{ end }}
|
||||
132
templates/main.html
Normal file
132
templates/main.html
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
{{ define "main" }}
|
||||
<div class="card-body form-box w-4/5 h-full">
|
||||
<h2 class="card-title">Monster Form</h2>
|
||||
<form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="filename">Filename:</label>
|
||||
<input type="text" name="filename" required placeholder="Dateiname"
|
||||
class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="name">Monster Name:</label>
|
||||
<input type="text" name="name" required placeholder="Type here" class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="source">Monster Source:</label>
|
||||
<input type="text" name="source" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="size">Size:</label>
|
||||
<input type="text" name="size" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="type">Type:</label>
|
||||
<input type="text" name="type" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="alignment">Alignment:</label>
|
||||
<input type="text" name="alignment" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="ac">AC:</label>
|
||||
<input type="number" name="ac" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="acFrom">AC From:</label>
|
||||
<input type="text" name="acFrom" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="hpAverage">HP Average:</label>
|
||||
<input type="number" name="hpAverage" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="hpFormula">HP Formula:</label>
|
||||
<input type="text" name="hpFormula" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="speed">Speed:</label>
|
||||
<input type="number" name="speed" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="str">Str:</label>
|
||||
<input type="number" name="str" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="dex">Dex:</label>
|
||||
<input type="number" name="dex" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="con">Con:</label>
|
||||
<input type="number" name="con" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="int">Int:</label>
|
||||
<input type="number" name="int" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="wis">Wis:</label>
|
||||
<input type="number" name="wis" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="cha">Cha:</label>
|
||||
<input type="number" name="cha" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="saveDex">Save Dex:</label>
|
||||
<input type="text" name="saveDex" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="saveCon">Save Con:</label>
|
||||
<input type="text" name="saveCon" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="saveWis">Save Wis:</label>
|
||||
<input type="text" name="saveWis" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="perception">Perception:</label>
|
||||
<input type="text" name="perception" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="stealth">Stealth:</label>
|
||||
<input type="text" name="stealth" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="damageRes">Damage Resistances:</label>
|
||||
<input type="text" name="damageRes" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="senses">Senses:</label>
|
||||
<input type="text" name="senses" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="languages">Languages:</label>
|
||||
<input type="text" name="languages" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="cr">CR:</label>
|
||||
<input type="text" name="cr" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="traitName">Trait Name:</label>
|
||||
<input type="text" name="traitName" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="traitEntry">Trait Entry:</label>
|
||||
<input type="text" name="traitEntry" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="actionName">Action Name:</label>
|
||||
<input type="text" name="actionName" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<div class="grid grid-cols-2">
|
||||
<label for="actionEntry">Action Entry:</label>
|
||||
<input type="text" name="actionEntry" required class="input input-bordered w-full max-w-xs"><br>
|
||||
</div>
|
||||
<input type="hidden" name="filename" value="{{.Filename}}">
|
||||
<div class="card-actions justify-end">
|
||||
<input type="submit" value="Submit" class="btn">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{ end }}
|
||||
Loading…
Add table
Add a link
Reference in a new issue