pwa
/
Lungo2.0.js
mirror de https://github.com/xabstract/Lungo2.0.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
							<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lungo Flexbox - SDK</title>
    <meta name="description" content="">
    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <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">
    <meta http-equiv="cleartype" content="on">

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
    <link rel="stylesheet" href="components/lungo.brownie/lungo.icon.css">
    <link rel="stylesheet" href="components/lungo.brownie/lungo.icon.brand.css">
    <link rel="stylesheet" href="components/lungo.brownie/lungo.css">

    <link rel="stylesheet" href="components/lungo.brownie/theme.lungo.css" id="theme-stylesheet">

    <!-- App Stylesheet -->
    <link rel="stylesheet" href="stylesheets/app.css">
</head>

<body class="app">

    <section id="main" data-transition="" data-aside="features" data-children="folk ">
        <header>
            <nav class="left">
                <a href="#" data-view-aside="features" data-icon="menu"></a>

                <a href="#" data-view-menu="options" data-icon="users"></a>

                <a href="#" data-icon="user" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
                <a href="#" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
                <a href="#" data-icon="user" class="button" data-article="products" data-view-article="folks"></a>
            </nav>

            <!-- <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered"> -->
            <div class="title centered">Folks</div>

            <nav class="right">
                <button data-icon="user" class="button" data-article="folks" data-label="Products" data-view-article="products" data-async="app/articles/products.html"></button>
            </nav>
        </header>

        <nav id="options" data-control="menu" class="icons">
            <a href="#" data-view-article="folks" data-icon="users" data-title="Folks">Folks</a>
            <a href="#" data-view-article="products" data-icon="eye" data-title="Explore">Explore</a>
            <a href="#" data-view-article="article" data-icon="chat">Activity</a>
            <a href="#" data-view-article="article" data-icon="user">Profile</a>
            <a href="#" data-view-section="folk" data-icon="user">Folk</a>
        </nav>

        <nav data-control="groupbar" data-article="folks">
            <a href="#" data-view-article="folks" data-label="Folks" data-count="11"></a>
            <a href="#" data-view-article="products" data-async="app/articles/products.html" data-label="Products" data-count="5"></a>
        </nav>

        <article id="folks" class="list scroll indente-d">
            <ul>
                <li class="thumb selectable arrow" data-view-section="folk" data-image="http://cdn.tapquo.com/photos/javi.jpg">
                    <a href="#" >
                        <strong>Javi Jiménez</strong>
                        <small>Founder & CTO</small>
                    </a>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/ina.jpg">
                    <strong>Ignacio Olalde</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/aitor.jpg">
                    <strong>Aitor Jimenez</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/manrique.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/josu.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/inigo.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/jany.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/german.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/cata.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/oihane.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
                <li class="thumb" data-image="http://cdn.tapquo.com/photos/aritz.jpg">
                    <strong>Lorem ipsum dolor sit amet</strong>
                    <small>... consectetur adipisicing elit.</small>
                </li>
            </ul>
        </article>

        <!--
        <article id="products" class="list scroll">
            <ul>
                <li class="selectable" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                    <a href="#" data-view-section="quojs">
                        <strong>QuoJS</strong>
                        <small>Micro Mobile JavaScript Library</small>
                    </a>
                </li>
                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png" data-view-section="list"  data-async="app/sections/list.html">
                    <strong>TukTuk</strong>
                    <small>Lorem ipsum dolor sit amet</small>
                </li>
                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                    <strong>Monocle</strong>
                    <small>Lorem ipsum dolor sit amet</small>
                </li>
                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
                    <strong>LungoJS</strong>
                    <small>Lorem ipsum dolor sit amet</small>
                </li>
            </ul>
        </article>
        -->

        <footer>
            <nav>
                <a href="#" data-view-article="folks" data-icon="users" data-count="11"></a>
                <a href="#" data-view-article="products" data-icon="mobile" data-count="5"></a>
            </nav>
        </footer>
    </section>


    <section id='folk' data-transition="slide" data-aside="features" data-children="x">
        <header data-title='Javi Jimenez'>
            <nav>
                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
            </nav>
        </header>

        <article id='f1' class='active list scroll'>
            <ul>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
                <li>
                    <strong>lorem</strong>
                </li>
            </ul>

        </article>
    </section>


    <section id='quojs' data-transition="slide" data-aside="features2">
        <header data-title='QuoJS'>
            <nav>
                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
            </nav>
        </header>
        <article id='q1' class='active'></article>
    </section>


    <aside id="features" >
        <header data-title="Features">
            <nav class="right">
                <a href="#" class="buttons" data-icon="settings"></a>
            </nav>
        </header>

        <article class="list scroll active">
            <ul>
                <!-- Basic Layout -->
                <li data-view-article="folks" data-title="Profile" data-icon="users">
                    <a href="#">
                        <div class="tag right">11</div>
                        <strong>Folks</strong>
                        <small>Discover our team!</small>
                    </a>
                </li>

                <li data-view-article="products" data-title="Third Parties" data-async="app/articles/products.html">
                    <div class="tag right">5</div>
                    <strong>Products</strong>
                    <small>Fueled by coffee</small>
                </li>

                <li data-view-section="folk" data-view-article="f1" data-icon="mobile">
                    <div class="tag right">5</div>
                    <strong>Folk F1</strong>
                    <small>Fueled by coffee</small>
                </li>
            </ul>
        </article>
    </aside>

    <aside id="features2" class="right">
        <header data-title="Features 2"></header>

        <article class="list scroll active">
            <ul>
                <!-- Basic Layout -->
                <li class="active">
                    <a href="#layout-art1" data-router="article" data-title="Profile" class="active">
                        <strong>Profile</strong></a>
                </li>
            </ul>
        </article>
    </aside>

    <!-- Lungo dependencies -->
    <script src="components/quojs/quo.js"></script>
    <script src="components/lungo.brownie/lungo.js"></script>

    <!-- LungoJS - Sandbox App -->
    <script>
        Lungo.init({
            name: 'Flexbox',
            version: '2.2',
            history: true
            //,
            // resources: ['app/sections/list.html']
        });

        // Lungo.Notification.show("hola", "user");

        // Lungo.Notification.show();

        // Lungo.Notification.success('Title', 'Description', 'message', 2);

        // Lungo.Notification.confirm({
        //     icon: 'user',
        //     title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
        //     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
        //     accept: {
        //         icon: 'checkmark',
        //         label: 'Accept',
        //         callback: function(){ alert("Yes!"); }
        //     },
        //     cancel: {
        //         icon: 'close',
        //         label: 'Cancel',
        //         callback: function(){ alert("No!"); }
        //     }
        // });


    </script>
</body>
</html>