From 3934ebdf3b28d7e185e365aa44436f6d3229fd70 Mon Sep 17 00:00:00 2001 From: Dj Redflame <73613085+djredflame@users.noreply.github.com> Date: Sun, 7 Jun 2026 02:41:09 +0200 Subject: [PATCH 1/2] feat: imporved music page --- frontend/package.json | 1 + frontend/pnpm-lock.yaml | 12 ++- frontend/src/app/app.component.scss | 20 +++- frontend/src/app/app.config.ts | 7 +- .../src/app/pages/about/about.component.scss | 3 + .../src/app/pages/music/music.component.html | 32 +++++- .../src/app/pages/music/music.component.scss | 91 ++++++++++++++++++ .../src/app/pages/music/music.component.ts | 38 +++++++- frontend/src/assets/musicdata.json | 76 +++++++++++++++ .../resources/covers/Cover_Breathe_Again.png | Bin 0 -> 1395795 bytes .../resources/covers/Cover_Find_Flow.jpg | Bin 0 -> 6757245 bytes .../resources/covers/Cover_Heart_in_Fire.jpeg | Bin 0 -> 25233 bytes .../resources/covers/Cover_Summer_Vibes.jpeg | Bin 0 -> 75421 bytes .../src/assets/resources/icons/djredflame.png | Bin 0 -> 641178 bytes .../src/assets/resources/icons/facebook.png | Bin 0 -> 24783 bytes .../src/assets/resources/icons/instagram.png | Bin 0 -> 36472 bytes .../src/assets/resources/icons/itunes.png | Bin 0 -> 30183 bytes .../src/assets/resources/icons/sources.json | 28 ++++++ .../src/assets/resources/icons/spotify.png | Bin 0 -> 35499 bytes .../src/assets/resources/icons/twitter.png | Bin 0 -> 37091 bytes .../src/assets/resources/icons/youtube.png | Bin 0 -> 34065 bytes 21 files changed, 297 insertions(+), 11 deletions(-) create mode 100644 frontend/src/assets/musicdata.json create mode 100644 frontend/src/assets/resources/covers/Cover_Breathe_Again.png create mode 100644 frontend/src/assets/resources/covers/Cover_Find_Flow.jpg create mode 100755 frontend/src/assets/resources/covers/Cover_Heart_in_Fire.jpeg create mode 100755 frontend/src/assets/resources/covers/Cover_Summer_Vibes.jpeg create mode 100755 frontend/src/assets/resources/icons/djredflame.png create mode 100755 frontend/src/assets/resources/icons/facebook.png create mode 100755 frontend/src/assets/resources/icons/instagram.png create mode 100755 frontend/src/assets/resources/icons/itunes.png create mode 100755 frontend/src/assets/resources/icons/sources.json create mode 100755 frontend/src/assets/resources/icons/spotify.png create mode 100755 frontend/src/assets/resources/icons/twitter.png create mode 100755 frontend/src/assets/resources/icons/youtube.png diff --git a/frontend/package.json b/frontend/package.json index bbcd48e..1d63d70 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -79,6 +79,7 @@ "@typescript-eslint/eslint-plugin": "^8.60.1", "@typescript-eslint/parser": "^8.60.1", "angular-eslint": "21.4.0", + "baseline-browser-mapping": "^2.10.34", "eslint": "^9.35.0", "eslint-config-prettier": "^10.1.8", "eslint-plugin-deprecation": "^3.0.0", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 4aecbe1..d70eddb 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -126,6 +126,9 @@ importers: angular-eslint: specifier: 21.4.0 version: 21.4.0(@angular/cli@22.0.0(@types/node@18.19.127)(chokidar@5.0.0))(chokidar@5.0.0)(eslint@9.36.0(jiti@1.21.7))(typescript-eslint@8.60.1(eslint@9.36.0(jiti@1.21.7))(typescript@6.0.3))(typescript@6.0.3) + baseline-browser-mapping: + specifier: ^2.10.34 + version: 2.10.34 eslint: specifier: ^9.35.0 version: 9.36.0(jiti@1.21.7) @@ -2096,8 +2099,9 @@ packages: resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==} engines: {node: ^4.5.0 || >= 5.9} - baseline-browser-mapping@2.8.6: - resolution: {integrity: sha512-wrH5NNqren/QMtKUEEJf7z86YjfqW/2uw3IL3/xpqZUC95SSVIFXYQeeGjL6FT/X68IROu6RMehZQS5foy2BXw==} + baseline-browser-mapping@2.10.34: + resolution: {integrity: sha512-IMDedajPifLnHNY0X9n8hKxRTQ6/eTHwr5bDo04WnuqxyKw6LYtQywCuuqPZwhl3aBXMvQpJov42GLCwRRdQzw==} + engines: {node: '>=6.0.0'} hasBin: true beasties@0.4.2: @@ -6321,7 +6325,7 @@ snapshots: base64id@2.0.0: {} - baseline-browser-mapping@2.8.6: {} + baseline-browser-mapping@2.10.34: {} beasties@0.4.2: dependencies: @@ -6387,7 +6391,7 @@ snapshots: browserslist@4.26.2: dependencies: - baseline-browser-mapping: 2.8.6 + baseline-browser-mapping: 2.10.34 caniuse-lite: 1.0.30001743 electron-to-chromium: 1.5.222 node-releases: 2.0.21 diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss index 0e7199b..494bd54 100644 --- a/frontend/src/app/app.component.scss +++ b/frontend/src/app/app.component.scss @@ -6,17 +6,28 @@ left: 0; width: 100%; height: 100%; - z-index: -1; + z-index: 0; + pointer-events: none; } .main-content { grid-area: main; background: transparent; display: flex; - justify-content: center; - align-items: center; + justify-content: flex-start; + align-items: flex-start; + flex-direction: column; grid-column: 1 / -1; + min-height: 0; height: 100%; + overflow-y: auto; + overflow-x: hidden; + box-sizing: border-box; + padding: 0 1rem 1rem; +} + +.main-content > * { + width: 100%; } app-header { @@ -30,6 +41,8 @@ app-footer { } .app-container { + position: relative; + z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr 1fr 1fr 1fr auto; @@ -44,4 +57,5 @@ app-footer { 'footer footer footer footer'; height: 100vh; background: transparent; + overflow: hidden; } diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts index dc34e12..cad2683 100644 --- a/frontend/src/app/app.config.ts +++ b/frontend/src/app/app.config.ts @@ -1,9 +1,14 @@ import { ApplicationConfig } from '@angular/core'; +import { provideHttpClient } from '@angular/common/http'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser'; export const appConfig: ApplicationConfig = { - providers: [provideRouter(routes), provideClientHydration(withNoIncrementalHydration())], + providers: [ + provideRouter(routes), + provideClientHydration(withNoIncrementalHydration()), + provideHttpClient(), + ], }; diff --git a/frontend/src/app/pages/about/about.component.scss b/frontend/src/app/pages/about/about.component.scss index a03d93e..04d0275 100644 --- a/frontend/src/app/pages/about/about.component.scss +++ b/frontend/src/app/pages/about/about.component.scss @@ -15,6 +15,7 @@ background: rgba($color-background-dark, 0.8); padding: 1rem; border-radius: 1rem; + border: 2px solid $color-accent; .profile-image { padding-top: 1rem; @@ -45,6 +46,8 @@ width: min(100%, 38rem); background: rgba($color-background-dark, 0.8); padding: 1rem; + border: 2px solid $color-accent; + border-radius: 1rem; .title { text-align: center; diff --git a/frontend/src/app/pages/music/music.component.html b/frontend/src/app/pages/music/music.component.html index 67fc81f..01f825c 100644 --- a/frontend/src/app/pages/music/music.component.html +++ b/frontend/src/app/pages/music/music.component.html @@ -1 +1,31 @@ -
music works!
+v^ZhDFUUN@2uk?TXg*F<~ocx@9eLp
zOLk$*DTPDWAolE|Gh&Luq71-3Ipq`p9Xd?fR^Zb}ZwyyvdyjVrpbnQmRJs}w_F7z)
z*z(wi9=E^$(cfE=n(U|3CFYv4Z%k6^;;Bl)#+r&9Eo7Uv7 |cNRJ(oZH
z*~;l`?z}_55deSrw;x*@pWO(+^}KfjCG>APlJ@S0A3#(3(Tq~1Oy&9k>K`amgI2=;
zYUo9{`-X8@fC*!2FfjE4Lryd58SUB^gX+0mqpAB$)~d6VT1<@=;Wd)g+(|(Wl(J)p
zmJ{jph6H6_r^}`3vlM-qMgnrvx-9Lq11pUTOobbV5zeF5bN6?*Hbu-*ncto#&SsZP)L)16JiNJvih--PxO$tZQ%(
zr}bfb--q7sl6e$^5U1oUZmqfZSlV5;Z@l@sz44tloz;A6(Lw~B`A
#gy+KQOBhc&K%%b(-*E_y>AirU
zjR_6$z+N&e()x)uL&%eQ5DOB(AAIosARVJz7Jz*LK%f8e
ztM)fP|CxOby=%rdk@zG~mb%gRqp2fI}8?5^O(zWdE@5Niwq!jOI9iAU}8FMbiNfTjpI_XEm7
zv}T_+)8Q3e!kV6X^+o6TH6r+Z=*BJb7#ZOIhW4I#@mc#G0-czjwpQHic4dA?MtzH^
zg3QknFlK%6YR=D-JoEB%K0Yr1<{+_8-}0Pas;$+F%RQ;XJ`DaM!Y-Op@Fzh(4m~~i
zi4WUvaRd~5NISHYtF1xD&*Eh@_NKfRdade)=zwKDZHfLqd*$_)Jr!{6{nzXhk34Ai
zK5(A{(WcW(ok{x`Zm=vMgIlTgLZPk