first commit
This commit is contained in:
Anakagung2009-bit
+449
@@ -0,0 +1,449 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Agung Dev Music — Personal Music Archive</title>
|
||||
<meta name="description" content="A personal collection of original music, ambient compositions, experimental audio projects, and soundtrack releases created by Agung Dev.">
|
||||
<meta name="theme-color" content="#000000">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="Agung Dev Music — Personal Music Archive">
|
||||
<meta property="og:description" content="A collection of original music, ambient compositions, experimental audio projects, and soundtrack releases created by Agung Dev.">
|
||||
<meta property="og:image" content="images/logo.png">
|
||||
<meta property="og:type" content="website">
|
||||
|
||||
<!-- Preconnect -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" href="index.css">
|
||||
|
||||
<!-- Favicon (inline SVG) -->
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>">
|
||||
</head>
|
||||
<body class="page-loader">
|
||||
|
||||
<!-- ============================
|
||||
NAVIGATION
|
||||
============================ -->
|
||||
<nav class="nav" id="main-nav" role="navigation" aria-label="Main Navigation">
|
||||
<div class="nav__inner">
|
||||
<a href="index.html" class="nav__logo" aria-label="Agung Dev Music Home">
|
||||
<img src="images/logo.png" alt="Agung Dev Music" class="nav__logo-img">
|
||||
<span class="nav__logo-text">Agung Dev Music</span>
|
||||
</a>
|
||||
<div class="footer__links" style="margin: 0; gap: var(--spacing-lg);" id="nav-links">
|
||||
<a href="#hero" class="footer__link">Home</a>
|
||||
<a href="#releases" class="footer__link">Releases</a>
|
||||
<a href="#projects" class="footer__link">Projects</a>
|
||||
<a href="#platforms" class="footer__link">Platforms</a>
|
||||
<a href="#about" class="footer__link">About</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
HERO SECTION
|
||||
============================ -->
|
||||
<section class="hero hero--hub" id="hero" aria-labelledby="hero-title">
|
||||
<div class="hero__content container">
|
||||
|
||||
<!-- Logo Frame -->
|
||||
<div class="scale-in">
|
||||
<img
|
||||
src="images/logo.png"
|
||||
alt="Agung Dev Music Logo"
|
||||
style="height: 80px; width: auto; opacity: 0.95; filter: drop-shadow(0 0 30px rgba(0,212,255,0.25));"
|
||||
width="80"
|
||||
height="80"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<span class="hero__badge fade-in fade-in-delay-1" id="hero-tagline">Personal Music Projects & Original Soundtracks</span>
|
||||
|
||||
<!-- Title & Description -->
|
||||
<h1 class="hero__title fade-in fade-in-delay-2" id="hero-title" style="max-width: 800px; font-size: 80px;">
|
||||
Agung Dev Music
|
||||
</h1>
|
||||
<p class="hero__description fade-in fade-in-delay-3" id="label-desc" style="max-width: 580px;">
|
||||
<!-- Loaded dynamically -->
|
||||
Loading archive details...
|
||||
</p>
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="hero__actions fade-in fade-in-delay-4">
|
||||
<a href="#featured" class="btn-primary">
|
||||
Featured Release
|
||||
</a>
|
||||
<a href="#releases" class="btn-ghost">
|
||||
Browse Archive
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
FEATURED RELEASE SECTION
|
||||
============================ -->
|
||||
<section class="section" id="featured" aria-labelledby="featured-title-sec" style="padding-top: var(--spacing-xxxl);">
|
||||
<div class="container">
|
||||
|
||||
<p class="section__label fade-in">Featured Release</p>
|
||||
<h2 class="section__title fade-in" id="featured-title-sec">Latest Archive Entry</h2>
|
||||
|
||||
<!-- Loaded Dynamically -->
|
||||
<div id="featured-release-container">
|
||||
<!-- Skeleton / Fallback -->
|
||||
<div style="text-align: center; color: var(--color-mute); padding: 48px 0;">
|
||||
Loading featured release...
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
LATEST RELEASES
|
||||
============================ -->
|
||||
<section class="section" id="releases" aria-labelledby="releases-title" style="border-top: 1px solid var(--color-hairline);">
|
||||
<div class="container">
|
||||
|
||||
<p class="section__label fade-in">Archive</p>
|
||||
<h2 class="section__title fade-in" id="releases-title">Original Releases</h2>
|
||||
|
||||
<div class="releases-grid" id="releases-grid">
|
||||
<!-- Loaded Dynamically -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
PROJECTS SECTION
|
||||
============================ -->
|
||||
<section class="section" id="projects" aria-labelledby="projects-title" style="border-top: 1px solid var(--color-hairline);">
|
||||
<div class="container">
|
||||
|
||||
<p class="section__label fade-in">Creative Scope</p>
|
||||
<h2 class="section__title fade-in" id="projects-title">Original Projects</h2>
|
||||
|
||||
<div class="artists-grid" id="projects-grid">
|
||||
<!-- Loaded Dynamically -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
STATISTICS SECTION
|
||||
============================ -->
|
||||
<section class="section section--stats" id="stats" aria-labelledby="stats-title">
|
||||
<div class="container">
|
||||
|
||||
<p class="section__label fade-in">Archive Scope</p>
|
||||
<h2 class="section__title fade-in" id="stats-title" style="margin-bottom: var(--spacing-xxl);">Archive Statistics</h2>
|
||||
|
||||
<div class="stats-grid fade-in" style="grid-template-columns: repeat(3, 1fr);">
|
||||
<div class="stats-item">
|
||||
<p class="stats-item__num" id="stat-releases">0</p>
|
||||
<p class="stats-item__label">Releases</p>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<p class="stats-item__num" id="stat-projects">0</p>
|
||||
<p class="stats-item__label">Projects</p>
|
||||
</div>
|
||||
<div class="stats-item">
|
||||
<p class="stats-item__num" id="stat-platforms">0</p>
|
||||
<p class="stats-item__label">Listening Platforms</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
SUPPORTED PLATFORMS
|
||||
============================ -->
|
||||
<section class="section section--platforms" id="platforms" aria-labelledby="platforms-title">
|
||||
<div class="container">
|
||||
|
||||
<p class="section__label fade-in">Streaming</p>
|
||||
<h2 class="section__title fade-in" id="platforms-title">Listening Platforms</h2>
|
||||
|
||||
<div class="platforms-grid">
|
||||
<!-- Spotify -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><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>
|
||||
<span class="platform-card__name">Spotify</span>
|
||||
</div>
|
||||
<!-- Apple Music -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.802.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03c.525 0 1.048-.034 1.57-.1.823-.106 1.597-.35 2.296-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.042-1.8-.6-1.965-1.49-.18-.965.39-1.897 1.343-2.147.335-.088.68-.14 1.018-.21.27-.056.535-.124.7-.378.095-.142.12-.32.12-.48V9.96a.56.56 0 00-.04-.222c-.06-.15-.2-.24-.37-.22-.228.03-.46.08-.685.13l-3.645.78c-.03.006-.056.018-.084.027-.128.06-.2.164-.217.3-.005.048-.01.097-.01.146v7.63c0 .082-.003.165-.01.247-.048.622-.287 1.14-.796 1.522a2.324 2.324 0 01-1.073.454c-.34.065-.684.1-1.03.07-.93-.06-1.645-.72-1.71-1.585-.076-1.01.528-1.85 1.477-2.074.33-.08.665-.134 1-.2.258-.05.51-.112.67-.342.1-.14.13-.31.13-.48V7.088c0-.298.07-.57.3-.79.15-.14.34-.22.54-.27.12-.03.24-.05.37-.07l5.16-1.1c.21-.05.42-.09.63-.14.29-.06.45.06.5.35.02.1.03.2.03.29v4.76z"/></svg>
|
||||
<span class="platform-card__name">Apple Music</span>
|
||||
</div>
|
||||
<!-- YouTube Music -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0zm0 19.104c-3.924 0-7.104-3.18-7.104-7.104S8.076 4.896 12 4.896s7.104 3.18 7.104 7.104-3.18 7.104-7.104 7.104zm0-13.332c-3.432 0-6.228 2.796-6.228 6.228S8.568 18.228 12 18.228 18.228 15.432 18.228 12 15.432 5.772 12 5.772zM9.684 15.54V8.46L16.2 12l-6.516 3.54z"/></svg>
|
||||
<span class="platform-card__name">YouTube Music</span>
|
||||
</div>
|
||||
<!-- Amazon Music -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705c-.209.189-.512.201-.748.074-1.051-.872-1.238-1.276-1.814-2.106-1.736 1.77-2.962 2.3-5.209 2.3-2.66 0-4.731-1.641-4.731-4.925 0-2.565 1.391-4.309 3.37-5.164 1.715-.754 4.11-.891 5.942-1.095v-.41c0-.753.058-1.642-.383-2.294-.385-.579-1.124-.82-1.775-.82-1.205 0-2.277.618-2.54 1.897-.054.285-.261.567-.549.581l-3.074-.331c-.259-.058-.548-.266-.472-.66C6.016 1.573 9.17 0 12.021 0c1.459 0 3.365.389 4.514 1.494 1.459 1.384 1.321 3.231 1.321 5.243v4.749c0 1.427.592 2.053 1.148 2.824.197.275.24.604-.009.806-.624.521-1.736 1.49-2.349 2.033l-.502-.355zM21.052 16.969c-2.139 1.938-5.248 2.969-7.913 2.969-3.746 0-7.122-1.384-9.672-3.689-.201-.182-.021-.43.219-.288 2.754 1.601 6.162 2.565 9.684 2.565 2.374 0 4.985-.492 7.39-1.512.362-.157.667.238.292.455v.5z"/></svg>
|
||||
<span class="platform-card__name">Amazon Music</span>
|
||||
</div>
|
||||
<!-- Tidal -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12.012 3.992L8.008 7.996 4.004 3.992 0 7.996 4.004 12l4.004-4.004L12.012 12l4.004-4.004L12.012 3.992zM12.012 12l-4.004 4.004L12.012 20.008l4.004-4.004L12.012 12zM20.02 3.992l-4.004 4.004L20.02 12l3.98-4.004L20.02 3.992z"/></svg>
|
||||
<span class="platform-card__name">Tidal</span>
|
||||
</div>
|
||||
<!-- Deezer -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M18.81 4.16v3.03H24V4.16h-5.19zM6.27 8.38v3.027h5.189V8.38H6.27zm12.54 0v3.027H24V8.38h-5.19zM6.27 12.594v3.027h5.189v-3.027H6.27zm6.271 0v3.027h5.19v-3.027h-5.19zm6.27 0v3.027H24v-3.027h-5.19zM0 16.81v3.029h5.19v-3.03H0zm6.27 0v3.029h5.189v-3.03H6.27zm6.271 0v3.029h5.19v-3.03h-5.19zm6.27 0v3.029H24v-3.03h-5.19z"/></svg>
|
||||
<span class="platform-card__name">Deezer</span>
|
||||
</div>
|
||||
<!-- TikTok -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
|
||||
<span class="platform-card__name">TikTok</span>
|
||||
</div>
|
||||
<!-- Instagram -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
|
||||
<span class="platform-card__name">Instagram</span>
|
||||
</div>
|
||||
<!-- Facebook -->
|
||||
<div class="platform-card fade-in">
|
||||
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
||||
<span class="platform-card__name">Facebook</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
ABOUT THE LABEL
|
||||
============================ -->
|
||||
<section class="section section--about" id="about" aria-labelledby="about-title">
|
||||
<div class="container">
|
||||
|
||||
<p class="section__label fade-in">About</p>
|
||||
<h2 class="section__title fade-in" id="about-title">About Agung Dev Music</h2>
|
||||
|
||||
<div class="about-content fade-in">
|
||||
<p class="about-content__text">
|
||||
<em>Agung Dev Music</em> is a personal space dedicated to publishing original music projects. From ambient soundscapes and electronic experiments to soundtrack-inspired compositions, every release represents a creative idea transformed into sound.
|
||||
<br><br>
|
||||
This is not a traditional record label. It is a digital archive of music created and released by Agung Dev.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
FOOTER
|
||||
============================ -->
|
||||
<footer class="footer" id="footer" role="contentinfo">
|
||||
<div class="footer__inner">
|
||||
|
||||
<!-- Brand -->
|
||||
<div class="footer__brand">
|
||||
<img src="images/logo.png" alt="Agung Dev Music Logo" class="footer__logo">
|
||||
<span class="footer__label-name">Agung Dev Music</span>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<div class="footer__links">
|
||||
<a href="index.html" class="footer__link">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||
Website
|
||||
</a>
|
||||
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
|
||||
Instagram
|
||||
</a>
|
||||
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
||||
YouTube
|
||||
</a>
|
||||
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
|
||||
TikTok
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer__divider"></div>
|
||||
|
||||
<!-- Bottom -->
|
||||
<div class="footer__bottom" style="flex-direction: column; align-items: center; gap: var(--spacing-sm);">
|
||||
<p class="footer__contact" style="color: var(--color-mute); font-size: 13px;">
|
||||
Original Music, Soundtracks, and Creative Audio Projects.
|
||||
</p>
|
||||
<p class="footer__copyright">
|
||||
© 2025 Agung Dev.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- ============================
|
||||
JAVASCRIPT
|
||||
============================ -->
|
||||
<script>
|
||||
// ── Scroll-based navigation background ──
|
||||
const nav = document.getElementById('main-nav');
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 40) {
|
||||
nav.classList.add('scrolled');
|
||||
} else {
|
||||
nav.classList.remove('scrolled');
|
||||
}
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
|
||||
// ── Intersection Observer for scroll animations ──
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -60px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const animationObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
animationObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe static animations
|
||||
document.querySelectorAll('.fade-in, .scale-in').forEach((el) => {
|
||||
animationObserver.observe(el);
|
||||
});
|
||||
|
||||
// ── Dynamic Data Loading System ──
|
||||
fetch('labelsong.json')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load archive data');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
// 1. Update Hero details
|
||||
document.getElementById('label-desc').textContent = data.label.description;
|
||||
|
||||
// 2. Populate Featured Release
|
||||
const featuredSlug = data.featured_release;
|
||||
const featuredRelease = data.releases.find(r => r.slug === featuredSlug) || data.releases[0];
|
||||
|
||||
if (featuredRelease) {
|
||||
const featuredContainer = document.getElementById('featured-release-container');
|
||||
featuredContainer.innerHTML = `
|
||||
<div class="featured-card fade-in">
|
||||
<a href="${featuredRelease.url}" class="featured-card__artwork-link" aria-label="View ${featuredRelease.title} details">
|
||||
<img src="${featuredRelease.artwork}" alt="${featuredRelease.title} Cover Art" class="featured-card__artwork">
|
||||
</a>
|
||||
<div class="featured-card__content">
|
||||
<span class="featured-card__tag">Latest Release</span>
|
||||
<h3 class="featured-card__title">${featuredRelease.title}</h3>
|
||||
<p class="featured-card__artist">by ${featuredRelease.artist}</p>
|
||||
<p class="featured-card__desc">
|
||||
An ambient project exploring textures and atmospheres. Listen to the latest creative soundtrack release now.
|
||||
</p>
|
||||
<a href="${featuredRelease.url}" class="btn-primary featured-card__btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Listen Now
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 3. Populate Releases Grid
|
||||
const grid = document.getElementById('releases-grid');
|
||||
grid.innerHTML = '';
|
||||
data.releases.forEach(release => {
|
||||
const formattedDate = new Date(release.release_date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.className = 'release-card fade-in';
|
||||
card.innerHTML = `
|
||||
<a href="${release.url}" class="release-card__artwork-wrapper" aria-label="View ${release.title} details">
|
||||
<img src="${release.artwork}" alt="${release.title} Cover Art" class="release-card__artwork" loading="lazy">
|
||||
</a>
|
||||
<div class="release-card__content">
|
||||
<h3 class="release-card__title">${release.title}</h3>
|
||||
<p class="release-card__artist">${release.artist}</p>
|
||||
<p class="release-card__date">${formattedDate}</p>
|
||||
</div>
|
||||
`;
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
// 4. Populate Projects Grid
|
||||
const projectsGrid = document.getElementById('projects-grid');
|
||||
projectsGrid.innerHTML = '';
|
||||
data.projects.forEach(project => {
|
||||
const pcard = document.createElement('div');
|
||||
pcard.className = 'artist-card fade-in';
|
||||
pcard.innerHTML = `
|
||||
<img src="${project.avatar}" alt="${project.title}" class="artist-card__avatar" style="border-radius: var(--rounded-lg);" loading="lazy">
|
||||
<h3 class="artist-card__name">${project.title}</h3>
|
||||
<p class="artist-card__bio" style="max-width: 280px;">${project.desc}</p>
|
||||
`;
|
||||
projectsGrid.appendChild(pcard);
|
||||
});
|
||||
|
||||
// 5. Populate Statistics
|
||||
document.getElementById('stat-releases').textContent = data.stats.releases;
|
||||
document.getElementById('stat-projects').textContent = data.stats.projects;
|
||||
document.getElementById('stat-platforms').textContent = data.stats.platforms;
|
||||
|
||||
// 6. Observe newly dynamically generated items for scroll animations
|
||||
document.querySelectorAll('#featured-release-container .fade-in, #releases-grid .fade-in, #projects-grid .fade-in').forEach(el => {
|
||||
animationObserver.observe(el);
|
||||
});
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading archive data:', error);
|
||||
document.getElementById('label-desc').textContent = 'Failed to load archive catalog.';
|
||||
});
|
||||
|
||||
// ── Smooth scroll for anchor links ──
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(anchor.getAttribute('href'));
|
||||
if (target) {
|
||||
const offset = 80;
|
||||
const top = target.getBoundingClientRect().top + window.scrollY - offset;
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user