add navigation

2025-05-03 15:50:21 +02:00
parent bffbfd6ec0
commit 6fd64a1681
16 changed files with 401 additions and 148 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,8 @@
      "dependencies": {
        "pinia": "^3.0.1",
        "scss": "^0.2.4",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-router": "^4.5.1"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^5.2.1",
@@ -2046,6 +2047,27 @@
        }
      }
    },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
    "node_modules/vue-tsc": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.4.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,7 +11,8 @@
  "dependencies": {
    "pinia": "^3.0.1",
    "scss": "^0.2.4",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,46 +1,14 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
-import Home from "./views/Home.vue";
-import HomeTablet from "./views/HomeTablet.vue";
-import HomeDesktop from "./views/HomeDesktop.vue";
-import {playlistPopUp, lectureListPopUp} from "./stores/globalStore.ts";
-
-const screenSize = ref("mobile");
-
-const playlist = playlistPopUp();
-const lectureList = lectureListPopUp();
-
-const updateScreenSize = () => {
-  const width = window.innerWidth;
-
-  if (width < 768) {
-    screenSize.value = "mobile";
-    playlist.playlistPopUp()
-    lectureList.lectureListPopUp()
-  } else if (width >= 768 && width < 1200) {
-    screenSize.value = "tablet";
-    playlist.playlistNoPopUp()
-    lectureList.lectureListPopUp()
-
-  } else {
-    screenSize.value = "desktop";
-    playlist.playlistNoPopUp()
-    lectureList.lectureListNoPopUp()
-  }
-};
+import {onMounted} from "vue";

 onMounted(() => {
-  updateScreenSize();
-  window.addEventListener("resize", updateScreenSize);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", updateScreenSize);
+  const savedTheme = localStorage.getItem("theme");
+  document.documentElement.setAttribute("data-theme", savedTheme || "dark");
 });
 </script>

 <template>
-  <component :is="screenSize === 'mobile' ? Home : screenSize === 'tablet' ? HomeTablet : HomeDesktop" />
+  <router-view />
 </template>

 <style scoped>
--- a/frontend/src/assets/Global.scss
+++ b/frontend/src/assets/Global.scss
@@ -92,18 +92,13 @@ body {
 }

 #app {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 10px;
  background: var(--neutral-50);
  color: var(--neutral-950);
  height: 100vh;
  width: 100vw;
-  padding: 10px;
  box-sizing: border-box;
 }
+
 button {
  color: var(--neutral-900);
 }
--- a/frontend/src/assets/Icons/DiscordLogo.vue
+++ b/frontend/src/assets/Icons/DiscordLogo.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg width="153" height="30" viewBox="0 0 292 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M61.7958 4.7294C57.0736 2.52 52.0244 0.9143 46.7456 0C46.0973 1.1721 45.3399 2.7486 44.8177 4.0027C39.2062 3.1588 33.6463 3.1588 28.138 4.0027C27.6159 2.7486 26.8413 1.1721 26.1872 0C20.9027 0.9143 15.8477 2.5259 11.1255 4.7411C1.60078 19.1342 -0.981215 33.1698 0.309785 47.0061C6.62708 51.7237 12.7493 54.5895 18.7682 56.4648C20.2543 54.4195 21.5797 52.2453 22.7215 49.9539C20.5469 49.1276 18.4641 48.1079 16.4961 46.9241C17.0182 46.5373 17.5289 46.1329 18.0223 45.7168C30.0257 51.3311 43.0677 51.3311 54.9277 45.7168C55.4269 46.1329 55.9375 46.5373 56.4539 46.9241C54.4801 48.1137 52.3916 49.1334 50.217 49.9598C51.3588 52.2453 52.6785 54.4254 54.1703 56.4706C60.195 54.5953 66.3229 51.7296 72.6402 47.0061C74.155 30.9663 70.0525 17.0596 61.7958 4.7294ZM24.3568 38.4969C20.7535 38.4969 17.7985 35.133 17.7985 31.0366C17.7985 26.9402 20.6904 23.5705 24.3568 23.5705C28.0233 23.5705 30.9782 26.9343 30.9151 31.0366C30.9208 35.133 28.0233 38.4969 24.3568 38.4969ZM48.5932 38.4969C44.9899 38.4969 42.0349 35.133 42.0349 31.0366C42.0349 26.9402 44.9267 23.5705 48.5932 23.5705C52.2596 23.5705 55.2146 26.9343 55.1515 31.0366C55.1515 35.133 52.2596 38.4969 48.5932 38.4969Z" class="iconFixedFillWhite"/>
+    <path d="M98.0293 14.406H113.693C117.469 14.406 120.659 15.0096 123.276 16.211C125.886 17.4123 127.843 19.0884 129.14 21.2333C130.436 23.3782 131.09 25.8337 131.09 28.5998C131.09 31.3073 130.413 33.7628 129.059 35.9604C127.705 38.1639 125.645 39.9045 122.874 41.1879C120.103 42.4713 116.671 43.1159 112.569 43.1159H98.0293V14.406ZM112.408 35.8198C114.95 35.8198 116.907 35.1693 118.272 33.8741C119.638 32.5731 120.321 30.8033 120.321 28.5588C120.321 26.4783 119.712 24.8198 118.496 23.5774C117.28 22.335 115.438 21.708 112.976 21.708H108.076V35.8198H112.408Z" class="iconFixedFillWhite"/>
+    <path d="M154.541 43.0809C152.372 42.5066 150.415 41.6744 148.677 40.5785V33.7688C149.991 34.806 151.752 35.6617 153.961 36.3356C156.17 37.0037 158.305 37.3377 160.37 37.3377C161.334 37.3377 162.063 37.2088 162.556 36.9509C163.05 36.6931 163.297 36.3825 163.297 36.025C163.297 35.6148 163.165 35.2749 162.895 34.9994C162.625 34.724 162.103 34.4954 161.329 34.302L156.509 33.1944C153.749 32.5381 151.792 31.6297 150.628 30.4635C149.463 29.3031 148.883 27.7794 148.883 25.8924C148.883 24.3042 149.388 22.9271 150.41 21.7491C151.425 20.5712 152.871 19.6628 154.747 19.024C156.624 18.3794 158.815 18.0571 161.334 18.0571C163.583 18.0571 165.643 18.3032 167.52 18.7955C169.396 19.2878 170.945 19.9148 172.179 20.6825V27.1231C170.916 26.3554 169.47 25.7518 167.818 25.2946C166.171 24.8434 164.479 24.6207 162.734 24.6207C160.215 24.6207 158.959 25.0602 158.959 25.9334C158.959 26.3437 159.154 26.6484 159.544 26.8535C159.934 27.0586 160.651 27.2696 161.69 27.4923L165.706 28.2307C168.329 28.6937 170.285 29.5083 171.57 30.6686C172.856 31.829 173.498 33.5461 173.498 35.8199C173.498 38.3105 172.437 40.2855 170.308 41.7506C168.179 43.2157 165.161 43.9482 161.248 43.9482C158.947 43.9424 156.71 43.6552 154.541 43.0809Z" class="iconFixedFillWhite"/>
+    <path d="M182.978 42.2192C180.678 41.0705 178.939 39.5117 177.78 37.5426C176.621 35.5735 176.036 33.3583 176.036 30.8969C176.036 28.4356 176.638 26.2321 177.843 24.2923C179.048 22.3525 180.815 20.8288 183.145 19.7212C185.474 18.6136 188.257 18.0627 191.499 18.0627C195.515 18.0627 198.849 18.9242 201.5 20.6471V28.1543C200.565 27.4979 199.474 26.9646 198.229 26.5544C196.984 26.1442 195.653 25.939 194.23 25.939C191.74 25.939 189.795 26.402 188.389 27.3338C186.983 28.2656 186.278 29.4787 186.278 30.9848C186.278 32.4616 186.96 33.6689 188.326 34.6183C189.692 35.5618 191.671 36.0365 194.27 36.0365C195.607 36.0365 196.927 35.8372 198.229 35.4446C199.526 35.0461 200.645 34.5597 201.58 33.9853V41.2463C198.637 43.0513 195.223 43.9538 191.338 43.9538C188.068 43.9421 185.279 43.3678 182.978 42.2192Z" class="iconFixedFillWhite"/>
+    <path d="M211.518 42.2195C209.2 41.0709 207.433 39.5003 206.216 37.5019C205 35.5035 204.386 33.2766 204.386 30.8152C204.386 28.3539 204.994 26.1562 206.216 24.2282C207.438 22.3001 209.194 20.7881 211.501 19.6922C213.801 18.5963 216.55 18.0513 219.734 18.0513C222.919 18.0513 225.667 18.5963 227.968 19.6922C230.269 20.7881 232.025 22.2884 233.23 24.2047C234.435 26.1211 235.037 28.3187 235.037 30.8094C235.037 33.2707 234.435 35.4977 233.23 37.496C232.025 39.4944 230.263 41.065 227.945 42.2136C225.627 43.3623 222.89 43.9366 219.729 43.9366C216.567 43.9366 213.83 43.3681 211.518 42.2195ZM223.722 34.9409C224.698 33.9447 225.191 32.6261 225.191 30.9852C225.191 29.3443 224.703 28.0374 223.722 27.0704C222.747 26.0976 221.415 25.6112 219.729 25.6112C218.013 25.6112 216.67 26.0976 215.689 27.0704C214.714 28.0433 214.226 29.3443 214.226 30.9852C214.226 32.6261 214.714 33.9447 215.689 34.9409C216.665 35.9372 218.013 36.4412 219.729 36.4412C221.415 36.4353 222.747 35.9372 223.722 34.9409Z" class="iconFixedFillWhite"/>
+    <path d="M259.17 19.5748V28.4357C258.149 27.75 256.829 27.4101 255.194 27.4101C253.053 27.4101 251.401 28.0724 250.253 29.3968C249.1 30.7213 248.526 32.7841 248.526 35.5736V43.1218H238.686V19.1236H248.326V26.7538C248.859 23.9642 249.726 21.9073 250.919 20.5769C252.107 19.2525 253.644 18.5903 255.515 18.5903C256.932 18.5903 258.149 18.9185 259.17 19.5748Z" class="iconFixedFillWhite"/>
+    <path d="M291.864 13.5857V43.122H282.023V37.7481C281.191 39.7699 279.929 41.3112 278.231 42.366C276.532 43.4151 274.432 43.9425 271.942 43.9425C269.716 43.9425 267.777 43.3916 266.118 42.284C264.46 41.1764 263.181 39.6586 262.28 37.7305C261.385 35.8024 260.931 33.6224 260.931 31.1845C260.903 28.6704 261.379 26.4141 262.36 24.4157C263.336 22.4173 264.718 20.8585 266.497 19.7391C268.276 18.6198 270.307 18.0572 272.585 18.0572C277.273 18.0572 280.417 20.1376 282.023 24.2926V13.5857H291.864ZM280.555 34.7769C281.559 33.7806 282.058 32.4855 282.058 30.9032C282.058 29.3736 281.57 28.1253 280.595 27.1701C279.619 26.2149 278.282 25.7343 276.601 25.7343C274.943 25.7343 273.618 26.2207 272.625 27.1935C271.632 28.1664 271.139 29.4263 271.139 30.9852C271.139 32.5441 271.632 33.8158 272.625 34.8003C273.618 35.7848 274.926 36.2771 276.561 36.2771C278.219 36.2713 279.55 35.7731 280.555 34.7769Z" class="iconFixedFillWhite"/>
+    <path d="M139.382 21.6785C142.091 21.6785 144.288 19.6634 144.288 17.1777C144.288 14.692 142.091 12.677 139.382 12.677C136.672 12.677 134.476 14.692 134.476 17.1777C134.476 19.6634 136.672 21.6785 139.382 21.6785Z" class="iconFixedFillWhite"/>
+    <path d="M134.472 24.7788C137.478 26.1032 141.208 26.1618 144.283 24.7788V43.2507H134.472V24.7788Z" class="iconFixedFillWhite"/>
+  </svg>
+
+</template>
+
+<style scoped>
+
+</style>
--- a/frontend/src/components/InfoHeader.vue
+++ b/frontend/src/components/InfoHeader.vue
@@ -5,7 +5,8 @@ import UserLoginInfo from "../items/UserLoginInfo.vue";
 import SetingsIcon from "../assets/Icons/SetingsIcon.vue";
 import DarkModeIcone from "../assets/Icons/DarkModeIcone.vue";
 import LightModeIcone from "../assets/Icons/LightModeIcone.vue";
-import {onMounted, ref} from "vue";
+import {ref} from "vue";
+import router from "../router.ts";


 const themeIs = ref("dark");
@@ -18,17 +19,9 @@ function switchThemeMode() {
  themeIs.value = newTheme;
 }

-onMounted(() => {
-  const savedTheme = localStorage.getItem("theme");
-
-  if (savedTheme === "light" || savedTheme === "dark") {
-    themeIs.value = savedTheme;
-  } else {
-    themeIs.value = "dark";
-  }
-
-  document.documentElement.setAttribute("data-theme", themeIs.value);
-});
+function navigateToSettings() {
+  router.push("/settings");
+}
 </script>

 <template>
@@ -48,7 +41,11 @@ onMounted(() => {
        <DarkModeIcone v-if="themeIs == 'dark'" />
        <LightModeIcone v-if="themeIs == 'light'" />
      </button>
-      <button><SetingsIcon /></button>
+      <button
+        @click="navigateToSettings"
+      >
+        <SetingsIcon />
+      </button>
    </div>
  </div>
 </template>
--- a/frontend/src/components/Playlist.vue
+++ b/frontend/src/components/Playlist.vue
@@ -25,10 +25,11 @@ const playlists = playlistsListStore();
    </div>
    <Button
        type="primary"
-        label="Créer une playlist"
        :on-click="() => {}"
        :disabled="false"
-    />
+    >
+      Créer une playlist
+    </Button>
  </div>
 </template>

--- a/frontend/src/components/SettingsHeader.vue
+++ b/frontend/src/components/SettingsHeader.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+import LogoIcon from "../assets/Icons/LogoIcon.vue";
+import router from "../router.ts";
+
+function navigateToHome() {
+  router.push("/");
+}
+</script>
+
+<template>
+<header>
+  <button
+      @click="navigateToHome"
+      class="logo">
+    <LogoIcon/>
+    <h1>Subsonics</h1>
+  </button>
+</header>
+</template>
+
+<style scoped>
+header {
+  display: flex;
+  padding: 20px;
+  border-radius: 25px;
+  background-color: var(--neutral-100);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+</style>
--- a/frontend/src/items/Button.vue
+++ b/frontend/src/items/Button.vue
@@ -2,7 +2,6 @@
 import {defineProps} from "vue";

 const props = defineProps<{
-  label: string;
  type: 'primary' | 'secondary' | 'tertiary';
  disabled: boolean;
  onClick: () => void;
@@ -15,7 +14,7 @@ const props = defineProps<{
      :disabled="props.disabled"
      @click="props.onClick"
  >
-    {{ props.label }}
+    <slot />
  </button>
 </template>

--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,7 +5,9 @@ import App from './App.vue'

 const app = createApp(App);
 const pinia = createPinia();
+import router from './router';


 app.use(pinia);
+app.use(router);
 app.mount('#app');
--- a/frontend/src/router.ts
+++ b/frontend/src/router.ts
@@ -0,0 +1,18 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Home from './views/Home.vue';
+import Login from './views/DiscordLogin.vue';
+import Settings from './views/Settings.vue';
+
+
+const routes = [
+    { path: '/', component: Home },
+    { path: '/login', component: Login },
+    { path: '/settings', component: Settings },
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes,
+});
+
+export default router;
--- a/frontend/src/views/DiscordLogin.vue
+++ b/frontend/src/views/DiscordLogin.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+
+import LogoIcon from "../assets/Icons/LogoIcon.vue";
+import Button from "../items/Button.vue";
+import DiscordLogo from "../assets/Icons/DiscordLogo.vue";
+import router from "../router.ts";
+
+function login() {
+  console.log("login");
+  router.push({ path: '/' })
+}
+
+</script>
+
+<template>
+  <div class="login">
+    <div class="container">
+      <div class="logo">
+        <LogoIcon/>
+        <h1>Subsonics</h1>
+      </div>
+      <Button
+          type="primary"
+          :disabled="false"
+          :on-click="login"
+      >
+        <DiscordLogo/>
+      </Button>
+      <p>
+        Fait avec le 🤍 par Raphix
+      </p>
+      <p class="sub-text">Version : 3.0.0</p>
+      <p class="sub-text information">
+        *L'accès à l'interface nécessite une connexion via Discord, et implique d'être membre du serveur Discord du CLP. En poursuivant la connexion sur ce site, vous consentez à l'utilisation de vos données fournies par Discord dans le but de garantir le bon fonctionnement du site. Vous avez la possibilité de demander à tout moment la suppression de vos données à Raphix (raphixscrap). Tout acte intentionnel de dégradation du bot est passible d'un bannissement du site.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  background-color: var(--neutral-50);
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 500px;
+  padding: 20px;
+  background-color: var(--neutral-100);
+  border-radius: 8px;
+  gap: 20px;
+  color: var(--neutral-950);
+  box-sizing: border-box;
+}
+@media (max-width: 500px) {
+  .container {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    padding: 10px;
+  }
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.sub-text {
+  font-size: 0.8rem;
+  color: var(--neutral-950);
+}
+
+.information {
+  color: var(--neutral-400);
+}
+</style>
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,96 +1,62 @@
 <script setup lang="ts">
-import Header from "../components/Header.vue";
-import InfoHeader from "../components/InfoHeader.vue";
-import Player from "../components/Player.vue";
-import SearchPreview from "../components/SearchPreview.vue";
-import { lectureListIsOpen, playlistsIsOpen } from "../stores/globalStore.ts";
-import Playlist from "../components/Playlist.vue";
-import LectureList from "../components/LectureList.vue";
-import {searchStore} from "../stores/dataStore.ts";
+import { ref, onMounted, onUnmounted } from "vue";
+import HomeMobile from "./HomeMobile.vue";
+import HomeTablet from "./HomeTablet.vue";
+import HomeDesktop from "./HomeDesktop.vue";
+import {lectureListPopUp, playlistPopUp} from "../stores/globalStore.ts";

-const search = searchStore();
-const lectureList = lectureListIsOpen();
-const playlists = playlistsIsOpen();
+const screenSize = ref("mobile");
+
+const playlist = playlistPopUp();
+const lectureList = lectureListPopUp();
+
+const updateScreenSize = () => {
+  const width = window.innerWidth;
+
+  if (width < 768) {
+    screenSize.value = "mobile";
+    playlist.playlistPopUp()
+    lectureList.lectureListPopUp()
+  } else if (width >= 768 && width < 1200) {
+    screenSize.value = "tablet";
+    playlist.playlistNoPopUp()
+    lectureList.lectureListPopUp()
+
+  } else {
+    screenSize.value = "desktop";
+    playlist.playlistNoPopUp()
+    lectureList.lectureListNoPopUp()
+  }
+};
+
+onMounted(() => {
+  updateScreenSize();
+  window.addEventListener("resize", updateScreenSize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", updateScreenSize);
+});
 </script>

 <template>
-  <Header />
-  <InfoHeader />
-  <div class="content">
-  <Transition name="slide-up">
-    <component :is="search.searchQuery == '' ? Player : SearchPreview" />
-  </Transition>
+  <div class="home-container">
+    <component :is="screenSize === 'mobile' ? HomeMobile : screenSize === 'tablet' ? HomeTablet : HomeDesktop" />
  </div>
-
-  <Transition name="popups">
-    <component :is="playlists.isOpen ? Playlist : ''" />
-  </Transition>
-  <Transition name="popups">
-    <component :is="lectureList.isOpen ? LectureList : ''" />
-  </Transition>
 </template>

 <style scoped>
-
-.content {
-  position: relative;
+.home-container {
  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+
+  flex: 1 0 0;
  height: 100%;
  width: 100%;
-  flex: 1 0 0;
+  padding: 10px;
  box-sizing: border-box;
-  overflow: hidden;
 }
-
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: transform 0.5s ease-in-out;
-}
-
-@keyframes slide-up {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-.slide-up-enter-from {
-  transform: translateX(0);
-}
-.slide-up-leave-to {
-  transform: translateX(-100%);
-}
-
-.slide-up-leave-from {
-  transform: translateX(0);
-}
-.slide-up-enter-to {
-  transform: translateX(-100%);
-}
-
-
-
-.popups-enter-active {
-  animation: bounce-in 0.5s;
-}
-.popups-leave-active {
-  animation: bounce-in 0.5s reverse;
-}
-@keyframes bounce-in {
-  0% {
-    transform: scale(0) translateX(-50%);
-    transform-origin: top right;
-  }
-  50% {
-    transform: scale(1.15) translateX(-50%);
-    transform-origin: top right;
-  }
-  100% {
-    transform: scale(1) translateX(-50%);
-    transform-origin: top right;
-  }
-}
-
-</style>
+</style>
--- a/frontend/src/views/HomeMobile.vue
+++ b/frontend/src/views/HomeMobile.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import Header from "../components/Header.vue";
+import InfoHeader from "../components/InfoHeader.vue";
+import Player from "../components/Player.vue";
+import SearchPreview from "../components/SearchPreview.vue";
+import { lectureListIsOpen, playlistsIsOpen } from "../stores/globalStore.ts";
+import Playlist from "../components/Playlist.vue";
+import LectureList from "../components/LectureList.vue";
+import {searchStore} from "../stores/dataStore.ts";
+
+const search = searchStore();
+const lectureList = lectureListIsOpen();
+const playlists = playlistsIsOpen();
+</script>
+
+<template>
+  <Header />
+  <InfoHeader />
+  <div class="content">
+  <Transition name="slide-up">
+    <component :is="search.searchQuery == '' ? Player : SearchPreview" />
+  </Transition>
+  </div>
+
+  <Transition name="popups">
+    <component :is="playlists.isOpen ? Playlist : ''" />
+  </Transition>
+  <Transition name="popups">
+    <component :is="lectureList.isOpen ? LectureList : ''" />
+  </Transition>
+</template>
+
+<style scoped>
+
+.content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  flex: 1 0 0;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.5s ease-in-out;
+}
+
+@keyframes slide-up {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.slide-up-enter-from {
+  transform: translateX(0);
+}
+.slide-up-leave-to {
+  transform: translateX(-100%);
+}
+
+.slide-up-leave-from {
+  transform: translateX(0);
+}
+.slide-up-enter-to {
+  transform: translateX(-100%);
+}
+
+
+
+.popups-enter-active {
+  animation: bounce-in 0.5s;
+}
+.popups-leave-active {
+  animation: bounce-in 0.5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0) translateX(-50%);
+    transform-origin: top right;
+  }
+  50% {
+    transform: scale(1.15) translateX(-50%);
+    transform-origin: top right;
+  }
+  100% {
+    transform: scale(1) translateX(-50%);
+    transform-origin: top right;
+  }
+}
+
+</style>
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+
+import SettingsHeader from "../components/SettingsHeader.vue";
+</script>
+
+<template>
+  <div class="settings">
+    <SettingsHeader />
+  </div>
+</template>
+
+<style scoped>
+.settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+
+  flex: 1 0 0;
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+</style>