mirror of
https://github.com/xodivorce/xeorl.git
synced 2025-12-19 00:02:57 +05:30
v3.0.0
This commit is contained in:
@@ -3,16 +3,17 @@
|
||||
<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 style="font-size: 12px;color:#ABB2BF;font-weight: 500; margin-top: 5px; display: inline-block;">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-p1">Xeorl</span>
|
||||
<span class="footer-p2">open source</span> <br>
|
||||
<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>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -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">
|
||||
<span>2.1.2</span>
|
||||
</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>
|
||||
|
||||
@@ -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 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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>';
|
||||
|
||||
Reference in New Issue
Block a user