encantar-js/docs_overrides/index.html

{% extends "main.html" %}

{% block libs %}
{{ super() }}
<script src="js/dialog-polyfill.js"></script>
{% endblock %}

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

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

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

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

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

function setupDialog()
{
  if(location.search.indexOf('checkout_session_id') < 0)
    return;

  try {
    const searchParams = new URLSearchParams(location.search);
    const sessionId = searchParams.get('checkout_session_id') || '';
    const next = searchParams.get('next') || location.href;

    const url = new URL(next);
    url.searchParams.append('checkout_session_id', sessionId);

    const button = document.getElementById('download-dialog-download');
    const redirect = function() { location.href = url.href; };
    button.onclick = redirect;
    setTimeout(redirect, 3000);

    const dialog = document.getElementById('download-dialog');
    dialog.showModal();
  }
  catch(e) {
    console.error(e);
    alert(e.message);
  }
}

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() }}
<link rel="stylesheet" href="style/dialog-polyfill.css">
<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;
}




#pay {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  font-size: 1.2rem;
  line-height: 2.5;
}
#pay > * {
  width: 100%;
  min-width: 320px;
}
#pay > p {
  font-size: 1.0rem;
}
#pay input[type="submit"] {
  font-size: 1.0rem;
  margin: 1.0rem 0 0 0;
}
#pay > h1 {
  margin: 0.5rem 0 0 0;
  font-size: 1.4rem;
}
#pay #actions {
  display: flex;
  flex-direction: column;
  line-height: initial;
}
#pay #actions > * {
  margin-top: 0.7rem;
  font-size: 1rem;
}
#pay #actions > :not(.md-button) {
  font-size: 0.8rem;
}
#pay #amounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.85em;
}
#pay #amounts .dollar-sign::before {
  content: "$";
}
#pay #amounts.euro .dollar-sign::before {
  content: "\20AC";
}
#pay #currencies {
  font-size: 0.6em;
  font-weight: bold;
}
#pay #currencies input[type="radio"] + label {
  margin: 0 !important;
}
#pay input[type="radio"] {
  width: 0;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  background-color: white;
  margin: 0;
}
#pay input[type="radio"] + label {
  padding: 0.1rem 0.5rem;
  margin: 0 2px;
  cursor: pointer;
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--border-radius) / 3);
  background: linear-gradient(180deg, white 0%, whitesmoke 100%);
}
#pay input[type="radio"] + label:hover {
  border-color: var(--highlighted);
}
#pay input[type="radio"]:checked + label {
  background: linear-gradient(180deg, #fffd50 0%, var(--highlighted) 100%) !important;
  border-color: var(--highlighted) !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#custom-amount {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;

  font-size: 0.75em;
  padding: 0.5rem 0.5rem 0.5rem 2.1em;
  margin: 0;
  width: 100%;
  height: 100%;

  border: 1px solid #dcdcdc;
  border-radius: calc(var(--border-radius) / 3);
  background: linear-gradient(180deg, white 0%, whitesmoke 100%);
  color: var(--md-default-fg-color--light);
}
#custom-amount:focus {
  border-color: var(--highlighted) !important;
}
#custom-amount:invalid {
  border-color: salmon !important;
}
#custom-amount-wrapper {
  flex-basis: 13.8rem; /* line break */
  /*flex-basis: 9rem*/; /* same line */
  visibility: hidden;
  max-height: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.2s ease-out, max-height 0.2s ease-out;
}
#custom-amount-wrapper > .dollar-sign {
  font-size: 0.85em;
  position: absolute;
  left: 0.83em;
  /*top: 0.33em;*/
  top: 0.37em;
}
#custom-tier:checked ~ #custom-amount-wrapper {
  visibility: visible;
  max-height: 64px;
  transform: scaleY(1);
}
#donation-dialog {
  transform: translate(0, -35%) !important;
}





#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;
}




#contact {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--hpad);
  text-align: center;
}
#contact article {
  margin: 2rem 0;
  padding: 1.2rem;
  border-radius: var(--border-radius);
  background-image: linear-gradient(0deg, white 0%, lemonchiffon 100%);
}
#contact article h1 {
  margin-bottom: 1.0rem;
}
#contact article > div {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-size: 1.1em;
}
#contact article a::after {
  content: ' \2192';
}




#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;
}




#download-dialog {
  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;
}

#download-dialog[open] {
  opacity: 1;
}

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

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

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

#download-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(#download-dialog[open]) {
  overflow: hidden;
}




#donation-dialog {
  max-width: var(--max-width);
  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;
}

#donation-dialog[open] {
  opacity: 1;
}

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

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

#donation-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(#donation-dialog[open]) {
  overflow: hidden;
}




.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) {
  /*#pay { justify-content: space-around; }*/
  #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; }
  #contact { 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 or service. Host it wherever you want: there is no vendor lock-in and no usage limit.</p>
      <a href="tutorial/" target="_blank" class="md-button" id="read-tutorial" data-goatcounter-click>Get started now</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 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="contact">
  <article class="reveal">
    <h1>Got a question?</h1>
      <p>Usually you can go a long way with the publicly available resources, which include the written materials and the various demos. If for some reason you need one-to-one assistance, consultancy services are available.</p>
      <a href="contact/" target="_blank" id="talk-to-wizard" data-goatcounter-click>Talk to a wizard</a>
<!--
    <div>
      <div>
        <p>Need help with a project?</p>
        <p><a href="contact/" target="_blank" id="talk-to-wizard" data-goatcounter-click>Talk to a wizard</a></p>
      </div>
      <div>
        <p>Wanna know more?</p>
        <p><a href="api/" target="_blank" id="study-the-api" data-goatcounter-click>Study the API</a></p>
      </div>
    </div>
-->
  </article>
</section>




<section id="download">
  <article>
    <h1>Download</h1>
    <p>encantar.js is created independently by <a href="contact/" 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('donation-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>




<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>




<dialog id="download-dialog" class="fixed">
  <form method="dialog">
    <h1>Thank you for your interest in encantar.js</h1>
    <p>Your download will start shortly...</p>
    <p><button id="download-dialog-download" class="md-button md-button--primary" type="button" data-goatcounter-click>Download now</button></p>
    <button id="download-dialog-close" type="submit">&times;</button>
  </form>
</dialog>




<dialog id="donation-dialog" class="fixed">
  <form id="pay" method="post" action="https://api.encantar.dev/v1/pay" autocomplete="off" onsubmit="return this.tier.value != 'custom' || this['custom-amount'].value != ''">
    <h1>Do you appreciate this? <span class="heart">&#x1f496;</span></h1>
    <p>Support Open Source Augmented Reality!</p>
    <span>
      <div id="amounts" class="euro">
        <input type="radio" id="first-tier" name="tier" value="fifty" data-goatcounter-click>
        <label for="first-tier"><span class="dollar-sign"></span>50</label>
        <input type="radio" id="second-tier" name="tier" value="one-hundred" data-goatcounter-click>
        <label for="second-tier"><span class="dollar-sign"></span>100</label>
        <input type="radio" id="third-tier" name="tier" value="two-hundred" data-goatcounter-click>
        <label for="third-tier"><span class="dollar-sign"></span>200</label>
        <input type="radio" id="custom-tier" name="tier" value="custom" data-goatcounter-click required onchange="this.checked && document.getElementById('custom-amount').focus()">
        <label for="custom-tier">Other</label>
        <label for="custom-amount" id="custom-amount-wrapper">
          <span class="dollar-sign"></span>
          <input type="number" id="custom-amount" name="custom-amount" value="" placeholder="Enter an amount" min="0" max="999999" step="1" oninput="document.getElementById('custom-tier').click()">
        </label>
      </div>
      <div id="currencies">
        <input type="radio" id="currency-usd" name="currency" value="usd" data-goatcounter-click onchange="this.checked && document.getElementById('amounts').classList.remove('euro')">
        <label for="currency-usd">&#x1F1FA;&#x1F1F8; USD</label>
        <input type="radio" id="currency-eur" name="currency" value="eur" checked data-goatcounter-click onchange="this.checked && document.getElementById('amounts').classList.add('euro')">
        <label for="currency-eur">&#x1F1EA;&#x1F1FA; EUR</label>
      </div>
    </span>
    <div id="actions">
      <button type="submit" class="md-button md-button--primary" id="donate-stripe" data-goatcounter-click>Donate &amp; Download</button>
      <a href="https://www.paypal.com/donate/?hosted_button_id=3H4CAJ9832GCJ" rel="external" class="md-button md-button-primary" id="donate-paypal" data-goatcounter-click>Donate via PayPal</a>
    </div>
  </form>
  <button id="donation-dialog-close" onclick="this.parentNode.close()">&times;</button>
</dialog>
{% endblock %}

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