components.html

---
layout: default
title: Components
---

<div class="row">
  <div class="col12 padb-8">
    <h1>Components</h1>

    <h2>Navigation</h2>
    <div class="navside-btn"><span class="icon"> H </span></div>
    <div class="navside">
      <a class="user-action" href="#logout">Log out</a>
      <a class="user-login" href="#profile">Username</a>

      <a class="open" href="#1">Item 1</a>
      <a href="#2">Item 2</a>
      <a href="#3">Item 3</a>
      <a class="last" href="#4">Item 4</a>
      <p>Item 5</p>
      <div class="sub">
        <a href="#5">Sub item 1</a>
        <a href="#6">Sub item 2</a>
        <a href="#2">Sub item 3</a>
      </div>
      <a class="last" href="#4">Item 6</a>
      <a href="#5">Item 7</a>
      <a href="#6">Item 8</a>
    </div>

    {% highlight html %}
    <div class="navside-btn">
      <span class="icon">H</span>
    </div>
    <div class="navside">
      <a class="user-action" href="#logout">Log out</a>
      <a class="user-login" href="#profile">Username</a>

      <a class="open" href="#1">Item 1</a>
      <a href="#2">Item 2</a>
      <a href="#3">Item 3</a>
      <a class="last" href="#4">Item 4</a>
      <p>Item 5</p>
      <div class="sub">
        <a href="#5">Sub item 1</a>
        <a href="#6">Sub item 2</a>
        <a href="#2">Sub item 3</a>
      </div>
      <a class="last" href="#4">Item 6</a>
      <a href="#5">Item 7</a>
      <a href="#6">Item 8</a>
    </div>
    {% endhighlight %}

    <h2>Popup</h2>
    <p><a class="btn popup-btn">Try to open</a></p>
    <p>Popup has simple syntax listed below but we are recommending to use your
      <a href="http://klokantech.github.io/javascript/">JavaScript library</a> which is implementing many variations of a popup.</p>

    {% highlight html %}
    <div class="popup-bg"></div>
    <div class="popup">
      <div class="popup-close">X</div>
      <h3>Title</h3>
      <p>Content text.</p>
    </div>
    {% endhighlight %}



    <div class="popup-bg closed popup-btn"></div>
    <div class="popup closed">
      <div class="popup-close popup-btn">X</div>
      <h3>Title</h3>
      <p>Fast maps for the web and mobile. Drop images of maps into MapTiler and with a couple of clicks the software prepares HTML files with viewers based on Google Maps API, Leaflet and OpenLayers.</p>
    </div>

    <script type="application/javascript">
      var popupBtns = document.querySelectorAll('.popup-btn');
      popupBtns.forEach(function(el) {
        el.addEventListener('click', function() {
          document.getElementsByClassName('popup-bg')[0].classList.toggle('closed');
          document.getElementsByClassName('popup')[0].classList.toggle('closed');
        });
      })
    </script>

    <h2>Tabs</h2>
    <div class="tabs">
      <ul>
        <li class="tabs-btn active" id="btn-1">MapTiler</li>
        <li class="tabs-btn" id="btn-2">Georeferencer</li>
        <li class="tabs-btn" id="btn-3">MapRank Search</li>
      </ul>
      <div class="tabs-content">
        <div class="tabs-tab active" id="tab-1">
          <p>Fast maps for the web and mobile. Drop images of maps into MapTiler and with a couple of clicks the software prepares HTML files with viewers based on Google Maps API, Leaflet and OpenLayers. Enjoy the maps on your mobile phone or tablet even
            while offline.</p>
        </div>
        <div class="tabs-tab" id="tab-2">
          <p>Turn scans into maps. Collaboratively. Georeferencer is an online tool that creates real maps from scanned images.</p>
        </div>
        <div class="tabs-tab" id="tab-3">
          <p>Choose a place, select the time range, search and get the most relevant results. Welcome to the MapRank Search, a unique technology to explore collections of maps in time and space faster then ever before.</p>
        </div>
      </div>
    </div>

    <h2>Social icons</h2> {% highlight html %}
    <div class="social">
      <a>G</a>
      <a>T</a>
      <a>F</a>
      <a>P</a>
      <a>L</a>
    </div>{% endhighlight %}
    <div class="social">
      <a>G</a>
      <a>T</a>
      <a>F</a>
      <a>P</a>
      <a>L</a>
    </div>

    <h3>Colored</h3> {% highlight html %}
    <div class="social">
      <p>Share on</p>
      <a class="G">G</a>
      <a class="T">T</a>
      <a class="F">F</a>
      <a class="P">P</a>
      <a class="L">L</a>
    </div>{% endhighlight %}

    <div class="social">
      <p>Share on</p>
      <a class="G">G</a>
      <a class="T">T</a>
      <a class="F">F</a>
      <a class="P">P</a>
      <a class="L">L</a>
    </div>
    <h3>Circles</h3> {% highlight html %}
    <div class="social circles">
      <p>Share on</p>
      <a class="G">G</a>
      <a class="T">T</a>
      <a class="F">F</a>
      <a class="P">P</a>
      <a class="L">L</a>
    </div>{% endhighlight %}

    <div class="social circles">
      <a class="G">G</a>
      <a class="T">T</a>
      <a class="F">F</a>
      <a class="P">P</a>
      <a class="L">L</a>
    </div>

    <h2>Labels</h2>

    <p> This is text
      <span class="label info">info</span>
      <span class="label error">URGENT</span>
      <span class="label warning">bug</span>
      <span class="label">@siemens</span>
      <span class="label success">Data processing</span> and text after labels.
    </p>

  </div>
</div>

<div class="row" id="msgs">
  <div class="col12">
    <h2>Messages</h2>
    <button class="btn" onclick="document.getElementsByClassName('flashes')[0].classList.toggle('closed');">Hide message in 2 seconds</button>
    <p>You can use <code>hideMessages(seconds);</code> (def. 2 sec.) for hidden all messages via javascript.</p>
    <div class="message">Nam a massa et massa tempus gravida</div>
    <div class="message success">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="message warning">Nam a massa et massa tempus gravida. Suspendisse placerat, enim et hendrerit suscipit, nibh nunc tempor.</div>
    <div class="message error">class="message error"</div>
    <div class="flashes right">
      <div class="message error">Message error</div>
    </div>
  </div>
</div>

<div class="row" id="box">
  <div class="col12">
   <div class="box">
    <h3>This is the box</h3>
    <p>And text in a box is also there!</p>
   </div>
  </div>
</div>