divisions page layout wip

web/optivum-better-schedule-frontend/components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     Divisions: typeof import('./src/components/pages/Divisions.vue')['default']
     Dots: typeof import('./src/components/Dots.vue')['default']
     Drawer: typeof import('./src/components/Drawer.vue')['default']
+    Fog: typeof import('./src/components/Fog.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     Home: typeof import('./src/components/pages/Home.vue')['default']
     HomePage: typeof import('./src/components/pages/HomePage.vue')['default']

web/optivum-better-schedule-frontend/package.json

@@ -12,6 +12,9 @@
     "iso-639-1": "^3.1.3",
     "pinia": "^2.2.4",
     "roboto-fontface": "*",
+    "three": "^0.169.0",
+    "vanilla-tilt": "^1.8.1",
+    "vanta": "^0.5.24",
     "vue": "^3.4.31",
     "vue-i18n": "^9.14.1",
     "vue-material-design-icons": "^5.3.1",
@@ -21,6 +24,7 @@
   "devDependencies": {
     "@babel/types": "^7.24.7",
     "@types/node": "^20.14.10",
+    "@types/three": "^0.169.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "sass": "1.77.6",
     "typescript": "^5.4.2",

web/optivum-better-schedule-frontend/src/App.vue

@@ -5,10 +5,6 @@
   </v-app>
 </template>
 
-<script setup lang="ts">
-
-</script>
-
 <style scoped>
 @import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined');
@@ -17,6 +13,5 @@ html,
 body,
 .v-application {
   font-family: 'Overpass', sans-serif; 
-  overflow: hidden;
 }
 </style>

web/optivum-better-schedule-frontend/src/components/DivisionButton.vue

@@ -1,29 +1,90 @@
-<!-- DivisionsButton.vue -->
 <template>
-	<v-card class="card-box rounded-pill pa-8" elevation="8">
-		<v-btn class="fill-height fill-width" :ripple="false" v-ripple>
-			<span>{{ text }}</span>
+	<div ref="tilt" class="tilt-wrapper">
+		<v-btn class="square-button" :style="{ backgroundColor: getButtonColor(index) }" :ripple="true" elevation="8"
+			variant="text" rounded="xl">
+			<span>{{ props.text }}</span>
 		</v-btn>
-	</v-card>
+	</div>
 </template>
 
-<script setup>
-import { defineProps } from 'vue'
+<script setup lang="ts">
+import { ref, onUnmounted, watchEffect } from 'vue';
+import VanillaTilt from 'vanilla-tilt';
+import { useTheme } from 'vuetify';
 
-const props = defineProps({
-	text: {
-		type: String,
-		required: true
+const theme = useTheme();
+
+const getButtonColor = (index: number) => {
+	const colors = theme.current.value.colors;
+	return index % 2 === 0 ? colors.primaryMuted : colors.secondaryMuted;
+};
+
+interface VanillaTiltHTMLElement extends HTMLElement {
+	vanillaTilt: VanillaTilt;
+}
+
+const props = defineProps<{ text: string; index: number }>();
+const tilt = ref<VanillaTiltHTMLElement | null>(null);
+
+// Determine if tilt should be enabled based on screen size
+const enableTilt = ref(window.innerWidth > 700);
+
+
+// Initialize or destroy VanillaTilt based on screen size
+watchEffect(() => {
+	if (enableTilt.value && tilt.value) {
+		VanillaTilt.init(tilt.value, {
+			max: 20,
+			speed: 10,
+			scale: 1.25,
+			glare: false,
+			reverse: false,
+			transition: true,
+		});
+	} else if (tilt.value?.vanillaTilt) {
+		tilt.value.vanillaTilt.destroy();
 	}
-})
+});
+
+// Listen for screen resize to enable or disable tilt
+window.addEventListener('resize', () => {
+	enableTilt.value = window.innerWidth > 700;
+});
+
+onUnmounted(() => {
+	if (tilt.value?.vanillaTilt) {
+		tilt.value.vanillaTilt.destroy();
+	}
+	window.removeEventListener('resize', () => {
+		enableTilt.value = window.innerWidth > 700;
+	});
+});
 </script>
 
-<style scoped>
-.card-box {
-	margin: 3vh;
-	aspect-ratio: 1 / 1;
-	display: inline-flex;
+<style scoped lang="scss">
+/* Using Vuetify theme colors */
+.tilt-wrapper {
+	display: inline-block;
+	width: 100%;
+	height: 100%;
+	user-select: none;
+}
+
+.square-button {
+	z-index: 1;
+	width: 100%;
+	height: 100%;
+	font-size: 2.5vw;
+	font-weight: 400;
+	display: flex;
 	align-items: center;
 	justify-content: center;
+	user-select: none;
+}
+
+@media (max-width: 700px) {
+	.square-button {
+		font-size: 5vw;
+	}
 }
-</style>
+</style>

web/optivum-better-schedule-frontend/src/components/LanguageSwitcher.vue

@@ -1,6 +1,6 @@
 <!-- LanguageSwitcher.vue -->
 <template>
-	<v-container class="d-flex justify-center align-center">
+	<v-container class="d-flex justify-center align-center pa-0">
 		<div class="text-center">
 			<span class="language-title mb-6">{{ t('language.name') }}</span>
 			<v-select v-model="currentLanguage" :items="languages" item-title="label" item-value="code"