{% extends "base.html" %}
{% load static %}
{% load render_bundle from webpack_loader %}

{% block header %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
{% endblock %}

{% block content %}
<section class="hero" style="background-color:#2a2e2f">
  <div class="container">
    <div class="columns">
      <div class="column is-6">
        <h1 class="title is-1 has-text-white">Text Annotation for Humans</h1>
        <h2 class="subtitle is-4 has-text-white">Just create a project, upload data and start annotation. You can build a dataset in hours.</h2>
        <p>
          <a href="{% url 'demo-named-entity-recognition' %}" class="button is-medium is-primary">
            Try Demo
          </a>
        </p>
      </div>
      <div class="column is-6">
        <figure class="image">
          <img src="{% static 'assets/images/named_entity_recognition.png' %}">
        </figure>
      </div>
    </div>
  </div>
</section>

<div class="hero-body" style="background-image:linear-gradient(to bottom, #fafafa, #f3f3f3)">

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="columns is-vcentered">
          <div class="column is-5 is-offset-1">
            <figure class="image">
              <img src="{% static 'assets/images/sentiment_analysis.png' %}" alt="Description">
            </figure>
          </div>
          <div class="column is-5">
            <h1 class="title is-2">
              Document Classification
            </h1>
            <h2 class="subtitle is-4">
              Document annotation for any document classification tasks.
            </h2>
            <br>
            <p>
              <a href="{% url 'demo-text-classification' %}" class="button is-primary">
                Try Demo
              </a>
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="columns is-vcentered">
          <div class="column is-5 is-offset-1">
            <figure class="image">
              <img src="{% static 'assets/images/named_entity_recognition.png' %}" alt="Description">
            </figure>
          </div>
          <div class="column is-5">
            <h1 class="title is-2">
              Sequence Labeling
            </h1>
            <h2 class="subtitle is-4">
              A super easy interface to tag for named entity recognition, part-of-speech tagging, and semantic role labeling.
            </h2>
            <br>
            <p>
              <a href="{% url 'demo-named-entity-recognition' %}" class="button is-primary">
                Try Demo
              </a>
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="columns is-vcentered">
          <div class="column is-5 is-offset-1">
            <figure class="image">
              <img src="{% static 'assets/images/translation.png' %}" alt="Description">
            </figure>
          </div>
          <div class="column is-5">
            <h1 class="title is-2">
              Sequence to Sequence
            </h1>
            <h2 class="subtitle is-4">
              A super easy interface to label for any sequence to sequence tasks.
            </h2>
            <br>
            <p>
              <a href="{% url 'demo-translation' %}" class="button is-primary">
                Try Demo
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

<div class="hero-body" style="background-image:linear-gradient(to bottom, #fafafa, #f3f3f3)">
  <div class="container">

    <div class="columns features">
      <div class="column is-4">
        <div class="card is-shady">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://source.unsplash.com/RWnpyGtY1aU" alt="Placeholder image" class="modal-button" data-target="modal-image2">
            </figure>
          </div>
          <div class="card-content">
            <div class="content">
              <h4>Team Collaboration</h4>
              <p>Invite other users to help you annotate text and create an annotated corpus. You only have to create a guideline
                and upload text data. Team collaboration can accelate the annotation process.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="card is-shady">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://source.unsplash.com/6Ticnhs1AG0" alt="Placeholder image">
            </figure>
          </div>
          <div class="card-content">
            <div class="content">
              <h4>Language independent</h4>
              <p>doccano is independent of language - you can annotate texts regardless of the languages. You can quickly start annotating text.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="column is-4 modal-button" data-target="modal-image">
        <div class="card is-shady">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="https://i.imgsafe.org/ba/baa924a5e3.png" alt="Placeholder image">
            </figure>
          </div>
          <div class="card-content">
            <div class="content">
              <h4>Auto labeling</h4>
              <p>Auto labeling is one of the most powerful tools in creating annotated corpora. Machine learning model automatically
                annotates texts. You're only required to correct a few error annotations.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="footer">
  <div class="container">
    <div class="columns">
      <div class="column is-4">
        <h2>
          <strong class="has-text-white">DOCCANO</strong>
        </h2>
        <ul>
          <li>
            <a href="https://github.com/doccano/doccano">Documentation</a>
          </li>
          <li>
            <a href="{% url 'demo-named-entity-recognition' %}">Live Demo</a>
          </li>
          <li>
            <a href="https://github.com/doccano/doccano">Source code</a>
          </li>
          <li>
            <a href="https://github.com/doccano/doccano">Contribution</a>
          </li>
        </ul>
      </div>
      <div class="column is-4">
        <h2>
          <strong class="has-text-white">FEATURES</strong>
        </h2>
        <ul>
          <li>
            <a href="{% url 'demo-text-classification' %}">Text Classification</a>
          </li>
          <li>
            <a href="{% url 'demo-named-entity-recognition' %}">Sequence Labeling</a>
          </li>
          <li>
            <a href="{% url 'demo-translation' %}">Sequence to Sequence</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="content has-text-centered">
      <p>
        <a href="https://github.com/doccano/doccano">doccano</a> by
        <a href="https://github.com/Hironsan">Hironsan</a>. The source code is licensed
        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
        <br>
      </p>
    </div>
  </div>
</footer>
{% endblock %}

{% block footer %}
{% render_bundle 'index' 'js' %}
{% endblock %}