xodivorce/xeorl
1
0
Fork 0
mirror of https://github.com/xodivorce/xeorl.git synced 2025-12-19 08:13:00 +05:30
Code Issues Packages Projects Releases Wiki Activity

v1.2.0

Browse Source
This commit is contained in:
Prasid Mandal
2024-08-30 02:03:16 +05:30
parent 6073a08a6d
commit 89b83796db
13 changed files with 50 additions and 361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
assets/.DS_Store vendored
View File

Binary file not shown.

48
assets/css/header.css
View File

@@ -1,9 +1,4 @@
/* header.css */
header { header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px; padding: 20px;
background-color: #ffffff; background-color: #ffffff;
border-bottom: 1px solid #F2F2F2; border-bottom: 1px solid #F2F2F2;
@@ -13,43 +8,68 @@ header {
z-index: 1000; z-index: 1000;
} }
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1120px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
flex-wrap: wrap;
}
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: #171C24;
margin-left: 0;
} }
.logo-img { .logo-img {
width: 35px; width: 35px;
margin-right: 10px; /* Spacing between logo and text */ margin-right: 2.5px;
}
.version-number {
font-size: 10px;
font-family: system-ui, -apple-system;
font-weight: 550;
color: #697483;
background-color:#ECF0F5;
padding: 1px 4px;
border-radius: 3px;
margin-right: 40.5rem;
margin-bottom: -3px;
} }
nav ul { nav ul {
list-style: none; list-style: none;
display: flex; display: flex;
gap: 40px; gap: 25px;
margin: 0; margin: 0;
padding: 0;
} }
nav ul li a { nav ul li a {
text-decoration: none; text-decoration: none;
color: #697483; /* Default color for inactive links */ color: #697483;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
transition: color 0.3s; /* Smooth color transition */ transition: color 0.3s;
} }
nav ul li a.active { nav ul li a.active {
color: #BEC7D5; /* Color for active link */ color: #BEC7D5;
} }
nav ul li a:not(.disabled):hover { nav ul li a:not(.disabled):hover {
color: #272B2F; /* Color on hover for non-disabled links */ color: #272B2F;
} }
nav ul li a.disabled { nav ul li a.disabled {
color: #BEC7D5; /* Color for disabled link */ color: #BEC7D5;
pointer-events: none; /* Disable click events */ pointer-events: none;
cursor: default; /* Change cursor to default */ cursor: default;
} }

5
assets/css/home.css
View File

@@ -10,10 +10,13 @@ main {
padding: 60px 20px; padding: 60px 20px;
text-align: center; text-align: center;
} }
.shorten-section{
margin-bottom: 5em;
}
.shorten-section h1 { .shorten-section h1 {
color: #171C24; color: #171C24;
margin-top: 65px; margin-top: 5.3ex;
font-size: 45px; font-size: 45px;
font-weight: 700; font-weight: 700;
margin-bottom: 0px; margin-bottom: 0px;

BIN
assets/images/.DS_Store vendored
View File

Binary file not shown.

BIN
assets/images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

0
assets/js/header.js
View File

5
header.php
View File

@@ -1,9 +1,13 @@
<link rel="stylesheet" href="assets/css/header.css"> <link rel="stylesheet" href="assets/css/header.css">
<header> <header>
<div class="header-container">
<div class="logo"> <div class="logo">
<img src="assets/images/url.png" alt="Xeorl Logo" class="logo-img"> <img src="assets/images/url.png" alt="Xeorl Logo" class="logo-img">
<span>Xeorl</span> <span>Xeorl</span>
</div> </div>
<div class="version-number">
<span>1.2.0</span>
</div>
<nav> <nav>
<ul> <ul>
<li><a href="index.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active disabled' : ''; ?>">Home</a></li> <li><a href="index.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active disabled' : ''; ?>">Home</a></li>
@@ -12,5 +16,6 @@
<li><a href="contact.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'contact.php' ? 'active disabled' : ''; ?>">Contact</a></li> <li><a href="contact.php" class="<?php echo basename($_SERVER['PHP_SELF']) == 'contact.php' ? 'active disabled' : ''; ?>">Contact</a></li>
</ul> </ul>
</nav> </nav>
</div>
</header> </header>
<script src="assets/js/header.js"></script> <script src="assets/js/header.js"></script>

50
home.php
View File

@@ -1,50 +0,0 @@
<?php include 'header.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xeorl - Shorten your links</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/home.css">
</head>
<body>
<main>
<section class="shorten-section">
<h1>Open source inits.</h1>
<h2>Lovingly hand-crafted.</h2>
<p>Premium link shortening for use in web, iOS, Android, and<br>
desktop apps. Supported for urls. Completely open source, MIT<br>
licensed and built by <a href="https://www.xodivorce.in" target="_blank" class="custom-link">xodivorce</a>.</p>
<div class="shorten-form">
<input type="text" id="url-input" placeholder="Type a link...">
<button id="shorten-btn">SHORTEN</button>
</div>
<div class="shortened-links">
<h2>Your shortened links :</h2>
<ul id="links-list">
<li>
<div class="link-icon">
<img src="assets/images/url.png" class="logo-img">
</div>
<div class="link-info">
<span class="short-link">xeorl.com/WAXD</span>
<span class="long-link">https://www.example.com/very-long-url-that-needs-shortening</span>
</div>
<button class="copy-btn">
<img src="assets/images/copy.png">
</button>
<button class="delete-btn">
<img src="assets/images/delete.png">
</button>
</li>
</ul>
</div>
</section>
</main>
<?php include 'footer.php'; ?>
<script src="assets/js/home.js"></script>
</body>
</html>

8
index.php
View File

@@ -3,7 +3,6 @@
session_start(); session_start();
// Include necessary files // Include necessary files
include "header.php";
include "php/config.php"; include "php/config.php";
// Set a cookie to track user visits or preferences // Set a cookie to track user visits or preferences
@@ -57,13 +56,18 @@ if (isset($_GET)) {
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Xeorl - Link Shortener and Management Tool</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xeorl - Shorten your links</title> <meta name="description" content="Xeorl is an All-in-One, Fully Free to Use advanced Link Shortener and Management Tool | Equipped with multi-layered URL encryption, URL metadata remover, Mass shrinker, Quick link and many more! | Powered by xeorgs...">
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/home.css"> <link rel="stylesheet" href="assets/css/home.css">
</head> </head>
<?php
include "header.php";
?>
<body> <body>
<main> <main>
<section class="shorten-section"> <section class="shorten-section">

2
php/config.php
View File

@@ -7,7 +7,7 @@
3. Go to JavaScript file and search this keyword - let domain - then paste your url there 3. Go to JavaScript file and search this keyword - let domain - then paste your url there
4. After all changes you've to wait because javascript file save changes may take time to reflect */ 4. After all changes you've to wait because javascript file save changes may take time to reflect */
$domain = "https://localhost/web-Projects/url/"; //like this: codingnepalweb.com/ $domain = "http://localhost/Web-Projects/xeorl/"; //like this: codingnepalweb.com/
$host = "localhost"; $host = "localhost";
$user = "root"; //Database username $user = "root"; //Database username
$pass = ""; //Database password $pass = ""; //Database password

38
script.js
View File

@@ -1,38 +0,0 @@
const form = document.querySelector(".wrapper form"),
fullURL = form.querySelector("input"),
shortenBtn = form.querySelector("form button"),
urlsArea = document.querySelector(".urls-area");
form.onsubmit = (e) => {
e.preventDefault();
};
shortenBtn.onclick = () => {
let xhr = new XMLHttpRequest();
xhr.open("POST", "php/url-controll.php", true);
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
let data = xhr.response;
if (data.length <= 5) {
// Example of setting the shortened URL directly to the list
let domain = "localhost/url/";
let shortenURL = domain + data;
// Create a new row for the URL and append it to the list
let newRow = `
<div class="data">
<li><a href="${shortenURL}" target="_blank">${shortenURL}</a></li>
<li>${fullURL.value}</li>
<li>0</li>
<li><a href="php/delete.php?id=${data}">Delete</a></li>
</div>
`;
urlsArea.insertAdjacentHTML('afterbegin', newRow);
} else {
alert(data);
}
}
};
let formData = new FormData(form);
xhr.send(formData);
};

255
style.css
View File

@@ -1,255 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #20B2AA;
padding: 0 10px;
}
.wrapper{
background: #fff;
padding: 20px;
width: 800px;
border-radius: 5px;
box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
::selection{
background: rgba(23,162,184,0.3);
}
.wrapper form{
height: 50px;
width: 100%;
display: flex;
position: relative;
align-items: center;
}
form .url-icon{
position: absolute;
width: 50px;
text-align: center;
font-size: 23px;
color: #c4c4c4;
pointer-events: none;
}
form input:valid ~ .url-icon{
color: #20B2AA;
}
form input{
height: 100%;
width: 100%;
outline: none;
padding: 0 120px 0 45px;
font-size: 20px;
caret-color: #20B2AA;
border: 2px solid #ddd;
border-radius: 5px;
transition: all 0.1s ease;
}
form input:valid{
border-color: #20B2AA;
}
form input::placeholder{
color: #c4c4c4;
}
form input:focus::placeholder{
color: #d9d9d9;
}
form button{
position: absolute;
right: 6px;
padding: 5px 15px;
font-size: 18px;
border-radius: 5px;
border: none;
outline: none;
background: #20B2AA;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
form button:hover{
background: #1fada6;
}
.wrapper form button{
opacity: 0;
pointer-events: none;
}
.wrapper form input:valid ~ button{
opacity: 1;
pointer-events: auto;
}
.wrapper a{
color: #000;
}
.wrapper .statistics{
margin: 20px 0;
display: flex;
padding-right: 5px;
align-items: center;
justify-content: space-between;
}
.statistics span{
font-size: 17px;
}
.statistics span span{
font-weight: 500;
}
.statistics a:hover{
color: #20B2AA;
}
.wrapper .urls-area{
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 5px;
max-height: 400px;
overflow-y: scroll;
}
.urls-area::-webkit-scrollbar{
width: 0px;
}
.urls-area :is(.title, .data){
display: flex;
width: 100%;
justify-content: space-between;
}
.urls-area li{
width: 100%;
list-style: none;
border-right: 1px solid #ddd;
}
.urls-area li:last-child{
border-right: 0px;
}
.urls-area .title li{
text-align: center;
background: #f2f2f2;
padding: 10px 0;
}
.urls-area .data li{
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: center;
word-break: break-all;
}
.urls-area .data li:last-child a{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.urls-area .data li a:hover{
color: #20B2AA;
text-decoration: underline;
}
.urls-area .data li:last-child a:hover{
text-decoration: none;
}
.urls-area .data:nth-child(odd){
background: #f2f2f2;
}
.urls-area li:nth-child(1){
max-width: 30%;
}
.urls-area li:nth-child(2){
max-width: 45%;
}
.urls-area li:nth-child(3){
max-width: 11%;
}
.urls-area li:nth-child(4){
max-width: 14%;
}
.blur-effect{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
backdrop-filter: blur(2px);
background: rgba(0,0,0,0.01);
display: none;
}
.popup-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
background: #fff;
padding: 25px;
max-width: 480px;
width: 100%;
border-radius: 5px;
box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s ease;
}
.popup-box.show{
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.popup-box .info-box{
color: #0f5753;
background: #bef4f1;
border: 1px solid #7de8e3;
padding: 10px;
text-align: center;
font-size: 17px;
border-radius: 5px;
}
.popup-box .info-box.error{
color: #721c24;
background: #f8d7da;
border-color: #f5c6cb;
}
.popup-box form{
margin-top: 10px;
position: relative;
}
.popup-box form label{
font-size: 18px;
}
.popup-box form .copy-icon{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-100%);
font-size: 20px;
cursor: pointer;
}
.copy-icon:hover{
color: #20B2AA;
}
.popup-box form input{
height: 45px;
padding: 0 35px 0 15px;
margin-top: 3px;
border: 1px solid #ccc;
}
.popup-box form input:focus{
border-color: #20B2AA;
}
.popup-box form button{
width: 100%;
height: 45px;
position: relative;
right: 0;
font-size: 20px;
margin-top: 10px;
}