001

Running

001 / index.html

77386c3 verified 4 months ago

raw

history blame contribute delete

6.14 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Mr.FLEN - Still Lie Right Next to Me</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: '#0B2D2F',
	accent: '#FF914D',
	magenta: '#C5427A',
	paper: '#0A0F10'
	}
	}
	}
	}
	</script>
	</head>
	<body class="bg-paper text-white min-h-screen flex flex-col">
	<custom-navbar></custom-navbar>

	<main class="flex-1">
	<!-- Hero Section -->
	<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
	<!-- Animated Background -->
	<div id="vanta-bg" class="absolute inset-0"></div>
	<div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
	<div class="mb-8">
	<img src="http://static.photos/monochrome/640x360/42" alt="Album Cover" class="mx-auto w-64 h-64 rounded-2xl shadow-2xl border-2 border-accent/30">
	</div>
	<h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-accent to-magenta bg-clip-text text-transparent">
	STILL LIE RIGHT NEXT TO ME
	</h1>
	<p class="text-xl md:text-2xl mb-8 text-gray-300">
	Mr.FLEN
	</p>
	<p class="text-lg mb-8 max-w-2xl mx-auto text-gray-400">
	Intimate deep house for late lights and long shadows—warm pads, patient grooves, and urban after-hours emotion.
	</p>
	<div class="flex flex-col sm:flex-row gap-4 justify-center">
	<a href="/tracks.html" class="bg-accent hover:bg-accent/80 text-paper font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105">
	<i data-feather="play" class="inline mr-2"></i>
	Explore Tracks
	</a>
	<a href="#album-player" class="border border-accent hover:bg-accent/10 text-accent font-bold py-3 px-8 rounded-full transition-all duration-300">
	<i data-feather="headphones" class="inline mr-2"></i>
	Listen Now
	</a>
	</div>
	</div>

	<!-- Scroll Indicator -->
	<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
	<i data-feather="chevron-down" class="text-accent"></i>
	</div>
	</section>

	<!-- Album Player Section -->
	<section id="album-player" class="py-20 px-4">
	<div class="max-w-4xl mx-auto">
	<h2 class="text-3xl font-bold text-center mb-12">
	<span class="bg-gradient-to-r from-accent to-magenta bg-clip-text text-transparent">
	FULL ALBUM STREAM
	</span>
	</h2>
	<div class="bg-primary/20 rounded-2xl p-6 backdrop-blur-sm border border-accent/20">
	<div class="aspect-video rounded-xl overflow-hidden">
	<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/soundcloud%3Aplaylists%3A2101988351%3Fsecret_token%3Ds-uMbaNOGqODx&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
	</div>
	</div>
	</div>
	</section>

	<!-- Featured Tracks -->
	<section class="py-20 px-4 bg-primary/10">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-3xl font-bold text-center mb-12">
	<span class="bg-gradient-to-r from-accent to-magenta bg-clip-text text-transparent">
	FEATURED TRACKS
	</span>
	</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Track cards will be populated by JavaScript -->
	</div>
	<div class="text-center mt-12">
	<a href="/tracks.html" class="inline-flex items-center gap-2 border border-accent hover:bg-accent/10 text-accent font-bold py-3 px-8 rounded-full transition-all duration-300">
	View All Tracks
	<i data-feather="arrow-right"></i>
	</a>
	</div>
	</div>
	</section>
	</main>

	<custom-footer></custom-footer>

	<!-- Scripts -->
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	<script src="script.js"></script>
	<script>
	// Initialize Vanta.js background
	VANTA.GLOBE({
	el: "#vanta-bg",
	mouseControls: true,
	touchControls: true,
	gyroControls: false,
	minHeight: 200.00,
	minWidth: 200.00,
	scale: 1.00,
	scaleMobile: 1.00,
	color: 0xff914d,
	backgroundColor: 0x0a0f10,
	size: 0.8
	});

	feather.replace();

	// Load featured tracks
	document.addEventListener('DOMContentLoaded', function() {
	loadFeaturedTracks();
	});
	</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>