diff --git a/apps/frontend/src/i18n/locales/en.ts b/apps/frontend/src/i18n/locales/en.ts index fc05e1e..097002f 100644 --- a/apps/frontend/src/i18n/locales/en.ts +++ b/apps/frontend/src/i18n/locales/en.ts @@ -55,6 +55,9 @@ export default { desc: 'Watch our development vlogs, gameplay videos, and tutorials on our official YouTube channel.', btn: 'Watch on YouTube', }, + spotify: { + openInSpotify: 'Open in Spotify ↗', + }, }, contact: { title: 'Contact Us', @@ -84,6 +87,10 @@ export default { desc: 'Follow us on Facebook for the latest news and updates.', link: 'Visit Facebook Page', }, + spotify: { + desc: 'Listen to our community playlist while coding or gaming!', + link: 'Open Playlist', + }, }, blog: { badge: 'Community Stories', diff --git a/apps/frontend/src/i18n/locales/hu.ts b/apps/frontend/src/i18n/locales/hu.ts index 04f154e..5efd21a 100644 --- a/apps/frontend/src/i18n/locales/hu.ts +++ b/apps/frontend/src/i18n/locales/hu.ts @@ -55,6 +55,9 @@ export default { desc: 'Nézd meg fejlesztési vlogjainkat, gameplay videóinkat és tutorialainkat a hivatalos YouTube-csatornánkon.', btn: 'Nézd meg YouTube-on', }, + spotify: { + openInSpotify: 'Megnyitás Spotify-ban ↗', + }, }, contact: { title: 'Kapcsolat', @@ -84,6 +87,10 @@ export default { desc: 'Kövess minket Facebookon a legfrissebb hírekért és frissítésekért.', link: 'Facebook oldal megtekintése', }, + spotify: { + desc: 'Hallgasd a közösségi playlist-ünket fejlesztés vagy játék közben!', + link: 'Playlist megnyitása', + }, }, blog: { badge: 'Közösségi történetek', diff --git a/apps/frontend/src/page/contact/ContactPage.vue b/apps/frontend/src/page/contact/ContactPage.vue index 19e906e..46e35a3 100644 --- a/apps/frontend/src/page/contact/ContactPage.vue +++ b/apps/frontend/src/page/contact/ContactPage.vue @@ -65,7 +65,7 @@

{{ t('contact.socialDesc') }}

-
+

YouTube

{{ t('contact.youtube.desc') }}

@@ -81,6 +81,39 @@ {{ t('contact.facebook.link') }} →
+ +
+

Spotify

+

{{ t('contact.spotify.desc') }}

+ + {{ t('contact.spotify.link') }} → + +
+
+
+
+
+
+ + + +
+
+

Teletype Games Party

+

Spotify Playlist

+
+
+
+
@@ -136,6 +169,21 @@ function openEmail() { .community-link-facebook { @apply text-[#1877F2] font-bold hover:underline inline-flex items-center gap-1; } +.community-link-spotify { + @apply text-[#1DB954] font-bold hover:underline inline-flex items-center gap-1; +} +.spotify-card { + @apply bg-gradient-to-br from-slate-900 via-slate-900 to-emerald-950 border-slate-800 text-white; +} +.spotify-card-header { + @apply flex items-center gap-4 mb-6 text-[#1DB954]; +} +.spotify-icon-wrap { + @apply w-14 h-14 rounded-2xl bg-[#1DB954]/10 border border-[#1DB954]/20 flex items-center justify-center; +} +.spotify-embed-wrap { + @apply rounded-xl overflow-hidden; +} .irc-box { @apply bg-green-100 p-4 rounded-xl border border-green-200 mt-3 inline-block; } diff --git a/apps/frontend/src/page/home/HomePage.vue b/apps/frontend/src/page/home/HomePage.vue index 96c5f02..7edc992 100644 --- a/apps/frontend/src/page/home/HomePage.vue +++ b/apps/frontend/src/page/home/HomePage.vue @@ -126,6 +126,41 @@ + +
+
+
+ +
+
+
+
+
+
+
+
+ Teletype Games Party +
+ + {{ t('home.spotify.openInSpotify') }} + +
+ +
+ +
+
+
+
@@ -342,4 +377,43 @@ onUnmounted(() => eventStore.cleanup()) .yt-play-button { @apply flex items-center justify-center gap-2 w-full py-4 bg-white text-slate-900 font-black rounded-xl transition-all hover:scale-[1.02] hover:bg-indigo-50 active:scale-95 shadow-xl; } + +/* Spotify Section */ +.spotify-wrapper { + @apply relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-900 to-emerald-950 rounded-3xl shadow-2xl border border-slate-800 p-6 md:p-8; +} +.spotify-glow { + @apply absolute -top-24 -left-24 w-96 h-96 bg-[#1DB954]/10 rounded-full blur-[100px] pointer-events-none; +} +.spotify-header { + @apply flex items-center justify-between mb-6 relative z-10; +} +.spotify-pulse-wrap { + @apply flex items-end gap-[3px] h-4; +} +.spotify-pulse-bar { + @apply w-[3px] bg-[#1DB954] rounded-full animate-pulse; + height: 100%; +} +.spotify-pulse-bar.bar-2 { + height: 60%; + animation-delay: 0.15s; +} +.spotify-pulse-bar.bar-3 { + height: 80%; + animation-delay: 0.3s; +} +.spotify-pulse-bar.bar-4 { + height: 40%; + animation-delay: 0.45s; +} +.spotify-label { + @apply text-xs font-bold uppercase tracking-widest text-slate-400; +} +.spotify-open-link { + @apply text-xs font-semibold text-[#1DB954] hover:text-[#1ed760] transition-colors; +} +.spotify-embed-container { + @apply relative z-10 rounded-xl overflow-hidden; +} diff --git a/apps/frontend/src/styles/retro.css b/apps/frontend/src/styles/retro.css index 1dc5a53..f9fd8d7 100644 --- a/apps/frontend/src/styles/retro.css +++ b/apps/frontend/src/styles/retro.css @@ -314,6 +314,8 @@ .retro-mode .countdown-card, .retro-mode .featured-card, .retro-mode .yt-featured-wrapper, +.retro-mode .spotify-wrapper, +.retro-mode .spotify-card, .retro-mode .contact-card, .retro-mode .commit-item, .retro-mode .team-card, @@ -646,6 +648,52 @@ font-size: 12px !important; } +/* ---- SPOTIFY — tui-window + tui-shadow ---- */ +.retro-mode .spotify-wrapper, +.retro-mode .spotify-card { + background-color: #0000a8 !important; + background-image: none !important; + border: 6px white double !important; + box-shadow: 10px 10px 0 #000 !important; + padding: 12px !important; + color: #fff !important; +} + +.retro-mode .spotify-glow { display: none !important; } + +.retro-mode .spotify-pulse-wrap { display: none !important; } + +.retro-mode .spotify-label, +.retro-mode .spotify-card-header p { + color: #00a800 !important; + font-size: 14px !important; + font-weight: normal !important; +} + +.retro-mode .spotify-card-header h2 { + color: #ffff00 !important; + font-size: 14px !important; + font-weight: bold !important; +} + +.retro-mode .spotify-icon-wrap { + background-color: #000 !important; + border: 2px solid #a8a8a8 !important; + color: #00a800 !important; +} + +.retro-mode .spotify-open-link { + color: #00ffff !important; + text-decoration: underline !important; + font-size: 14px !important; +} + +.retro-mode .spotify-embed-container, +.retro-mode .spotify-embed-wrap { + border: 2px solid #a8a8a8 !important; + outline: none !important; +} + /* ---- NAV CARDS ---- */ /* tui-bg-cyan-black texture for icon boxes */ .retro-mode .nav-card-icon { @@ -874,6 +922,7 @@ .retro-mode .community-link-discord { color: #00ffff !important; text-decoration: underline !important; } .retro-mode .community-link-youtube { color: #a80000 !important; text-decoration: underline !important; } .retro-mode .community-link-facebook { color: #00a8a8 !important; text-decoration: underline !important; } +.retro-mode .community-link-spotify { color: #00a800 !important; text-decoration: underline !important; } /* tui-divider */ .retro-mode .community-section {