root page, new layout

assets/js/matrix.js

@@ -0,0 +1,44 @@
+const canvas = document.getElementById('matrix-canvas');
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+const letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ1234567890';
+const fontSize = 16;
+let columns = canvas.width / fontSize;
+
+const drops = [];
+for (let x = 0; x < columns; x++) {
+    drops[x] = 1;
+}
+
+function draw() {
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = '#0F0'; // green text
+    ctx.font = fontSize + 'px arial';
+
+    for (let i = 0; i < drops.length; i++) {
+        const text = letters.charAt(Math.floor(Math.random() * letters.length));
+        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+            drops[i] = 0;
+        }
+        drops[i]++;
+    }
+}
+
+setInterval(draw, 33);
+
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    columns = canvas.width / fontSize;
+    drops.length = 0;
+    for (let x = 0; x < columns; x++) {
+        drops[x] = 1;
+    }
+});

http/controller.root.go

@@ -0,0 +1,27 @@
+package http
+
+import (
+	"net/http"
+
+	"teletype_softwares/domain"
+	"teletype_softwares/lib/template_utils"
+)
+
+type RootController struct {
+	service domain.SoftwareServiceInterface
+}
+
+func NewRootController() *RootController {
+	return &RootController{}
+}
+
+func (c *RootController) index(w http.ResponseWriter, r *http.Request) {
+
+	tmpl, err := template_utils.GetTemplate("root_index", "http/views/shared/layout.html", "http/views/root/index.html")
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	tmpl.Execute(w, nil)
+}

http/http.go

@@ -11,6 +11,7 @@ func StartHttpServer(domainInstance domain.Domain) {
 		NewSoftwareUpdaterController(domainInstance.SoftwareUpdaterService),
 		NewDownloadController(domainInstance.DownloadService),
 		NewPlayController(domainInstance.SoftwareService),
+		NewRootController(),
 	).Init()
 
 	http_utils.StartGenericHTTPServer(http_utils.StartGenericHTTPServerContext{

http/router.go

@@ -2,6 +2,7 @@ package http
 
 import (
 	"github.com/go-chi/chi/v5"
+	"net/http"
 )
 
 type Router struct {
@@ -9,6 +10,7 @@ type Router struct {
 	softwareUpdaterController *SoftwareUpdaterController
 	downloadController        *DownloadController
 	playController            *PlayController
+	rootController            *RootController
 }
 
 func NewRouter(
@@ -16,19 +18,22 @@ func NewRouter(
 	softwareUpdaterController *SoftwareUpdaterController,
 	downloadController *DownloadController,
 	playController *PlayController,
+	rootController *RootController,
 ) *Router {
 	return &Router{
 		softwareController:        softwareController,
 		softwareUpdaterController: softwareUpdaterController,
 		downloadController:        downloadController,
 		playController:            playController,
+		rootController:            rootController,
 	}
 }
 
 func (r *Router) Init() *chi.Mux {
 	router := chi.NewRouter()
 
-	router.Get("/", r.softwareController.index)
+	router.Get("/", r.rootController.index)
+	router.Get("/softwares", r.softwareController.index)
 	router.Get("/update", r.softwareUpdaterController.update)
 	router.Get("/releases/{name}", r.softwareController.releases)
 	router.Get("/download/{name}/source", r.downloadController.GetLatestSource)
@@ -38,5 +43,8 @@ func (r *Router) Init() *chi.Mux {
 	router.Get("/play/{name}", r.playController.Play)
 	router.Get("/play/{name}/content*", r.playController.ServeContent)
 
+	fs := http.FileServer(http.Dir("assets"))
+	router.Handle("/assets/*", http.StripPrefix("/assets/", fs))
+
 	return router
 }

http/views/root/index.html

@@ -0,0 +1,13 @@
+{{define "content"}}
+<h1 class="my-4">Welcome</h1>
+
+<p>
+    Welcome to Teletype Games! This site is dedicated to showcasing <strong>open-source indie games</strong>,
+    created with enthusiasm and as a hobby project.
+</p>
+<p>
+    Explore our collection of unique games, navigate using the top menu to access the <strong>Home</strong> page,
+    discover more <strong>Softwares</strong>, or check out our <strong>Youtube</strong> channel.
+</p>
+
+{{end}}

http/views/shared/layout.html

@@ -56,13 +56,57 @@
         .text-success { /* Ensure consistency for success text */
             color: limegreen !important;
         }
+        .header-border, .content-border, .footer-border {
+            border: 3px solid limegreen !important;
+        }
+        .content-border {
+            background-color: #111;
+            padding: 1.5rem;
+        }
+        #matrix-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
     </style>
 </head>
 <body>
-    <div class="container mt-4">
-        <h1 class="text-center mb-4">Teletype Games</h1>
+    <header class="navbar navbar-expand-lg header-border" style="background-color: black;">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/" style="color: limegreen;">Teletype Games</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon" style="filter: invert(1) brightness(2);"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="/" style="color: limegreen;">Home</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/softwares" style="color: limegreen;">Softwares</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="https://www.youtube.com/@teletypegames" target="_blank" style="color: limegreen;">Youtube</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </header>
+
+    <div class="container mt-4 mb-4 content-border">
         {{block "content" .}}{{end}}
     </div>
+
+    <footer class="footer-border text-center py-3" style="background-color: black; color: limegreen;">
+        <p>Tasnádi Zsolt 2025</p>
+    </footer>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+
+    <canvas id="matrix-canvas"></canvas>
+    <script src="/assets/js/matrix.js"></script>
 </body>
 </html>