root page, new layout

2025-12-13 21:02:22 +01:00
parent 0a92fd678f
commit ca65b24899
6 changed files with 140 additions and 3 deletions
@@ -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}}
@@ -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>