Add some text, start with styling, and add minimalistic event handler

This commit is contained in:
heyarne 2020-05-03 11:16:12 +02:00
commit 0eed1b412b
6 changed files with 939 additions and 25 deletions

View file

@ -7,8 +7,6 @@
</head>
<body>
<div id="app"></div>
<!-- <canvas id="result"></canvas>
<video id="capture" playsinline></video> -->
</body>
<script src="js/main.js"></script>
</html>

View file

@ -4,11 +4,50 @@
box-sizing: border-box
}
html,
body {
color: #222
min-height: 100vh;
padding: 0;
margin: 0
}
body {
color: #222;
line-height: 1.2
}
#welcome-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 640px;
max-width: 100%;
padding: 48px;
z-index: 20;
opacity: 1;
transition: opacity .2s ease;
}
#welcome-message.hidden {
pointer-events: none;
opacity: 0;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 640px;
max-width: 100%;
padding: 48px;
text-align: center;
}
canvas#result {
/* needs position: absolute so it's rendered above the video */
position: absolute;
z-index: 10;
}