tools/teletypegames
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

spotify

Browse Source
This commit is contained in:
mr.zero
2026-05-19 10:13:27 +02:00
parent 7264e4626d
commit cd4cfe71c8
5 changed files with 186 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/i18n/locales/en.ts
+7
View File
@@ -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',
apps/frontend/src/i18n/locales/hu.ts
+7
View File
@@ -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',
apps/frontend/src/page/contact/ContactPage.vue
+49 -1
View File
@@ -65,7 +65,7 @@
</h2>
<p class="contact-card-desc">{{ t('contact.socialDesc') }}</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="community-section border-red-600">
<h3 class="community-section-title text-red-600">YouTube</h3>
<p class="community-section-desc">{{ t('contact.youtube.desc') }}</p>
@@ -81,6 +81,39 @@
{{ t('contact.facebook.link') }} <span>→</span>
</a>
</div>
<div class="community-section border-[#1DB954]">
<h3 class="community-section-title text-[#1DB954]">Spotify</h3>
<p class="community-section-desc">{{ t('contact.spotify.desc') }}</p>
<a href="https://open.spotify.com/playlist/4T7hMkdiERkkW7HaPXqgfX?si=7cdaa091c3274422" target="_blank" class="community-link-spotify">
{{ t('contact.spotify.link') }} <span>→</span>
</a>
</div>
</div>
</div>
<div class="contact-card spotify-card">
<div class="spotify-card-header">
<div class="spotify-icon-wrap">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>
</svg>
</div>
<div>
<h2 class="text-2xl font-black text-white">Teletype Games Party</h2>
<p class="text-[#1DB954] text-sm font-bold">Spotify Playlist</p>
</div>
</div>
<div class="spotify-embed-wrap">
<iframe
style="border-radius: 12px"
src="https://open.spotify.com/embed/playlist/4T7hMkdiERkkW7HaPXqgfX?utm_source=generator&theme=0"
width="100%"
height="352"
frameBorder="0"
allowfullscreen
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
></iframe>
</div>
</div>
</div>
@@ -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;
}
apps/frontend/src/page/home/HomePage.vue
+74
View File
@@ -126,6 +126,41 @@
</div>
</section>
<!-- Spotify Playlist -->
<section class="mb-16">
<div class="spotify-wrapper group">
<div class="spotify-glow"></div>
<div class="spotify-header">
<div class="flex items-center gap-3">
<div class="spotify-pulse-wrap">
<div class="spotify-pulse-bar"></div>
<div class="spotify-pulse-bar bar-2"></div>
<div class="spotify-pulse-bar bar-3"></div>
<div class="spotify-pulse-bar bar-4"></div>
</div>
<span class="spotify-label">Teletype Games Party</span>
</div>
<a href="https://open.spotify.com/playlist/4T7hMkdiERkkW7HaPXqgfX?si=7cdaa091c3274422" target="_blank" class="spotify-open-link">
{{ t('home.spotify.openInSpotify') }}
</a>
</div>
<div class="spotify-embed-container">
<iframe
style="border-radius: 12px"
src="https://open.spotify.com/embed/playlist/4T7hMkdiERkkW7HaPXqgfX?utm_source=generator&theme=0"
width="100%"
height="352"
frameBorder="0"
allowfullscreen
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
></iframe>
</div>
</div>
</section>
<!-- Navigation Grid -->
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="nav-card group card-interactive">
@@ -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;
}
</style>
apps/frontend/src/styles/retro.css
+49
View File
@@ -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 {