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;
+}