first commit

static/css/styles.css

@@ -0,0 +1,199 @@
+/* Base styles */
+:root {
+    --primary-color: #2563eb;
+    --secondary-color: #4b5563;
+    --success-color: #10b981;
+    --danger-color: #ef4444;
+    --warning-color: #f59e0b;
+}
+
+/* Dark mode variables */
+.dark {
+    --bg-primary: #1f2937;
+    --bg-secondary: #374151;
+    --text-primary: #f3f4f6;
+    --text-secondary: #9ca3af;
+}
+
+/* Light mode variables */
+:root:not(.dark) {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f3f4f6;
+    --text-primary: #1f2937;
+    --text-secondary: #4b5563;
+}
+
+/* Typography */
+body {
+    font-family: 'Roboto', sans-serif;
+    line-height: 1.5;
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
+}
+
+/* Buttons */
+.btn-primary {
+    @apply inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
+}
+
+.btn-secondary {
+    @apply inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500;
+}
+
+/* Navigation */
+.nav-link {
+    @apply inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium;
+}
+
+.nav-link:not(.active) {
+    @apply border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700;
+}
+
+.nav-link.active {
+    @apply border-blue-500 text-gray-900;
+}
+
+.mobile-nav-link {
+    @apply block pl-3 pr-4 py-2 border-l-4 text-base font-medium;
+}
+
+.mobile-nav-link:not(.active) {
+    @apply border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800;
+}
+
+.mobile-nav-link.active {
+    @apply border-blue-500 text-blue-700 bg-blue-50;
+}
+
+/* Forms */
+.form-input {
+    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm;
+}
+
+.form-select {
+    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm;
+}
+
+.form-checkbox {
+    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded;
+}
+
+/* Cards */
+.card {
+    @apply bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg;
+}
+
+.card-header {
+    @apply px-4 py-5 sm:px-6;
+}
+
+.card-body {
+    @apply px-4 py-5 sm:p-6;
+}
+
+.card-footer {
+    @apply px-4 py-4 sm:px-6;
+}
+
+/* Alerts */
+.alert {
+    @apply rounded-md p-4 mb-4;
+}
+
+.alert-success {
+    @apply bg-green-50 text-green-800;
+}
+
+.alert-error {
+    @apply bg-red-50 text-red-800;
+}
+
+.alert-warning {
+    @apply bg-yellow-50 text-yellow-800;
+}
+
+.alert-info {
+    @apply bg-blue-50 text-blue-800;
+}
+
+/* Pagination */
+.pagination-link {
+    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50;
+}
+
+.pagination-current {
+    @apply relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600;
+}
+
+/* Menu Items */
+.menu-item {
+    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700;
+}
+
+/* Transitions */
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+
+/* Responsive Images */
+.img-responsive {
+    @apply w-full h-full object-cover;
+}
+
+/* Stats Display */
+.stat-value {
+    @apply text-4xl font-bold text-gray-900 dark:text-white;
+}
+
+.stat-label {
+    @apply text-sm font-medium text-gray-500 dark:text-gray-400;
+}
+
+/* Review Stars */
+.stars {
+    @apply flex items-center;
+}
+
+.star {
+    @apply text-yellow-400;
+}
+
+.star-empty {
+    @apply text-gray-300;
+}
+
+/* Status Badges */
+.status-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+}
+
+.status-operating {
+    @apply bg-green-100 text-green-800;
+}
+
+.status-closed {
+    @apply bg-red-100 text-red-800;
+}
+
+.status-construction {
+    @apply bg-yellow-100 text-yellow-800;
+}
+
+/* User Roles */
+.role-badge {
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+}
+
+.role-admin {
+    @apply bg-purple-100 text-purple-800;
+}
+
+.role-moderator {
+    @apply bg-blue-100 text-blue-800;
+}
+
+.role-user {
+    @apply bg-gray-100 text-gray-800;
+}

static/images/discord-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <path fill="#7289DA" d="M40.634 11.546c-3.286-2.466-6.824-3.894-10.532-4.546l-.524 1.05c2.898.698 5.574 1.746 8.074 3.142-3.426-1.89-7.144-3.19-11.074-3.89-2.66-.56-5.374-.84-8.074-.84-2.7 0-5.414.28-8.074.84-3.93.7-7.648 2-11.074 3.89 2.5-1.396 5.176-2.444 8.074-3.142l-.524-1.05c-3.708.652-7.246 2.08-10.532 4.546C2.146 17.44 0 24.894 0 32.894c0 .14.006.28.014.42 3.43 4.674 8.25 7.956 13.986 9.384 1.092-.882 2.078-1.87 2.946-2.94-1.642-.614-3.214-1.45-4.678-2.486 1.048.652 2.144 1.218 3.274 1.688 1.994.826 4.118 1.472 6.458 1.87 2.338.398 4.758.598 7.194.598s4.856-.2 7.194-.598c2.34-.398 4.464-1.044 6.458-1.87 1.13-.47 2.226-1.036 3.274-1.688-1.464 1.036-3.036 1.872-4.678 2.486.868 1.07 1.854 2.058 2.946 2.94 5.736-1.428 10.556-4.71 13.986-9.384.008-.14.014-.28.014-.42 0-8-2.146-15.454-6.374-21.348zM16.344 34.394c-2.7 0-4.894-2.52-4.894-5.6s2.194-5.6 4.894-5.6 4.894 2.52 4.894 5.6c0 3.08-2.194 5.6-4.894 5.6zm15.606 0c-2.7 0-4.894-2.52-4.894-5.6s2.194-5.6 4.894-5.6 4.894 2.52 4.894 5.6c0 3.08-2.194 5.6-4.894 5.6z"/>
+</svg>

static/images/google-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
+    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
+    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
+    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
+</svg>

static/js/main.js

@@ -0,0 +1,79 @@
+// Initialize dark mode from localStorage
+document.addEventListener('DOMContentLoaded', () => {
+    // Check if dark mode was previously enabled
+    const darkMode = localStorage.getItem('darkMode') === 'true';
+    if (darkMode) {
+        document.documentElement.classList.add('dark');
+    }
+});
+
+// Handle search form submission
+document.addEventListener('submit', (e) => {
+    if (e.target.matches('form[action*="search"]')) {
+        const searchInput = e.target.querySelector('input[name="q"]');
+        if (!searchInput.value.trim()) {
+            e.preventDefault();
+        }
+    }
+});
+
+// Close mobile menu when clicking outside
+document.addEventListener('click', (e) => {
+    const mobileMenu = document.querySelector('[x-show="mobileMenuOpen"]');
+    const menuButton = document.querySelector('[x-on\\:click="mobileMenuOpen = !mobileMenuOpen"]');
+    
+    if (mobileMenu && menuButton && !mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
+        const alpineData = mobileMenu._x_dataStack && mobileMenu._x_dataStack[0];
+        if (alpineData && alpineData.mobileMenuOpen) {
+            alpineData.mobileMenuOpen = false;
+        }
+    }
+});
+
+// Handle flash messages
+document.addEventListener('DOMContentLoaded', () => {
+    const alerts = document.querySelectorAll('.alert');
+    alerts.forEach(alert => {
+        setTimeout(() => {
+            alert.style.opacity = '0';
+            setTimeout(() => alert.remove(), 300);
+        }, 5000);
+    });
+});
+
+// Initialize tooltips
+document.addEventListener('DOMContentLoaded', () => {
+    const tooltips = document.querySelectorAll('[data-tooltip]');
+    tooltips.forEach(tooltip => {
+        tooltip.addEventListener('mouseenter', (e) => {
+            const text = e.target.getAttribute('data-tooltip');
+            const tooltipEl = document.createElement('div');
+            tooltipEl.className = 'tooltip bg-gray-900 text-white px-2 py-1 rounded text-sm absolute z-50';
+            tooltipEl.textContent = text;
+            document.body.appendChild(tooltipEl);
+            
+            const rect = e.target.getBoundingClientRect();
+            tooltipEl.style.top = rect.bottom + 5 + 'px';
+            tooltipEl.style.left = rect.left + (rect.width - tooltipEl.offsetWidth) / 2 + 'px';
+        });
+        
+        tooltip.addEventListener('mouseleave', () => {
+            const tooltips = document.querySelectorAll('.tooltip');
+            tooltips.forEach(t => t.remove());
+        });
+    });
+});
+
+// Handle dropdown menus
+document.addEventListener('click', (e) => {
+    const dropdowns = document.querySelectorAll('[x-show]');
+    dropdowns.forEach(dropdown => {
+        if (!dropdown.contains(e.target) && 
+            !e.target.matches('[x-on\\:click*="open = !open"]')) {
+            const alpineData = dropdown._x_dataStack && dropdown._x_dataStack[0];
+            if (alpineData && alpineData.open) {
+                alpineData.open = false;
+            }
+        }
+    });
+});