Untitled

<!doctype html>
<html lang="en">
    <head>
        <!-- My ide won't stop pestering me about trailing frontslashes on void tags, so I've removed all of them on voids. -->
    <meta charset="utf-8">

    <title>RPG Tracker</title>

    <!--  Mobile viewport optimized: j.mp/bplateviewport -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Mobile IE needs ClearType for smoothing fonts -->
    <meta http-equiv="cleartype" content="on">

    <!-- StyleSheets under here -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
    <link rel="stylesheet" href="css/styles.css">

    <!-- JavaScript is normally at the end of the body, except for Modernizr which enables HTML5 elements & feature detects -->
    <script src="js/libs/modernizr.custom.min.js"></script>

    </head>
    <body>
        <!--"Home" page-->
        <div data-role="page" id="home" data-theme="a" data-content-theme="a" data-add-back-btn="true">
            <div data-role="header">
                <h1>Home</h1>
            </div>
            <div data-role="content">
                <img src="img/logo.png" alt="RPG Tracker">
                    <div id="cta">
                        <p>Track all your table top RPG chracters with the RPG Tracker.</p>
                        <a rel="external" href="#add-item" data-role="button">Add New Character</a>
            <a rel="external" href="#display-page" data-role="button">View Existing Characters</a>
                        <hr>
                    </div>
                    <div id="search">
                        <label for="app-search-field">Search for Character:</label>
                        <input type="search" name="app-search-field" id="app-search-field" value="">
                        <a id="search-btn" data-role="button">Search</a>
                        <hr>
                    </div>

                    <div>
                        <h4>Browse Characters:</h4>
                        <ul data-role="listview" id="list-view" data-inset="true">
                            <li><a href="#error404"><h3>Browse by Date Created</h3></a></li>
                            <li><a href="#error404"><h3>Browse by Highest Rating</h3></a></li>
            </ul>
            </div>


            <div data-role="footer" data-id="nav-footer">
                <div data-role="navbar">
                    <ul>
            <li><a href="../Gold/index.html" class="ui-btn-active ui-state-persist">Gold</a></li>
            <li><a href="../Bronze/index.html">Bronze</a></li>
                        <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Gold/index.html" rel="external">GH-Gold</a></li>
            <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Bronze/index.html" rel="external">GH-Bronze</a></li>
                    </ul>
                </div>
            </div>
        </div>


        <!--404 page-->
        <div data-role="page" id="error404" data-theme="a" data-content-theme="a" data-add-back-btn="true">
            <div data-role="header">
                <h1>404</h1>
            </div>

            <div data-role="content">
        <img src="img/logo.png" alt="RPG Tracker">
                <h1>404. (That's an error.)</h1>
                <p>The page you requested could not be found.</p>
            </div>

            <div data-role="footer" data-id="nav-footer">
        <div data-role="navbar">
                    <ul>
            <li><a href="../Gold/index.html" class="ui-btn-active ui-state-persist">Gold</a></li>
            <li><a href="../Bronze/index.html">Bronze</a></li>
                        <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Gold/index.html" rel="external">GH-Gold</a></li>
            <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Bronze/index.html" rel="external">GH-Bronze</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--Search result dialog-->
        <div data-role="page" id="search-results" data-theme="a" data-add-back-btn="true" >
            <div data-role="header">
                <h1>Search Results</h1>
            </div>
            <div data-role="content" data-theme="b">
        <img src="img/logo.png" alt="RPG Tracker">
                <p id="results-num"></p>
                <ul id="results-list">

                </ul>
            </div>
            <div data-role="footer" data-id="nav-footer">
        <div data-role="navbar">
                    <ul>
            <li><a href="../Gold/index.html">Gold</a></li>
            <li><a href="../Bronze/index.html">Bronze</a></li>
                        <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Gold/index.html" rel="external">GH-Gold</a></li>
            <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Bronze/index.html" rel="external">GH-Bronze</a></li>
                    </ul>
                </div>
            </div>
        </div>

    <!--display page -->
    <div data-role="page" id="display-page" data-theme="a" data-add-back-btn="true" >
        <div data-role="header">
                <h1>View Characters</h1>
            </div>
            <div data-role="content">
        <img src="img/logo.png" alt="RPG Tracker">
        <input type="button" id="displayStorageBtn" value="Display Data" data-theme="b">
                <input type="button" id="clearStorageBtn" value="Clear All Data" data-theme="c">

                <ul id="display-list">

                </ul>
            </div>
        <div data-role="footer" data-id="nav-footer">
        <div data-role="navbar">
                    <ul>
            <li><a href="../Gold/index.html">Gold</a></li>
            <li><a href="../Bronze/index.html">Bronze</a></li>
                        <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Gold/index.html" rel="external">GH-Gold</a></li>
            <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Bronze/index.html" rel="external">GH-Bronze</a></li>
                    </ul>
                </div>
            </div>
    </div>

        <!--Add char form-->
    <div data-role="page" id="add-item" data-theme="a" data-add-back-btn="true">
        <!--I decided to edit my form from the previous week to be more flexable and generic for use in many different RPGs, and not just Dungeons and Dragons, as it was before.-->

        <div data-role="header">
                <h1>Add New Character</h1>
            </div>
        <div data-role="content">
                            <img src="img/logo.png" alt="RPG Tracker">
            <form action="" method="post" id="addCharForm">
                <fieldset data-role="controlgroup">
                    <label for="dateCreated">Date Created:</label>
                <input type="date" name="dateCreated" id="dateCreated">
            </fieldset>

            <fieldset data-role="controlgroup">
                    <label for="charAge">Age:</label>
                <input type="text" name="charAge" id="charAge" value="" class="required number">
            </fieldset>

            <fieldset data-role="controlgroup">
                <label for="charName">Name:</label>
                <input type="text" name="charName" id="charName" value="" class="required">
            </fieldset>

            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Choose character gender:</legend>
                <input type="radio" name="gender" id="radioMale" value="Male">
                <label for="radioMale">Male</label>

                <input type="radio" name="gender" id="radioFemale" value="Female">
                <label for="radioFemale">Female</label>
            </fieldset>

            <fieldset data-role="controlgroup">
                <label for="charAttrs">Describe your character's <b>attributes</b> in this field:</label>
                <textarea id="charAttrs" name="charAtts"></textarea>
            </fieldset>
            <fieldset data-role="controlgroup">
                <label for="charSkills">Describe your character's <b>skills</b> in this field:</label>
                <textarea id="charSkills" name="charSkills"></textarea>
            </fieldset>
            <fieldset data-role="controlgroup">
                <label for="charBio">Character Biography:</label>
                <textarea id="charBio" name="charBio"></textarea>
            </fieldset>
            <fieldset data-role="controlgroup">
                <label for="charRating">Rate Your Character:</label>
                <input type="range" name="charRating" id="charRating" value="100" min="0" max="100">
            </fieldset>

            <input type="reset" value="Reset">
            <input type="submit" value="Submit Character" data-theme="b">
            </form>
        </div>
        <div data-role="footer" data-id="nav-footer">
        <div data-role="navbar">
                    <ul>
            <li><a href="../Gold/index.html">Gold</a></li>
            <li><a href="../Bronze/index.html">Bronze</a></li>
                        <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Gold/index.html" rel="external">GH-Gold</a></li>
            <li><a href="http://tarkenfire.github.com/full_sail_miu/mancuso_michael_project3/Bronze/index.html" rel="external">GH-Bronze</a></li>
                    </ul>
                </div>
            </div>
    </div>

        <!-- JavaScript under here -->
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="js/libs/jquery.validate.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/json.js"></script>
    </body>
    </html>