-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (110 loc) · 4.47 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
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Santa's Magic Mailbox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-maxlength/1.9.0/bootstrap-maxlength.min.js"></script>
<style>
body {
background-image: url('https://images.unsplash.com/photo-1545048702-79362596cdc9');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.content-box {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
}
h1 {
display: flex;
align-items: center;
gap: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// used only to allow local serving of files
$.ajaxSetup({
beforeSend: function(xhr) {
if (xhr.overrideMimeType) {
xhr.overrideMimeType("application/json");
}
}
});
$('textarea#text').maxlength({
alwaysShow: true
});
$('#text').focus(); // set initial focus
$('form#submit').submit(function(event) {
$('#letter-input-submit').prop('disabled', true);
// process the form
$.ajax({
type: 'POST',
url: '/prod/stack/respond',
data: JSON.stringify({
'text': $('#text').val(),
'cdn_prefix': window.location.hostname
}),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
encode: true
})
.done(function(data, textStatus, jqXHR) {
$('#letter-input-submit').prop('disabled', false);
if (data.error) {
$('#url-group').addClass('has-error'); // add the error class to show red input
$('#letter-error').show().text(data.error); // add the actual error message under our input
} else {
$('form#submit').hide(); // hide initial submit form
$('form#result').show(); // and show the one used to display the results
}
})
.fail(function(_, _, errorThrown) {
$('#letter-input-submit').prop('disabled', false);
$('#url-group').addClass('has-error'); // add the error class to show red input
$('#letter-error').show().text("Server error: " + errorThrown); // add the actual error message under our input
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
$('form#result').submit(function(event) {
location.reload();
});
});
</script>
</head>
<body>
<br></br>
<div class="container mt-5">
<div class="content-box">
<h1>Santa's Mailbox
<i class="bi bi-tree-fill" style="color: green;"></i>
</h1>
<br />
<form id="submit">
<p>This magic website will send your letter right to Santa. Each letter is guaranteed to reach the North Pole
just in time for the holidays. Type your letter below, then press `Send'!</p>
<div id="url-group" class="form-group">
<br></br>
<label for="text">Your letter:</label>
<textarea class="form-control" required rows="10" maxlength="5000" id="text"></textarea>
<div class="help-block" style="display: none" id="letter-error"></div>
</div>
<button type="submit" class="btn btn-success" id="letter-input-submit">Send</button>
</form>
<form id="result" style="display: none">
<div class="alert alert-success">Santa will email you soon!</div>
<div class="form-group">
</div><button type="submit" class="btn btn-success" id="page_reload">Write Santa again?</button>
<div>
</div>
</form>
</div>
</div>
</body>
</html>