marketplace.html 2.62 KB
Newer Older
1 2 3 4
---
layout: landing
class: landing
theme: light
5 6 7 8
permalink: /marketplace
redirect_from:
  - /apps/
  - /apps
Martin Schoeler's avatar
Martin Schoeler committed
9
  - /marketplace/
10 11 12 13 14 15 16 17 18 19
---

<section class="hero">
  <h1>Connect your favorite Apps</h1>
  <div class="">
    <input class="search input input--icon-search" type="text" name="" placeholder="Search apps" />
    <ul class="search-results-list"></ul>
  </div>
</section>

Martin Schoeler's avatar
Martin Schoeler committed
20 21 22 23 24
<div class="apps-loading">
  <img class="loading-spinner" src="/images/spinner.svg" alt="">
  <p>Loading available Apps, please wait...</p>
</div>

25
<div class="container apps-list-container">
Martin Schoeler's avatar
Martin Schoeler committed
26 27 28 29 30 31
  <div class="select select--theme-light categories-select">
    <select>
      <option value="All Apps">All Apps</option>
    </select>
  </div>
  <div class="flex-container">
32 33
    <ul class="links-list col col--fourth">
      <li class="links-list-item">
34
        <button data-category="" class="app-category-button">All Apps</button>
35 36
      </li>
    </ul>
37 38 39 40 41 42 43 44 45 46 47 48
    <section class="col apps-list-wrapper">
      <div class="apps-message-container display-none">
        <div class="message">No results found</div>
        <span class="icon"></span>
        <div class="suggest">
          <p>Don't see an app you use? Let us know!</p>
          <a href="https://forums.rocket.chat/c/rocket-chat-apps" class="button" target="_blank">Request an app</a>
        </div>
        <div class="suggest">
          <p>Developer? Click <a href="https://rocket.chat/docs/developer-guides/" class="button--link" target="_blank">here</a> get started creating an app</p>
        </div>
      </div>
Martin Schoeler's avatar
Martin Schoeler committed
49
      <ul class="apps-list grid two-rows"></ul>
50 51 52 53 54 55 56 57 58 59 60 61
    </section>
  </div>
</div>

<div class="add-app-modal-wrapper display-none"></div>

<script id="app-card-template" type="html/template">
  <div class="app-card col--haft">
    <div class="icon-wrapper">
      <div class="icon"></div>
    </div>
    <div class="content-wrapper">
Martin Schoeler's avatar
Martin Schoeler committed
62 63 64 65
      <div class="content">
        <span class="name"></span>
        <span class="description"></span>
      </div>
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
      <ul class="categories-list"></ul>
    </div>
  </div>
</script>

<script id="search-result-template" type="html/template">
  <div class="search-result">
    <div class="icon-wrapper">
      <div class="icon"></div>
    </div>
    <div class="content-wrapper">
      <span class="name"></span>
      <span class="description"></span>
    </div>
  </div>
</script>

<script id="add-app-modal-template" type="html/template">
  <div class="modal-wrapper-background"></div>
  <div class="modal-content">
    <div class="app-card-wrapper"></div>
    <div class="close-button"></div>
  </div>
</script>

<script src="/polyfill/clipboard.min.js"></script>
<script src="/marketplace.js"></script>