<!doctype html>

<head>

<title>Your Artist Name — Official</title>

<style>

:root{

--bg:#0f0f10;

--card:#121214;

--muted:#9aa0a6;

--accent:#f36b6b;

--glass: rgba(255,255,255,0.03);

--maxw:1100px;

font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

color: #eee;

}

*{box-sizing:border-box}

html,body{height:100%}

body{

margin:0;

background:linear-gradient(180deg,#071017 0%, #0f1113 60%);

color:var(--muted);

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

line-height:1.45;

}

.container{max-width:var(--maxw);margin:0 auto;padding:28px;}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}

.logo{display:flex;align-items:center;gap:10px}

.logo img{width:44px;height:44px;border-radius:6px;object-fit:cover}

.site-title{font-weight:700;color:#fff}

nav{display:flex;gap:12px;align-items:center}

a.nav-link{color:var(--muted);text-decoration:none;padding:8px;border-radius:6px}

a.nav-link:hover{color:#fff;background:var(--glass)}

.hero{display:grid;grid-template-columns: 1fr 360px;gap:28px;align-items:center;padding:36px 0}

@media (max-width:900px){ .hero{grid-template-columns:1fr;}}

.hero-left h1{font-size:40px;margin:0 0 10px;color:#fff}

.hero-left p{margin:0 0 18px;color:var(--muted)}

.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.btn{background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}

.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

.cover{width:100%;max-width:360px;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.6)}

.cover img{display:block;width:100%;height:100%;object-fit:cover}

.player{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:12px;border-radius:10px;margin-top:12px}

.track{display:flex;gap:12px;align-items:center}

.track .meta{flex:1}

.controls{display:flex;gap:8px;align-items:center}

.icon-btn{background:transparent;border:0;color:var(--muted);font-size:18px;padding:8px;border-radius:8px}

.section{margin-top:40px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

@media (max-width:900px){ .grid-3{grid-template-columns:repeat(1,1fr)}}

.card{background:var(--card);padding:14px;border-radius:10px}

h2{color:#fff;margin:0 0 12px}

.muted{color:var(--muted)}

.socials{display:flex;gap:10px}

.socials a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted);text-decoration:none}

footer{margin:50px 0 30px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.03);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}

.tour-list{list-style:none;padding:0;margin:0}

.tour-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,0.02)}

.meta small{display:block;color:var(--muted)}

form input, form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff;margin-top:8px}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.04);color:var(--muted);font-size:13px}

/* audio timeline */

.timeline{height:6px;background:rgba(255,255,255,0.04);border-radius:6px;position:relative;cursor:pointer;margin-top:10px}

.timeline .progress{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff9d9d);border-radius:6px}

small.time{color:var(--muted);font-size:13px;margin-left:6px}

/* simple responsive spacing */

.spacer{height:8px}

</style>

</head>

<body>

<div>

<div class="site-title">YOUR ARTIST NAME</div>

<div class="muted">Singer • Songwriter</div>

</div>

<nav>

<a class="nav-link" href="#music">Music</a>

<a class="nav-link" href="#shows">Shows</a>

<a class="nav-link" href="#about">About</a>

<a class="nav-link" href="#contact">Contact</a>

</nav>

</header>

<main>

<h1>New single: "Title of Your Song"</h1>

<p class="muted">Released: <span id="release-date">Jan 1, 2025</span> — Short teaser or one-line bio that hooks the listener.</p>

<a class="btn" href="#music">Listen</a>

<a class="btn ghost" id="buy-link" href="#" target="_blank" rel="noopener">Buy / Stream</a>

<a class="nav-link" href="assets/press-kit.pdf" download>Press Kit</a>

</div>

<div style="color:#fff;font-weight:700" id="track-title">Title of Your Song</div>

<div class="muted" id="track-artist">Your Artist Name</div>

</div>

</div>

</div>

</div>

<div>

</div>

</a>

</div>

</section>

<h2>Music</h2>

<div>

<div style="font-weight:700;color:#fff">Title of Your Song</div>

<div class="muted">Single • 2025</div>

<a class="nav-link" href="#" onclick="openLink('https://open.spotify.com')" target="_blank" rel="noopener">Spotify</a>

<a class="nav-link" href="#" onclick="openLink('https://music.apple.com')" target="_blank" rel="noopener">Apple</a>

</div>

<div>

<div style="font-weight:700;color:#fff">Another Track</div>

<a class="nav-link" href="#" onclick="openLink('https://bandcamp.com')" target="_blank">Bandcamp</a>

</div>

<div>

<div style="font-weight:700;color:#fff">Live Session</div>

<a class="nav-link" href="#" onclick="openLink('https://soundcloud.com')" target="_blank">SoundCloud</a>

</div>

</section>

<h2>Shows</h2>

<li class="tour-item"><div><strong>Dec 20, 2025 — The Blue Room</strong><small>City, ST</small></div><div class="muted">Tickets</div></li>

<li class="tour-item"><div><strong>Jan 10, 2026 — The Green Stage</strong><small>City, ST</small></div><div class="muted">Tickets</div></li>

</ul>

<p class="muted" style="margin-top:8px">To add a show: edit this HTML or manage via a light CMS.</p>

</div>

</section>

<h2>About</h2>

<p style="color:var(--muted)">Brief bio: Write a short paragraph about your musical background, influences, and achievements — keep it personal and specific. Replace this placeholder with 2–3 sentences about you and your music.</p>

<a class="nav-link" href="assets/press-kit.pdf" download>Download Press Kit (PDF)</a>

<a class="nav-link" href="mailto:booking@yourdomain.com">Booking: booking@yourdomain.com</a>

</div>

</section>

<h2>Contact</h2>

<label class="badge">Contact / Booking</label>

</div>

<p class="muted" style="margin-top:8px;font-size:13px">This form uses Formspree (replace with your endpoint).</p>

</form>

</div>

<label class="badge">Mailing List</label>

<p class="muted">Join the mailing list for new releases and tour announcements.</p>

<div style="margin-top:8px"><button class="btn" type="submit">Subscribe</button></div>

</form>

</div>

<label class="badge">Social</label>

<a class="socials" href="#" target="_blank">Spotify</a>

<a class="socials" href="#" target="_blank">Apple</a>

<a class="socials" href="#" target="_blank">Instagram</a>

<a class="socials" href="#" target="_blank">YouTube</a>

</div>

<div style="margin-top:12px" class="muted">Pro tip: link to artist profiles (not personal accounts).</div>

</div>

</section>

<a class="nav-link" href="mailto:press@yourdomain.com">Press</a>

<a class="nav-link" href="#">Privacy</a>

</div>

</footer>

</main>

</div>

// ====== Replace these with your hosted file URLs or streaming links ======

const TRACKS = [

{ title: "Title of Your Song", artist: "Your Artist Name", src: "assets/track1.mp3", cover: "assets/cover.jpg" },

{ title: "Another Track", artist: "Your Artist Name", src: "assets/track2.mp3", cover: "assets/cover2.jpg" },

{ title: "Live Session", artist: "Your Artist Name", src: "assets/track3.mp3", cover: "assets/cover3.jpg" }

];

// =======================================================================

const audio = document.getElementById('audio');

const playBtn = document.getElementById('playpause');

const prevBtn = document.getElementById('prev');

const nextBtn = document.getElementById('next');

const progressEl = document.getElementById('progress');

const timeline = document.getElementById('timeline');

const timeEl = document.getElementById('time');

const trackTitle = document.getElementById('track-title');

const trackArtist = document.getElementById('track-artist');

const miniCover = document.getElementById('mini-cover');

let current = 0;

let isPlaying = false;

function loadTrack(i){

const t = TRACKS[i];

audio.src = t.src;

trackTitle.textContent = t.title;

trackArtist.textContent = t.artist;

miniCover.src = t.cover || 'assets/cover.jpg';

document.querySelector('.cover img').src = t.cover || 'assets/cover.jpg';

}

function playTrack(i){

if (typeof i === 'number') current = i;

loadTrack(current);

audio.play().then(()=> {

isPlaying = true;

playBtn.textContent = "❚❚";

}).catch(err => {

// Autoplay might be blocked; change UI

isPlaying = false;

playBtn.textContent = "►";

console.warn('Playback failed (user gesture needed?):', err);

});

}

function togglePlay(){

if(!audio.src) loadTrack(current);

if(audio.paused){

audio.play(); isPlaying = true; playBtn.textContent="❚❚";

} else {

audio.pause(); isPlaying = false; playBtn.textContent="►";

}

function prev(){ current = (current - 1 + TRACKS.length) % TRACKS.length; playTrack(); }

function next(){ current = (current + 1) % TRACKS.length; playTrack(); }

playBtn.addEventListener('click', togglePlay);

prevBtn.addEventListener('click', prev);

nextBtn.addEventListener('click', next);

audio.addEventListener('timeupdate', () => {

if(audio.duration){

const pct = (audio.currentTime / audio.duration) * 100;

progressEl.style.width = pct + '%';

timeEl.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);

}

});

audio.addEventListener('ended', () => {

// auto next

next();

});

timeline.addEventListener('click', (e) => {

const rect = timeline.getBoundingClientRect();

const pct = (e.clientX - rect.left) / rect.width;

if(audio.duration) audio.currentTime = pct * audio.duration;

});

function formatTime(s){ s = Math.floor(s||0); const m = Math.floor(s/60); const sec = s%60; return m+':'+String(sec).padStart(2,'0'); }

// small helpers

function openLink(url){ window.open(url,'_blank','noopener'); }

// init

document.getElementById('year').textContent = new Date().getFullYear();

// pre-load first track silently (no autoplay)

loadTrack(0);

// Optional: lightweight keyboard controls

document.addEventListener('keydown', (e) => {

if(e.code === 'Space') { e.preventDefault(); togglePlay(); }

if(e.code === 'ArrowRight') next();

if(e.code === 'ArrowLeft') prev();

});

// Example: dynamically populate tour list (if you want to update via JS)

const tour = [

{ date: 'Dec 20, 2025', venue: 'The Blue Room', city: 'Austin, TX', link: '#' },

{ date: 'Jan 10, 2026', venue: 'Green Stage', city: 'Nashville, TN', link: '#' }

];

const tourList = document.getElementById('tour-list');

tourList.innerHTML = tour.map(t => `<li class="tour-item"><div><strong>${t.date} — ${t.venue}</strong><small>${t.city}</small></div><div><a class="nav-link" href="${t.link}">Tickets</a></div></li>`).join('');

</script>

</body>

</html>