index.html

<div id="character-sheet-container" class="panel">
    <h2>Character Sheet</h2>

    <div class="char-section char-header">
        <label for="char-name">👤 Name:</label>
        <input type="text" id="char-name" value="Hero">

        <button id="save-char-btn" class="emoji-button" title="Save Character Locally">💾<span class="btn-label">Save</span></button>
        <button id="export-char-btn" class="emoji-button" title="Export Character to File">📤<span class="btn-label">Export</span></button>
        </div>

    <div class="char-section char-details">
        <div><label>🧬 Race:</label> <span id="char-race">Human</span></div>
        <div><label>🧭 Alignment:</label> <span id="char-alignment">Neutral Good</span></div>
        <div><label>⚔️ Class:</label> <span id="char-class">Fighter</span></div>
    </div>

    <div class="char-section char-level-xp">
        <div><label>⭐ Level:</label> <span id="char-level">1</span></div>
        <div>
            <label>✨ XP:</label> <span id="char-xp">0</span> / <span id="char-xp-next">100</span>
            <button id="levelup-btn" class="emoji-button" title="Level Up!" disabled>⬆️<span class="btn-label">Level Up</span></button>
        </div>
    </div>

    <div class="char-section char-stats">
        <h3>Stats</h3>
        <div class="stats-grid">
            <div>❤️ HP: <span id="char-hp">30</span> / <span id="char-max-hp">30</span></div>
            <div>💪 Str: <span id="stat-strength">7</span> <button class="emoji-button stat-increase" data-stat="strength" title="Increase Strength" disabled>➕</button></div>
            <div>🧠 Int: <span id="stat-intelligence">5</span> <button class="emoji-button stat-increase" data-stat="intelligence" title="Increase Intelligence" disabled>➕</button></div>
            <div>🙏 Wis: <span id="stat-wisdom">5</span> <button class="emoji-button stat-increase" data-stat="wisdom" title="Increase Wisdom" disabled>➕</button></div>
            <div>🤸 Dex: <span id="stat-dexterity">6</span> <button class="emoji-button stat-increase" data-stat="dexterity" title="Increase Dexterity" disabled>➕</button></div>
            <div>🛡️ Con: <span id="stat-constitution">6</span> <button class="emoji-button stat-increase" data-stat="constitution" title="Increase Constitution" disabled>➕</button></div>
            <div>😎 Cha: <span id="stat-charisma">5</span> <button class="emoji-button stat-increase" data-stat="charisma" title="Increase Charisma" disabled>➕</button></div>
        </div>
        <p><small>Cost to increase stat: <span id="stat-increase-cost">?</span> XP</small></p>
    </div>

    <div class="char-section char-possessions">
        <h3>🎒 Possessions</h3>
        <ol id="char-inventory-list" start="1">
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
            <li><span class="item-slot"></span></li>
        </ol>
    </div>
</div>