Modern D&D Character Creator

Basic Info

Character Name

Class

Race

Attributes

Strength

Dexterity

Constitution

Intelligence

Wisdom

Charisma

Background & Personality

Background

Personality Traits

Character Preview

New Character

Race Class

STR 10

DEX 10

CON 10

INT 10

WIS 10

CHA 10

Background

No background provided yet.

Personality

No personality traits provided yet.

:root { --primary-color: #3a86ff; --secondary-color: #8338ec; --dark-color: #212529; --light-color: #f8f9fa; --success-color: #38b000; --danger-color: #ff006e; --border-radius: 8px; --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; background-color: #f5f5f5; color: var(--dark-color); } .app-container { max-width: 1200px; margin: 0 auto; padding: 20px; } .app-header { text-align: center; margin-bottom: 30px; padding: 20px 0; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .creator-container { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .character-form { background-color: white; padding: 25px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .form-section { margin-bottom: 25px; } .form-section h2 { margin-bottom: 15px; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 5px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 600; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: var(--border-radius); font-size: 16px; } .form-group textarea { min-height: 100px; resize: vertical; } .attributes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .attribute { text-align: center; } .attribute label { display: block; margin-bottom: 5px; font-weight: 600; } .attribute input { width: 100%; padding: 8px; text-align: center; font-size: 18px; font-weight: bold; } .generate-btn { width: 100%; padding: 12px; background-color: var(--primary-color); color: white; border: none; border-radius: var(--border-radius); font-size: 18px; font-weight: bold; cursor: pointer; transition: background-color 0.3s; } .generate-btn:hover { background-color: var(--secondary-color); } .character-preview { background-color: white; padding: 25px; border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .character-preview h2 { margin-bottom: 20px; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 5px; } .preview-card { border: 1px solid #ddd; border-radius: var(--border-radius); overflow: hidden; } .preview-header { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; padding: 20px; text-align: center; } .preview-header h3 { font-size: 24px; margin-bottom: 5px; } .preview-subtitle { font-size: 16px; opacity: 0.9; } .preview-attributes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 20px; background-color: #f8f9fa; } .preview-attribute { text-align: center; background-color: white; padding: 10px; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .preview-attribute span:first-child { display: block; font-weight: bold; color: var(--primary-color); margin-bottom: 5px; } .preview-attribute span:last-child { font-size: 20px; font-weight: bold; } .preview-background, .preview-personality { padding: 20px; } .preview-background h4, .preview-personality h4 { color: var(--primary-color); margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; } @media (max-width: 768px) { .creator-container { grid-template-columns: 1fr; } .attributes-grid { grid-template-columns: repeat(2, 1fr); } .preview-attributes { grid-template-columns: repeat(2, 1fr); } } document.addEventListener('DOMContentLoaded', function() { const formInputs = { name: document.getElementById('character-name'), class: document.getElementById('character-class'), race: document.getElementById('character-race'), strength: document.getElementById('strength'), dexterity: document.getElementById('dexterity'), constitution: document.getElementById('constitution'), intelligence: document.getElementById('intelligence'), wisdom: document.getElementById('wisdom'), charisma: document.getElementById('charisma'), background: document.getElementById('background'), personality: document.getElementById('personality') }; const previewElements = { name: document.getElementById('preview-name'), class: document.getElementById('preview-class'), race: document.getElementById('preview-race'), strength: document.getElementById('preview-strength'), dexterity: document.getElementById('preview-dexterity'), constitution: document.getElementById('preview-constitution'), intelligence: document.getElementById('preview-intelligence'), wisdom: document.getElementById('preview-wisdom'), charisma: document.getElementById('preview-charisma'), background: document.getElementById('preview-background'), personality: document.getElementById('preview-personality') }; const generateBtn = document.getElementById('generate-btn'); // Update preview on input changes Object.keys(formInputs).forEach(key => { formInputs[key].addEventListener('input', updatePreview); }); // Generate character button generateBtn.addEventListener('click', function(e) { e.preventDefault(); updatePreview(); alert('Character generated successfully!'); }); function updatePreview() { // Basic info previewElements.name.textContent = formInputs.name.value || 'New Character'; previewElements.class.textContent = formInputs.class.value || 'Class'; previewElements.race.textContent = formInputs.race.value || 'Race'; // Attributes previewElements.strength.textContent = formInputs.strength.value; previewElements.dexterity.textContent = formInputs.dexterity.value; previewElements.constitution.textContent = formInputs.constitution.value; previewElements.intelligence.textContent = formInputs.intelligence.value; previewElements.wisdom.textContent = formInputs.wisdom.value; previewElements.charisma.textContent = formInputs.charisma.value; // Background & Personality previewElements.background.textContent = formInputs.background.value || 'No background provided yet.'; previewElements.personality.textContent = formInputs.personality.value || 'No personality traits provided yet.'; } // Initialize preview updatePreview(); });