v4.2.0

htdocs/assets/_cookies.php

@@ -0,0 +1,39 @@
+<?php
+if (isset($_POST['acceptCookies'])) {
+    setcookie("user_cookies", "accepted", time() + (86400 * 30), "/");
+    exit;
+} elseif (isset($_POST['rejectCookies'])) {
+    setcookie("user_cookies", "rejected", time() + (86400 * 30), "/");
+    exit;
+}
+?>
+<link rel="stylesheet" href="_cookies.css">
+<div id="cookieBanner">
+    <p>By clicking "Accept All Cookies", you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.</p>
+    <button class="cookie-settings">Cookies Settings</button>
+    <button class="reject" onclick="setCookieChoice('reject')">Reject All</button>
+    <button class="accept" onclick="setCookieChoice('accept')">Accept All Cookies</button>
+    <span class="close" onclick="hideBanner()">×</span>
+</div>
+
+<script>
+function setCookieChoice(choice) {
+    fetch("_cookies.php", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: choice === "accept" ? "acceptCookies=true" : "rejectCookies=true"
+    }).then(() => {
+        document.getElementById("cookieBanner").style.display = "none";
+    });
+}
+
+function hideBanner() {
+    document.getElementById("cookieBanner").style.display = "none";
+}
+
+window.onload = function() {
+    if (!document.cookie.includes("user_cookies")) {
+        document.getElementById("cookieBanner").style.display = "flex";
+    }
+};
+</script>

htdocs/assets/_header.php

@@ -6,33 +6,50 @@ if (session_status() === PHP_SESSION_NONE) {
 
 <link rel="stylesheet" href="assets/css/_header.css">
 <header class="header">
-<div class="header-container" style="user-select: none;">
-    <div class="logo">
-        <img src="assets/images/url.png" alt="Xeorl Logo" class="logo-img">
-        <span>Xeorl</span>
-        <span class="version-number">4.1.4</span>
+    <div class="header-container" style="user-select: none;">
+        <div class="logo">
+            <img src="assets/images/url.png" alt="Xeorl Logo" class="logo-img">
+            <span>Xeorl</span>
+            <span class="version-number">4.1.4</span>
+        </div>
+
+        <!-- Burger Menu -->
+        <label class="burger">
+            <input type="checkbox" id="burger-toggle">
+            <span></span>
+            <span></span>
+            <span></span>
+        </label>
+
+        <!-- Sidebar -->
+        <div class="sidebar">
+        <nav>
+            <ul>
+            <li><a href="home.php" class="<?php echo in_array(basename($_SERVER['PHP_SELF']), ['index.php', 'home.php']) ? 'active disabled' : ''; ?>">Home</a></li>
+                <li><a href="monetization.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'monetization.php' ? 'active disabled' : ''; ?>">Monetization</a></li>
+                <?php if (isset($_SESSION['user_id'])): ?> 
+                    <li><a href="account.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'account.php' ? 'active disabled' : ''; ?>">Account</a></li>
+                <?php else: ?> 
+                    <li><a href="login.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'login.php' ? 'active disabled' : ''; ?>">Get-Started</a></li>
+                <?php endif; ?>
+                <li><a href="contact.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'contact.php' ? 'active disabled' : ''; ?>">Contact</a></li>
+            </ul>
+                </nav>
+        </div>
+
+        <!-- Regular Navigation (Hidden on Mobile) -->
+        <nav>
+            <ul>
+                <li><a href="home.php" class="<?php echo in_array(basename($_SERVER['PHP_SELF']), ['index.php', 'home.php']) ? 'active disabled' : ''; ?>">Home</a></li>
+                <li><a href="monetization.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'monetization.php' ? 'active disabled' : ''; ?>">Monetization</a></li>
+                <?php if (isset($_SESSION['user_id'])): ?> 
+                    <li><a href="account.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'account.php' ? 'active disabled' : ''; ?>">Account</a></li>
+                <?php else: ?> 
+                    <li><a href="login.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'login.php' ? 'active disabled' : ''; ?>">Get-Started</a></li>
+                <?php endif; ?>
+                <li><a href="contact.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'contact.php' ? 'active disabled' : ''; ?>">Contact</a></li>
+            </ul>
+        </nav>
     </div>
-    <label class="burger" for="burger">
-      <input type="checkbox" id="burger">
-      <span></span>
-      <span></span>
-      <span></span>
-    </label> <!-- Hamburger Menu -->
-    <nav>
-        <ul>
-            <li><a href="index.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active disabled' : ''; ?>">Home</a></li>
-            <li><a href="monetization.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'monetization.php' ? 'active disabled' : ''; ?>">Monetization</a></li>
-
-            <?php if (isset($_SESSION['user_id'])): ?> 
-                <!-- Show Account if user is logged in -->
-                <li><a href="account.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'account.php' ? 'active disabled' : ''; ?>">Account</a></li>
-            <?php else: ?> 
-                <!-- Show Get-Started if user is not logged in -->
-                <li><a href="login.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'login.php' ? 'active disabled' : ''; ?>">Get-Started</a></li>
-            <?php endif; ?>
-
-            <li><a href="contact.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'contact.php' ? 'active disabled' : ''; ?>">Contact</a></li>
-        </ul>
-    </nav>
-</div>
 </header>
+<script src="assets/js/_header.js"> </script>

htdocs/assets/css/_account.css

@@ -1,12 +1,120 @@
+/* General Styles */
 body {
     font-family: "Montserrat", sans-serif;
     margin: 0;
     padding: 0;
+    display: flex;
+    height: 100vh;
     background-color: #ffffff;
-    color: #333333;
+    color: #111313;
 }
 
-main {
-    padding: 60px 20px;
-    text-align: center;
-}
+/* User Image */
+.user-image {
+    width: 40px;
+    height: 40px;
+    margin-top: -5px;
+    border-radius: 50%;
+    margin-left: 25px;
+    border: 1px solid #ffffff;
+}
+
+/* Sidebar Styles */
+.sidebar {
+    width: 20%;
+    background-color: #ffffff;
+    color: #98E5DD;
+    display: flex;
+    flex-direction: column;
+    border: solid 1px rgb(58, 66, 65);
+    padding: 20px;
+}
+
+/* Sidebar Header (Flexbox) */
+.sidebar .sidebar-header {
+    display: flex;
+    flex-wrap: wrap;  /* Allows wrapping when screen is small */
+    align-items: center; /* Ensures vertical alignment */
+    margin-left: -25px;
+    margin-right: -20px;
+
+    margin-top: 45px;
+}
+
+/* Image & Text Flexbox */
+.sidebar .sidebar-header .user-image {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.user-info {
+    font-size: 14px;
+    margin-bottom: 20px;
+    line-height: 1.4;
+    color: #171c24;
+    
+}
+
+.user-email {
+    color: #677583;
+}
+
+/* Sidebar Links */
+.sidebar a {
+    text-decoration: none;
+    color: #171c24;
+    padding: 15px;
+    display: block;
+    font-size: 16px;
+    transition: background-color 0.3s ease; /* Keep only background-color for transition */
+}
+
+/* Main Content */
+.content {
+    width: 80%;
+    padding: 20px;
+}
+
+.content h2, .content h3 {
+    color: #EEB58F;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+    body {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        padding: 10px;
+    }
+
+    .sidebar .sidebar-header {
+        justify-content: flex-start;
+        text-align: center;
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .sidebar .sidebar-header .user-image {
+        margin-left: 0;
+        margin-right: 10px;
+    }
+
+    .user-info {
+        font-size: 12px;
+        text-align: left;
+    }
+
+    .content {
+        width: 100%;
+        padding: 20px;
+    }
+}

htdocs/assets/css/_cookies.css

@@ -0,0 +1,47 @@
+#cookieBanner {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: white;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: Arial, sans-serif;
+    z-index: 10;
+}
+
+#cookieBanner p {
+    font-size: 14px;
+    color: #333;
+    margin: 0;
+    flex: 1;
+}
+
+button {
+    padding: 10px 15px;
+    border: 1px solid #002147;
+    cursor: pointer;
+    font-size: 14px;
+    border-radius: 4px;
+    margin: 0 5px;
+}
+
+.cookie-settings {
+    background: white;
+    color: #002147;
+}
+
+.reject, .accept {
+    background: #002147;
+    color: white;
+}
+
+.close {
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    margin-left: 10px;
+}

htdocs/assets/css/_header.css

@@ -120,11 +120,12 @@ nav ul li a.disabled {
   .burger span {
     display: block;
     position: absolute;
-    height: 2.3px;
+    height: 2px;
     width: 100%;
-    background: black;
+    background: #000;
     border-radius: 9px;
     opacity: 1;
+    z-index: 2;
     left: 0;
     transform: rotate(0deg);
     transition: .25s ease-in-out;
@@ -164,18 +165,60 @@ nav ul li a.disabled {
     left: 5px;
   }
   
+  .sidebar {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: #ffffff;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    z-index: 1;
+    transition: right 0.3s ease-in-out;
+    padding: 20px;
+}
+
+/* Show sidebar when active */
+.sidebar.active {
+    right: 0;
+}
+
+
+.sidebar ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.sidebar ul li a {
+    text-decoration: none;
+    color: #5e6775;
+    font-size: 18px;
+    font-weight: 500;
+    transition: color 0.3s;
+}
+
+.sidebar ul li a:hover {
+    color: #272B2F;
+}
+
+ 
 /* Adjust position of the hamburger menu */
 @media (max-width: 768px) {
     .burger {
         display: block;
         margin-left: auto;
-        margin-right: 15px; 
+        margin-right: 15px;
     }
 
     nav ul {
         display: none;
     }
-
     .burger input:checked ~ nav ul {
         display: flex;
         flex-direction: column;
@@ -187,6 +230,13 @@ nav ul li a.disabled {
         border-top: 1px solid #F2F2F2;
         padding: 10px 0;
     }
+    .burger input:checked ~ .sidebar {
+        display: block;
+        left: 0;
+    }
+    .sidebar {
+        width: 100%;
+    }
 }
 
 /* Adjust the logo alignment */
@@ -203,11 +253,14 @@ nav ul li a.disabled {
     }
 
 }
-@media (max-width: 450px) {
+@media (max-width: 485px) {
     .burger {
         display: block;
         margin-left: auto;
         margin-right: 25px; 
     }
+    .sidebar {
+        width: 100%;
+    }
 
 }

htdocs/assets/css/_home.css

@@ -232,13 +232,12 @@ main {
 .stat-icon {
     width: 35px; 
     height: 35px;
-    margin-bottom: 15px; 
 }
 
 .stat-item h3 {
     font-size: 16px; 
     color: #677583;
-    margin-bottom: 10px; 
+    margin-bottom: 15px; 
     font-weight: 600;
 }
 

htdocs/assets/css/_unzipper.css

@@ -0,0 +1,141 @@
+body {
+  font-family: "Montserrat", sans-serif;
+  background: #ffffff;
+  margin: 0;
+  padding: 0;
+}
+
+.max-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+  width: 100%;
+}
+
+.container {
+  background: white;
+  padding: 100px;
+  margin-top: 50px;
+  border-radius: 12px;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
+  text-align: center;
+  width: 750px;
+  border-top: 5px solid #652bf6;
+  min-height: 350px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+h2 {
+  font-size: 32px;
+  color: rgb(43, 35, 76);
+  font-weight: 400;
+  margin-bottom: 15px;
+}
+
+.countdown-wrapper {
+  width: 100px;
+  height: 100px;
+  border: 2px solid rgb(70, 41, 204);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px auto;
+  position: relative;
+}
+
+.countdown {
+  font-size: 16px;
+  font-weight: 400;
+  margin-top: -px;
+  color: rgb(70, 41, 204);
+  text-align: center;
+}
+
+.countdown span {
+  font-size: 25px;
+  font-weight: 400;
+  color: rgb(70, 41, 204);
+  text-align: center;
+}
+
+button {
+  padding: 17px 40px;
+  border-radius: 50px;
+  cursor: pointer;
+  border: 0;
+  background-color: rgb(103, 204, 129);
+  box-shadow: rgba(68, 68, 68, 0.572) 3px 2px 10px 0px;
+  color: #ffffff;
+  font-weight: 600;
+  text-transform: uppercase;
+  cursor: not-allowed;
+  font-size: 15px;
+  transition: all 0.5s ease;
+}
+
+button:active {
+  box-shadow: rgba(68, 68, 68, 0.572) 3px 2px 10px 0px;
+  cursor: pointer;
+}
+@media (max-width: 1170px){
+
+  .container{
+    width: 650px;
+  }
+}
+@media (max-width: 1024px){
+  .container{
+    width: 500px;
+  }
+}
+@media (max-width: 768px) {
+  .container {
+    padding: 40px 20px;
+    width: 85%;
+  }
+
+  h2 {
+    font-size: 26px;
+  }
+
+  .countdown-wrapper {
+    width: 90px;
+    height: 90px;
+  }
+
+  .countdown span {
+    font-size: 20px;
+  }
+
+  button {
+    padding: 15px 35px;
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    padding: 30px 15px;
+    width: 90%;
+  }
+
+  h2 {
+    font-size: 22px;
+  }
+
+ 
+  .countdown span {
+    font-size: 18px;
+  }
+
+  button {
+    padding: 12px 25px;
+    font-size: 14px;
+  }
+}

htdocs/assets/js/_header.js

@@ -0,0 +1,28 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const burgerToggle = document.getElementById("burger-toggle");
+    const sidebar = document.querySelector(".sidebar");
+
+    // Ensure sidebar is hidden initially
+    sidebar.style.display = "none";
+
+    burgerToggle.addEventListener("click", function () {
+        if (sidebar.style.display === "none" || sidebar.style.display === "") {
+            sidebar.style.display = "flex";
+            sidebar.classList.add("active");
+        } else {
+            sidebar.style.display = "none";
+            sidebar.classList.remove("active");
+        }
+    });
+});
+
+window.addEventListener('scroll', function () {
+    const header = document.querySelector('.header'); // Get the header element
+  
+    // Check if the page has been scrolled
+    if (window.scrollY > 0) {
+        header.classList.add('scrolled'); // Add the "scrolled" class
+    } else {
+        header.classList.remove('scrolled'); // Remove the "scrolled" class
+    }
+});

htdocs/assets/js/_home.js

@@ -1,14 +1,3 @@
-window.addEventListener('scroll', function () {
-    const header = document.querySelector('.header'); // Get the header element
-  
-    // Check if the page has been scrolled
-    if (window.scrollY > 0) {
-        header.classList.add('scrolled'); // Add the "scrolled" class
-    } else {
-        header.classList.remove('scrolled'); // Remove the "scrolled" class
-    }
-});
-
 const form = document.querySelector(".shorten-form"),
     urlInput = document.querySelector("#url-input"),
     shortenBtn = document.querySelector("#shorten-btn"),
@@ -47,7 +36,7 @@ shortenBtn.onclick = () => {
             let data = xhr.response;
             if (data.length <= 5) {
                 //This is your domain name 
-                const domain = "xeorl.buzz/";
+                const domain = "http://localhost/Php-Projects/xeorl/htdocs/";
                 let shortenURL = domain + data;
 
                 // Remove the default message if it exists

htdocs/assets/js/_unzipper.js

@@ -0,0 +1,62 @@
+// Countdown logic
+let countdown = 10;
+let countdownInterval;
+const timerElement = document.getElementById("timer");
+const button = document.getElementById("getLinkBtn");
+
+function updateCountdown() {
+    if (countdown > 0) {
+        countdown--;
+        timerElement.textContent = countdown;
+    }
+    if (countdown <= 0) {
+        button.disabled = false; // Enable the button when countdown ends
+        button.classList.add("active"); // Optional, if you use active class for style
+        button.style.cursor = "pointer"; // Enable cursor
+        setTimeout(function () {
+            button.textContent = "Getting links..."; // Change text before enabling
+        }, 300); // 0.3 seconds delay
+        setTimeout(function () {
+            button.textContent = "Get link"; // Final button text
+        }, 600); // After another 0.3 seconds
+        clearInterval(countdownInterval);
+    }
+}
+
+function startCountdown() {
+    countdownInterval = setInterval(updateCountdown, 1000);
+}
+
+function stopCountdown() {
+    clearInterval(countdownInterval);
+}
+
+function init() {
+    // Initialize countdown value and button state
+    countdown = 10;
+    timerElement.textContent = countdown;
+    button.disabled = true;
+    button.classList.remove("active");
+    button.style.cursor = "not-allowed";
+    button.textContent = "PLEASE WAIT...";
+
+    startCountdown();
+}
+
+document.addEventListener("visibilitychange", () => {
+    if (document.hidden) {
+        stopCountdown();
+    } else {
+        startCountdown();
+    }
+});
+
+window.addEventListener("beforeunload", () => {
+    init(); // Reset state when the page is about to be unloaded
+});
+
+init(); // Call init to initialize the countdown when the page loads
+
+function redirect() {
+    window.location.href = redirectUrl; // Redirect to the full URL
+}