Skip to content

Commit 2bfa0e8

Browse files
DavidKRKDavidKRK
authored
Update index.html (#4)
1 parent 06f1df7 commit 2bfa0e8

1 file changed

Lines changed: 171 additions & 16 deletions

File tree

‎index.html‎

Lines changed: 171 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,10 @@
130130
border: 1px solid rgba(255, 255, 255, 0.1);
131131
transform: perspective(500px) rotateX(0deg);
132132
transition: all 0.5s ease;
133+
min-height: 180px;
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
133137
}
134138

135139
.welcome-text:hover {
@@ -148,6 +152,57 @@
148152
border-radius: 0.5rem 0.5rem 0 0;
149153
}
150154

155+
.language-selector {
156+
display: flex;
157+
justify-content: center;
158+
gap: 1rem;
159+
margin-bottom: 1rem;
160+
}
161+
162+
.language-btn {
163+
background: rgba(255, 255, 255, 0.1);
164+
border: none;
165+
color: white;
166+
padding: 0.5rem 1rem;
167+
border-radius: 2rem;
168+
cursor: pointer;
169+
transition: var(--transition);
170+
font-size: 0.9rem;
171+
}
172+
173+
.language-btn:hover, .language-btn.active {
174+
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
175+
transform: scale(1.05);
176+
}
177+
178+
.welcome-message {
179+
display: none;
180+
text-align: center;
181+
font-size: 1.25rem;
182+
line-height: 1.6;
183+
}
184+
185+
.welcome-message.active {
186+
display: block;
187+
animation: fadeIn 0.8s ease-out;
188+
}
189+
190+
/* Mixcloud player styling */
191+
.mixcloud-player {
192+
width: 100%;
193+
height: 120px;
194+
border-radius: 0.5rem;
195+
overflow: hidden;
196+
margin: 2rem 0;
197+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
198+
transition: var(--transition);
199+
}
200+
201+
.mixcloud-player:hover {
202+
transform: scale(1.02);
203+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
204+
}
205+
151206
/* Animations */
152207
@keyframes float {
153208
0%, 100% { transform: translateY(0); }
@@ -177,6 +232,11 @@
177232
100% { transform: scale(1); }
178233
}
179234

235+
@keyframes fadeIn {
236+
from { opacity: 0; transform: translateY(10px); }
237+
to { opacity: 1; transform: translateY(0); }
238+
}
239+
180240
/* Responsive */
181241
@media (max-width: 768px) {
182242
.main-title {
@@ -191,6 +251,14 @@
191251
.welcome-text {
192252
padding: 1rem;
193253
}
254+
255+
.welcome-message {
256+
font-size: 1.1rem;
257+
}
258+
259+
.mixcloud-player {
260+
height: 100px;
261+
}
194262
}
195263
</style>
196264
</head>
@@ -225,34 +293,66 @@ <h1 class="main-title text-6xl md:text-8xl font-bold mb-8 opacity-0">
225293
</a>
226294
</nav>
227295

228-
<!-- Main Text - Improved with better styling -->
296+
<!-- Language Selector -->
297+
<div class="language-selector">
298+
<button class="language-btn active" data-lang="fr">Français</button>
299+
<button class="language-btn" data-lang="es">Español</button>
300+
<button class="language-btn" data-lang="en">English</button>
301+
<button class="language-btn" data-lang="eu">Euskara</button>
302+
</div>
303+
304+
<!-- Main Text with language options -->
229305
<div class="welcome-text mb-12">
230-
<p class="text-xl md:text-2xl leading-relaxed max-w-2xl mx-auto">
231-
Bienvenue sur le site officiel de David KRK, DJ et producteur de musique électronique spécialisé dans la Techno,
232-
la Trance et la Tech Trance. Actif depuis 2000, je me produis régulièrement en France, en Espagne et dans le Pays Basque,
233-
partageant ma passion pour les rythmes énergiques et les mélodies envoûtantes.
234-
</p>
306+
<!-- French -->
307+
<div class="welcome-message active" data-lang="fr">
308+
<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>
309+
</div>
310+
311+
<!-- Spanish -->
312+
<div class="welcome-message" data-lang="es">
313+
<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>
314+
</div>
315+
316+
<!-- English -->
317+
<div class="welcome-message" data-lang="en">
318+
<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>
319+
</div>
320+
321+
<!-- Basque -->
322+
<div class="welcome-message" data-lang="eu">
323+
<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>
324+
</div>
325+
</div>
326+
327+
<!-- Mixcloud Player -->
328+
<div class="mixcloud-player">
329+
<iframe
330+
width="100%"
331+
height="120"
332+
src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&light=1&feed=%2FDavidKRK%2F"
333+
frameborder="0">
334+
</iframe>
235335
</div>
236336

237337
<!-- Social Icons -->
238338
<div class="flex justify-center gap-6 mb-8">
239-
<a href="#" target="_blank" aria-label="Facebook" class="social-icon text-3xl text-white">
339+
<a href="https://www.facebook.com/DavidKRKofficial" target="_blank" aria-label="Facebook" class="social-icon text-3xl text-white">
240340
<i class="fab fa-facebook"></i>
241341
</a>
242-
<a href="#" target="_blank" aria-label="Twitter" class="social-icon text-3xl text-white">
243-
<i class="fab fa-twitter"></i>
244-
</a>
245-
<a href="#" target="_blank" aria-label="Instagram" class="social-icon text-3xl text-white">
342+
<a href="https://www.instagram.com/davidkrk/" target="_blank" aria-label="Instagram" class="social-icon text-3xl text-white">
246343
<i class="fab fa-instagram"></i>
247344
</a>
248-
<a href="#" target="_blank" aria-label="SoundCloud" class="social-icon text-3xl text-white">
249-
<i class="fab fa-soundcloud"></i>
345+
<a href="https://www.mixcloud.com/DavidKRK/" target="_blank" aria-label="Mixcloud" class="social-icon text-3xl text-white">
346+
<i class="fab fa-mixcloud"></i>
250347
</a>
251-
<a href="#" target="_blank" aria-label="YouTube" class="social-icon text-3xl text-white">
348+
<a href="https://www.youtube.com/@DavidKRKofficial" target="_blank" aria-label="YouTube" class="social-icon text-3xl text-white">
252349
<i class="fab fa-youtube"></i>
253350
</a>
254-
<a href="#" target="_blank" aria-label="Spotify" class="social-icon text-3xl text-white">
255-
<i class="fab fa-spotify"></i>
351+
<a href="https://soundcloud.com/david-krkofficial" target="_blank" aria-label="SoundCloud" class="social-icon text-3xl text-white">
352+
<i class="fab fa-soundcloud"></i>
353+
</a>
354+
<a href="https://www.tiktok.com/@davidkrk" target="_blank" aria-label="TikTok" class="social-icon text-3xl text-white">
355+
<i class="fab fa-tiktok"></i>
256356
</a>
257357
</div>
258358

@@ -300,6 +400,61 @@ <h3 class="text-xl font-bold mb-4">Dernière sortie</h3>
300400
const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
301401
welcomeText.style.transform = `perspective(500px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
302402
});
403+
404+
// Language selector functionality
405+
const languageBtns = document.querySelectorAll('.language-btn');
406+
const welcomeMessages = document.querySelectorAll('.welcome-message');
407+
408+
languageBtns.forEach(btn => {
409+
btn.addEventListener('click', () => {
410+
// Remove active class from all buttons and messages
411+
languageBtns.forEach(b => b.classList.remove('active'));
412+
welcomeMessages.forEach(msg => msg.classList.remove('active'));
413+
414+
// Add active class to clicked button
415+
btn.classList.add('active');
416+
417+
// Show corresponding message
418+
const lang = btn.dataset.lang;
419+
document.querySelector(`.welcome-message[data-lang="${lang}"]`).classList.add('active');
420+
421+
// Reset the auto-rotation timer
422+
resetAutoRotation();
423+
});
424+
});
425+
426+
// Auto-rotation of languages every 5 seconds
427+
let rotationInterval;
428+
const languages = ['fr', 'es', 'en', 'eu'];
429+
let currentIndex = 0;
430+
431+
function rotateLanguage() {
432+
currentIndex = (currentIndex + 1) % languages.length;
433+
const nextLang = languages[currentIndex];
434+
435+
// Remove active class from all buttons and messages
436+
languageBtns.forEach(b => b.classList.remove('active'));
437+
welcomeMessages.forEach(msg => msg.classList.remove('active'));
438+
439+
// Add active class to next language
440+
document.querySelector(`.language-btn[data-lang="${nextLang}"]`).classList.add('active');
441+
document.querySelector(`.welcome-message[data-lang="${nextLang}"]`).classList.add('active');
442+
}
443+
444+
function resetAutoRotation() {
445+
clearInterval(rotationInterval);
446+
rotationInterval = setInterval(rotateLanguage, 5000);
447+
}
448+
449+
// Start auto-rotation
450+
resetAutoRotation();
451+
452+
// Pause auto-rotation when hovering over welcome text
453+
welcomeText.addEventListener('mouseenter', () => {
454+
clearInterval(rotationInterval);
455+
});
456+
457+
welcomeText.addEventListener('mouseleave', resetAutoRotation);
303458
});
304459
</script>
305460
</body>

0 commit comments

Comments
 (0)