| <!DOCTYPE html> |
| <html lang="pt-br"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Criador de Personagem RPG</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"> |
| <style> |
| .stat-bar { |
| height: 8px; |
| border-radius: 4px; |
| transition: width 0.3s ease; |
| } |
| .character-card { |
| transform-style: preserve-3d; |
| transition: transform 0.5s; |
| } |
| .character-card:hover { |
| transform: translateY(-5px); |
| } |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| .animate-pulse { |
| animation: pulse 2s infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| <h1 class="text-4xl font-bold text-center mb-8 text-yellow-400"> |
| <i class="fas fa-dragon mr-2"></i> Criador de Personagem RPG |
| </h1> |
|
|
| <div class="max-w-3xl mx-auto bg-gray-800 rounded-xl shadow-2xl overflow-hidden"> |
| |
| <div id="creation-form" class="p-6"> |
| <h2 class="text-2xl font-semibold mb-6 text-center text-blue-300">Crie seu Personagem</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="space-y-4"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Nome do Personagem</label> |
| <input type="text" id="name" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: João"> |
| </div> |
| |
| <div> |
| <label for="age" class="block text-sm font-medium text-gray-300 mb-1">Idade</label> |
| <input type="number" id="age" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Ex: 25"> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Sexo</label> |
| <div class="flex space-x-4"> |
| <label class="inline-flex items-center"> |
| <input type="radio" name="gender" value="M" class="h-5 w-5 text-blue-500" checked> |
| <span class="ml-2">Masculino</span> |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="radio" name="gender" value="F" class="h-5 w-5 text-pink-500"> |
| <span class="ml-2">Feminino</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Classe</label> |
| <div class="grid grid-cols-3 gap-3"> |
| <button type="button" data-class="Guerreiro" class="class-btn px-4 py-3 bg-red-900 hover:bg-red-800 rounded-lg flex flex-col items-center transition"> |
| <i class="fas fa-shield-alt text-2xl mb-1"></i> |
| <span>Guerreiro</span> |
| </button> |
| <button type="button" data-class="Mago" class="class-btn px-4 py-3 bg-blue-900 hover:bg-blue-800 rounded-lg flex flex-col items-center transition"> |
| <i class="fas fa-hat-wizard text-2xl mb-1"></i> |
| <span>Mago</span> |
| </button> |
| <button type="button" data-class="Arqueiro" class="class-btn px-4 py-3 bg-green-900 hover:bg-green-800 rounded-lg flex flex-col items-center transition"> |
| <i class="fas fa-bow-arrow text-2xl mb-1"></i> |
| <span>Arqueiro</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8"> |
| <h3 class="text-xl font-semibold mb-4 text-center text-purple-300">Atributos</h3> |
| <p class="text-sm text-gray-400 mb-4 text-center">Você tem 10 pontos para distribuir</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="attribute-control"> |
| <div class="flex justify-between mb-1"> |
| <label class="font-medium">Força</label> |
| <span class="attribute-value" data-attribute="strength">0</span> |
| </div> |
| <div class="flex items-center"> |
| <button class="decrement-btn px-3 py-1 bg-red-600 rounded-l-lg hover:bg-red-700" data-attribute="strength">-</button> |
| <div class="flex-1 bg-gray-700 h-8 mx-1 rounded"> |
| <div class="stat-bar bg-red-500 h-full" data-attribute="strength" style="width: 0%"></div> |
| </div> |
| <button class="increment-btn px-3 py-1 bg-green-600 rounded-r-lg hover:bg-green-700" data-attribute="strength">+</button> |
| </div> |
| </div> |
| |
| <div class="attribute-control"> |
| <div class="flex justify-between mb-1"> |
| <label class="font-medium">Agilidade</label> |
| <span class="attribute-value" data-attribute="agility">0</span> |
| </div> |
| <div class="flex items-center"> |
| <button class="decrement-btn px-3 py-1 bg-red-600 rounded-l-lg hover:bg-red-700" data-attribute="agility">-</button> |
| <div class="flex-1 bg-gray-700 h-8 mx-1 rounded"> |
| <div class="stat-bar bg-yellow-500 h-full" data-attribute="agility" style="width: 0%"></div> |
| </div> |
| <button class="increment-btn px-3 py-1 bg-green-600 rounded-r-lg hover:bg-green-700" data-attribute="agility">+</button> |
| </div> |
| </div> |
| |
| <div class="attribute-control"> |
| <div class="flex justify-between mb-1"> |
| <label class="font-medium">Inteligência</label> |
| <span class="attribute-value" data-attribute="intelligence">0</span> |
| </div> |
| <div class="flex items-center"> |
| <button class="decrement-btn px-3 py-1 bg-red-600 rounded-l-lg hover:bg-red-700" data-attribute="intelligence">-</button> |
| <div class="flex-1 bg-gray-700 h-8 mx-1 rounded"> |
| <div class="stat-bar bg-blue-500 h-full" data-attribute="intelligence" style="width: 0%"></div> |
| </div> |
| <button class="increment-btn px-3 py-1 bg-green-600 rounded-r-lg hover:bg-green-700" data-attribute="intelligence">+</button> |
| </div> |
| </div> |
| |
| <div class="attribute-control"> |
| <div class="flex justify-between mb-1"> |
| <label class="font-medium">Resistência</label> |
| <span class="attribute-value" data-attribute="resistance">0</span> |
| </div> |
| <div class="flex items-center"> |
| <button class="decrement-btn px-3 py-1 bg-red-600 rounded-l-lg hover:bg-red-700" data-attribute="resistance">-</button> |
| <div class="flex-1 bg-gray-700 h-8 mx-1 rounded"> |
| <div class="stat-bar bg-purple-500 h-full" data-attribute="resistance" style="width: 0%"></div> |
| </div> |
| <button class="increment-btn px-3 py-1 bg-green-600 rounded-r-lg hover:bg-green-700" data-attribute="resistance">+</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-4 text-center"> |
| <p class="text-sm font-medium">Pontos restantes: <span id="remaining-points" class="text-yellow-400">10</span></p> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8"> |
| <h3 class="text-xl font-semibold mb-4 text-center text-green-300">Habilidades</h3> |
| <div class="flex"> |
| <input type="text" id="skill-input" class="flex-1 px-4 py-2 bg-gray-700 border border-gray-600 rounded-l-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="Ex: Luta corpo a corpo"> |
| <button id="add-skill-btn" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-r-lg transition"> |
| <i class="fas fa-plus"></i> Adicionar |
| </button> |
| </div> |
| <div id="skills-list" class="mt-4 flex flex-wrap gap-2"></div> |
| </div> |
| |
| |
| <div class="mt-10 text-center"> |
| <button id="create-character-btn" class="px-8 py-3 bg-yellow-600 hover:bg-yellow-700 rounded-lg font-bold text-lg transition transform hover:scale-105 animate-pulse"> |
| <i class="fas fa-user-plus mr-2"></i> Criar Personagem |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="character-display" class="hidden p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-semibold text-blue-300">Seu Personagem</h2> |
| <button id="edit-character-btn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg"> |
| <i class="fas fa-edit mr-1"></i> Editar |
| </button> |
| </div> |
| |
| <div class="character-card bg-gray-700 rounded-xl p-6 shadow-lg"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="flex justify-center"> |
| <div id="character-image" class="w-40 h-40 rounded-full bg-gray-600 flex items-center justify-center text-6xl"> |
| <i class="fas fa-user"></i> |
| </div> |
| </div> |
| |
| |
| <div class="md:col-span-2"> |
| <div class="grid grid-cols-2 gap-4 mb-6"> |
| <div> |
| <p class="text-sm text-gray-400">Nome</p> |
| <p id="display-name" class="text-xl font-bold">-</p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Idade</p> |
| <p id="display-age" class="text-xl">-</p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Sexo</p> |
| <p id="display-gender" class="text-xl">-</p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-400">Classe</p> |
| <p id="display-class" class="text-xl">-</p> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <h4 class="text-lg font-semibold mb-3">Atributos</h4> |
| <div class="space-y-2"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span>Força</span> |
| <span id="display-strength">0</span> |
| </div> |
| <div class="w-full bg-gray-600 rounded-full h-2.5"> |
| <div id="display-strength-bar" class="h-2.5 rounded-full bg-red-500" style="width: 0%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span>Agilidade</span> |
| <span id="display-agility">0</span> |
| </div> |
| <div class="w-full bg-gray-600 rounded-full h-2.5"> |
| <div id="display-agility-bar" class="h-2.5 rounded-full bg-yellow-500" style="width: 0%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span>Inteligência</span> |
| <span id="display-intelligence">0</span> |
| </div> |
| <div class="w-full bg-gray-600 rounded-full h-2.5"> |
| <div id="display-intelligence-bar" class="h-2.5 rounded-full bg-blue-500" style="width: 0%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span>Resistência</span> |
| <span id="display-resistance">0</span> |
| </div> |
| <div class="w-full bg-gray-600 rounded-full h-2.5"> |
| <div id="display-resistance-bar" class="h-2.5 rounded-full bg-purple-500" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h4 class="text-lg font-semibold mb-3">Habilidades</h4> |
| <div id="display-skills" class="flex flex-wrap gap-2"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const character = { |
| name: '', |
| age: '', |
| gender: 'M', |
| class: '', |
| attributes: { |
| strength: 0, |
| agility: 0, |
| intelligence: 0, |
| resistance: 0 |
| }, |
| skills: [] |
| }; |
| |
| let remainingPoints = 10; |
| |
| |
| const nameInput = document.getElementById('name'); |
| const ageInput = document.getElementById('age'); |
| const genderInputs = document.querySelectorAll('input[name="gender"]'); |
| const classButtons = document.querySelectorAll('.class-btn'); |
| const incrementButtons = document.querySelectorAll('.increment-btn'); |
| const decrementButtons = document.querySelectorAll('.decrement-btn'); |
| const attributeValues = document.querySelectorAll('.attribute-value'); |
| const statBars = document.querySelectorAll('.stat-bar'); |
| const remainingPointsDisplay = document.getElementById('remaining-points'); |
| const skillInput = document.getElementById('skill-input'); |
| const addSkillBtn = document.getElementById('add-skill-btn'); |
| const skillsList = document.getElementById('skills-list'); |
| const createCharacterBtn = document.getElementById('create-character-btn'); |
| const editCharacterBtn = document.getElementById('edit-character-btn'); |
| const creationForm = document.getElementById('creation-form'); |
| const characterDisplay = document.getElementById('character-display'); |
| const characterImage = document.getElementById('character-image'); |
| |
| |
| const displayName = document.getElementById('display-name'); |
| const displayAge = document.getElementById('display-age'); |
| const displayGender = document.getElementById('display-gender'); |
| const displayClass = document.getElementById('display-class'); |
| const displayStrength = document.getElementById('display-strength'); |
| const displayAgility = document.getElementById('display-agility'); |
| const displayIntelligence = document.getElementById('display-intelligence'); |
| const displayResistance = document.getElementById('display-resistance'); |
| const displayStrengthBar = document.getElementById('display-strength-bar'); |
| const displayAgilityBar = document.getElementById('display-agility-bar'); |
| const displayIntelligenceBar = document.getElementById('display-intelligence-bar'); |
| const displayResistanceBar = document.getElementById('display-resistance-bar'); |
| const displaySkills = document.getElementById('display-skills'); |
| |
| |
| nameInput.addEventListener('input', updateName); |
| ageInput.addEventListener('input', updateAge); |
| |
| genderInputs.forEach(input => { |
| input.addEventListener('change', updateGender); |
| }); |
| |
| classButtons.forEach(button => { |
| button.addEventListener('click', selectClass); |
| }); |
| |
| incrementButtons.forEach(button => { |
| button.addEventListener('click', incrementAttribute); |
| }); |
| |
| decrementButtons.forEach(button => { |
| button.addEventListener('click', decrementAttribute); |
| }); |
| |
| addSkillBtn.addEventListener('click', addSkill); |
| skillInput.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') addSkill(); |
| }); |
| |
| createCharacterBtn.addEventListener('click', createCharacter); |
| editCharacterBtn.addEventListener('click', editCharacter); |
| |
| |
| function updateName() { |
| character.name = nameInput.value.trim(); |
| } |
| |
| function updateAge() { |
| character.age = ageInput.value.trim(); |
| } |
| |
| function updateGender() { |
| character.gender = document.querySelector('input[name="gender"]:checked').value; |
| } |
| |
| function selectClass(e) { |
| |
| classButtons.forEach(btn => { |
| btn.classList.remove('ring-2', 'ring-yellow-400'); |
| }); |
| |
| |
| const button = e.currentTarget; |
| button.classList.add('ring-2', 'ring-yellow-400'); |
| |
| character.class = button.dataset.class; |
| } |
| |
| function incrementAttribute(e) { |
| const attribute = e.currentTarget.dataset.attribute; |
| |
| if (remainingPoints > 0) { |
| character.attributes[attribute]++; |
| remainingPoints--; |
| updateAttributeDisplay(attribute); |
| } |
| } |
| |
| function decrementAttribute(e) { |
| const attribute = e.currentTarget.dataset.attribute; |
| |
| if (character.attributes[attribute] > 0) { |
| character.attributes[attribute]--; |
| remainingPoints++; |
| updateAttributeDisplay(attribute); |
| } |
| } |
| |
| function updateAttributeDisplay(attribute) { |
| |
| const valueElement = document.querySelector(`.attribute-value[data-attribute="${attribute}"]`); |
| valueElement.textContent = character.attributes[attribute]; |
| |
| |
| const maxValue = 10; |
| const percentage = (character.attributes[attribute] / maxValue) * 100; |
| const barElement = document.querySelector(`.stat-bar[data-attribute="${attribute}"]`); |
| barElement.style.width = `${percentage}%`; |
| |
| |
| remainingPointsDisplay.textContent = remainingPoints; |
| |
| |
| incrementButtons.forEach(button => { |
| button.disabled = remainingPoints <= 0; |
| }); |
| } |
| |
| function addSkill() { |
| const skill = skillInput.value.trim(); |
| |
| if (skill && !character.skills.includes(skill)) { |
| character.skills.push(skill); |
| |
| |
| const skillElement = document.createElement('div'); |
| skillElement.className = 'px-3 py-1 bg-gray-700 rounded-full flex items-center'; |
| skillElement.innerHTML = ` |
| <span>${skill}</span> |
| <button class="ml-2 text-red-400 hover:text-red-300" data-skill="${skill}"> |
| <i class="fas fa-times"></i> |
| </button> |
| `; |
| skillsList.appendChild(skillElement); |
| |
| |
| skillElement.querySelector('button').addEventListener('click', function() { |
| removeSkill(skill); |
| skillElement.remove(); |
| }); |
| |
| |
| skillInput.value = ''; |
| } |
| } |
| |
| function removeSkill(skill) { |
| character.skills = character.skills.filter(s => s !== skill); |
| } |
| |
| function createCharacter() { |
| |
| if (!character.name) { |
| alert('Por favor, insira o nome do personagem'); |
| return; |
| } |
| |
| if (!character.age) { |
| alert('Por favor, insira a idade do personagem'); |
| return; |
| } |
| |
| if (!character.class) { |
| alert('Por favor, selecione uma classe para o personagem'); |
| return; |
| } |
| |
| if (remainingPoints > 0) { |
| const confirmUse = confirm(`Você ainda tem ${remainingPoints} pontos não distribuídos. Deseja continuar assim?`); |
| if (!confirmUse) return; |
| } |
| |
| |
| displayName.textContent = character.name; |
| displayAge.textContent = character.age; |
| displayGender.textContent = character.gender === 'M' ? 'Masculino' : 'Feminino'; |
| displayClass.textContent = character.class; |
| |
| |
| displayStrength.textContent = character.attributes.strength; |
| displayAgility.textContent = character.attributes.agility; |
| displayIntelligence.textContent = character.attributes.intelligence; |
| displayResistance.textContent = character.attributes.resistance; |
| |
| |
| const maxValue = 10; |
| displayStrengthBar.style.width = `${(character.attributes.strength / maxValue) * 100}%`; |
| displayAgilityBar.style.width = `${(character.attributes.agility / maxValue) * 100}%`; |
| displayIntelligenceBar.style.width = `${(character.attributes.intelligence / maxValue) * 100}%`; |
| displayResistanceBar.style.width = `${(character.attributes.resistance / maxValue) * 100}%`; |
| |
| |
| displaySkills.innerHTML = ''; |
| character.skills.forEach(skill => { |
| const skillElement = document.createElement('span'); |
| skillElement.className = 'px-3 py-1 bg-gray-600 rounded-full'; |
| skillElement.textContent = skill; |
| displaySkills.appendChild(skillElement); |
| }); |
| |
| |
| updateCharacterImage(); |
| |
| |
| creationForm.classList.add('hidden'); |
| characterDisplay.classList.remove('hidden'); |
| } |
| |
| function editCharacter() { |
| |
| creationForm.classList.remove('hidden'); |
| characterDisplay.classList.add('hidden'); |
| } |
| |
| function updateCharacterImage() { |
| |
| characterImage.innerHTML = ''; |
| |
| |
| let iconClass = 'fas fa-user'; |
| let bgColor = 'bg-gray-600'; |
| |
| switch(character.class) { |
| case 'Guerreiro': |
| iconClass = 'fas fa-shield-alt'; |
| bgColor = 'bg-red-600'; |
| break; |
| case 'Mago': |
| iconClass = 'fas fa-hat-wizard'; |
| bgColor = 'bg-blue-600'; |
| break; |
| case 'Arqueiro': |
| iconClass = 'fas fa-bow-arrow'; |
| bgColor = 'bg-green-600'; |
| break; |
| } |
| |
| |
| characterImage.className = `w-40 h-40 rounded-full ${bgColor} flex items-center justify-center text-6xl`; |
| const icon = document.createElement('i'); |
| icon.className = iconClass; |
| characterImage.appendChild(icon); |
| } |
| |
| |
| incrementButtons.forEach(button => { |
| button.disabled = remainingPoints <= 0; |
| }); |
| }); |
| </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=Gabz8646/perso" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
