Working in browser
This commit is contained in:
parent
40156fd36f
commit
fe937465bd
59
index.html
59
index.html
|
@ -15,10 +15,9 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>LinkyLinky</h1>
|
|
||||||
|
|
||||||
<div class="p-8 flex items-center justify-center bg-white">
|
<div class="p-8 flex items-center justify-center bg-white">
|
||||||
<div class="w-full max-w-xs mx-auto">
|
<div class="w-full max-w-xs mx-auto">
|
||||||
|
<h1 class="text-lg text-center">LinkyLinky</h1>
|
||||||
<div>
|
<div>
|
||||||
<label for="company_website" class="block text-sm font-medium text-gray-700">
|
<label for="company_website" class="block text-sm font-medium text-gray-700">
|
||||||
Custom Shorturl
|
Custom Shorturl
|
||||||
|
@ -28,14 +27,68 @@
|
||||||
class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
|
class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
|
||||||
https://kauf.es/
|
https://kauf.es/
|
||||||
</span>
|
</span>
|
||||||
<input type="text" name="company_website" id="company_website"
|
<input type="text" name="shortcode" id="shortcode"
|
||||||
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
|
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
|
||||||
placeholder="custom url" />
|
placeholder="custom url" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hidden" name="shorturl_container" id="shorturl_container">
|
||||||
|
<div class="inline-flex" id="shorturl_copy" data-clipboard-target="#shorturl">
|
||||||
|
<p name="shorturl" id="shorturl" class:bg-green-200={copied}
|
||||||
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2">
|
||||||
|
link
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="bg-gray-200 border-gray-300 border-t border-b border-r text-black rounded-r-md sm:text-sm p-2 mt-1 cursor-pointer">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||||
|
<path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M7 4V2h10v2h3l1 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V5l1-1h3zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-500 text-xs">
|
||||||
|
Click to copy url to keyboard
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" onclick="createUrl()"
|
||||||
|
class="items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Create
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="./clipboard.min.js"></script>
|
||||||
|
<script>
|
||||||
|
//Clipboard stuff
|
||||||
|
const baseurl = "https://kauft.es";
|
||||||
|
const btn = document.getElementById("shorturl_copy");
|
||||||
|
const clipboard = new ClipboardJS(btn);
|
||||||
|
|
||||||
|
// Calls the api to create a new short url
|
||||||
|
function createUrl() {
|
||||||
|
shorturl = {
|
||||||
|
target: window.location.href,
|
||||||
|
shortcode: document.getElementById("shortcode").value
|
||||||
|
};
|
||||||
|
if (shorturl.shortcode == "" | !shorturl.shortcode) {
|
||||||
|
delete shorturl.shortcode;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch(`${baseurl}/api`, {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(shorturl),
|
||||||
|
headers: new Headers({
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(res => {
|
||||||
|
document.getElementById("shorturl").innerText=res.url;
|
||||||
|
document.getElementById("shorturl_container").className="";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue