From 9804cf3693d91d13f6ae704426db1d26de7cc7ac Mon Sep 17 00:00:00 2001
From: smugg99 <dudak799@gmail.com>
Date: Wed, 30 Oct 2024 01:31:52 +0100
Subject: [PATCH] divisions page layout wip

---
 .../components.d.ts                           |   1 +
 .../package-lock.json                         |  79 ++++++++
 .../package.json                              |   4 +
 .../src/App.vue                               |   5 -
 .../src/components/DivisionButton.vue         |  97 +++++++--
 .../src/components/LanguageSwitcher.vue       |   2 +-
 .../src/components/Overlay.vue                | 190 +++++++++---------
 .../src/components/ThemeSwitcher.vue          |   4 +-
 .../src/components/Weather.vue                | 141 ++++++-------
 .../src/components/pages/Divisions.vue        | 146 ++++++++------
 .../src/components/pages/Home.vue             |  18 +-
 .../src/components/pages/Settings.vue         |   2 +-
 .../src/locales/en.js                         |  13 +-
 .../src/locales/pl.js                         |  11 +-
 .../src/main.ts                               |  20 ++
 .../src/plugins/vuetify.ts                    |  36 ++--
 .../src/router.ts                             |  13 +-
 .../src/vanta.d.ts                            |   5 +
 18 files changed, 498 insertions(+), 289 deletions(-)
 create mode 100644 web/optivum-better-schedule-frontend/src/vanta.d.ts

diff --git a/web/optivum-better-schedule-frontend/components.d.ts b/web/optivum-better-schedule-frontend/components.d.ts
index 3b2f008..acf846b 100644
--- a/web/optivum-better-schedule-frontend/components.d.ts
+++ b/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']
diff --git a/web/optivum-better-schedule-frontend/package-lock.json b/web/optivum-better-schedule-frontend/package-lock.json
index d859ef9..f666e37 100644
--- a/web/optivum-better-schedule-frontend/package-lock.json
+++ b/web/optivum-better-schedule-frontend/package-lock.json
@@ -13,6 +13,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",
@@ -22,6 +25,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",
@@ -782,6 +786,13 @@
         "win32"
       ]
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -799,6 +810,35 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.169.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.169.0.tgz",
+      "integrity": "sha512-oan7qCgJBt03wIaK+4xPWclYRPG9wzcg7Z2f5T8xYTNEF95kh0t0lklxLLYBDo7gQiGLYzE6iF4ta7nXF2bcsw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.20.tgz",
+      "integrity": "sha512-JGpU6qiIJQKUuVSKx1GtQnHJGxRjtfGIhzO2ilq43VZZS//f1h1Sgexbdk+Lq+7569a6EYhOWrUpIruR/1Enmg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.4.tgz",
@@ -998,6 +1038,13 @@
         "vuetify": "^3.0.0"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.49",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.49.tgz",
+      "integrity": "sha512-NMmS8/DofhH/IFeW+876XrHVWel+J/vdcFCHLDqeJgkH9x0DeiwjVd8LcBdaxdG/T7Rf8VUAYsA8X1efMzLjRQ==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/acorn": {
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -1260,6 +1307,13 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -1442,6 +1496,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -1830,6 +1891,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/three": {
+      "version": "0.169.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.169.0.tgz",
+      "integrity": "sha512-Ed906MA3dR4TS5riErd4QBsRGPcx+HBDX2O5yYE5GqJeFQTPU+M56Va/f/Oph9X7uZo3W3o4l2ZhBZ6f6qUv0w==",
+      "license": "MIT"
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -1971,6 +2038,18 @@
         "yarn": "*"
       }
     },
+    "node_modules/vanilla-tilt": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+      "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw==",
+      "license": "MIT"
+    },
+    "node_modules/vanta": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/vanta/-/vanta-0.5.24.tgz",
+      "integrity": "sha512-fvieEbHy1ZS23zrcX+topzqAgA4Uct1enngOEWLFBgs9TtOf6RDFOYatH7KSVdrABzQDMCQ5myQy+nTSZZwLzg==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "5.4.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
diff --git a/web/optivum-better-schedule-frontend/package.json b/web/optivum-better-schedule-frontend/package.json
index 8a95a2c..fdbaca0 100644
--- a/web/optivum-better-schedule-frontend/package.json
+++ b/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",
diff --git a/web/optivum-better-schedule-frontend/src/App.vue b/web/optivum-better-schedule-frontend/src/App.vue
index 55525c7..65d6f77 100644
--- a/web/optivum-better-schedule-frontend/src/App.vue
+++ b/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>
\ No newline at end of file
diff --git a/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue b/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue
index e7cf295..4bf12cb 100644
--- a/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/web/optivum-better-schedule-frontend/src/components/LanguageSwitcher.vue b/web/optivum-better-schedule-frontend/src/components/LanguageSwitcher.vue
index 36335d8..318f2b0 100644
--- a/web/optivum-better-schedule-frontend/src/components/LanguageSwitcher.vue
+++ b/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"
diff --git a/web/optivum-better-schedule-frontend/src/components/Overlay.vue b/web/optivum-better-schedule-frontend/src/components/Overlay.vue
index 93aff21..12f27cb 100644
--- a/web/optivum-better-schedule-frontend/src/components/Overlay.vue
+++ b/web/optivum-better-schedule-frontend/src/components/Overlay.vue
@@ -1,52 +1,52 @@
 <!-- Overlay.vue -->
 <template>
-  <v-navigation-drawer v-model="drawer" class="elevation-8">
-    <template #prepend>
-      <v-slide-x-transition appear>
-        <v-list nav density="default">
-          <v-list-item v-for="item in items" :key="item.route" :to="item.route" nav link
-            class="ma-2 nav-item overflow-visible" rounded="pill">
-            <template #prepend>
-              <v-icon>{{ item.prependIcon }}</v-icon>
-            </template>
-            <template #title>
-              <span>{{ item.title }}</span>
-            </template>
-          </v-list-item>
-        </v-list>
-      </v-slide-x-transition>
-    </template>
-
-    <template #append>
-      <v-slide-y-reverse-transition appear>
-        <v-list nav density="default">
-          <v-list-item class="ma-3 nav-item overflow-visible" nav link :to="'/settings'" rounded="pill">
-            <template #prepend>
-              <v-icon>mdi-cog-outline</v-icon>
-            </template>
-            <template #title>
-              <span>{{ t('page.settings') }}</span>
-            </template>
-          </v-list-item>
-        </v-list>
-      </v-slide-y-reverse-transition>
-    </template>
-  </v-navigation-drawer>
-
-  <v-slide-x-transition appear>
-    <v-card class="menu-card rounded-pill pa-8" elevation="8" @click="drawer = !drawer">
-      <v-btn icon="mdi-menu" :ripple="false" v-ripple />
-    </v-card>
-  </v-slide-x-transition>
-
-
-  <v-main>
-    <div class="fill-height">
-      <router-view class="fill-height fill-width" v-slot="{ Component }">
-        <component :is="Component" />
-      </router-view>
-    </div>
-  </v-main>
+	<v-navigation-drawer v-model="drawer" class="elevation-8">
+		<template #prepend>
+			<v-slide-x-transition appear>
+				<v-list nav density="default">
+					<v-list-item v-for="item in items" :key="item.route" :to="item.route" nav link
+						class="ma-2 nav-item overflow-visible" rounded="pill">
+						<template #prepend>
+							<v-icon>{{ item.prependIcon }}</v-icon>
+						</template>
+						<template #title>
+							<span>{{ item.title }}</span>
+						</template>
+					</v-list-item>
+				</v-list>
+			</v-slide-x-transition>
+		</template>
+
+		<template #append>
+			<v-slide-y-reverse-transition appear>
+				<v-list nav density="default">
+					<v-list-item class="ma-3 nav-item" nav link :to="'/settings'" rounded="pill">
+						<template #prepend>
+							<v-icon>mdi-cog-outline</v-icon>
+						</template>
+						<template #title>
+							<span>{{ t('page.settings') }}</span>
+						</template>
+					</v-list-item>
+				</v-list>
+			</v-slide-y-reverse-transition>
+		</template>
+	</v-navigation-drawer>
+
+	<v-slide-x-transition appear>
+		<v-card class="menu-card rounded-pill pa-8" elevation="8" @click="drawer = !drawer">
+			<v-btn icon="mdi-menu" :ripple="true" />
+		</v-card>
+	</v-slide-x-transition>
+
+
+	<v-main>
+		<div class="fill-height">
+			<router-view class="fill-height fill-width" v-slot="{ Component }">
+				<component :is="Component" />
+			</router-view>
+		</div>
+	</v-main>
 </template>
 
 <script setup lang="ts">
@@ -58,82 +58,82 @@ const { t } = useI18n();
 const drawer = ref(true);
 
 const items = computed(() => [
-  {
-    title: t('page.home'),
-    prependIcon: 'mdi-view-dashboard-outline',
-    route: '/',
-  },
-  {
-    title: t('page.divisions'),
-    prependIcon: 'mdi-school-outline',
-    route: '/divisions',
-  },
-  {
-    title: t('page.teachers'),
-    prependIcon: 'mdi-human-male-board',
-    route: '/teachers',
-  },
-  {
-    title: t('page.classrooms'),
-    prependIcon: 'mdi-door',
-    route: '/classrooms',
-  },
+	{
+		title: t('page.home'),
+		prependIcon: 'mdi-view-dashboard-outline',
+		route: '/',
+	},
+	{
+		title: t('page.divisions'),
+		prependIcon: 'mdi-school-outline',
+		route: '/divisions',
+	},
+	{
+		title: t('page.teachers'),
+		prependIcon: 'mdi-human-male-board',
+		route: '/teachers',
+	},
+	{
+		title: t('page.rooms'),
+		prependIcon: 'mdi-door',
+		route: '/rooms',
+	},
 ]);
 </script>
 
 <style scoped>
 :deep(.v-list-item-title) {
-  overflow: visible !important;
-  white-space: normal;
-  word-wrap: break-word;
+	overflow: visible !important;
+	white-space: normal;
+	word-wrap: break-word;
 }
 
 :deep(.v-list-item__content) {
-  overflow: visible !important;
-  white-space: normal;
-  word-wrap: break-word;
+	overflow: visible !important;
+	white-space: normal;
+	word-wrap: break-word;
 }
 
 .nav-item :deep(.v-list-item-title) {
-  font-size: 1.25rem;
+	font-size: 1.25rem;
 }
 
 .nav-item :deep(.v-icon) {
-  font-size: 1.5rem;
+	font-size: 1.5rem;
 }
 
 .no-scroll {
-  overflow: hidden !important;
+	overflow: hidden !important;
 }
 
 .grid-container {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: center;
-  justify-items: center;
-  max-height: 100%;
-  overflow: hidden;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	align-items: center;
+	justify-items: center;
+	max-height: 100%;
+	overflow: hidden;
 }
 
 .menu-card {
-  z-index: 999;
-  width: 32px;
-  aspect-ratio: 1 / 1;
-  display: inline-flex;
-  padding: 32px;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 16px;
-  left: 16px;
+	z-index: 999;
+	width: 32px;
+	aspect-ratio: 1 / 1;
+	display: inline-flex;
+	padding: 32px;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	top: 16px;
+	left: 16px;
 }
 
 .v-btn {
-  margin: 0;
-  padding: 0;
+	margin: 0;
+	padding: 0;
 }
 
 .v-btn>.v-icon {
-  font-size: 24px;
+	font-size: 24px;
 }
 </style>
diff --git a/web/optivum-better-schedule-frontend/src/components/ThemeSwitcher.vue b/web/optivum-better-schedule-frontend/src/components/ThemeSwitcher.vue
index c2bdb38..1dd9d46 100644
--- a/web/optivum-better-schedule-frontend/src/components/ThemeSwitcher.vue
+++ b/web/optivum-better-schedule-frontend/src/components/ThemeSwitcher.vue
@@ -1,7 +1,7 @@
 <!-- ThemeSwitcher.vue -->
 <template>
-	<v-container class="fill-height d-flex justify-center align-center">
-		<div class="text-center">
+	<v-container class="fill-height d-flex justify-center align-center pa-0">
+		<div class=" text-center">
 			<span class="theme-title">{{ t('theme.name') }}</span>
 			<v-btn-toggle v-model="currentTheme" mandatory class="ma-4 elevation-8" color="tertiary" variant="outlined">
 				<v-btn value="dracula" icon="mdi-ghost" />
diff --git a/web/optivum-better-schedule-frontend/src/components/Weather.vue b/web/optivum-better-schedule-frontend/src/components/Weather.vue
index 9ddf9c5..8c7de06 100644
--- a/web/optivum-better-schedule-frontend/src/components/Weather.vue
+++ b/web/optivum-better-schedule-frontend/src/components/Weather.vue
@@ -1,7 +1,7 @@
 <!-- Weather.vue -->
 <template>
   <v-row class="d-flex justify-center align-center flex-nowrap" no-gutters>
-    <v-card class="weather-card" flat :class="{ loading: isLoading, transitioning: isTransitioning }">
+    <v-card class="weather-card" :loading="isLoading" flat>
       <v-row class="justify-center align-center weather-info">
         <v-col class="text-center" cols="6">
           <span class="location-info">{{ locationName }}</span>
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 
@@ -47,27 +47,23 @@ const updateUnits = () => {
 
 updateUnits();
 
-watch(
-  () => locale.value,
-  () => {
-    updateUnits();
-    fetchWeatherData();
-  }
-);
+const placeholderCities = ['Atlantis', 'Memphis', 'Metropolis', 'El Dorado', 'Shangri-La'];
+const randomCity = placeholderCities[Math.floor(Math.random() * placeholderCities.length)];
 
-const isLoading = ref(true);
-const isTransitioning = ref(false);
+const conditionNames = ['thunderstorm', 'drizzle', 'rain', 'snow', 'clear'];
+const conditionDescriptions = ['thunderstorm with light rain', 'heavy intensity drizzle', 'extreme rain', 'heavy snow', 'clear sky']
+const randomConditionIndex = Math.floor(Math.random() * conditionNames.length);
+const randomConditionName = conditionNames[randomConditionIndex];
+const randomConditionDescription = conditionDescriptions[randomConditionIndex];
 
-const placeholderCities = ['Atlantis', 'Gotham', 'Metropolis', 'El Dorado', 'Shangri-La'];
-const randomCity = placeholderCities[Math.floor(Math.random() * placeholderCities.length)];
 const locationName = ref(randomCity);
+const isLoading = ref(true);
 
 const temperature = ref(`${Math.floor(Math.random() * 30)}°`);
-const conditionNames = ['Sunny', 'Cloudy', 'Rainy', 'Snowy'];
-const randomCondition = conditionNames[Math.floor(Math.random() * conditionNames.length)];
-const conditionName = ref(randomCondition);
-const conditionDescription = ref('Fetching weather data');
-const conditionIcon = ref(getConditionIcon(randomCondition));
+
+const conditionName = ref(t(`weather.conditions.${randomConditionName}`));
+const conditionDescription = ref(t(`weather.conditions.${randomConditionDescription}`));
+const conditionIcon = ref(getConditionIcon(randomConditionName));
 
 interface ForecastDay {
   code: number;
@@ -76,17 +72,18 @@ interface ForecastDay {
   temp: string;
 }
 
+const dayNames = [
+  t('day.monday'),
+  t('day.tuesday'),
+  t('day.wednesday'),
+  t('day.thursday'),
+  t('day.friday'),
+  t('day.saturday'),
+  t('day.sunday')
+];
+
 const forecastData = ref<ForecastDay[]>(
   Array.from({ length: 3 }, (_, i) => {
-    const dayNames = [
-      t('day.monday'),
-      t('day.tuesday'),
-      t('day.wednesday'),
-      t('day.thursday'),
-      t('day.friday'),
-      t('day.saturday'),
-      t('day.sunday')
-    ];
     const randomDay = dayNames[Math.floor(Math.random() * dayNames.length)];
     const randomTemp = `${Math.floor(Math.random() * 10)}°/${Math.floor(Math.random() * 30)}°`;
     const randomIcon = getConditionIcon(
@@ -101,61 +98,52 @@ const forecastData = ref<ForecastDay[]>(
   })
 );
 
-const fetchWeatherData = async () => {
-  const startTime = performance.now();
+const CACHE_KEY = 'weatherData';
+const CACHE_TIME_KEY = 'weatherDataFetchTime';
+const CACHE_DURATION = 5 * 60 * 1000;
 
-  const cachedData = localStorage.getItem('weatherData');
-  const cachedTime = localStorage.getItem('weatherDataFetchTime');
+const fetchWeatherData = async (retryDelay = 1000) => {
   const now = Date.now();
-  const dataTTL = 30 * 60 * 1000; // 30 minutes
 
-  let useCachedData = false;
+  const cachedData = localStorage.getItem(CACHE_KEY);
+  const cachedTime = localStorage.getItem(CACHE_TIME_KEY);
 
-  if (cachedData && cachedTime) {
-    const cachedTimeNum = parseInt(cachedTime);
-    if (now - cachedTimeNum < dataTTL) {
-      useCachedData = true;
-      const parsedData = JSON.parse(cachedData);
-      processWeatherData(parsedData.currentData, parsedData.forecast);
-      isLoading.value = false;
-    }
+  if (cachedData && cachedTime && now - parseInt(cachedTime) < CACHE_DURATION) {
+    const parsedData = JSON.parse(cachedData);
+    processWeatherData(parsedData.currentData, parsedData.forecast);
+    isLoading.value = false;
+    return;
   }
 
-  if (!useCachedData) {
-    isLoading.value = true;
-
-    try {
-      const currentResponse = await axios.get(
-        `http://localhost:3001/api/v1/weather/current?units=${units.value}`
-      );
-      const forecastResponse = await axios.get(
-        `http://localhost:3001/api/v1/weather/forecast?units=${units.value}`
-      );
-
-      const currentData = currentResponse.data;
-      const forecast = forecastResponse.data.forecast;
-
-      const dataToCache = { currentData, forecast };
-      localStorage.setItem('weatherData', JSON.stringify(dataToCache));
-      localStorage.setItem('weatherDataFetchTime', now.toString());
-
-      const minLoadingTime = 1000 + Math.random() * 1000;
-      const elapsedTime = performance.now() - startTime;
-      const remainingTime = Math.max(minLoadingTime - elapsedTime, 0);
-
-      setTimeout(() => {
-        isTransitioning.value = true;
-        processWeatherData(currentData, forecast);
-
-        setTimeout(() => {
-          isLoading.value = false;
-          isTransitioning.value = false;
-        }, 1000);
-      }, remainingTime);
-    } catch (error) {
+  isLoading.value = true;
+
+  try {
+    const currentResponse = await axios.get(
+      `http://localhost:3001/api/v1/weather/current?units=${units.value}`
+    );
+    const forecastResponse = await axios.get(
+      `http://localhost:3001/api/v1/weather/forecast?units=${units.value}`
+    );
+
+    const currentData = currentResponse.data;
+    const forecast = forecastResponse.data.forecast;
+
+    localStorage.setItem(CACHE_KEY, JSON.stringify({ currentData, forecast }));
+    localStorage.setItem(CACHE_TIME_KEY, now.toString());
+
+    processWeatherData(currentData, forecast);
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response && error.response.status === 429) {
+      console.warn('Too many requests. Retrying in', retryDelay / 1000, 'seconds.');
+      setTimeout(() => fetchWeatherData(retryDelay * 1.5), retryDelay);
+    } else {
       console.error('Error fetching weather data:', error);
       isLoading.value = false;
     }
+  } finally {
+    if (isLoading.value) {
+      isLoading.value = false;
+    }
   }
 };
 
@@ -225,12 +213,13 @@ let intervalId: number | null = null;
 onMounted(() => {
   fetchWeatherData();
 
-  intervalId = setInterval(fetchWeatherData, 5 * 1000);
+  intervalId = setInterval(fetchWeatherData, CACHE_DURATION);
 });
 
 onUnmounted(() => {
   if (intervalId !== null) {
     clearInterval(intervalId);
+    intervalId = null;
   }
 });
 </script>
@@ -244,10 +233,6 @@ onUnmounted(() => {
   transition: filter 1s ease, opacity 1s ease;
 }
 
-.loading {
-  filter: blur(15px);
-}
-
 .weather-info {
   margin-bottom: 1vw;
 }
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue b/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue
index 7d203e9..0be5ddb 100644
--- a/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue
@@ -1,101 +1,117 @@
 <!-- Divisions.vue -->
 <template>
-	<v-container class="search-container" flui>
-		<v-col class="divisions-grid" align="center" justify="center">
-			<v-text-field v-model="search" class="search" label="Search Icons" placeholder="Type to search..."
-				prepend-inner-icon="mdi-magnify" outlined></v-text-field>
-		</v-col>
+	<v-container fluid class="fill-height fill-width pa-0">
+		<v-slide-y-transition appear>
+			<v-card class="search-container pa-0 elevation-4 rounded-b-lg">
+				<v-text-field v-model="search" class="search" :label="t('search.division')"
+					prepend-inner-icon="mdi-magnify" variant="outlined" />
+			</v-card>
+		</v-slide-y-transition>
+		<v-slide-y-reverse-transition appear>
+			<v-container class="scrollable-grid pa-0">
+				<div class="divisions-grid">
+					<v-col v-for="(item, index) in filteredItems" :key="index" class="grid-item pa-0" cols="auto">
+						<DivisionButton :text="item" :index="index" />
+					</v-col>
+				</div>
+			</v-container>
+		</v-slide-y-reverse-transition>
 	</v-container>
-	<v-slide-y-reverse-transition appear>
-		<v-container class="grid-container" fluid>
-			<v-row class="divisions-grid" align="center" justify="center">
-				<v-col cols="12" class="d-flex justify-center grid-item">
-					<v-row>
-						<v-col v-for="(item, index) in filteredItems" :key="index" cols="4" sm="3" md="2" lg="1"
-							class="d-flex align-center justify-center">
-							<DivisionButton :text="item" />
-						</v-col>
-					</v-row>
-				</v-col>
-			</v-row>
-		</v-container>
-	</v-slide-y-reverse-transition>
 </template>
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n';
 import DivisionButton from '../DivisionButton.vue';
 
-// Reactive state
-const search = ref('') // Holds the search input
+const { t, locale } = useI18n();
+
+const search = ref('')
 const items = ref([
-	'START', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'access-point-off',
-	'ab-testing', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'access-point-off',
-	'ab-testing', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'access-point-off',
-	'ab-testing', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'access-point-off',
-	'ab-testing', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'access-point-off',
-	'ab-testing', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'access-point-off',
-	'ab-testing', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'access-point-off',
-	'ab-testing', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'access-point-off',
-	'ab-testing', 'abacus', 'access-point', 'account', 'account-alert', 'account-box',
-	'access-point-check', 'access-point-minus', 'access-point-network', 'END',
+	'1M', '2M', '3M', '4M', '5M',
+	'1F', '2F', '3F', '4F', '5F',
+	'1A', '2A', '3A', '4A', '5A',
+	'1B', '2B', '3B', '4B', '5B',
+	'1C', '2C', '3C', '4C', '5C',
+	'1D', '2D', '3D', '4D', '5D',
+	'1E', '2E', '3E', '4E', '5E',
+	'1G', '2G', '3G', '4G', '5G',
+	'1H', '2H', '3H', '4H', '5H',
+	'1I', '2I', '3I', '4I', '5I',
+	'1J', '2J', '3J', '4J', '5J',
+	'1K', '2K', '3K', '4K', '5K',
+	'1L', '2L', '3L', '4L', '5L',
+	'1N', '2N', '3N', '4N', '5N',
+	'1O', '2O', '3O', '4O', '5O',
+	'1P', '2P', '3P', '4P', '5P',
+	'1R', '2R', '3R', '4R', '5R',
+	'1S', '2S', '3S', '4S', '5S',
+	'1T', '2T', '3T', '4T', '5T',
+	'1U', '2U', '3U', '4U', '5U',
+	'1W', '2W', '3W', '4W', '5W',
+	'1X', '2X', '3X', '4X', '5X',
+	'1Y', '2Y', '3Y', '4Y', '5Y',
+	'1Z', '2Z', '3Z', '4Z', '5Z',
 ])
 
-// Computed property for filtered items
 const filteredItems = computed(() => {
-	// If search is empty, show all items
 	if (!search.value) return items.value
-	// Filter items based on search input
 	return items.value.filter(item => item.toLowerCase().includes(search.value.toLowerCase()))
 })
 </script>
 
 <style scoped>
-.grid-container {
+.main-container {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+	height: 100vh;
 	overflow: hidden;
-	padding: 0;
 }
 
 .search-container {
+	width: 50%;
+	margin: auto;
 	display: flex;
-	flex-direction: column;
-	align-items: center;
 	justify-content: center;
-	overflow: hidden;
-	position: static;
-	padding: 0;
+	align-items: center;
+	z-index: 10;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	padding: 15px 0;
 }
 
-.divisions-grid {
-	flex-wrap: nowrap;
-	display: grid;
+.search {
+	margin-left: 15px;
+	margin-right: 15px;
+	margin-top: 15px;
+	margin-bottom: 0;
+	user-select: none;
+}
+
+.scrollable-grid {
+	height: calc(100vh - 70px - 24px);
 	width: 100%;
-	justify-items: center;
-	align-items: center;
-	gap: 1rem;
-	padding: 0;
+	overflow: visible;
 }
 
-.grid-item {
-	max-width: 100%;
-	padding: 0;
+.divisions-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+	gap: 2rem;
+	justify-content: center;
+	padding: 2rem;
+	margin-top: 3rem;
+	overflow: visible;
 }
 
-.search {
-	width: 100%;
-	max-width: 500px;
-	margin: 1rem;
+.grid-item {
+	width: 8rem;
+	height: 8rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	aspect-ratio: 1 / 1;
 }
 </style>
\ No newline at end of file
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Home.vue b/web/optivum-better-schedule-frontend/src/components/pages/Home.vue
index 59b9f15..1eedac3 100644
--- a/web/optivum-better-schedule-frontend/src/components/pages/Home.vue
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Home.vue
@@ -1,7 +1,7 @@
 <!-- Home.vue -->
 <template>
 	<v-slide-y-reverse-transition appear>
-		<v-container class="grid-container" fluid>
+		<v-container class="grid-container pa-0" fluid>
 			<v-row class="home-grid" align="center" justify="center">
 				<v-col cols="12" class="d-flex justify-center grid-item">
 					<Clock />
@@ -35,12 +35,26 @@ import Weather from '../Weather.vue';
 	width: 100%;
 	justify-items: center;
 	align-items: center;
-	gap: 1rem;
+	gap: 0;
 	padding: 0;
+	margin: 0;
 }
 
 .grid-item {
 	max-width: 100%;
 	padding: 0;
 }
+
+.v-container {
+	overflow-y: auto;
+}
+
+.v-container::-webkit-scrollbar {
+	width: 0;
+	height: 0;
+}
+
+.v-container {
+	scrollbar-width: none;
+}
 </style>
diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Settings.vue b/web/optivum-better-schedule-frontend/src/components/pages/Settings.vue
index f90a5a4..12e296b 100644
--- a/web/optivum-better-schedule-frontend/src/components/pages/Settings.vue
+++ b/web/optivum-better-schedule-frontend/src/components/pages/Settings.vue
@@ -1,7 +1,7 @@
 <!-- Settings.vue -->
 <template>
 	<v-slide-y-reverse-transition appear>
-		<v-container class="grid-container" fluid>
+		<v-container class="grid-container pa-0" fluid>
 			<v-row class="home-grid" align="center" justify="center">
 				<v-col cols="12" class="d-flex justify-center grid-item">
 					<ThemeSwitcher />
diff --git a/web/optivum-better-schedule-frontend/src/locales/en.js b/web/optivum-better-schedule-frontend/src/locales/en.js
index e4833d3..de00413 100644
--- a/web/optivum-better-schedule-frontend/src/locales/en.js
+++ b/web/optivum-better-schedule-frontend/src/locales/en.js
@@ -25,7 +25,7 @@ export default {
 	weather: {
 		temperature: 'Temperature',
 		weather: 'Weather',
-	conditions: {
+		conditions: {
 			// Group 2xx: Thunderstorm
 			'thunderstorm': 'Thunderstorm',
 			'thunderstorm with light rain': 'Thunderstorm with Light Rain',
@@ -100,10 +100,19 @@ export default {
 		},
 	},
 	page: {
+		title: 'Optivum - Better Schedule',
 		home: 'Home',
 		divisions: 'Divisions',
+		division: 'Division - {id}',
 		teachers: 'Teachers',
-		classrooms: 'Classrooms',
+		teacher: 'Teacher - {id}',
+		rooms: 'Classrooms',
+		room: 'Classroom - {id}',
 		settings: 'Settings',
 	},
+	search: {
+		division: 'Search division...',
+		teacher: 'Search teacher...',
+		room: 'Search classroom...',
+	}
 };
\ No newline at end of file
diff --git a/web/optivum-better-schedule-frontend/src/locales/pl.js b/web/optivum-better-schedule-frontend/src/locales/pl.js
index 3e07580..d72802b 100644
--- a/web/optivum-better-schedule-frontend/src/locales/pl.js
+++ b/web/optivum-better-schedule-frontend/src/locales/pl.js
@@ -100,10 +100,19 @@ export default {
 		},
 	},
 	page: {
+		title: 'Optivum - Lepszy Plan Lekcji',
 		home: 'Strona główna',
 		divisions: 'Klasy',
+		division: 'Klasa - {id}',
 		teachers: 'Nauczyciele',
-		classrooms: 'Sale',
+		teacher: 'Nauczyciel - {id}',
+		rooms: 'Sale',
+		room: 'Sala - {id}',
 		settings: 'Ustawienia',
 	},
+	search: {
+		division: 'Wyszukaj klase...',
+		teacher: 'Wyszukaj nauczyciela...',
+		room: 'Wyszukaj sale...',
+	}
 };
diff --git a/web/optivum-better-schedule-frontend/src/main.ts b/web/optivum-better-schedule-frontend/src/main.ts
index 9f58cfa..62b8a60 100644
--- a/web/optivum-better-schedule-frontend/src/main.ts
+++ b/web/optivum-better-schedule-frontend/src/main.ts
@@ -62,5 +62,25 @@ themeStore.setTheme(themeStore.currentTheme);
 
 app.use(router);
 app.use(i18n);
+
+router.beforeEach((to, from, next) => {
+	const { t } = i18n.global;
+	const titleKey = to.meta.titleKey as string;
+
+	if (titleKey) {
+		let title = t(titleKey);
+
+		if (to.params.id) {
+			title = t(titleKey, { id: to.params.id });
+		}
+
+		document.title = title;
+	} else {
+		document.title = t('page.title');
+	}
+
+	next();
+});
+
 app.mount('#app');
 app.component('Overlay', Overlay);
\ No newline at end of file
diff --git a/web/optivum-better-schedule-frontend/src/plugins/vuetify.ts b/web/optivum-better-schedule-frontend/src/plugins/vuetify.ts
index 08af84a..767bede 100644
--- a/web/optivum-better-schedule-frontend/src/plugins/vuetify.ts
+++ b/web/optivum-better-schedule-frontend/src/plugins/vuetify.ts
@@ -14,19 +14,21 @@ import { createVuetify } from 'vuetify'
 const draculaTheme = {
   dark: true,
   colors: {
-    background: '#1A1C23',    // Darker background for main content
-    surface: '#121218',       // Much darker color for the drawer
-    primary: '#8BE9FD',       // Cyan
-    secondary: '#FF79C6',     // Pink
-    accent: '#BD93F9',        // Purple
-    error: '#FF5555',         // Red
-    info: '#8BE9FD',          // Cyan variant
-    success: '#50FA7B',       // Green
-    warning: '#F1FA8C',       // Yellow
-    foreground: '#F8F8F2',    // Foreground text color
-    comment: '#6272A4',       // Muted text color for comments
-    drawer: '#0F0F12',        // Darker shade specifically for drawer
-    orange: '#FFB86C',        // Optional orange
+    background: '#1A1C23',     // Darker background for main content
+    surface: '#121218',        // Much darker color for the drawer
+    primary: '#8BE9FD',        // Cyan
+    primaryMuted: '#6EA8B5',   // Muted cyan
+    secondary: '#FF79C6',      // Pink
+    secondaryMuted: '#8A3B64', // Muted pink
+    accent: '#BD93F9',         // Purple
+    error: '#FF5555',          // Red
+    info: '#8BE9FD',           // Cyan variant
+    success: '#50FA7B',        // Green
+    warning: '#F1FA8C',        // Yellow
+    foreground: '#F8F8F2',     // Foreground text color
+    comment: '#6272A4',        // Muted text color for comments
+    drawer: '#0F0F12',         // Darker shade specifically for drawer
+    orange: '#FFB86C',         // Optional orange
   },
 };
 
@@ -37,9 +39,17 @@ export default createVuetify({
     themes: {
       light: {
         dark: false,
+        colors: {
+          primaryMuted: '#78909C',  // More colorful light muted blue-grey
+          secondaryMuted: '#90A4AE', // More colorful light muted blue-grey variant
+        },
       },
       dark: {
         dark: true,
+        colors: {
+          primaryMuted: '#455A64',  // More colorful dark muted blue-grey
+          secondaryMuted: '#546E7A', // More colorful dark muted blue-grey variant
+        },
       },
       dracula: draculaTheme,
     },
diff --git a/web/optivum-better-schedule-frontend/src/router.ts b/web/optivum-better-schedule-frontend/src/router.ts
index 069550a..2a1a5f6 100644
--- a/web/optivum-better-schedule-frontend/src/router.ts
+++ b/web/optivum-better-schedule-frontend/src/router.ts
@@ -1,16 +1,17 @@
 import { createRouter, createWebHistory } from 'vue-router'
-
 import MainPage from './components/pages/Home.vue'
 import DivisionsPage from './components/pages/Divisions.vue'
 import SettingsPage from './components/pages/Settings.vue'
 
 const routes = [
-  { path: '/', component: MainPage },
-  { path: '/home', component: MainPage },
-  { path: '/divisions', component: DivisionsPage },
-  { path: '/settings', component: SettingsPage },
+  { path: '/', component: MainPage, meta: { titleKey: 'page.home' } },
+  { path: '/home', component: MainPage, meta: { titleKey: 'page.home' } },
+  { path: '/divisions', component: DivisionsPage, meta: { titleKey: 'page.divisions' } },
+  { path: '/teachers', component: MainPage, meta: { titleKey: 'page.teachers' } },
+  { path: '/rooms', component: MainPage, meta: { titleKey: 'page.rooms' } },
+  { path: '/settings', component: SettingsPage, meta: { titleKey: 'page.settings' } },
 
-  { path: '/division/:id', component: DivisionsPage, props: true },
+  { path: '/division/:id', component: DivisionsPage, props: true, meta: { titleKey: 'page.division' } },
 ]
 
 const router = createRouter({
diff --git a/web/optivum-better-schedule-frontend/src/vanta.d.ts b/web/optivum-better-schedule-frontend/src/vanta.d.ts
new file mode 100644
index 0000000..ea1b63e
--- /dev/null
+++ b/web/optivum-better-schedule-frontend/src/vanta.d.ts
@@ -0,0 +1,5 @@
+// vanta.d.ts
+declare module 'vanta/dist/vanta.fog.min' {
+	const FOG: any;
+	export default FOG;
+}
\ No newline at end of file