index.html

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>

<head>

    <title>App Framework Kitchen Sink</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" type="text/css" href="build/icons.css" />

    <link rel="stylesheet" type="text/css" href="build/af.ui.css" />

     <script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://rawgit.com/ftlabs/fastclick/master/lib/fastclick.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.shim.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.ui.js"></script>


    <script src="src/af.desktopBrowsers.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.actionsheet.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.animation.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.touchEvents.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.popup.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.drawer.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.toast.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.animateheader.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.splashscreen.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.swipereveal.js"></script>
    <script type="text/javascript" charset="utf-8" src="src/af.lockscreen.js"></script>


    <script>
    $.afui.useOSThemes=false;
    $.afui.loadDefaultHash=true;
    $.afui.autoLaunch=false;

    //check search
    var search=document.location.search.toLowerCase().replace("?","");
    if(search.length>0)
    {

       $.afui.useOSThemes=true;
        if(search=="win8")
            $.os.ie=true;
        else if(search=="firefox")
            $.os.fennec="true"
        $.afui.ready(function(){
            $(document.body).get(0).className=(search);
        });
    }

    $(document).ready(function(){
        $.afui.launch();
    });

    //if($.os.ios)
        $.afui.animateHeader(true);

    </script>
</head>

<body >
    <div id="splashscreen" class='ui-loader heavy'>
                App Framework
                <br>
                <br>
                <span class='ui-icon ui-icon-loading spin'></span>
                <h1>Starting app</h1>

            </div>
    <div class="view" id="mainview">
        <header>
            <h1>What</h1>
        </header>
        <div class="pages">
            <div data-left-drawer="left" class="panel" id="main" data-title="Main" data-selected="true">
            <p id='main_info'>Welcome to the kitchen sink demo for App Framework UI. Here you will find samples of how to use the App Framework UI. Please select an option from below.</p>
                    <ul class="list">
                        <li>
                            <a href="#afuidemo/foo/bar/something">App Framework UI</a>
                        </li>
                        <li>
                            <a href="#plugins">Plugins</a>
                        </li>
                        <li>
                            <a href="index.html" data-ignore="true">App Framework theme</a>
                        </li>
                         <li>
                            <a href="index.html?ios7" data-ignore="true">iOS theme</a>
                        </li>
                        <li>
                            <a href="index.html?android" data-ignore="true">Android theme</a>
                        </li>
                        <li>
                            <a href="index.html?win8" data-ignore="true">Win8 theme</a>
                        </li>
                        <li>
                            <a href="index.html?bb" data-ignore="true">BB10 theme</a>
                        </li>

                         <li>
                            <a href="index.html?tizen" data-ignore="true">tizen</a>
                        </li>
                        <li>
                            <a href="index.html?firefox" data-ignore="true">firefox</a>
                        </li>


                    </ul>
            </div>
             <div data-left-drawer="left" class="panel" id="plugins" data-title="plugins" >

                <ul class="list">
                    <li><a href="#login" data-transition="up-reveal">Login View (modal)</a></li>
                    <li><a href="#drawer" >Drawer</a></li>
                    <li><a href="ajax.html" >Ajax</a></li>
                    <li><a href="#toast" >Toast</a></li>
                    <li><a href="#popup" >Popup</a></li>
                    <li><a href="#actionsheet">Actionsheet</a></li>
                    <li><a href="#lockscreen" >Lockscreen</a></li>
                    <li><a href="#cards">cards</a></li>
                </ul>
            </div>
            <div class="panel" id="popup" data-title="Popup Plugin" data-include="partials/popup.html">
            </div>
            <div class="panel" id="actionsheet" data-title="Actionsheet Plugin" data-include="partials/actionsheet.html">
            </div>
            <div class="panel" id="toast" data-title="Toast Plugin" data-include="partials/toast.html">
            </div>

            <div data-left-drawer="left" class="panel" id="cards" data-title="Cards">
                <br>
                <div class="card">
                    <h1>Card One</h1>
                    <h2>Card Two</h2>
                </div>
                <div class="card">
                    <h1 class='info'>Meeting</h1>
                    <p>This is card content</p>
                </div>
            </div>

            <div title=" UI" id="afuidemo" class="panel"  data-tab="navbar_ui">
                        <h2 class='expanded' >App Framework UI</h2>
                    <p id='AFUI_info'>App Framework UI is the User Interface/User Experience library for mobile applications. It uses HTML5 and CSS3 for animations and transitions. We built the kitchen sink using App Framework UI. It is comprised of components from the Plugins library
                        and additional features.
                        <br>* Fixed navigation bar
                        <br>* Auto scrolling content panels
                        <br>* Optional footer to segment your application
                        <br>
                    </p>
                    <ul class="list">
                        <li>
                            <a href="#aftransitions">Transitions</a>
                        </li>
                        <li>
                            <a href="#afforms">Form Styles</a>
                        </li>
                        <li>
                            <a href="#afgrid">Grid System</a>
                        </li>
                         <li>
                            <a href="#uiinsetlist">Inset List</a>
                        </li>
                         <li>
                            <a href="#uibuttons">Buttons</a>
                        </li>
                        <li>
                            <a href="#uiicons">Vector Icons</a>
                        </li>
                    </ul>
                </div>
                <div id="uiicons" title="Vector Icons" class="panel">
                        <h2 class='expanded' onclick='showHide(this,"icons_info");'>Vector Icons</h2>
                    <p id='icons_info'>App Framework UI provides Vector icons to use throughout your app. Simply add the icon class, along with the image class name and additional sizes you want.
                        <br>.mini -  .7em high
                        <br>.big - 1.5em hight
                        <br>The default is 1em.
                        <br>
                    </p>
                    <ul class="list">
                        <li>
                            <a  class="icon home">Home</a>
                        </li>
                        <li>
                            <a  class="icon home mini">Home Mini</a>
                        </li>
                        <li>
                            <a  class="icon pencil big">Pencil</a>
                        </li>
                        <li>
                            <a  class="icon picture big">Picture</a>
                        </li>
                        <li>
                            <a  class="icon camera big">Camera</a>
                        </li>
                        <li>
                            <a  class="icon headset big">Headset</a>
                        </li>
                        <li>
                            <a  class="icon paper big">Paper</a>
                        </li>
                        <li>
                            <a  class="icon stack big">Stack</a>
                        </li>
                        <li>
                            <a  class="icon folder big">Folder</a>
                        </li>
                        <li>
                            <a  class="icon tag big">Tag</a>
                        </li>
                        <li>
                            <a  class="icon basket big">Basket</a>
                        </li>
                        <li>
                            <a  class="icon phone big">Phone</a>
                        </li>
                        <li>
                            <a  class="icon mail big">Mail</a>
                        </li>
                        <li>
                            <a  class="icon location big">Location</a>
                        </li>
                        <li>
                            <a  class="icon clock big">Clock</a>
                        </li>
                        <li>
                            <a  class="icon calendar big">Calendar</a>
                        </li>
                        <li>
                            <a  class="icon message big">Message</a>
                        </li>
                        <li>
                            <a  class="icon chat big">Chat</a>
                        </li>
                        <li>
                            <a  class="icon user big">User</a>
                        </li>
                        <li>
                            <a  class="icon loading big">Loading</a>
                        </li>
                        <li>
                            <a  class="icon refresh big">Refresh</a>
                        </li>
                        <li>
                            <a  class="icon magnifier big">Magnifier</a>
                        </li>
                        <li>
                            <a  class="icon key big">Key</a>
                        </li>
                        <li>
                            <a  class="icon settings big">Settings</a>
                        </li>
                        <li>
                            <a  class="icon graph big">Graph</a>
                        </li>
                        <li>
                            <a  class="icon trash big">Trash</a>
                        </li>
                        <li>
                            <a  class="icon pin big">Pin</a>
                        </li>
                        <li>
                            <a  class="icon target big">Target</a>
                        </li>
                        <li>
                            <a  class="icon download big">Download</a>
                        </li>
                        <li>
                            <a  class="icon upload big">Upload</a>
                        </li>
                        <li>
                            <a  class="icon star big">Star</a>
                        </li>
                        <li>
                            <a  class="icon heart big">Heart</a>
                        </li>
                        <li>
                            <a  class="icon warning big">Warning</a>
                        </li>
                        <li>
                            <a  class="icon add big">Add</a>
                        </li>
                        <li>
                            <a  class="icon remove big">Remove</a>
                        </li>
                        <li>
                            <a  class="icon question big">Question</a>
                        </li>
                        <li>
                            <a  class="icon info big">Info</a>
                        </li>
                        <li>
                            <a  class="icon error big">Error</a>
                        </li>
                        <li>
                            <a  class="icon check big">Check</a>
                        </li>
                        <li>
                            <a  class="icon minimize big">Minimize</a>
                        </li>
                        <li>
                            <a  class="icon close big">Close</a>
                        </li>
                        <li>
                            <a  class="icon up big">Up</a>
                        </li>
                        <li>
                            <a  class="icon down big">Down</a>
                        </li>
                        <li>
                            <a  class="icon left big">Left</a>
                        </li>
                        <li>
                            <a  class="icon right big">Right</a>
                        </li>
                        <li>
                            <a  class="icon tools big">Tools</a>
                        </li>
                        <li>
                            <a  class="icon html5 big">HTML5</a>
                        </li>
                        <li>
                            <a  class="icon css big">CSS</a>
                        </li>
                        <li>
                            <a  class="icon js big">JS</a>
                        </li>
                        <li>
                            <a  class="icon cloud big">Cloud</a>
                        </li>
                        <li>
                            <a  class="icon tv big">TV</a>
                        </li>
                        <li>
                            <a  class="icon wifi big">Wifi</a>
                        </li>
                        <li>
                            <a  class="icon new big">New</a>
                        </li>
                        <li>
                            <a  class="icon mic big">Mic</a>
                        </li>
                        <li>
                            <a  class="icon database big">Database</a>
                        </li>
                        <li>
                            <a  class="icon busy big">Busy</a>
                        </li>
                        <li>
                            <a  class="icon bug big">Bug</a>
                        </li>
                        <li>
                            <a  class="icon lamp big">Lamp</a>
                        </li>
                    </ul>
                </div>

                <div id="afgrid" title="Grid System" class="panel" data-footer="footerui">
                    <p>You can specify the following types of grids</p>
                    <ul class="list inset">
                        <li>col2 - 50% (2x2)</li>
                        <li>col3 - 33.3% (3x3)</li>
                        <li>col1-3 - 33.3% (33.3% for 3 column)</li>
                        <li>col2-3 - 66% (66.6% for 3 column)</li>
                    </ul>
                    On phones, the grid system will always default to a single row.  On tablets, it will display inline.

                    <h2>2 column</h2>
                    <div class="grid">
                        <div class="col2">This is the left column</div>
                        <div class="col2">This is the right column</div>
                    </div>

                    <h2>3 column</h2>
                    <br>
                    <div class="grid">
                        <div class="col3">This is the left column</div>
                        <div class="col3">This is the middle column</div>
                        <div class="col3">This is the right column</div>
                    </div>

                    <h2>1-3/2-3 column</h2>
                    <br>
                    <div class="grid">
                        <div class="col1-3">This is the left column</div>

                        <div class="col2-3">This is the right column</div>
                    </div>

                    <h2>2-3/1-3 column</h2>
                    <br>
                    <div class="grid">
                        <div class="col2-3">This is the left column</div>

                        <div class="col1-3">This is the right column</div>
                    </div>
                </div>

                <div title="Transitions" id="aftransitions" class="panel" data-footer='footerui'>
                        <h2 class='expanded' onclick='showHide(this,"AFUI_transitions");'>App Framework UI</h2>
                    <p id='AFUI_transitions'>   <strong>af.ui transitions</strong> the following are transitions built in. You can easily add/extend with your own. Set the data-transition attribute on an anchor to change the transition.</p>
                    <ul class="list">
                        <li>
                            <a href="#transition1" data-transition="slide">Slide</a>
                        </li>
                        <li>
                            <a href="#transition2" data-transition="up">Slide Up</a>
                        </li>
                        <li>
                            <a href="#transition3" data-transition="down">Slide Down</a>
                        </li>
                        <li>
                            <a href="#transition4" data-transition="pop">Pop</a>
                        </li>
                        <li>
                            <a href="#transition5" data-transition="flip">Flip</a>
                        </li>
                        <li>
                            <a href="#transition6" data-transition="fade">Fade</a>
                        </li>
                        <li>
                            <a href="#transition1" data-transition="invoke">Invoke</a>
                        </li>
                        <li>
                            <a href="#transition1" data-transition="slide-full">Slide Full</a>
                        </li>
                    </ul>
                    <br/>
                    <br/>
                </div>
                <div id="uiinsetlist" title=" UI Inset list" class="panel" data-footer='footerui'>
                    Inset lists have a margin and rounded corners
                    <ul class="list inset">
                        <li>
                            <a href="#uigoback">.goBack()</a>
                        </li>
                        <li>
                            <a href="#uiclearhistory">.clearHistory()</a>
                        </li>
                        <li class="divider">
                           This is a divider
                        </li>
                        <li>
                            <a href="#uiaddcontentdiv">.addContentDiv ()</a>
                        </li>
                        <li>
                            <a href="#uisettitle">.setTitle(text)</a>
                        </li>
                        <li>
                            <a href="#uisetbackbutton">.setBackButtonText()</a>
                        </li>
                        <li>
                            <a href="#uishowmask">.showMask()</a>
                        </li>
                        <li>
                            <a href="#uihidemask">.hideMask()</a>
                        </li>
                        <li>
                            <a href="#uiloadcontent">.loadContent();</a>
                        </li>
                        <li>
                            <a href="#uilaunch">.launch();</a>
                        </li>
                        <li>
                            <a href="#uiready">.ready();</a>
                        </li>
                        <li>
                            <a href="#uibadge">.updateBadge();</a>
                        </li>
                        <li>
                            <a href="#uiremovebadge">.removeBadge();</a>
                        </li>
                        <li>
                            <a href="#uitoggleheader">.toggleHeaderMenu();</a>
                        </li>
                        <li>
                            <a href="#uitoggleside">.toggleSideMenu();</a>
                        </li>
                        <li>
                            <a href="#uitogglenav">.toggleNavMenu();</a>
                        </li>
                        <li>
                            <a href="#uiactionsheet">.actionsheet()</a>
                        </li>
                        <li>
                            <a href="#uiscrolltotop">.scrollToTop()</a>
                        </li>
                        <li>
                            <a href="#uiscrolltobottom">.scrollToBottom()</a>
                        </li>
                    </ul>
                </div>
                <div id="uibuttons" title=" UI Buttons" class="panel" >
                    Below are different types of buttons<br><br>
                    <a class="button">Test</a><br><br>
                    <a class="button red previous">Test red</a><br><br>
                    <a class="button red next">Test red</a><br><br>
                    <a class="button icon pencil">Test block</a><br><br><br>
                    <a class="button block">Test block</a><br><br><br>
                    Grouped horizontal
                    <br><br>
                    <div class="button-grouped" style='width:300px'>
                        <a class="button">Test</a>
                        <a class="button">Test</a>
                        <a class="button">Test</a>
                    </div>
                    <br><br>
                    grouped vertical<br><br>
                    <div class="button-grouped vertical" style="width:200px;">
                        <a class="button icon pencil">Test</a>
                        <a class="button">Test</a>
                        <a class="button">Test</a>
                    </div>
                    <br><br>
                    Grouped flexbox and tabbed (tabbed keeps pressed state)<br><br>
                    <div class="button-grouped flex tabbed">
                        <a class="button icon cloud">App Framework Button Groups</a>
                        <a class="button">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
                        <a class="button">Test</a>
                    </div>
                    <br><br>
                    Colors<br><br>
                    <a class="button yellow">Yellow</a><br><br>
                    <a class="button red">Red</a><br><br>
                    <a class="button green">Green</a><br><br>
                    <a class="button orange">Orange</a><br><br>
                    <a class="button slate">Slate</a><br><br>
                    <a class="button black">Black</a><br><br>
                    <a class="button gray">Gray</a><br><br>

                </div>
                <div title="Slide" id="transition1" class="panel splashscreen"  style="padding-left:0px">
                    <div style="text-align:center;width:100%;color:white;font-size:40px">App Framework Slide Transition</div>
                </div>
                <div title="Slide Up" id="transition2" class="panel splashscreen"  style="padding-left:0px">
                     <div style="text-align:center;width:100%;color:white;font-size:40px">App Framework Slide Up Transition</div>
                </div>
                <div title="Slide Down" id="transition3" class="panel splashscreen"  style="padding-left:0px">
                     <div style="text-align:center;width:100%;color:white;font-size:40px">App Framework Slide Down Transition</div>
                </div>
                <div title="Pop" id="transition4" class="panel splashscreen"  style="padding-left:0px">
                    <div style="text-align:center;width:100%;color:white;font-size:40px">App Framework Pop Transition</div>
                </div>
                <div title="Flip" id="transition5" class="panel splashscreen"  style="padding-left:0px">
                    <div style="text-align:center;width:100%;color:white;font-size:40px">App Framework Flip Transition</div>
                </div>
                <div title="Fade" id="transition6" class="panel splashscreen"  style="padding-left:0px">
                    <div style="text-align:center;width:100%;color:white;font-size:40px">App Framework Fade Transition</div>
                </div>

            <div class="panel" id="drawer" data-title="Drawer">
                <a href="#" class="button" onclick="$.afui.drawer.hide('#left')">Hide Left</a>
                <a href="#" class="button" data-menu-close>Hide Active</a>
                <a href="#" class="button" data-menu-close data-right-menu="right">Hide Right</a>
                <br>
                <a href="#" class="button" data-left-menu="left" >Cover Left</a>
                <br>
                <a href="#" class="button" onclick="$.afui.drawer.show('#right','right')">Cover Right</a>
                <br>
                <a href="#" class="button" data-left-menu="left" data-transition="push">Left Push</a>
                <br>
                <a href="#" class="button" onclick="$.afui.drawer.show('#left','left','reveal')">Left Reveal</a>
                <br>
                <a href="#" class="button" onclick="$.afui.drawer.show('#right','right','push')">Right Push</a>
                <br>
                <a href="#" class="button" onclick="$.afui.drawer.show('#right','right','reveal')">Right Reveal</a>
            </div>

            <div id="afforms" title="Form Styles" class="panel" data-include="partials/forms.html"></div>

            <div id="lockscreen" title="Lock Screen" class="panel" data-include="partials/lockscreen.html"></div>
        </div>
        <footer>
            <a href="#main" class="icon home" data-transition="slide">Main</a>

            <a href="#plugins" class="icon html5" data-transition="slide">Plugins</a>
            <a href="#touchevents" class="icon trash" data-transition="up-reveal">Touch Events</a>
            <a href="/foo/bar" class="icon trash"  data-transition="slide">Foobar</a>
        </footer>
        <nav id="left"  style="z-index:5" data-include="partials/leftnav.html">

        </nav>
        <nav id="right">
            <div class="view active" id="navView2">
                <header>
                    <h1>What</h1>
                </header>
                <div class="pages">

                    <div class="panel active" id="rightNav" data-title="Foobar">
                        This is the right nav
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="view" id="touchView">
        <header><h1></h1></header>
        <div class="pages">
            <div class="panel" data-title="touch events" id="touchevents" data-include="partials/touch.html">
            </div>
        </div>
    </div>


    <div class="view" id="loginView">
        <div class="pages">
            <div class="panel" id="login">
                <br>
                <div class="card">
                    <h1>Login</h1>
                    <br>
                    <div class="input-group">
                        <input type="text" placeholder="Username">

                        <input type="text" placeholder="password">
                    </div>
                    <a class='button' href='#main' data-transition='up-reveal:dismiss'>Cancel</a>
                    <a class='button' href='#main' data-transition='up-reveal:dismiss'>Login</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>