Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
ShinniUwU authored Mar 1, 2024
1 parent 6ec28bd commit 6686921
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 60 deletions.
29 changes: 29 additions & 0 deletions css.css
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,28 @@ img:hover {
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px); /* Move the chat box slightly downward */
}
to {
opacity: 1;
transform: translateY(0); /* Move the chat box back to its original position */
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0); /* Start from the original position */
}
to {
opacity: 0;
transform: translateY(20px); /* Move slightly downward */
}
}

#closeChat {
Expand Down Expand Up @@ -156,3 +178,10 @@ img:hover {
opacity: 0;
}
}



#datingTime {
font-size: 24px; /* Adjust the font size as needed */
margin-bottom: 10px; /* Add margin to separate it from the "Time on HRT" section */
}
58 changes: 29 additions & 29 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ <h1>The current time and day for me right now:</h1>
<a href="https://www.thetimenow.com/bulgaria" rel="nofollow" target="_blank">© The Time Now</a>
</div>
<script type="text/javascript" src="https://www.thetimenow.com/ttn-embed.min.js"></script>


</div>
<div id="countdown">
<table class="countdownContainer">
<tr class="info">
Expand All @@ -40,46 +41,45 @@ <h1>The current time and day for me right now:</h1>

<div id="birthdayTime"></div>

<div id="hrt"></div>
<div id="datingTime" class="info"></div>

<div id="hrt" class="info"></div>

<div id="antiAndrogen" class="info"></div>

<div id="switchedTime"></div>

<div class="img">
<!-- Change the src attribute to a placeholder for now -->
<img id="img1" src="">
<div id="antiAndrogenSwitchedTime"></div>

<!-- Add an array of GIF URLs -->
<script>
const gifs = [
"https://media.giphy.com/avatars/40hara/Yoz2OSXiiBS9.gif",
"https://media.tenor.com/aZbJeTIckT8AAAAC/catgirl-isekai-mao.gif",
"https://media.tenor.com/e4z1BEWHiPMAAAAC/guh.gif",
"https://media.tenor.com/EbNeN8Sf8QwAAAAM/umaru-hyper.gif",
"https://media.tenor.com/z88st-CKXoUAAAAM/chika-yeah.gif",
"https://media.tenor.com/myCsjxxbtXAAAAAM/anime-happy.gif",
"https://media.tenor.com/g8rtlSwFcdEAAAAM/slow-loop-koharu-minagi.gif",
"https://media.tenor.com/u6yoDKoczXEAAAAM/adachi-anime-happy.gif",
"https://media.tenor.com/5AXa89n7PgwAAAAM/honoka-kousaka-arms-up.gif"
];
<img id="img1" src="">

// Get a random index to select a random GIF
const randomIndex = Math.floor(Math.random() * gifs.length);
<!-- Add an array of GIF URLs -->
<script>
const gifs = [
"https://media.giphy.com/avatars/40hara/Yoz2OSXiiBS9.gif",
"https://media.tenor.com/aZbJeTIckT8AAAAC/catgirl-isekai-mao.gif",
"https://media.tenor.com/e4z1BEWHiPMAAAAC/guh.gif",
"https://media.tenor.com/EbNeN8Sf8QwAAAAM/umaru-hyper.gif",
"https://media.tenor.com/z88st-CKXoUAAAAM/chika-yeah.gif",
"https://media.tenor.com/myCsjxxbtXAAAAAM/anime-happy.gif",
"https://media.tenor.com/g8rtlSwFcdEAAAAM/slow-loop-koharu-minagi.gif",
"https://media.tenor.com/u6yoDKoczXEAAAAM/adachi-anime-happy.gif",
"https://media.tenor.com/5AXa89n7PgwAAAAM/honoka-kousaka-arms-up.gif"
];

// Set the source of the img tag to the randomly selected GIF
document.getElementById('img1').src = gifs[randomIndex];
</script>
<audio id="clickSound" src="honk.mp3"></audio>
// Get a random index to select a random GIF
const randomIndex = Math.floor(Math.random() * gifs.length);

</div>
// Set the source of the img tag to the randomly selected GIF
document.getElementById('img1').src = gifs[randomIndex];
</script>
<audio id="clickSound" src="honk.mp3"></audio>

<div id="chatBox">
<div id="chatContent"></div>
<button id="closeChat">Close</button>
</div>
<p></p>
</div>


<p></p>
<script src="js.js"></script>
<script>
AOS.init();
Expand Down
133 changes: 102 additions & 31 deletions js.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,14 @@ document.addEventListener('DOMContentLoaded', function () {
const minutesCountdown = document.querySelector('#minutes');
const secondsCountdown = document.querySelector('#seconds');
const hrtContainer = document.querySelector('#hrt');
const switchedTimeContainer = document.querySelector('#switchedTime');
const antiAndrogenContainer = document.querySelector('#antiAndrogen');
const datingTimeContainer = document.querySelector('#datingTime');
const gifImage = document.getElementById('img1');
const clickSound = document.getElementById('clickSound');
const chatBox = document.getElementById('chatBox');
const chatContent = document.getElementById('chatContent');
const closeChatButton = document.getElementById('closeChat');
const infoIconAntiAndrogen = document.createElement('i');

let buttonClicked = false; // Variable to track button click
let gifCount = 0; // Variable to track the number of displayed GIFs
Expand All @@ -20,9 +25,10 @@ document.addEventListener('DOMContentLoaded', function () {

// Date when HRT started
let hrtStartDate = new Date('10/20/2023'); // Adjust this date accordingly

// Date when switched from finasteride to bicalutamide
let switchedDate = new Date('10/31/2023'); // Adjust this date accordingly
// Date when anti-androgen started
let antiAndrogenStartDate = new Date('10/31/2023'); // Adjust this date accordingly
// Date when you started dating your girlfriend
let datingStartDate = new Date('02/13/2024'); // Date when you started dating your girlfriend

function countdown() {
const now = new Date();
Expand Down Expand Up @@ -57,32 +63,6 @@ document.addEventListener('DOMContentLoaded', function () {
minutesCountdown.textContent = minutes;
secondsCountdown.textContent = seconds;

// Additional countdown for the time since switched
const switchedTime = Math.floor((currentTime - switchedDate) / (1000 * 60 * 60 * 24));
const switchedTimeText = `Time on anti-androgen + hrt: ${switchedTime} day${switchedTime === 1 ? '' : 's'}`;
switchedTimeContainer.textContent = switchedTimeText;

// Add the information icon next to the "Time until switch" text
const infoIcon = document.createElement('i');
infoIcon.classList.add('fas', 'fa-info-circle');
infoIcon.style.marginLeft = '5px'; // Adjust the margin as needed
switchedTimeContainer.appendChild(infoIcon);

// Make the information icon clickable
infoIcon.addEventListener('click', function () {
const chatBox = document.getElementById('chatBox');
const chatContent = document.getElementById('chatContent');

chatContent.innerHTML = `Time since I switched from finasteride to an actual anti-androgen`;

chatBox.style.display = 'block';

const closeChatButton = document.getElementById('closeChat');
closeChatButton.addEventListener('click', function () {
chatBox.style.display = 'none';
});
});

setTimeout(countdown, 1000);
}
}
Expand All @@ -92,11 +72,43 @@ document.addEventListener('DOMContentLoaded', function () {
// Calculate days on HRT
function calculateDaysOnHRT() {
const daysOnHRT = Math.floor((currentTime - hrtStartDate) / (1000 * 60 * 60 * 24));
hrtContainer.textContent = `On HRT for ${daysOnHRT} day${daysOnHRT === 1 ? '' : 's (no anti-androgen)'}`;
let monthsOnHRT = Math.floor(daysOnHRT / 30); // Assuming each month has 30 days
const remainingDays = daysOnHRT % 30;

// If more than 30 days, display in months and days
if (monthsOnHRT > 0) {
hrtContainer.textContent = `On HRT for ${monthsOnHRT} month${monthsOnHRT === 1 ? '' : 's'}, ${remainingDays} day${remainingDays === 1 ? '' : 's'}`;
} else {
hrtContainer.textContent = `On HRT for ${daysOnHRT} day${daysOnHRT === 1 ? '' : 's'}`;
}
}

calculateDaysOnHRT();

// Calculate days on anti-androgen
function calculateDaysOnAntiAndrogen() {
const daysOnAntiAndrogen = Math.floor((currentTime - antiAndrogenStartDate) / (1000 * 60 * 60 * 24));
let monthsOnAntiAndrogen = Math.floor(daysOnAntiAndrogen / 30); // Assuming each month has 30 days
const remainingDays = daysOnAntiAndrogen % 30;

// If more than 30 days, display in months and days
if (monthsOnAntiAndrogen > 0) {
antiAndrogenContainer.textContent = `On anti-androgen for ${monthsOnAntiAndrogen} month${monthsOnAntiAndrogen === 1 ? '' : 's'}, ${remainingDays} day${remainingDays === 1 ? '' : 's'}`;
} else {
antiAndrogenContainer.textContent = `On anti-androgen for ${daysOnAntiAndrogen} day${daysOnAntiAndrogen === 1 ? '' : 's'}`;
}
}

calculateDaysOnAntiAndrogen();

// Calculate days dating
function calculateDaysDating() {
const daysDating = Math.floor((currentTime - datingStartDate) / (1000 * 60 * 60 * 24));
datingTimeContainer.textContent = `Days since we started dating: ${daysDating}`;
}

calculateDaysDating();

// Function to create additional GIF containers
function createGifContainers() {
// Check if the maximum number of GIFs has been reached
Expand Down Expand Up @@ -175,4 +187,63 @@ document.addEventListener('DOMContentLoaded', function () {
clickSound.currentTime = 0; // Reset the sound to the beginning
clickSound.play();
});

// Function to toggle display format between months + days and days only
function toggleDisplayFormat(container, startDate) {
const currentTime = new Date();
const timeDiff = currentTime - startDate;
const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
container.textContent = `On ${container.id === 'hrt' ? 'HRT' : 'anti-androgen'} for ${days} day${days === 1 ? '' : 's'}`;
}

// Add click event listener to toggle display format for time on HRT
hrtContainer.addEventListener('click', function () {
toggleDisplayFormat(hrtContainer, hrtStartDate);
});

// Add click event listener to toggle display format for time on anti-androgen
antiAndrogenContainer.addEventListener('click', function () {
toggleDisplayFormat(antiAndrogenContainer, antiAndrogenStartDate);
});

// Add click event listener to toggle display format for days on HRT
daysCountdown.addEventListener('click', function () {
if (hrtContainer.textContent.includes('month')) {
toggleDisplayFormat(hrtContainer, hrtStartDate);
} else {
calculateDaysOnHRT();
}
});

// Add click event listener to toggle display format for days on anti-androgen
daysCountdown.addEventListener('click', function () {
if (antiAndrogenContainer.textContent.includes('month')) {
toggleDisplayFormat(antiAndrogenContainer, antiAndrogenStartDate);
} else {
calculateDaysOnAntiAndrogen();
}
});

// Add the chatbox icon next to the anti-androgen time
infoIconAntiAndrogen.classList.add('fas', 'fa-comment-alt');
infoIconAntiAndrogen.style.marginLeft = '5px'; // Adjust the margin as needed
antiAndrogenContainer.appendChild(infoIconAntiAndrogen);

// Make the information icon clickable
infoIconAntiAndrogen.addEventListener('click', function () {
chatContent.innerHTML = `Time since I switched from finasteride to an actual anti-androgen`;
chatBox.style.display = 'block';
});

//add event listener to close button
closeChatButton.addEventListener('click', function () {
chatBox.style.animation = 'fadeOut 0.5s ease forwards';
setTimeout(() => {
chatBox.style.display = 'none';
chatBox.style.animation = ""; // Hide the chat box after the animation completes
}, 500); // Wait for the animation duration
});



});

0 comments on commit 6686921

Please sign in to comment.