v3.0.0

htdocs/assets/_footer.php

@@ -3,14 +3,15 @@
     <div class="footer-container">
         <p>
             <img src="assets/images/url.svg" class="footer-img">
-            <span style="font-size: 12px;color:#84819E;font-weight: 500; margin-left:-8px; margin-top: 5px; display: inline-block;">Xeorl</span> 
+            <span class="footer-p1">Xeorl</span> 
-            <span style="font-size: 12px;color:#ABB2BF;font-weight: 500; margin-top: 5px; display: inline-block;">open source</span> <br>
+            <span class="footer-p2">open source</span> <br>
-            <span style="font-size: 10px;color:#ABB2BF; display: block; margin-top: 12px;">Released under MIT License | Copyright © 2024</span>
+            <span class="footer-p3">Released under MIT License | Copyright © 2024</span>
         </p>
         <div class="footer-links">
             <a href="#">Privacy</a>
             <a href="#">Terms</a>
             <a href="#">Contact</a>
+            <a href="https://github.com/xodivorce/xeorl" target="_blank" >Github</a>
         </div>
     </div> 
 </footer>

htdocs/assets/_header.php

@@ -4,10 +4,14 @@
     <div class="logo">
         <img src="assets/images/url.png" alt="Xeorl Logo" class="logo-img">
         <span>Xeorl</span>
+        <span class="version-number">2.1.2</span>
     </div>
-    <div class="version-number">
+    <label class="burger" for="burger">
-            <span>2.1.2</span>
+      <input type="checkbox" id="burger">
-        </div>
+      <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>

htdocs/assets/css/footer.css

@@ -17,6 +17,27 @@ footer {
     box-sizing: border-box;
     flex-wrap: wrap;
 }
+.footer-p1{
+    font-size: 12px;
+    color:#84819E;
+    font-weight: 500;
+    margin-left:-8px;
+    margin-top: 5px;
+    display: inline-block;
+}
+.footer-p2{
+    font-size: 12px;
+    color:#ABB2BF;
+    font-weight: 500;
+    margin-top: 5px;
+    display: inline-block;
+}
+.footer-p3{
+    font-size: 10px;
+    color:#ABB2BF; 
+    display: block;
+    margin-top: 12px;
+}
 
 .footer-container p {
     margin: 0;
@@ -46,3 +67,53 @@ footer {
     top: 2px;
     left: -5px;
 }
+
+
+@media (max-width: 1189px) {
+    .footer-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 1000px;
+        font-size: 12px; /* Slightly increased font size */
+        margin: 0 auto;
+        width: 100%;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+    }
+}
+@media (max-width: 1023px) {
+    .footer-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 730px;
+        font-size: 12px; /* Slightly increased font size */
+        margin: 0 auto;
+        width: 100%;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+    }
+}
+
+@media (max-width: 768px) {
+    footer {
+        padding: 33px; /* Adjust padding for smaller screens */
+    }
+
+    .footer-container {
+        flex-direction: column; /* Stack content vertically */
+        text-align: center; /* Center-align text */
+        margin-bottom: 11px;
+    }
+
+    .footer-links {
+        margin-bottom: 33px; /* Spacing above the footer text */
+        order: -1; /* Move footer links above the text */
+    }
+
+    .footer-container p {
+        margin: 0;
+        padding-bottom: 0; /* Remove bottom padding */
+    }
+}

htdocs/assets/css/header.css

@@ -30,7 +30,8 @@ header {
 
 .logo-img {
     width: 35px;
-    margin-right: 2.5px;
+    margin-left: -10px;
+    margin-right: 2px;
 }
 .version-number {
     font-size: 10px;
@@ -40,14 +41,14 @@ header {
     background-color:#ECF0F5;
     padding: 1px 4px;
     border-radius: 3px; 
-    margin-right: 40.5rem;
+    margin-left: 20px;
     margin-bottom: -3px;
 }
 
 nav ul {
     list-style: none;
     display: flex;
-    gap: 25px;
+    gap: 6px;
     margin: 0;
     padding: 0;
 }
@@ -55,6 +56,7 @@ nav ul {
 nav ul li a {
     text-decoration: none;
     color: #697483;
+    margin: 0 12px;
     font-size: 14px;
     font-weight: 500;
     transition: color 0.3s;
@@ -73,3 +75,136 @@ nav ul li a.disabled {
     pointer-events: none;
     cursor: default;
 }
+
+@media (max-width: 1189px) {
+    .header-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 1000px;
+        margin: 0 auto;
+        width: 100%;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+    }
+}
+@media (max-width: 1023px) {
+    .header-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 730px;
+        margin: 0 auto;
+        width: 100%;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+    }
+}
+/* Hamburger Menu Styles */
+.burger {
+    position: relative;
+    width: 25px;
+    height: 20px;
+    background: transparent;
+    cursor: pointer;
+    display: none; /* Hidden by default */
+  }
+  
+  .burger input {
+    display: none;
+  }
+  
+  .burger span {
+    display: block;
+    position: absolute;
+    height: 2.3px;
+    width: 100%;
+    background: black;
+    border-radius: 9px;
+    opacity: 1;
+    left: 0;
+    transform: rotate(0deg);
+    transition: .25s ease-in-out;
+  }
+  
+  .burger span:nth-of-type(1) {
+    top: 0px;
+    transform-origin: left center;
+  }
+  
+  .burger span:nth-of-type(2) {
+    top: 50%;
+    transform: translateY(-50%);
+    transform-origin: left center;
+  }
+  
+  .burger span:nth-of-type(3) {
+    top: 100%;
+    transform-origin: left center;
+    transform: translateY(-100%);
+  }
+  
+  .burger input:checked ~ span:nth-of-type(1) {
+    transform: rotate(45deg);
+    top: 0px;
+    left: 5px;
+  }
+  
+  .burger input:checked ~ span:nth-of-type(2) {
+    width: 0%;
+    opacity: 0;
+  }
+  
+  .burger input:checked ~ span:nth-of-type(3) {
+    transform: rotate(-45deg);
+    top: 18px;
+    left: 5px;
+  }
+  
+/* Adjust position of the hamburger menu */
+@media (max-width: 768px) {
+    .burger {
+        display: block;
+        margin-left: auto;
+        margin-right: 15px; 
+    }
+
+    nav ul {
+        display: none;
+    }
+
+    .burger input:checked ~ nav ul {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        position: absolute;
+        top: 60px;
+        left: 0;
+        background: #ffffff;
+        border-top: 1px solid #F2F2F2;
+        padding: 10px 0;
+    }
+}
+
+/* Adjust the logo alignment */
+@media (max-width: 768px) {
+    .logo {
+        flex-grow: 1;
+    }
+}
+@media (max-width: 700px) {
+    .burger {
+        display: block;
+        margin-left: auto;
+        margin-right: 20px; 
+    }
+
+}
+@media (max-width: 450px) {
+    .burger {
+        display: block;
+        margin-left: auto;
+        margin-right: 25px; 
+    }
+
+}

htdocs/assets/css/home.css

@@ -30,7 +30,6 @@ main {
     margin-bottom: 45px;
 }
 
-
 .shorten-section p {
     color:#3C4B62;
     margin-top: -15px;
@@ -155,7 +154,11 @@ main {
     border-radius: 8px;
     margin-bottom: 15px;
 }
-
+.url-img {
+    width: 35px;
+    margin-left: 0px;
+    margin-right: 2px;
+}
 .link-icon {
     margin-right: -20px;
     
@@ -204,3 +207,401 @@ main {
     height: 100%;
 }
 
+
+/* For screens 768px and below */
+@media (max-width: 768px) {
+    .shorten-section h1 {
+        font-size: 40px;
+    }
+    
+    .shorten-section h2 {
+        font-size: 40px;
+    }
+    .shorten-section p {
+        font-size: 16px;
+        line-height:  30px;
+    }
+    .shortened-links h2 {
+        font-size: 16px;
+        margin-right: 325px;
+        white-space: nowrap;
+    }
+    .shorten-form input {
+        padding: 14px 35px;
+        width: 290px;
+        font-size: 14px;
+    }
+
+    .shorten-form button {
+        padding: 14px 35px;
+        font-weight: 600;
+        font-size: 14px;
+    }
+
+    #links-list {
+        max-width: 500px;
+        font-size: 14px;
+    }
+
+    .url-img {
+        width: 30px;
+    }
+    .link-info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-width: 300px;
+    }
+    
+    .short-link {
+        font-size: 14px;
+    }
+    
+    .long-link {
+        font-size: 14px;
+    }
+    
+    .copy-btn,
+    .delete-btn {
+        width: 20px;
+        height: 20px;
+    }
+    
+}
+
+/* For screens 540px and below */
+@media (max-width: 540px) {
+    .shorten-section h1 {
+        font-size: 35px;
+    }
+    
+    .shorten-section h2 {
+        font-size: 35px;
+    }
+    .shorten-section p {
+        font-size: 14px;
+        line-height:  30px;
+    }
+    .shortened-links h2 {
+        font-size: 14px;
+        margin-right: 295px;
+        white-space: nowrap;
+    }
+    .shorten-form input {
+        padding: 14px 35px;
+        width: 290px;
+        font-size: 12px;
+    }
+    
+    .shorten-form button {
+        padding: 14px 35px;
+        font-weight: 600;
+        font-size: 12px;
+    }
+
+    #links-list {
+        max-width: 450px;
+        font-size: 12px;
+    }
+
+    .url-img {
+        width: 25px;
+    }
+    .link-info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-width: 280px;
+    }
+    
+    .short-link {
+        font-size: 12px;
+    }
+    
+    .long-link {
+        font-size: 12px;
+    }
+    
+    .copy-btn,
+    .delete-btn {
+        width: 18px;
+        height: 18px;
+    }
+    
+}
+
+
+/* For screens 487px and below */
+@media (max-width: 487px) {
+    #links-list {
+        max-width: 440px;
+        font-size: 12px;
+    }
+
+    .link-info {
+        max-width: 270px;
+    }
+}
+/* For screens 477px and below */
+@media (max-width: 477px) {
+    .shorten-section h1 {
+        font-size: 30px;
+    }
+    
+    .shorten-section h2 {
+        font-size: 30px;
+    }
+    .shorten-section p {
+        font-size: 12px;
+        line-height:  25px;
+    }
+    .shortened-links h2 {
+        font-size: 14px;
+        margin-right: 245px;
+        white-space: nowrap;
+    }
+    .shorten-form input {
+        padding: 14px 35px;
+        width: 290px;
+        font-size: 12px;
+    }
+    
+    .shorten-form button {
+        padding: 14px 35px;
+        font-weight: 600;
+        font-size: 12px;
+    }
+
+    #links-list {
+        max-width: 400px;
+        font-size: 12px;
+    }
+
+    .url-img {
+        width: 25px;
+    }
+    .link-info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-width: 240px;
+    }
+    
+    .short-link {
+        font-size: 12px;
+    }
+    
+    .long-link {
+        font-size: 12px;
+    }
+    
+    .copy-btn,
+    .delete-btn {
+        width: 18px;
+        height: 18px;
+    }
+    
+}
+
+/* For screens 442px and below */
+@media (max-width: 442px) {
+    #links-list {
+        max-width: 390px;
+        font-size: 12px;
+    }
+
+    .link-info {
+        max-width: 235px;
+    }
+}
+/* For screens 430px and below */
+@media (max-width: 430px) {
+    #links-list {
+        max-width: 375px;
+        font-size: 12px;
+    }
+    .link-info {
+        max-width: 220px;
+    }  
+}
+/* For screens 415px and below */
+@media (max-width: 415px) {
+    .shorten-section h1 {
+        font-size: 25px;
+    }
+    
+    .shorten-section h2 {
+        font-size: 25px;
+    }
+    .shorten-section p {
+        font-size: 10px;
+        line-height:  20px;
+    }
+    .shortened-links h2 {
+        font-size: 14px;
+        margin-right: 195px;
+        white-space: nowrap;
+    }
+    .shorten-form input {
+        padding: 14px 35px;
+        width: 250px;
+        font-size: 12px;
+    }
+    
+    .shorten-form button {
+        padding: 14px 35px;
+        font-weight: 600;
+        font-size: 12px;
+    }
+
+    #links-list {
+        max-width: 350px;
+        font-size: 10px;
+    }
+
+    .url-img {
+        width: 20px;
+    }
+    .link-info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-width: 200px;
+    }
+    
+    .short-link {
+        font-size: 12px;
+    }
+    
+    .long-link {
+        font-size: 12px;
+    }
+    
+    .copy-btn,
+    .delete-btn {
+        width: 18px;
+        height: 18px;
+    }
+    
+}
+
+/* For screens 390px and below */
+@media (max-width: 390px) {
+    .shorten-section h1 {
+        font-size: 25px;
+    }
+    
+    .shorten-section h2 {
+        font-size: 25px;
+    }
+    .shorten-section p {
+        font-size: 10px;
+        line-height:  20px;
+    }
+    .shortened-links h2 {
+        font-size: 14px;
+        margin-right: 175px;
+        white-space: nowrap;
+    }
+    .shorten-form input {
+        padding: 14px 25px;
+        width: 200px;
+        font-size: 12px;
+    }
+    
+    .shorten-form button {
+        padding: 14px 25px;
+        font-weight: 600;
+        font-size: 12px;
+    }
+
+    #links-list {
+        max-width: 330px;
+        font-size: 10px;
+    }
+
+    .url-img {
+        width: 20px;
+    }
+    .link-info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-width: 180px;
+    }
+    
+    .short-link {
+        font-size: 12px;
+    }
+    
+    .long-link {
+        font-size: 12px;
+    }
+    
+    .copy-btn,
+    .delete-btn {
+        width: 18px;
+        height: 18px;
+    }
+    
+}
+/* For screens 371px and below */
+@media (max-width: 371px) {
+    .shorten-section h1 {
+        font-size: 25px;
+    }
+    
+    .shorten-section h2 {
+        font-size: 25px;
+    }
+    .shorten-section p {
+        font-size: 10px;
+        line-height:  20px;
+    }
+    .shortened-links h2 {
+        font-size: 14px;
+        margin-right: 165px;
+        white-space: nowrap;
+    }
+    .shorten-form input {
+        padding: 14px 25px;
+        width: 200px;
+        font-size: 12px;
+    }
+    
+    .shorten-form button {
+        padding: 14px 25px;
+        font-weight: 600;
+        font-size: 12px;
+    }
+
+    #links-list {
+        max-width: 320px;
+        font-size: 10px;
+    }
+
+    .url-img {
+        width: 20px;
+    }
+    .link-info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-width: 160px;
+    }
+    
+    .short-link {
+        font-size: 12px;
+    }
+    
+    .long-link {
+        font-size: 12px;
+    }
+    
+    .copy-btn,
+    .delete-btn {
+        width: 18px;
+        height: 18px;
+    }
+    
+}

htdocs/index.php

@@ -113,7 +113,7 @@ include "assets/_header.php";
                         while ($row = mysqli_fetch_assoc($sql2)) {
                             $short_url = $domain . $row['shorten_url'];
                             echo '<li>';
-                            echo '<div class="link-icon"><img src="assets/images/url.png" class="logo-img"></div>';
+                            echo '<div class="link-icon"><img src="assets/images/url.png" class="url-img"></div>';
                             echo '<div class="link-info">';
                             echo '<span class="short-link">' . $short_url . '</span>';
                             echo '<span class="long-link">' . $row['full_url'] . '</span>';