|
|
<!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> |
