Skip to content

Commit 8da69eb

Browse files
SkvProgrammerSkvProgrammer
committed
changes
1 parent f1b7710 commit 8da69eb

File tree

3 files changed

+187
-10
lines changed

3 files changed

+187
-10
lines changed

‎app.py

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
def index():
1111
return render_template('index.html')
1212

13+
@app.route('/index')
14+
def indexA():
15+
return render_template('index.html')
16+
17+
1318

1419
@app.route('/shorten', methods=['POST'])
1520
def shorten():
@@ -30,4 +35,4 @@ def redirect_to_url(short_url):
3035

3136

3237
if __name__ == '__main__':
33-
app.run(debug=True)
38+
app.run()

‎templates/index.html

Lines changed: 132 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,137 @@
44
<title>URL Shortener</title>
55
</head>
66
<body>
7-
<h1>URL Shortener</h1>
8-
<form action="/shorten" method="POST">
9-
<input type="text" name="url" placeholder="Enter URL">
10-
<button type="submit">Shorten</button>
11-
</form>
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+
}
59+
60+
header, footer {
61+
text-align: center;
62+
63+
background-color: #f0f0f0;
64+
}
65+
66+
header a {
67+
color: #007bff;
68+
text-decoration: none;
69+
margin: 0 10px;
70+
}
71+
72+
footer p {
73+
margin: 0;
74+
}
75+
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);
88+
}
89+
90+
h1 {
91+
margin-bottom: 20px;
92+
}
93+
94+
input[type="text"] {
95+
width: 100%;
96+
padding: 10px;
97+
border: 1px solid #ccc;
98+
border-radius: 5px;
99+
}
100+
#relink {
101+
color: black !important;
102+
text-decoration: none;
103+
104+
font-family: 'Montserrat', sans-serif;
105+
106+
}
107+
108+
#relink:hover {
109+
color: black!important; /* A slightly darker blue on hover */
110+
font-style: italic;
111+
112+
}
113+
114+
</style>
115+
<header>
116+
<div class="container" style="line-height:auto;">
117+
<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>
122+
</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>  
129+
130+
</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>
134+
</div>
135+
</footer>
136+
<script>
137+
document.getElementById("currentYear").textContent = new Date().getFullYear();
138+
</script>
12139
</body>
13140
</html>

‎templates/shorten.html

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,55 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>URL Shortener</title>
4+
<title>Shortened URL</title>
5+
<link rel="stylesheet" href="style.css">
56
</head>
67
<body>
7-
<h1>Shortened URL:</h1>
8-
<p>{{ short_url }}</p>
8+
<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+
}
47+
</style>
48+
<div class="container">
49+
<h1>Your Shortened URL</h1>
50+
<p id="shortened-url">{{ short_url }}</p>
51+
<a href="index" class="back-button">Back to Home</a>
52+
53+
</div>
954
</body>
10-
</html>
55+
</html>

0 commit comments

Comments
 (0)