auto-accept/www/index.html

72 lines
1.7 KiB
HTML
Raw Normal View History

2020-12-15 12:39:19 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto accept</title>
<style type='text/css'>
body{
margin:0;
overflow: hidden;
cursor: url('./cursor.svg') 15 15, crosshair;
}
svg{
width:100vw;
height:100vh;
}
2020-12-15 17:59:05 +01:00
svg .rect{
2020-12-15 12:39:19 +01:00
stroke: red;
stroke-width: .2cm;
fill: none;
transition: stroke .5s;
}
2020-12-15 17:59:05 +01:00
svg .rect.locked{
2020-12-15 12:39:19 +01:00
stroke:blue;
opacity: 1;
transition: opacity .5s;
}
2020-12-15 17:59:05 +01:00
svg .rect.hide{
2020-12-15 12:39:19 +01:00
opacity:0;
}
2020-12-17 18:27:44 +01:00
svg .img{
transition: stroke .2s;
}
svg .img.hide{
opacity:0;
}
2020-12-15 12:39:19 +01:00
#crosshair line{
stroke: gray;
stroke-dasharray: 5px 5px;
}
#video_background{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
z-index: -1;
2020-12-15 17:59:05 +01:00
opacity:0;
transition:opacity 10s;
2020-12-15 12:39:19 +01:00
}
2020-12-15 17:59:05 +01:00
2020-12-15 12:39:19 +01:00
</style>
</head>
<body>
<svg id='canvas' viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<g id='crosshair'>
<line id='crosshair_x' x1="0" y1="0" x2="0" y2="100%" />
<line id='crosshair_y' x1="0" y1="0" x2="100%" y2="0" />
</g>
</svg>
<video id="video_background" autoplay loop>
<source src="Blue_Sky_and_Clouds_Timelapse_0892__Videvo.mov">
</video>
2020-12-17 12:09:22 +01:00
<script type="module" src="js/main.js"></script>
2020-12-15 12:39:19 +01:00
</body>
</html>