default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Pathfinder_CharacterSheet</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- Pathfinder_CharacterSheet references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/buttons.js"></script>
</head>
<body>
    <p>Content goes here</p>
    <form>
        <fieldset class="float">
            <legend class="fieldHeader">Character Information</legend>
            <table>
                <tr>
                    <td class="formlabel">Name:</td>
                    <td><input type="text" id="char_name" /></td>
                    <td class="formlabel">Race:</td>
                    <td><select id="char_race">  <option value="dwarf">Dwarf</option>  <option value="elf">Elf</option>  <option value="human">Human</option>  </select></td>
                </tr>
                <tr>
                    <td class="formlabel">Gender:</td>
                    <td><select id="char_gender">  <option value="male">Male</option>  <option value="female">Female</option>  </select></td>
                    <td class="formlabel">Class:</td>
                    <td><select id="char_race">  <option value="cleric">Cleric</option>  <option value="fighter">Fighter</option>  <option value="rogue">Rogue</option>  <option value="wizard">Wizard</option>  </select></td>
                </tr>
                <tr>
                    <td class="formlabel">Alignment:</td>
                    <td><select id="char_alignment">  <option value="lg">Lawful Good</option>  <option value="ng">Neutral Good</option>  <option value="cg">Chaotic Good</option>  <option value="ln">Lawful Neutral</option>  <option value="n">Neutral</option>  <option value="cn">Chaotic Neutral</option></select></td>
                    <td></td>
                    <td><button onclick="testSaveCharInfo()">Save</button></td>
                </tr>
            </table>
        </fieldset>
        <fieldset class="float">
            <legend class="fieldHeader">Level Progress and Health</legend>
            <table>
                <tr>
                    <td class="formlabel">Experience:</td>
                    <td><input type="number" name="char_xp" /></td>
                    <td class="formlabel">Health:</td>
                    <td><input type="number" name="char_xp" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <progress id="progExp" value="150" max="2000"></progress>
                    </td>
                    <td></td>
                    <td>
                        <progress id="progHealth" value="12" max="12"></progress>
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
</body>
</html>