feat: implement kList webapp with Flask framework

Adds complete Flask-based web application for server listing service, including routing, database integration, Discord OAuth, templates, static assets, and configuration. Handles user authentication, server browsing, and admin dashboard functionality. BROKEN
2025-09-03 05:23:30 -04:00
parent ba286278cf
commit 4063deba42
26 changed files with 2767 additions and 0 deletions
--- a/src/ver/0.0.3/webapp/templates/index.html
+++ b/src/ver/0.0.3/webapp/templates/index.html
@@ -0,0 +1,94 @@
+{% extends base.html %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{url_for('static', filename='styles/base.css')}}">
+    <link rel="stylesheet" href="{{url_for('static', filename='styles/index.css')}}">
+	<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <title>Home | kServers</title>
+</head>
+<body>
+
+    <div class="container text-center my-4">
+        <h1><a href="{{ url_for('.index') }}" class="text-light text-decoration-none">{{ site_name }}</a></h1>
+        <a href="{{ url_for('.browse') }}" class="btn btn-secondary mt-2">Browse by Tag</a>
+		<a href="{{ bot_invite_url }}" class="btn btn-primary invite-button" target="https://discord.com/oauth2/authorize?client_id=1285545069591527466&permissions=537012969&integration_type=0&scope=bot">🤖 Invite Bot</a>
+    </div>
+
+    <div class="servers">
+        {% for server in servers %}
+        <div class="card shadow-lg" style="width: 18rem; margin:5px;">
+            <img class="card-img-top" src="{{server['icon_url']}}">
+            <div class="card-body">
+                <div class="card-header bg-danger bg-gradient text-light" style="margin-bottom:5px;">
+                    <strong>{{server['server_name']}}</strong>
+                </div>
+                <p class="card-text server-description">{{ server['description'] }}</p>
+                <p class="card-text">
+                    <strong>Tags:</strong> {{ server['tags'] }}
+                </p>
+                <a class="btn btn-success d-block mx-auto" href="/server/{{ server['server_name']|replace(' ', '-') }}">View Server</a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+
+    <div id="particles-js"></div>
+    <script src="{{url_for('static', filename='js/particles.js')}}"></script>
+    <script src="{{url_for('static', filename='js/app.js')}}"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.4/markdown-it.js"></script>
+    <script>
+        $(document).ready(() => {
+            const md = window.markdownit();
+            const elements = document.getElementsByClassName("server-description");
+            for (var i = 0; i < elements.length; i++) {
+                elements[i].innerHTML = md.render(elements[i].innerHTML);
+            }
+            $(".servers").animate({
+                opacity: "100%"
+            }, 600)
+        })
+    </script>
+            
+    <a id="hidden-admin-button" href="{{ url_for('main.admin') }}" title="">👀</a>
+
+    <script>
+        const adminButton = document.getElementById('hidden-admin-button');
+        
+        if (adminButton) {
+            adminButton.addEventListener('click', function(event) {
+                // Always prevent the default link action first
+                event.preventDefault();
+
+                if (!event.ctrlKey && !event.metaKey) {
+                    // Denied case
+                    alert("❌ Access Denied! ❌|⚠️Only authorized personnel! ⚠️");
+                } else {
+                    // --- GRANTED CASE ---
+                    // 1. Create the notification element
+                    const toast = document.createElement('div');
+                    toast.textContent = '✅ Access Granted! Redirecting...';
+                    toast.className = 'access-toast';
+                    document.body.appendChild(toast);
+
+                    // 2. Animate it into view
+                    // A tiny delay is needed for the CSS transition to work
+                    setTimeout(() => {
+                        toast.classList.add('show');
+                    }, 10);
+
+                    // 3. Redirect to the admin page after a short delay
+                    setTimeout(() => {
+                        window.location.href = adminButton.href;
+                    }, 1000); // Redirect after 1 second
+                }
+            });
+        }
+    </script>
+</body>
+</html>