-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
44 lines (40 loc) · 1.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brief-Me</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="shortcut icon" href="#" />
</head>
<body class="bg-black">
<section class="text-white body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-12">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-green-300">Brief-Me</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Shorten, create and share trusted, powerful links
for your work.</p>
</div>
<div class="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0 max-w-full">
<form id="url-form" class="flex w-full">
<input class="flex-1 appearance-none rounded shadow p-3 text-black mr-2 focus:outline-none"
placeholder="Enter valid URL" type="text">
<button type="submit"
class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Shorten</button>
</form>
</div>
<div class="flex justify-evenly">
<span id="invalid-url" class="text-white text-left m-6 px-10"></span>
<a class="text-white text-center m-6 px-10" href="#" id="shorten_url" target="_blank"></a>
<button
class="hidden text-white bg-indigo-500 border-0 py-2 px-10 m-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
id="copy">Copy</button>
</div>
<div class="flex justify-evenly">
<img id="QRImage" style="display: none;"
src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=Example"></img>
</div>
</section>
<script src="/js/index.js"></script>
</body>
</html>