Framework setup

src/allmende_payment_system/static/css/aps.css

@@ -0,0 +1,58 @@
+/* frontend/static/css/custom.css */
+
+/* Green theme colors */
+:root {
+    --sidebar-bg: #2d5a3d;       /* Dark green background */
+    --sidebar-link-color: #e0f7e9; /* Light green text */
+    --sidebar-link-hover: #4caf50; /* Medium green hover */
+    --main-bg: #f8f9fa;          /* Light gray background for main content */
+    --logo-height: 40px;
+}
+
+/* Sidebar styles */
+.sidebar {
+    min-height: 100vh;
+    background-color: var(--sidebar-bg);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    color: var(--sidebar-link-color);
+}
+
+.navbar-brand img {
+    height: var(--logo-height);
+}
+
+.sidebar .nav-link {
+    padding: 10px 15px;
+    color: var(--sidebar-link-color);
+    transition: background-color 0.2s;
+}
+
+.sidebar .nav-link:hover {
+    background-color: var(--sidebar-link-hover);
+    color: white;
+}
+
+.sidebar .nav-link.active {
+    background-color: var(--sidebar-link-hover);
+    color: white;
+}
+
+/* Main content styles */
+.main-content {
+    background-color: var(--main-bg);
+    min-height: 100vh;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 767.98px) {
+    .sidebar {
+        width: 100%;
+        position: relative;
+        min-height: auto;
+    }
+    .main-content {
+        margin-left: 0;
+    }
+}