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

src/ver/0.0.3/webapp/static/styles/base.css

@@ -0,0 +1,96 @@
+html, body {
+    overflow-y: scroll;
+	margin: 0; /* This removes the extra space */
+}
+
+body {
+    background-color: #000;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+}
+
+code {
+	    margin: 0; /* This removes the extra space */
+}
+
+/* This is the updated rule */
+pre {
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+#particles-js {
+    z-index: -1;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+}
+
+.invite-button {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.list-group-item.active {
+    font-weight: bold;
+}
+
+.list-group-item.active::after {
+    content: ' «';
+    font-size: 1.2em;
+}
+
+@media (max-width: 767px) {
+    .col-md-3 {
+        margin-bottom: 2rem;
+    }
+}
+
+#hidden-admin-button {
+    position: fixed;
+    bottom: 10px;
+    right: 15px;
+    z-index: 9999;
+    font-size: 18px; /* Adjust size as needed */
+    opacity: 0.0; /* Make it semi-transparent */
+    text-decoration: none;
+    transition: opacity 0.2s ease-in-out;
+}
+
+#hidden-admin-button:hover {
+    opacity: 1.0; /* Make it fully visible on hover */
+    color: rgb(255, 125, 125);
+}
+
+.access-toast {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 12px 24px;
+    border-radius: 8px;
+    background-color: #28a745; /* Bootstrap success green */
+    color: white;
+    font-weight: bold;
+    z-index: 10000;
+    opacity: 0;
+    transition: opacity 0.4s ease-in-out, bottom 0.4s ease-in-out;
+}
+
+.access-toast.show {
+    opacity: 1;
+    bottom: 40px;
+}
+
+.center-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 80vh;
+            text-align: center;
+        }

src/ver/0.0.3/webapp/static/styles/browse.css

@@ -0,0 +1,15 @@
+.list-group-item.active {
+    font-weight: bold;
+}
+
+.list-group-item.active::after {
+    content: ' «';
+    font-size: 1.2em;
+}
+
+/* Example: Add a bit more space above the tag list when on mobile devices */
+@media (max-width: 767px) {
+    .col-md-3 {
+        margin-bottom: 2rem;
+    }
+}

src/ver/0.0.3/webapp/static/styles/error.css

@@ -0,0 +1,8 @@
+{% extends "base.css" %}
+.center-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 80vh;
+            text-align: center;
+        }

src/ver/0.0.3/webapp/static/styles/index.css

@@ -0,0 +1,35 @@
+.servers {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center; /* This keeps the cards centered */
+    opacity: 0%;
+    padding: 10px; /* This adds some nice spacing around the cards */
+}
+
+.card {
+    background-color: rgba(211, 211, 211, 0.55) !important;
+}
+
+.invite-button {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+}
+
+.list-group-item.active {
+    font-weight: bold;
+}
+
+.list-group-item.active::after {
+    content: ' «';
+    font-size: 1.2em;
+}
+
+/* Example: Add a bit more space above the tag list when on mobile devices */
+@media (max-width: 767px) {
+    .col-md-3 {
+        margin-bottom: 2rem;
+    }
+}

src/ver/0.0.3/webapp/static/styles/navbar.css

@@ -0,0 +1,65 @@
+.center-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 80vh;
+            text-align: center;
+}
+body {
+  padding-bottom: 20px;
+}
+
+.navbar {
+  margin-bottom: 20px;
+}
+
+      .bd-placeholder-img {
+        font-size: 1.125rem;
+        text-anchor: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+      }
+
+      @media (min-width: 768px) {
+        .bd-placeholder-img-lg {
+          font-size: 3.5rem;
+        }
+      }
+
+      .b-example-divider {
+        height: 3rem;
+        background-color: rgba(0, 0, 0, .1);
+        border: solid rgba(0, 0, 0, .15);
+        border-width: 1px 0;
+        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+      }
+
+      .b-example-vr {
+        flex-shrink: 0;
+        width: 1.5rem;
+        height: 100vh;
+      }
+
+      .bi {
+        vertical-align: -.125em;
+        fill: currentColor;
+      }
+
+      .nav-scroller {
+        position: relative;
+        z-index: 2;
+        height: 2.75rem;
+        overflow-y: hidden;
+      }
+
+      .nav-scroller .nav {
+        display: flex;
+        flex-wrap: nowrap;
+        padding-bottom: 1rem;
+        margin-top: -1px;
+        overflow-x: auto;
+        text-align: center;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }

src/ver/0.0.3/webapp/static/styles/view_server.css

@@ -0,0 +1,48 @@
+.container {
+    margin-top : 10px;
+    background: rgba(211, 211, 211, 0.55);
+}
+
+#serverName {
+    text-align: center;
+    font-size: 20px;
+    font-weight: 600;
+    margin: 10px;
+}
+
+.info {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.info-column {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 100%;
+    margin-left: 30px;
+    width: 80%;
+    margin-top: 20px;
+}
+
+.info > img {
+    height: 200px;
+    margin-bottom: 10px;
+}
+
+.info-column > a {
+    height: 100%;
+}
+
+.info-column > .card-body {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    visibility: 55%;
+}
+
+.card-body > a {
+    margin-right: 10px;
+}