Skip to content

Commit 0613da9

Browse files
3bbaas3bbaas
committed
Create project
1 parent d82c71f commit 0613da9

File tree

12 files changed

+494
-1
lines changed

12 files changed

+494
-1
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
# URL_Shortener
1+
# URL_Shortener
2+
3+
django-admin startproject URLShortener .

‎db.sqlite3‎

128 KB
Binary file not shown.

‎manage.py‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
#!/usr/bin/env python
2+
"""Django's command-line utility for administrative tasks."""
3+
import os
4+
import sys
5+
6+
7+
def main():
8+
"""Run administrative tasks."""
9+
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'url_shortener.settings')
10+
try:
11+
from django.core.management import execute_from_command_line
12+
except ImportError as exc:
13+
raise ImportError(
14+
"Couldn't import Django. Are you sure it's installed and "
15+
"available on your PYTHONPATH environment variable? Did you "
16+
"forget to activate a virtual environment?"
17+
) from exc
18+
execute_from_command_line(sys.argv)
19+
20+
21+
if __name__ == '__main__':
22+
main()

‎templates/home.html‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>URL Shortener</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
8+
<style>
9+
body {
10+
font-family: 'Roboto', sans-serif;
11+
margin: 0;
12+
background: #f4f4f9;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
height: 100vh;
17+
color: #333;
18+
}
19+
20+
.container {
21+
text-align: center;
22+
max-width: 600px;
23+
background: #fff;
24+
padding: 20px;
25+
border-radius: 10px;
26+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
27+
margin: 50px auto;
28+
29+
}
30+
31+
h1 {
32+
color: #007BFF;
33+
margin-bottom: 20px;
34+
}
35+
36+
p {
37+
margin: 10px 0 20px;
38+
color: #666;
39+
}
40+
41+
form {
42+
display: flex;
43+
flex-direction: column;
44+
gap: 15px;
45+
}
46+
47+
input[type="url"] {
48+
padding: 10px;
49+
font-size: 16px;
50+
border: 1px solid #ccc;
51+
border-radius: 5px;
52+
}
53+
54+
button {
55+
background: #007BFF;
56+
color: #fff;
57+
width: 15vw;
58+
padding: 10px;
59+
border: none;
60+
border-radius: 5px;
61+
font-size: 16px;
62+
cursor: pointer;
63+
}
64+
65+
button:hover {
66+
background: #0056b3;
67+
}
68+
69+
select {
70+
padding: 10px;
71+
font-size: 16px;
72+
border: 1px solid #ccc;
73+
border-radius: 5px;
74+
background: #007BFF;
75+
color: white;
76+
cursor: pointer;
77+
}
78+
79+
select:hover {
80+
background-color: #0056b3;
81+
}
82+
83+
.shortened-link {
84+
margin-top: 20px;
85+
font-size: 16px;
86+
color: #007BFF;
87+
cursor: pointer;
88+
text-decoration: underline;
89+
position: relative;
90+
}
91+
92+
.shortened-link:hover {
93+
color: #0056b3;
94+
}
95+
96+
.tooltip {
97+
visibility: hidden;
98+
background-color: #1c97ff;
99+
color: white;
100+
text-align: center;
101+
border-radius: 5px;
102+
padding: 5px 10px;
103+
position: absolute;
104+
top: -35px;
105+
left: 50%;
106+
transform: translateX(-50%);
107+
white-space: nowrap;
108+
z-index: 1;
109+
font-size: 14px;
110+
opacity: 0;
111+
transition: opacity 0.3s ease;
112+
}
113+
114+
.tooltip.visible {
115+
visibility: visible;
116+
opacity: 1;
117+
}
118+
119+
footer {
120+
background: #333;
121+
color: white;
122+
text-align: center;
123+
padding: 10px 0;
124+
position: fixed;
125+
bottom: 0;
126+
width: 100%;
127+
font-size: 14px;
128+
}
129+
130+
footer a {
131+
color: #1E90FF;
132+
text-decoration: none;
133+
margin: 0 5px;
134+
}
135+
136+
footer a:hover {
137+
text-decoration: underline;
138+
}
139+
140+
#result-section {
141+
margin-top: 20px;
142+
font-size: 16px;
143+
color: #007BFF;
144+
cursor: pointer;
145+
text-decoration: underline;
146+
position: relative;
147+
}
148+
149+
</style>
150+
</head>
151+
<body>
152+
<div class="container">
153+
<h1>URL Shortener</h1>
154+
<p>Enter a long URL to shorten it quickly.</p>
155+
156+
<form method="POST">
157+
{% csrf_token %}
158+
<input type="url" name="long_url" placeholder="Enter URL here" required autocomplete="off">
159+
<div class="mohamed">
160+
<select name="service">
161+
<option value="tinyurl">tinyURL</option>
162+
<option value="bitly">bitly</option>
163+
<option value="chilpit">chilpit</option>
164+
<option value="clckru">clckru</option>
165+
<option value="cuttly">cuttly</option>
166+
<option value="dagd">dagd</option>
167+
<option value="isgd">isgd</option>
168+
</select>
169+
<button type="submit">Shorten URL</button>
170+
</div>
171+
</form>
172+
173+
{% if shortened_url %}
174+
<div id="result-section">
175+
<p>Shortened URL:</p>
176+
<a href=""
177+
class="shortened-link"
178+
onclick="copyToClipboard('{{ shortened_url }}', this)">
179+
{{ shortened_url }}
180+
<span class="tooltip">Copied to clipboard!</span>
181+
</a>
182+
</div>
183+
{% endif %}
184+
{% if error_message %}
185+
<p style="color: red;">{{ error_message }}</p>
186+
{% endif %}
187+
188+
</div>
189+
<footer>
190+
&copy; 2024 @3bbas |
191+
<a href="https://www.linkedin.com/in/3bbaas/" target="_blank">LinkedIn</a> |
192+
<a href="https://github.com/3bbaas" target="_blank">GitHub</a>
193+
</footer>
194+
195+
<script>
196+
function copyToClipboard(text, element) {
197+
navigator.clipboard.writeText(text).then(function () {
198+
const tooltip = element.querySelector('.tooltip');
199+
tooltip.classList.add('visible');
200+
201+
setTimeout(() => {
202+
tooltip.classList.remove('visible');
203+
}, 2000);
204+
}).catch(function (error) {
205+
console.error('Failed to copy text: ', error);
206+
});
207+
}
208+
209+
document.addEventListener("DOMContentLoaded", function () {
210+
if (document.getElementById("result-section")) {
211+
setTimeout(() => {
212+
const resultSection = document.getElementById("result-section");
213+
resultSection.innerHTML = "";
214+
}, 6000);
215+
}
216+
});
217+
218+
</script>
219+
</body>
220+
</html>

‎url_shortener/__init__.py‎

Whitespace-only changes.

‎url_shortener/asgi.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
"""
2+
ASGI config for url_shortener project.
3+
4+
It exposes the ASGI callable as a module-level variable named ``application``.
5+
6+
For more information on this file, see
7+
https://docs.djangoproject.com/en/5.1/howto/deployment/asgi/
8+
"""
9+
10+
import os
11+
12+
from django.core.asgi import get_asgi_application
13+
14+
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'url_shortener.settings')
15+
16+
application = get_asgi_application()

‎url_shortener/forms.py‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
from django import forms
2+
from .models import shorten
3+
4+
class get_url(forms.ModelForm):
5+
class Meta:
6+
model = shorten
7+
fields = ['url']

‎url_shortener/models.py‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
from django.db import models
2+
3+
4+
class shorten(models.Model):
5+
url = models.CharField(max_length=203)
6+
shortened_url = models.CharField(max_length=50, blank=True, null=True)
7+
8+
def __str__(self):
9+
return self.url

0 commit comments

Comments
 (0)