subsonics/chopin
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add theme

Browse Source
This commit is contained in:
Gabriel Goldbronn
2025-05-03 12:56:10 +02:00
parent 448ec5c647
commit 64a2264c30
37 changed files with 376 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

47
.idea/workspace.xml generated
View File

@@ -5,15 +5,41 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment=""> <list default="true" id="5847035d-0a9b-4d26-a129-e3ed88eb8bd7" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/InPlayListIcon.vue" afterDir="false" /> <change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/DarkModeIcone.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/frontend/src/items/SwitchTab.vue" afterDir="false" /> <change afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/LightModeIcone.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/frontend/src/items/Button.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Global.scss" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Global.scss" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/assets/Global.scss" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Global.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/Trash.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/Trash.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/Add.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/Add.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/DefaultPlaylist.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/DefaultPlaylist.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/DotsMenu.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/DotsMenu.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/HandIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/HandIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/InPlayListIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/InPlayListIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/LeaveIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/LeaveIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/LectureListIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/LectureListIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/LogoIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/LogoIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/NextIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/NextIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/PauseIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/PauseIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/Play.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/Play.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/PlayIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/PlayIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/PlaylistIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/PlaylistIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/PrevIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/PrevIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/RepeatIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/RepeatIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/SearchIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/SearchIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/SetingsIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/SetingsIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/ShuffleIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/ShuffleIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/SoundIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/SoundIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/Top.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/Top.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/UserIcon.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/UserIcon.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/assets/Icons/YoutubePlaylist.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/assets/Icons/YoutubePlaylist.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/InfoHeader.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/InfoHeader.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/LectureList.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/Player.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Player.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/Playlist.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/Playlist.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/items/InputSearch.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/InputSearch.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/SearchPreview.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/SearchPreview.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/Miniature.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/items/SwitchTab.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/SwitchTab.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/items/UserLoginInfo.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/items/UserLoginInfo.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/stores/dataStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/stores/dataStore.ts" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -49,14 +75,15 @@
"RunOnceActivity.ShowReadmeOnStart": "true", "RunOnceActivity.ShowReadmeOnStart": "true",
"RunOnceActivity.git.unshallow": "true", "RunOnceActivity.git.unshallow": "true",
"git-widget-placeholder": "frontend-0.2.0", "git-widget-placeholder": "frontend-0.2.0",
"last_opened_file_path": "/Users/gabriel/Documents/Project/GitHub/chopin/frontend/src/assets/Icons", "last_opened_file_path": "/Users/gabriel/Codes/Project/GitHub/chopin",
"list.type.of.created.stylesheet": "SCSS", "list.type.of.created.stylesheet": "SCSS",
"node.js.detected.package.eslint": "true", "node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true", "node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)", "node.js.selected.package.eslint": "(autodetect)",
"node.js.selected.package.tslint": "(autodetect)", "node.js.selected.package.tslint": "(autodetect)",
"nodejs_package_manager_path": "npm", "nodejs_package_manager_path": "npm",
"ts.external.directory.path": "/Users/gabriel/Documents/Project/GitHub/chopin/frontend/node_modules/typescript/lib", "settings.editor.selected.configurable": "preferences.pluginManager",
"ts.external.directory.path": "/Users/gabriel/Codes/Project/GitHub/chopin/frontend/node_modules/typescript/lib",
"vue.rearranger.settings.migration": "true" "vue.rearranger.settings.migration": "true"
}, },
"keyToStringList": { "keyToStringList": {
@@ -104,7 +131,9 @@
<workItem from="1744218861266" duration="19000" /> <workItem from="1744218861266" duration="19000" />
<workItem from="1744793678915" duration="3951000" /> <workItem from="1744793678915" duration="3951000" />
<workItem from="1744962250986" duration="599000" /> <workItem from="1744962250986" duration="599000" />
<workItem from="1744963762669" duration="3595000" /> <workItem from="1744963762669" duration="7674000" />
<workItem from="1745243053934" duration="15721000" />
<workItem from="1746260006352" duration="5873000" />
</task> </task>
<servers /> <servers />
</component> </component>

98
frontend/src/assets/Global.scss
View File

@@ -1,15 +1,15 @@
:root { [data-theme='light'] {
--neutral-50: #FFFAFD; --neutral-50: #F6F7F6;
--neutral-100: #F4EFF2; --neutral-100: #E9EAE8;
--neutral-200: #E9E1E5; --neutral-200: #C9CBC4;
--neutral-300: #D9C8D0; --neutral-300: #A6A99F;
--neutral-400: #C0A6B2; --neutral-400: #81867B;
--neutral-500: #AB8998; --neutral-500: #686C60;
--neutral-600: #AB8998; --neutral-600: #51554C;
--neutral-700: #7C5A66; --neutral-700: #42463F;
--neutral-800: #684C55; --neutral-800: #373A35;
--neutral-900: #49373D; --neutral-900: #2A2B28;
--neutral-950: #332429; --neutral-950: #111210;
--primary-50: #FFF0F3; --primary-50: #FFF0F3;
@@ -25,6 +25,31 @@
--primary-950: #520021; --primary-950: #520021;
} }
[data-theme='dark'] {
--neutral-50: #111210;
--neutral-100: #2A2B28;
--neutral-200: #373A35;
--neutral-300: #42463F;
--neutral-400: #51554C;
--neutral-500: #686C60;
--neutral-600: #81867B;
--neutral-700: #A6A99F;
--neutral-800: #C9CBC4;
--neutral-900: #E9EAE8;
--neutral-950: #F6F7F6;
--primary-50: #520021;
--primary-100: #920945;
--primary-200: #AB064A;
--primary-300: #CD034F;
--primary-400: #ED0C5B;
--primary-500: #FF306F;
--primary-600: #ED0C5B;
--primary-700: #FF9CB6;
--primary-800: #FFC9D7;
--primary-900: #FFE2E8;
--primary-950: #FFF0F3;
}
/* width */ /* width */
@@ -49,7 +74,7 @@
background: var(--primary-700); background: var(--primary-700);
} }
body,p,html { body, p, html, button {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@@ -61,10 +86,11 @@ button {
} }
body{ body {
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
} }
#app { #app {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -78,6 +104,9 @@ body{
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
button {
color: var(--neutral-900);
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 0; margin: 0;
@@ -91,6 +120,7 @@ h1 {
font-size: 24px; font-size: 24px;
line-height: 29px; line-height: 29px;
} }
h2 { h2 {
font-size: 20px; font-size: 20px;
line-height: 20px; line-height: 20px;
@@ -111,4 +141,44 @@ p {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: normal; line-height: normal;
}
.iconDefault {
color: var(--neutral-950);
}
.iconDefaultStroke {
Stroke: var(--neutral-950);
}
.iconDefaultStrokeReverse {
stroke: var(--neutral-50);
}
.iconFixedStrokeWhite {
stroke: #F6F7F6;
}
.iconFixedStrokeBlack {
stroke: #111210;
}
.iconDefaultFill {
fill: var(--neutral-950);
}
.iconDefaultFillReverse {
fill: var(--neutral-50);
}
.iconFixedFillWhite {
fill: #F6F7F6;
}
.iconFixedFillBlack {
fill: #111210;
}
.colorFixedWhite {
color: #F6F7F6;
}
.colorFixedBlack {
color: #111210;
} }

2
frontend/src/assets/Icons/Add.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M5 12H19" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 5V19M5 12H19" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

15
frontend/src/assets/Icons/DarkModeIcone.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
</script>
<template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.8933 19.7197L18.0903 18.996L17.8933 19.7197ZM17.9409 20.0936L18.2697 20.7677L17.9409 20.0936ZM17.9409 3.9064L18.2697 3.23233L17.9409 3.9064ZM12.75 12C12.75 8.65778 15.0122 5.84201 18.0903 5.00396L17.6963 3.55664C13.982 4.56791 11.25 7.96395 11.25 12H12.75ZM18.0903 18.996C15.0122 18.158 12.75 15.3422 12.75 12H11.25C11.25 16.0361 13.982 19.4321 17.6963 20.4434L18.0903 18.996ZM17.6121 19.4195C16.522 19.9513 15.297 20.25 14 20.25V21.75C15.5298 21.75 16.9793 21.3971 18.2697 20.7677L17.6121 19.4195ZM14 20.25C9.44367 20.25 5.75002 16.5563 5.75002 12H4.25002C4.25002 17.3848 8.61525 21.75 14 21.75V20.25ZM5.75002 12C5.75002 7.44365 9.44367 3.75 14 3.75V2.25C8.61525 2.25 4.25002 6.61522 4.25002 12H5.75002ZM14 3.75C15.297 3.75 16.522 4.04874 17.6121 4.58047L18.2697 3.23233C16.9793 2.60286 15.5298 2.25 14 2.25V3.75ZM17.6963 20.4434C17.4677 20.3811 17.3292 20.1871 17.3033 19.9942C17.2762 19.7923 17.3692 19.538 17.6121 19.4195L18.2697 20.7677C18.6791 20.568 18.8378 20.1511 18.79 19.7947C18.7433 19.4473 18.4977 19.107 18.0903 18.996L17.6963 20.4434ZM18.0903 5.00396C18.4977 4.89304 18.7433 4.55271 18.79 4.20534C18.8378 3.84892 18.6791 3.43204 18.2697 3.23233L17.6121 4.58047C17.3692 4.46203 17.2762 4.20775 17.3033 4.00579C17.3292 3.81289 17.4677 3.61887 17.6963 3.55664L18.0903 5.00396Z"
class="iconDefaultFill"/>
/>
</svg>
</template>
<style scoped>
</style>

4
frontend/src/assets/Icons/DefaultPlaylist.vue
View File

@@ -4,8 +4,8 @@
<template> <template>
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="68" height="68" rx="14" stroke="#332429" stroke-width="2"/> <rect x="1" y="1" width="68" height="68" rx="14" class="iconDefaultStroke" stroke-width="2"/>
<path d="M32 41V29.3554C32 28.8738 32 28.6331 32.0876 28.4378C32.1648 28.2656 32.2892 28.1189 32.4463 28.0144C32.6245 27.8959 32.862 27.8563 33.337 27.7771L42.137 26.3105C42.7779 26.2036 43.0984 26.1502 43.3482 26.243C43.5674 26.3244 43.7511 26.48 43.8674 26.6829C44 26.914 44 27.2389 44 27.8887V39M32 41C32 42.6568 30.6568 44 29 44C27.3432 44 26 42.6568 26 41C26 39.3431 27.3432 38 29 38C30.6568 38 32 39.3431 32 41ZM44 39C44 40.6568 42.6569 42 41 42C39.3431 42 38 40.6568 38 39C38 37.3431 39.3431 36 41 36C42.6569 36 44 37.3431 44 39Z" stroke="#1F181A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M32 41V29.3554C32 28.8738 32 28.6331 32.0876 28.4378C32.1648 28.2656 32.2892 28.1189 32.4463 28.0144C32.6245 27.8959 32.862 27.8563 33.337 27.7771L42.137 26.3105C42.7779 26.2036 43.0984 26.1502 43.3482 26.243C43.5674 26.3244 43.7511 26.48 43.8674 26.6829C44 26.914 44 27.2389 44 27.8887V39M32 41C32 42.6568 30.6568 44 29 44C27.3432 44 26 42.6568 26 41C26 39.3431 27.3432 38 29 38C30.6568 38 32 39.3431 32 41ZM44 39C44 40.6568 42.6569 42 41 42C39.3431 42 38 40.6568 38 39C38 37.3431 39.3431 36 41 36C42.6569 36 44 37.3431 44 39Z" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

6
frontend/src/assets/Icons/DotsMenu.vue
View File

@@ -4,9 +4,9 @@
<template> <template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" stroke="#332429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" stroke="#332429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" stroke="#332429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/HandIcon.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.9 11.4444V14.2222M6.9 11.4444V4.77778C6.9 3.8573 7.66112 3.11111 8.6 3.11111C9.53888 3.11111 10.3 3.8573 10.3 4.77778M6.9 11.4444C6.9 10.524 6.13888 9.77778 5.2 9.77778C4.26112 9.77778 3.5 10.524 3.5 11.4444V13.6667C3.5 18.269 7.30558 22 12 22C16.6944 22 20.5 18.269 20.5 13.6667V8.11111C20.5 7.19064 19.7389 6.44444 18.8 6.44444C17.8611 6.44444 17.1 7.19064 17.1 8.11111M10.3 4.77778V10.8889M10.3 4.77778V3.66667C10.3 2.74619 11.0611 2 12 2C12.9389 2 13.7 2.74619 13.7 3.66667V4.77778M17.1 8.11111V4.77778C17.1 3.8573 16.3389 3.11111 15.4 3.11111C14.4611 3.11111 13.7 3.8573 13.7 4.77778M17.1 8.11111V10.8889M13.7 4.77778V10.8889" stroke="#1F181A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.9 11.4444V14.2222M6.9 11.4444V4.77778C6.9 3.8573 7.66112 3.11111 8.6 3.11111C9.53888 3.11111 10.3 3.8573 10.3 4.77778M6.9 11.4444C6.9 10.524 6.13888 9.77778 5.2 9.77778C4.26112 9.77778 3.5 10.524 3.5 11.4444V13.6667C3.5 18.269 7.30558 22 12 22C16.6944 22 20.5 18.269 20.5 13.6667V8.11111C20.5 7.19064 19.7389 6.44444 18.8 6.44444C17.8611 6.44444 17.1 7.19064 17.1 8.11111M10.3 4.77778V10.8889M10.3 4.77778V3.66667C10.3 2.74619 11.0611 2 12 2C12.9389 2 13.7 2.74619 13.7 3.66667V4.77778M17.1 8.11111V4.77778C17.1 3.8573 16.3389 3.11111 15.4 3.11111C14.4611 3.11111 13.7 3.8573 13.7 4.77778M17.1 8.11111V10.8889M13.7 4.77778V10.8889" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

4
frontend/src/assets/Icons/InPlayListIcon.vue
View File

@@ -4,8 +4,8 @@
<template> <template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 8.96536C9.5 8.48808 9.5 8.24944 9.59974 8.11621C9.68666 8.0001 9.81971 7.92747 9.96438 7.91713C10.1304 7.90528 10.3311 8.03432 10.7326 8.29242L15.4532 11.3271C15.8016 11.551 15.9758 11.663 16.0359 11.8054C16.0885 11.9298 16.0885 12.0702 16.0359 12.1946C15.9758 12.337 15.8016 12.449 15.4532 12.6729L10.7326 15.7076C10.3311 15.9657 10.1304 16.0948 9.96438 16.0829C9.81971 16.0726 9.68666 15.9999 9.59974 15.8838C9.5 15.7506 9.5 15.512 9.5 15.0347V8.96536Z" stroke="#332429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.5 8.96536C9.5 8.48808 9.5 8.24944 9.59974 8.11621C9.68666 8.0001 9.81971 7.92747 9.96438 7.91713C10.1304 7.90528 10.3311 8.03432 10.7326 8.29242L15.4532 11.3271C15.8016 11.551 15.9758 11.663 16.0359 11.8054C16.0885 11.9298 16.0885 12.0702 16.0359 12.1946C15.9758 12.337 15.8016 12.449 15.4532 12.6729L10.7326 15.7076C10.3311 15.9657 10.1304 16.0948 9.96438 16.0829C9.81971 16.0726 9.68666 15.9999 9.59974 15.8838C9.5 15.7506 9.5 15.512 9.5 15.0347V8.96536Z" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8Z" stroke="#332429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8Z" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

2
frontend/src/assets/Icons/LeaveIcon.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.47542 12.8632C4.44449 11.2623 3.67643 9.54134 3.17124 7.76144C3.01103 7.19699 2.93093 6.91477 2.9297 6.50182C2.92833 6.0436 3.08969 5.42311 3.31412 5.0236C3.51636 4.66357 3.78117 4.39876 4.3108 3.86913L4.46843 3.7115C4.99987 3.18006 5.2656 2.91433 5.55098 2.76999C6.11854 2.48292 6.7888 2.48292 7.35636 2.76999C7.64174 2.91433 7.90747 3.18006 8.43891 3.7115L8.63378 3.90637C8.98338 4.25597 9.15819 4.43078 9.27247 4.60656C9.70347 5.26945 9.70347 6.12403 9.27247 6.78692C9.15819 6.9627 8.98338 7.1375 8.63378 7.4871C8.51947 7.60142 8.46231 7.65857 8.41447 7.72539C8.24446 7.96281 8.18576 8.30707 8.26748 8.58743C8.29048 8.66632 8.32041 8.72867 8.38028 8.85337C8.50111 9.10503 8.62956 9.35395 8.76563 9.59979M11.1817 12.8181L11.2266 12.8632C12.4282 14.0648 13.7869 15.0136 15.2365 15.7096C15.3612 15.7694 15.4235 15.7994 15.5024 15.8224C15.7828 15.9041 16.127 15.8454 16.3644 15.6754C16.4313 15.6275 16.4884 15.5704 16.6027 15.4561C16.9523 15.1064 17.1271 14.9316 17.3029 14.8174C17.9658 14.3864 18.8204 14.3864 19.4833 14.8174C19.6591 14.9316 19.8339 15.1064 20.1835 15.4561L20.3783 15.6509C20.9098 16.1824 21.1755 16.4481 21.3198 16.7335C21.6069 17.301 21.6069 17.9713 21.3198 18.5389C21.1755 18.8242 20.9098 19.09 20.3783 19.6214L20.2207 19.779C19.6911 20.3087 19.4263 20.5735 19.0662 20.7757C18.6667 21.0001 18.0462 21.1615 17.588 21.1601C17.1751 21.1589 16.8928 21.0788 16.3284 20.9186C13.295 20.0576 10.4326 18.4332 8.04466 16.0452L7.99976 16.0001M20.9996 3.00012L2.99961 21.0001" stroke="#1F181A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.47542 12.8632C4.44449 11.2623 3.67643 9.54134 3.17124 7.76144C3.01103 7.19699 2.93093 6.91477 2.9297 6.50182C2.92833 6.0436 3.08969 5.42311 3.31412 5.0236C3.51636 4.66357 3.78117 4.39876 4.3108 3.86913L4.46843 3.7115C4.99987 3.18006 5.2656 2.91433 5.55098 2.76999C6.11854 2.48292 6.7888 2.48292 7.35636 2.76999C7.64174 2.91433 7.90747 3.18006 8.43891 3.7115L8.63378 3.90637C8.98338 4.25597 9.15819 4.43078 9.27247 4.60656C9.70347 5.26945 9.70347 6.12403 9.27247 6.78692C9.15819 6.9627 8.98338 7.1375 8.63378 7.4871C8.51947 7.60142 8.46231 7.65857 8.41447 7.72539C8.24446 7.96281 8.18576 8.30707 8.26748 8.58743C8.29048 8.66632 8.32041 8.72867 8.38028 8.85337C8.50111 9.10503 8.62956 9.35395 8.76563 9.59979M11.1817 12.8181L11.2266 12.8632C12.4282 14.0648 13.7869 15.0136 15.2365 15.7096C15.3612 15.7694 15.4235 15.7994 15.5024 15.8224C15.7828 15.9041 16.127 15.8454 16.3644 15.6754C16.4313 15.6275 16.4884 15.5704 16.6027 15.4561C16.9523 15.1064 17.1271 14.9316 17.3029 14.8174C17.9658 14.3864 18.8204 14.3864 19.4833 14.8174C19.6591 14.9316 19.8339 15.1064 20.1835 15.4561L20.3783 15.6509C20.9098 16.1824 21.1755 16.4481 21.3198 16.7335C21.6069 17.301 21.6069 17.9713 21.3198 18.5389C21.1755 18.8242 20.9098 19.09 20.3783 19.6214L20.2207 19.779C19.6911 20.3087 19.4263 20.5735 19.0662 20.7757C18.6667 21.0001 18.0462 21.1615 17.588 21.1601C17.1751 21.1589 16.8928 21.0788 16.3284 20.9186C13.295 20.0576 10.4326 18.4332 8.04466 16.0452L7.99976 16.0001M20.9996 3.00012L2.99961 21.0001" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/LectureListIcon.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12H9M21 6H9M21 18H9M5 12C5 12.5523 4.55228 13 4 13C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11C4.55228 11 5 11.4477 5 12ZM5 6C5 6.55228 4.55228 7 4 7C3.44772 7 3 6.55228 3 6C3 5.44772 3.44772 5 4 5C4.55228 5 5 5.44772 5 6ZM5 18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18C3 17.4477 3.44772 17 4 17C4.55228 17 5 17.4477 5 18Z" stroke="#FFFAFD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 12H9M21 6H9M21 18H9M5 12C5 12.5523 4.55228 13 4 13C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11C4.55228 11 5 11.4477 5 12ZM5 6C5 6.55228 4.55228 7 4 7C3.44772 7 3 6.55228 3 6C3 5.44772 3.44772 5 4 5C4.55228 5 5 5.44772 5 6ZM5 18C5 18.5523 4.55228 19 4 19C3.44772 19 3 18.5523 3 18C3 17.4477 3.44772 17 4 17C4.55228 17 5 17.4477 5 18Z" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

21
frontend/src/assets/Icons/LightModeIcone.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup lang="ts">
</script>
<template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12.007" r="5" class="iconDefaultStroke" stroke-width="1.5"/>
<path d="M12 2.68144V4.68144" class="iconDefaultStroke" stroke-width="1.5" stroke-linecap="round"/>
<path d="M18.5919 18.5957L17.1777 17.1815" class="iconDefaultStroke" stroke-width="1.5" stroke-linecap="round"/>
<path d="M18.5919 5.41191L17.1777 6.82612" class="iconDefaultStroke" stroke-width="1.5" stroke-linecap="round"/>
<path d="M21.3224 12.0038L19.3224 12.0038" class="iconDefaultStroke" stroke-width="1.5" stroke-linecap="round"/>
<path d="M12 19.3262V21.3262" class="iconDefaultStroke" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.8223 6.82611L5.40808 5.4119" class="iconDefaultStroke" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6.8223 17.1815L5.40808 18.5957" class="iconDefaultStroke" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4.67761 12.0038L2.67761 12.0038" class="iconDefaultStroke" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</template>
<style scoped>
</style>

22
frontend/src/assets/Icons/LogoIcon.vue
View File

@@ -3,22 +3,22 @@
</script> </script>
<template> <template>
<svg class="icon" width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="48" height="47" viewBox="0 0 48 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_524_453" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="47"> <mask id="mask0_524_487" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="47">
<path d="M47.5 0H0.5V47H47.5V0Z" fill="white"/> <path d="M47.5 0H0.5V47H47.5V0Z" fill="white"/>
</mask> </mask>
<g mask="url(#mask0_524_453)"> <g mask="url(#mask0_524_487)">
<mask id="mask1_524_453" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-6" y="-7" width="45" height="46"> <mask id="mask1_524_487" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-6" y="-7" width="45" height="46">
<path d="M6.97289 38.8532L-5.98878 26.1157L26.0299 -6.4668L38.9916 6.27061L6.97289 38.8532ZM18.8607 22.2424L32.0715 8.86633C25.6439 8.66705 13.4832 10.1001 13.5902 17.1493C13.8886 21.0112 18.8607 22.2424 18.8607 22.2424Z" fill="white"/> <path d="M6.97291 38.8533L-5.98877 26.1158L26.0299 -6.46667L38.9916 6.27073L6.97291 38.8533ZM18.8607 22.2425L32.0715 8.86645C25.6439 8.66717 13.4832 10.1002 13.5902 17.1495C13.8886 21.0113 18.8607 22.2425 18.8607 22.2425Z" fill="white"/>
</mask> </mask>
<g mask="url(#mask1_524_453)"> <g mask="url(#mask1_524_487)">
<path d="M35.1468 9.18064L20.6082 24.064C20.6082 24.064 8.48459 22.6092 7.88379 15.9577C8.06894 4.26227 30.2957 4.20898 38.2291 6.27726L35.1468 9.18064Z" fill="#332429"/> <path d="M35.1468 9.18089L20.6082 24.0642C20.6082 24.0642 8.48459 22.6094 7.88379 15.958C8.06894 4.26251 30.2957 4.20923 38.2291 6.27751L35.1468 9.18089Z" class="iconDefaultFill"/>
</g> </g>
<mask id="mask2_524_453" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="6" width="46" height="46"> <mask id="mask2_524_487" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="6" width="46" height="46">
<path d="M38.9891 6.2666L51.9507 19.0041L19.932 51.5865L6.97034 38.849L38.9891 6.2666ZM27.1012 22.8772L13.8905 36.2534C20.318 36.4527 32.4788 35.0196 32.3718 27.9704C32.0733 24.1086 27.1012 22.8772 27.1012 22.8772Z" fill="white"/> <path d="M38.9891 6.26685L51.9507 19.0043L19.932 51.5868L6.97034 38.8493L38.9891 6.26685ZM27.1012 22.8774L13.8905 36.2536C20.318 36.4529 32.4788 35.0199 32.3718 27.9707C32.0733 24.1088 27.1012 22.8774 27.1012 22.8774Z" fill="white"/>
</mask> </mask>
<g mask="url(#mask2_524_453)"> <g mask="url(#mask2_524_487)">
<path d="M39.0471 7.07959L40.7192 8.90855L28.8153 21.0576C28.8153 21.0576 37.4774 22.5107 38.0782 29.1621C37.8931 40.8576 15.6663 40.9109 7.73279 38.8426L39.0471 7.07959Z" fill="#ED0C5B"/> <path d="M39.0471 7.07983L40.7192 8.90879L28.8153 21.0579C28.8153 21.0579 37.4774 22.511 38.0782 29.1624C37.8931 40.8579 15.6663 40.9111 7.73279 38.8428L39.0471 7.07983Z" fill="#ED0C5B"/>
</g> </g>
</g> </g>
</svg> </svg>

4
frontend/src/assets/Icons/NextIcon.vue
View File

@@ -4,8 +4,8 @@
<template> <template>
<svg class="icon" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.45308 5.03587C5.79455 4.53629 4.84869 5.00598 4.84869 5.83256V19.7773C4.84869 20.6039 5.79455 21.0736 6.45308 20.574L15.6439 13.6016C16.1714 13.2015 16.1714 12.4084 15.6439 12.0082L6.45308 5.03587ZM2.84869 5.83256C2.84869 3.35282 5.68627 1.94376 7.66185 3.44248L16.8527 10.4149C18.4352 11.6153 18.4352 13.9945 16.8527 15.195L7.66185 22.1674C5.68627 23.6661 2.84869 22.257 2.84869 19.7773V5.83256Z" fill="#FF306F"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M6.45308 5.03587C5.79455 4.53629 4.84869 5.00598 4.84869 5.83256V19.7773C4.84869 20.6039 5.79455 21.0736 6.45308 20.574L15.6439 13.6016C16.1714 13.2015 16.1714 12.4084 15.6439 12.0082L6.45308 5.03587ZM2.84869 5.83256C2.84869 3.35282 5.68627 1.94376 7.66185 3.44248L16.8527 10.4149C18.4352 11.6153 18.4352 13.9945 16.8527 15.195L7.66185 22.1674C5.68627 23.6661 2.84869 22.257 2.84869 19.7773V5.83256Z" class="iconDefaultFill"/>
<path d="M20.8487 3.80493C20.8487 3.25265 21.2964 2.80493 21.8487 2.80493C22.401 2.80493 22.8487 3.25265 22.8487 3.80493V21.8049C22.8487 22.3572 22.401 22.8049 21.8487 22.8049C21.2964 22.8049 20.8487 22.3572 20.8487 21.8049V3.80493Z" fill="#FF306F"/> <path d="M20.8487 3.80493C20.8487 3.25265 21.2964 2.80493 21.8487 2.80493C22.401 2.80493 22.8487 3.25265 22.8487 3.80493V21.8049C22.8487 22.3572 22.401 22.8049 21.8487 22.8049C21.2964 22.8049 20.8487 22.3572 20.8487 21.8049V3.80493Z" class="iconDefaultFill"/>
</svg> </svg>
</template> </template>

4
frontend/src/assets/Icons/PauseIcon.vue
View File

@@ -4,8 +4,8 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4.5" y="3.99951" width="6" height="16" rx="1" stroke="#FFFAFD" stroke-width="1.5"/> <rect x="4.5" y="3.99951" width="6" height="16" rx="1" class="iconFixedStrokeWhite" stroke-width="1.5"/>
<rect x="13.5" y="3.99951" width="6" height="16" rx="1" stroke="#FFFAFD" stroke-width="1.5"/> <rect x="13.5" y="3.99951" width="6" height="16" rx="1" class="iconFixedStrokeWhite" stroke-width="1.5"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/Play.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/PlayIcon.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z" stroke="#FFFAFD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/PlaylistIcon.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 18V6.35537C9 5.87383 9 5.63306 9.0876 5.43778C9.16482 5.26565 9.28917 5.11887 9.44627 5.0144C9.62449 4.89588 9.86198 4.8563 10.337 4.77714L19.137 3.31047C19.7779 3.20364 20.0984 3.15023 20.3482 3.243C20.5674 3.32441 20.7511 3.48005 20.8674 3.68286C21 3.91398 21 4.23889 21 4.8887V16M9 18C9 19.6568 7.65685 21 6 21C4.34315 21 3 19.6568 3 18C3 16.3431 4.34315 15 6 15C7.65685 15 9 16.3431 9 18ZM21 16C21 17.6568 19.6569 19 18 19C16.3431 19 15 17.6568 15 16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16Z" stroke="#FFFAFD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 18V6.35537C9 5.87383 9 5.63306 9.0876 5.43778C9.16482 5.26565 9.28917 5.11887 9.44627 5.0144C9.62449 4.89588 9.86198 4.8563 10.337 4.77714L19.137 3.31047C19.7779 3.20364 20.0984 3.15023 20.3482 3.243C20.5674 3.32441 20.7511 3.48005 20.8674 3.68286C21 3.91398 21 4.23889 21 4.8887V16M9 18C9 19.6568 7.65685 21 6 21C4.34315 21 3 19.6568 3 18C3 16.3431 4.34315 15 6 15C7.65685 15 9 16.3431 9 18ZM21 16C21 17.6568 19.6569 19 18 19C16.3431 19 15 17.6568 15 16C15 14.3431 16.3431 13 18 13C19.6569 13 21 14.3431 21 16Z" class="iconFixedStrokeWhite" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

4
frontend/src/assets/Icons/PrevIcon.vue
View File

@@ -4,8 +4,8 @@
<template> <template>
<svg class="icon" width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="29" height="25" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.6129 20.574C22.3812 21.0736 23.4847 20.6039 23.4847 19.7773L23.4847 5.83257C23.4847 5.00599 22.3812 4.53631 21.6129 5.03588L10.8902 12.0083C10.2748 12.4084 10.2748 13.2015 10.8902 13.6016L21.6129 20.574ZM25.818 19.7773C25.818 22.2571 22.5075 23.6661 20.2026 22.1674L9.47996 15.195C7.63377 13.9945 7.63377 11.6154 9.47997 10.4149L20.2026 3.4425C22.5075 1.94378 25.818 3.35283 25.818 5.83257L25.818 19.7773Z" fill="#FF306F"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M21.6129 20.574C22.3812 21.0736 23.4847 20.6039 23.4847 19.7773L23.4847 5.83257C23.4847 5.00599 22.3812 4.53631 21.6129 5.03588L10.8902 12.0083C10.2748 12.4084 10.2748 13.2015 10.8902 13.6016L21.6129 20.574ZM25.818 19.7773C25.818 22.2571 22.5075 23.6661 20.2026 22.1674L9.47996 15.195C7.63377 13.9945 7.63377 11.6154 9.47997 10.4149L20.2026 3.4425C22.5075 1.94378 25.818 3.35283 25.818 5.83257L25.818 19.7773Z" class="iconDefaultFill"/>
<path d="M2.48465 3.80493C2.48465 3.25265 3.00698 2.80493 3.65132 2.80493C4.29565 2.80493 4.81798 3.25265 4.81798 3.80493V21.8049C4.81798 22.3572 4.29565 22.8049 3.65132 22.8049C3.00698 22.8049 2.48465 22.3572 2.48465 21.8049V3.80493Z" fill="#FF306F"/> <path d="M2.48465 3.80493C2.48465 3.25265 3.00698 2.80493 3.65132 2.80493C4.29565 2.80493 4.81798 3.25265 4.81798 3.80493V21.8049C4.81798 22.3572 4.29565 22.8049 3.65132 22.8049C3.00698 22.8049 2.48465 22.3572 2.48465 21.8049V3.80493Z" class="iconDefaultFill"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/RepeatIcon.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 20.5001C16.6944 20.5001 20.5 16.6945 20.5 12.0001C20.5 9.17456 19.1213 6.67103 17 5.1255M13 22.4001L11 20.4001L13 18.4001M12 3.5001C7.30558 3.5001 3.5 7.30568 3.5 12.0001C3.5 14.8256 4.87867 17.3292 7 18.8747M11 5.6001L13 3.6001L11 1.6001" stroke="#1F181A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 20.5001C16.6944 20.5001 20.5 16.6945 20.5 12.0001C20.5 9.17456 19.1213 6.67103 17 5.1255M13 22.4001L11 20.4001L13 18.4001M12 3.5001C7.30558 3.5001 3.5 7.30568 3.5 12.0001C3.5 14.8256 4.87867 17.3292 7 18.8747M11 5.6001L13 3.6001L11 1.6001" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/SearchIcon.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.0392 15.6244C18.2714 14.084 19.0082 12.1301 19.0082 10.0041C19.0082 5.03127 14.9769 1 10.0041 1C5.03127 1 1 5.03127 1 10.0041C1 14.9769 5.03127 19.0082 10.0041 19.0082C12.1301 19.0082 14.084 18.2714 15.6244 17.0392L21.2921 22.707C21.6828 23.0977 22.3163 23.0977 22.707 22.707C23.0977 22.3163 23.0977 21.6828 22.707 21.2921L17.0392 15.6244ZM10.0041 17.0173C6.1308 17.0173 2.99087 13.8774 2.99087 10.0041C2.99087 6.1308 6.1308 2.99087 10.0041 2.99087C13.8774 2.99087 17.0173 6.1308 17.0173 10.0041C17.0173 13.8774 13.8774 17.0173 10.0041 17.0173Z" fill="#332429"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0392 15.6244C18.2714 14.084 19.0082 12.1301 19.0082 10.0041C19.0082 5.03127 14.9769 1 10.0041 1C5.03127 1 1 5.03127 1 10.0041C1 14.9769 5.03127 19.0082 10.0041 19.0082C12.1301 19.0082 14.084 18.2714 15.6244 17.0392L21.2921 22.707C21.6828 23.0977 22.3163 23.0977 22.707 22.707C23.0977 22.3163 23.0977 21.6828 22.707 21.2921L17.0392 15.6244ZM10.0041 17.0173C6.1308 17.0173 2.99087 13.8774 2.99087 10.0041C2.99087 6.1308 6.1308 2.99087 10.0041 2.99087C13.8774 2.99087 17.0173 6.1308 17.0173 10.0041C17.0173 13.8774 13.8774 17.0173 10.0041 17.0173Z" class="iconDefaultFill"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/SetingsIcon.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg class="icon" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 8.5H15.5M15.5 8.5C15.5 10.1569 16.8431 11.5 18.5 11.5C20.1569 11.5 21.5 10.1568 21.5 8.5C21.5 6.84315 20.1569 5.5 18.5 5.5C16.8431 5.5 15.5 6.84315 15.5 8.5ZM9.5 16.5H21.5M9.5 16.5C9.5 18.1569 8.15685 19.5 6.5 19.5C4.84315 19.5 3.5 18.1569 3.5 16.5C3.5 14.8431 4.84315 13.5 6.5 13.5C8.15685 13.5 9.5 14.8431 9.5 16.5Z" stroke="#332429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3.5 8.5H15.5M15.5 8.5C15.5 10.1569 16.8431 11.5 18.5 11.5C20.1569 11.5 21.5 10.1568 21.5 8.5C21.5 6.84315 20.1569 5.5 18.5 5.5C16.8431 5.5 15.5 6.84315 15.5 8.5ZM9.5 16.5H21.5M9.5 16.5C9.5 18.1569 8.15685 19.5 6.5 19.5C4.84315 19.5 3.5 18.1569 3.5 16.5C3.5 14.8431 4.84315 13.5 6.5 13.5C8.15685 13.5 9.5 14.8431 9.5 16.5Z" class="iconDefaultStroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

6
frontend/src/assets/Icons/ShuffleIcon.vue
View File

@@ -4,9 +4,9 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.448 2.03365C17.8385 1.64318 18.4716 1.64305 18.8621 2.03343L21.4146 4.58486C22.1959 5.36587 22.1961 6.63242 21.4149 7.41358L18.8675 9.96097C18.477 10.3515 17.8438 10.3515 17.4533 9.96097C17.0628 9.57045 17.0628 8.93728 17.4533 8.54676L19 7.00003H14.2361C13.8573 7.00003 13.511 7.21403 13.3416 7.55282L11.8954 10.4452L10.7699 8.2242L11.5528 6.65839C12.061 5.64204 13.0998 5.00003 14.2361 5.00003H19L17.4479 3.44794C17.0574 3.05741 17.0575 2.42418 17.448 2.03365Z" fill="#332429"/> <path d="M17.448 2.03365C17.8385 1.64318 18.4716 1.64305 18.8621 2.03343L21.4146 4.58486C22.1959 5.36587 22.1961 6.63242 21.4149 7.41358L18.8675 9.96097C18.477 10.3515 17.8438 10.3515 17.4533 9.96097C17.0628 9.57045 17.0628 8.93728 17.4533 8.54676L19 7.00003H14.2361C13.8573 7.00003 13.511 7.21403 13.3416 7.55282L11.8954 10.4452L10.7699 8.2242L11.5528 6.65839C12.061 5.64204 13.0998 5.00003 14.2361 5.00003H19L17.4479 3.44794C17.0574 3.05741 17.0575 2.42418 17.448 2.03365Z" class="iconDefaultFill"/>
<path d="M17.448 14.0337C17.8385 13.6432 18.4716 13.643 18.8621 14.0334L21.4146 16.5849C22.1959 17.3659 22.1961 18.6324 21.4149 19.4136L18.8675 21.961C18.477 22.3515 17.8438 22.3515 17.4533 21.961C17.0628 21.5704 17.0628 20.9373 17.4533 20.5468L19 19H14.2361C13.0998 19 12.061 18.358 11.5528 17.3417L6.65836 7.55282C6.48897 7.21403 6.1427 7.00003 5.76393 7.00003H3C2.44772 7.00003 2 6.55232 2 6.00003C2 5.44775 2.44772 5.00003 3 5.00003H5.76393C6.90025 5.00003 7.93904 5.64204 8.44721 6.65839L13.3416 16.4472C13.511 16.786 13.8573 17 14.2361 17H19L17.4479 15.4479C17.0574 15.0574 17.0575 14.4242 17.448 14.0337Z" fill="#332429"/> <path d="M17.448 14.0337C17.8385 13.6432 18.4716 13.643 18.8621 14.0334L21.4146 16.5849C22.1959 17.3659 22.1961 18.6324 21.4149 19.4136L18.8675 21.961C18.477 22.3515 17.8438 22.3515 17.4533 21.961C17.0628 21.5704 17.0628 20.9373 17.4533 20.5468L19 19H14.2361C13.0998 19 12.061 18.358 11.5528 17.3417L6.65836 7.55282C6.48897 7.21403 6.1427 7.00003 5.76393 7.00003H3C2.44772 7.00003 2 6.55232 2 6.00003C2 5.44775 2.44772 5.00003 3 5.00003H5.76393C6.90025 5.00003 7.93904 5.64204 8.44721 6.65839L13.3416 16.4472C13.511 16.786 13.8573 17 14.2361 17H19L17.4479 15.4479C17.0574 15.0574 17.0575 14.4242 17.448 14.0337Z" class="iconDefaultFill"/>
<path d="M8.12308 13.5178L9.24864 15.7388L8.44721 17.3417C7.93904 18.358 6.90025 19 5.76393 19H3C2.44772 19 2 18.5523 2 18C2 17.4477 2.44772 17 3 17H5.76393C6.1427 17 6.48897 16.786 6.65836 16.4472L8.12308 13.5178Z" fill="#332429"/> <path d="M8.12308 13.5178L9.24864 15.7388L8.44721 17.3417C7.93904 18.358 6.90025 19 5.76393 19H3C2.44772 19 2 18.5523 2 18C2 17.4477 2.44772 17 3 17H5.76393C6.1427 17 6.48897 16.786 6.65836 16.4472L8.12308 13.5178Z" class="iconDefaultFill"/>
</svg> </svg>
</template> </template>

6
frontend/src/assets/Icons/SoundIcon.vue
View File

@@ -4,9 +4,9 @@
<template> <template>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4 1.79997C11.5532 0.262345 14 1.07796 14 2.99998V21.1214C14 23.0539 11.5313 23.8627 10.3878 22.3049L6.49356 17H4C2.34315 17 1 15.6568 1 14V9.99997C1 8.34312 2.34315 6.99997 4 6.99997H6.5L10.4 1.79997ZM12 2.99997L8.1 8.19997C7.72229 8.70358 7.12951 8.99997 6.5 8.99997H4C3.44772 8.99997 3 9.44769 3 9.99997V14C3 14.5523 3.44772 15 4 15H6.49356C7.13031 15 7.72901 15.3032 8.10581 15.8165L12 21.1214V2.99997Z" fill="#332429"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4 1.79997C11.5532 0.262345 14 1.07796 14 2.99998V21.1214C14 23.0539 11.5313 23.8627 10.3878 22.3049L6.49356 17H4C2.34315 17 1 15.6568 1 14V9.99997C1 8.34312 2.34315 6.99997 4 6.99997H6.5L10.4 1.79997ZM12 2.99997L8.1 8.19997C7.72229 8.70358 7.12951 8.99997 6.5 8.99997H4C3.44772 8.99997 3 9.44769 3 9.99997V14C3 14.5523 3.44772 15 4 15H6.49356C7.13031 15 7.72901 15.3032 8.10581 15.8165L12 21.1214V2.99997Z" class="iconDefaultFill"/>
<path d="M16.2137 4.17442C16.1094 3.56448 16.5773 2.99997 17.1961 2.99997C17.6635 2.99997 18.0648 3.32797 18.1464 3.78821C18.4242 5.35344 19 8.96462 19 12C19 15.0353 18.4242 18.6465 18.1464 20.2117C18.0648 20.672 17.6635 21 17.1961 21C16.5773 21 16.1094 20.4355 16.2137 19.8255C16.5074 18.1073 17 14.8073 17 12C17 9.19261 16.5074 5.89267 16.2137 4.17442Z" fill="#332429"/> <path d="M16.2137 4.17442C16.1094 3.56448 16.5773 2.99997 17.1961 2.99997C17.6635 2.99997 18.0648 3.32797 18.1464 3.78821C18.4242 5.35344 19 8.96462 19 12C19 15.0353 18.4242 18.6465 18.1464 20.2117C18.0648 20.672 17.6635 21 17.1961 21C16.5773 21 16.1094 20.4355 16.2137 19.8255C16.5074 18.1073 17 14.8073 17 12C17 9.19261 16.5074 5.89267 16.2137 4.17442Z" class="iconDefaultFill"/>
<path d="M21.41 4.99997C20.7346 4.99997 20.2402 5.69394 20.3966 6.35095C20.6758 7.5241 21 9.43787 21 12C21 14.5621 20.6758 16.4758 20.3966 17.649C20.2402 18.306 20.7346 19 21.41 19C21.7716 19 22.0974 18.7944 22.2101 18.4508C22.5034 17.5569 23 15.5233 23 12C23 8.47669 22.5034 6.44303 22.2101 5.5491C22.0974 5.20553 21.7716 4.99997 21.41 4.99997Z" fill="#332429"/> <path d="M21.41 4.99997C20.7346 4.99997 20.2402 5.69394 20.3966 6.35095C20.6758 7.5241 21 9.43787 21 12C21 14.5621 20.6758 16.4758 20.3966 17.649C20.2402 18.306 20.7346 19 21.41 19C21.7716 19 22.0974 18.7944 22.2101 18.4508C22.5034 17.5569 23 15.5233 23 12C23 8.47669 22.5034 6.44303 22.2101 5.5491C22.0974 5.20553 21.7716 4.99997 21.41 4.99997Z" class="iconDefaultFill"/>
</svg> </svg>
</template> </template>

2
frontend/src/assets/Icons/Top.vue
View File

@@ -4,7 +4,7 @@
<template> <template>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 3H3M12 21V7M12 7L5 14M12 7L19 14" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 3H3M12 21V7M12 7L5 14M12 7L19 14" class="iconDefaultStrokeReverse" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
</template> </template>

4
frontend/src/assets/Icons/UserIcon.vue
View File

@@ -4,8 +4,8 @@
<template> <template>
<svg class="icon" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="icon" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 5.50008C6.65059 5.50008 7.58333 4.47407 7.58333 3.20841C7.58333 1.94276 6.65059 0.916748 5.5 0.916748C4.34941 0.916748 3.41667 1.94276 3.41667 3.20841C3.41667 4.47407 4.34941 5.50008 5.5 5.50008ZM5.5 4.58341C4.80964 4.58341 4.25 3.96781 4.25 3.20841C4.25 2.44902 4.80964 1.83341 5.5 1.83341C6.19036 1.83341 6.75 2.44902 6.75 3.20841C6.75 3.96781 6.19036 4.58341 5.5 4.58341Z" fill="#FFFAFD"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 5.50008C6.65059 5.50008 7.58333 4.47407 7.58333 3.20841C7.58333 1.94276 6.65059 0.916748 5.5 0.916748C4.34941 0.916748 3.41667 1.94276 3.41667 3.20841C3.41667 4.47407 4.34941 5.50008 5.5 5.50008ZM5.5 4.58341C4.80964 4.58341 4.25 3.96781 4.25 3.20841C4.25 2.44902 4.80964 1.83341 5.5 1.83341C6.19036 1.83341 6.75 2.44902 6.75 3.20841C6.75 3.96781 6.19036 4.58341 5.5 4.58341Z" class="iconFixedFillWhite"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.45953 6.3787C8.10851 6.0265 7.56541 5.95053 7.13172 6.20787C7.05237 6.25495 6.98255 6.29804 6.91817 6.33778C6.74736 6.44319 6.6148 6.525 6.4439 6.59522C6.22917 6.68345 5.95145 6.75009 5.5 6.75009C5.05284 6.75009 4.77052 6.6872 4.55254 6.60205C4.35981 6.52676 4.20759 6.43217 4.00702 6.30752C3.9679 6.28321 3.92687 6.25771 3.88341 6.23103C3.44828 5.96392 2.88943 6.02599 2.52673 6.39254C2.36851 6.55243 2.18348 6.75921 2.03537 6.98451C1.89418 7.19929 1.75 7.48499 1.75 7.79175V8.83354C1.75 9.52398 2.30972 10.0834 3 10.0834H8C8.69028 10.0834 9.25 9.52398 9.25 8.83354V7.79175C9.25 7.48095 9.10197 7.19141 8.95815 6.9747C8.80707 6.74706 8.61883 6.53855 8.45953 6.3787ZM7.55696 6.92453C7.65662 6.8654 7.78251 6.8799 7.86928 6.96696C8.00893 7.10709 8.15517 7.2718 8.26381 7.43551C8.37971 7.61015 8.41667 7.73008 8.41667 7.79175V8.83354C8.41667 9.06358 8.2302 9.25009 8 9.25009H3C2.7698 9.25009 2.58333 9.06358 2.58333 8.83354V7.79175C2.58333 7.7313 2.61895 7.61381 2.73172 7.44227C2.83757 7.28125 2.98066 7.11857 3.11908 6.97869C3.20588 6.89096 3.33794 6.87401 3.44745 6.94123C3.48192 6.96239 3.51703 6.98431 3.55289 7.0067C3.75391 7.13219 3.97883 7.27259 4.24932 7.37826C4.58043 7.50761 4.96841 7.58342 5.5 7.58342C6.04175 7.58342 6.42971 7.50198 6.7606 7.36603C7.00025 7.26757 7.21164 7.13683 7.39827 7.02141C7.45329 6.98738 7.50616 6.95468 7.55696 6.92453Z" fill="#FFFAFD"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.45953 6.3787C8.10851 6.0265 7.56541 5.95053 7.13172 6.20787C7.05237 6.25495 6.98255 6.29804 6.91817 6.33778C6.74736 6.44319 6.6148 6.525 6.4439 6.59522C6.22917 6.68345 5.95145 6.75009 5.5 6.75009C5.05284 6.75009 4.77052 6.6872 4.55254 6.60205C4.35981 6.52676 4.20759 6.43217 4.00702 6.30752C3.9679 6.28321 3.92687 6.25771 3.88341 6.23103C3.44828 5.96392 2.88943 6.02599 2.52673 6.39254C2.36851 6.55243 2.18348 6.75921 2.03537 6.98451C1.89418 7.19929 1.75 7.48499 1.75 7.79175V8.83354C1.75 9.52398 2.30972 10.0834 3 10.0834H8C8.69028 10.0834 9.25 9.52398 9.25 8.83354V7.79175C9.25 7.48095 9.10197 7.19141 8.95815 6.9747C8.80707 6.74706 8.61883 6.53855 8.45953 6.3787ZM7.55696 6.92453C7.65662 6.8654 7.78251 6.8799 7.86928 6.96696C8.00893 7.10709 8.15517 7.2718 8.26381 7.43551C8.37971 7.61015 8.41667 7.73008 8.41667 7.79175V8.83354C8.41667 9.06358 8.2302 9.25009 8 9.25009H3C2.7698 9.25009 2.58333 9.06358 2.58333 8.83354V7.79175C2.58333 7.7313 2.61895 7.61381 2.73172 7.44227C2.83757 7.28125 2.98066 7.11857 3.11908 6.97869C3.20588 6.89096 3.33794 6.87401 3.44745 6.94123C3.48192 6.96239 3.51703 6.98431 3.55289 7.0067C3.75391 7.13219 3.97883 7.27259 4.24932 7.37826C4.58043 7.50761 4.96841 7.58342 5.5 7.58342C6.04175 7.58342 6.42971 7.50198 6.7606 7.36603C7.00025 7.26757 7.21164 7.13683 7.39827 7.02141C7.45329 6.98738 7.50616 6.95468 7.55696 6.92453Z" class="iconFixedFillWhite"/>
</svg> </svg>
</template> </template>

4
frontend/src/assets/Icons/YoutubePlaylist.vue
View File

@@ -4,8 +4,8 @@
<template> <template>
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="68" height="68" rx="14" stroke="#332429" stroke-width="2"/> <rect x="1" y="1" width="68" height="68" rx="14" class="iconDefaultStroke" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0018 24.4053C21.8356 24.5127 20.0955 26.2088 19.9549 28.3731C19.8202 30.4466 19.6875 32.9981 19.6875 35C19.6875 37.0019 19.8202 39.5534 19.9549 41.6269C20.0955 43.7912 21.8356 45.4874 24.0018 45.5947C27.1385 45.7501 31.6219 45.9375 35 45.9375C38.3781 45.9375 42.8615 45.7501 45.9982 45.5947C48.1644 45.4874 49.9045 43.7912 50.0451 41.6269C50.1798 39.5534 50.3125 37.0019 50.3125 35C50.3125 32.9981 50.1798 30.4466 50.0451 28.3731C49.9045 26.2088 48.1644 24.5127 45.9982 24.4053C42.8615 24.2499 38.3781 24.0625 35 24.0625C31.6219 24.0625 27.1385 24.2499 24.0018 24.4053ZM39.4375 35.4375L30.6875 39.8125V31.0625L39.4375 35.4375Z" fill="#332429"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M24.0018 24.4053C21.8356 24.5127 20.0955 26.2088 19.9549 28.3731C19.8202 30.4466 19.6875 32.9981 19.6875 35C19.6875 37.0019 19.8202 39.5534 19.9549 41.6269C20.0955 43.7912 21.8356 45.4874 24.0018 45.5947C27.1385 45.7501 31.6219 45.9375 35 45.9375C38.3781 45.9375 42.8615 45.7501 45.9982 45.5947C48.1644 45.4874 49.9045 43.7912 50.0451 41.6269C50.1798 39.5534 50.3125 37.0019 50.3125 35C50.3125 32.9981 50.1798 30.4466 50.0451 28.3731C49.9045 26.2088 48.1644 24.5127 45.9982 24.4053C42.8615 24.2499 38.3781 24.0625 35 24.0625C31.6219 24.0625 27.1385 24.2499 24.0018 24.4053ZM39.4375 35.4375L30.6875 39.8125V31.0625L39.4375 35.4375Z" class="iconDefaultFill"/>
</svg> </svg>
</template> </template>

43
frontend/src/components/InfoHeader.vue
View File

@@ -3,6 +3,32 @@
import LogoIcon from "../assets/Icons/LogoIcon.vue"; import LogoIcon from "../assets/Icons/LogoIcon.vue";
import UserLoginInfo from "../items/UserLoginInfo.vue"; import UserLoginInfo from "../items/UserLoginInfo.vue";
import SetingsIcon from "../assets/Icons/SetingsIcon.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";
const themeIs = ref("dark");
function switchThemeMode() {
const currentTheme = themeIs.value;
const newTheme = currentTheme === "dark" ? "light" : "dark";
localStorage.setItem("theme", newTheme);
document.documentElement.setAttribute("data-theme", newTheme);
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);
});
</script> </script>
<template> <template>
@@ -12,7 +38,16 @@ import SetingsIcon from "../assets/Icons/SetingsIcon.vue";
<LogoIcon /> <LogoIcon />
<h1>Subsonics</h1> <h1>Subsonics</h1>
</div> </div>
<UserLoginInfo /> <UserLoginInfo />
<button
class="dark-mode-toggle"
@click="switchThemeMode"
:class="themeIs == 'dark' ? 'dark-mode' : 'light-mode'"
:aria-label="themeIs == 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
>
<DarkModeIcone v-if="themeIs == 'dark'" />
<LightModeIcone v-if="themeIs == 'light'" />
</button>
<button><SetingsIcon /></button> <button><SetingsIcon /></button>
</div> </div>
</div> </div>
@@ -24,17 +59,17 @@ import SetingsIcon from "../assets/Icons/SetingsIcon.vue";
padding: 20px; padding: 20px;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 50px; gap: 20px;
align-self: stretch; align-self: stretch;
border-radius: 25px; border-radius: 25px;
background: var(--neutral-100); background: var(--neutral-100);
&__content { &__content {
display: flex; display: flex;
padding: 0 50px; padding: 0 0px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 20px; gap: 3px;
align-self: stretch; align-self: stretch;
&__logo { &__logo {

29
frontend/src/components/LectureList.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import MiniatureList from "../items/MiniatureList.vue"; import MiniatureList from "../items/MiniatureList.vue";
import {defineProps} from "vue"; import {defineProps, ref} from "vue";
import {lectureListStore} from "../stores/dataStore.ts"; import {historyListStore, lectureListStore} from "../stores/dataStore.ts";
import InPlayListIcon from "../assets/Icons/InPlayListIcon.vue"; import InPlayListIcon from "../assets/Icons/InPlayListIcon.vue";
import Trash from "../assets/Icons/Trash.vue"; import Trash from "../assets/Icons/Trash.vue";
import SwitchTab from "../items/SwitchTab.vue"; import SwitchTab from "../items/SwitchTab.vue";
@@ -14,32 +14,51 @@ const props = defineProps({
} }
}); });
const nav = ref("lecture");
const switchNav = (tabName: string) => {
nav.value = tabName;
}
const lecturesList = lectureListStore(); const lecturesList = lectureListStore();
const historyList = historyListStore();
</script> </script>
<template> <template>
<div :class="props.popup == true ? 'lecture-list--popup' : 'lecture-list'"> <div :class="props.popup == true ? 'lecture-list--popup' : 'lecture-list'">
<div class="lecture-list__content"> <div class="lecture-list__content">
<div class="lecture-list__header"> <div class="lecture-list__header">
<div> <div v-if="nav == 'lecture'">
<button> <button>
<Trash color="#FF306F"/> <Trash color="#FF306F"/>
</button> </button>
<div><p>{{ lecturesList.lectures.length }}</p> <div>
<p>{{ lecturesList.lectures.length }}</p>
<InPlayListIcon/> <InPlayListIcon/>
</div> </div>
</div> </div>
<switch-tab <SwitchTab
:selectedTab="nav == 'lecture' ? 1 : 2"
tab1-label="Liste de lecture" tab1-label="Liste de lecture"
:tab1-click="() => {switchNav('lecture')}"
tab2-label="Historique de lecture" tab2-label="Historique de lecture"
:tab2-click="() => {switchNav('history')}"
/> />
</div> </div>
<MiniatureList <MiniatureList
v-if="nav == 'lecture'"
v-for="lecture in lecturesList.lectures" v-for="lecture in lecturesList.lectures"
:thumbnail="lecture.thumbnail" :thumbnail="lecture.thumbnail"
:title="lecture.title" :title="lecture.title"
:name="lecture.name" :name="lecture.name"
/> />
<MiniatureList
v-if="nav == 'history'"
v-for="history in historyList.history"
:thumbnail="history.thumbnail"
:title="history.title"
:name="history.name"
/>
</div> </div>
</div> </div>
</template> </template>

12
frontend/src/components/Playlist.vue
View File

@@ -2,6 +2,7 @@
import { defineProps } from 'vue'; import { defineProps } from 'vue';
import PlaylistItem from "../items/PlaylistItem.vue"; import PlaylistItem from "../items/PlaylistItem.vue";
import {playlistsListStore} from "../stores/dataStore.ts"; import {playlistsListStore} from "../stores/dataStore.ts";
import Button from "../items/Button.vue";
const props = defineProps({ const props = defineProps({
popup: { popup: {
@@ -22,6 +23,12 @@ const playlists = playlistsListStore();
:imgSrc="playlist.origin" :imgSrc="playlist.origin"
/> />
</div> </div>
<Button
type="primary"
label="Créer une playlist"
:on-click="() => {}"
:disabled="false"
/>
</div> </div>
</template> </template>
@@ -44,16 +51,19 @@ const playlists = playlistsListStore();
.playlist--popup, .playlist { .playlist--popup, .playlist {
display: flex; display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 25px; border-radius: 25px;
background: var(--neutral-100); background: var(--neutral-100);
overflow: hidden; overflow: hidden;
box-sizing: border-box;
padding: 30px;
&__content { &__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 30px;
box-sizing: border-box; box-sizing: border-box;
overflow: scroll; overflow: scroll;
overflow-x: hidden; overflow-x: hidden;

1
frontend/src/components/SearchPreview.vue
View File

@@ -15,6 +15,7 @@ const search = searchStore();
:thumbnail="video.thumbnail" :thumbnail="video.thumbnail"
:title="video.title" :title="video.title"
:name="video.name" :name="video.name"
:duration="video.duration"
/> />
</div> </div>
</div> </div>

68
frontend/src/items/Button.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup lang="ts">
import {defineProps} from "vue";
const props = defineProps<{
label: string;
type: 'primary' | 'secondary' | 'tertiary';
disabled: boolean;
onClick: () => void;
}>();
</script>
<template>
<button
:class="['button', `button--${props.type}`]"
:disabled="props.disabled"
@click="props.onClick"
>
{{ props.label }}
</button>
</template>
<style scoped lang="scss">
.button {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
border-radius: 25px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
&--primary {
background-color: var(--primary-500);
color: white;
&:hover {
background-color: var(--primary-600);
}
}
&--secondary {
background-color: transparent;
color: var(--neutral-50);
border: 1px solid var(--neutral-950);
&:hover {
background-color: var(--neutral-950);
}
}
&--tertiary {
background-color: transparent;
color: var(--neutral-700);
&:hover {
background-color: var(--neutral-100);
}
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
</style>

1
frontend/src/items/InputSearch.vue
View File

@@ -47,7 +47,6 @@ onMounted(() => {
outline: none; outline: none;
background-color: var(--neutral-50); background-color: var(--neutral-50);
color: var(--neutral-950); color: var(--neutral-950);
transition: .3s ease;
} }
.input::placeholder { .input::placeholder {

15
frontend/src/items/Miniature.vue
View File

@@ -7,6 +7,7 @@ const props = defineProps<{
thumbnail: string; thumbnail: string;
title: string; title: string;
name: string; name: string;
duration: string;
}>(); }>();
</script> </script>
@@ -14,6 +15,7 @@ const props = defineProps<{
<div class="miniature"> <div class="miniature">
<div class="miniature__img"> <div class="miniature__img">
<img :src="props.thumbnail" alt="Video Thumbnail" /> <img :src="props.thumbnail" alt="Video Thumbnail" />
<p class="miniature__img__duration" >{{duration}}</p>
<div class="miniature__img__overlay"> <div class="miniature__img__overlay">
<button> <button>
<Add /> <Add />
@@ -54,6 +56,17 @@ const props = defineProps<{
object-fit: cover; object-fit: cover;
} }
&__duration {
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px;
border-radius: 5px;
font-size: 12px;
}
&:hover .miniature__img__overlay { &:hover .miniature__img__overlay {
opacity: 1; opacity: 1;
} }
@@ -105,6 +118,8 @@ const props = defineProps<{
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: var(--neutral-500);
font-size: 12px;
} }
} }
} }

12
frontend/src/items/SwitchTab.vue
View File

@@ -3,6 +3,7 @@
import {defineProps} from "vue"; import {defineProps} from "vue";
const props = defineProps<{ const props = defineProps<{
selectedTab?: 1 | 2;
tab1Click?: (event: MouseEvent) => void; tab1Click?: (event: MouseEvent) => void;
tab1Label?: string; tab1Label?: string;
tab2Click?: (event: MouseEvent) => void; tab2Click?: (event: MouseEvent) => void;
@@ -15,7 +16,7 @@ const props = defineProps<{
<div class="tab-container"> <div class="tab-container">
<button v-on:click="props.tab1Click" class="tab tab--1">{{ props.tab1Label }}</button> <button v-on:click="props.tab1Click" class="tab tab--1">{{ props.tab1Label }}</button>
<button v-on:click="props.tab2Click" class="tab tab--2">{{ props.tab2Label }}</button> <button v-on:click="props.tab2Click" class="tab tab--2">{{ props.tab2Label }}</button>
<div class="indicator"></div> <div class="indicator" :class="props.selectedTab == 1 ? 'indicator-left' : 'indicator-right'" ></div>
</div> </div>
</template> </template>
@@ -39,11 +40,16 @@ const props = defineProps<{
background: var(--neutral-100); background: var(--neutral-100);
position: absolute; position: absolute;
top: 2px; top: 2px;
left: 2px;
z-index: 9; z-index: 9;
border: 0.5px solid rgba(0, 0, 0, 0.04); border: 0.5px solid rgba(0, 0, 0, 0.04);
border-radius: 7px; border-radius: 7px;
transition: all 0.2s ease-out; transition: left 0.2s ease-out;
}
.indicator-left {
left: 2px;
}
.indicator-right {
left: calc(50% - 2px);
} }
.tab { .tab {

2
frontend/src/items/UserLoginInfo.vue
View File

@@ -8,7 +8,7 @@ const userLoginInfo = userOnlineStore();
<template> <template>
<div class="user-login-info"> <div class="user-login-info">
<UserIcon /> <UserIcon />
<p class="sub-text">{{ userLoginInfo.nbUser }}</p> <p class="sub-text colorFixedWhite">{{ userLoginInfo.nbUser }}</p>
</div> </div>
</template> </template>

11
frontend/src/stores/dataStore.ts
View File

@@ -19,21 +19,25 @@ export const searchStore = defineStore('search', {
name: 'LofiGirl', name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 1)', title: 'lofi hip hop mix 📚 beats to relax/study to (Part 1)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
duration: '2:00:00',
}, },
{ {
name: 'LofiGirl', name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 2)', title: 'lofi hip hop mix 📚 beats to relax/study to (Part 2)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
duration: '1:00:00',
}, },
{ {
name: 'LofiGirl', name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 3)', title: 'lofi hip hop mix 📚 beats to relax/study to (Part 3)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
duration: '3:00:00',
}, },
{ {
name: 'LofiGirl', name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 4)', title: 'lofi hip hop mix 📚 beats to relax/study to (Part 4)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg', thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
duration: '00:30:00',
}, },
] ]
}), }),
@@ -43,7 +47,7 @@ export const searchStore = defineStore('search', {
this.searchQuery = query; this.searchQuery = query;
}, },
updateVideosSearch(videoList: { name: string; title: string; thumbnail: string }[]) { updateVideosSearch(videoList: { name: string; title: string; thumbnail: string; duration: string }[]) {
this.videos = videoList; this.videos = videoList;
}, },
@@ -163,11 +167,6 @@ export const lectureListStore = defineStore('lecture', {
export const historyListStore = defineStore('history', { export const historyListStore = defineStore('history', {
state: () => ({ state: () => ({
history: [ history: [
{
name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 1)',
thumbnail: 'https://i.ytimg.com/vi/CFGLoQIhmow/hqdefault.jpg',
},
{ {
name: 'LofiGirl', name: 'LofiGirl',
title: 'lofi hip hop mix 📚 beats to relax/study to (Part 2)', title: 'lofi hip hop mix 📚 beats to relax/study to (Part 2)',