renamed some files

Makefile

@@ -14,6 +14,7 @@ build:
 	cp -r ui bin/linux_amd64
 	cp Caddyfile bin/linux_amd64
 
+.PHONY: run
 run:
 	@echo "Running the website..."
 	go run ./cmd/web/*.go

cmd/web/handlers.go

@@ -39,7 +39,7 @@ type TemplateData struct {
 }
 
 func favicon(w http.ResponseWriter, r *http.Request) {
-	http.ServeFile(w, r, "favicon.ico")
+	http.ServeFile(w, r, "ui/static/favicon.ico")
 }
 
 func authenticatedUser(w http.ResponseWriter, r *http.Request) int32 {
@@ -84,7 +84,36 @@ func home(w http.ResponseWriter, r *http.Request) {
 
 	active_subscription := subscriptions.HasActiveSubscription(id)
 
-	text, err := template.ParseFiles("ui/html/base.html", "ui/html/index.html")
+	text, err := template.ParseFiles("ui/html/base.layout.html", "ui/html/index.page.html")
+	if err != nil {
+		http.Error(w, "Internal Server Error", 500)
+		log.Println(err)
+	}
+
+	switch r.Method {
+	case http.MethodGet:
+		err := text.Execute(w, TemplateData{AuthenticatedUser: id, Account: account, ActiveSubscription: active_subscription})
+		if err != nil {
+			log.Println(err)
+			http.Error(w, "Internal Server Error", 500)
+		}
+
+	case http.MethodPost:
+		err := text.Execute(w, TemplateData{})
+		if err != nil {
+			log.Println(err)
+			http.Error(w, "Internal Server Error", 500)
+		}
+	}
+}
+
+func news(w http.ResponseWriter, r *http.Request) {
+	id := authenticatedUser(w, r)
+	account, _ := users.GetAccount(id)
+
+	active_subscription := subscriptions.HasActiveSubscription(id)
+
+	text, err := template.ParseFiles("ui/html/base.layout.html", "ui/html/news.page.html")
 	if err != nil {
 		http.Error(w, "Internal Server Error", 500)
 		log.Println(err)
@@ -108,7 +137,7 @@ func home(w http.ResponseWriter, r *http.Request) {
 }
 
 func login(w http.ResponseWriter, r *http.Request) {
-	text, err := template.ParseFiles("ui/html/base.html", "ui/html/login.html")
+	text, err := template.ParseFiles("ui/html/base.layout.html", "ui/html/login.page.html")
 	if err != nil {
 		http.Error(w, "Internal Server Error", 500)
 		log.Fatal(err)
@@ -174,7 +203,7 @@ func login(w http.ResponseWriter, r *http.Request) {
 }
 
 func logout(w http.ResponseWriter, r *http.Request) {
-	text, err := template.ParseFiles("ui/html/base.html", "ui/html/logout.html")
+	text, err := template.ParseFiles("ui/html/base.layout.html", "ui/html/logout.page.html")
 	if err != nil {
 		http.Error(w, "Internal Server Error", 500)
 		log.Println(err)
@@ -209,7 +238,7 @@ func logout(w http.ResponseWriter, r *http.Request) {
 }
 
 func register(w http.ResponseWriter, r *http.Request) {
-	text, err := template.ParseFiles("ui/html/base.html", "ui/html/register.html")
+	text, err := template.ParseFiles("ui/html/base.layout.html", "ui/html/register.page.html")
 	if err != nil {
 		http.Error(w, "Internal Server Error", 500)
 		log.Println(err)
@@ -291,7 +320,7 @@ func account(w http.ResponseWriter, r *http.Request) {
 
 	//log.Println(id, account)
 
-	text, err := template.ParseFiles("ui/html/base.html", "ui/html/account.html")
+	text, err := template.ParseFiles("ui/html/base.layout.html", "ui/html/account.page.html")
 	if err != nil {
 		http.Error(w, "Internal Server Error", 500)
 		log.Println(err)
@@ -363,7 +392,7 @@ func subscribe(w http.ResponseWriter, r *http.Request) {
 		},
 	}
 
-	text, err := template.New("base.html").Funcs(fm).ParseFiles("ui/html/base.html", "ui/html/subscribe.html")
+	text, err := template.New("base.html").Funcs(fm).ParseFiles("ui/html/base.layout.html", "ui/html/subscribe.page.html")
 	if err != nil {
 		http.Error(w, "Internal Server Error", 500)
 		log.Println(err)
@@ -399,7 +428,7 @@ func subscribeStripe(w http.ResponseWriter, r *http.Request) {
 		log.Println(err)
 	}
 
-	text, err := template.ParseFiles("ui/html/base.html", "ui/html/subscribe_stripe.html")
+	text, err := template.ParseFiles("ui/html/base.layout.html", "ui/html/subscribe_stripe.page.html")
 	if err != nil {
 		http.Error(w, "Internal Server Error", 500)
 		log.Println(err)

cmd/web/main.go

@@ -71,6 +71,7 @@ func main() {
 	mux.HandleFunc("/favicon.ico", favicon)
 
 	mux.HandleFunc("/", home)
+	mux.HandleFunc("/news", news)
 	mux.HandleFunc("/login", login)
 	mux.HandleFunc("/logout", logout)
 	mux.HandleFunc("/register", register)

ui/html/base.layout.html

@@ -22,16 +22,17 @@
             <nav>
                 <a href="/"><h1 class="maintitle">Alfheim</h1></a>
                 <div class="navbuttons">
+                    <a href="/news"><div class="alfheimbutton"><strong>News</strong></div></a>
                     {{if not .ActiveSubscription}}
-                <a href="/subscribe"><div class="loginbutton"><strong>Subscribe</strong></div></a>
+                    <a href="/subscribe"><div class="alfheimbutton"><strong>Subscribe</strong></div></a>
                     {{end}}
 
                     {{if .AuthenticatedUser}}
-                <a href="/account"><div class="loginbutton"><strong>Account</strong></div></a>
-                <a href="/logout"><div class="loginbutton"><strong>Log out</strong></div></a>
+                    <a href="/account"><div class="alfheimbutton"><strong>Account</strong></div></a>
+                    <a href="/logout"><div class="alfheimbutton"><strong>Log out</strong></div></a>
                     {{else}}
-                <a href="/login"><div class="loginbutton"><strong>Log in</strong><img src="/static/login_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt=""/></div></a>
-                <a href="/register"><div class="loginbutton"><strong>Register</strong></div></a>
+                    <a href="/login"><div class="alfheimbutton"><strong>Log in</strong><img src="/static/login_24dp_FILL0_wght400_GRAD0_opsz24.svg" alt=""/></div></a>
+                    <a href="/register"><div class="alfheimbutton"><strong>Register</strong></div></a>
                     {{end}}
                 </div>
             </nav>

ui/html/index.page.html

@@ -1,9 +1,9 @@
 {{define "body"}}
-<p>Alfheim is a game about humanity: our own will, and our place in the world at large.</p>
+<p>Alfheim is a game about humanity: our own will, and our place in the world.</p>
 <p>Alfheim is an MMO where you&mdash;the player&mdash;administer a medieval settlement of elves.
-In an infinite world, and with thousands of other players, you will have to design an efficient command economy, if you wish to be able to compete with your enemies... Or your friends?</p>
+In an infinite world, and with thousands of other players, you will have to design an efficient command economy. Do you want to claim victory over your enemies... Or forge alliances with your friends?</p>
 <br \>
-<video playsinline loop autoplay muted><source src="/static/video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
+<video playsinline loop autoplay muted><source src="/static/video.mp4" type="video/mp4" style="display: block; width: 100%; margin-bottom: 8px;">Your browser does not support the video tag.</video>
 <br \>
-<img src="/static/image.png" alt="Alfheim" style="height: 100%; width: 100%; object-fit: contain">
+<img src="/static/image.png" alt="Alfheim" style="height: 100%; width: 100%; object-fit: contain; margin-top: 8px;">
 {{end}}

ui/html/news.page.html

@@ -0,0 +1,3 @@
+{{define "body"}}
+<p>NEWS!!</p>
+{{end}}

ui/static/style.css

@@ -3,7 +3,7 @@ html {
     background-size: cover;
     background-position: center;*/
     height: 100vh;
-    background-color: black;
+    background-color: #000000;
     box-sizing: border-box;
 }
 
@@ -22,9 +22,9 @@ body {
     min-height: 100%;
 }
 
-header {
+/* header {
 
-}
+} */
 
 nav {
     padding-left: 8px;
@@ -50,16 +50,16 @@ nav {
     }
 }
 
-.loginbutton {
+.alfheimbutton {
     align-self: center;
     display: flex;
     border: 12px solid;
     border-image-source: url("/static/panel-000.png");
     border-image-slice: 12 fill;
-    padding-top: 15px;
-    padding-right: 20px;
-    padding-bottom: 15px;
-    padding-left: 20px;
+    padding-top: 10px;
+    padding-right: 15px;
+    padding-bottom: 10px;
+    padding-left: 15px;
     color: black;
     /*box-shadow: 10px 10px 5px lightblue;*/
 }
@@ -75,6 +75,9 @@ main {
     max-height: 100%;
     margin-left: auto;
     margin-right: auto;
+    background-image: url('noise-texture.png');
+    background-repeat: repeat;
+    background-size: auto;
 }
 
 p {
@@ -90,9 +93,10 @@ p {
     border-radius: 15px;
     padding: 30px 40px;
     font-size: 1.5rem;
+    margin: 10px;
 }
 
-.wrapper {
+/* .wrapper {
     display: inline-block;
     background: transparent;
     border: 2px solid white;
@@ -102,6 +106,27 @@ p {
     padding: 30px 40px;
     width: 80%;
     text-align: center;
+    margin: 10px;
+} */
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+    background: transparent;
+    border: 2px solid white;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    border-radius: 15px;
+    padding: 30px 40px;
+    width: 80%;
+    text-align: center;
+    margin: 10px;
+}
+
+.wrapper form {
+    width: 100%; /* make each form stretch full width */
 }
 
 .wrapper h1 {