pwa
/
Lungo.js
зеркало из https://github.com/tapquo/Lungo.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>LungoJS - Kitchen Sink</title>
    <meta name="description" content="">
    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta http-equiv="cleartype" content="on">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <!-- For iPhone 4 with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
    <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
    <link rel="apple-touch-startup-image" href="assets/images/default.png">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="../../release/lungo-1.2.min.css">
    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
    <!-- App Stylesheet -->
    <link rel="stylesheet" href="assets/stylesheets/app.css">

    <style>
        @-webkit-keyframes flow-show {
            0% { -webkit-transform: translateX(100%) scale(.7); }
            50% { -webkit-transform: translateX(0%) scale(.7);}
            100% { -webkit-transform: translateX(0%) scale(1);}
        }

        @-webkit-keyframes flow-show-revoke {
            0% { -webkit-transform: translateX(0%) scale(1); }
            50% { -webkit-transform: translateX(0%) scale(.7);}
            100% { -webkit-transform: translateX(100%) scale(.7);}
        }

        @-webkit-keyframes flow-hide {
            0% { -webkit-transform: translateX(0%) scale(1); }
            50% { -webkit-transform: translateX(0%) scale(.7); }
            100% { -webkit-transform: translateX(-100%) scale(.7); }
        }

        @-webkit-keyframes flow-hide-revoke {
            0% { -webkit-transform: translateX(-100%) scale(.7); }
            50% { -webkit-transform: translateX(0%) scale(.7);}
            100% { -webkit-transform: translateX(0%) scale(1);}
        }
    </style>
</head>

<body class="app">
    <!--
    <section id="login">
        <article class="splash">
            <div class="indented">
                <h1>Kitchen<span class="semi-opacity">Sink<span></h1>

                <input type="text" placeholder="Type your user" />
                <input type="password" placeholder="Type your password" />

                <a href="#kitchen-sink" data-target="section" class="button big" data-icon="check">Go to Kitchen Sink!</a>
                <div class="copyright">Copyright TapQuo Inc, 2011</div>

                <div class="switch">
                    <span class="thumb"></span>
                    <input type="checkbox" checked="off" />
                </div>

            </div>
        </article>
    </section>
    -->

    <!-- ============================= kitchen-sink ============================= -->

    <section id="kitchen-sink">
        <header data-title="LungoJS Kitchen Sink">
            <a href="#kitchen-sink-scroll" class="button onleft" data-target="aside" data-icon="items"></a>
            <a href="#profiles" data-target="aside" data-article="welcome" class="button onright">Profiles</a>
        </header>

        <!-- ============================= welcome ============================= -->
        <article id="welcome" class="list scrollable indented">
            <div>
                <h1 class="title" data-icon="home">Welcome to LungoJS KitchenSink</h1>
                <p class="text">
                    The first <strong>Mobile Framework</strong> that uses the actual features of #HTML5, #CSS3 and #JavaScript.</p>
                <p class="text">
                    The main premise in Lungo is to create a semantic structure in the whole project, starting from the markup language HTML, through a well organized CSS< and ending with the JavaScript API</p>
            </div>
        </article>

        <!-- ============================= buttons ============================= -->
        <article id="buttons" class="scrollable indented">
            <div>
                <a href="#" class="button big">default</a>
                <a href="#" class="button big disabled">disabled</a>
                <a href="#" class="button big red">red</a>
                <a href="#" class="button big lightgreen">lightgreen</a>
                <a href="#" class="button big green">green</a>
                <a href="#" class="button big blue">blue</a>
                <a href="#" class="button big arcticblue">articblue</a>
                <a href="#" class="button big orange">orange</a>
                <a href="#" class="button big magenta">magenta</a>
                <a href="#" class="button big pink">pink</a>
                <a href="#" class="button big yellow">yellow</a>
                <a href="#" class="button big twitter">twitter</a>
                <a href="#" class="button big facebook">facebook</a>

                <div class="text">You can view other examples push in the next button</div>

                <a href="#buttons-extra" data-target="section" class="button black big" data-icon="add">View other Examples</a>
            </div>
        </article>

        <!-- ============================= icons ============================= -->
        <article id="icons" class="list scrollable">
            <div class="indented">
                <h1 class="title">&lt;class&gt; icon: everything is a vector!</h1>
                <p class="text">In the listed examples you are seeing a attribute "data-icon", this attribute only need the semantic name of the icon you want to show and LungoJS will do the rest of the work.</p>

                <ul>
                    <li data-icon="map mini">map</li>
                    <li data-icon="clock mini">clock</li>
                    <li data-icon="calendar mini">calendar</li>
                    <li data-icon="message mini">message</li>
                    <li data-icon="chat mini">chat</li>
                    <li data-icon="user mini">user</li>
                    <li data-icon="group mini">group</li>
                    <li data-icon="loading mini">loading</li>
                    <li data-icon="refresh mini">refresh</li>
                    <li data-icon="search mini">search</li>
                    <li data-icon="pushpin mini">pushpin</li>
                    <li data-icon="star mini">star</li>
                    <li data-icon="heart mini">heart</li>
                    <li data-icon="warning mini">warning</li>
                    <li data-icon="add mini">add</li>
                    <li data-icon="remove mini">remove</li>
                    <li data-icon="question mini">question</li>
                    <li data-icon="info mini">info</li>
                    <li data-icon="check mini">check</li>
                    <li data-icon="substract mini">substract</li>
                    <li data-icon="close mini">close</li>
                    <li data-icon="plus mini">plus</li>
                    <li data-icon="up mini">up</li>
                    <li data-icon="down mini">down</li>
                    <li data-icon="left mini">left</li>
                    <li data-icon="right mini">right</li>
                    <li data-icon="home mini">home</li>
                    <li data-icon="pencil mini">pencil</li>
                    <li data-icon="edit mini">edit</li>
                    <li data-icon="picture mini">picture</li>
                    <li data-icon="camera mini">camera</li>
                    <li data-icon="music mini">music</li>
                    <li data-icon="wifi mini">wifi</li>
                    <li data-icon="file mini">file</li>
                    <li data-icon="files mini">files</li>
                    <li data-icon="folder mini">folder</li>
                    <li data-icon="key mini">key</li>
                    <li data-icon="settings mini">settings</li>
                    <li data-icon="chart mini">chart</li>
                    <li data-icon="trash mini">trash</li>
                    <li data-icon="target mini">target</li>
                    <li data-icon="items mini">items</li>
                    <li data-icon="download mini">download</li>
                    <li data-icon="upload mini">upload</li>
                    <li data-icon="basket mini">basket</li>
                    <li data-icon="phone mini">phone</li>
                    <li data-icon="mail mini">mail</li>
                    <li data-icon="tag mini">tag</li>
                </ul>
            </div>
        </article>

        <!-- ============================= data - attributes ============================= -->
        <article id="data-attributes" class="list scrollable">
            <div class="indented">
                <h1 class="title">The data-attributes</h1>
                <ul>
                    <li data-icon="user">
                        data-icon
                        <small>Creates an icon LungoJS vectorized</small>
                    </li>
                    <li data-image="assets/images/avatars/1.jpg">
                        data-image
                        <small>Instance a &lt;img&gt; automatically</small>
                    </li>
                    <li>
                        data-search
                        <small>Creates a search input form</small>
                    </li>
                    <li data-search="Type your search..."></li>
                </ul>

                <h1 class="title">Others</h1>
                <ul>
                    <li>
                        data-title
                        <small>Relationship field between &lt;header&gt; and &lt;a&gt;</small>
                    </li>
                    <li>
                        <div class="onright" data-count="23 units"></div>
                        data-count
                        <small>Creates counters of different &lt;elements&gt;</small>
                    </li>
                    <li>
                        data-back
                        <small>Creates a button that goes to the previous section.</small>
                    </li>
                </ul>
            </div>
        </article>

        <!-- ============================= events ============================= -->
        <article id="events" class="list scrollable">
            <div class="indented">
                <ul>
                    <li class="tip darker" data-icon="user">
                        Test events
                        <small>... in each row.</small>
                    </li>
                    <li class="anchor">Common Events</li>
                    <li id="event_touchstart">Touchstart me!</li>
                    <li id="event_touchend">Touchend me!</li>
                    <li id="event_touchmove">Touchmove me!</li>
                    <li class="anchor">Tap Events</li>
                    <li id="event_tap">Tap me!</li>
                    <li id="event_doubletap">Double-Tap me!</li>
                    <li id="event_longtap">Long-Tap me!</li>
                    <li class="anchor">Special Events</li>
                    <li id="swipe" data-icon="user">
                        Swipe me!
                        <small>Drag in any direction</small></li>
                    <li id="swipe_left" data-icon="left">Swipe-Left me!
                        <small>Drag in any direction</small></li>
                    <li id="swipe_right" data-icon="right">Swipe-Right me!
                        <small>Drag in any direction</small></li>
                    <li id="swipe_up" data-icon="up">Swipe-Up me!
                        <small>Drag in any direction</small></li>
                    <li id="swipe_down" data-icon="down">Swipe-Down me!
                        <small>Drag in any direction</small></li>
                </ul>
            </div>
        </article>

        <!-- ============================= scrolls ============================= -->
        <article id="scrolls">
            <div id="scroll-horizontal" class="scroll-demo scrollable horizontal">
                <div style="width: 1036px;">
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                    <span>11</span>
                    <span>12</span>
                    <span>13</span>
                    <span>14</span>
                    <span>15</span>
                </div>
            </div>

            <div id="scroll-vertical" class="scroll-demo scrollable vertical">
                <div>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                    <span>10</span>
                    <span>11</span>
                    <span>12</span>
                </div>
            </div>
        </article>

        <!-- ============================= authors ============================= -->
        <article id="urls" class="list scrollable">
            <div class="indented">
                <ul>
                    <li class="anchor" data-icon="pencil">Send a mail</li>
                    <li data-icon="mail">
                        <a href="mailto:javi@tapquo.com">
                        Send a email
                        <small>href="mailto:"</small></a></li>
                    <li data-icon="phone">
                        <a href="tel:+34123">
                        Phone call
                        <small>href="tel:"</small></a></li>
                    <li data-icon="chat">
                        <a href="sms:+34123">
                        Text a message
                        <small>href="sms:"</small></a></li>
                </ul>

                <ul>
                    <li class="anchor" data-icon="star">Specials for iOS</li>
                    <li data-icon="pushpin">
                        <a href="maps:ll=38.870454,-77.055702">
                        View a point in a map
                        <small>href="maps:"</small></a></li>
                    <li data-icon="target">
                        <a href="maps:ll=38.870454,-77.055702&z=10">
                        View a point in a map (zoom)
                        <small>href="maps: &z=10"</small></a></li>
                </ul>
            </div>
        </article>

    </section>

     <!-- LungoJS (Production mode) -->
    <script src="../../release/lungo-1.2.packed.js"></script>
    <!-- LungoJS - Sandbox App -->
    <script src="app/app.js"></script>
    <script src="app/events.js"></script>
    <script src="app/view.js"></script>
    <script src="app/data.js"></script>
    <script src="app/services.js"></script>
</body>
</html>