pipboy
Version:
Experimental pipboy desktop and cli tool for Fallout 4
57 lines (56 loc) • 1.21 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>PipBoy</title>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#map {
background: #000;
}
#arrow {
position: fixed;
display: block;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 36px solid #000;
margin-left: -15px;
margin-top: -18px;
animation: fade 1s ease-in alternate infinite;
}
@keyframes fade {
from {
opacity: .5;
}
to {
opacity: 1;
}
}
#arrow .inner {
position: absolute;
top: 4px;
left: -12px;
display: block;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 30px solid #4aff4a;
}
</style>
</head>
<body>
<canvas id="map"></canvas>
<div id="arrow">
<div class="inner"></div>
</div>
<script src="src/index.js"></script>
</body>
</html>