zulip/templates/zerver/integrations/index.html

{% extends "zerver/portico.html" %}

{% block customhead %}
{{ super() }}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% stylesheet 'portico' %}
{% stylesheet 'landing-page' %}
{{ render_bundle('landing-page') }}

{% endblock %}

{% block hello_page_container %} hello-main{% endblock %}

{% block portico_content %}

{% include 'zerver/landing_nav.html' %}

<div class="portico-landing integrations">
    <div class="main">
        <div class="padded-content">
            <div class="inner-content">

        <div id="integration-main-text">
            <header>
                <h1 class="portico-page-heading">
                    {% trans %}Over 60 native integrations.{% endtrans %}
                </h1>
            </header>
            <h2 class="portico-page-subheading">
                {% trans %}
                    And hundreds more through
                    <a href="#hubot">Hubot</a>,
                    <a href="#zapier">Zapier</a>,
                    and
                    <a href="#ifttt">IFTTT</a>.
                {% endtrans %}
            </h2>
        </div>

    <div id="integration-instruction-block" class="integration-instruction-block">
       <a href="#!" id="integration-list-link"><i class="icon-vector-circle-arrow-left"></i><span>Back to list</span></a>
    </div>
    <div class="clear-float"></div>

    <div class="integration-lozenges">
      {% for integration in integrations_dict.values() %}
        {% if integration.is_enabled() %}
          <div class="integration-lozenge integration-{{ integration.name }}">
             <a class="integration-link integration-{{ integration.name }}" href="#{{ integration.name }}">
                 <div class="square-wrapper">
                     <img class="integration-logo" src="/{{ integration.logo }}" alt="{{ integration.display_name }} logo" />
                 </div>
               {% if integration.secondary_line_text %}
                 <span class="integration-label" style="padding-bottom: 0px;">{{ integration.display_name }}</span>
                 <span class="integration-label-secondary">{{ integration.secondary_line_text }}</span>
               {% else %}
                 <span class="integration-label">{{ integration.display_name}}</span>
               {% endif %}
             </a>
          </div>
        {% endif %}
      {% endfor %}
    </div>

    <div class="portico-page-header extra" id="hubot-integrations"><a href="#" class="no-style"><i class="icon-vector-gears portico-page-header-icon"></i>Integrations available via Hubot</a></div>
    <p class="extra">The official <a class="integration-link integration-hubot" href="#hubot"><span class="integration-label">Hubot</span></a>
    integration provides an extension point for additional Zulip integrations. </p><p class="extra"> A non-comprehensive list of integrations available through
    <a class="integration-link integration-hubot" href="#hubot"><span class="integration-label">Hubot</span></a> follows below:</p>

    <div class="integration-lozenges">
    {% for integration in hubot_lozenges_dict.values() %}
        <div class="integration-lozenge integration-{{ integration.name }}">
           <a class="integration-link integration-{{ integration.name }}" href="{{ integration.git_url }}">
               <div class="square-wrapper">
                   <img class="integration-logo" src="/{{ integration.logo }}" alt="{{ integration.logo_alt }} logo" />
               </div>
               <span class="integration-label">{{ integration.display_name}}</span>
           </a>
        </div>
      {% endfor %}
    </div>

<div id="integration-instructions-group">
    {% for integration in integrations_dict.values() %}
        {% if integration.is_enabled() %}
            <div id={{ integration.name }} class="integration-instructions">
                {{ integration.help_content }}
                <p style="font-size:11px; font-style:italic;">
                    Logos are trademarks of their respective owners.
                    None of the integrations on this page are created by,
                    affiliated with, or supported by the companies
                    represented by the logos.
                </p>
            </div>
        {% endif %}
    {% endfor %}
</div>
        
            </div> <!-- .inner-content -->
        </div> <!-- .padded-content -->
    </div> <!-- .main -->
</div> <!-- .portico-landing -->

{% endblock %}