You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
![]()
3 months ago
|
//cards
|
||
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
const topCard = document.getElementById('topCard');
|
||
|
const messageDiv = document.getElementById('message-div');
|
||
|
const texts = [
|
||
|
document.getElementById('text1'),
|
||
|
document.getElementById('text2'),
|
||
|
document.getElementById('text3'),
|
||
|
document.getElementById('text4'),
|
||
|
document.getElementById('text5')
|
||
|
];
|
||
|
|
||
|
let currentTextIndex = 0;
|
||
|
|
||
|
// Initialize by showing the first text in the top card
|
||
|
topCard.innerHTML = texts[currentTextIndex].innerHTML;
|
||
|
|
||
|
// Show the next text behind the top card
|
||
|
function updateBehindCard() {
|
||
|
texts.forEach((text, index) => {
|
||
|
text.style.display = (index === currentTextIndex + 1) ? 'block' : 'none';
|
||
|
});
|
||
|
}
|
||
|
updateBehindCard();
|
||
|
|
||
|
topCard.addEventListener('click', () => {
|
||
|
// Hide the current text
|
||
|
texts[currentTextIndex].style.display = 'none';
|
||
|
|
||
|
// Update the index
|
||
|
currentTextIndex++;
|
||
|
|
||
|
if (currentTextIndex >= texts.length) {
|
||
|
// Hide the top card after the last text
|
||
|
topCard.style.display = 'none';
|
||
|
// Show the message div
|
||
|
messageDiv.style.display = 'block';
|
||
|
} else {
|
||
|
// Show the new text in the top card
|
||
|
topCard.innerHTML = texts[currentTextIndex].innerHTML;
|
||
|
|
||
|
// Update the card behind the top card
|
||
|
updateBehindCard();
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
|
||
|
function openLetter() {
|
||
|
$('#letterContents').html(`
|
||
|
<p id="letterContents">
|
||
|
Hi. I made you this website.
|
||
|
<br><br>
|
||
|
Hermit Fantasy is a short story about a bot who wants to be a hermit. Inspired by an email response from a survey I conducted about receiving emotional support on the Internet, this story explores the contradiction of being online while wanting to disconnect. As an act it's a series of letters, click by click.
|
||
|
<br><br>
|
||
|
ada
|
||
|
</p>
|
||
|
`);
|
||
|
$('.letterBox').toggle();
|
||
|
}
|
||
|
|
||
|
function closeLetter() {
|
||
|
$('.letterBox').hide();
|
||
|
}
|
||
|
|
||
|
//nav
|
||
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||
|
const about = document.getElementById('about');
|
||
|
|
||
|
about.addEventListener('mouseover', (event) => {
|
||
![]()
3 months ago
|
event.target.src = '../photos/open-crow.png';
|
||
![]()
3 months ago
|
});ß
|
||
![]()
3 months ago
|
|
||
|
about.addEventListener('mouseout', (event) => {
|
||
![]()
3 months ago
|
event.target.src = '../photos/closed-crow.png';
|
||
![]()
3 months ago
|
});
|
||
|
|
||
|
const home = document.getElementById('home');
|
||
|
|
||
|
home.addEventListener('mouseover', (event) => {
|
||
![]()
3 months ago
|
event.target.src = '../photos/home-open.png';
|
||
![]()
3 months ago
|
});
|
||
|
|
||
|
home.addEventListener('mouseout', (event) => {
|
||
![]()
3 months ago
|
event.target.src = '../photos/home-closed.png';
|
||
![]()
3 months ago
|
});
|
||
|
});
|
||
|
|
||
|
//audio
|
||
|
document.addEventListener("DOMContentLoaded", function() {
|
||
|
const audioElement = document.getElementById('background-audio');
|
||
|
const muteButton = document.getElementById('mute-btn');
|
||
|
|
||
|
// Set initial mute state from localStorage
|
||
|
let isMuted = localStorage.getItem('mute') === 'true';
|
||
|
audioElement.muted = isMuted;
|
||
|
muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";
|
||
|
|
||
|
// Start audio playback on user interaction
|
||
|
const startAudio = () => {
|
||
|
audioElement.play();
|
||
|
document.removeEventListener('click', startAudio);
|
||
|
};
|
||
|
|
||
|
document.addEventListener('click', startAudio);
|
||
|
|
||
|
muteButton.addEventListener('click', function() {
|
||
|
isMuted = !isMuted;
|
||
|
audioElement.muted = isMuted;
|
||
|
localStorage.setItem('mute', isMuted);
|
||
|
muteButton.textContent = isMuted ? "SOUND ON" : "MUTE";
|
||
|
});
|
||
|
});
|