index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- App stuff -->
        <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="app.css" />    
        <link rel="apple-touch-icon-precomposed" href="images/57.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/72.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/114.png" />
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/144.png" />
    </head>
    <body>
        <div class="splash"></div>

        <div id="drawer" data-role="drawer" data-views="['list', 'account', 'settings', 'notifications', 'feedback']">
            <ul data-role="listview" data-style="inset" data-type="group" data-click="showAbout">
                <li>
                    Narwhal Bacon
                    <ul>
                        <li><a href="#list">Home</a></li>
                        <li><a href="#account">My account</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="#settings">Settings</a></li>
                        <li><a href="#notifications">Notifications</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="#feedback">Feedback</a></li>
                        <li><a>About</a></li>
                    </ul>
                </li>
            </ul>
        </div>


        <div data-role="layout" data-id="default">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-role="button" data-rel="drawer" href="#drawer" data-icon="drawer-button" data-align="left"></a>
                    <span data-role="view-title"></span>
                </div>
            </header>
        </div>

        <div data-role="view" data-title="Cuteness." id="list" data-show="showApp" data-layout="default">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-role="button" data-rel="drawer" href="#drawer" data-icon="drawer-button" data-align="left"></a>
                    <span data-role="view-title"></span>
                    <a href="#canvas" data-role="button" data-icon="canvas" data-transition="slide" data-align="right"></a>
                </div>
            </header>

            <ul data-role="listview" data-template="item-template" data-source="awwDataSource" data-load-more="true" id="aww" data-pull-to-refresh="true" data-click="showDetail">
            </ul>
        </div>

        <div data-role="view" data-title="Narwhal" id="account" data-layout="default">
            <ul data-role="listview" data-type="group" data-style="inset">
                <li>
                    Overview
                    <ul>
                        <li>Username <span class="account-info">Narwhal</span></li>
                        <li>Account Age <span class="account-info">432 days</span></li>
                    </ul>
                </li>
                <li>
                    Karma
                    <ul>
                        <li>Link Karma <span class="account-info">54</span></li>
                        <li>Comment Karma <span class="account-info">123</span></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div data-role="view" data-title="Notifications" id="notifications" data-layout="default">
            <ul data-role="listview" data-type="group" data-style="inset">
                <li>
                    Content
                    <ul>
                        <li>I receive a message <input type="checkbox" data-role="switch" checked="checked" /></li>
                        <li>New item is posted <input type="checkbox" data-role="switch" /></li>
                        <li>New comment is posted <input type="checkbox" data-role="switch" checked="checked" /></li>
                    </ul>
                </li>
                <li>
                    Karma
                    <ul>
                        <li>Someone upvotes me <input type="checkbox" data-role="switch" /></li>
                        <li>Someone downvotes me <input type="checkbox" checked="checked" data-role="switch" /></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div data-role="view" data-title="Feedback" id="feedback" data-layout="default">
            <ul data-role="listview" data-style="inset">
                <li>
                    <textarea placeholder="I need help with cat browsing">

                    </textarea>
                </li>
            </ul>

            <a data-role="button">Submit</a>
        </div>

        <div data-role="view" data-title="Notifications" id="notifications" data-layout="default">
            <ul data-role="listview" data-type="group" data-style="inset">
                <li>
                    Content
                    <ul>
                        <li>I receive a message <input type="checkbox" data-role="switch" checked="checked" /></li>
                        <li>New item is posted <input type="checkbox" data-role="switch" /></li>
                        <li>New comment is posted <input type="checkbox" data-role="switch" checked="checked" /></li>
                    </ul>
                </li>
                <li>
                    Karma
                    <ul>
                        <li>Someone upvotes me <input type="checkbox" data-role="switch" /></li>
                        <li>Someone downvotes me <input type="checkbox" checked="checked" data-role="switch" /></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div data-role="view" data-title="Settings" id="settings" data-layout="default">
            <ul data-role="listview" data-type="group" data-style="inset">
                <li>
                    Behavior
                    <ul>
                        <li><label>Auto-load Posts While Scrolling <input type="checkbox" /></label></li>
                        <li><label>Enable Tilt Scrolling <input type="checkbox" checked="checked" /></label></li>
                        <li><label>Reverse Tilt-Scroll Direction <input type="checkbox" checked="checked" /></label></li>
                        <li><label>Allow rotation <input type="checkbox" /></label></li>
                    </ul>
                </li>
                <li>
                    Posts
                    <ul>
                        <li><label>Show Voting Arrows <input type="checkbox" /></label></li>
                        <li><label>Show Thumbnails <input type="checkbox" checked="checked" /></label></li>
                        <li><label>Blog post titles <input type="checkbox" checked="checked" /></label></li>
                        <li><label>Compact <input type="checkbox" /></label></li>
                    </ul>
                </li>
                <li>
                    Comments
                    <ul>
                        <li><label>Show Voting Arrows <input type="checkbox" /></label></li>
                        <li><label>Show Thumbnails <input type="checkbox" checked="checked" /></label></li>
                        <li><label>Blog post titles <input type="checkbox" checked="checked" /></label></li>
                        <li><label>Compact <input type="checkbox" /></label></li>
                        <li><label>Auto load image for image links <input type="checkbox" /></label></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div data-role="view" id="about" class="splash" data-transition="fadeIn" data-stretch="true">
            <div data-role="touch" data-tap="goBack" class="touchTarget">
                <p> Cuteness is a proof of concept mobile web app.</p>
            </div>
        </div>

        <div data-role="view" id="detail" data-transition="slide" data-after-show="renderDetail" data-title="" data-hide="resetDetail" data-stretch="true">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-role="backbutton" data-align="left" href="#list">Back</a>
                    <span data-role="view-title">&nbsp;</span>
                </div>
            </header>

            <div class="detail-image" data-role="scroller" data-zoom="true"><img /></div>
            <div class="detail-text"></div>
        </div>

        <div data-role="view" id="canvas" data-stretch="true" data-title="Canvas View" data-init="canvasInit" data-show="canvasShow">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-role="backbutton" href="#list" data-transition="slide:left reverse" data-icon="list-icon" data-align="left"></a>
                    <span data-role="view-title">&nbsp;</span>
                </div>
            </header>
            <div id="canvas-scrollview"></div>
        </div>

        <div id="canvas-detail" data-role="view" data-transition="overlay:up" data-stretch="true" data-init="canvasDetailInit" data-show="canvasDetailShow">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-role="button" data-click="goToCanvas" data-align="left">Canvas</a>
                    <span data-role="view-title">&nbsp;</span>
                </div>
            </header>
            <div id="detail-scrollview"></div>
            <div class="title-bar">
                <p><span></span></p>
            </div>
        </div>


        <script type="text/x-kendo-template" id="item-template">
            <div class="item">
                <div class="item-thumb">
                    <img class='loading-thumb' src='#: createThumbnail(data.url) #' />
                </div>
                <div class="item-summary">
                   <h3>#: data.title #</h3>
                   <p> #: data.subreddit # | #: data.ups - data.downs # | #: kendo.toString(new Date(data.created_utc * 1000), 'HH:mm') # | <a data-rel="external" href="http://reddit.com/#: data.permalink #" target="_blank">#= data.num_comments # comments on Reddit</a></p>
                </div>
            </div>
        </script>

        <script type="text/x-kendo-template" id="canvas-template">
            <div data-uid="#: data[0].uid #" data-offset="#: calculateOffset(data[0]) #" class="tile">
                #= createImage(data[0].data) #
            </div>
            <div data-uid="#: data[1].uid #" data-offset="#: calculateOffset(data[1]) #" class="tile">
                #= createImage(data[1].data) #
            </div>
            <div data-uid="#: data[2].uid #" data-offset="#: calculateOffset(data[2]) #" class="tile">
                #= createImage(data[2].data) #
            </div>
            <div data-uid="#: data[3].uid #" data-offset="#: calculateOffset(data[3]) #" class="tile">
                #= createImage(data[3].data) #
            </div>
            <div data-uid="#: data[4].uid #" data-offset="#: calculateOffset(data[4]) #" class="tile">
                #= createImage(data[4].data) #
            </div>
            <div data-uid="#: data[5].uid #" data-offset="#: calculateOffset(data[5]) #" class="tile">
                #= createImage(data[5].data) #
            </div>
        </script>

        <script type="text/x-kendo-template" id="empty-template">
            <div style="background-color: \\#FF0000;">empty</div>
        </script>

        <script id="canvas-detail-tmp" type="text/x-kendo-template">
            <div data-uid='#:uid#' class='detailed-img'>
                #= createTile(data) #
            </div>
        </script>

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>