Upload folder using huggingface_hub

-i

@@ -0,0 +1 @@
+619be34767d0f5c4c0bb6686d5502c2078b2e0a2<|ENT|><|RY|>Update website with improved design and multi-language support<|COM|><|MIT|>

.devcontainer/devcontainer.json

@@ -0,0 +1,29 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Node.js & TypeScript",
+	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"Codeium.codeium"
+			]
+		}
+	}
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// "forwardPorts": [],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	// "postCreateCommand": "yarn install",
+
+	// Configure tool-specific properties.
+	// "customizations": {},
+
+	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+	// "remoteUser": "root"
+}

.gitattributes

@@ -1,35 +1,5 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+* text=auto
+*.jpg filter=lfs diff=lfs merge=lfs -text
+images/optimized/dj_crowd.webp filter=lfs diff=lfs merge=lfs -text
+images/optimized/dj_crowd_view.webp filter=lfs diff=lfs merge=lfs -text
+images/optimized/dj_red_lights.webp filter=lfs diff=lfs merge=lfs -text

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.github/import { test, expect } from '@playwrigh.txt

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test';
+
+test('vérifie le chargement de la page', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  const title = await page.title();
+  expect(title).toBe('David KRK - Techno DJ & Producer'); // Mettez à jour le titre attendu
+});

.github/workflows/ci-cd.yml

@@ -0,0 +1,92 @@
+name: CI/CD
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  quality-checks:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          
+      - run: npm install
+      - run: npm run validate
+
+  build:
+    needs: quality-checks
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          
+      - run: npm install
+      - run: npm run build
+
+      - name: List contents of dist/images/optimized
+        run: |
+          ls -l dist/images/optimized || echo "No optimized images found"
+      
+      - uses: actions/upload-artifact@v3
+        with:
+          name: dist
+          path: dist
+
+  deploy:
+    needs: build
+    if: github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/download-artifact@v3
+        with:
+          name: dist
+          path: dist
+
+      - name: List contents of dist/images/optimized before deploy
+        run: |
+          ls -l dist/images/optimized || echo "No optimized images found"
+      
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          publish_branch: gh-pages
+          commit_message: "Deploy: ${{ github.event.head_commit.message }}"
+          
+      - name: Discord Notification
+        if: success()
+        uses: Ilshidur/action-discord@master
+        with:
+          args: "🚀 Déploiement réussi: ${{ github.repository }}"
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+
+  sync:
+    needs: deploy
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Sync files
+        uses: repo-sync/github-sync@v2
+        with:
+          source_repo: 'DavidKRK/DavidKRK.github.io'
+          source_branch: 'main'
+          destination_branch: 'gh-pages'
+          file_patterns: 'images/optimized/*'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,23 @@
+<<<<<<< HEAD
+.aider*
+=======
+# Dependencies
+node_modules/
+package-lock.json
+
+# Build output
+dist/
+*.log
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment
+.env
+.env.local 
+>>>>>>> 0493f4993fce6719914b5aacb418e45a7baaddf2

.hintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "development"
+  ]
+}

.htaccess

@@ -0,0 +1,35 @@
+# Enable GZIP compression
+<IfModule mod_deflate.c>
+    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript application/json
+</IfModule>
+
+# Browser caching
+<IfModule mod_expires.c>
+    ExpiresActive On
+    ExpiresByType image/jpg "access plus 1 year"
+    ExpiresByType image/jpeg "access plus 1 year"
+    ExpiresByType image/png "access plus 1 year"
+    ExpiresByType image/webp "access plus 1 year"
+    ExpiresByType text/css "access plus 1 month"
+    ExpiresByType application/javascript "access plus 1 month"
+    ExpiresByType text/javascript "access plus 1 month"
+    ExpiresByType application/x-javascript "access plus 1 month"
+    ExpiresByType image/x-icon "access plus 1 year"
+    ExpiresDefault "access plus 2 days"
+</IfModule>
+
+# Security headers
+<IfModule mod_headers.c>
+    Header set X-Content-Type-Options "nosniff"
+    Header set X-Frame-Options "DENY"
+    Header set X-XSS-Protection "1; mode=block"
+    Header set Referrer-Policy "strict-origin-when-cross-origin"
+    Header set Permissions-Policy "geolocation=(), microphone=(), camera=()"
+</IfModule>
+
+# Redirect www to non-www
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
+    RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
+</IfModule> 

.stylelintignore

@@ -0,0 +1,2 @@
+# Ignore CSS build output (generated by Tailwind, PostCSS, etc.)
+dist/output.css

.stylelintrc.json

@@ -0,0 +1,18 @@
+{
+    "extends": "stylelint-config-standard",
+    "rules": {
+      "at-rule-no-unknown": [
+        true,
+        {
+          "ignoreAtRules": [
+            "tailwind",
+            "apply",
+            "variants",
+            "responsive",
+            "screen",
+            "layer"
+          ]
+        }
+      ]
+    }
+  }

CNAME

@@ -0,0 +1 @@
+www.davidkrk.com

README.md

@@ -1,12 +1 @@
----
-title: Https Huggingface Co Davidkrk
-emoji: 📚
-colorFrom: red
-colorTo: indigo
-sdk: gradio
-sdk_version: 5.29.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# DavidKRK.github.io 

assets/css/style.css

@@ -0,0 +1,43 @@
+/* Ensure :root variables are defined, e.g., in index.html's inline style or move them here */
+
+/*
+:root {
+    --neon-red: #FF0000;
+}
+*/
+
+/* Footer Social Links Styles */
+.footer-social-links a {
+    color: #ccc;
+    margin: 0 10px;
+    font-size: 1.5rem;
+    transition: all 0.3s ease; /* Apply transition to all properties */
+    display: inline-block; /* Required for transform to work correctly */
+}
+
+.footer-social-links a:hover {
+    color: white;
+    text-shadow: 0 0 10px var(--neon-red); /* Simplified neon glow */
+    transform: scale(1.1); /* Scale animation on hover */
+}
+
+/* Media Queries for Footer Social Links */
+@media (width <= 768px) {
+    .footer-social-links a {
+        font-size: 1.3rem;
+        margin: 0 8px;
+    }
+}
+
+@media (width <= 480px) {
+    .footer-social-links { /* Ensure flex display is maintained if needed */
+        display: flex;
+        justify-content: center;
+        margin-bottom: 8px; /* Keep margin from original inline style */
+    }
+
+    .footer-social-links a {
+        font-size: 1.2rem;
+        margin: 0 8px;
+    }
+}

bio.html

@@ -0,0 +1,693 @@
+<!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">
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="images/logo%2030-01-25.png">
+    <title>David KRK · Biographie - DJ Techno &amp; Producteur</title>
+    <!-- Meta tags for SEO -->
+    <meta name="description" content="Découvrez l'histoire de 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, biographie, DJ techno, producteur, France, Espagne, Pays Basque, Trance, Tech Trance">
+    <meta name="author" content="David KRK">
+    <!-- Open Graph / Social Media -->
+    <meta property="og:title" content="David KRK · Biographie - DJ Techno &amp; Producteur">
+    <meta property="og:description" content="Découvrez l'histoire de David KRK, DJ Techno international se produisant en France, Espagne et Pays Basque depuis 2000.">
+    <meta property="og:image" content="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">
+    <meta property="og:url" content="https://davidkrk.com/bio.html">
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="David KRK · Biographie">
+    <meta name="twitter:description" content="DJ Techno international - France, Espagne, Pays Basque">
+    <meta name="twitter:image" content="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">
+    <!-- Preload critical resources -->
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Russo+One&amp;display=swap" as="style">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" as="style">
+    <link rel="preload" href="dist/output.css" as="style">
+    <!-- Stylesheets -->
+    <link href="https://fonts.googleapis.com/css2?family=Russo+One&amp;display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
+    <link rel="stylesheet" href="dist/output.css">
+    <style>
+        /* Styles de base */
+        body {
+            background: linear-gradient(135deg, #141414, #000000);
+            font-family: 'Russo One', sans-serif;
+            color: #FFFFFF;
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+        }
+
+<title>David KRK · Biographie - DJ Techno &amp; Producteur</title>
+
+<!-- Meta tags for SEO -->
+<meta name="description" content="Découvrez l'histoire de 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, biographie, DJ techno, producteur, France, Espagne, Pays Basque, Trance, Tech Trance">
+<meta name="author" content="David KRK">
+
+<!-- Open Graph / Social Media -->
+<meta property="og:title" content="David KRK · Biographie - DJ Techno &amp; Producteur">
+<meta property="og:description" content="Découvrez l'histoire de David KRK, DJ Techno international se produisant en France, Espagne et Pays Basque depuis 2000.">
+<meta property="og:image" content="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">
+<meta property="og:url" content="https://davidkrk.com/bio.html">
+
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="David KRK · Biographie">
+<meta name="twitter:description" content="DJ Techno international - France, Espagne, Pays Basque">
+<meta name="twitter:image" content="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">
+
+<!-- Preload critical resources -->
+<link rel="preload" href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" as="style">
+<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" as="style">
+<link rel="preload" href="dist/output.css" as="style">
+
+<!-- Stylesheets -->
+<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.2.1/css/all.min.css">
+<link rel="stylesheet" href="dist/output.css">
+<style>
+/* Styles de base */
+body {
+background: linear-gradient(135deg, #141414, #000000);
+font-family: 'Russo One', sans-serif;
+color: #FFFFFF;
+margin: 0;
+padding: 0;
+min-height: 100vh;
+}
+
+.container {
+max-width: 1200px;
+margin: 0 auto;
+padding: 0 1rem;
+}
+
+.text-center {
+text-align: center;
+}
+
+.mb-4 {
+margin-bottom: 1rem;
+}
+
+.mt-4 {
+margin-top: 1rem;
+}
+
+.text-8xl {
+font-size: 6rem;
+}
+
+.text-2xl {
+font-size: 1.5rem;
+}
+
+.font-bold {
+font-weight: bold;
+}
+
+.main-content-area {
+flex-grow: 1;
+opacity: 0;
+animation: fadeIn 0.5s ease-in-out forwards;
+animation-delay: 0.3s;
+}
+
+.hover-underline-animation {
+background: linear-gradient(to right, #FF69B4, #FFC67D, #8BC34A, #03A9F4, #FF69B4);
+background-clip: text;
+-webkit-background-clip: text;
+color: transparent;
+animation: gradient 10s ease infinite;
+background-size: 200% auto;
+transition: all 0.3s var(--transition-timing);
+position: relative;
+padding-bottom: 2px;
+}
+
+.hover-underline-animation::after {
+content: '';
+position: absolute;
+width: 100%;
+height: 2px;
+bottom: 0;
+left: 0;
+background: linear-gradient(to right, #FF69B4, #FFC67D);
+transform: scaleX(0);
+transform-origin: right;
+transition: transform 0.3s var(--transition-timing);
+}
+
+.hover-underline-animation:hover::after {
+transform: scaleX(1);
+transform-origin: left;
+}
+
+@keyframes gradient {
+0% { background-position: 0% 50%; }
+50% { background-position: 100% 50%; }
+100% { background-position: 0% 50%; }
+}
+
+.title-animation {
+animation: fadeInDown var(--animation-duration) var(--transition-timing);
+opacity: 0;
+animation-fill-mode: forwards;
+}
+
+@keyframes fadeInDown {
+from { 
+opacity: 0;
+transform: translateY(-30px);
+}
+to {
+opacity: 1;
+transform: translateY(0);
+}
+}
+
+@keyframes fadeIn {
+from { opacity: 0; }
+to { opacity: 1; }
+}
+
+.lang-content {
+display: none;
+opacity: 0;
+transform: translateY(20px);
+transition: all 0.3s ease;
+position: relative;
+width: 100%;
+visibility: hidden;
+}
+
+.lang-content.active {
+display: block !important;
+opacity: 1 !important;
+transform: translateY(0) !important;
+visibility: visible !important;
+position: relative !important;
+}
+
+.content-container {
+position: relative;
+min-height: 500px;
+overflow: hidden;
+perspective: 1000px;
+}
+
+.content-wrapper {
+transition: transform var(--animation-duration) var(--transition-timing);
+transform-style: preserve-3d;
+}
+
+.content-wrapper h3 {
+opacity: 0;
+transform: translateY(-20px);
+animation: fadeInDown var(--animation-duration) var(--transition-timing) forwards;
+}
+
+.mb-4 p {
+opacity: 0;
+transform: translateY(20px);
+transition: all var(--animation-duration) var(--transition-timing);
+}
+
+.mb-4 p.fade-in {
+opacity: 1;
+transform: translateY(0);
+}
+
+.language-nav {
+position: relative;
+z-index: 3;
+display: flex;
+flex-wrap: wrap;
+justify-content: center;
+gap: 1rem;
+margin-bottom: 2rem;
+}
+
+.language-nav button {
+background: transparent;
+border: none;
+padding: 0.5rem 1rem;
+cursor: pointer;
+transition: all 0.3s ease;
+position: relative;
+color: var(--text-color);
+font-size: 1.25rem;
+}
+
+.language-nav button:hover {
+transform: translateY(-2px);
+color: var(--primary-color);
+}
+
+.language-nav button.active {
+font-weight: bold;
+}
+
+.language-nav button.active::after {
+content: '';
+position: absolute;
+bottom: -2px;
+left: 0;
+width: 100%;
+height: 2px;
+background: linear-gradient(to right, #FF69B4, #FFC67D);
+transform: scaleX(1);
+transition: transform 0.3s ease;
+}
+
+@media (max-width: 768px) {
+body {
+padding-bottom: 100px;
+}
+
+.language-nav {
+gap: 0.5rem;
+}
+
+.language-nav button {
+padding: 0.3rem 0.7rem;
+font-size: 1rem;
+}
+
+h1 {
+font-size: 2.5rem !important;
+}
+
+.hover-underline-animation {
+font-size: 1rem;
+}
+}
+
+@media (max-width: 480px) {
+.language-nav {
+flex-direction: column;
+align-items: center;
+gap: 0.3rem;
+}
+
+h1 {
+font-size: 2rem !important;
+}
+
+.language-nav button {
+width: 100%;
+text-align: center;
+}
+
+.hover-underline-animation {
+font-size: 0.9rem;
+}
+}
+
+.neon {
+animation: neon 2s ease-in-out infinite;
+}
+
+@keyframes neon {
+0%, 100% { color: #FFFF00; }
+50% { color: #00FFFF; }
+}
+
+.rotate {
+animation: rotate 10s linear infinite;
+}
+
+@keyframes rotate {
+from { transform: rotate(0deg); }
+to { transform: rotate(360deg); }
+}
+
+/* Style pour le footer fixe */
+.site-footer-original {
+position: fixed;
+bottom: 1rem; /* 4 de tailwind */
+right: 1rem; /* 4 de tailwind */
+display: flex;
+align-items: center;
+z-index: 50;
+background-color: rgba(20, 20, 20, 0.8); /* Optionnel: fond semi-transparent */
+padding: 0.5rem;
+border-radius: 8px;
+}
+</style>
+</head>
+<body>
+
+<div class="main-content-area container mx-auto px-6 pt-8">
+<h1 class="text-8xl font-bold text-center mb-4 title-animation">David KRK</h1>
+
+        <nav id="language-navigation" class="language-nav text-center mb-12" aria-label="Sélecteur de langue principal">
+            <!-- Lien "Back" -->
+            <a href="index.html" class="text-xl mx-4 hover-underline-animation">Back</a>
+            <!-- Boutons de langue -->
+            <button type="button" data-lang="francais" class="text-xl mx-4 hover-underline-animation active">Français</button>
+            <button type="button" data-lang="castellano" class="text-xl mx-4 hover-underline-animation">Castellano</button>
+            <button type="button" data-lang="euskara" class="text-xl mx-4 hover-underline-animation">Euskara</button>
+            <button type="button" data-lang="english" class="text-xl mx-4 hover-underline-animation">English</button>
+            <button type="button" data-lang="romana" class="text-xl mx-4 hover-underline-animation">Română</button>
+            <button type="button" data-lang="zhongwen" class="text-xl mx-4 hover-underline-animation">中文</button>
+            <button type="button" data-lang="nihongo" class="text-xl mx-4 hover-underline-animation">日本語</button>
+            <button type="button" data-lang="ukrainian" class="text-xl mx-4 hover-underline-animation">Українська</button>
+        </nav>
+
+    <div class="main-content-area container mx-auto px-6 pt-8">
+        <h1 class="text-8xl font-bold text-center mb-4 title-animation">David KRK</h1>
+    </div>
+    <nav id="language-navigation-2" class="language-nav text-center mb-12" aria-label="Sélecteur de langue secondaire">
+        <a href="index.html" class="text-xl mx-4 hover-underline-animation">Back</a>
+        <button type="button" data-lang="francais" class="text-xl mx-4 hover-underline-animation active">Français</button>
+        <button type="button" data-lang="castellano" class="text-xl mx-4 hover-underline-animation">Castellano</button>
+        <button type="button" data-lang="euskara" class="text-xl mx-4 hover-underline-animation">Euskara</button>
+        <button type="button" data-lang="english" class="text-xl mx-4 hover-underline-animation">English</button>
+        <button type="button" data-lang="romana" class="text-xl mx-4 hover-underline-animation">Română</button>
+        <button type="button" data-lang="zhongwen" class="text-xl mx-4 hover-underline-animation">中文</button>
+        <button type="button" data-lang="nihongo" class="text-xl mx-4 hover-underline-animation">日本語</button>
+        <button type="button" data-lang="ukrainian" class="text-xl mx-4 hover-underline-animation">Українська</button>
+    </nav>
+
+
+        <!-- Contenu des langues -->
+        <div class="content-container">
+            <!-- Français -->
+            <div id="francais" class="lang-content" data-lang="francais">
+                <div class="content-wrapper">
+                    <h3 class="text-2xl font-bold mt-4 mb-2 title-animation">Français</h3>
+                    <div class="mb-4">
+                        <p>David KRK, né en août 1982, est un DJ qui se produit en Espagne, France et Côte Basque depuis 2000.</p>
+                        <p>Son style de base : Trance - Tech Trance, se diversifie aujourd'hui en complément de sons plus Techno.</p>
+                        <p>Il est apprécié autant dans les clubs Espagnols que dans les complexes Français.</p>
+                        <p>Il a partagé des scènes avec des artistes tels que PG-2 (Ex résident Txitxarro - Actuellement Nexo),</p>
+                        <p>Diego ATB (Ex résident Txitxarro), The Fluid (Ex résident Inox - Actuellement Zul), Montxo (Ex Résident Nyx - Actuellement Zul)</p>
+                        <p>mais aussi avec le collectif Espagnol connu sous le nom de North Trance Collective (Dj Sergi - Dj Gordon et Unai ATH).</p>
+                        <p>Il a mixé dans quelques radios et Webradios telles que le programme Line Up sur Espiral Fm à Pampelune sur 99.7 et aussi sur Hesat Radio.</p>
+                        <p>Très vite, David ressent le besoin d'exprimer ses sentiments à travers ses propres mixes.</p>
+                        <p>Ses sets lui viennent du fond du cœur et le style qu'il joue touche le public grâce à cette sensibilité, ses émotions, qui se ressentent à travers son mix.</p>
+                        <p>Son toucher particulier fait de ce DJ un musicien hors pair, dix minutes lui suffisent pour vous transporter dans son univers.</p>
+                        <p>Il choisit ses disques méticuleusement pour que cela lui corresponde au moment présent et pour partager cet enthousiasme à son public.</p>
+                        <p>Son prochain projet sera de produire un son Techno, qui sera sa référence, et c'est avec impatience que nous l'attendons!</p>
+                   </div>
+               </div>
+           </div>
+
+            <!-- Castellano -->
+            <div id="castellano" class="lang-content" data-lang="castellano">
+                <div class="content-wrapper">
+                    <h3 class="text-2xl font-bold mt-4 mb-2 title-animation">Castellano</h3>
+                    <div class="mb-4">
+                        <p>David KRK, nacido en agosto de 1982, es un DJ que se presenta en España, Francia y la Costa Vasca desde 2000.</p>
+                        <p>Su estilo base, Trance - Tech Trance, se ha diversificado hoy en día con la incorporación de sonidos más Techno.</p>
+                        <p>Es apreciado tanto en los clubes españoles como en los complejos franceses.</p>
+                        <p>Ha compartido escenarios con artistas como PG-2 (ex residente de Txitxarro - actualmente en Nexo),</p>
+                        <p>Diego ATB (ex residente de Txitxarro), The Fluid (ex residente de Inox - actualmente en Zul), Montxo (ex residente de Nyx - actualmente en Zul)</p>
+                        <p>así como con el colectivo español conocido como North Trance Collective (DJ Sergi, DJ Gordon y Unai ATH).</p>
+                        <p>Ha mezclado en varias radios y webradios, como el programa Line Up en Espiral FM en Pamplona en el 99.7, y también en Hesat Radio.</p>
+                        <p>Muy pronto, David siente la necesidad de expresar sus sentimientos a través de sus propias mezclas.</p>
+                        <p>Sus sets, que vienen del fondo del corazón, tocan al público gracias a esta sensibilidad y a las emociones que se sienten a través de su mezcla.</p>
+                        <p>Su toque particular hace de este DJ un músico excepcional; diez minutos son suficientes para transportarte a su universo.</p>
+                        <p>Elige sus discos meticulosamente para que correspondan al momento presente y para compartir ese entusiasmo con su público.</p>
+                        <p>Su próximo proyecto será producir un sonido Techno, que será su referencia, ¡y lo esperamos con impaciencia!</p>
+                   </div>
+               </div>
+           </div>
+
+            <!-- Euskara -->
+            <div id="euskara" class="lang-content" data-lang="euskara">
+                <div class="content-wrapper">
+                    <h3 class="text-2xl font-bold mt-4 mb-2 title-animation">Euskara</h3>
+                    <div class="mb-4">
+                        <p>David KRK-ren biografia: 1982-ko abuztuan jaioa, David KRK 2000-garren urtetik aurrera Espainian, Frantzian eta Euskadin hezitako "deejay" gazte bat da.</p>
+                        <p>Bere estilo nagusia: Trance eta Techno - Trance dira. Gaur egun elektro-trance izeneko doinu elektronikoa ere jorratzen du.</p>
+                        <p>Espainian eta Frantzian egindako hainbat jaialdi garrantzitsutan egon da DJ hauekin kabina konpartituz:</p>
+                        <p>PG-2 (Txitxarro-ko residente ohia, orain Santander-go Line Up-en dagoena), Diego ATB (Txitxarro-ko residente ohia), The Fluid (Inox-eko residente ohia, orain Zul-en dagoena), Montxo (Nyx-eko residente ohia, orain Zul alter-ean dagoena).</p>
+                        <p>North Trance Collective izeneko kolektibo espainiarraren (DJ Sergi, DJ Gordon eta Unai ATH), Shred'R (Itzela Multiplex) eta Mr Hounck (Sonotone Evénement) laguntzarekin ere parte hartu du.</p>
+                        <p>Zenbait irrati eta web irratietan parte hartu du, adibidez Line Up saioan (Iruñeko 99.7 Espiral FM-en) edota Hesat irratian (http://hesat.libcast.com/).</p>
+                        <p>Bapatean, David-ek bere sentimenduak musika sesioen bidez adierazteko beharra sentitzen du.</p>
+                        <p>Eta sesio hauek bere bihotzeko sakonenetik ateratzen dira. Bera musikaren bitartez publiko sentikor bat erakarri nahi du.</p>
+                        <p>Bere egiteko moduak deejay eta musikari paregabea egiten dute; 10 minututan lor dezake publikoa eta clubber-ak unibertsora eramatea.</p>
+                        <p>Diskoak xehetasunaz aukeratzen ditu une zehatz bakoitzean transmititu nahi duena adierazteko eta bere irrika publikoarekin partaide izateko.</p>
+                        <p>David-en hurrengo proiektua Trance soinu propioa sortzea izango da.</p>
+                        <p>Berehala entzu ahal izango ditugu bere produkzio guztiak.</p>
+                   </div>
+               </div>
+           </div>
+
+            <!-- English -->
+            <div id="english" class="lang-content" data-lang="english">
+                <div class="content-wrapper">
+                    <h3 class="text-2xl font-bold mt-4 mb-2 title-animation">English</h3>
+                    <div class="mb-4">
+                        <p>David KRK, born in August 1982, is a DJ who has been performing in Spain, France, and the Basque Coast since 2000.</p>
+                        <p>His primary style: Trance - Tech Trance, is now diversifying to include more Techno sounds.</p>
+                        <p>He is appreciated in both Spanish clubs and French venues.</p>
+                        <p>He has shared stages with artists such as PG-2 (Former resident at Txitxarro - Currently at Nexo),</p>
+                        <p>Diego ATB (Former resident at Txitxarro), The Fluid (Former resident at Inox - Currently at Zul), Montxo (Former resident at Nyx - Currently at Zul)</p>
+                        <p>as well as with the Spanish collective known as North Trance Collective (DJ Sergi - DJ Gordon and Unai ATH).</p>
+                        <p>He has mixed on several radio stations and web radios such as the Line Up program on Espiral FM in Pamplona on 99.7 and also on Hesat Radio.</p>
+                        <p>Very quickly, David felt the need to express his feelings through his own mixes.</p>
+                        <p>His sets come from the bottom of his heart, and the style he plays resonates with the audience due to this sensitivity and emotions that are felt through his mix.</p>
+                        <p>His unique touch makes this DJ an exceptional musician; ten minutes are enough to transport you into his universe.</p>
+                        <p>He meticulously chooses his records to match his current feelings and to share this enthusiasm with his audience.</p>
+                        <p>His next project will be to produce a Techno sound, which will be his reference, and we eagerly await it!</p>
+                   </div>
+               </div>
+           </div>
+
+            <!-- Українська -->
+            <div id="ukrainian" class="lang-content" data-lang="ukrainian">
+                <div class="content-wrapper">
+                    <h3 class="text-2xl font-bold mt-4 mb-2 title-animation">Українська</h3>
+                    <div class="mb-4">
+                        <p>Девід КРК, народився в серпні 1982 року, є DJ, який виступає в Іспанії, Франції та Країні Басків з 2000 року.</p>
+                        <p>Його основний стиль: Trance - Tech Trance, зараз розширюється, доповнюючись більш Techno звучанням.</p>
+                        <p>Він цінується як в іспанських клубах, так і у французьких комплексах.</p>
+                        <p>Він ділив сцену з такими артистами, як PG-2 (колишній резидент Txitxarro - зараз Nexo),</p>
+                        <p>Дієго ATB (колишній резидент Txitxarro), The Fluid (колишній резидент Inox - зараз Zul), Montxo (колишній резидент Nyx - зараз Zul)</p>
+                        <p>а також з іспанським колективом, відомим як North Trance Collective (Dj Sergi - Dj Gordon та Unai ATH).</p>
+                        <p>Він міксував на кількох радіостанціях та Webradio, таких як програма Line Up на Espiral Fm в Памплоні на 99.7, а також на Hesat Radio.</p>
+                        <p>Дуже швидко Девід відчуває потребу виражати свої почуття через власні мікси.</p>
+                        <p>Його сети йдуть від самого серця, і стиль, який він грає, торкається публіки завдяки цій чутливості, його емоціям, які відчуваються через його мікс.</p>
+                        <p>Його особливий підхід робить цього DJ неперевершеним музикантом, десяти хвилин йому достатньо, щоб перенести вас у свій всесвіт.</p>
+                        <p>Він ретельно обирає свої диски, щоб вони відповідали його поточному настрою та щоб поділитися цим ентузіазмом зі своєю публікою.</p>
+                        <p>Його наступним проектом буде продюсування Techno звучання, яке стане його орієнтиром, і ми з нетерпінням чекаємо на це!</p>
+                   </div>
+               </div>
+           </div>
+
+            <!-- Română -->
+            <div id="romana" class="lang-content" data-lang="romana">
+                <div class="content-wrapper">
+                    <h3 class="text-2xl font-bold mt-4 mb-2 title-animation">Română</h3>
+                    <div class="mb-4">
+                        <p>David KRK, născut în august 1982, este un DJ care activează în Spania, Franța și Țara Bascilor din anul 2000.</p>
+                        <p>Stilul său de bază: Trance - Tech Trance, se diversifică astăzi prin completarea cu sunete mai Techno.</p>
+                        <p>Este apreciat atât în cluburile spaniole, cât și în complexele franceze.</p>
+                        <p>A împărțit scene cu artiști precum PG-2 (fost rezident Txitxarro - în prezent Nexo),</p>
+                        <p>Diego ATB (fost rezident Txitxarro), The Fluid (fost rezident Inox - în prezent Zul), Montxo (fost rezident Nyx - în prezent Zul)</p>
+                        <p>dar și cu colectivul spaniol cunoscut sub numele de North Trance Collective (Dj Sergi - Dj Gordon și Unai ATH).</p>
+                        <p>A mixat la câteva posturi de radio și Webradio, precum programul Line Up la Espiral Fm în Pamplona pe 99.7 și, de asemenea, la Hesat Radio.</p>
+                        <p>Foarte repede, David simte nevoia de a-și exprima sentimentele prin propriile mixuri.</p>
+                        <p>Seturile sale vin din adâncul inimii, iar stilul pe care îl abordează atinge publicul datorită acestei sensibilități, emoțiilor sale, care se resimt prin mixul său.</p>
+                        <p>Atingerea sa particulară face din acest DJ un muzician excepțional, zece minute fiind suficiente pentru a te transporta în universul său.</p>
+                        <p>Își alege discurile meticulos pentru a se potrivi momentului prezent și pentru a împărtăși acest entuziasm cu publicul său.</p>
+                        <p>Următorul său proiect va fi producerea unui sunet Techno, care va fi referința sa, și îl așteptăm cu nerăbdare!</p>
+                   </div>
+               </div>
+           </div>
+
+            <!-- 中文 -->
+            <div id="zhongwen" class="lang-content" data-lang="zhongwen">
+                <div class="content-wrapper">
+                    <h3 class="text-2xl font-bold mt-4 mb-2 title-animation">中文</h3>
+                    <div class="mb-4">
+                        <p>David KRK，1982年8月出生，自2000年以来一直在西班牙、法国和巴斯克地区演出的DJ。</p>
+                        <p>他的基础风格是Trance - Tech Trance，如今也融入了更多的Techno元素。</p>
+                        <p>他在西班牙俱乐部和法国场馆都备受赞赏。</p>
+                        <p>他曾与PG-2（前Txitxarro驻场DJ - 现在Nexo）、</p>
+                        <p>Diego ATB（前Txitxarro驻场DJ）、The Fluid（前Inox驻场DJ - 现在Zul）、Montxo（前Nyx驻场DJ - 现在Zul）等艺术家同台演出，</p>
+                        <p>也曾与名为North Trance Collective的西班牙团体（包括DJ Sergi - DJ Gordon和Unai ATH）合作。</p>
+                        <p>他曾在多个广播电台和网络电台进行混音，例如潘普洛纳99.7 Espiral Fm的Line Up节目以及Hesat Radio。</p>
+                        <p>很快，David就感受到需要通过自己的混音来表达情感。</p>
+                        <p>他的音乐集发自内心，他所播放的风格凭借其敏感性和情感触动听众，这些都通过他的混音得以体现。</p>
+                        <p>他独特的触感使这位DJ成为一位杰出的音乐家，十分钟足以将你带入他的宇宙。</p>
+                        <p>他精心挑选唱片，以使其符合当下时刻，并与听众分享这份热情。</p>
+                        <p>他的下一个项目将是制作一种Techno声音，这将成为他的代表作，我们对此充满期待！</p>
+                   </div>
+               </div>
+           </div>
+
+            <!-- 日本語 -->
+            <div id="nihongo" class="lang-content" data-lang="nihongo">
+                <div class="content-wrapper">
+                    <h3 class="text-2xl font-bold mt-4 mb-2 title-animation">日本語</h3>
+                    <div class="mb-4">
+                        <p>1982年8月生まれのDavid KRKは、2000年からスペイン、フランス、バスク地方で活動しているDJです。</p>
+                        <p>彼の基本的なスタイルはトランス - テックトランスですが、今日ではよりテクノサウンドを取り入れて多様化しています。</p>
+                        <p>彼はスペインのクラブとフランスの会場の両方で高く評価されています。</p>
+                        <p>彼はPG-2（元Txitxarroレジデント - 現在Nexo）、</p>
+                        <p>Diego ATB（元Txitxarroレジデント）、The Fluid（元Inoxレジデント - 現在Zul）、Montxo（元Nyxレジデント - 現在Zul）などのアーティストとステージを共にしました。</p>
+                        <p>また、North Trance Collectiveとして知られるスペインのコレクティブ（Dj Sergi - Dj Gordon、Unai ATH）とも共演しています。</p>
+                        <p>彼はパンプローナの99.7 Espiral FmのLine UpプログラムやHesat Radioなど、いくつかのラジオ局やウェブラジオでミックスを行いました。</p>
+                        <p>すぐに、Davidは自身のミックスを通じて感情を表現する必要性を感じました。</p>
+                        <p>彼のセットは心の底から生まれ、彼がプレイするスタイルは、その感受性、彼のミックスを通じて感じられる感情によって聴衆に響きます。</p>
+                        <p>彼の独特なタッチはこのDJを卓越したミュージシャンにしており、10分もあれば彼の宇宙へとあなたを誘います。</p>
+                        <p>彼は現在の瞬間に合うようにレコードを細心の注意を払って選び、その熱意を聴衆と共有します。</p>
+                        <p>彼の次のプロジェクトは、彼の代表となるテクノサウンドを制作することであり、私たちはそれを心待ちにしています！</p>
+                   </div>
+               </div>
+           </div>
+       </div>
+        <!-- Fin du contenu des langues -->
+
+</div>
+<div class="fixed-footer">
+    <footer class="flex items-center gap-4">
+        <div>
+            <p class="text-gray-400 mb-2">&copy; 2025 All rights reserved <span class="rotate inline-block">David KRK</span></p>
+            <p class="neon font-bold text-lg">"May The Techno Be With You"</p>
+        </div>
+        <div class="footer-links flex gap-3 items-center">
+            <a href="https://facebook.com/DavidKRKofficial" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-white" aria-label="Facebook de David KRK">
+                <i class="fab fa-facebook text-xl"></i>
+            </a>
+            <a href="mailto:davidkrkofficial@gmail.com" class="text-gray-300 hover:text-white text-sm">
+                Contact
+            </a>
+        </div>
+        <div class="footer-logo">
+            <!-- VÉRIFIEZ QUE CE CHEMIN EST CORRECT ! -->
+            <!-- L'image doit être dans le même dossier que ce fichier HTML, ou ajustez le chemin -->
+            <img src="images/logo 30-01-25.png" alt="Logo David KRK" class="w-20 h-20 rounded-full border-4 border-white">
+        </div>
+    </footer>
+</div>
+<script>
+            document.addEventListener('DOMContentLoaded', function() {
+                // Cache tous les contenus au démarrage
+
+
+<div class="fixed-footer">
+        <footer class="flex items-center gap-4">
+            <div>
+                <p class="text-gray-400 mb-2">&copy; 2025 All rights reserved <span class="rotate inline-block">David KRK</span></p>
+                <p class="neon font-bold text-lg">"May The Techno Be With You"</p>
+            </div>
+            <div class="footer-links flex gap-3 items-center">
+                <a href="https://facebook.com/DavidKRKofficial" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-white" aria-label="Facebook de David KRK">
+                    <i class="fab fa-facebook text-xl"></i>
+                </a>
+                <a href="mailto:davidkrkofficial@gmail.com" class="text-gray-300 hover:text-white text-sm">Contact</a>
+            </div>
+            <div class="footer-logo">
+                <img src="images/logo 30-01-25.png" alt="Logo David KRK" class="w-20 h-20 rounded-full border-4 border-white">
+            </div>
+        </footer>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Cache tous les contenus au démarrage
+            document.querySelectorAll('.lang-content').forEach(content => {
+                content.style.display = 'none';
+                content.classList.remove('active');
+                content.style.opacity = '0';
+                content.style.visibility = 'hidden';
+            });
+
+            // Gestionnaire de langue
+            const translations = {
+                'francais': { 'pageTitle': "David KRK - DJ Techno &amp; Producteur", 'mainTitle': "SITE EN CONSTRUCTION", 'contact': "Contactez David KRK", 'rights': "© 2025 DAVID KRK - TOUS DROITS RÉSERVÉS" },
+                'castellano': { 'pageTitle': "David KRK - DJ Techno & Productor", 'mainTitle': "SITIO EN CONSTRUCCIÓN", 'contact': "Contactar a David KRK", 'rights': "© 2025 DAVID KRK - TODOS LOS DERECHOS RESERVADOS" },
+                'euskara': { 'pageTitle': "David KRK - Techno DJ & Ekoizlea", 'mainTitle': "GUNEA ERAIKITZEN", 'contact': "Harremanetan jarri David KRK", 'rights': "© 2025 DAVID KRK - ESKUBIDE GUZTIAK ERRESERBATUTA" },
+                'english': { 'pageTitle': "David KRK - Techno DJ & Producer", 'mainTitle': "UNDER CONSTRUCTION", 'contact': "Contact David KRK", 'rights': "© 2025 DAVID KRK - ALL RIGHTS RESERVED" },
+                'romana': { 'pageTitle': "David KRK - DJ Techno & Producător", 'mainTitle': "SITE ÎN CONSTRUCȚIE", 'contact': "Contactați David KRK", 'rights': "© 2025 DAVID KRK - TOATE DREPTURILE REZERVATE" },
+                'zhongwen': { 'pageTitle': "David KRK - Techno DJ & 制作人", 'mainTitle': "网站建设中", 'contact': "联系 David KRK", 'rights': "© 2025 DAVID KRK - 版权所有" },
+                'nihongo': { 'pageTitle': "David KRK - テクノDJ & プロデューサー", 'mainTitle': "ウェブサイト建設中", 'contact': "David KRKへのお問い合わせ", 'rights': "© 2025 DAVID KRK - 無断複写・転載を禁じます" },
+                'ukrainian': { 'pageTitle': "David KRK - Techno DJ & Продюсер", 'mainTitle': "САЙТ В РОЗРОБЦІ", 'contact': "Зв'язатися з David KRK", 'rights': "© 2025 DAVID KRK - ВСІ ПРАВА ЗАХИЩЕНО" }
+            };
+
+            window.setLanguage = function(language) {
+                const langData = translations[language];
+                if (!langData) return;
+
+                document.documentElement.lang = language;
+                document.title = langData['pageTitle'];
+
+                // Gérer l'affichage des contenus de langue
+
+                document.querySelectorAll('.lang-content').forEach(content => {
+                    content.style.display = 'none';
+                    content.classList.remove('active');
+                    content.style.opacity = '0';
+                    content.style.visibility = 'hidden';
+                });
+
+                // Gestionnaire de langue
+                const translations = {
+                    'francais': { 'pageTitle': "David KRK - DJ Techno &amp; Producteur", 'mainTitle': "SITE EN CONSTRUCTION", 'contact': "Contactez David KRK", 'rights': " 2025 DAVID KRK - TOUS DROITS RÉSERVÉS" },
+                    'castellano': { 'pageTitle': "David KRK - DJ Techno &amp; Productor", 'mainTitle': "SITIO EN CONSTRUCCIÓN", 'contact': "Contactar a David KRK", 'rights': " 2025 DAVID KRK - TODOS LOS DERECHOS RESERVADOS" },
+                    'euskara': { 'pageTitle': "David KRK - Techno DJ &amp; Ekoizlea", 'mainTitle': "GUNEA ERAIKITZEN", 'contact': "Harremanetan jarri David KRK", 'rights': " 2025 DAVID KRK - ESKUBIDE GUZTIAK ERRESERBATUTA" },
+                    'english': { 'pageTitle': "David KRK - Techno DJ &amp; Producer", 'mainTitle': "UNDER CONSTRUCTION", 'contact': "Contact David KRK", 'rights': " 2025 DAVID KRK - ALL RIGHTS RESERVED" },
+                    'romana': { 'pageTitle': "David KRK - DJ Techno &amp; Producător", 'mainTitle': "SITE ÎN CONSTRUCȚIE", 'contact': "Contactați David KRK", 'rights': " 2025 DAVID KRK - TOATE DREPTURILE REZERVATE" },
+                    'zhongwen': { 'pageTitle': "David KRK - Techno DJ &amp; ", 'mainTitle': "", 'contact': "David KRK", 'rights': " 2025 DAVID KRK - " },
+                    'nihongo': { 'pageTitle': "David KRK - テクノDJ &amp; プロデューサー", 'mainTitle': "ウェブサイト建設中", 'contact': "David KRKへのお問い合わせ", 'rights': " 2025 DAVID KRK - " },
+                    'ukrainian': { 'pageTitle': "David KRK - Techno DJ &amp; Продюсер", 'mainTitle': "САЙТ В РОЗРОБЦІ", 'contact': "Зв'язатися з David KRK", 'rights': " 2025 DAVID KRK - ВСІ ПРАВА ЗАХИЩЕНО" }
+                };
+
+                window.setLanguage = function(language) {
+                    const langData = translations[language];
+                    if (!langData) return;
+
+                    document.documentElement.lang = language;
+                    document.title = langData['pageTitle'];
+
+                    // Gérer l'affichage des contenus de langue
+                    document.querySelectorAll('.lang-content').forEach(content => {
+                        content.style.display = 'none';
+                        content.classList.remove('active');
+                        content.style.opacity = '0';
+                        content.style.visibility = 'hidden';
+                    });
+
+                    const activeContent = document.querySelector(`.lang-content[data-lang="${language}"]`);
+                    if (activeContent) {
+                        activeContent.style.display = 'block';
+                        activeContent.classList.add('active');
+                        activeContent.style.opacity = '1';
+                        activeContent.style.visibility = 'visible';
+                    }
+
+                    // Mettre à jour les boutons de langue
+                    document.querySelectorAll('.language-nav button').forEach(button => {
+                        button.classList.remove('active');
+                        if (button.getAttribute('data-lang') === language) {
+                            button.classList.add('active');
+                        }
+                    });
+                };
+
+                // Ajouter les gestionnaires d'événements aux boutons de langue
+                document.querySelectorAll('.language-nav button').forEach(button => {
+                    button.addEventListener('click', function() {
+                        const lang = this.getAttribute('data-lang');
+                        setLanguage(lang);
+                    });
+                });
+button.addEventListener('click', function() {
+const lang = this.getAttribute('data-lang');
+setLanguage(lang);
+});
+});
+
+// Initialiser avec le français
+setLanguage('francais');
+});
+</script>
+</body>
+</html>

cleanDuplicates.js

@@ -0,0 +1,76 @@
+/**
+ * Removes duplicate entries from a JSON file by parsing, deduplicating, and rewriting the file.
+ * 
+ * @param {string} filePath - Path to the JSON file to be deduplicated
+ * @throws {Error} If the JSON file is invalid or does not contain an array
+ * @description Reads a JSON file, removes duplicate entries using JSON stringification,
+ * and writes the unique entries back to the same file with proper indentation.
+ */
+/**
+ * Removes duplicate entries from a JSON file by parsing, deduplicating, and rewriting the file.
+ * 
+ * @param {string} filePath - Path to the JSON file to be deduplicated
+ * @throws {Error} If the JSON file is invalid or does not contain an array
+ * @description Reads a JSON file, removes duplicate entries using JSON stringification,
+ * and writes the unique entries back to the same file with proper indentation.
+ */
+const fs = require('fs');
+
+/**
+ * Removes duplicate entries from a JSON file by parsing, deduplicating, and rewriting the file.
+ * 
+ * @throws {Error} If the JSON file is invalid or does not contain an array
+ * @description Reads a JSON file, removes duplicate entries using JSON stringification,
+ * and writes the unique entries back to the same file with proper indentation.
+ */
+/**
+ * Removes duplicate entries from a specified JSON file.
+ * 
+ * @param {string} filePath - Path to the JSON file to be deduplicated
+ * @throws {Error} If the JSON file contains invalid syntax or is not an array
+ * @description Reads a JSON file, removes duplicate entries using JSON stringification,
+ * and writes the unique entries back to the same file with proper indentation.
+ */
+/**
+ * Removes duplicate entries from a JSON file by parsing, deduplicating, and rewriting the file.
+ * 
+ * @param {string} filePath - Path to the JSON file to be deduplicated
+ * @throws {Error} If the JSON file is invalid or does not contain an array
+ * @description Reads a JSON file, removes duplicate entries using JSON stringification,
+ * and writes the unique entries back to the same file with proper indentation.
+ */
+/**
+ * Removes duplicate entries from a JSON file by parsing, deduplicating, and rewriting the file.
+ * 
+ * @param {string} filePath - Path to the JSON file to be deduplicated
+ * @throws {Error} If the JSON file is invalid or does not contain an array
+ * @description Reads a JSON file, removes duplicate entries using JSON stringification,
+ * and writes the unique entries back to the same file with proper indentation.
+ */
+try {
+  // Lire le fichier JSON
+  const filePath = 'c:\\Users\\LENOVO\\DavidKRK.github.io\\playwright-report\\report.json';
+  const fileContent = fs.readFileSync(filePath, 'utf8');
+
+  // Vérifier si le contenu est un JSON valide
+  let jsonData;
+  try {
+    jsonData = JSON.parse(fileContent);
+  } catch (error) {
+    throw new Error('Le fichier JSON contient une syntaxe invalide. Veuillez corriger le fichier.');
+  }
+
+  // Vérifier si le contenu est un tableau
+  if (!Array.isArray(jsonData)) {
+    throw new Error('Le contenu du fichier JSON n\'est pas un tableau. Veuillez vérifier le fichier.');
+  }
+
+  // Supprimer les doublons
+  const uniqueData = Array.from(new Set(jsonData.map(JSON.stringify))).map(JSON.parse);
+
+  // Écrire le contenu nettoyé dans le fichier
+  fs.writeFileSync(filePath, JSON.stringify(uniqueData, null, 2), 'utf8');
+  console.log('Les doublons dans le fichier JSON ont été nettoyés.');
+} catch (error) {
+  console.error('Erreur :', error.message);
+}

git-error-1743827686154

@@ -0,0 +1 @@
+git status

index.html

@@ -0,0 +1,461 @@
+<!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>

music.html

@@ -0,0 +1,426 @@
+<!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">
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" href="images/logo%2030-01-25.png">
+    <title>David KRK · Music - DJ Sets &amp; Productions</title>
+    <!-- Meta tags for SEO -->
+    <meta name="description" content="Écoutez les derniers sets et productions de David KRK. Techno, Trance et Tech Trance. Disponible sur Mixcloud et Soundcloud.">
+    <meta name="keywords" content="David KRK, DJ sets, techno music, trance, tech trance, mixcloud, soundcloud, electronic music">
+    <meta name="author" content="David KRK">
+    <!-- Open Graph / Social Media -->
+    <meta property="og:title" content="David KRK · Music - DJ Sets &amp; Productions">
+    <meta property="og:description" content="Écoutez les derniers sets et productions de David KRK. Techno, Trance et Tech Trance.">
+    <meta property="og:image" content="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">
+    <meta property="og:url" content="https://davidkrk.com/music.html">
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="David KRK · Music">
+    <meta name="twitter:description" content="DJ Sets &amp; Productions - Techno, Trance, Tech Trance">
+    <meta name="twitter:image" content="https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png">
+    <!-- Preload critical resources -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" as="style">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" as="style">
+    <!-- Stylesheets -->
+    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" as="style">
+    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" as="style">
+    <link rel="preload" href="dist/output.css" as="style">
+    <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.2.1/css/all.min.css">
+    <link rel="stylesheet" href="dist/output.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
+    <link rel="stylesheet" href="dist/output.css">
+
+    <!-- Schema.org markup for Google -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "MusicGroup",
+      "name": "David KRK",
+      "url": "https://davidkrk.com/music.html",
+      "image": "https://raw.githubusercontent.com/DavidKRK/DavidKRK.github.io/main/logo%2030-01-25.png",
+      "description": "DJ Techno et Producteur de musique électronique",
+      "genre": ["Techno", "Trance", "Tech Trance"],
+      "sameAs": [
+        "https://www.mixcloud.com/DavidKRK/",
+        "https://soundcloud.com/davidkrk/"
+      ]
+    }
+    </script>
+    <style>
+        :root {
+            --primary-color: #FF0000;
+            --secondary-color: #141414;
+            --accent-color-1: #FF69B4;
+            --accent-color-2: #FFC67D;
+            --text-color: #FFFFFF;
+            --mixcloud-color: #45a0e6;
+            --soundcloud-color: #ff8800;
+            --animation-duration: 1s;
+            --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        body {
+            background: linear-gradient(135deg, var(--secondary-color), #000000);
+            color: var(--text-color);
+            font-family: 'Russo One', sans-serif;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow-x: hidden;
+        }
+
+        .title-animation {
+            opacity: 0;
+            animation: fadeInDown var(--animation-duration) var(--transition-timing) forwards;
+        }
+
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .hover-underline-animation {
+            display: inline-block;
+            position: relative;
+            background: linear-gradient(to right, var(--accent-color-1), var(--accent-color-2));
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: transparent;
+            animation: gradient 10s ease infinite;
+            transition: transform 0.3s var(--transition-timing);
+        }
+
+        .hover-underline-animation:after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background: linear-gradient(to right, var(--accent-color-1), var(--accent-color-2));
+            transform: scaleX(0);
+            transform-origin: right;
+            transition: transform 0.3s var(--transition-timing);
+        }
+
+        .hover-underline-animation:hover {
+            transform: translateY(-2px);
+        }
+
+        .hover-underline-animation:hover:after {
+            transform: scaleX(1);
+            transform-origin: left;
+        }
+
+        @keyframes gradient {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        .rotate {
+            animation: rotate 10s linear infinite;
+            filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));
+        }
+
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+        .neon {
+            animation: neon 2s ease-in-out infinite;
+            text-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
+        }
+
+        @keyframes neon {
+            0%, 100% { color: #FFFF00; text-shadow: 0 0 10px rgba(255, 255, 0, 0.5); }
+            50% { color: #00FFFF; text-shadow: 0 0 20px rgba(0, 255, 255, 0.7); }
+        }
+
+        nav {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 2rem;
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        nav a {
+            position: relative;
+            transition: all 0.3s var(--transition-timing);
+        }
+
+        nav a:hover {
+            transform: translateY(-2px);
+        }
+
+        .fab {
+            font-size: 1.5rem;
+            margin-right: 0.5rem;
+            vertical-align: middle;
+        }
+
+        .fa-mixcloud {
+            color: var(--mixcloud-color);
+            filter: drop-shadow(0 0 5px rgba(69, 160, 230, 0.5));
+        }
+
+        .fa-soundcloud {
+            color: var(--soundcloud-color);
+            filter: drop-shadow(0 0 5px rgba(255, 136, 0, 0.5));
+        }
+
+        .player-container {
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            opacity: 0;
+            transform: translateY(20px);
+            animation: fadeInUp 1s var(--transition-timing) forwards;
+            animation-delay: 0.5s;
+        }
+
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .fixed-footer {
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            padding: 1rem;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            border-radius: 10px 0 0 0;
+            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
+            z-index: 1000;
+        }
+
+        @media (max-width: 768px) {
+            nav {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .fab {
+                font-size: 1.2rem;
+            }
+
+            h1 {
+                font-size: 3rem !important;
+            }
+
+            h2 {
+                font-size: 2rem !important;
+            }
+
+            .fixed-footer {
+                padding: 0.5rem;
+            }
+
+            .fixed-footer img {
+                width: 3rem;
+                height: 3rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            nav a {
+                font-size: 1.2rem !important;
+            }
+
+            h1 {
+                font-size: 2rem !important;
+            }
+
+            h2 {
+                font-size: 1.5rem !important;
+            }
+        }
+
+        .load-player-btn {
+            width: 100%;
+            padding: 2rem;
+            margin: 1rem 0;
+            font-size: 1.2rem;
+            transition: all 0.3s ease;
+            border: 2px solid transparent;
+        }
+
+        .mixcloud-container .load-player-btn {
+            background: linear-gradient(135deg, #45a0e6, #3178b3);
+            border-color: #45a0e6;
+        }
+
+        .soundcloud-container .load-player-btn {
+            background: linear-gradient(135deg, #ff8800, #ff5500);
+            border-color: #ff8800;
+        }
+
+        .load-player-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+    </style>
+    <script>
+        function showContent(lang) {
+            const contents = document.querySelectorAll('.lang-content');
+            contents.forEach(content => content.style.display = 'none');
+            document.getElementById(lang).style.display = 'block';
+        }
+    </script>
+</head>
+<body>
+<div id="music" class="py-20">
+        <div class="container mx-auto px-6">
+            <h1 class="text-8xl font-bold text-center mb-4 title-animation">David KRK</h1>
+            <h2 class="text-6xl font-bold text-center mb-12 text-red-500 title-animation">Sets &amp; Productions</h2>
+      <nav class="text-center mb-12">
+                <a href="index.html" class="text-3xl hover-underline-animation flex items-center justify-center">
+                    <i class="fas fa-arrow-left mr-2"></i> Back
+                </a>
+                <a href="https://www.mixcloud.com/DavidKRK/" target="_blank" rel="noopener noreferrer" class="hover:scale-110 transition-transform" aria-label="Mixcloud">
+    <i class="fab fa-mixcloud text-4xl"></i>
+                </a>
+                <a href="https://soundcloud.com/davidkrk/" target="_blank" rel="noopener noreferrer" class="hover:scale-110 transition-transform" aria-label="SoundCloud">
+    <i class="fab fa-soundcloud text-4xl"></i>
+                </a>
+            </nav>
+
+            <div class="mixcloud-container" data-url="https://www.mixcloud.com/widget/iframe/?hide_cover=1&amp;light=0&amp;mini=1&amp;hide_artwork=1&amp;autoplay=0&amp;hide_followers=1&amp;hide_followbutton=1&amp;feed=%2FDavidKRK%2Fplaylists%2Fdavid-krk-life-good-techno%2F">
+    <button type="button" class="load-player-btn bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="loadPlayer(this, 'mixcloud')">
+        <i class="fab fa-mixcloud mr-2"></i>Charger le lecteur Mixcloud
+    </button>
+    <button type="button" class="load-player-btn bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="loadPlayer(this, 'mixcloud')">
+        <i class="fab fa-mixcloud mr-2"></i>Charger le lecteur Mixcloud
+    </button>
+    <button type="button" class="load-player-btn bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded" onclick="loadPlayer(this, 'soundcloud')">
+        <i class="fab fa-soundcloud mr-2"></i>Charger le lecteur SoundCloud
+    </button>
+</div>
+            </div>
+
+            <div class="text-center mb-12">
+                <p class="text-xl mb-4">Follow David KRK on social media for the latest updates:</p>
+                <div class="flex justify-center gap-6">
+                    <a href="https://www.facebook.com/DavidKRKofficial" target="_blank" rel="noopener noreferrer" class="hover:scale-110 transition-transform" aria-label="Facebook">
+    <i class="fab fa-facebook text-4xl"></i>
+                    </a>
+                    <a href="https://www.instagram.com/davidkrk/" target="_blank" rel="noopener noreferrer" class="hover:scale-110 transition-transform" aria-label="Instagram">
+    <i class="fab fa-instagram text-4xl"></i>
+                    </a>
+                    <a href="https://www.youtube.com/user/DavidKRKofficial" target="_blank" rel="noopener noreferrer" class="hover:scale-110 transition-transform" aria-label="YouTube">
+    <i class="fab fa-youtube text-4xl"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="fixed-footer">
+            <footer class="flex items-center gap-4">
+                <div>
+                    <p class="text-gray-400 mb-2">&copy; 2025 All rights reserved <span class="rotate inline-block">David KRK</span></p>
+                    <p class="neon font-bold text-lg">&quot;May The Techno Be With You&quot;</p>
+                </div>
+                <img src="images/logo 30-01-25.png" alt="Logo David KRK" class="w-16 h-16 border-2 border-white rounded-full">
+            </footer>
+        </div>
+
+    <!-- SoundCloud Widget API -->
+    <script src="https://w.soundcloud.com/player/api.js"></script>
+    <script src="https://widget.mixcloud.com/media/js/widgetApi.js"></script>
+
+    <script>
+        // Fonction pour charger les scripts des widgets de manière asynchrone
+        function loadScript(src) {
+            return new Promise((resolve, reject) => {
+                if (document.querySelector(`script[src="${src}"]`)) {
+                    resolve();
+                    return;
+                }
+                const script = document.createElement('script');
+                script.src = src;
+                script.async = true;
+                script.onload = resolve;
+                script.onerror = reject;
+                document.body.appendChild(script);
+            });
+        }
+
+        // Fonction pour charger un lecteur
+        async function loadPlayer(button, type) {
+            const container = button.parentElement;
+            const url = container.dataset.url;
+        
+            // Créer l'iframe
+            const iframe = document.createElement('iframe');
+            iframe.width = '100%';
+            iframe.height = type === 'mixcloud' ? '180' : '450';
+            iframe.frameBorder = '0';
+            iframe.allow = 'autoplay';
+            iframe.loading = 'lazy';
+            iframe.src = url;
+
+            // Remplacer le bouton par l'iframe
+            container.innerHTML = '';
+            container.appendChild(iframe);
+
+            try {
+                // Charger le script approprié
+                if (type === 'mixcloud') {
+                    await loadScript('https://widget.mixcloud.com/media/js/widgetApi.js');
+                    const widget = Mixcloud.PlayerWidget(iframe);
+                    await widget.ready;
+                    widget.events.play.on(() => console.log('Mixcloud playing'));
+                } else if (type === 'soundcloud') {
+                    await loadScript('https://w.soundcloud.com/player/api.js');
+                    const widget = SC.Widget(iframe);
+                    widget.bind(SC.Widget.Events.READY, () => console.log('SoundCloud ready'));
+                }
+            } catch (error) {
+                console.log(`Error loading ${type} widget:`, error);
+                container.innerHTML = `<div class="text-red-500 p-4">Erreur de chargement du lecteur. Veuillez réessayer.</div>`;
+            }
+        }
+
+        // Animation des éléments au scroll
+        document.addEventListener('DOMContentLoaded', function() {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                    }
+                });
+            }, {
+                threshold: 0.1
+            });
+
+            document.querySelectorAll('.player-container').forEach(container => {
+                observer.observe(container);
+            });
+        });
+    </script>
+</body>
+</html>

optimize-images.js

@@ -0,0 +1,44 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+const inputDir = 'images';
+const outputDir = 'images/optimized';
+
+// Créer le dossier de sortie s'il n'existe pas
+if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+}
+
+// Fonction pour optimiser une image
+async function optimizeImage(inputPath, outputPath) {
+    try {
+        await sharp(inputPath)
+            .resize(1920, 1080, {
+                fit: 'inside',
+                withoutEnlargement: true
+            })
+            .webp({ quality: 80 })
+            .toFile(outputPath);
+        
+        console.log(`Optimized: ${inputPath} -> ${outputPath}`);
+    } catch (error) {
+        console.error(`Error optimizing ${inputPath}:`, error);
+    }
+}
+
+// Parcourir le dossier d'images
+fs.readdir(inputDir, async (err, files) => {
+    if (err) {
+        console.error('Error reading directory:', err);
+        return;
+    }
+
+    for (const file of files) {
+        if (file.endsWith('.jpg') || file.endsWith('.jpeg') || file.endsWith('.png')) {
+            const inputPath = path.join(inputDir, file);
+            const outputPath = path.join(outputDir, path.basename(file, path.extname(file)) + '.webp');
+            await optimizeImage(inputPath, outputPath);
+        }
+    }
+}); 

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "davidkrk-website",
+  "version": "1.0.0",
+  "description": "Website for David KRK - Techno DJ & Producer",
+  "main": "index.html",
+  "scripts": {
+    "build": "npm run optimize-images && tailwindcss -i ./src/input.css -o ./dist/output.css --minify",
+    "optimize-images": "node optimize-images.js",
+    "clean": "if exist rm -rf dist",
+    "prebuild": "npm run clean && npm run optimize-images && mkdir dist",
+    "postbuild": "xcopy /E /I /Y images dist\\images && copy *.html dist\\ && copy CNAME dist\\ && copy robots.txt dist\\ && copy sitemap.xml dist\\",
+    "start": "npm run build && npx serve dist",
+    "dev": "npm run build && npm run watch & npx serve dist",
+    "validate": "npm run validate:html && npm run validate:css",
+    "validate:html": "html-validate index.html bio.html music.html",
+    "validate:css": "stylelint \"**/*.css\""
+  },
+  "dependencies": {
+    "sharp": "^0.33.2"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.35",
+    "cssnano": "^6.0.3",
+    "html-validate": "^8.18.0",
+    "stylelint": "^16.2.1",
+    "stylelint-config-standard": "^36.0.0",
+    "serve": "^14.2.1"
+  }
+}

playwright-report/data/3d6a3d1a8bb6714f575631aa577f179974dc2f76.md

@@ -0,0 +1,27 @@
+# Test info
+
+- Name: hello world test
+- Location: C:\Users\LENOVO\DavidKRK.github.io\tests\example.spec.ts:3:5
+
+# Error details
+
+```
+Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/
+Call log:
+  - navigating to "http://localhost:3000/", waiting until "load"
+
+    at C:\Users\LENOVO\DavidKRK.github.io\tests\example.spec.ts:4:16
+```
+
+# Test source
+
+```ts
+  1 | import { test, expect } from '@playwright/test';
+  2 |
+  3 | test('hello world test', async ({ page }) => {
+> 4 |     await page.goto('http://localhost:3000');
+    |                ^ Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/
+  5 |     const title = await page.title();
+  6 |     expect(title).toBe('Titre de votre application');
+  7 | });
+```

playwright-report/data/ca4adf35189c26b25c9d073ecdd17f6ca35d558c.md

@@ -0,0 +1,27 @@
+# Test info
+
+- Name: vérifie le chargement de la page
+- Location: C:\Users\LENOVO\DavidKRK.github.io\tests\hello-world.spec.ts:3:5
+
+# Error details
+
+```
+Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/
+Call log:
+  - navigating to "http://localhost:3000/", waiting until "load"
+
+    at C:\Users\LENOVO\DavidKRK.github.io\tests\hello-world.spec.ts:4:16
+```
+
+# Test source
+
+```ts
+  1 | import { test, expect } from '@playwright/test';
+  2 |
+  3 | test('vérifie le chargement de la page', async ({ page }) => {
+> 4 |     await page.goto('http://localhost:3000');
+    |                ^ Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/
+  5 |     const title = await page.title();
+  6 |     expect(title).toBe('Titre de votre application');
+  7 | });
+```

playwright-report/report.json

@@ -0,0 +1,21 @@
+const fs = require('fs');
+
+// Lire le fichier JSON
+const filePath = 'c:\\Users\\LENOVO\\DavidKRK.github.io\\playwright-report\\report.json';
+let jsonData = [
+  {"id": 1, "name": "Alice"},
+  {"id": 2, "name": "Bob"},
+  {"id": 1, "name": "Alice"}
+];
+
+// Vérifier si le contenu est un tableau
+if (Array.isArray(jsonData)) {
+  // Supprimer les doublons
+  const uniqueData = Array.from(new Set(jsonData.map(JSON.stringify))).map(JSON.parse);
+
+  // Écrire le contenu nettoyé dans le fichier
+  fs.writeFileSync(filePath, JSON.stringify(uniqueData, null, 2), 'utf8');
+  console.log('Les doublons dans le fichier JSON ont été nettoyés.');
+} else {
+  console.error('Le contenu du fichier JSON n\'est pas un tableau.');
+}

playwright.config.ts

@@ -0,0 +1,11 @@
+// playwright.config.ts
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  webServer: {
+    command: 'npm run start', // Commande pour démarrer le serveur
+    port: 3000,               // Port sur lequel le serveur écoute
+    timeout: 120 * 1000,      // Timeout pour le démarrage
+    reuseExistingServer: !process.env.CI, // Réutiliser le serveur si déjà démarré
+  },
+});

robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://davidkrk.github.io/sitemap.xml 

sitemap.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>https://davidkrk.github.io/</loc>
+        <lastmod>2024-04-03</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>1.0</priority>
+    </url>
+    <url>
+        <loc>https://davidkrk.github.io/bio.html</loc>
+        <lastmod>2024-04-03</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+    <url>
+        <loc>https://davidkrk.github.io/music.html</loc>
+        <lastmod>2024-04-03</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.9</priority>
+    </url>
+</urlset> 

src/input.css

@@ -0,0 +1,146 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    body {
+        @apply bg-gradient-to-br from-secondary to-black font-russo text-text min-h-screen pb-36 overflow-x-hidden;
+    }
+}
+
+@layer components {
+    .main-logo {
+        max-width: 200px;
+        display: block;
+        margin: 2rem auto 1rem auto;
+    }
+    .main-content-area {
+        @apply flex-grow opacity-0 animate-fade-in;
+    }
+
+    .hover-underline-animation {
+        @apply bg-gradient-to-r from-pink-500 via-yellow-300 to-green-400 bg-clip-text text-transparent bg-[length:200%_auto] relative pb-1;
+
+        animation: gradient 10s ease infinite;
+    }
+
+    .hover-underline-animation::after {
+        @apply content-[''] absolute w-full h-0.5 bottom-0 left-0 bg-gradient-to-r from-pink-500 to-yellow-300 scale-x-0 origin-right transition-transform duration-300;
+    }
+
+    .hover-underline-animation:hover::after {
+        @apply scale-x-100 origin-left;
+    }
+
+    .title-animation {
+        @apply animate-fade-in-down opacity-0;
+    }
+
+    .lang-content {
+        @apply hidden opacity-0 translate-y-5 transition-all duration-500 ease-in-out absolute w-full invisible z-10;
+    }
+
+    .lang-content.active {
+        @apply block opacity-100 translate-y-0 relative visible z-20;
+    }
+
+    .content-container {
+        @apply relative min-h-[500px] overflow-hidden;
+    }
+
+    .content-wrapper {
+        @apply transition-transform duration-500 ease-in-out;
+    }
+
+    .content-wrapper h3 {
+        @apply opacity-0 -translate-y-5 animate-fade-in-down;
+    }
+
+    .mb-4 p {
+        @apply opacity-0 translate-y-5 transition-all duration-500 ease-in-out;
+    }
+
+    .mb-4 p.fade-in {
+        @apply opacity-100 translate-y-0;
+    }
+
+    .language-nav {
+        @apply relative z-30 flex flex-wrap justify-center gap-4 mb-8;
+    }
+
+    .language-nav button {
+        @apply bg-transparent border-none px-4 py-2 cursor-pointer transition-all duration-300 relative text-text text-xl;
+    }
+
+    .language-nav button:hover {
+        @apply -translate-y-0.5 text-primary;
+    }
+
+    .language-nav button.active {
+        @apply font-bold;
+    }
+
+    .language-nav button.active::after {
+        @apply content-[''] absolute -bottom-0.5 left-0 w-full h-0.5 bg-gradient-to-r from-pink-500 to-yellow-300 scale-x-100 transition-transform duration-300;
+    }
+
+    .site-footer-original {
+        @apply fixed bottom-4 right-4 flex items-center z-50 bg-secondary/80 p-2 rounded-lg;
+    }
+}
+
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+@keyframes neon {
+    0%, 100% { color: #FF0; }
+    50% { color: #0FF; }
+}
+
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@media (width <= 768px) {
+    body {
+        @apply pb-24;
+    }
+
+    .language-nav {
+        @apply gap-2;
+    }
+
+    .language-nav button {
+        @apply px-3 py-1 text-base;
+    }
+
+    h1 {
+        @apply text-5xl !important;
+    }
+
+    .hover-underline-animation {
+        @apply text-base;
+    }
+}
+
+@media (width <= 480px) {
+    .language-nav {
+        @apply flex-col items-center gap-1;
+    }
+
+    h1 {
+        @apply text-4xl !important;
+    }
+
+    .language-nav button {
+        @apply w-full text-center;
+    }
+
+    .hover-underline-animation {
+        @apply text-sm;
+    }
+}