From 6686921067042600b16082baa46cde8253f31a4d Mon Sep 17 00:00:00 2001
From: Shinni <69644134+ShinniUwU@users.noreply.github.com>
Date: Fri, 1 Mar 2024 17:20:15 +0200
Subject: [PATCH] Add files via upload

---
 css.css    |  29 ++++++++++++
 index.html |  58 +++++++++++------------
 js.js      | 133 ++++++++++++++++++++++++++++++++++++++++-------------
 3 files changed, 160 insertions(+), 60 deletions(-)

diff --git a/css.css b/css.css
index 71d3db5..ac22a19 100644
--- a/css.css
+++ b/css.css
@@ -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 {
@@ -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 */
+}
diff --git a/index.html b/index.html
index 0d6fc0e..ff95922 100644
--- a/index.html
+++ b/index.html
@@ -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">
@@ -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();
diff --git a/js.js b/js.js
index f835fff..2689baa 100644
--- a/js.js
+++ b/js.js
@@ -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
@@ -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();
@@ -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);
         }
     }
@@ -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
@@ -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
+    });
+
+
+    
 });