86 lines
3.1 KiB
HTML
86 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KCA URL Shortener</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
</head>
|
|
|
|
<body class="bg-dark text-light">
|
|
<!-- Modal -->
|
|
<div class="modal fade show" tabindex="-1" style="display: block;">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content bg-dark text-light">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">URL Shortener</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
If you're seeing this, you probably either hit a bad link, or were curious as to what this is!
|
|
Welcome! There isn't a lot to see here, and the tool itself is password protected, so there isn't much to do.
|
|
If you want to use this for yourself, or just want to peek at the code, check out the source code <a
|
|
href="https://git.chrischro.me/KCA/UrlShortener" class="text-light">here!</a>
|
|
Other than that, the form below is used for creating links!
|
|
</p>
|
|
<form id="shortenForm">
|
|
<div class="mb-3">
|
|
<label for="url" class="form-label">URL:</label>
|
|
<input type="text" id="url" name="url" class="form-control" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="shortUrl" class="form-label">Custom Short URL (optional):</label>
|
|
<input type="text" id="shortUrl" name="shortUrl" class="form-control">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="passcode" class="form-label">Passcode:</label>
|
|
<input type="password" id="passcode" name="passcode" class="form-control" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Shorten URL</button>
|
|
</form>
|
|
|
|
<div id="result" style="margin-top: 20px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('shortenForm').addEventListener('submit', function (event) {
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
const data = {
|
|
url: formData.get('url'),
|
|
shortUrl: formData.get('shortUrl'),
|
|
passcode: formData.get('passcode')
|
|
};
|
|
|
|
fetch('/shorten', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
const resultDiv = document.getElementById('result');
|
|
if (result.error) {
|
|
resultDiv.innerHTML = `<p style="color: red;">${result.error}</p>`;
|
|
} else {
|
|
resultDiv.innerHTML = `<p>Short URL: <a href="${result.shortUrl}" class="text-light">${result.shortUrl}</a></p>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
document.getElementById('result').innerHTML = `<p style="color: red;">An error occurred.</p>`;
|
|
});
|
|
});
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
|
</body>
|
|
|
|
</html>
|