Fixed a lot of stuffies :3

Switched to luxon instead of using Mytimenow's script, Fixed site's readability, Removed unsued css stuff

Author: ShinniUwU

css.css

@@ -1,61 +1,46 @@
-@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
-
 body {
-    background-color: #fbdceb;
+    background-color: #f8c5d0;
     color: #333;
-    font-family: 'Raleway', sans-serif;
-    font-size: 16px; /* Increase font size for better readability */
+    font-size: 16px;
+    line-height: 1.6;
 }
+
 h1 {
     margin-top: 20px;
-    font-size: 24px; /* Increase font size for headings */
+    font-size: 24px;
 }
 
 * {
     text-align: center;
-    color: white;
-    font-family: 'Raleway', sans-serif;
+    color: #333;
+    font-family: 'Proxima Nova', Georgia, sans-serif;
     font-weight: bolder;
-    animation: glow 1.5s ease-in-out infinite alternate; /* Add the glow animation to all text elements */
-}
-@keyframes glow {
-    to {
-        text-shadow: none;
-    }
-}
-
-a {
-    visibility: hidden;
-}
-
-div.embed-clock-copyright {
-    background-color: transparent !important;
 }
 
 table {
     display: inline;
+    font-size: 18px; /* Increased font size for better visibility */
 }
 
 #hrt {
     font-size: 18px;
-    margin-top: 20px; /* Add more spacing between sections */
+    margin-top: 20px;
 }
 
-
 #img1 {
     width: 200px;
     height: 200px;
     border-radius: 20px;
-    margin-top: 20px; /* Add more spacing between sections */
+    margin-top: 20px;
 }
+
 img {
-    width: 100%; /* Ensure images are responsive */
+    width: 100%;
     height: auto;
     border-radius: 10px;
     transition: transform 0.3s ease-in-out;
 }
 
-
 img:hover {
     transform: scale(1.1);
 }
@@ -75,37 +60,21 @@ img:hover {
     margin-top: 20px;
 }
 
-#birthdayTime {
+#birthdayTime, #datingTime {
     font-size: 18px;
     margin-top: 10px;
 }
-#datingTime {
-    font-size: 18px;
-    margin-top: 20px; /* Add more spacing between sections */
-}
-
 
 .img {
     margin-top: 20px;
 }
 
-.ttn-thetimenow-clock {
-    color: white !important;
-}
-
-.ttn-thetimenow-clock-date {
-    font-size: 24px !important;
-}
-
-.info {
-    font-size: 16px; /* Maintain consistent font size for information */
-    margin-top: 10px;
-}
 .countdownContainer {
-    margin: 0 auto; /* Center the countdown table */
+    margin: 0 auto;
 }
+
 .countdownContainer td {
-    padding: 5px 10px; /* Add padding to table cells */
+    padding: 5px 10px;
 }
 
 .gif-container {
@@ -130,16 +99,24 @@ img:hover {
     height: 80px;
     margin: 5px;
     border-radius: 10px;
-    animation: slideDown 0.5s ease-in-out forwards; /* Apply slideDown animation */
-  }
-
+    animation: slideDown 0.5s ease-in-out forwards;
+}
 
-/* Add animation for sliding down */
 @keyframes slideDown {
     0% {
-      transform: translateY(-100%);
+        transform: translateY(-100%);
     }
     100% {
-      transform: translateY(0);
+        transform: translateY(0);
     }
-  }
+}
+img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    transition: transform 0.3s ease-in-out;
+}
+
+img:hover {
+    transform: scale(1.1);
+}

index.html

@@ -5,20 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HRT & BDAY COUNTER</title>
     <link rel="stylesheet" href="css.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.4.4/luxon.min.js" integrity="sha512-dUlSLLkxslGILhPdCkALwk4szPhp3xmZIKFtlUD+O9Lslq41Aksmdt5OGqpomDoT4FsCUH70jQU8ezZHI3v1RQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link rel="icon" type="image/x-icon" href="https://i.ibb.co/MVByQfj/27133-removebg-preview.png">
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <link rel="stylesheet" type="text/css" href="fonts/fonts.min.css" />
 </head>
 <body data-aos="fade-up" data-aos-duration="500">
 <header>
-    <h1>The current time and day for me right now:</h1>
-    <div class="thetimenow-embeddable-clock" data-type="clock" data-font-color="#000000" data-border-color="transperent" data-background-color="transperent" data-font-size="60" data-location-type="country" data-location-id="188">
-        <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>
- 
+    <h1>The current time and day for me right now:</h1> 
 </header>
   <main> 
 

js.js

@@ -23,6 +23,52 @@ document.addEventListener('DOMContentLoaded', function () {
     let buttonClicked = false; // Variable to track button click
     let gifCount = 0; // Variable to track the number of displayed GIFs
 
+
+
+    let currentTimestamp = luxon.DateTime.local().setZone("Europe/Sofia").toMillis();
+
+    function updateTime() {
+        // Get the current time in Bulgaria
+        const bulgariaTime = luxon.DateTime.now().setZone("Europe/Sofia");
+    
+        // Format the time in AM/PM format
+        const formattedTime = bulgariaTime.toLocaleString({
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true
+        });
+    
+        // Get the existing time element or create a new one if it doesn't exist
+        let timeElement = document.getElementById('formattedTime');
+        if (!timeElement) {
+            timeElement = document.createElement('div');
+            timeElement.id = 'formattedTime';
+            timeElement.style.marginTop = '20px'; // Add spacing below h1
+            timeElement.style.fontSize = '54px'; // Set the font size
+            // Get the header element
+            const header = document.querySelector('header');
+            // Insert the formatted time element after the h1 within the header
+            header.insertBefore(timeElement, header.children[1]); // Insert after the h1
+        }
+    
+        // Set the text content of the time element to the formatted time
+        timeElement.textContent = `${formattedTime}`;
+    
+        // Schedule the next update
+        scheduleNextUpdate();
+    }
+    
+    function scheduleNextUpdate() {
+        const newTimestamp = luxon.DateTime.local().setZone("Europe/Sofia").toMillis();
+        const timeDifference = newTimestamp - currentTimestamp;
+        currentTimestamp = newTimestamp;
+        setTimeout(updateTime, timeDifference);
+    }
+    
+    // Call updateTime initially to set the time
+    updateTime();
+    
+    
     function countdown() {
         const now = new Date();