Update UI

demos/assets/demo.css

@@ -0,0 +1,68 @@
+body {
+    background-color: #673ab6;
+    background-image: url(../assets/poster.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+}
+
+#scan {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    opacity: 0.75;
+}
+
+#about, #sponsor {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+
+    opacity: 0.5;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+
+    background-color: transparent;
+    background-size: cover;
+    border-color: white;
+    border-style: solid;
+    border-width: 2px;
+    border-radius: 64px;
+}
+
+#about:active, #about:focus, #sponsor:active, #sponsor:focus {
+    background-color: #ffd500;
+    border-color: #ffd500;
+    opacity: 1.0;
+}
+
+#about {
+    top: 24px;
+    right: 24px;
+    background-image: url(../assets/info.svg);
+}
+
+#sponsor {
+    top: calc(50% - 32px);
+    right: 24px;
+    background-image: url(../assets/heart.svg);
+}
+
+@media screen and (orientation: portrait) {
+    #about {
+        left: 24px;
+        bottom: 24px;
+        top: initial;
+        right: initial;
+    }
+
+    #sponsor {
+        left: calc(50% - 32px);
+        bottom: 24px;
+        top: initial;
+        right: initial;
+    }
+}

demos/assets/heart.svg

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg954"
+   version="1.1"
+   fill="none"
+   viewBox="0 0 24 24"
+   height="800px"
+   width="800px">
+  <metadata
+     id="metadata960">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs958">
+    <marker
+       style="overflow:visible"
+       id="marker2126"
+       refX="0.0"
+       refY="0.0"
+       orient="auto">
+      <path
+         transform="scale(0.8) translate(12.5,0)"
+         style="fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1;fill:#c6afe9;fill-opacity:1"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         id="path2124" />
+    </marker>
+    <marker
+       style="overflow:visible"
+       id="Arrow1Lstart"
+       refX="0.0"
+       refY="0.0"
+       orient="auto">
+      <path
+         transform="scale(0.8) translate(12.5,0)"
+         style="fill-rule:evenodd;stroke:none;stroke-width:1pt;stroke-opacity:1;fill:#c6afe9;fill-opacity:1"
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+         id="path1842" />
+    </marker>
+  </defs>
+  <path
+     id="rect1653"
+     d="M 5.4894119,7.1116441 C 3.6899104,8.9111456 3.6871183,11.825949 5.4832538,13.622102 l 8.56e-5,8.6e-5 1.8101979,1.810199 0.6074449,0.607444 2.2888548,2.288855 c 1.002844,1.002845 2.617552,1.002845 3.620396,0 l 2.288856,-2.288856 0.607443,-0.607443 1.810198,-1.810198 c 1.796135,-1.796138 1.793381,-4.7110079 -0.0062,-6.5105418 -1.799519,-1.7995183 -4.714355,-1.8022905 -6.5105,-0.00616 v 0 C 10.203932,5.3093536 7.2890638,5.312107 5.4895299,7.1115428 Z"
+     style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.00199676;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
+</svg>

demos/assets/info.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="800"
+   height="800"
+   viewBox="0 0 211.66666 211.66667"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
+   sodipodi:docname="info.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.49497475"
+     inkscape:cx="204.4552"
+     inkscape:cy="415.0457"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1600"
+     inkscape:window-height="876"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Camada 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-85.333317)">
+    <path
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.50196078"
+       d="M 400 146.14062 A 53.321998 53.321998 0 0 0 346.67773 199.46289 A 53.321998 53.321998 0 0 0 400 252.78516 A 53.321998 53.321998 0 0 0 453.32227 199.46289 A 53.321998 53.321998 0 0 0 400 146.14062 z M 388.36523 315.83789 C 372.51258 315.83789 359.75 328.30266 359.75 343.78516 L 359.75 625.91406 C 359.75 641.39663 372.51258 653.85938 388.36523 653.85938 L 411.63477 653.85938 C 427.48739 653.85938 440.25 641.39663 440.25 625.91406 L 440.25 343.78516 C 440.25 328.30266 427.48739 315.83789 411.63477 315.83789 L 388.36523 315.83789 z "
+       transform="matrix(0.26458333,0,0,0.26458333,0,85.333317)"
+       id="path870" />
+  </g>
+</svg>

demos/hello-aframe/demo.css

@@ -1,56 +0,0 @@
-body {
-    background-color: #673ab6;
-    background-image: url("../assets/poster.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-}
-
-#about {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    width: 80px;
-    height: 80px;
-
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-
-    color: #fff;
-    font-size: 56px;
-    font-weight: bold;
-    font-family: monospace;
-    text-decoration: none;
-    text-align: center;
-
-    border-width: 0 0 2px 2px;
-    border-radius: 0 0 0 8px;
-    border-style: solid;
-    border-color: #673ab6;
-    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
-    -webkit-tap-highlight-color: transparent;
-}
-
-#about:hover {
-    border-color: #6742b8;
-    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
-}
-
-#about:active {
-    border-color: #ddc300;
-    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
-}
-
-#about::before {
-    content: '\24D8';
-    width: 100%;
-    text-align: center;
-}
-
-#about:focus {
-    outline: none;
-}

demos/hello-aframe/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR demo with A-Frame</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/aframe@1.4.2/dist/aframe-v1.4.2.min.js"></script>
         <script src="../../plugins/aframe-with-encantar.js"></script>
@@ -59,6 +59,9 @@
                     <!-- The about button -->
                     <a id="about" href="NOTICE.html" draggable="false"></a>
 
+                    <!-- The sponsor button -->
+                    <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+
                     <!-- The scan gimmick -->
                     <a-entity ar-scan-gimmick="opacity: 0.75"></a-entity>
 

demos/hello-aframe/video.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR demo with A-Frame</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/aframe@1.4.2/dist/aframe-v1.4.2.min.js"></script>
         <script src="../../plugins/aframe-with-encantar.js"></script>
@@ -59,6 +59,9 @@
                     <!-- The about button -->
                     <a id="about" href="NOTICE.html" draggable="false"></a>
 
+                    <!-- The sponsor button -->
+                    <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+
                     <!-- The scan gimmick -->
                     <a-entity ar-scan-gimmick="opacity: 0.75"></a-entity>
 

demos/hello-babylon/demo.css

@@ -1,63 +0,0 @@
-body {
-    background-color: #673ab6;
-    background-image: url("../assets/poster.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-}
-
-#scan {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    opacity: 0.75;
-}
-
-#about {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    width: 80px;
-    height: 80px;
-
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-
-    color: #fff;
-    font-size: 56px;
-    font-weight: bold;
-    font-family: monospace;
-    text-decoration: none;
-    text-align: center;
-
-    border-width: 0 0 2px 2px;
-    border-radius: 0 0 0 8px;
-    border-style: solid;
-    border-color: #673ab6;
-    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
-    -webkit-tap-highlight-color: transparent;
-}
-
-#about:hover {
-    border-color: #6742b8;
-    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
-}
-
-#about:active {
-    border-color: #ddc300;
-    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
-}
-
-#about::before {
-    content: '\24D8';
-    width: 100%;
-    text-align: center;
-}
-
-#about:focus {
-    outline: none;
-}

demos/hello-babylon/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR demo with babylon.js</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/babylonjs@7.29.0/babylon.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/babylonjs-loaders@7.29.0/babylonjs.loaders.min.js"></script>
@@ -14,8 +14,9 @@
     <body>
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
-                <img id="scan" src="../assets/scan.png" draggable="false">
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+                <img id="scan" src="../assets/scan.png" draggable="false">
             </div>
         </div>
         <img id="mage" src="../assets/mage.webp" hidden>

demos/hello-babylon/video.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR demo with babylon.js</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/babylonjs@7.29.0/babylon.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/babylonjs-loaders@7.29.0/babylonjs.loaders.min.js"></script>
@@ -14,8 +14,9 @@
     <body>
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
-                <img id="scan" src="../assets/scan.png" draggable="false">
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+                <img id="scan" src="../assets/scan.png" draggable="false">
             </div>
         </div>
         <img id="mage" src="../assets/mage.webp" hidden>

demos/hello-three/demo.css

@@ -1,63 +0,0 @@
-body {
-    background-color: #673ab6;
-    background-image: url("../assets/poster.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-}
-
-#scan {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    opacity: 0.75;
-}
-
-#about {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    width: 80px;
-    height: 80px;
-
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-
-    color: #fff;
-    font-size: 56px;
-    font-weight: bold;
-    font-family: monospace;
-    text-decoration: none;
-    text-align: center;
-
-    border-width: 0 0 2px 2px;
-    border-radius: 0 0 0 8px;
-    border-style: solid;
-    border-color: #673ab6;
-    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
-    -webkit-tap-highlight-color: transparent;
-}
-
-#about:hover {
-    border-color: #6742b8;
-    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
-}
-
-#about:active {
-    border-color: #ddc300;
-    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
-}
-
-#about::before {
-    content: '\24D8';
-    width: 100%;
-    text-align: center;
-}
-
-#about:focus {
-    outline: none;
-}

demos/hello-three/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR demo with three.js</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
@@ -14,8 +14,9 @@
     <body>
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
-                <img id="scan" src="../assets/scan.png" draggable="false">
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+                <img id="scan" src="../assets/scan.png" draggable="false">
             </div>
         </div>
         <img id="mage" src="../assets/mage.webp" hidden>

demos/hello-three/video.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR demo with three.js</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js"></script>
@@ -14,8 +14,9 @@
     <body>
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
-                <img id="scan" src="../assets/scan.png" draggable="false">
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+                <img id="scan" src="../assets/scan.png" draggable="false">
             </div>
         </div>
         <img id="mage" src="../assets/mage.webp" hidden>

demos/hello-webgl/demo.css

@@ -1,63 +0,0 @@
-body {
-    background-color: #673ab6;
-    background-image: url("../assets/poster.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-}
-
-#scan {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    opacity: 0.75;
-}
-
-#about {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    width: 80px;
-    height: 80px;
-
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-
-    color: #fff;
-    font-size: 56px;
-    font-weight: bold;
-    font-family: monospace;
-    text-decoration: none;
-    text-align: center;
-
-    border-width: 0 0 2px 2px;
-    border-radius: 0 0 0 8px;
-    border-style: solid;
-    border-color: #673ab6;
-    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
-    -webkit-tap-highlight-color: transparent;
-}
-
-#about:hover {
-    border-color: #6742b8;
-    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
-}
-
-#about:active {
-    border-color: #ddc300;
-    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
-}
-
-#about::before {
-    content: '\24D8';
-    width: 100%;
-    text-align: center;
-}
-
-#about:focus {
-    outline: none;
-}

demos/hello-webgl/index.html

@@ -4,15 +4,16 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR demo with WebGL</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="demo.js"></script>
     </head>
     <body>
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
-                <img id="scan" src="../assets/scan.png" draggable="false">
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+                <img id="scan" src="../assets/scan.png" draggable="false">
             </div>
         </div>
         <img id="it-works" src="../assets/it-works.png" hidden>

demos/hello-webgl/video.html

@@ -4,15 +4,16 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR demo with WebGL</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="demo.js"></script>
     </head>
     <body>
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
-                <img id="scan" src="../assets/scan.png" draggable="false">
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+                <img id="scan" src="../assets/scan.png" draggable="false">
             </div>
         </div>
         <img id="it-works" src="../assets/it-works.png" hidden>

demos/hello-world/demo.css

@@ -1,63 +0,0 @@
-body {
-    background-color: #673ab6;
-    background-image: url("../assets/poster.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-}
-
-#scan {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    opacity: 0.75;
-}
-
-#about {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    width: 80px;
-    height: 80px;
-
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-
-    color: #fff;
-    font-size: 56px;
-    font-weight: bold;
-    font-family: monospace;
-    text-decoration: none;
-    text-align: center;
-
-    border-width: 0 0 2px 2px;
-    border-radius: 0 0 0 8px;
-    border-style: solid;
-    border-color: #673ab6;
-    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
-    -webkit-tap-highlight-color: transparent;
-}
-
-#about:hover {
-    border-color: #6742b8;
-    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
-}
-
-#about:active {
-    border-color: #ddc300;
-    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
-}
-
-#about::before {
-    content: '\24D8';
-    width: 100%;
-    text-align: center;
-}
-
-#about:focus {
-    outline: none;
-}

demos/hello-world/index.html

@@ -4,15 +4,16 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR template</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="demo.js"></script>
     </head>
     <body>
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
-                <img id="scan" src="../assets/scan.png" draggable="false">
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+                <img id="scan" src="../assets/scan.png" draggable="false">
             </div>
         </div>
         <img id="mage" src="../assets/mage.webp" hidden>

demos/hello-world/video.html

@@ -4,15 +4,16 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js WebAR template</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="demo.js"></script>
     </head>
     <body>
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
-                <img id="scan" src="../assets/scan.png" draggable="false">
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
+                <img id="scan" src="../assets/scan.png" draggable="false">
             </div>
         </div>
         <img id="mage" src="../assets/mage.webp" hidden>

demos/pointer-demo/demo.css

@@ -1,56 +0,0 @@
-body {
-    background-color: #673ab6;
-    background-image: url("../assets/poster.svg");
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-}
-
-#about {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    width: 80px;
-    height: 80px;
-
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-
-    color: #fff;
-    font-size: 56px;
-    font-weight: bold;
-    font-family: monospace;
-    text-decoration: none;
-    text-align: center;
-
-    border-width: 0 0 2px 2px;
-    border-radius: 0 0 0 8px;
-    border-style: solid;
-    border-color: #673ab6;
-    background: linear-gradient(0deg, #7e56c2 0%, #9574cd 100%);
-    -webkit-tap-highlight-color: transparent;
-}
-
-#about:hover {
-    border-color: #6742b8;
-    background: linear-gradient(0deg, #8b72cb 0%, #c894ff 100%);
-}
-
-#about:active {
-    border-color: #ddc300;
-    background: linear-gradient(0deg, #ffd500 0%, #ffff00 100%);
-}
-
-#about::before {
-    content: '\24D8';
-    width: 100%;
-    text-align: center;
-}
-
-#about:focus {
-    outline: none;
-}

demos/pointer-demo/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1">
         <title>encantar.js pointer demo</title>
-        <link href="demo.css" rel="stylesheet">
+        <link href="../assets/demo.css" rel="stylesheet">
         <script src="../../dist/encantar.min.js"></script>
         <script src="demo.js"></script>
     </head>
@@ -12,6 +12,7 @@
         <div id="ar-viewport">
             <div id="ar-hud" hidden>
                 <a id="about" href="NOTICE.html" draggable="false"></a>
+                <a id="sponsor" href="https://github.com/sponsors/alemart" draggable="false"></a>
             </div>
         </div>
     </body>

src/ui/fullscreen-button.ts

@@ -94,9 +94,6 @@ export class FullscreenButton
         button.style.width = BUTTON_SIZE + 'px';
         button.style.height = BUTTON_SIZE + 'px';
 
-        button.style.display = 'flex';
-        button.style.alignItems = 'center';
-        button.style.padding = '2px';
         button.style.opacity = '0.5';
         button.style.cursor = 'pointer';
         button.style.outline = 'none';