Compare commits
No commits in common. "main" and "v0.0.4" have entirely different histories.
36
index.html
36
index.html
@ -14,14 +14,12 @@
|
|||||||
--background: #fff;
|
--background: #fff;
|
||||||
--border-light: #999;
|
--border-light: #999;
|
||||||
--border-dark: #000;
|
--border-dark: #000;
|
||||||
--overlay-background: #ffffff47;
|
|
||||||
}
|
}
|
||||||
.dark {
|
.dark {
|
||||||
--foreground: #fff;
|
--foreground: #fff;
|
||||||
--background: #000;
|
--background: #000;
|
||||||
--border-dark: #999;
|
--border-dark: #999;
|
||||||
--border-light: #fff;
|
--border-light: #fff;
|
||||||
--overlay-background: #00000066;
|
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
@ -99,21 +97,6 @@
|
|||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
#pauseIndicator {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: 1;
|
|
||||||
font-size: xx-large;
|
|
||||||
font-size: xxx-large;
|
|
||||||
background-color: var(--overlay-background);
|
|
||||||
height: 1.5em;
|
|
||||||
width: 1.5em;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: baseline;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
@ -166,7 +149,6 @@
|
|||||||
leftElement.classList.add('left');
|
leftElement.classList.add('left');
|
||||||
rightElement.classList.remove('right');
|
rightElement.classList.remove('right');
|
||||||
window.isPaused = false;
|
window.isPaused = false;
|
||||||
document.getElementById('pauseIndicator').classList.add('hidden');
|
|
||||||
} else {
|
} else {
|
||||||
const { left: leftElement, right: rightElement} = getImagePositions();
|
const { left: leftElement, right: rightElement} = getImagePositions();
|
||||||
leftElement.style.transitionDelay = '0s';
|
leftElement.style.transitionDelay = '0s';
|
||||||
@ -174,13 +156,6 @@
|
|||||||
leftElement.classList.remove('left');
|
leftElement.classList.remove('left');
|
||||||
rightElement.classList.add('right');
|
rightElement.classList.add('right');
|
||||||
window.isPaused = true;
|
window.isPaused = true;
|
||||||
|
|
||||||
const pauseIndicator = document.getElementById('pauseIndicator');
|
|
||||||
const imageRect = getImagePositions().left.getBoundingClientRect();
|
|
||||||
pauseIndicator.style.top = imageRect.top + 'px';
|
|
||||||
pauseIndicator.style.left = imageRect.left + 'px';
|
|
||||||
|
|
||||||
document.getElementById('pauseIndicator').classList.remove('hidden');
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'ArrowRight':
|
case 'ArrowRight':
|
||||||
@ -255,7 +230,6 @@
|
|||||||
|
|
||||||
document.getElementById('first').style.transitionDelay = window.showTimeSeconds + 's';
|
document.getElementById('first').style.transitionDelay = window.showTimeSeconds + 's';
|
||||||
document.getElementById('second').style.transitionDelay = window.showTimeSeconds + 's';
|
document.getElementById('second').style.transitionDelay = window.showTimeSeconds + 's';
|
||||||
//document.getElementById('pauseIndicator').style.top = '';
|
|
||||||
|
|
||||||
if (controls.elements['submit'].value === 'save') {
|
if (controls.elements['submit'].value === 'save') {
|
||||||
return;
|
return;
|
||||||
@ -283,11 +257,8 @@
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
remainingTransitions = document.querySelectorAll('img').length;
|
remainingTransitions = document.querySelectorAll('img').length;
|
||||||
let leftElement = document.querySelector('.left');
|
const leftElement = document.querySelector('.left');
|
||||||
let rightElement = document.querySelector('img:not([class~=left])');
|
const rightElement = document.querySelector('img:not([class~=left])');
|
||||||
if (leftElement === null) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
leftElement.classList.add('instant');
|
leftElement.classList.add('instant');
|
||||||
leftElement.style.transitionDelay = '0s';
|
leftElement.style.transitionDelay = '0s';
|
||||||
// Wait until 'instant' and transitionDelay are applied
|
// Wait until 'instant' and transitionDelay are applied
|
||||||
@ -354,7 +325,7 @@
|
|||||||
const second = document.getElementById('second');
|
const second = document.getElementById('second');
|
||||||
|
|
||||||
let leftElement, rightElement;
|
let leftElement, rightElement;
|
||||||
if (first.className.includes('left') || second.className.includes('right')) {
|
if (first.className.includes('left')) {
|
||||||
leftElement = first;
|
leftElement = first;
|
||||||
rightElement = second;
|
rightElement = second;
|
||||||
} else {
|
} else {
|
||||||
@ -411,7 +382,6 @@
|
|||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="pauseIndicator" class="hidden">⏸</div>
|
|
||||||
<form id="controls">
|
<form id="controls">
|
||||||
<h3 id="headline">Zeige Album: </h3>
|
<h3 id="headline">Zeige Album: </h3>
|
||||||
<label for="random">Zufällig</label>
|
<label for="random">Zufällig</label>
|
||||||
|
Loading…
Reference in New Issue
Block a user