Select Git revision
index.html 1.66 KiB
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"
></script>
<style>
body {
font-family: system-ui;
}
model-viewer {
height: inherit;
width: inherit;
}
.viewer-container {
height: 100svh;
width: 100svw;
position: relative;
}
.ar-button {
display: flex;
justify-content: center;
align-items: center;
padding: 30px 50px;
border: none;
background: #ff2849;
border-radius: 20px;
cursor: pointer;
position: absolute;
width: 600px;
bottom: 50px;
left: calc((100svw / 2) - (660px / 2));
}
.label {
font-size: 50px;
font-weight: bold;
color: #fff;
font-family: sans-serif;
letter-spacing: 1px;
}
.description {
position: absolute;
top: 50px;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="description">
<div>Bienvenue à l'exposition "Hoelympique" !</div>
<div>Pour démarrer, cliquez sur le bouton "Démarrer l'expérience !"</div>
</div>
<div class="viewer-container">
<model-viewer
src="https://modelviewer.dev/shared-assets/models/RobotExpressive.glb"
ar
shadow-intensity="1"
camera-controls
autoplay
>
<div class="ar-button" slot="ar-button">
<span class="label">Démarrer l'expérience !</span>
</div>