@webqit/webqit.dev/views/index.html

webqit.dev Site

<!-- Main Home View -->
<div class="snap-mandatory-container">

    <header class="page-section flex-y-stretch flex-wrap" style="background-color: white;">
        
        <div class="section-div-a col-4 lg--col-12 pd-0 flex-column flex-x-separate" style="border-right: 2px solid gainsboro;">
            
            <!-- ::::::::::::::::: -->

            <div class="pd-10 pd-x3 overflow-x-hidden">
                <div class="app-bar flex-x-separate">
                    <a href="/" class="brand-container flex-y-center">
                        <img alt="@web-native-js/chtml logo" scoped:id="logo" src="http://unpkg2.com:9000/@web-native-js/oohtml/docs/logo.png" style="display: block; width: 65px; color: transparent; background: none;" />
                        <div class="pd-10">
                            <div class="txt-lg b">Web-Native</div>
                            <div class="i">...tag tagline</div>
                        </div>
                    </a>
                    <div class="menu-control pos-rel wt-60 ht-60 flex-center cursor-pointer" play-icon-type="bootstrap">
                        <play-icon name="filter-right" class="pos-rel"></play-icon>
                    </div>
                </div>
            </div>

            <!-- ::::::::::::::::: -->

            <p style="font-weight: bold; color: slateblue; font-style: italic; padding-left: 20px; margin-left: 40px; border-left: 5px solid skyblue;">
            </p>

            <!-- ::::::::::::::::: -->

            <div class="pd-10 pd-x3">
                <ul is="play-seq-ul" scoped:id="outline_menu" template="layout/outline" class="outline list-style-none"></ul>
            </div>

            <div class="pd-10 pd-x3 pd-btm-x6 lg--pd-x3 lg--pd-btm-x10" style="background-image: url(/img/bg/Dots.svg);">                   
                <a href="/#" class="flex-y-center pd-10">
                    <div class="wt-60 ht-60 flex-center mg-rt-10 mg-rt-x2 radius-full jelly-peel ring-shadow">
                        <play-icon name="play-fill" size="sm"></play-icon>
                    </div>
                    <div>
                        <div class="txt-lg b">learn more</div>
                        <div class="i">web-native</div>
                    </div>
                </a>
            </div>

            <!-- ::::::::::::::::: -->
            
        </div>

        <div class="section-div-b col-grows lg--col-12 pos-rel lg--d-none flex-center pd-0" style="min-height: 100vh;">
            
            <ul class="flex-y-center flex-x-end list-style-none" style="position: absolute; top: 0px; right: 0px; padding: 25px; color: slateblue;">
                <li class="mg-rt-10 mg-rt-x2"><a href="#">
                    <play-icon name="search" size="sm"></play-icon>
                </a></li>
                <li class="mg-rt-10 mg-rt-x2"><a href="mailto://oxharris.dev@gmail.com">
                    <play-icon name="chat-left-quote" size="sm"></play-icon>
                </a></li>
                <li class="mg-rt-10 mg-rt-x2"><a href="https://github.com/web-native" target="_blank">
                    <play-icon name="github" size="sm" play-icon-type=""></play-icon>
                </a></li>
            </ul>

            <div namespace class="circus wt-100 wt-x6 ht-100 ht-x6 radius-full flex-center">
                <a scoped:id="link" class="display-link flex-y-self-end wt-60 ht-60 flex-center radius-full jelly-peel ring-shadow z-index-10" href="#">
                    <play-icon name="arrow-down" size="sm"></play-icon>
                </a>
                <script type="scoped">
                    if (app.outline.now.active) {
                        var active = app.outline.state.active.first();
                        $(this).css('background-image', 'url(' + active.graphic + ')');
                        $(this.namespace.link).attr('href', '/#' + active.title);
                        $(this.namespace.link).css(active.darkTheme);
                    }
                </script>
            </div>

        </div>

    </header>

    <div class="pos-rel ht-0 flex-y-center pointer-events-none z-index-10">
        <div class="col-4 lg--col-12 flex-x-end lg--overflow-x-hidden">
            <div class="flex-y-stretch pos-rel wt-100 wt-x3 ht-100 ht-x3 xl--wt-x2 xl--ht-x2 lg--wt-x3 lg--ht-x3 sm--wt-x2 sm--ht-x2 transition-all transition-fast">
                <div class="wt-full radius-full" style="position: relative; right: -50%; background-image: url(/img/bg/code.fw.png); background-position: left top; border: 6px solid silver; z-index: 2"></div>
            </div>
        </div>
    </div>

    <main class="pos-rel">

        <section namespace id="tooling" class="page-section flex-y-stretch flex-wrap">

            <div class="section-div-a col-4 lg--col-12 lg--pd-btm-10">

                <div class="mg-btm-10 mg-btm-x10 xl--mg-btm-x5 lg--d-none"></div>

                <div class="section-div-header lg--pos-rel flex-y-center">
                    <div class="section-icon flex-center mg-rt-10">
                        <play-icon name="puzzle"></play-icon>
                    </div>
                    <h2 class="txt-xxl">Tooling</h2>
                </div>
                <div class="section-div-content lg--flex-y-center sm--d-block">
                    <p class="txt-xxl lg--col-5">
                        <span>Leverage some magic to write less code!</span>
                        <span>...explore a growing collection of opensource work!</span>
                    </p>
                    <div class="lg--col-7 txt-align-cntr">
                        <img src="/img/bg/netlify.png" />
                    </div>
                </div>
            </div>
            <div class="section-div-b col-grows lg--col-12 d-flex flex-column lg--d-block lg--pd-top-0">

                <div class="mg-btm-10 mg-btm-x10 xl--mg-btm-x5 lg--d-none"></div>
                
                <div class="section-div-header flex-x-separate flex-y-center">
                    <partials-slot scoped:id="tabs" name="tabs" template="layout/tabbing"></partials-slot>
                    <a href="/tooling" class="section-more flex-y-center">
                        <span class="text transition-all transition-x-fast flex-x-end lg--d-none">Learn More</span> <play-icon name="arrow-right"></play-icon>
                    </a>
                </div>
                <div scoped:id="tabpanels" template="layout/tabbing/tooling" class="section-div-content col-grows lg--col-12 flex-y-stretch"></div>
            </div>
            <script type="scoped">
                if (!app || !app.tooling.items) return;
                this.namespace.tabs.bind(app.tooling);
                $(this.namespace.tabpanels).itemize(app.tooling.items, (el, e, d) => el[e](d), null, {itemPartialsName: 'panel'});
            </script>
        </section>

        <section namespace id="cloud" class="page-section flex-y-stretch flex-wrap">

            <div class="section-div-a col-4 lg--col-12 lg--pd-btm-10">
                <div class="section-div-header lg--pos-rel flex-y-center">
                    <div class="section-icon flex-center mg-rt-10">
                        <play-icon name="award"></play-icon>
                    </div>
                    <h2 class="txt-xxl">Cloud</h2>
                </div>
                <div class="section-div-content lg--flex-y-center sm--d-block">
                    <p class="txt-xxl lg--col-5">
                        <span>Fasttrack how you build, ship, and scale!</span>
                        <span>...enjoy the WebQit advantage in the cloud!</span>
                    </p>
                    <div class="lg--col-7 txt-align-cntr">
                        <img src="/img/new/rock.fw.png" style="min-width: 80%;" />
                    </div>
                </div>
            </div>
            <div class="section-div-b col-grows lg--col-12 d-flex flex-column lg--d-block lg--pd-top-0">
                <div class="section-div-header flex-x-separate flex-y-center">
                    <partials-slot scoped:id="tabs" name="tabs" template="layout/tabbing"></partials-slot>
                    <a href="/cloud" class="section-more flex-y-center">
                        <span class="text transition-all transition-x-fast flex-x-end lg--d-none">Learn More</span> <play-icon name="arrow-right"></play-icon>
                    </a>
                </div>
                <div scoped:id="tabpanels" template="layout/tabbing/cloud" class="section-div-content col-grows lg--col-12 flex-y-stretch"></div>
            </div>
            <script type="scoped">
                if (!app || !app.cloud.items) return;
                this.namespace.tabs.bind(app.cloud);
                $(this.namespace.tabpanels).itemize(app.cloud.items, (el, e, d) => el[e](d), null, {itemPartialsName: 'panel'});
            </script>
        </section>

        <section namespace id="community" class="page-section flex-y-stretch flex-wrap">
            <div class="section-div-a col-4 lg--col-12 lg--pd-btm-10">
                <div class="section-div-header lg--pos-rel flex-y-center">
                    <div class="section-icon flex-center mg-rt-10">
                        <play-icon name="arrows-move"></play-icon>
                    </div>
                    <h2 class="txt-xxl">Community</h2>
                </div>
                <div class="section-div-content lg--flex-y-center sm--d-block">
                    <p class="txt-xxl lg--col-5">
                        <span>The web is all of us - join in shaping it!</span>
                        <span>...or discover new heights for your career!</span>
                    </p>
                    <div class="lg--col-7 txt-align-cntr">
                        <img src="/img/globe@2x-kgv9ll4o7r-havl08h54l.png" style="min-width: 90%;" />
                    </div>
                </div>
            </div>
            <div class="section-div-b col-grows lg--col-12 d-flex flex-column lg--d-block lg--pd-top-0">
                <div class="section-div-header flex-x-separate flex-y-center">
                    <partials-slot scoped:id="tabs" name="tabs" template="layout/tabbing"></partials-slot>
                    <a href="/community" class="section-more flex-y-center">
                        <span class="text transition-all transition-x-fast flex-x-end lg--d-none">Learn More</span> <play-icon name="arrow-right"></play-icon>
                    </a>
                </div>
                <div scoped:id="tabpanels" template="layout/tabbing/community" class="section-div-content col-grows lg--col-12 flex-y-stretch"></div>
            </div>
            <script type="scoped">
                if (!app || !app.community.items) return;
                this.namespace.tabs.bind(app.community);
                $(this.namespace.tabpanels).itemize(app.community.items, (el, e, d) => el[e](d), null, {itemPartialsName: 'panel'});
            </script>
        </section>

    </main>

    <footer class="flex-y-stretch flex-wrap" style="min-height: 300px; background-color: white;">
    </footer>

    
     <!-- TEMPLATES -->

    <template name="layout">

        <template name="outline">
            <li is="play-seq-li" namespace class="flex-y-start pd-10 mg-btm-10 mg-btm-x2 radius-4 cursor-pointer" style="opacity: 0;">
                <div class="icon pd-6 pd-x2 mg-rt-10 mg-rt-x2">
                    <play-icon scoped:id="icon" name="code-slash"></play-icon>
                </div>
                <div class="col-grows flex-y-center">
                    <div class="col-grows">
                        <div class="txt-xxl" scoped:id="title"></div>
                        <div class="txt-lg mg-top-4" scoped:id="desc"></div>
                    </div>
                    <span class="pointer transition-all transition-fast">
                        <play-icon name="chevron-right" size="sm"></play-icon>
                    </span>
                </div>
                <script type="scoped">
                    $(this).on('click', () => {
                        active = true;
                    });
                    if (!title) return;
                    $(this.namespace.icon).attr('name', icon);
                    $(this.namespace.title).html(title);
                    $(this.namespace.desc).html(desc);
                    $(this).class('active', active);
                </script>
            </li>
        </template>

        <template name="tabbing">

            <div partials-slot="tabs" namespace class="col-grows">
                <ul scoped:id="main" template="layout/tabbing" class="section-nav flex-y-stretch list-style-none">
                    <li scoped:id="overflow" namespace class="overflow-control d-none" tabindex="0">
                        <play-icon name="three-dots" size="sm" class="ht-full flex-y-center"></play-icon>
                        <div class="overflow ht-0 flex-x-center">
                            <ul scoped:id="items" template="layout/tabbing" class="section-nav-overflow pos-abs pd-top-8 pd-btm-8 radius-8 drop-shadow animation-x-fast anim-fly-top-small list-style-none"></ul>
                        </div>
                    </li>
                </ul>
                <script type="scoped">
                    var main = this.namespace.main;
                    var overflowControl = this.namespace.overflow;
                    var overflow = overflowControl.namespace.items;
                    if (items) {
                        $(main).itemize(items, (el, e, d, k) => {
                            d.overflowCollapsed = false;
                            el[e](d);
                            if (k === parseInt((items.length - 1) / 2)) {
                                el.after(overflowControl);
                            }
                        }, (el, e, d, k, overflowCount) => {
                            d.overflowCollapsed = e === 'collapse';
                            $(overflowControl).class('d-none', overflowCount === 0);
                        }, {itemPartialsName: 'tab', collapsionPoint: 'center-end'});
                        $(overflow).itemize(items, (el, e, d) => el[e](d), null, {itemPartialsName: 'overflow-tab'});
                    }
                </script>            
            </div>

            <li partials-slot="tab" namespace>
                <script type="scoped">
                    $(this).on('click', () => {
                        active = true;
                    });
                    if (!name) return;
                    $(this).html(name);
                    $(this).class('d-none', overflowCollapsed);
                    $(this).class('active', active);
                </script>
            </li>

            <li partials-slot="overflow-tab" namespace>
                <script type="scoped">
                    $(this).on('click', () => {
                        active = true;
                    });
                    if (!name) return;
                    $(this).html(name);
                    $(this).class('d-none', !overflowCollapsed);
                    $(this).class('active', active);
                </script>
            </li>

            <template name="tooling">

                <div partials-slot="panel" namespace class="col-grows flex-y-separate">
                    <ul class="highlights grid-3 list-style-none" scoped:id="highlights" template="layout/tabbing/tooling"></ul>
                    <ul class="overflow list-style-none" scoped:id="overflow" template="layout/overflow/tooling"></ul>
                    <script type="scoped">
                        if (items) {
                            $(this).class('d-none', !active);
                            $(this.namespace.highlights).itemize(items, (el, e, d) => el[e](d), null, {itemPartialsName: 'item'});
                        }
                        if (overflow) {
                            $(this.namespace.overflow).itemize(overflow, (el, e, d) => el[e](d), null, {itemPartialsName: 'item'});
                        }
                    </script>
                </div>

                <li partials-slot="item" namespace class="item flex-y-separate flex-wrap txt-lg animation-x-fast anim-scale-in-small">
                    <div>
                        <play-icon scoped:id="icon" name="square"></play-icon>
                        <h3 scoped:id="title" style="margin-top: 15px; margin-bottom: 15px;"></h3>
                        <p scoped:id="desc"></p>
                    </div>
                    <ul class="flex-x-separate flex-y-center wt-full pd-top-10 pd-top-x2 list-style-none">
                        <li><a scoped:id="page" class="flex-y-center" href="">
                            <play-icon name="arrow-return-right" size="sm"></play-icon>
                            <span class="mg-lft-10">Learn more</span>
                        </a></li>
                        <li><a scoped:id="github" href="" target="_blank">
                            <play-icon name="github" size="sm" play-icon-type=""></play-icon>
                        </a></li>
                    </ul>
                    <script type="scoped">
                        if (!title) return;
                        $(this.namespace.icon).attr('name', icon);
                        $(this.namespace.title).html(title);
                        $(this.namespace.desc).html(desc);
                        $(this.namespace.page).attr('href', page);
                        $(this.namespace.github).attr('href', 'https:/github.com/' + github);
                    </script>
                </li>

            </template>
            
            <template name="cloud">

                <div partials-slot="panel" namespace class="col-grows flex-y-separate">
                    <div class="about col-12 pd-10 flex-y-center">
                        <div class="wt-60 wt-x2 pd-10 flex-center">
                            <play-icon scoped:id="icon" size="xl"></play-icon>
                        </div>
                        <div class="pd-10 txt-xl">
                            <h3 scoped:id="title" class="title"></h3>
                            <div class="txt-smaller">Coming Soon!</div>
                        </div>
                    </div>
                    <ul class="highlights list-style-none" scoped:id="highlights" template="layout/tabbing/cloud"></ul>
                    <script type="scoped">
                        if (items) {
                            $(this).class('d-none', !active);
                            // ----------------
                            $(this.namespace.icon).attr('name', icon);
                            $(this.namespace.title).html(title);
                            // ----------------
                            $(this.namespace.highlights).itemize(items, (el, e, d) => el[e](d), null, {itemPartialsName: 'item'});
                        }
                    </script>
                </div>

                <li partials-slot="item" namespace class="item fl-ex-y-start animation-x-fast anim-scale-in-small">
                    <img scoped:id="icon" style="max-width: 50px; margin-bottom: 25px;" />
                    <div class="co-l-6" style="border-top: 3px whitesmoke;">
                        <h3 scoped:id="title" class="txt-xl mg-btm-4"></h3>
                        <div scoped:id="desc" class="txt-lg"></div>
                    </div>
                    <div class="col-grows">
                    </div>
                    <script type="scoped">
                        if (!title) return;
                        $(this.namespace.icon).attr('src', icon);
                        //$(this.namespace.title).html(title);
                        $(this.namespace.desc).html(desc);
                        $(this.namespace.page).attr('href', page);
                    </script>
                </li>

            </template>
            
            <template name="community">

                <div partials-slot="panel" namespace class="col-grows flex-y-separate">
                    <div class="about col-12 pd-10 flex-y-center">
                        <div class="wt-60 wt-x2 pd-10 flex-center">
                            <play-icon scoped:id="icon" size="xl"></play-icon>
                        </div>
                        <div class="pd-10 txt-xl">
                            <h3 scoped:id="title" class="title"></h3>
                            <div class="txt-smaller">Coming Soon!</div>
                        </div>
                    </div>
                    <ul  class="highlights grid-3 list-style-none"scoped:id="highlights" template="layout/tabbing/community"></ul>
                    <script type="scoped">
                        if (items) {
                            $(this).class('d-none', !active);
                            // ----------------
                            $(this.namespace.icon).attr('name', icon);
                            $(this.namespace.title).html(title);
                            // ----------------
                            $(this.namespace.highlights).itemize(items, (el, e, d) => el[e](d), null, {itemPartialsName: 'item'});
                        }
                    </script>
                </div>

                <li partials-slot="item" namespace class="item fl-ex-y-start animation-x-fast anim-scale-in-small">
                    <img scoped:id="icon" style="max-width: 50px; margin-bottom: 25px;" />
                    <div class="co-l-6" style="border-top: 3px whitesmoke;">
                        <h3 scoped:id="title" class="txt-xl mg-btm-4"></h3>
                        <div scoped:id="desc" class="txt-lg"></div>
                    </div>
                    <div class="col-grows">
                    </div>
                    <script type="scoped">
                        if (!title) return;
                        $(this.namespace.icon).attr('src', icon);
                        $(this.namespace.title).html(title);
                        $(this.namespace.desc).html(desc);
                        $(this.namespace.page).attr('href', page);
                    </script>
                </li>

            </template>

        </template>
    </template>

</div>