Update posters

demos/assets/poster.css

@@ -4,6 +4,7 @@ body {
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
+    font-family: "Lato", sans-serif;
     width: 100vw;
     height: 100vh;
     padding: 0;
@@ -19,11 +20,10 @@ body {
     right: 16px;
     color: black;
     background-color: white;
-    border-radius: 16px;
+    border-radius: 4px;
     padding: 0.5em;
     text-align: center;
     font-weight: bold;
-    font-family: sans-serif;
     font-size: 1.25em;
 }
 
@@ -39,26 +39,27 @@ body {
 
 #get {
     position: fixed;
-    top: 24px;
-    left: 24px;
+    top: 16px;
+    left: 16px;
     padding: 16px;
-    color: rgb(184, 98, 184);
-    background-color: white;
+    color: white;
+    background-color: blueviolet;
     border: 0;
-    border-radius: 24px;
-    font-family: sans-serif;
-    font-size: 1.25em;
+    border-radius: 4px;
+    font-size: 1.2rem;
     font-weight: bold;
-    text-decoration: underline;
-    transition: transform 0.25s;
+    text-decoration: none;
+    opacity: 0.8;
+    transition: transform 0.25s, opacity 0.25s;
 }
 
 #get:any-link {
-    color: rgb(184, 98, 184);
+    color: white;
 }
 
 #get:hover {
     transform: scale(1.0625);
+    opacity: 1;
 }
 
 #prev, #next {
@@ -101,34 +102,31 @@ body {
     content: "\276F";
 }
 
-
-#like {
+#film {
     position: fixed;
-    top: 24px;
-    right: 24px;
+    top: 16px;
+    right: 16px;
     width: 64px;
     height: 64px;
     padding: 0;
-    color: rgb(184, 98, 184);
-    background-color: white;
     border: 0;
-    border-radius: 32px;
-    font-family: sans-serif;
-    font-size: 1.25em;
-    font-weight: bold;
-    text-decoration: underline;
-    transition: transform 0.25s;
+    background-color: blueviolet;
+    border-radius: 4px;
+    opacity: 0.8;
+    transition: transform 0.25s, opacity 0.25s;
 }
 
-#like:hover {
+#film:hover {
     transform: scale(1.0625);
+    opacity: 1;
 }
 
-#like i {
+#film i {
     display: inline-block;
     width: 100%;
     height: 100%;
-    background-color: rgb(184, 98, 184);
-    mask: url(../assets/heart-fill.svg) 0 0/64px 64px;
-    -webkit-mask: url(../assets/heart-fill.svg) 0 0/64px 64px;
-}
+    background-image: url(../assets/video-film.svg);
+    background-size: 60%;
+    background-repeat: no-repeat;
+    background-position: center;
+}

demos/assets/video-film.svg

@@ -0,0 +1,153 @@
+<?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="svg821"
+   version="1.1"
+   viewBox="0 0 135.46667 135.46667"
+   height="512"
+   width="512">
+  <defs
+     id="defs815" />
+  <metadata
+     id="metadata818">
+    <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
+     transform="translate(-37.266657,-80.766662)"
+     id="layer1">
+    <rect
+       ry="0"
+       y="80.76667"
+       x="37.266659"
+       height="135.46666"
+       width="135.46666"
+       id="rect1366"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.24216199;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers" />
+    <g
+       transform="translate(-1.8119812e-6)"
+       id="g1527">
+      <rect
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.17960839;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers"
+         id="rect1392"
+         width="26.278845"
+         height="135.46666"
+         x="37.266659"
+         y="80.76667" />
+      <rect
+         y="86.058334"
+         x="42.468582"
+         height="124.88333"
+         width="15.875"
+         id="rect1402"
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.13403444;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers" />
+      <rect
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2581988;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers"
+         id="rect1425"
+         width="21.166666"
+         height="5.2916665"
+         x="39.822746"
+         y="177.99614" />
+      <rect
+         y="145.05061"
+         x="39.822746"
+         height="5.2916665"
+         width="21.166666"
+         id="rect1427"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2581988;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers" />
+      <rect
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2581988;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers"
+         id="rect1429"
+         width="21.166666"
+         height="5.2916665"
+         x="39.822746"
+         y="112.1051" />
+    </g>
+    <rect
+       y="80.76667"
+       x="37.266659"
+       height="5.2916665"
+       width="135.46666"
+       id="rect1483"
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.20098378;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers" />
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.20098378;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers"
+       id="rect1485"
+       width="135.46666"
+       height="5.2916665"
+       x="37.266659"
+       y="210.94167" />
+    <g
+       transform="translate(109.18781)"
+       id="g1539">
+      <rect
+         y="80.76667"
+         x="37.266659"
+         height="135.46666"
+         width="26.278845"
+         id="rect1529"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.17960839;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers" />
+      <rect
+         style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.13403444;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers"
+         id="rect1531"
+         width="15.875"
+         height="124.88333"
+         x="42.468582"
+         y="86.058334" />
+      <rect
+         y="177.99614"
+         x="39.822746"
+         height="5.2916665"
+         width="21.166666"
+         id="rect1533"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2581988;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers" />
+      <rect
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2581988;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers"
+         id="rect1535"
+         width="21.166666"
+         height="5.2916665"
+         x="39.822746"
+         y="145.05061" />
+      <rect
+         y="112.1051"
+         x="39.822746"
+         height="5.2916665"
+         width="21.166666"
+         id="rect1537"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2581988;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.9754902;paint-order:stroke fill markers" />
+    </g>
+    <g
+       id="g1959">
+      <path
+         style="opacity:1;fill:#666666;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.95852535;paint-order:stroke fill markers"
+         id="path1853"
+         d="m 127.23097,144.33565 -39.304651,22.69255 0,-45.3851 z"
+         transform="matrix(1.3938894,0,0,1.4491396,-39.661082,-58.016668)" />
+      <g
+         id="g1851"
+         transform="translate(-0.05093633,-2.6458389)">
+        <path
+           style="opacity:1;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.95852535;paint-order:stroke fill markers"
+           id="path1843"
+           d="m 127.23097,144.33565 -39.304651,22.69255 0,-45.3851 z"
+           transform="matrix(1.3938894,0,0,1.4491396,-44.901813,-60.662496)" />
+        <path
+           transform="matrix(0.96750146,0,0,1.0058508,-0.70672005,3.3198909)"
+           d="m 127.23097,144.33565 -39.304651,22.69255 0,-45.3851 z"
+           id="path1847"
+           style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.95852535;paint-order:stroke fill markers" />
+      </g>
+    </g>
+  </g>
+</svg>

demos/basketball/poster.html

@@ -13,15 +13,15 @@
     </head>
     <body data-ar-images="mage.webp">
         <nav>
-            <a id="get" href="https://encantar.dev/download" target="_blank" rel="external">Get encantar.js</a>
-            <a id="like" href="https://encantar.dev/support-my-work" target="_blank"><i></i></a>
+            <a id="get" href="https://encantar.dev">Get encantar.js</a>
+            <a id="film" href="video.html"><i></i></a>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>
-            <a id="video-preview" href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
-            <small>Scan or click!</small>
+            <a href="index.html"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan or click</small>
         </section>
     </body>
 </html>

demos/hello-aframe/poster.html

@@ -12,15 +12,15 @@
     </head>
     <body data-ar-images="mage.webp;cat.webp">
         <nav>
-            <a id="get" href="https://encantar.dev/download" target="_blank" rel="external">Get encantar.js</a>
-            <a id="like" href="https://encantar.dev/support-my-work" target="_blank"><i></i></a>
+            <a id="get" href="https://encantar.dev">Get encantar.js</a>
+            <a id="film" href="video.html"><i></i></a>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>
-            <a id="video-preview" href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
-            <small>Scan or click!</small>
+            <a href="index.html"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan or click</small>
         </section>
     </body>
 </html>

demos/hello-babylon/poster.html

@@ -12,15 +12,15 @@
     </head>
     <body data-ar-images="mage.webp;cat.webp">
         <nav>
-            <a id="get" href="https://encantar.dev/download" target="_blank" rel="external">Get encantar.js</a>
-            <a id="like" href="https://encantar.dev/support-my-work" target="_blank"><i></i></a>
+            <a id="get" href="https://encantar.dev">Get encantar.js</a>
+            <a id="film" href="video.html"><i></i></a>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>
-            <a id="video-preview" href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
-            <small>Scan or click!</small>
+            <a href="index.html"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan or click</small>
         </section>
     </body>
 </html>

demos/hello-three/poster.html

@@ -12,15 +12,15 @@
     </head>
     <body data-ar-images="mage.webp;cat.webp">
         <nav>
-            <a id="get" href="https://encantar.dev/download" target="_blank" rel="external">Get encantar.js</a>
-            <a id="like" href="https://encantar.dev/support-my-work" target="_blank"><i></i></a>
+            <a id="get" href="https://encantar.dev">Get encantar.js</a>
+            <a id="film" href="video.html"><i></i></a>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>
-            <a id="video-preview" href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
-            <small>Scan or click!</small>
+            <a href="index.html"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan or click</small>
         </section>
     </body>
 </html>

demos/hello-webgl/poster.html

@@ -12,15 +12,15 @@
     </head>
     <body data-ar-images="my-reference-image.webp">
         <nav>
-            <a id="get" href="https://encantar.dev/download" target="_blank" rel="external">Get encantar.js</a>
-            <a id="like" href="https://encantar.dev/support-my-work" target="_blank"><i></i></a>
+            <a id="get" href="https://encantar.dev">Get encantar.js</a>
+            <a id="film" href="video.html"><i></i></a>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>
-            <a id="video-preview" href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
-            <small>Scan or click!</small>
+            <a href="index.html"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan or click</small>
         </section>
     </body>
 </html>

demos/hello-world/poster.html

@@ -12,15 +12,15 @@
     </head>
     <body data-ar-images="mage.webp;cat.webp">
         <nav>
-            <a id="get" href="https://encantar.dev/download" target="_blank" rel="external">Get encantar.js</a>
-            <a id="like" href="https://encantar.dev/support-my-work" target="_blank"><i></i></a>
+            <a id="get" href="https://encantar.dev">Get encantar.js</a>
+            <a id="film" href="video.html"><i></i></a>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>
-            <a id="video-preview" href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
-            <small>Scan or click!</small>
+            <a href="index.html"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan or click</small>
         </section>
     </body>
 </html>

demos/pointer-demo/poster.html

@@ -12,15 +12,15 @@
     </head>
     <body data-ar-images="mage.webp">
         <nav>
-            <a id="get" href="https://encantar.dev/download" target="_blank" rel="external">Get encantar.js</a>
-            <a id="like" href="https://encantar.dev/support-my-work" target="_blank"><i></i></a>
+            <a id="get" href="https://encantar.dev">Get encantar.js</a>
+            <a id="film" href="video.html"><i></i></a>
             <a id="prev" href="#"></a>
             <a id="next" href="#"></a>
         </nav>
         <section id="qr-code-area">
             <h4>QR code</h4>
-            <a id="video-preview" href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
-            <small>Scan or click!</small>
+            <a href="index.html"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan or click</small>
         </section>
     </body>
 </html>