62 lines
3.0 KiB
HTML
62 lines
3.0 KiB
HTML
<html>
|
|
<head>
|
|
<title>zSeatbelt resource by zfbx</title>
|
|
<style>
|
|
body {
|
|
box-sizing: border-box;
|
|
margin: 20px;
|
|
}
|
|
#indicatorbox {
|
|
width: 46px;
|
|
height: 46px;
|
|
position:absolute;
|
|
left: 50%;
|
|
margin-left: -23px;
|
|
bottom: 10px;
|
|
opacity: 0;
|
|
-webkit-transition: opacity 0.5s ease-out;
|
|
transition: opacity 0.5s ease-out;
|
|
}
|
|
.show {
|
|
opacity: 0.75 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="indicatorbox" class="">
|
|
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="46px" height="46px" viewBox="0 0 170 170" enable-background="new 0 0 170 170" xml:space="preserve">
|
|
<path fill="#ED1C24" d="M50.375,95.625l45.25-47.25c0,0-3.083-2.404-3.375-6c-0.375-4.625,7.752-4.5,7.75-15.625 c-0.002-10.376-7.75-14-14-14c-6.25,0-15.125,5.5-14.75,14c0.518,11.738,8.875,11.25,9.163,16.453 C80.605,46.7,65.75,55.375,63.625,56.625s-4.625,3-5.375,5.75S50.375,95.625,50.375,95.625z"/>
|
|
<path fill="#ED1C24" d="M125.75,21.291l-99.167,102.5l6.333,5.666c0,0,20.833-17.166,51.667-17.332 c30.833-0.168,53.333,17.332,53.333,17.332l5.5-6.832c0,0-25.334-19.576-58.417-19.334c-22.583,0.166-30.917,5-30.917,5l77.333-80.5 L125.75,21.291z"/>
|
|
<path fill="#ED1C24" d="M62.025,103.378c0,0,15.932-4.896,32.19-2.645c18.792,2.605,28.201,7.391,28.201,7.391s0-12.5-8.334-42 c-1.077-3.813-2.308-6.771-4.25-8.833c-1.334-1.416-3.833,0.333-3.833,0.333L62.025,103.378z"/>
|
|
<path fill="#ED1C24" d="M65.625,157.25H80.75c0,0-6.75-9.893-10-16.893s-5.125-14.607-5.125-14.607s8.5-2.625,20.125-2.75 c12.627-0.137,19.625,2.875,19.625,2.875s-1.938,7.395-4.52,13.99c-2.486,6.352-9.48,17.385-9.48,17.385h14 c0,0,6.625-7,10.25-16.813s5.5-18.188,5.5-18.188s-16.625-7.854-35.375-7.604s-35.375,7.729-35.375,7.729s4,13.875,6.375,18.625 S65.625,157.25,65.625,157.25z"/>
|
|
</svg>
|
|
</div>
|
|
<audio id="buckle" src="buckle.ogg" preload></audio>
|
|
<audio id="unbuckle" src="unbuckle.ogg" preload></audio>
|
|
<script>
|
|
const buckle = document.getElementById("buckle");
|
|
const unbuckle = document.getElementById("unbuckle");
|
|
const indicator = document.getElementById("indicatorbox");
|
|
|
|
addEventListener('message', function(event) {
|
|
switch (event.data.type) {
|
|
case "unbuckle":
|
|
unbuckle.volume = event.data.volume;
|
|
unbuckle.play();
|
|
break;
|
|
case "buckle":
|
|
buckle.volume = event.data.volume;
|
|
buckle.play();
|
|
break;
|
|
case "showindicator":
|
|
indicator.classList.add('show');
|
|
break;
|
|
case "hideindicator":
|
|
indicator.classList.remove('show');
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |