SuperGenPass

TODO - back button - add new site - save/load from local stroage - supergenpass integration

by Reiot

HTML

<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css">
<div id="main" data-role="page">
    
    <div data-role="header">
        <h1>SuperGenPass</h1>
        <a id="add-site-button" href="#add-site-page" data-role="button" data-icon="plus">Add</a>
        
    </div><!-- /header -->
    
    <div data-role="content">    
        <ul id="site-list" data-role="listview" data-theme="g">
            <li><a href="#" data-url="http://facebook.com">Facebook</a></li>
            <li><a href="#" data-url="http://twitter.com">Twitter</a></li>
            <li><a href="#" data-url="http://google.com">google</a></li>
            <li><a href="#" data-url="http://yahoo.com">yahoo.com</a></li>
        </ul>      
    </div><!-- /content -->
    
    <div data-role="footer">
        <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
    </div><!-- /header -->
</div><!-- /page -->

<div id="add-site-page" data-role="page">
    <div data-role="header">
        <h1>Add Site</h1>
    </div><!-- /header -->
    
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <form> 
                <label for="site-url">Site URL</label>
                <input id="site-url" type="url"/>
                <label for="site-name">Site Name(optional)</label>
                <input id="site-name" type="text"/>
                <input id="site-submit" type="submit" value="Submit"/>
            </form>
        </div>
    </div><!-- /content -->
    
    <div data-role="footer">
        <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
    </div><!-- /header -->
    
</div>

JavaScript

$(function() {
    $('#site-submit').click(function() {
        alert('aaa');
        var siteURL = $('#site-url').val();
        var siteName = $('#site-name').val();
        if (!siteName) {
            siteName = siteURL;
        }
        var $newSite = $('<li>').append($('<a href="#">').data('url', siteURL).html(siteName));
        $('#site-list').append($newSite).listview('refresh');
        return false;
    });
});