Anakagung2009-bit
371 lines
22 KiB
HTML
371 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Aurora — Agung Dev | Personal Music Archive</title>
|
|
<meta name="description"
|
|
content="Aurora — An ethereal ambient electronic journey beneath the dancing northern lights. Created by Agung Dev.">
|
|
<meta name="theme-color" content="#000000">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="Aurora — Agung Dev | Personal Music Archive">
|
|
<meta property="og:description"
|
|
content="An ethereal ambient electronic journey beneath the dancing northern lights. Created by Agung Dev.">
|
|
<meta property="og:image" content="../../images/aurora-cover.jpg">
|
|
<meta property="og:type" content="music.song">
|
|
|
|
<!-- 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">
|
|
|
|
<!-- Custom Aurora Theme Styles -->
|
|
<style>
|
|
:root {
|
|
--color-accent-cyan: #11ff99;
|
|
--color-accent-cyan-glow: rgba(17, 255, 153, 0.16);
|
|
--color-accent-blue: #00e5ff;
|
|
--color-accent-blue-glow: rgba(0, 229, 255, 0.18);
|
|
--color-accent-deep-blue: #092e20;
|
|
--color-accent-deep-blue-glow: rgba(9, 46, 32, 0.35);
|
|
}
|
|
</style>
|
|
|
|
<!-- 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>
|
|
<a href="#listen" class="nav__cta" id="nav-listen-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>
|
|
</nav>
|
|
|
|
|
|
<!-- ============================
|
|
HERO SECTION
|
|
============================ -->
|
|
<section class="hero" id="hero" aria-labelledby="hero-title">
|
|
<div class="hero__content container">
|
|
|
|
<!-- Album Artwork -->
|
|
<div class="hero__artwork-wrapper scale-in">
|
|
<div class="hero__artwork-glow" aria-hidden="true"></div>
|
|
<img src="../../images/l u n i a r.jpg" alt="Midnight — Album Cover" class="hero__artwork" id="album-artwork"
|
|
width="380" height="380">
|
|
</div>
|
|
|
|
<!-- Badge -->
|
|
<span class="hero__badge fade-in fade-in-delay-1">Ethereal Release</span>
|
|
|
|
<!-- Creator + Title -->
|
|
<p class="hero__artist fade-in fade-in-delay-2">Luniar</p>
|
|
<h1 class="hero__title fade-in fade-in-delay-3" id="hero-title">Midnight</h1>
|
|
|
|
<!-- Description -->
|
|
<p class="hero__description fade-in fade-in-delay-4">
|
|
An ethereal ambient electronic journey beneath the dancing northern lights.
|
|
</p>
|
|
|
|
<!-- CTAs -->
|
|
<div class="hero__actions fade-in fade-in-delay-5">
|
|
<a href="#listen" class="btn-primary" id="hero-listen-btn">
|
|
<svg width="16" height="16" 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>
|
|
<a href="#release-info" class="btn-ghost" id="hero-details-btn">
|
|
View Details
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- ============================
|
|
STREAMING PLATFORMS
|
|
============================ -->
|
|
<section class="section section--platforms" id="listen" aria-labelledby="platforms-title">
|
|
<div class="container">
|
|
|
|
<p class="section__label fade-in">Available On</p>
|
|
<h2 class="section__title fade-in" id="platforms-title">Listen Everywhere</h2>
|
|
|
|
<div class="platforms-grid" id="platforms-grid">
|
|
|
|
<!-- Spotify -->
|
|
<a href="#" class="platform-card fade-in" id="platform-spotify" aria-label="Listen on Spotify" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
<!-- Apple Music -->
|
|
<a href="#" class="platform-card fade-in" id="platform-apple-music" aria-label="Listen on Apple Music"
|
|
target="_blank" rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
<!-- YouTube Music -->
|
|
<a href="#" class="platform-card fade-in" id="platform-youtube-music" aria-label="Listen on YouTube Music"
|
|
target="_blank" rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
<!-- Amazon Music -->
|
|
<a href="#" class="platform-card fade-in" id="platform-amazon-music" aria-label="Listen on Amazon Music"
|
|
target="_blank" rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
<!-- Tidal -->
|
|
<a href="#" class="platform-card fade-in" id="platform-tidal" aria-label="Listen on Tidal" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
<!-- Deezer -->
|
|
<a href="#" class="platform-card fade-in" id="platform-deezer" aria-label="Listen on Deezer" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
<!-- SoundCloud -->
|
|
<a href="#" class="platform-card fade-in" id="platform-soundcloud" aria-label="Listen on SoundCloud"
|
|
target="_blank" rel="noopener noreferrer">
|
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c-.009-.057-.049-.1-.1-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.172 1.308c.013.06.045.094.104.094.057 0 .09-.037.104-.093l.205-1.309-.205-1.334c-.014-.057-.047-.094-.104-.094m1.794-1.124c-.061 0-.107.046-.117.104l-.222 2.446.222 2.375c.01.058.056.104.117.104.06 0 .107-.046.116-.104l.253-2.375-.253-2.446c-.009-.057-.056-.104-.116-.104m.882-.412c-.066 0-.121.053-.127.115l-.207 2.862.207 2.695c.006.063.061.116.127.116.065 0 .12-.053.125-.116l.234-2.695-.234-2.862c-.005-.062-.06-.115-.125-.115m.865-.141c-.072 0-.131.058-.136.126l-.19 3.003.19 2.776c.005.069.064.127.136.127.071 0 .131-.058.135-.127l.216-2.776-.216-3.003c-.004-.068-.064-.126-.135-.126m.882-.141c-.078 0-.14.064-.143.137l-.173 3.144.173 2.833c.003.075.065.138.143.138s.14-.063.142-.138l.197-2.833-.197-3.144c-.002-.073-.064-.137-.142-.137m.898-.356c-.082 0-.149.071-.152.147l-.162 3.5.162 2.86c.003.078.07.148.152.148s.149-.07.15-.148l.18-2.86-.18-3.5c-.001-.076-.068-.147-.15-.147m.902-.088c-.087 0-.158.078-.158.157l-.15 3.588.15 2.862c0 .082.071.159.158.159s.158-.077.157-.159l.168-2.862-.168-3.588c-.001-.079-.07-.157-.157-.157m.91-.107c-.093 0-.168.082-.17.168l-.132 3.695.132 2.85c.002.088.077.168.17.168.09 0 .167-.08.167-.168l.15-2.85-.15-3.695c-.002-.086-.077-.168-.167-.168m.923-.194c-.097 0-.18.089-.18.18l-.11 3.89.11 2.825c0 .092.082.18.18.18.095 0 .177-.088.178-.18l.123-2.826-.123-3.89c-.001-.09-.083-.18-.178-.18m.922-.201c-.103 0-.19.094-.189.19l-.098 4.09.098 2.788c-.001.098.086.189.189.189.1 0 .187-.09.187-.189l.11-2.788-.11-4.09c0-.096-.087-.19-.187-.19m1.855-.36c-.002-.111-.098-.2-.209-.2-.108 0-.2.088-.202.2l-.085 4.45.085 2.757c.002.112.094.2.202.2.11 0 .207-.088.208-.2l.095-2.757-.094-4.45m.918.072c-.112 0-.206.1-.208.21l-.075 4.168.075 2.73c.002.112.096.21.208.21.11 0 .205-.098.207-.21l.084-2.73-.084-4.168c-.002-.11-.097-.21-.207-.21m3.818-1.597c-.196 0-.38.037-.553.104a4.416 4.416 0 00-4.296-3.429c-.376 0-.748.057-1.095.166-.13.04-.164.085-.166.163v8.544c.002.082.064.15.146.162h5.964a2.454 2.454 0 002.454-2.454 2.454 2.454 0 00-2.454-2.456" />
|
|
</svg>
|
|
<span class="platform-card__name">SoundCloud</span>
|
|
</a>
|
|
|
|
<!-- TikTok -->
|
|
<a href="#" class="platform-card fade-in" id="platform-tiktok" aria-label="Follow on TikTok" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
<!-- Instagram -->
|
|
<a href="#" class="platform-card fade-in" id="platform-instagram" aria-label="Follow on Instagram"
|
|
target="_blank" rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
<!-- Facebook -->
|
|
<a href="#" class="platform-card fade-in" id="platform-facebook" aria-label="Follow on Facebook" target="_blank"
|
|
rel="noopener noreferrer">
|
|
<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>
|
|
</a>
|
|
|
|
</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" 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 all animated elements
|
|
document.querySelectorAll('.fade-in, .scale-in').forEach((el) => {
|
|
animationObserver.observe(el);
|
|
});
|
|
|
|
// ── 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; // nav height + padding
|
|
const top = target.getBoundingClientRect().top + window.scrollY - offset;
|
|
window.scrollTo({ top, behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// ── Parallax effect on album artwork ──
|
|
const artwork = document.querySelector('.hero__artwork-wrapper');
|
|
if (artwork && window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
|
|
window.addEventListener('scroll', () => {
|
|
const scrolled = window.scrollY;
|
|
const rate = scrolled * 0.15;
|
|
artwork.style.transform = `translateY(${rate}px)`;
|
|
}, { passive: true });
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |