diff --git a/model-viewer/index.html b/model-viewer/index.html
index 2904a0a66801a589a08a627a9250446ae98cdca5..9e46a2f056cfa0e1be4c0fe4494f90df316c8c9c 100644
--- a/model-viewer/index.html
+++ b/model-viewer/index.html
@@ -6,46 +6,67 @@
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;
}
- .host {
+
+ .viewer-container {
height: 100svh;
width: 100svw;
+ position: relative;
}
- .button {
+
+ .ar-button {
display: flex;
justify-content: center;
align-items: center;
- padding: 9px 12px;
- height: 40px;
- width: 172px;
+ 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 {
- line-height: 22px;
- font-size: 17px;
+ 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="host">
+ <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="deer/scene.gltf"
+ src="https://modelviewer.dev/shared-assets/models/RobotExpressive.glb"
ar
shadow-intensity="1"
camera-controls
- touch-action="none"
+ autoplay
>
- <div class="button" slot="ar-button">
- <span class="label">Go to AR</span>
+ <div class="ar-button" slot="ar-button">
+ <span class="label">Démarrer l'expérience !</span>
</div>
</model-viewer>
</div>