Spaces:
Configuration error
Configuration error
| <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> | |