-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (99 loc) · 3.3 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
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<style>
body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial,
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: hsl(0deg 0% 15%);
background: hsl(0deg 0% 90%);
}
header {
display: flex;
justify-content: center;
}
main {
inline-size: min(720px, 100% - 32px);
margin-inline: auto;
}
form {
display: flex;
flex-wrap: wrap;
}
input,
output {
inline-size: 100%;
margin-block-end: 1rem;
}
.inline-spinner {
display: none;
box-sizing: border-box;
block-size: 1em;
inline-size: 1em;
margin-inline-start: .5em;
border: 0.25em solid transparent;
border-block-start: 0.25em solid black;
border-radius: 50%;
animation: spin 1s infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
#status {
margin-block-start: 1rem;
font-weight: bold;
}
</style>
<title>redbean-shorturl</title>
</head>
<body>
<header>
<h1>redbean-shorturl</h1>
</header>
<main>
<form>
<label for="long">Enter a long URL to shorten:</label>
<input type="url" id="long" name="long" placeholder="https://example.com" required></input>
<label for="short">Enter a short alias:</label>
<input type="text" id="short" name="short" placeholder="example" required maxlength="80" pattern="^(\w|-|_)+$" title="Valid characters are alphanumeric, hyphen (-), and underscore (_)."></input>
<label for="preview">Short URL preview:</label>
<output id="preview" name="preview"></output>
<button>Make short URL!</button><span class="inline-spinner"></span>
<output id="status" name="status"></output>
</form>
</main>
<script>
const form = document.querySelector('form');
const spinner = document.querySelector('.inline-spinner');
const preview = document.querySelector('#preview');
preview.innerHTML = `<a href="${location.origin}/">${location.origin}/</a>`; // Set an initial value to reduce layout shift
form.elements.namedItem('short').addEventListener('input', e => {
preview.innerHTML = `<a href="${location.origin}/${e.target.value}">${location.origin}/${e.target.value}</a>`;
});
form.addEventListener('submit', async e => {
e.preventDefault();
e.submitter.disabled = true;
spinner.style.setProperty('display', 'inline-block');
const response = await fetch('/api.lua', {
method: 'POST',
body: new URLSearchParams(new FormData(form))
});
if (response.ok) {
form.elements.namedItem('status').textContent = `Success: ${location.origin}/${form.elements.namedItem('short').value} created!`;
}
else {
form.elements.namedItem('status').textContent = `Failure: ${await response.text()}`;
}
e.submitter.disabled = false;
spinner.style.setProperty('display', 'none');
});
</script>
</body>
</html>