WebCG/views/partials/partial-templatebrowsermodal.handlebars

<style>
  .modal{
    left: 55%;
  }

  .dialogHeaderBar {
    cursor: move;
  }
</style>

<script>
    // Make the DIV element draggable:
    document.addEventListener("DOMContentLoaded", function() {
        dragElement(document.getElementById("dialog"));
    });
</script>


<!-- This is the file browser modal overlay (used by view-showconfig) -->
<div class="overlay" id="fileoverlay" idzzz="filebrowserModal">

   <div class="modal wrapper">

    <div class="dialogHeaderBar" >
      <div>{{lang 'pagetitle.selectemplate'}} ({{showconfig.projectFormat}})</div> 
      <div class="dialogHeaderBarClose">
        <i class="fas fa-window-close dialogCloseButton" onClick="ModalOff('fileoverlay')"></i>
      </div>
    </div>

    <div class="tabButtonRow" id="AddTemplatesTabBar">
      <button onclick="AddTemplatesTab(1)" id="tabBtn1" class="tablinks tabSelected" >Installed templates</button>
      <button id="formatSPX" class="tablinks {{#ifValue showconfig.projectFormat "SPX"}}tabSelected{{/ifValue}}">SPX</button>
      <button id="formatOGRAF" class="tablinks {{#ifValue showconfig.projectFormat "OGRAF"}}tabSelected{{/ifValue}}">OGRAF</button>
      
      <div>
        <button onclick="AddTemplatesTab(2)" id="tabBtn2" class="tablinks">SPX Store</button>
        <button onclick="AddTemplatesTab(3)" id="tabBtn3" class="tablinks">Loopic</button>
        <button onclick="AddTemplatesTab(4)" id="tabBtn4" class="tablinks">Ferryman</button>
      </div>
    </div>

    <div id="tab1">
      <div class="modal_top">
        <div class="curfolder" id="curfolder"></div>
      </div>

      <div class="scroller filebrowser">
        <UL>
          <LI style="user-select: none;" id="homefolder" class="filebrowser_up" onDblClick="goHome();"><SPAN class="icon home"></i>{{lang 'general.home'}}</SPAN></LI>
          <LI style="user-select: none;" id="prefolder" class="filebrowser_up" onDblClick="goUp();"><SPAN class="icon back">{{lang 'general.up'}}</SPAN></LI>
        </UL>
        <UL id="folderList">
        </UL>
        <UL id="fileList">
        </UL>
      </div>

      <div class="modal_bottom">
        <div class="storeIcon"
          onmouseover="showMessage('Visit SPX Store for more templates')"
          onclick="window.open('https://spxgraphics.com/store', '_blank');"
          ></div>
        <div style="flex-grow: 1;" >
          <span id="browserMessage" class="browserMessage"></span>
        </div>
        <div>
          <button class="btn bg_grey15 ripple"  onClick="ModalOff('fileoverlay')">{{lang 'button.cancel'}}</button>
          <button style="opacity:0.2;" id="btnChooseTemplate" class="btn bg_blue ripple"  onClick="openSelectedFiles();">{{lang 'button.selectemplate'}}</button>
          <button class="spxformtext btn bg_blue ripple"
                  onClick="toggleAll();"
                  id="allToggle"
                  data-all-label={{lang 'general.all'}}
                  data-none-label={{lang 'general.none'}}
                  >{{lang 'general.all'}}</button>
        </div>
      </div>
    </div>


    <div style="display: none;" id="tab2">
      <div class="promoBox">
        <div class="promoBoxCols">
          <div class="promoLeft">
            <div class="promoBoxHead">More graphics and plugins</div>
            <p>
              SPX Store is SPX Graphics' official Store for free and premium SPX
              templates and application extensions.</p>
            <br>
            ▶ <a href="https://spxgraphics.com/store" target="store">spxgraphics.com/store</a>
            <br>
            <h2>Creative Services</h2>
            <p>
              SPX Graphics offers creative services for businesses.
              Our team of designers and developers
              can help you with your next project. 
            </p>
            <br>
            <ul>
              <li>Custom templates and Extensions</li>
              <li>Workflow development</li>
              <li>System integrations</li>
              <li>SLA and Support</li>
            </ul>
            <br>
            ▶ <a href="https://spxgraphics.com/contact" target="_blank">Get in touch</a>


          </div>
          <div class="promoRight">
            <img src="/img/SPXstore600_2023_240px.png" alt="SPX Store" title="SPX Store">
            <a href="/img/promo-store.png" target="_blank">
              <img src="/img/promo-store.png"
                  alt="SPX Store screenshot"
                  border=0>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div style="display: none;" id="tab3">
            <div class="promoBox">
        <div class="promoBoxCols">
          <div class="promoLeft">
            <div class="promoBoxHead">HTML animation tool</div>
            <p>
              Create SPX templates with a browser based animation tool.
            </p>
            <p>
              Loopic supports SPX template definition and generated templates
              are stored straight into SPX template folder, so you can go
              on-air instantly.
            </p>
            <br>
            ▶ <a href="https://app.loopic.io" target="loopic">Start Loopic</a>
            <br>
            <br>
            <p>
              Resources:<br>
              ▶ <a href="https://docs.loopic.io/user-guide" target="ldocs">User Guide</a><br>
              ▶ <a href="https://docs.spxgraphics.com/Guides/Tutorials/How+to+create+HTML+graphics+using+Loopic" target="ldocs">SPX templates using Loopic</a>
            </p>

          </div>
          <div class="promoRight">
            
            <img src="/img/LoopicLogov2White.svg" alt="Loopic logo">
            <br><br>
            <a href="/img/LoopicSPXScreenshot.png" target="_blank">
              <img src="/img/LoopicSPXScreenshot.png"
                  alt="Loopic screenshot"
                  border=0>
            </a>
          </div>
        </div>
      </div>
    </div>

    <div style="display: none;" id="tab4">
            <div class="promoBox">
        <div class="promoBoxCols">
          <div class="promoLeft">
            <div class="promoBoxHead">SPX templates from After Effects</div>
            <p>
            StreamShapers' Ferryman enables graphic designers to transform their creative
            ideas from animated Lottie files from Adobe After Effects into dynamic HTML templates
            without any need for HTML, CSS, or JavaScript development.
            </p>
            <p>
            Ferryman supports SPX template definition, allowing the generated templates to be
            seamlessly integrated into SPX for instant playback!</p>
            <br>
            ▶ <a href="https://www.ferryman.streamshapers.com/" target="ferryman">ferryman.streamshapers.com</a>
            <br>
            <br>
            <p>
              Resources<br>
              ▶ <a href="https://www.streamshapers.com/docs/streamshapers-converter/tutorial" target="fdocs">Ferryman tutorial</a><br>
              ▶ <a href="https://docs.spxgraphics.com/Guides/Tutorials/How+to+create+HTML+graphics+in+After+Effects" target="fdocs">SPX templates using Ferryman</a>
            </p>
            <br>

          </div>
          <div class="promoRight">
            <img src="/img/promo-converter-logo.png" alt="StreamShapers logo">
            <br><br>
            <a href="/img/snap-ferryman.png" target="_blank">
              <img src="/img/snap-ferryman.png"
                  alt="Ferryman screenshot"
                  border=0
              >
            </a>
          </div>
        </div>
      </div>
    </div>

   </div>
  
</div><!-- overlay ended-->