<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0,viewport-fit=cover">
  
  <style>
    html {
        box-sizing: border-box;
        overflow-x: hidden;
    }
    body {
        box-sizing: border-box;
        background-color:rgb(40,40,40);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        -webkit-user-select: none; /* Safari */
        user-select: none; /* Standard syntax */
        padding-bottom: 44px;
        overflow-x: hidden;
        margin: 0;
    }
    .desc-panel {
        box-sizing: border-box;
        width:100%;
        position: fixed;
        left: 0;
        right:0;
        bottom:0;
        height: 44px;
        background-color:rgb(33, 33, 33);
        border-top: 1px solid rgba(50,50,50,1);
        padding: 14px;
        color: rgb(205, 205, 205);
        font-size: 11px;
    }

    .grid-container {
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 190px 190px 190px 190px;
      padding: 10px;
    }
    .grid-item {
        position: relative;
      box-sizing: border-box;
      padding: 10px;
      text-align: center;
    }
    .grid-item .title {
        display: block;
        box-sizing: border-box;
        color: rgb(228, 228, 228);
        font-size: 14px;
        margin-top:8px;
        width: auto;
        border-radius: 4px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 2px;
        padding-bottom: 2px;
        vertical-align: middle;
    }
    .grid-item img {
        box-sizing: border-box;
        width: 100px;
        border-radius: 4px;
        border: 3px solid transparent;
    }
    .grid-item img:hover {
        opacity: 0.9;
        cursor: pointer;
    }
    .grid-item.selected img {
        border: 3px solid cornflowerblue;
    }
    .grid-item.selected .title {
        background-color:cornflowerblue;
    }

    .section-title {
        box-sizing: border-box;
        width:100%;
    }
    .section-title .title {
        box-sizing: border-box;
        color: rgb(190, 190, 190);
        font-size: 11px;
        text-transform: uppercase;
        padding-left: 16px;
        margin: 0px;
        margin-top: 48px;
    }
    .section-title .subtitle {
        box-sizing: border-box;
        color: rgba(190, 190, 190,0.5);
        font-size: 10px;
        padding-left: 16px;
        margin: 0px;
        margin-top: 4px;
    }

    </style>

</head>

<body>
    <div class="section-title">
        <div class="title">BLANK TEMPLATES</div>
        <div class="subtitle">Create a new Blank Project</div>
    </div>
    <div class="grid-container">
        <div class="grid-item selected">
            <img src="pwa/blank_navbar.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Blank Page with Navbar">
            <div class="title">Blank With Navbar</div>
        </div>
        <div class="grid-item">
            <img src="pwa/blank_navbartoolbar.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Blank Page with Navbar & Toolbar">
            <div class="title">Blank with Navbar & Toolbar</div>
        </div>
        <div class="grid-item">
            <img src="pwa/blank_tabbar.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Blank Page with Tabbar">
            <div class="title">Blank with Tabbar</div>
        </div>
        <div class="grid-item">
            <img src="pwa/blank_empty.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Empty Page">
            <div class="title">Blank Page</div>
        </div>
    </div>

    <!-- BASIC -->
    <div class="section-title">
        <div class="title">BASIC APP TEMPLATES</div>
        <div class="subtitle">Basic Design templates</div>
    </div>
    <div class="grid-container">
        <div class="grid-item">
            <img src="pwa/thorium_components.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Overview of Thorium Widgets">
            <div class="title">Widgets Presentation</div>
        </div>
        <div class="grid-item">
            <img src="pwa/settings_clone.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Design Example - iOS Settings Clone">
            <div class="title">iOS Settings Clone</div>
        </div>
        <div class="grid-item">
            <img src="pwa/photographer_portfolio.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Photographer Portfolio Example">
            <div class="title">Photographer Portfolio</div>
        </div>
        <div class="grid-item">
            <img src="pwa/actions.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to use Actions">
            <div class="title">Actions Example</div>
        </div>

    </div>

    <!-- DB EXPRESS -->
    <div class="section-title">
        <div class="title">DBEXPRESS TEMPLATES</div>
        <div class="subtitle">Create Database Apps with SQLite or MySQL</div>
    </div>
    <div class="grid-container">
        <div class="grid-item">
            <img src="pwa/poc_dbexpress.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Overview of dbExpress functionnalities">
            <div class="title">DBExpress Generic Demo</div>
        </div>
        <div class="grid-item">
            <img src="pwa/places_of_interest_osm.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Places of Interest example (Open Street Map)">
            <div class="title">Places of Interest OSM</div>
        </div>
        <div class="grid-item">
            <img src="pwa/places_of_interest_googlemap.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Places of Interest example (Google Map)">
            <div class="title">Places of Interest (Google Map)</div>
        </div>
        <div class="grid-item">
            <img src="pwa/dbexpress_booking.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Villa Booking example">
            <div class="title">Villa Booking Example</div>
        </div>
        <div class="grid-item">
            <img src="pwa/solar_system.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Solar System DB example">
            <div class="title">The Solar System</div>
        </div>
        <div class="grid-item">
            <img src="pwa/spatial_filters.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Open Street Map Spatial Filters">
            <div class="title">Spatial Filters Example</div>
        </div>
        

        <div class="grid-item">
            <img src="pwa/dbexpress_blog.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="dbExpress Blog App">
            <div class="title">Blog Example</div>
        </div>
    </div>


    <!-- CUSTOM CODE -->
    <div class="section-title">
        <div class="title">CODING TEMPLATES</div>
        <div class="subtitle">Learn How to add Custom Code to your Apps</div>
    </div>
    <div class="grid-container">
        <div class="grid-item">
            <img src="pwa/thorium_api.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to use Thorium API functions">
            <div class="title">Thorium API</div>
        </div>
        <div class="grid-item">
            <img src="pwa/action_sheet.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to add Action Sheet with custom code">
            <div class="title">Action Sheet</div>
        </div>
        <div class="grid-item">
            <img src="pwa/formstorage.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to store data locally">
            <div class="title">Form Local Storage</div>
        </div>
        <div class="grid-item">
            <img src="pwa/osm_api.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Open Street Map / Leaflet.js API - API and Event Handler example">
            <div class="title">Open Street Map API</div>
        </div>
        <div class="grid-item">
            <img src="pwa/googlemap_api.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Google Map API - API and Event Handler example">
            <div class="title">Google Map API</div>
        </div>
    </div>

    <!-- JSON API -->
    <div class="section-title">
        <div class="title">JSON API</div>
        <div class="subtitle">Learn How to Implement Web Services / API REST in your Apps</div>
    </div>

    <div class="grid-container">
        <div class="grid-item">
            <img src="pwa/jsonapiexample.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Basic JSON API example">
            <div class="title">Simple Example</div>
        </div>
        <div class="grid-item">
            <img src="pwa/json_typecode.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="JSON API example with Master-detail data">
            <div class="title">TypeCode Example</div>
        </div>
        <div class="grid-item">
            <img src="pwa/local_json.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Use Local JSON file with JSON API">
            <div class="title">Local JSON File</div>
        </div>
        <div class="grid-item">
            <img src="pwa/jsonapi_repeaterparams.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to modify Form Headers & Options with a Repeater">
            <div class="title">JSON API Repeater Fetch Parameters </div>
        </div>
        <div class="grid-item">
            <img src="pwa/jsonapi_forms.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to modify Form Headers & Options with a Form">
            <div class="title">JSON API Form Fetch Parameters </div>
        </div>
    </div>



    <!-- FIREBASE -->
    <div class="section-title">
        <div class="title">GOOGLE FIREBASE TEMPLATES</div>
        <div class="subtitle">Learn How to Implement Google Firebase/Firestore in your Apps</div>
    </div>

    <div class="grid-container">
        <div class="grid-item">
            <img src="pwa/firebase_masterdetail.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to use Master-detail with Firebase/Firestore">
            <div class="title">Firebase Master-Detail Example</div>
        </div>
        <div class="grid-item">
            <img src="pwa/instaclone.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Instagram Clone Example built with Firebase/Firestore">
            <div class="title">Firebase Instagram Clone</div>
        </div>
        <div class="grid-item">
            <img src="pwa/musicapp.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Music App Example built with Firebase/Firestore (includes User App and BackOffice App)">
            <div class="title">Music App Example (User App)</div>
        </div>
        <div class="grid-item">
            <img src="pwa/music_backoffice.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Music App Example built with Firebase/Firestore (includes User App and BackOffice App)">
            <div class="title">Music App Example (Admin BackOffice)</div>
        </div>
    </div>



    <!-- MISCELLANEOUS -->
    <div class="section-title">
        <div class="title">MISCELLANEOUS</div>
        <div class="subtitle">Others Apps examples</div>
    </div>

    <div class="grid-container">
        <div class="grid-item">
            <img src="pwa/chartjsplugindemo.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Chart JS Implementation Example">
            <div class="title">Chart JS</div>
        </div>
        <div class="grid-item">
            <img src="pwa/multilingual.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to create multilingual Apps">
            <div class="title">Multilingual example</div>
        </div>
        <div class="grid-item">
            <img src="pwa/qrcodegenerator.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="QRCode Generator Example">
            <div class="title">QRCode Generator</div>
        </div>
        <div class="grid-item">
            <img src="pwa/camera_capture.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="Learn how to use the Capture functions">
            <div class="title">Camera Capture</div>
        </div>
        <div class="grid-item">
            <img src="pwa/qrcodereader.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="QRCode Reader Example">
            <div class="title">QRCode Reader</div>
        </div>
        <div class="grid-item">
            <img src="pwa/googlemap_searchplace.png" onclick="select(this);" onmouseover="showdesc(this)" data-desc="GoogleMaps Search Place example">
            <div class="title">GoogleMaps Search Place</div>
        </div>

       

    </div>



    <div id="eltdesc" class="desc-panel">
        
    </div>

  <script>
    function showdesc(sender) {
    //    document.getElementById("eltdesc").innerText=sender.getAttribute("data-desc")||"";
    }
    function select(sender) {
        var x = document.querySelectorAll(".grid-item");
        for (var i = 0; i < x.length; i++) {
            x[i].classList.remove("selected");
        }
        sender.closest(".grid-item").classList.add("selected");
        document.getElementById("eltdesc").innerText=sender.getAttribute("data-desc")||"";
    }
    function getSelected() {
        var x = document.querySelector(".grid-item.selected img");
        if (x) {
            return x.getAttribute("src");
        }
    }
    document.addEventListener('contextmenu', event => event.preventDefault());
  </script>

</body>
</html>