Initial commit: SIBU 2.0 MISSION

2026-02-21 09:53:31 -05:00
commit 0c7aa53c8b
400 changed files with 67708 additions and 0 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { RouterView, useRoute } from "vue-router";
+import { useI18n } from 'vue-i18n'
+import MainLayout from "./components/layouts/MainLayout.vue";
+import { useThemeStore } from './stores/theme'
+import { analyticsService } from '@/services/analyticsService'
+
+// Initialize theme store
+const route = useRoute()
+const { locale } = useI18n()
+const themeStore = useThemeStore()
+
+const isSplashScreen = computed(() => route.name === 'splash')
+const isAuthScreen = computed(() => route.name === 'auth' || route.path === '/login')
+
+onMounted(() => {
+  themeStore.applyTheme()
+  analyticsService.logEvent({
+    event_name: 'app_open',
+    properties: { language: locale.value }
+  })
+})
+</script>
+
+<template>
+  <MainLayout v-if="!isSplashScreen && !isAuthScreen">
+    <RouterView />
+  </MainLayout>
+  <RouterView v-else />
+</template>
+
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Common Variables */
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --transition-speed: 0.3s;
+}
+
+/* DARK THEME (Default & .dark) */
+:root, 
+html.dark {
+  --bg-primary: #0f172a;
+  --bg-secondary: #020617;
+  --text-primary: #f8fafc;
+  --text-secondary: #94a3b8;
+  --border-color: rgba(255, 255, 255, 0.12);
+  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
+  
+  --header-bg: rgba(15, 23, 42, 0.9);
+  --header-text: #ffffff;
+  
+  --card-bg: rgba(30, 41, 59, 0.85); /* Increased opacity for better legibility */
+  --hover-bg: rgba(255, 255, 255, 0.08);
+  --active-bg: rgba(254, 231, 21, 0.15);
+  --active-color: #fee715;
+  --accent-color: #fee715;
+  --accent-hover: #fde047;
+  
+  --glass-bg: rgba(255, 255, 255, 0.05);
+  --glass-border: rgba(255, 255, 255, 0.15);
+}
+
+/* LIGHT THEME */
+html.light-theme {
+  --bg-primary: #f1f5f9; /* Slightly darker light background */
+  --bg-secondary: #ffffff;
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --border-color: #cbd5e1; /* More visible borders */
+  --header-bg: #ffffff;
+  --header-text: #0f172a;
+  --card-bg: #ffffff;
+  --hover-bg: #f1f5f9;
+  --glass-bg: rgba(255, 255, 255, 0.9);
+  --glass-border: #e2e8f0;
+  --shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Stronger shadow in light mode */
+  --active-bg: rgba(16, 24, 32, 0.1);
+  --active-color: #101820;
+  --accent-color: #101820;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: all 0.3s ease;
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  letter-spacing: -0.01em;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+#app {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--safe-area-top);
+}
+
+/* Global Utilities */
+.glass-effect {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #fee715 0%, #facc15 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* App Transition */
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.page-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--active-color);
+}
+</style>