Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vampire La Mascarade V5 - Création de Personnages Humains</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'vampire-red': '#8B0000', | |
| 'vampire-dark': '#0F0F0F', | |
| 'vampire-darker': '#050505', | |
| 'vampire-accent': '#B22222', | |
| 'vampire-text': '#E0E0E0', | |
| }, | |
| fontFamily: { | |
| 'gothic': ['Cinzel', 'serif'], | |
| 'body': ['Crimson Text', 'serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:wght@400;600;700&display=swap'); | |
| body { | |
| font-family: 'Crimson Text', serif; | |
| background-color: #050505; | |
| color: #E0E0E0; | |
| background-image: | |
| radial-gradient(circle at 10% 20%, rgba(139, 0, 0, 0.1) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(178, 34, 34, 0.1) 0%, transparent 20%); | |
| } | |
| .gothic { | |
| font-family: 'Cinzel', serif; | |
| } | |
| .blood-drop { | |
| position: relative; | |
| } | |
| .blood-drop::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, #8B0000, transparent); | |
| } | |
| .panel-border { | |
| border: 1px solid rgba(139, 0, 0, 0.5); | |
| box-shadow: 0 0 15px rgba(139, 0, 0, 0.3); | |
| } | |
| .input-glow:focus { | |
| box-shadow: 0 0 10px rgba(139, 0, 0, 0.7); | |
| border-color: #B22222; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background: linear-gradient(90deg, #8B0000 0%, #B22222 100%); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #B22222; | |
| color: #B22222; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .checkbox-blood input[type="checkbox"] { | |
| appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #8B0000; | |
| border-radius: 3px; | |
| background-color: transparent; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .checkbox-blood input[type="checkbox"]:checked { | |
| background-color: #8B0000; | |
| } | |
| .checkbox-blood input[type="checkbox"]:checked::after { | |
| content: '✓'; | |
| position: absolute; | |
| color: white; | |
| font-size: 14px; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .radio-blood input[type="radio"] { | |
| appearance: none; | |
| width: 18px; | |
| height: 18px; | |
| border: 2px solid #8B0000; | |
| border-radius: 50%; | |
| background-color: transparent; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .radio-blood input[type="radio"]:checked { | |
| background-color: #8B0000; | |
| } | |
| .dropdown-blood { | |
| background-color: #0F0F0F; | |
| border: 1px solid #8B0000; | |
| color: #E0E0E0; | |
| } | |
| .dropdown-blood:focus { | |
| outline: none; | |
| box-shadow: 0 0 10px rgba(139, 0, 0, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="bg-vampire-darker border-b border-vampire-red"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 rounded-full bg-vampire-red flex items-center justify-center"> | |
| <i class="fas fa-moon text-2xl text-vampire-dark"></i> | |
| </div> | |
| <h1 class="gothic text-3xl font-bold">VAMPIRE LA MASQUARADE V5</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="gothic hover:text-vampire-accent transition">RÈGLES</a> | |
| <a href="#" class="gothic hover:text-vampire-accent transition">PERSONNAGES</a> | |
| <a href="#" class="gothic hover:text-vampire-accent transition">CHRONIQUES</a> | |
| <a href="#" class="gothic hover:text-vampire-accent transition">RESSOURCES</a> | |
| </nav> | |
| <button class="md:hidden text-vampire-red"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Character Creation Progress --> | |
| <div class="mb-12"> | |
| <div class="flex justify-between mb-2 gothic text-sm"> | |
| <span class="text-vampire-accent">DÉBUT</span> | |
| <span>COMPLÉTION: <span id="completion">0</span>%</span> | |
| </div> | |
| <div class="progress-bar w-full rounded-full"></div> | |
| </div> | |
| <!-- Character Creation Tabs --> | |
| <div class="flex overflow-x-auto mb-8 border-b border-vampire-red"> | |
| <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="basic">INFORMATIONS DE BASE</button> | |
| <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="attributes">ATTRIBUTS</button> | |
| <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="skills">COMPÉTENCES</button> | |
| <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="advantages">AVANTAGES</button> | |
| <button class="tab-btn px-6 py-3 gothic font-medium hover:text-vampire-accent transition" data-tab="background">HISTOIRE</button> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="bg-vampire-dark panel-border rounded-lg p-6 mb-8 min-h-[500px]"> | |
| <!-- Basic Info Tab --> | |
| <div id="basic-tab" class="tab-content"> | |
| <h2 class="gothic text-2xl mb-6 blood-drop">INFORMATIONS DE BASE</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">NOM DU PERSONNAGE</label> | |
| <input type="text" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none" placeholder="Entrez le nom du personnage"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">PRÉNOM</label> | |
| <input type="text" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none" placeholder="Entrez le prénom"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">ÂGE</label> | |
| <input type="number" min="18" max="120" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none" placeholder="Entrez l'âge" value="25"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">GENRE</label> | |
| <div class="flex space-x-4 radio-blood"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="gender" class="mr-2" checked> | |
| <span>Masculin</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="gender" class="mr-2"> | |
| <span>Féminin</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="gender" class="mr-2"> | |
| <span>Autre</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">CONCEPT</label> | |
| <select class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none dropdown-blood"> | |
| <option value="">Sélectionnez un concept</option> | |
| <option value="journalist">Journaliste d'investigation</option> | |
| <option value="detective">Détective privé</option> | |
| <option value="doctor">Médecin légiste</option> | |
| <option value="priest">Prêtre/Religieux</option> | |
| <option value="artist">Artiste maudit</option> | |
| <option value="criminal">Criminel</option> | |
| <option value="cop">Officier de police</option> | |
| <option value="occultist">Occultiste</option> | |
| <option value="custom">Personnalisé</option> | |
| </select> | |
| <input type="text" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none mt-2 hidden" placeholder="Entrez votre concept" id="custom-concept"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">CLAN ASSOCIÉ (optionnel)</label> | |
| <select class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none dropdown-blood"> | |
| <option value="">Aucun</option> | |
| <option value="brujah">Brujah</option> | |
| <option value="gangrel">Gangrel</option> | |
| <option value="malkavian">Malkavian</option> | |
| <option value="nosferatu">Nosferatu</option> | |
| <option value="toreador">Toreador</option> | |
| <option value="tremere">Tremere</option> | |
| <option value="ventrue">Ventrue</option> | |
| <option value="thin-blood">Sang-Dilue</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">VILLE</label> | |
| <select class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none dropdown-blood"> | |
| <option value="paris">Paris</option> | |
| <option value="lyon">Lyon</option> | |
| <option value="marseille">Marseille</option> | |
| <option value="london">Londres</option> | |
| <option value="berlin">Berlin</option> | |
| <option value="newyork">New York</option> | |
| <option value="losangeles">Los Angeles</option> | |
| <option value="custom">Autre</option> | |
| </select> | |
| <input type="text" class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none mt-2 hidden" placeholder="Entrez votre ville" id="custom-city"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Attributes Tab --> | |
| <div id="attributes-tab" class="tab-content hidden"> | |
| <h2 class="gothic text-2xl mb-6 blood-drop">ATTRIBUTS</h2> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-vampire-accent flex items-center justify-center mr-4"> | |
| <span class="gothic" id="attribute-points">5</span> | |
| </div> | |
| <span>Points d'attributs disponibles</span> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Physical Attributes --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">PHYSIQUE</h3> | |
| <div class="space-y-6"> | |
| <div class="flex justify-between items-center"> | |
| <span>Force</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Dextérité</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Vigueur</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Social Attributes --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">SOCIAL</h3> | |
| <div class="space-y-6"> | |
| <div class="flex justify-between items-center"> | |
| <span>Charisme</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Manipulation</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Sang-froid</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mental Attributes --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">MENTAL</h3> | |
| <div class="space-y-6"> | |
| <div class="flex justify-between items-center"> | |
| <span>Intelligence</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Astuce</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span>Résolution</span> | |
| <div class="flex items-center"> | |
| <button class="attribute-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="attribute-value mx-2 gothic">2</span> | |
| <button class="attribute-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skills Tab --> | |
| <div id="skills-tab" class="tab-content hidden"> | |
| <h2 class="gothic text-2xl mb-6 blood-drop">COMPÉTENCES</h2> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-vampire-accent flex items-center justify-center mr-4"> | |
| <span class="gothic" id="skill-points">11</span> | |
| </div> | |
| <span>Points de compétences disponibles</span> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Physical Skills --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">PHYSIQUE</h3> | |
| <div class="space-y-4"> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Armes de mêlée</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Armes à feu</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Discrétion</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Conduite</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Social Skills --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">SOCIAL</h3> | |
| <div class="space-y-4"> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Éloquence</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Intimidation</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Subterfuge</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Représentation</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mental Skills --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">MENTAL</h3> | |
| <div class="space-y-4"> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Investigation</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Occultisme</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Médecine</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="skill-item flex justify-between items-center"> | |
| <span>Sciences</span> | |
| <div class="flex items-center"> | |
| <button class="skill-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="skill-value mx-2 gothic">0</span> | |
| <button class="skill-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advantages Tab --> | |
| <div id="advantages-tab" class="tab-content hidden"> | |
| <h2 class="gothic text-2xl mb-6 blood-drop">AVANTAGES</h2> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-vampire-accent flex items-center justify-center mr-4"> | |
| <span class="gothic" id="advantage-points">7</span> | |
| </div> | |
| <span>Points d'avantages disponibles</span> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <!-- Backgrounds --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">HISTORIQUE</h3> | |
| <div class="space-y-4"> | |
| <div class="advantage-item flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Contacts</h4> | |
| <p class="text-sm text-gray-400">Réseau de connaissances utiles</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="advantage-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="advantage-value mx-2 gothic">0</span> | |
| <button class="advantage-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="advantage-item flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Ressources</h4> | |
| <p class="text-sm text-gray-400">Accès à l'argent et aux biens</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="advantage-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="advantage-value mx-2 gothic">0</span> | |
| <button class="advantage-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| <div class="advantage-item flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Alliés</h4> | |
| <p class="text-sm text-gray-400">Personnes qui vous soutiennent</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="advantage-decrease w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">-</button> | |
| <span class="advantage-value mx-2 gothic">0</span> | |
| <button class="advantage-increase w-6 h-6 rounded-full border border-vampire-red flex items-center justify-center hover:bg-vampire-red transition">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Merits --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">QUALITÉS</h3> | |
| <div class="space-y-4"> | |
| <div class="advantage-item flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Sang-froid</h4> | |
| <p class="text-sm text-gray-400">Résistance au stress et à la peur</p> | |
| </div> | |
| <div class="flex items-center checkbox-blood"> | |
| <input type="checkbox" class="mr-2"> | |
| <span>1 point</span> | |
| </div> | |
| </div> | |
| <div class="advantage-item flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Sixième sens</h4> | |
| <p class="text-sm text-gray-400">Pressentiments surnaturels</p> | |
| </div> | |
| <div class="flex items-center checkbox-blood"> | |
| <input type="checkbox" class="mr-2"> | |
| <span>2 points</span> | |
| </div> | |
| </div> | |
| <div class="advantage-item flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Résistance au surnaturel</h4> | |
| <p class="text-sm text-gray-400">Défense contre les disciplines</p> | |
| </div> | |
| <div class="flex items-center checkbox-blood"> | |
| <input type="checkbox" class="mr-2"> | |
| <span>3 points</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Flaws --> | |
| <div class="bg-vampire-darker border border-vampire-red rounded-lg p-6 md:col-span-2"> | |
| <h3 class="gothic text-xl mb-4 text-center">DÉFAUTS</h3> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Mauvaise réputation</h4> | |
| <p class="text-sm text-gray-400">Les gens vous méfient de vous</p> | |
| </div> | |
| <div class="flex items-center checkbox-blood"> | |
| <input type="checkbox" class="mr-2"> | |
| <span>+1 point</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Addiction</h4> | |
| <p class="text-sm text-gray-400">Dépendance à une substance</p> | |
| </div> | |
| <div class="flex items-center checkbox-blood"> | |
| <input type="checkbox" class="mr-2"> | |
| <span>+2 points</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Maudit</h4> | |
| <p class="text-sm text-gray-400">Attire l'attention des forces obscures</p> | |
| </div> | |
| <div class="flex items-center checkbox-blood"> | |
| <input type="checkbox" class="mr-2"> | |
| <span>+3 points</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h4 class="font-medium">Traumatisme</h4> | |
| <p class="text-sm text-gray-400">Peur ou folie spécifique</p> | |
| </div> | |
| <div class="flex items-center checkbox-blood"> | |
| <input type="checkbox" class="mr-2"> | |
| <span>+2 points</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Background Tab --> | |
| <div id="background-tab" class="tab-content hidden"> | |
| <h2 class="gothic text-2xl mb-6 blood-drop">HISTOIRE DU PERSONNAGE</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">AMBITION</label> | |
| <textarea class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none h-32" placeholder="Quel est le but ultime de votre personnage ?"></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">DÉSIR</label> | |
| <textarea class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none h-32" placeholder="Qu'est-ce que votre personnage veut à court terme ?"></textarea> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">HISTORIQUE</label> | |
| <textarea class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none h-32" placeholder="Décrivez le passé de votre personnage..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-vampire-red mb-2 gothic">RELATIONS AVEC LES VAMPIRES</label> | |
| <textarea class="w-full bg-vampire-darker border border-vampire-red rounded px-4 py-2 input-glow focus:outline-none h-32" placeholder="Comment votre personnage est-il entré en contact avec le monde des vampires ?"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 bg-vampire-darker border border-vampire-red rounded-lg p-6"> | |
| <h3 class="gothic text-xl mb-4 text-center">PORTRAIT DU PERSONNAGE</h3> | |
| <div class="flex flex-col items-center"> | |
| <div class="w-48 h-48 bg-vampire-darker border-2 border-vampire-red rounded-full mb-4 flex items-center justify-center"> | |
| <i class="fas fa-user text-6xl text-gray-500"></i> | |
| </div> | |
| <button class="px-6 py-2 bg-vampire-red text-vampire-dark rounded gothic hover:bg-vampire-accent transition">TÉLÉCHARGER UNE IMAGE</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="flex justify-between"> | |
| <button class="nav-btn px-6 py-3 bg-vampire-dark border border-vampire-red rounded gothic hover:bg-vampire-red hover:text-vampire-dark transition" data-direction="prev" disabled> | |
| <i class="fas fa-arrow-left mr-2"></i> PRÉCÉDENT | |
| </button> | |
| <button class="nav-btn px-6 py-3 bg-vampire-red text-vampire-dark rounded gothic hover:bg-vampire-accent transition" data-direction="next"> | |
| SUIVANT <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Character Sheet Download --> | |
| <div class="fixed bottom-0 left-0 right-0 bg-vampire-darker border-t border-vampire-red py-4 px-6 flex justify-center"> | |
| <button id="download-sheet" class="px-8 py-3 bg-vampire-red text-vampire-dark rounded-lg gothic text-lg hover:bg-vampire-accent transition transform hover:scale-105"> | |
| <i class="fas fa-file-pdf mr-2"></i> TÉLÉCHARGER LA FICHE DE PERSONNAGE | |
| </button> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-vampire-darker border-t border-vampire-red py-8 mt-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="gothic text-xl mb-2">VAMPIRE LA MASQUARADE V5</h2> | |
| <p class="text-gray-400 text-sm">Un jeu de rôle gothique-punk</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-vampire-accent transition"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-vampire-accent transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-vampire-accent transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div class="border-t border-vampire-red mt-8 pt-8 text-center text-gray-400 text-sm"> | |
| <p>Ceci est un outil non-officiel pour Vampire: La Mascarade V5. Tous droits réservés à White Wolf.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab Navigation | |
| const tabs = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| let currentTab = 0; | |
| tabs.forEach((tab, index) => { | |
| tab.addEventListener('click', () => { | |
| // Remove active class from all tabs | |
| tabs.forEach(t => t.classList.remove('tab-active', 'text-vampire-accent')); | |
| tabContents.forEach(tc => tc.classList.add('hidden')); | |
| // Add active class to current tab | |
| tab.classList.add('tab-active', 'text-vampire-accent'); | |
| document.getElementById(`${tab.dataset.tab}-tab`).classList.remove('hidden'); | |
| currentTab = index; | |
| updateProgress(); | |
| updateNavButtons(); | |
| }); | |
| }); | |
| // Set first tab as active by default | |
| tabs[0].classList.add('tab-active', 'text-vampire-accent'); | |
| // Navigation buttons | |
| const navButtons = document.querySelectorAll('.nav-btn'); | |
| navButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const direction = button.dataset.direction; | |
| if (direction === 'next' && currentTab < tabs.length - 1) { | |
| tabs[currentTab + 1].click(); | |
| } else if (direction === 'prev' && currentTab > 0) { | |
| tabs[currentTab - 1].click(); | |
| } | |
| updateNavButtons(); | |
| }); | |
| }); | |
| function updateNavButtons() { | |
| const prevButton = document.querySelector('[data-direction="prev"]'); | |
| const nextButton = document.querySelector('[data-direction="next"]'); | |
| prevButton.disabled = currentTab === 0; | |
| if (currentTab === tabs.length - 1) { | |
| nextButton.innerHTML = 'TERMINER <i class="fas fa-check ml-2"></i>'; | |
| } else { | |
| nextButton.innerHTML = 'SUIVANT <i class="fas fa-arrow-right ml-2"></i>'; | |
| } | |
| } | |
| // Concept selection | |
| const conceptSelect = document.querySelector('select[value="concept"]'); | |
| const customConcept = document.getElementById('custom-concept'); | |
| conceptSelect.addEventListener('change', function() { | |
| if (this.value === 'custom') { | |
| customConcept.classList.remove('hidden'); | |
| } else { | |
| customConcept.classList.add('hidden'); | |
| } | |
| }); | |
| // City selection | |
| const citySelect = document.querySelector('select[value="city"]'); | |
| const customCity = document.getElementById('custom-city'); | |
| citySelect.addEventListener('change', function() { | |
| if (this.value === 'custom') { | |
| customCity.classList.remove('hidden'); | |
| } else { | |
| customCity.classList.add('hidden'); | |
| } | |
| }); | |
| // Attribute adjustment | |
| const attributeIncreaseButtons = document.querySelectorAll('.attribute-increase'); | |
| const attributeDecreaseButtons = document.querySelectorAll('.attribute-decrease'); | |
| const attributeValues = document.querySelectorAll('.attribute-value'); | |
| let attributePoints = 5; | |
| attributeIncreaseButtons.forEach((button, index) => { | |
| button.addEventListener('click', () => { | |
| if (attributePoints > 0) { | |
| const currentValue = parseInt(attributeValues[index].textContent); | |
| if (currentValue < 5) { | |
| attributeValues[index].textContent = currentValue + 1; | |
| attributePoints--; | |
| document.getElementById('attribute-points').textContent = attributePoints; | |
| } | |
| } | |
| }); | |
| }); | |
| attributeDecreaseButtons.forEach((button, index) => { | |
| button.addEventListener('click', () => { | |
| const currentValue = parseInt(attributeValues[index].textContent); | |
| if (currentValue > 1) { | |
| attributeValues[index].textContent = currentValue - 1; | |
| attributePoints++; | |
| document.getElementById('attribute-points').textContent = attributePoints; | |
| } | |
| }); | |
| }); | |
| // Skill adjustment | |
| const skillIncreaseButtons = document.querySelectorAll('.skill-increase'); | |
| const skillDecreaseButtons = document.querySelectorAll('.skill-decrease'); | |
| const skillValues = document.querySelectorAll('.skill-value'); | |
| let skillPoints = 11; | |
| skillIncreaseButtons.forEach((button, index) => { | |
| button.addEventListener('click', () => { | |
| if (skillPoints > 0) { | |
| const currentValue = parseInt(skillValues[index].textContent); | |
| if (currentValue < 3) { | |
| skillValues[index].textContent = currentValue + 1; | |
| skillPoints--; | |
| document.getElementById('skill-points').textContent = skillPoints; | |
| } | |
| } | |
| }); | |
| }); | |
| skillDecreaseButtons.forEach((button, index) => { | |
| button.addEventListener('click', () => { | |
| const currentValue = parseInt(skillValues[index].textContent); | |
| if (currentValue > 0) { | |
| skillValues[index].textContent = currentValue - 1; | |
| skillPoints++; | |
| document.getElementById('skill-points').textContent = skillPoints; | |
| } | |
| }); | |
| }); | |
| // Advantage adjustment | |
| const advantageIncreaseButtons = document.querySelectorAll('.advantage-increase'); | |
| const advantageDecreaseButtons = document.querySelectorAll('.advantage-decrease'); | |
| const advantageValues = document.querySelectorAll('.advantage-value'); | |
| let advantagePoints = 7; | |
| advantageIncreaseButtons.forEach((button, index) => { | |
| button.addEventListener('click', () => { | |
| if (advantagePoints > 0) { | |
| const currentValue = parseInt(advantageValues[index].textContent); | |
| if (currentValue < 5) { | |
| advantageValues[index].textContent = currentValue + 1; | |
| advantagePoints--; | |
| document.getElementById('advantage-points').textContent = advantagePoints; | |
| } | |
| } | |
| }); | |
| }); | |
| advantageDecreaseButtons.forEach((button, index) => { | |
| button.addEventListener('click', () => { | |
| const currentValue = parseInt(advantageValues[index].textContent); | |
| if (currentValue > 0) { | |
| advantageValues[index].textContent = currentValue - 1; | |
| advantagePoints++; | |
| document.getElementById('advantage-points').textContent = advantagePoints; | |
| } | |
| }); | |
| }); | |
| // Flaws adjustment | |
| const flawCheckboxes = document.querySelectorAll('.checkbox-blood input[type="checkbox"]'); | |
| flawCheckboxes.forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const pointsText = this.parentElement.textContent.trim(); | |
| const points = parseInt(pointsText.match(/\d+/)[0]); | |
| if (this.checked) { | |
| advantagePoints += points; | |
| } else { | |
| advantagePoints -= points; | |
| } | |
| document.getElementById('advantage-points').textContent = advantagePoints; | |
| }); | |
| }); | |
| // Download character sheet | |
| document.getElementById('download-sheet').addEventListener('click', function() { | |
| alert('Fiche de personnage générée avec succès ! (Fonctionnalité simulée)'); | |
| // In a real implementation, this would generate a PDF with all character data | |
| }); | |
| // Update progress | |
| function updateProgress() { | |
| const progress = Math.round((currentTab / (tabs.length - 1)) * 100); | |
| document.getElementById('completion').textContent = progress; | |
| } | |
| // Initialize | |
| updateNavButtons(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ZoroaStrella/vampire-fr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |