{% extends "layout/landing.html" %}

{%- block htmltitle %}
  <title>Moho</title>
{%- endblock %}

{% block body %}
<section class="moho-landing">
  <h1>Moho</h1>
  <p class="moho-landing-lead">
    Moho is an open-source Python framework for Rich Internet Applications.
    Write the UI in Python or <code>.mh</code> files — HTML and JavaScript are not
    required for typical apps. If you know <a href="https://kivy.org">Kivy</a>,
    the model is familiar: an <code>App</code>, a widget tree, and a layout language.
    The runtime is a Tornado server with Bootstrap in the browser.
  </p>
  <p class="moho-landing-lead">
    2D (SVG) and 3D (X3DOM) graphics, plus
    <a href="https://matplotlib.org/">Matplotlib</a> and Plotly, make Moho a good fit for
    <strong>scientific</strong> and <strong>instrumental</strong> applications.
  </p>
  <p class="moho-landing-actions">
    <a class="moho-btn moho-btn-primary" href="{{ pathto('gettingstarted/first_app') }}">First application &raquo;</a>
    <a class="moho-btn" href="{{ pathto('install') }}">Installation &raquo;</a>
    <a class="moho-btn" href="{{ pathto('showcase_gallery') }}">Showcase gallery &raquo;</a>
  </p>
  <p class="moho-landing-lead">
    Run the full widget tour locally with <code>moho-showcase</code>. Every screen is in the
    <a href="{{ pathto('showcase_gallery') }}">showcase gallery</a>.
  </p>

  <div class="moho-showcase-grid">
    <figure>
      <img src="{{ pathto('_static/images/showcase_buttons.png', 1) }}" alt="Buttons and toolbars">
      <figcaption>Buttons and toolbars</figcaption>
    </figure>
    <figure>
      <img src="{{ pathto('_static/images/showcase_textinputs.png', 1) }}" alt="Text inputs">
      <figcaption>Inputs</figcaption>
    </figure>
    <figure>
      <img src="{{ pathto('_static/images/showcase_codeinput.png', 1) }}" alt="Code input">
      <figcaption>Code input</figcaption>
    </figure>
    <figure>
      <img src="{{ pathto('_static/images/showcase_cards.png', 1) }}" alt="Cards">
      <figcaption>Cards</figcaption>
    </figure>
    <figure>
      <img src="{{ pathto('_static/images/showcase_matplotlib.png', 1) }}" alt="Matplotlib">
      <figcaption>Matplotlib</figcaption>
    </figure>
    <figure>
      <img src="{{ pathto('_static/images/showcase_plotly.png', 1) }}" alt="Plotly">
      <figcaption>Plotly</figcaption>
    </figure>
    <figure>
      <img src="{{ pathto('_static/images/showcase_svg.png', 1) }}" alt="SVG graphics">
      <figcaption>SVG graphics</figcaption>
    </figure>
    <figure>
      <img src="{{ pathto('_static/images/showcase_x3d.png', 1) }}" alt="X3D graphics">
      <figcaption>X3D graphics</figcaption>
    </figure>
  </div>
</section>
{% endblock %}