added content to about and contact page and added main-handler to achive spa-functionality

handlers/main_handler.go

@@ -0,0 +1,28 @@
+package handlers
+
+import (
+	"embed"
+	"html/template"
+	"log"
+	"net/http"
+)
+
+// MainHandler
+func MainHandler(content embed.FS) http.HandlerFunc {
+	log.Print("MainHandler called")
+	return func(w http.ResponseWriter, r *http.Request) {
+		tmpl, err := template.ParseFS(content, "templates/main.html", "templates/monsterForm.html", "templates/monster.html", "templates/monsterTable.html")
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = tmpl.ExecuteTemplate(w, "main", map[string]interface{}{
+			"Title": "Dungeons & Dragons Monster Generator",
+		})
+		if err != nil {
+			log.Printf("Template execution error: %v\n", err)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}

main.go

@@ -28,6 +28,7 @@ func main() {
 	http.HandleFunc("/submit", handlers.SubmitHandler(content, &chars, &Monsters, filename))
 	http.Handle("/images/", http.StripPrefix("/images/", http.FileServer(http.FS(content))))
 	http.HandleFunc("/addMonster", handlers.AddMonster(&Monsters))
+	http.HandleFunc("/main", handlers.MainHandler(content))
 	http.HandleFunc("/about", handlers.AboutHandler(content))
 	http.HandleFunc("/contact", handlers.ContactHandler(content))
 	http.HandleFunc("/monsterTable", handlers.MonsterTableHandler(content, &Monsters))

templates/about.html

@@ -1,2 +1,15 @@
 {{ define "about" }}
+<div class="tile is-parent">
+  <div class="tile is-child card ">
+    <div class="card-content">
+      <div class="media-content">
+        <p class="title is-4">About Us</p>
+      </div>
+      <div class="content">
+        <p>Welcome to the Dungeons and Dragons Monster Generator website! We are a team of enthusiasts...</p>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
 {{ end }}

templates/base.html

@@ -17,7 +17,7 @@
   <div class="container is-widescreen">
     {{ template "header" . }}
   </div>
-  <div class="container is-widescreen">
+  <div class="container is-widescreen" id="main-content">
     {{ template "main" . }}
   </div>
 

templates/contact.html

@@ -1,2 +1,58 @@
 {{ define "contact" }}
+<div class="tile is-parent">
+  <div class="tile is-child card ">
+    <div class="card-content">
+      <div class="media-content">
+        <p class="title is-4">Contact Us</p>
+      </div>
+      <div class="content">
+
+        <div class="contact-info">
+          <h2>Our Contact Information</h2>
+          <p>You can reach us through the following channels:</p>
+          <ul>
+            <li>Email: example@example.com</li>
+            <li>Phone: +123456789</li>
+            <!-- Add more contact information -->
+          </ul>
+        </div>
+
+        <div class="contact-form">
+          <h2>Contact Form</h2>
+          <form action="/submitContact" method="post">
+            <div class="field">
+              <label for="name">Your Name:</label>
+              <div class="control">
+                <input type="text" name="name" required placeholder="Your name"
+                  class="input input-bordered w-full max-w-xs">
+              </div>
+            </div>
+
+            <div class="field">
+              <label for="email">Your Email:</label>
+              <div class="control">
+                <input type="email" name="email" required placeholder="Your email"
+                  class="input input-bordered w-full max-w-xs">
+              </div>
+            </div>
+
+            <div class="field">
+              <label for="message">Your Message:</label>
+              <div class="control">
+                <textarea name="message" required placeholder="Type your message here" class="textarea"></textarea>
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="control">
+                <button type="submit" class="button is-primary">Send Message</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
 {{ end }}

templates/header.html

@@ -11,15 +11,15 @@
 
     <div id="navbarBasicExample" class="navbar-menu">
       <div class="navbar-start">
-        <a href="/" class="navbar-item">
+        <a href="/" class="navbar-item" hx-get="/main" hx-target="#main-content">
           Dungeons & Dragons
         </a>
 
-        <a href="/about" class="navbar-item">
+        <a href="/about" class="navbar-item" hx-get="/about" hx-target="#main-content">
           About
         </a>
 
-        <a href="/contact" class="navbar-item">
+        <a href="/contact" class="navbar-item" hx-get="/contact" hx-target="#main-content">
           Contact
         </a>
       </div>