diff --git a/mind-ar/background.png b/mind-ar/background.png new file mode 100644 index 0000000000000000000000000000000000000000..c85fbcd1a0a7ceeafef55186bdc2d6c6d03a6e34 Binary files /dev/null and b/mind-ar/background.png differ diff --git a/mind-ar/index.html b/mind-ar/index.html index d8f1e5e02f53501cae973ed00745a7a76f877ebe..1ef86b1ba6f74101b4696d61168ad431885ba126 100644 --- a/mind-ar/index.html +++ b/mind-ar/index.html @@ -6,40 +6,56 @@ <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image-aframe.prod.js"></script> <style> body { - font-family: system-ui; + font-family: sans-serif; margin: 0; height: 100svh; width: 100svw; } .ar-button { - display: flex; - justify-content: center; - align-items: center; - padding: 30px 20px; + padding: 30px 30px; border: none; - background: #ff2849; + background: #ffffff9e; border-radius: 20px; cursor: pointer; - position: absolute; - width: 250px; - bottom: 50px; - left: calc((100svw / 2) - (290px / 2)); + text-shadow: -1px 2px 0 #6f2bb1; } .label { - font-size: 20px; + font-size: 1.8rem; font-weight: bold; color: #fff; - font-family: sans-serif; - letter-spacing: 1px; + letter-spacing: 2px; } - .description { - position: absolute; - top: 50px; - font-size: 25px; + .container { + display: flex; + flex-direction: column; + align-items: center; text-align: center; + justify-content: space-evenly; + color: white; + } + + .titre { + display: flex; + text-align: center; + flex-direction: column; + font-size: 10vw; + font-weight: 700; + } + + .description { + display: flex; + font-size: 1.9rem; + margin-inline: 20px; + line-height: 1.3; + } + + .background { + background-image: url(./background.png); + background-size: cover; + height: 100%; } </style> </head> @@ -63,19 +79,22 @@ rotation="0 0 0 " position="-3 -3 0.1" scale="0.005 0.005 0.005" - src="#avatarModel"> + src="#avatarModel" + > <!--animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate" --> </a-gltf-model> </a-entity> </a-scene> </template> - <div class="container" id="welcome-page"> - <div class="description"> - <div>Bienvenue à l'exposition "Hoelympique" !</div> - <div>Pour démarrer, cliquez sur le bouton "Démarrer l'expérience !"</div> + <div class="container background" id="welcome-page"> + <div class="titre"> + <div>MOLDED/MOLTED (2023)<br />Hoël DURET</div> </div> + <p class="description"> + Viser une sculpture MOLDED/MOLTED avec la camera de votre téléphone + </p> <div class="ar-button"> - <span class="label">Démarrer l'expérience !</span> + <span class="label">Accéder à l'AR</span> </div> </div> </body> @@ -84,9 +103,11 @@ const button = document.querySelector(".ar-button"); button.addEventListener("click", () => { const template = document.getElementById("ar-scene-template"); - document.querySelector("body").appendChild(template.content.cloneNode(true)); + document + .querySelector("body") + .appendChild(template.content.cloneNode(true)); document.querySelector("#welcome-page").remove(); - }) + }); </script> </footer> </html>