Skip to content
Snippets Groups Projects
Select Git revision
2 results Searching

index.html

Blame
  • 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&apos;exposition "Hoelympique" !</div>
          <div>Pour démarrer, cliquez sur le bouton "Démarrer l&apos;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>