Added Evillious guide website

README.md

@@ -5,9 +5,9 @@
 A truly proper website this time™
 
 **TODO**:
-- Redo the entire CSS with a framework
 - Change domain to quenten.nl and staging.quenten.nl
 - Dynamically make domains for other branches
+- Make a generic page component, so that you don't have to add the standard panels every time (such as navbar, leftbar, header, etc)
 
 
 This website will be done with this:

components/bannerpanel.go

@@ -0,0 +1,13 @@
+package components
+
+import "github.com/maxence-charriere/go-app/v9/pkg/app"
+
+type bannerPanel struct {
+	app.Compo
+}
+
+func (b *bannerPanel) Render() app.UI {
+	return app.Div().
+		Class("leftbar").
+		Body()
+}

components/galaxiespage.go

@@ -15,6 +15,7 @@ func (f *GalaxiesPage) Render() app.UI {
 		&header{},
 		&navbar{},
 		&galaxiesPanel{},
+		&bannerPanel{},
 	).Class("main")
 }
 
@@ -36,7 +37,7 @@ func (b *galaxiesPanel) Render() app.UI {
 		app.Div().
 			Body(
 				app.P().
-					Class("p-h2 m-tb10").
+					Class("p-h2 mt-20 mb-10 bold").
 					Text("My friends!"),
 				app.Ul().Body(
 					app.Li().Body(
@@ -77,5 +78,31 @@ func (b *galaxiesPanel) Render() app.UI {
 					),
 				),
 			),
+		app.Div().
+			Body(
+				app.P().
+					Class("p-h2 mt-20 mb-10 bold").
+					Text("Neat webspaces"),
+				app.P().
+					Class("m-t5").
+					Style("margin-left", "10px").
+					Text(`Just very neat websites I found. Not necessarily by people I know.
+					I just thought it would be nice to share them here!`),
+				app.Ul().Body(
+					app.Li().Body(
+						app.Div().Body(
+							// TODO: Create a modal popup for each name!!!
+							app.A().Href("https://evillious.ylimegirl.com/").
+								Class("p-h3 m-t5").
+								Text("Evillious Chronicles fan guide"),
+							app.P().
+								Class("m-t5").
+								Text(`A VERY cool website made by Ylimegirl! They wrote a whole
+								website dedicated to Evillious Chronicles, which is a super 
+								good Japanese light novel and vocaloid series!! Definitely look it up!`),
+						),
+					),
+				),
+			),
 	).Class("content")
 }

components/homepage.go

@@ -36,6 +36,7 @@ func (p *Homepage) Render() app.UI {
 				p.showGuestbook = !p.showGuestbook
 			},
 		},
+		&bannerPanel{},
 		&guestbookForm{
 			OnSubmit: func(name, message string) {
 				var comment entity.Comment

components/homepanel.go

@@ -16,9 +16,17 @@ func newHomePanel() *homePanel {
 func (p *homePanel) Render() app.UI {
 	return app.Div().Body(
 		app.P().Text("Welcome, internet surfer!").Class("p-h1"),
+		app.Div().Body(
+			app.P().Text("Please sign my guestbook!").Class("small"),
+			app.Img().Src("/web/static/images/email3.gif").Style("width", "40px").Style("position", "absolute").Style("bottom", "0px").Style("right", "0px"),
+		).Style("position", "absolute").Style("top", "10px").Style("right", "5px").
+			OnClick(func(ctx app.Context, e app.Event) {
+				e.PreventDefault()
+				p.onShowClick()
+			}),
 		app.Img().
 			Style("float", "right").
-			Style("margin-bottom", "50px").
+			Style("margin-bottom", "10px").
 			Height(230).
 			Src("/web/static/images/rin-len1.webp"),
 		app.Raw(
@@ -42,14 +50,6 @@ func (p *homePanel) Render() app.UI {
 					Class("content-text").
 					Text("An update is available! Reload to update!"),
 			)),
-		app.Div().Body(
-			app.P().Text("Please sign my guestbook!").Class("small"),
-			app.Img().Src("/web/static/images/email3.gif").Style("width", "40px").Style("position", "absolute").Style("bottom", "0px").Style("right", "0px"),
-		).Style("position", "absolute").Style("bottom", "5px").Style("right", "5px").
-			OnClick(func(ctx app.Context, e app.Event) {
-				e.PreventDefault()
-				p.onShowClick()
-			}),
 	).Class("content")
 }
 

web/static/style.css

@@ -17,6 +17,7 @@ body {
 	border: 3px solid;
 	border-radius: 4px;
 	border-color: rgb(252, 230, 255);
+	margin-bottom: 5px;
 	background-color: rgb(54, 39, 48);
 	font-size: 5em;
 	font-family: anisha;
@@ -31,6 +32,7 @@ body {
 	border: 3px solid;
 	border-radius: 4px;
 	border-color: rgb(252, 230, 255);
+	margin-bottom: 5px;
 	background-color: rgb(54, 39, 48);
 	position: relative;
 	float:left;
@@ -44,6 +46,17 @@ body {
 	color:rgb(252, 230, 255)
 }
 
+.leftbar {
+	border: 3px solid;
+	border-radius: 4px;
+	border-color: rgb(252, 230, 255);
+	background-color: rgb(54, 39, 48);
+	position: relative;
+	float:left;
+	width: 250px;
+	padding: 5px 0px;
+}
+
 .content {
 	border: 3px solid;
 	border-radius: 4px;
@@ -64,7 +77,6 @@ body {
 	margin-bottom: 5px;
 }
 
-.
 
 /*
 .content p {
@@ -214,6 +226,18 @@ div.comment-message p{
 	margin-bottom: 10px;
 }
 
+.mt-20 {
+	margin-top: 20px;
+}
+
+.mb-10 {
+	margin-bottom: 10px;
+}
+
+.bold {
+	font-weight: 700;
+}
+
 .fit { 
 	width: fit-content;
 }