Skip to content

Commit 2587b32

Browse files
SkvProgrammerSkvProgrammer
authored
Add files via upload
1 parent b95bfe4 commit 2587b32

File tree

2 files changed

+170
-150
lines changed

2 files changed

+170
-150
lines changed

‎templates/index.html‎

Lines changed: 76 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,109 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
46
<title>URL Shortener</title>
7+
<link rel="icon" type="image/x-icon" href="https://avatars.githubusercontent.com/u/52121091?s=400&u=ba23a83e40e5dd66220ac951a7d4de44ad496e77&v=4">
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
59
</head>
6-
<body>
7-
<style>
8-
body {
9-
font-family: Arial, sans-serif;
10-
background-color: #f0f0f0;
11-
text-align: center;
12-
}
13-
14-
.container {
15-
max-width: 400px;
16-
margin: 50px auto;
17-
padding: 20px;
18-
background-color: #fff;
19-
border-radius: 10px;
20-
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
21-
}
22-
23-
h1 {
24-
margin-bottom: 20px;
25-
}
26-
27-
input[type="text"] {
28-
width: 100%;
29-
padding: 10px;
30-
border: 1px solid #ccc;
31-
border-radius: 5px;
32-
}
33-
34-
button {
35-
background-color: #007bff;
36-
color: #fff;
37-
border: none;
38-
padding: 10px 20px;
39-
border-radius: 5px;
40-
cursor: pointer;
41-
}
42-
43-
/* Media Queries for Responsiveness */
44-
@media (max-width: 768px) {
45-
.container {
46-
max-width: 90%;
47-
}
48-
}
49-
50-
@media (max-width: 480px) {
51-
h1 {
52-
font-size: 20px;
53-
}
54-
input[type="text"], button {
55-
padding: 8px;
56-
font-size: 14px;
57-
}
58-
}
10+
<body class="bg-light">
11+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
5912

60-
header, footer {
61-
text-align: center;
62-
63-
background-color: #f0f0f0;
13+
<style>
14+
.logo {
15+
width: 60px;
16+
height: 60px;
17+
border-radius: 50%;
6418
}
6519

6620
header a {
67-
color: #007bff;
21+
color: #0d6efd;
22+
margin-left: 15px;
6823
text-decoration: none;
69-
margin: 0 10px;
24+
font-weight: bold;
7025
}
7126

72-
footer p {
73-
margin: 0;
27+
header a:hover {
28+
text-decoration: underline;
7429
}
7530

76-
.logo {
77-
width: 20px;
78-
height: auto;
79-
}
80-
.container {
81-
max-width: 400px;
82-
margin:  
83-
50px auto;
84-
padding: 20px;
85-
background-color: #fff;
86-
border-radius: 10px;
87-
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
31+
footer {
32+
background-color: #f8f9fa;
33+
padding: 15px 0;
8834
}
8935

90-
h1 {
91-
margin-bottom: 20px;
36+
.form-container {
37+
margin-top: 50px;
38+
padding: 30px;
39+
background-color: white;
40+
border-radius: 8px;
41+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
9242
}
9343

94-
input[type="text"] {
95-
width: 100%;
96-
padding: 10px;
97-
border: 1px solid #ccc;
98-
border-radius: 5px;
44+
button {
45+
background-color: #0d6efd;
46+
color: white;
47+
border: none;
48+
padding:0px;
9949
}
100-
#relink {
101-
color: black !important;
102-
text-decoration: none;
103-
104-
font-family: 'Montserrat', sans-serif;
10550

51+
button:hover {
52+
background-color: #0056b3;
53+
}
54+
a {
55+
color: #0d6efd; /* Bootstrap primary color */
56+
font-weight: bold; /* Make links stand out */
57+
text-decoration: none; /* Remove underline */
58+
padding: 5px 10px; /* Add some padding for a button-like feel */
59+
border-radius: 5px; /* Rounded edges */
60+
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
10661
}
10762

108-
#relink:hover {
109-
color: black!important; /* A slightly darker blue on hover */
110-
font-style: italic;
111-
63+
a:hover {
64+
background-color: #0d6efd; /* Highlight background on hover */
65+
color: white; /* Contrast text color on hover */
66+
text-decoration: none; /* Keep underline removed */
11267
}
113-
68+
11469
</style>
115-
<header>
116-
<div class="container" style="line-height:auto;">
70+
71+
<!-- Header -->
72+
<header class="py-3 bg-white shadow-sm">
73+
<div class="container d-flex align-items-center justify-content-between">
11774
<img src="https://avatars.githubusercontent.com/u/52121091?s=400&u=ba23a83e40e5dd66220ac951a7d4de44ad496e77&v=4" alt="Your Logo" class="logo">
118-
<a href="https://github.com/skvprogrammer" target="_blank" id="relink">GitHub</a>
119-
<a href="https://leetcode.com/u/skvprogrammer" target="_blank" id="relink">LeetCode</a>
120-
<!-- <a href="https://your-portfolio-website.com" target="_blank">More Projects</a>
121-
!--></div>
75+
<div>
76+
<a href="https://github.com/skvprogrammer" target="_blank">GitHub</a>
77+
<a href="https://leetcode.com/u/skvprogrammer" target="_blank">LeetCode</a>
78+
</div>
79+
</div>
12280
</header>
123-
<div class="container" style="text-align: center;">
124-
<h1>URL Shortener</h1>
125-
<form action="/shorten" method="POST" style="margin-right:20px;">
126-
<input type="text" name="url" placeholder="Enter URL" required>
127-
<button type="submit" style="margin-top:10px;">Shorten</button>
128-
</form>  
12981

82+
<!-- Main Content -->
83+
<div class="container">
84+
<div class="form-container mx-auto text-center">
85+
<h1 class="mb-4">URL Shortener</h1>
86+
<form action="/shorten" method="POST" class="row g-3">
87+
<div class="col-12">
88+
<input type="url" name="url" class="form-control" placeholder="Enter URL" required style="box-shadow:none!important;">
89+
</div>
90+
<div class="col-12">
91+
<button type="submit" class="btn btn-primary w-50">Shorten</button>
92+
</div>
93+
</form>
94+
</div>
13095
</div>
131-
<footer>
132-
<div class="container">
133-
<p>&copy; <span id="currentYear"></span> Developed by <a href="https://github.com/skvprogrammer" id="relink">SKV</a> | Built with Flask and ❤️</p>
96+
97+
<!-- Footer -->
98+
<footer class="mt-5">
99+
<div class="container text-center">
100+
<p class="mb-0">&copy; <span id="currentYear"></span> Developed by <a href="https://github.com/skvprogrammer" target="_blank">SKV</a> | Built with Flask and ❤️</p>
134101
</div>
135102
</footer>
103+
104+
<!-- Script -->
136105
<script>
137106
document.getElementById("currentYear").textContent = new Date().getFullYear();
138-
</script>
107+
</script>
139108
</body>
140109
</html>

‎templates/shorten.html‎

Lines changed: 94 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,106 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
46
<title>Shortened URL</title>
5-
<link rel="stylesheet" href="style.css">
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
68
</head>
7-
<body>
9+
<body class="bg-light">
10+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
11+
812
<style>
9-
body {
10-
font-family: Arial, sans-serif;
11-
background-color: #f0f0f0;
12-
text-align: center;
13-
}
14-
15-
.container {
16-
max-width: 400px;
17-
margin: 50px auto;
18-
padding: 20px;
19-
background-color: #fff;
20-
border-radius: 10px;
21-
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
22-
}
23-
24-
h1 {
25-
margin-bottom: 20px;
26-
color: #333;
27-
}
28-
29-
#shortened-url {
30-
font-size: 18px;
31-
font-weight: bold;
32-
margin-bottom: 20px;
33-
}
34-
35-
.back-button {
36-
display: inline-block;
37-
background-color: #007bff;
38-
color: #fff;
39-
padding: 10px 20px;
40-
border-radius: 5px;
41-
text-decoration: none;
42-
}
43-
44-
.back-button:hover {
45-
background-color: #0062cc;
46-
}
13+
.container {
14+
margin-top: 50px;
15+
padding: 30px;
16+
max-width: 600px;
17+
background-color: white;
18+
border-radius: 8px;
19+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
20+
text-align: center;
21+
}
22+
23+
h1 {
24+
font-size: 2rem;
25+
margin-bottom: 20px;
26+
}
27+
28+
#shortened-url {
29+
font-size: 1.25rem;
30+
color: #0d6efd;
31+
word-wrap: break-word;
32+
}
33+
34+
.back-button {
35+
display: inline-block;
36+
margin-top: 20px;
37+
padding: 10px 20px;
38+
font-size: 1rem;
39+
color: white;
40+
background-color: #0d6efd;
41+
text-decoration: none;
42+
border-radius: 5px;
43+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
44+
}
45+
46+
.back-button:hover {
47+
background-color: #0056b3;
48+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
49+
}
50+
51+
#shortened-url {
52+
font-size: 1.25rem;
53+
color: #0d6efd;
54+
word-wrap: break-word;
55+
cursor: pointer;
56+
}
57+
58+
.copy-button {
59+
margin-top: 10px;
60+
padding: 10px 20px;
61+
font-size: 1rem;
62+
color: white;
63+
background-color: #0d6efd;
64+
border: none;
65+
border-radius: 5px;
66+
cursor: pointer;
67+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
68+
}
69+
70+
.copy-button:hover {
71+
background-color: #0056b3;
72+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
73+
}
4774
</style>
75+
76+
<!-- Main Content -->
4877
<div class="container">
4978
<h1>Your Shortened URL</h1>
5079
<p id="shortened-url">{{ short_url }}</p>
80+
<button class="copy-button" onclick="copyToClipboard()">Copy URL</button>
5181
<a href="index" class="back-button">Back to Home</a>
52-
5382
</div>
83+
<!-- JavaScript -->
84+
<script>
85+
function copyToClipboard() {
86+
// Get the text content of the paragraph
87+
const urlText = document.getElementById("shortened-url").textContent;
88+
89+
// Create a temporary textarea element to copy the text
90+
const tempInput = document.createElement("textarea");
91+
tempInput.value = urlText;
92+
document.body.appendChild(tempInput);
93+
94+
// Select the text and execute the copy command
95+
tempInput.select();
96+
document.execCommand("copy");
97+
98+
// Remove the temporary textarea
99+
document.body.removeChild(tempInput);
100+
101+
// Notify the user
102+
alert("URL copied to clipboard!");
103+
}
104+
</script>
54105
</body>
55-
</html>
106+
</html>

0 commit comments

Comments
 (0)