<style>
 .btn {
     line-height: 1.5;
     position: relative;
     display: inline-block;
     font-weight: 400;
     white-space: nowrap;
     text-align: center;
     background-image: none;
     border: 1px solid transparent;
     -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
     box-shadow: 0 2px 0 rgba(0,0,0,0.015);
     cursor: pointer;
     -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
     transition: all .3s cubic-bezier(.645, .045, .355, 1);
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     -ms-touch-action: manipulation;
     touch-action: manipulation;
     
     padding: 10px 25px;
     font-size: 14px;
     font-weight: bold;
     border-radius: 4px;
     color: rgba(0,0,0,0.65);
     background-color: #fff;
     border-color: #d9d9d9;
     
     color: #fff;
     background-color: #1890ff;
     border-color: #1890ff;
     text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
     -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
     box-shadow: 0 2px 0 rgba(0,0,0,0.045);
     margin-right: 10px;
     padding-top: 7px;
 }

 .underline {
   text-decoration: underline;
 }
 
 .btn-orange {
     background-color: #f58a48;
     border-color: #f58a48;          
 }
 
 .code-block {
     font-family: "Source Code Pro",monospace;
     border: 1px solid #e1dddc;
     background-color: #fbfbfb;
     padding: 13px 17px;
     color: #46659e;
     margin-bottom: 40px;
 }

 .border-card {
     
 }

 .light-blue {
 background-image: url(data:image/svg+xml;base64, );
     background-repeat: no-repeat;
 background-position: 20px 20px;
 background-size: 47.7%;
 
     background-color: #e9f7ff;
     padding-top: 110px;
 }

 .quickstart-row {
 display: flex;
 justify-content: center;
 padding-top: 100px;
 padding-bottom: 100px;
 }

 .cards {
 width: 1170px;
 display: flex;
 padding-bottom: 100px;
 }

 .card {
 width: 33%;
 padding: 1em;
 width: 350px;
     display: flex;
     flex-direction: column;
     border: 3px solid rgba(74,144,226,0.2);
     background-color: #fff;
     color: #000;
     padding: 20px;
     margin: 0 20px;
 }

 .img-car {
 width: 740px;
 filter: drop-shadow(0 0 10px #999);
 }
 
 .subscribe {
 width: 600px;
 text-align: center;
 display: flex;
 justify-content: center;
 height: 400px;
 align-items: center;
 margin: 0 auto;
 }

 .tagline {
 display: flex;
 }

 .images-carousel {
 margin-right: 2em;
 }

 .quickstart {
   margin-left: 4em;
   margin-right: 2em;
 }
 
 @media screen and (max-width: 900px) {

 .header-ul { padding-left: 0px; }
 
 .quickstart {

 margin-left: 2em;
 }
 
 
 .tagline-text {
   text-align: center;
 }
 
 .tagline {
 flex-direction: column;
 }
 
 .img-car {
 width: 90%;
 margin-left: 2em;

 }
 
 .subscribe {
 width: auto;
 margin-left: 2em;
 margin-right: 2em;
 }

 
 .cards {
 flex-direction: column;
 }

 .card {
 margin-bottom: 2em;
 }
 
 .quickstart-row {
 flex-direction: column;
 padding-top: 60px;
 }

 .images-carousel {
 margin: 0 auto;
 }
 }
 
 .footer a, .footer h2 {
 color: white;

 }

 .footer a {
  text-decoration: underline;
 }
 
 .footer {
 background-color: #0f0f0f; color: white; display: flex; justify-content: center; min-height: 300px; align-items: center;
 }
 
</style>

<style>
  img {
  max-width: 100%;
  vertical-align: middle;
}

.trigger {
  display: none;
}

.slider {
  position: relative;
  height: 392px;
  width: 760px;
  margin-left: 2em;
  }

  .slider-wrapper {
  position: relative;
}

.slide {
  width: 100%;
  overflow: hidden;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 5000;
  opacity: 0;
  transition: opacity .5s ease-in-out;
  filter: drop-shadow(0 0 10px #999);
  border-radius: 5px;
}

.slide-img {
  height: 100%;
  object-fit: fill;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 10px #999);
}

.slide-figure {
  height: 100%;
  position: relative;
  margin: 0;
}

.slide-caption {
  position: absolute;
  bottom: 0%;
  width: 100%;
  color: white;
  text-align: center;
  background: rgba(0,0,0,0.4);
}

.trigger:checked + .slide {
  z-index: 6000;
  opacity: 1;
}

.slider-nav {
  width: 100%;
  text-align: center;
  margin: 1rem 0;
  padding: 0px;
}

.slider-nav__item {
  display: inline-block;
}

.slider-nav__label {
  font-size: 13px;
  background-color: #333;
  display: block;
  height: 1.5em;
  line-height: 2em;
  width: 1.5em;
  text-align: center;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: background-color .25s, color .25s ease-in-out;
}

.slider-nav__label:hover,
.slider-nav__label:active,
.slider-nav__label:focus {
  background-color: gray;
  color: black;
  }


 @media screen and (max-width: 900px) {
  .slider {
  width: 90%;
  margin-left: 2em;
  margin-right: 2em;
  height: 250px;
  }

  .slide-img {
  width: 100%;
  height: auto;
  }
  
  .slider-wrapper {
  width: 100%;
  

    }
  }

</style>

<div id="header" style="box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;">
    <a id="logo" href="<%- url_for("/") %>">
        <img src="<%- url_for("/images/ls_logo.png") %>" alt="label studio logo" />
        <span>Label Studio</span>
    </a>
    <ul id="nav" style="display: flex; align-items: center">
        <%- partial('partials/main_menu', { context: 'nav' }) %>
    </ul>
</div>

<body>
  <div class="fix-sidebar">
    <%- partial('partials/sidebar', { type: page.type === 'menu' ? 'guide' : page.type, index: page.index }) %>
    <div>
      <div id="bodybag">
        <section style="background-color: #fffaff;">
          <div style="position: relative; padding-top: 100px; padding-bottom: 100px;">
            <div style="display: flex; justify-content: center;">
              <div style="display: flex; flex-direction: column; align-items: center;">
                <div class="tagline">
                  <img src="<%- url_for("/images/opossum/heartex_icon_opossum_green.svg") %>" alt="label studio logo" height="180" />
                  <div class="tagline-text">
                    <h1 style="font-size: 2em;">Open-source<br/>data labeling, annotation<br/> and exploration tool<br/></h1>
                  </div>
                </div>
                <ul style="list-style-type: none;" class="header-ul">
                  <li>— Simplicity built-in, no overcomplicated UIs</li>
                  <li>— Mobile-Friendly, adaptable for any device</li>
                  <li>— Visually configurable from top to the bottom</li>
                </ul>
                <div style="display: flex; flex-direction: rows; margin-top: 1em;">
                  <div><a href="<%- url_for("guide/") %>" class="btn">Get Started</a></div>
                  <!-- <div><a href="" class="btn">Watch video</a></div> -->
                </div>
              </div>                            
            </div>
          </div>
        </section>
        
        <section class="quickstart-row">

          <div class="slider-wrapper">
            <div class="slider">
              <input type="radio" name="slider" class="trigger" id="one" checked="checked" />
              <div class="slide">
                <figure class="slide-figure">
                  <img class="slide-img" src="/images/screens/image_bbox.png" />
                  <figcaption class="slide-caption"><p>Image Bounding Box</p></figcaption>
                </figure>
              </div>
              <input type="radio" name="slider" class="trigger" id="two" />
              <div class="slide">
                <figure class="slide-figure">
                  <img class="slide-img" src="/images/screens/audio_transcription.png" />
                  <figcaption class="slide-caption"><p>Audio Transcription</p></figcaption>
                </figure>
              </div>
              <input type="radio" name="slider" class="trigger" id="three" />
              <div class="slide">
                <figure class="slide-figure">
                  <img class="slide-img" src="/images/screens/dialogue_analysis.png" />
                  <figcaption class="slide-caption"><p>Dialogue Analysis</p></figcaption>
                </figure>
              </div>
              <input type="radio" name="slider" class="trigger" id="four" />
              <div class="slide">
                <figure class="slide-figure">
                  <img class="slide-img" src="/images/screens/audio_regions.png" />
                  <figcaption class="slide-caption"><p>Audio Regions</p></figcaption>
                </figure>
              </div>
              <input type="radio" name="slider" class="trigger" id="five" />
              <div class="slide">
                <figure class="slide-figure">
                  <img class="slide-img" src="/images/screens/named_entity.png" />
                  <figcaption class="slide-caption"><p>Named Entity Recognition</p></figcaption>
                </figure>
              </div>
            </div>
            <ul class="slider-nav">
              <li class="slider-nav__item"><label class="slider-nav__label" for="one"> </label></li>
              <li class="slider-nav__item"><label class="slider-nav__label" for="two"> </label></li>
              <li class="slider-nav__item"><label class="slider-nav__label" for="three"> </label></li>
              <li class="slider-nav__item"><label class="slider-nav__label" for="four"> </label></li>
              <li class="slider-nav__item"><label class="slider-nav__label" for="five"> </label></li>
            </ul>
          </div>
          
          <div class="quickstart">
            <h1>Quickstart</h1>
            <div class="code-block">
              <p># Clone the repository<br>git clone https://github.com/heartexlabs/label-studio.git</p>
              <p># Launch the development server<br>cd label-studio/backend<br/>bash start.sh</p>
            </div>
            <p>Check out the templates configured for specific data labeling needs.</p>
            <a href="<%- url_for("/templates/index.html") %>" class="btn" target="_blank">Templates</a>
          </div>
        </section>
        <section class="light-blue" style="display: flex; justify-content: center;">          
          <div class="cards">
            <div class="card">
              <h3>Configurable</h3>
              <p>Using HTML-like tags, you can quickly configure the UI for your particular needs. It's not just an image or text. It can be a pairwise comparison, multi-type classification, and beyond. Label Studio is a swiss army knife of data labeling and annotation.</p>
              <a href="<%- url_for("/guide/configuration.html") %>" class="underline">Learn More</a>
            </div>
            <div class="card">
              <h3>Multiple data types</h3>
              <p>Label Studio is type agnostic. The overall goal is to be able to process all data types. Right now it supports <a href="<%- url_for("/tags/audio.html") %>" class="underline">Audio</a>, <a href="<%- url_for("/tags/text.html") %>" class="underline">Text</a>, and <a href="<%- url_for("/tags/image.html") %>" class="underline">Images</a>. <br/><br/>Each interface can include a mix of the types with different workflows.</p>
            </div>
            <div class="card">
              <h3>Embeddable and Extendable</h3>
              <p>Label Studio includes a powerful embedding feature that enables you to embed entire UI in your pipeline. You can extend core functionality with new visual constructs and customize it for different use cases.</p>
            </div>
          </div>                    
        </section>

        <section class="subscribe">
          
          <div style="text-align: center;">
            <img src="<%- url_for("/images/paper-plane.svg") %>" alt="label studio logo" height="64" />
            <h3>Subscribe for the updates</h3>
            <div >
              <p>We send a periodic newsletter announcing new features as well as some ML-related papers, label techniques that are innovative and funny stories.</p>
            </div>
            <!-- Begin Mailchimp Signup Form -->
            <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
            <style type="text/css">
	      #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
	      /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	      We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
            </style>
            <div id="mc_embed_signup">
              <form action="https://heartex.us20.list-manage.com/subscribe/post?u=0263d537fcf344b28250e4990&amp;id=bf8673757e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <div id="mc_embed_signup_scroll">
	          
	          <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required style="height: 40px;">
                  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                  <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0263d537fcf344b28250e4990_bf8673757e" tabindex="-1" value=""></div>
                  <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn"></div>
                </div>
              </form>
            </div>

            <!--End mc_embed_signup-->
          </div>
        </section>
        
        <section style="background-color: #1f104d; display: flex; justify-content: center; color: white; align-items: center; padding-top: 100px; padding-bottom: 100px; display: none;">
          
          <div>
            <h3 style="color: white;">Looking to scale?</h3>
            <ul style="list-style-type: none;">
              <li>— Do you have more data than you can possibly label by hand?</li>
              <li>— Do you want to distribute the labeling to multiple annotators?</li>
              <li>— Do you want to control the quality of the annotations?</li>
              <li>— Do you want to include your entire team into the process to achive greater results?</li>
            </ul>

            <p>We provide commercial offering built on top of Label Studio.</p>
            <div>
              <a href="" class="btn btn-orange">Check it out</a>                            
            </div>
          </div>
          <div>
            <img src="https://uploads-ssl.webflow.com/5cb5a799cf58f5f8d19a9441/5d24d11f82791f2dd51831ae_screely-1562693910207.png" alt="Quickstart" width="600">
          </div>
        </section>
        
        <section class="footer">
          <div style="display: flex; width: 1170px;">
            
            <div style="display: flex; justify-content: space-between; width: 100%">
              <div style="padding-top: 6px;">
                <a href="/"><img src="<%- url_for("/images/opossum/other/opossum_looking.svg") %>" alt="label studio logo" height="100" /></a>
              </div>
              <div>
                <h2 style="margin-top: 0">Project</h2>
                <div>
                  <a href="/guide">Guide</a><br/>
                  <a href="/tags">Tags</a><br/>
                  <a href="/templates">Templates</a>
                </div>
              </div>
              <div>
                <h2 style="margin-top: 0">Help</h2>
                <div>
                  <a href="https://github.com/heartexlabs/label-studio/issues">Github Issues</a><br/>
                  <a href="mailto:hi@heartex.ai">hi@heartex.ai</a>
                </div>
              </div>
              <div>
                <h2 style="margin-top: 0">Company</h2>
                <div>
                  <a href="https://heartex.ai/">Heartex</a>
                </div>
              </div>
              <div>
                <h2 style="margin-top: 0">Social</h2>
                <div>
                  <a href="https://twitter.com/heartexlabs">Twitter</a><br/>
                  <a href="https://github.com/heartexlabs/label-studio">Github</a>
                </div>
              </div>
            </div>
            <div></div>
          </div>
        </section>
      </div>
    </div>
  </div>
</body>

