guestbook.html (6224B)
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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Shimo!!</title>
<style>
.name {
float: left;
}
.date {
float: right;
font-family: var(--monospace);
}
.date, .name {
color: #0007;
}
.comment-text {
margin-top: 0.5rem;
}
.comments {
margin-top: 3rem;
}
.comments a {
color: #4e87bd;
text-decoration: underline;
}
.comments a:hover {
color: #3d6f9f;
}
.comments h1, .comments h2, .comments h3,
.comments h4, .comments h5, .comments h6 {
text-align: left;
margin: 0.4em 0 0 0;
border-bottom: 1pt solid #0000000f;
}
.comments img {
max-width: 100%;
max-height: 20em;
display: block;
border: 2pt solid #0000001a;
border-radius: 5pt;
margin: 0.5em 0;
filter: drop-shadow(0 4pt 8pt #0004);
}
.input {
font-family: var(--serif);
padding: 0.4rem 0.6rem;
font-size: 0.9em;
width: 30%;
border: 1px solid #0004;
border-radius: 3pt;
}
.textbox {
margin: 0.5em 0;
padding: 0;
position: relative;
}
.textbox > i {
position: absolute;
left: 0.6em;
bottom: 0.7em;
opacity: 0.3;
font-size: 1rem;
}
.comment-input {
font-family: var(--monospace);
height: 8em;
margin: 0em;
}
.comment {
margin: 2rem 0 1.5rem 0;
background: #00000008;
padding: 0.7rem 1.2rem 0 1.2rem;
border-bottom: 3pt solid #0000001a;
}
.comment-text p:nth-child(1) {
margin-top: 0;
}
input[type="submit"] {
margin-left: 30%;
font-family: inherit;
transform-origin: left;
transform: translateX(-50%);
}
.error {
margin: 1em 0 2em 0;
padding: 1em 1.5em;
border: 2pt solid #ff6b0091;
border-radius: 10pt;
border-top-left-radius: 0;
background: #ce285bad;
color: white;
}
</style>
<link rel='stylesheet' type='text/css' href="style.css"/>
<link rel='icon' type='image/png' href="/mascots/8-square.png">
<link rel="preload" as="image" href="/background-300x300.png">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="content">
<a href="/"><h1>Shimo!!</h1></a>
<div class="titleBar">
<div class="titleButton"><a href="/music">Musik</a></div>
<div class="titleButton"><a href="/school">Skole</a></div>
<div class="titleButton"><a href="/norsk">Norsk</a></div>
<div class="titleButton"><a href="/books">Bøker</a></div>
<div class="titleButton"><a href="/blog">Blog</a></div>
</div>
{% if error_msg is defined %}
<p class="error">{{ error_msg }}</p>
{% endif %}
<form action="/postcomment" method="POST" name="commentBox">
<input class="name-input input"
name="name" placeholder="Your name"
{% if dname is defined %} value="{{ dname }}" {% endif %}
required>
<div class="textbox">
<textarea class="comment-input input" name="comment"
placeholder="# Your comment

(no links, ≤850 characters)"
required>{{ dcomment }}</textarea>
<i class="fab fa-markdown"></i>
</div>
<input type="submit" value="Post">
</form>
<!-- add gender radio boxes (femboy) -->
<script>
// Script to get local time, will just fall back on server time
// if the script does not run.
const form = document.forms.namedItem("commentBox");
form.addEventListener('submit', ev => {
ev.preventDefault();
const formData = new FormData(form);
const now = new Date();
const { year, month, day } = {
year: String(now.getFullYear()),
month: String(now.getMonth() + 1).padStart(2, '0'),
day: String(now.getDate()).padStart(2, '0')
};
const { hour, minute } = {
hour: String(now.getHours()).padStart(2, '0'),
minute: String(now.getMinutes()).padStart(2, '0')
};
const dateString = `${year}-${month}-${day} ${hour}:${minute}`;
// Append to form:
formData.append('date', dateString);
// Send form:
const req = new XMLHttpRequest();
req.open(form.method, form.action, true);
req.onload = event => {
document.write(req.response);
};
req.send(formData);
}, false);
</script>
{% if comments is defined %}
<div class="comments">
{% for comment in comments %}
<div class="comment">
<span class="name">~ {{ comment['name'] }}</span><span class="date">~{{ comment['date'] }}</span>
<div style="clear: left;"></div>
<div class="comment-text" style="font-size: 120%;">
{{ comment['comment'] | safe }}
</div>
</div>
{% else %}
<p align="center">No comment posted yet... :(</p>
{% endfor %}
</div>
{% else %}
<center><p>Comments weren't given by renderer!!</p></center>
{% endif %}
</div>
<noscript><style>#mascot { opacity: 0.85; }</style></noscript>
<img src="/mascots/8.png" id="mascot"></img>
<script src="/colours.js"></script>
<script src="/image.js"></script>
<script>randomMascot(NOVELTY);</script>
</body>
</html>
|