1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>aktsbot's guestbook</title>
7 <style>
8 body {
9 margin: 15px auto;
10 padding: 0 10px;
11 max-width: 650px;
12 line-height: 1.45em;
13 color: #555;
14 background-color: #f2f2f2;
15 font-family: sans-serif;
16 font-size: 10.5pt;
17 }
18
19 h1,
20 h2,
21 h3 {
22 font-family: sans-serif;
23 color: #3d3d3d;
24 }
25
26 h1 {
27 font-size: 13pt;
28 }
29 code {
30 font-family: monospace;
31 font-size: 9.5pt;
32 }
33
34 form,
35 form label,
36 form input,
37 form textarea {
38 display: block;
39 width: 100%;
40 box-sizing: border-box;
41 }
42
43 input,
44 textarea {
45 background-color: #f2f2f2;
46 border: 1px solid #888;
47 color: #555;
48 padding: 3px 4px;
49 }
50
51 a {
52 color: #4472c1;
53 text-decoration: none;
54 border-bottom: 1px dotted #7098dd;
55 }
56 a:hover {
57 color: #7098dd;
58 }
59 a:focus {
60 border: 2px dotted #7098dd;
61 outline: none;
62 }
63
64 footer {
65 margin-top: 2em;
66 border-top: 1px solid #aaa;
67 }
68
69 footer ul {
70 list-style: none;
71 text-align: center;
72 padding-left: 0;
73 }
74
75 footer ul li {
76 display: inline;
77 padding: 1em;
78 }
79
80 .message {
81 border: 1px dashed #aaa;
82 padding: 3px;
83 margin: 8px 0px;
84 }
85
86 .message p {
87 margin: 2px;
88 }
89
90 @media (prefers-color-scheme: dark) {
91 body {
92 color: #bfbfbf;
93 background-color: #1a1a1a;
94 }
95
96 h1,
97 h2,
98 h3 {
99 color: #e3e3e3;
100 }
101
102 a {
103 color: #87ceeb;
104 border-bottom: 1px dotted #d7d7d7;
105 }
106
107 a:hover {
108 color: #528b8b;
109 }
110
111 hr {
112 border-top: 1px solid #aaa;
113 }
114
115 footer {
116 border-top: 1px solid #aaa;
117 }
118
119 input,
120 textarea {
121 background-color: #1a1a1a;
122 color: #bfbfbf;
123 }
124
125 .message {
126 border-color: #666;
127 }
128 }
129
130 @media only screen and (min-width: 600px) {
131 form {
132 width: 50%;
133 }
134 }
135
136 </style>
137</head>
138<body>
139 <h1>sign my guestbook?</h1>
140 <p>
141 Hello there traveller! If you've words to share about this little corner of the lands,
142 please write them here in my guestbook. <a href="#f-email">Email me</a> if you wish for
143 the conversation to be private.
144 </p>
145 <p>
146 Please keep the messages in <code>plain-text</code>. <html> shall not pass!
147 </p>
148 <p>Feel free to grab the <a href="/git-web/gb">source code for this guestbook</a>.</p>
149
150 <form action="/gb" method="POST">
151
152 <label for="message">message*</label>
153 <textarea name="message" id="message" rows="10" required></textarea>
154
155 <label for="name">name*</label>
156 <input type="text" id="name" name="name" required />
157
158 <label for="website">website <small>(not your email)</small></label>
159 <input type="text" id="website" name="website" />
160
161 <label style="position:absolute; left:-5000px">
162 don't put anything in this field!<br>
163 <input type="text" name="email" style="position:absolute; left:-5000px">
164 </label>
165
166 <input type="submit" style="margin-top: 8px; cursor: pointer; max-width: 60px;" value="post" />
167
168 </form>
169
170 <p></p>
171 <p></p>
172
173 <div class="message">
174 <p><b><small>#2 <a href="#" target="_blank">sam</a> - 2026-06-12</small></b></p>
175 <p>
176 This is a test message. This is a test message. This is a test message.
177 This is a test message. This is a test message. This is a test message.
178 This is a test message. This is a test message. This is a test message.
179 This is a test message. This is a test message. This is a test message.
180 This is a test message. This is a test message. This is a test message.
181 This is a test message. This is a test message. This is a test message.
182 This is a test message. This is a test message. This is a test message.
183 This is a test message. This is a test message. This is a test message.
184 This is a test message. This is a test message. This is a test message.
185 This is a test message. This is a test message. This is a test message.
186 This is a test message. This is a test message. This is a test message.
187 This is a test message. This is a test message. This is a test message.
188 This is a test message. This is a test message. This is a test message.
189 This is a test message. This is a test message. This is a test message.
190 This is a test message. This is a test message. This is a test message.
191 This is a test message. This is a test message. This is a test message.
192 This is a test message. This is a test message. This is a test message.
193 This is a test message. This is a test message. This is a test message.
194 This is a test message. This is a test message. This is a test message.
195 This is a test message. This is a test message. This is a test message.
196 This is a test message. This is a test message. This is a test message.
197 This is a test message. This is a test message. This is a test message.
198 This is a test message. This is a test message. This is a test message.
199 </p>
200 </div>
201
202 <div class="message">
203 <p><b><small>#1 rin - 2026-06-12</small></b></p>
204 <p>
205 This is a test message. This is a test message. This is a test message.
206 This is a test message. This is a test message. This is a test message.
207 This is a test message. This is a test message. This is a test message.
208 </p>
209
210 <div class="message" style="margin-left: 12px;">
211 <p><b><small>akts - 2026-06-12</small></b></p>
212 <p>Howdy!</p>
213 </div>
214 </div>
215
216
217 <footer>
218 <ul>
219 <li><a href="mailto:box.ashishk@gmail.com" id="f-email">mail</a></li>
220 <li><a href="/">root</a></li>
221 <li><a href="http://www.wtfpl.net/">license</a></li>
222 </ul>
223 </footer>
224</body>
225</html>