index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Island prototype</title>
    <style>
            #blocker {
              position: absolute;
              width: 100%;
              height: 100%;
              background-color: rgba(138, 148, 182, 0.5);
            }

            #instructions {
              width: 100%;
              height: 100%;

              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              text-align: center;
              font-size: 14px;
              cursor: pointer;
            }
		</style>
    <script src = "https://code.jquery.com/jquery-3.1.1.min.js"></script> 

  </head>
  <body>
    <img scr='node_modules/images/waternormals.jpg' id="img-material" style="display:none;">
    <img scr='node_modules/images/lensflare0.jpg' id="img-material-1" style="display:none;">
    <img scr='node_modules/images/lensflare1.jpg' id="img-material-2" style="display:none;">
    
		<div id="blocker">
			<div id="instructions">
				<p style="font-size:48px">
					Click to play
				</p>
				<p>
					Move: WASD<br/>
					Look: MOUSE
				</p>
			</div>
		</div>
    
    
    <script id="mainfile" type="module" src="main.js">
     
    </script>
    <script>
      
    </script>
  </body>


</html>