-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (98 loc) · 5.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Srink.co - The URL Shortener</title>
<meta name="description"
content="The most reliable, efficient, fast, and simple URL shortener Srink.co does not pop up any ads; it quickly redirects to the URL, making it a simple and fast URL shortener on the internet." />
<meta
name="The most reliable, efficient, fast, and simple URL shortener Srink.co does not pop up any ads; it quickly redirects to the URL, making it a simple and fast URL shortener on the internet."
content="description" />
<meta name="keywords"
content="srink, shrink, srink.co, shrink.co, url, link, short, shortener, shortner, bitly, bit.ly, no ads, ads, fast, efficient, reliable, internet" />
<meta
name="srink, shrink, srink.co, shrink.co, url, link, short, shortener, shortner, bitly, bit.ly, no ads, ads, fast, efficient, reliable, internet"
content="keywords" />
<link rel="stylesheet" href="tailwind.css" />
</head>
<body>
<section class="w-full min-h-screen bg-gray-900">
<div class="container relative flex flex-col min-h-screen px-6 py-8 mx-auto">
<section class="flex items-center flex-1">
<div class="flex flex-col w-full">
<h1 class="text-5xl font-extrabold text-center lg:text-7xl 2xl:text-8xl">
<span
class="text-transparent bg-gradient-to-tr bg-clip-text from-sky-300 via-pink-300 to-red-500">
Srink
</span>
<!-- <span
class="text-transparent bg-gradient-to-br bg-clip-text from-teal-200 via-indigo-300 to-sky-500">
.co
</span> -->
</h1>
<p class="max-w-3xl mx-auto mt-6 text-lg text-center text-white md:text-xl">
The Fast, Simple and Reliable URL Shortener
</p>
<div class="flex flex-col mt-8 space-y-3 sm:-mx-2 sm:flex-row sm:justify-center sm:space-y-0">
<input id="url" type="url"
class="px-6 py-3 border rounded-md bg-gray-900 text-gray-300 border-gray-600 focus:ring-blue-300 focus:ring-opacity-40 focus:border-blue-300 focus:outline-none focus:ring sm:mx-2"
placeholder="Your Long Link" />
<button id="submit"
class="px-6 py-3 my-4 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:bg-blue-600 focus:outline-none sm:mx-2">
srink it
</button>
</div>
<!-- <p class="mt-8 text-center text-white text-md md:text-xl"></p> -->
<div class="mt-5 self-center">
<button id="copy" hidden
class="min-w-full px-5 py-3 transition-colors duration-300 rounded-md bg-gray-800 md:mx-6 hover:bg-gray-700">
<div class="flex items-center justify-center -mx-1">
<p id="link" class="mx-1 text-sm text-white"></p>
</div>
</button>
<script>
// TODO: Make it Functional
document
.getElementById("submit")
.addEventListener("click", async (e) => {
let url = document.getElementById("url").value;
const regex = new RegExp(
"^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$",
"i"
);
if (!regex.test(url)) {
alert("Please Enter a Valid URL");
return;
}
let link = document.getElementById("link");
let copy = document.getElementById("copy");
const req = await fetch(
`https://srink.co/api/new?url=${url}`,
{
method: "GET",
mode: "no-cors",
}
);
const res = await req.json();
link.innerHTML = res.shortened_url;
copy.removeAttribute("hidden");
navigator.clipboard.writeText(res.shortened_url);
});
</script>
</div>
</div>
</section>
<footer class="flex flex-col items-center mt-12 sm:flex-row sm:justify-between">
<a href="#" class="max-md:hidden transition-colors duration-300 text-gray-300 hover:text-blue-400">
srink.co</a>
<div class="mt-4 -mx-4 md:mt-0">
<a href="https://github.com/anonyindian/url-shortener" target="_blank" rel="noopener noreferrer"
class="px-4 transition-colors duration-300 text-gray-300 hover:text-blue-400">
GitHub</a>
</div>
</footer>
</div>
</section>
</body>
</html>