make tap zones vaguely discoverable
This commit is contained in:
parent
323ce158f9
commit
79b946889d
|
@ -5,23 +5,36 @@ html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-left, #button-right {
|
.tap {
|
||||||
|
background: #000000;
|
||||||
|
opacity: 0.8;
|
||||||
|
position: fixed;
|
||||||
|
animation: 2s linear forwards fade;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
to { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#tap-left, #tap-right {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
width: 30vw;
|
width: 30vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-left {
|
#tap-left {
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-right {
|
#tap-right {
|
||||||
right: 0px;
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-back {
|
#tap-back {
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 30vw;
|
left: 30vw;
|
||||||
width: 40vw;
|
width: 40vw;
|
||||||
|
|
|
@ -101,10 +101,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
window.location.href = "../";
|
window.location.href = "../";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function hideTapZones() {
|
||||||
|
for (const el of document.getElementsByClassName('tap')) {
|
||||||
|
el.style.opacity = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
changePage(currentPage);
|
changePage(currentPage);
|
||||||
changeDuration(duration, paused);
|
changeDuration(duration, paused);
|
||||||
|
|
||||||
document.onkeydown = event =>{
|
document.onkeydown = event => {
|
||||||
|
hideTapZones();
|
||||||
|
|
||||||
switch (event.keyCode) {
|
switch (event.keyCode) {
|
||||||
case 32: //space
|
case 32: //space
|
||||||
changeDuration(duration, !paused);
|
changeDuration(duration, !paused);
|
||||||
|
@ -139,7 +147,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
document.getElementById("button-left").onclick = left;
|
document.onclick = hideTapZones;
|
||||||
document.getElementById("button-right").onclick = right;
|
document.getElementById("tap-left").onclick = left;
|
||||||
document.getElementById("button-back").onclick = exitToWork;
|
document.getElementById("tap-right").onclick = right;
|
||||||
|
document.getElementById("tap-back").onclick = exitToWork;
|
||||||
});
|
});
|
||||||
|
|
|
@ -17,9 +17,21 @@
|
||||||
<div id="page-num"></div>
|
<div id="page-num"></div>
|
||||||
<div id="duration"></div>
|
<div id="duration"></div>
|
||||||
<div id="controls">
|
<div id="controls">
|
||||||
<div id="button-left"></div>
|
<div id="tap-left" class="tap">
|
||||||
<div id="button-right"></div>
|
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
|
||||||
<div id="button-back"></div>
|
<path d='M 60 -60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div id="tap-right" class="tap">
|
||||||
|
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
|
||||||
|
<path d='M 0 -60 L 60 0 L 0 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div id="tap-back" class="tap">
|
||||||
|
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='80' viewBox='-70 -10 140 80'>
|
||||||
|
<path d='M -60 60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="image-container"></div>
|
<div id="image-container"></div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue