Spaces:

DavidKRK
/

https-huggingface-co-davidkrk

Configuration error

File size: 18,360 Bytes
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>David KRK · DJ Techno & Producteur</title>
    <meta name="description" content="David KRK, DJ Techno international se produisant en France, Espagne et Pays Basque depuis 2000. Trance, Tech Trance et Techno.">
    <meta name="keywords" content="David KRK, DJ techno, producteur, France, Espagne, Pays Basque, Trance, Tech Trance">
    <meta name="author" content="David KRK">
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://davidkrk.com/">
    <meta property="og:title" content="David KRK · DJ Techno & Producteur">
    <meta property="og:description" content="DJ Techno international - France, Espagne, Pays Basque">
    <meta property="og:image" content="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://davidkrk.com/">
    <meta property="twitter:title" content="David KRK · DJ Techno & Producteur">
    <meta property="twitter:description" content="DJ Techno international - France, Espagne, Pays Basque">
    <meta property="twitter:image" content="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">
    
    <!-- Fonts & Icons -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        :root {
            --primary-color: #FF69B4;
            --secondary-color: #03A9F4;
            --accent-color: #8BC34A;
            --dark-bg: #0F0F0F;
            --darker-bg: #080808;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }
        
        body {
            background: linear-gradient(135deg, var(--dark-bg), var(--darker-bg));
            font-family: 'Russo One', sans-serif;
            color: white;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .logo-container {
            position: relative;
            margin-bottom: 2rem;
            animation: float 6s ease-in-out infinite;
        }
        
        .logo-border {
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));
            background-size: 300% 300%;
            animation: gradient 8s ease infinite;
            z-index: -1;
            filter: blur(8px);
            opacity: 0.7;
        }
        
        .main-title {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color), var(--accent-color));
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            background-size: 200% auto;
            animation: gradient 8s ease infinite, fadeInDown 1s ease-out forwards;
        }
        
        .nav-link {
            position: relative;
            overflow: hidden;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            transform: translateX(-100%);
            transition: var(--transition);
        }
        
        .nav-link:hover::after {
            transform: translateX(0);
        }
        
        .social-icon {
            transition: var(--transition);
            transform: scale(1);
        }
        
        .social-icon:hover {
            transform: scale(1.2);
            color: var(--primary-color);
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        .welcome-text {
            position: relative;
            padding: 1.5rem;
            border-radius: 0.5rem;
            background: rgba(15, 15, 15, 0.7);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transform: perspective(500px) rotateX(0deg);
            transition: all 0.5s ease;
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .welcome-text:hover {
            transform: perspective(500px) rotateX(5deg);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }
        
        .welcome-text::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
            border-radius: 0.5rem 0.5rem 0 0;
        }
        
        .language-selector {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .language-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.9rem;
        }
        
        .language-btn:hover, .language-btn.active {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            transform: scale(1.05);
        }
        
        .welcome-message {
            display: none;
            text-align: center;
            font-size: 1.25rem;
            line-height: 1.6;
        }
        
        .welcome-message.active {
            display: block;
            animation: fadeIn 0.8s ease-out;
        }
        
        /* Mixcloud player styling */
        .mixcloud-player {
            width: 100%;
            height: 120px;
            border-radius: 0.5rem;
            overflow: hidden;
            margin: 2rem 0;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: var(--transition);
        }
        
        .mixcloud-player:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }
        
        /* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }
        
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .main-title {
                font-size: 3.5rem;
            }
            
            .nav-container {
                flex-direction: column;
                gap: 1rem;
            }
            
            .welcome-text {
                padding: 1rem;
            }
            
            .welcome-message {
                font-size: 1.1rem;
            }
            
            .mixcloud-player {
                height: 100px;
            }
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen p-4">
    <main class="text-center max-w-4xl mx-auto px-4 py-8">
        <!-- Logo with animated border -->
        <div class="logo-container">
            <div class="logo-border"></div>
            <img src="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png" 
                 alt="Logo David KRK" 
                 class="w-32 h-32 rounded-full border-4 border-white object-cover shadow-xl">
        </div>
        
        <!-- Main Title -->
        <h1 class="main-title text-6xl md:text-8xl font-bold mb-8 opacity-0">
            David KRK
        </h1>
        
        <!-- Navigation -->
        <nav class="nav-container flex justify-center gap-8 mb-12">
            <a href="bio.html" class="nav-link text-2xl text-white hover:text-primary transition-colors">
                Bio
            </a>
            <a href="music.html" class="nav-link text-2xl text-white hover:text-primary transition-colors">
                Music
            </a>
            <a href="events.html" class="nav-link text-2xl text-white hover:text-primary transition-colors">
                Events
            </a>
            <a href="contact.html" class="nav-link text-2xl text-white hover:text-primary transition-colors">
                Contact
            </a>
        </nav>
        
        <!-- Language Selector -->
        <div class="language-selector">
            <button class="language-btn active" data-lang="fr">Français</button>
            <button class="language-btn" data-lang="es">Español</button>
            <button class="language-btn" data-lang="en">English</button>
            <button class="language-btn" data-lang="eu">Euskara</button>
        </div>
        
        <!-- Main Text with language options -->
        <div class="welcome-text mb-12">
            <!-- French -->
            <div class="welcome-message active" data-lang="fr">
                <p>Bienvenue sur le site officiel de David KRK, DJ Techno international se produisant en France, Espagne et Pays Basque depuis 2000. Spécialisé en Trance, Tech Trance et Techno.</p>
            </div>
            
            <!-- Spanish -->
            <div class="welcome-message" data-lang="es">
                <p>Bienvenido al sitio oficial de David KRK, DJ de Techno internacional actuando en Francia, España y el País Vasco desde 2000. Especializado en Trance, Tech Trance y Techno.</p>
            </div>
            
            <!-- English -->
            <div class="welcome-message" data-lang="en">
                <p>Welcome to the official website of David KRK, international Techno DJ performing in France, Spain and the Basque Country since 2000. Specializing in Trance, Tech Trance and Techno.</p>
            </div>
            
            <!-- Basque -->
            <div class="welcome-message" data-lang="eu">
                <p>Ongi etorri David KRK-ren webgune ofizialera, 2000. urtetik Frantziako, Espainiako eta Euskal Herriko Techno DJ internazionala. Trance, Tech Trance eta Techno espezialista.</p>
            </div>
        </div>
        
        <!-- Mixcloud Player -->
        <div class="mixcloud-player">
            <iframe 
                width="100%" 
                height="120" 
                src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&light=1&feed=%2FDavidKRK%2F" 
                frameborder="0">
            </iframe>
        </div>
        
        <!-- Social Icons -->
        <div class="flex justify-center gap-6 mb-8">
            <a href="https://www.facebook.com/DavidKRKofficial" target="_blank" aria-label="Facebook" class="social-icon text-3xl text-white">
                <i class="fab fa-facebook"></i>
            </a>
            <a href="https://www.instagram.com/davidkrk/" target="_blank" aria-label="Instagram" class="social-icon text-3xl text-white">
                <i class="fab fa-instagram"></i>
            </a>
            <a href="https://www.mixcloud.com/DavidKRK/" target="_blank" aria-label="Mixcloud" class="social-icon text-3xl text-white">
                <i class="fab fa-mixcloud"></i>
            </a>
            <a href="https://www.youtube.com/@DavidKRKofficial" target="_blank" aria-label="YouTube" class="social-icon text-3xl text-white">
                <i class="fab fa-youtube"></i>
            </a>
            <a href="https://soundcloud.com/david-krkofficial" target="_blank" aria-label="SoundCloud" class="social-icon text-3xl text-white">
                <i class="fab fa-soundcloud"></i>
            </a>
            <a href="https://www.tiktok.com/@davidkrk" target="_blank" aria-label="TikTok" class="social-icon text-3xl text-white">
                <i class="fab fa-tiktok"></i>
            </a>
        </div>
        
        <!-- Latest Track (Placeholder) -->
        <div class="mt-12 p-6 bg-black bg-opacity-30 rounded-xl max-w-lg mx-auto transform transition-all hover:scale-105">
            <h3 class="text-xl font-bold mb-4">Dernière sortie</h3>
            <div class="p-4 bg-black bg-opacity-50 rounded-lg">
                <p class="text-primary font-bold">KRK - Neon Dreams</p>
                <p class="text-sm opacity-80 mb-3">Tech Trance • 2023</p>
                <button class="bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-black font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
                    Écouter <i class="ml-2 fas fa-play"></i>
                </button>
            </div>
        </div>
    </main>
    
    <!-- Footer -->
    <footer class="mt-auto py-6 text-center text-sm opacity-70">
        <p>© 2023 David KRK. Tous droits réservés.</p>
    </footer>

    <script>
        // Simple script to ensure animations trigger after page load
        document.addEventListener('DOMContentLoaded', () => {
            // Add a small delay to ensure CSS animations trigger
            setTimeout(() => {
                document.querySelector('.main-title').style.opacity = '1';
            }, 100);
            
            // Add pulse animation to social icons on hover
            const socialIcons = document.querySelectorAll('.social-icon');
            socialIcons.forEach(icon => {
                icon.addEventListener('mouseenter', () => {
                    icon.classList.add('pulse');
                });
                icon.addEventListener('mouseleave', () => {
                    icon.classList.remove('pulse');
                });
            });
            
            // Add subtle parallax effect to welcome text
            const welcomeText = document.querySelector('.welcome-text');
            window.addEventListener('mousemove', (e) => {
                const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
                const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
                welcomeText.style.transform = `perspective(500px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
            });
            
            // Language selector functionality
            const languageBtns = document.querySelectorAll('.language-btn');
            const welcomeMessages = document.querySelectorAll('.welcome-message');
            
            languageBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    // Remove active class from all buttons and messages
                    languageBtns.forEach(b => b.classList.remove('active'));
                    welcomeMessages.forEach(msg => msg.classList.remove('active'));
                    
                    // Add active class to clicked button
                    btn.classList.add('active');
                    
                    // Show corresponding message
                    const lang = btn.dataset.lang;
                    document.querySelector(`.welcome-message[data-lang="${lang}"]`).classList.add('active');
                    
                    // Reset the auto-rotation timer
                    resetAutoRotation();
                });
            });
            
            // Auto-rotation of languages every 5 seconds
            let rotationInterval;
            const languages = ['fr', 'es', 'en', 'eu'];
            let currentIndex = 0;
            
            function rotateLanguage() {
                currentIndex = (currentIndex + 1) % languages.length;
                const nextLang = languages[currentIndex];
                
                // Remove active class from all buttons and messages
                languageBtns.forEach(b => b.classList.remove('active'));
                welcomeMessages.forEach(msg => msg.classList.remove('active'));
                
                // Add active class to next language
                document.querySelector(`.language-btn[data-lang="${nextLang}"]`).classList.add('active');
                document.querySelector(`.welcome-message[data-lang="${nextLang}"]`).classList.add('active');
            }
            
            function resetAutoRotation() {
                clearInterval(rotationInterval);
                rotationInterval = setInterval(rotateLanguage, 5000);
            }
            
            // Start auto-rotation
            resetAutoRotation();
            
            // Pause auto-rotation when hovering over welcome text
            welcomeText.addEventListener('mouseenter', () => {
                clearInterval(rotationInterval);
            });
            
            welcomeText.addEventListener('mouseleave', resetAutoRotation);
        });
    </script>
</body>
</html>