encantar-js/docs_overrides/index.html

{% extends "main.html" %}

{% block libs %}
{{ super() }}
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
(function() {

window.addEventListener('load', function() {
  setupDialogPolyfill();
  setupReveal();

  if(location.hash == '#download')
    document.querySelector('#bundle-dialog').showModal();
});

function setupDialogPolyfill()
{
  if(typeof HTMLDialogElement !== 'undefined')
    return;

  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'style/dialog-polyfill.css';
  document.head.prepend(link);

  const script = document.createElement('script');
  script.onload = registerDialogs;
  script.src = 'js/dialog-polyfill.js';
  document.head.append(script);

  function registerDialogs()
  {
    document.querySelectorAll('dialog').forEach(function(dialog) {
      dialogPolyfill.registerDialog(dialog);
      dialog.classList.add('fixed');
    });
  }
}

function setupReveal()
{
  if(typeof IntersectionObserver === 'undefined')
    return;

  const observer = new IntersectionObserver(function(entries) {
    for(const entry of entries) {
      if(entry.intersectionRatio >= 0.125)
        entry.target.classList.remove('unrevealed');
      /*else if(entry.intersectionRatio == 0.0)
        entry.target.classList.add('unrevealed');*/
    }
  }, { threshold: [0, 0.125] });

  document.querySelectorAll('.reveal').forEach(function(reveal) {
    reveal.classList.add('unrevealed');
    observer.observe(reveal);
  });
}

})();
</script>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
:root {
  --max-width: 42rem;
  --border-radius: 22px;
  --hpad: 1rem;
  --highlighted: #ffd500;
}
body {
  color: var(--md-default-fg-color--light);
  background-color: var(--md-default-bg-color);
}
.md-main__inner {
  max-width: 100% !important;
  margin-top: 0 !important;
}
.md-content__inner {
  margin: 0 !important;
  padding: 0 !important;
}
.md-content__inner::before {
  height: 0 !important;
}
.md-footer {
  color: var(--md-footer-fg-color);
  text-align: center;
  padding: 0 var(--hpad);
}
.md-footer .md-copyright {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}
.md-footer a {
  color: var(--md-footer-fg-color--light);
}
/*.md-typeset h1 {
  font-weight: 400;
}*/
.md-copyright {
  color: var(--md-footer-fg-color--light);
}




#title {
  text-align: center;
  padding: 1.0rem var(--hpad) 0.5rem var(--hpad);
  background-image: linear-gradient(180deg,rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 100%), url('img/enchanted-sky.webp');
  background-size: cover;
  background-position: center;
}
#title h1 {
  margin: 0;
  font-size: 3.0rem;
  font-weight: bold;
  color: #ffc;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
#title h2 {
  margin: 0.5rem 0 0 0;
  font-size: 1.35rem;
  font-weight: bold;
  color: #ffc;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
#title video {
  width: 100%;
  max-width: var(--max-width);
  border-radius: var(--border-radius);
  margin: 1rem auto;
}




#topics {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--hpad);
  text-align: center;
}
#topics article {
  margin: 2rem 0;
  padding: 1.2rem;
  border-radius: var(--border-radius);
  background-image: linear-gradient(0deg, white 0%, lemonchiffon 100%);
}
#topics article:first-child {
  margin-top: 0.5rem;
}
#topics article h1 {
  margin-bottom: 1.0rem;
}
#topics article a.md-button {
  margin-top: 1.0rem;
}
#topics article p {
  margin: 0;
}
#topics article img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin-top: 1.0rem;
}
#topics article ul {
  list-style: none;
  display: flex;
  margin: 0;
}
#topics article ul li {
  min-width: 33.33%;
  max-width: 50%;
  display: flex;
  align-items: center;
  margin: 0;
}
#topics article ul li img {
  border-radius: 0;
}




#download {
  background-image: linear-gradient(0deg,rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 100%), url('img/enchanted-sky.webp');
  background-size: cover;
  background-position: right bottom;
  /*min-height: 342px;*/
}
#download article {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 2rem var(--hpad);
  font-size: 1.1em;
  text-align: center;
  color: #555;
}
#download article h1 {
  margin: 0;
}
#download article p {
  margin: 1.5rem 0;
  font-size: 1.05em;
}
#download article footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
#download article footer > * {
  margin: 0.5rem 0;
}




dialog {
  /*background-color: var(--md-default-bg-color);*/
  background-color: whitesmoke;
  color: var(--md-default-fg-color--light);
  text-align: center;
  padding: 1.5rem;
  border: 0;
  border-radius: 24px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
  transition: opacity 0.5s ease;
}

dialog[open] {
  opacity: 1;
}

dialog:not([open]) {
  opacity: 0;
  pointer-events: none;
}

dialog::backdrop {
  backdrop-filter: blur(8px);
  transition: backdrop-filter 0.5s ease;
}

dialog h1 {
  margin: 1.0rem 0;
  font-size: 1.4rem;
}

dialog .close {
  position: absolute;
  top: 0.3rem;
  right: 0.8rem;
  font-size: 1.35rem;
  color: var(--md-default-fg-color--light);
  cursor: pointer;
}

html:has(dialog[open]) {
  overflow: hidden;
}




#bundle-dialog label {
  display: flex;
  align-items: center;
  text-align: left;
  margin-bottom: 1rem;
}

#bundle-dialog footer {
  margin-top: 1rem;
}

#bundle-dialog input[type="radio"] {
  position: absolute;
  opacity: 0;
}

#bundle-dialog button[type="submit"] {
  margin-top: 0.75rem;
  width: 100%;
}

#bundle-dialog label:hover {
  cursor: pointer;
}

.custom-radio {
  min-width: 24px;
  width: 24px;
  height: 24px;
  background-color: var(--md-primary-bg-color);
  border-radius: 50%;
  border: 2px solid var(--md-default-fg-color--light);
  margin-right: 0.75rem;
}

.custom-radio:hover, label:hover > .custom-radio {
  background-color: var(--md-default-bg-color--lighter);
}

.custom-radio:after {
  content: "";
  display: block;
  position: relative;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--md-primary-fg-color);
  visibility: hidden;
}

input[type="radio"]:checked ~ .custom-radio {
  border-color: var(--md-primary-fg-color);
}

input[type="radio"]:checked ~ .custom-radio:after {
  visibility: visible;
}




.reveal {
  opacity: 1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.reveal.unrevealed {
  opacity: 0;
  transform: translateY(5rem);
}




@media screen and (min-width: 768px) {
  #title h1 { font-size: 4.0rem; }
  #title h2 { font-size: 1.6rem; }
  #topics { text-align: justify; }
  #topics > article img { margin-top: initial; }
  #topics > article { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
  #topics > article:nth-child(2n+1) > div:nth-child(2) { min-width: calc(var(--max-width) * 0.4); margin-left: 32px; }
  #topics > article:nth-child(2n) > div:nth-child(2) { min-width: calc(var(--max-width) * 0.4); margin-right: 32px; order: -1; }
}

@media screen and (min-width: 992px) {
  #topics { padding: 0; }
  #download article footer > * { margin: 0; }
}
</style>
{% endblock %}

{% block content %}
<header id="title">
  <h1>encantar.js</h1>
  <h2>High performance Web AR framework &mdash; no app required!</h2>
  <video autoplay loop muted playsinline controls poster="img/aframe-cat.webp">
    <source src="img/aframe-cat.mp4" type="video/mp4" />
    <source src="img/aframe-cat.webm" type="video/webm" />
  </video>
</header>




<section id="topics">
  <article class="reveal">
    <div>
      <h1>AR for all devices</h1>
      <p>Create Augmented Reality experiences for iOS, Android and even Desktops! All devices are supported, including those without native capabilities for AR / WebXR. User experience is frictionless, with no need to download apps!</p>
      <a href="demos/hello-aframe/poster.html" target="_blank" class="md-button" id="try-demo" data-goatcounter-click>Try a demo</a>
    </div>
    <div>
      <img src="img/mage.gif" alt="A mage in Augmented Reality" loading="lazy">
    </div>
  </article>
  <article class="reveal">
    <div>
      <h1>Turbocharged performance</h1>
      <p>A modern web browser is all that is required for a high performance experience, thanks to a powerful combination of GPU acceleration, WebAssembly and mathemagical wizardry. The result? A smooth user experience!</p>
      <a href="demos/basketball/poster.html" target="_blank" class="md-button" id="play-game" data-goatcounter-click>Play a game</a>
    </div>
    <div>
      <img src="img/demo-basketball.gif" alt="Magic AR Basketball Game" loading="lazy">
    </div>
  </article>
  <article class="reveal">
    <div>
      <h1>Open Source AR</h1>
      <p>encantar.js is one of the few open source Augmented Reality frameworks in existence. Your WebAR content is not tied to any platform. Host it wherever you want: there is no vendor lock-in and no usage limit.</p>
      <a href="https://github.com/alemart/encantar-js" rel="external" target="_blank" class="md-button" id="browse-source" data-goatcounter-click>Browse the source</a>
    </div>
    <div>
      <ul>
        <li><img src="img/open-source.png" alt="Open Source" loading="lazy" style="margin:1.33rem"></li>
        <li><img src="img/lgpl.png" alt="GNU LGPL" loading="lazy"></li>
      </ul>
    </div>
  </article>
  <article class="reveal">
    <div>
      <h1>Easy to use and to deploy</h1>
      <p>encantar.js may be combined with A-Frame, babylon.js, three.js, or any 3D engine &ndash; you choose! Also, all processing is performed on the user's device. A static web page is all you need!</p>
      <a href="demos/" target="_blank" class="md-button" id="try-more-demos" data-goatcounter-click>See for yourself</a>
    </div>
    <div>
      <ul>
        <li><img src="img/logo-aframe.png" alt="A-Frame logo" loading="lazy"></li>
        <li><img src="img/logo-babylon.png" alt="babylon.js logo" loading="lazy"></li>
        <li><img src="img/logo-three.png" alt="three.js logo" loading="lazy"></li>
      </ul>
    </div>
  </article>
  <article class="reveal">
    <div>
      <h1>Enchanted Images</h1>
      <p>Bring images to life! Create enchanted posters, ads, books, murals and more with Image Tracking, also known as Marker Tracking or Natural Feature Tracking. Scan your own images to start the WebAR experience &ndash; all in the browser!</p>
      <a href="guidelines-for-images/" target="_blank" class="md-button" id="guidelines-for-images" data-goatcounter-click>View the Guidelines</a>
    </div>
    <div>
      <img src="img/demo-cat.gif" alt="A cat in Augmented Reality" loading="lazy">
    </div>
  </article>
  <article class="reveal">
    <div>
      <h1>Add-Ons</h1>
      <p>Add-Ons enrich the core of encantar.js with magical additional features, such as easy to use Buttons for triggering events, as well as a pre-built Video Player for enchanting posters, murals, business cards and more!</p>
      <a href="addons/" target="_blank" class="md-button" id="explore-addons" data-goatcounter-click>Explore the Add-Ons</a>
    </div>
    <div>
      <img src="img/video-player.gif" alt="Video player for web-based Augmented Reality" loading="lazy">
    </div>
  </article>
  <article class="reveal">
    <div>
      <h1>Documentation</h1>
      <p>Extensive documentation accompanies the software. While you can quickly get magic done just by modifying the demos, the API Spellbook provides magical formulae and a comprehensive view of the technical aspects of AR magic.</p>
      <a href="api/" target="_blank" class="md-button" id="open-api-reference" data-goatcounter-click>Explore the API</a>
    </div>
    <div>
      <img src="img/witch-coder.webp" alt="Cartoon" loading="lazy">
    </div>
  </article>
</section>




<section id="download">
  <article>
    <h1>Download</h1>
    <p>encantar.js is created independently by <a href="https://github.com/alemart" target="_blank" id="author-name" data-goatcounter-click>Alexandre Martins</a>. It's based on <a href="https://github.com/alemart/speedy-vision" target="_blank" rel="external" id="speedy-vision" data-goatcounter-click>speedy-vision</a>, an open source computer vision library created by the same author. Your support is much appreciated!</p>
    <footer>
      <button class="md-button md-button--primary" id="download-button" data-goatcounter-click onclick="document.getElementById('bundle-dialog').showModal()">Download encantar.js</button>
      <a href="https://github.com/sponsors/alemart" target="_blank" class="md-button" id="download-sponsor" data-goatcounter-click>Sponsor on GitHub</a>
    </footer>
  </article>
</section>




<dialog id="bundle-dialog">
  <h1>Select an option</h1>
  <form autocomplete="off" onsubmit="location.href = this.elements.bundle.value; return false">
    <label>
      <input type="radio" name="bundle" value="https://ko-fi.com/s/697a184728" checked data-goatcounter-click>
      <span class="custom-radio"></span>
      <div>
        <strong>encantar.js Full</strong><br>
        encantar.js with <a href="addons/" id="exclusive-addons" target="_blank" data-goatcounter-click>Add-Ons for rich AR experiences</a>
      </div>
    </label>
    <label>
      <input type="radio" name="bundle" value="https://ko-fi.com/s/a9b92194e0" data-goatcounter-click>
      <span class="custom-radio"></span>
      <div>
        <strong>encantar.js</strong><br>
        encantar.js with core features and demos
      </div>
    </label>
    <label>
      <input type="radio" name="bundle" value="https://github.com/alemart/encantar-js" data-goatcounter-click>
      <span class="custom-radio"></span>
      <div>
        <strong>Source Code</strong><br>
        for Augmented Reality and Computer Vision nerds
      </div>
    </label>
    <footer>
      <button type="submit" class="md-button md-button--primary" id="download-bundle" data-goatcounter-click>OK</button>
    </footer>
  </form>
  <button class="close" onclick="this.parentNode.close()">&times;</button>
</dialog>




<footer class="md-footer">
  <div class="md-copyright">
    encantar.js: GPU-accelerated Augmented Reality framework for the web. Copyright &copy; 2022 &ndash; present Alexandre Martins
  </div>
</footer>
{% endblock %}

{% block announce %}{% endblock %}
{% block header %}{% endblock %}
{% block tabs %}{% endblock %}
{% block site_nav %}{% endblock %}
{% block footer %}{% endblock %}