shii.moe

Source for `shii.moe' website.
git clone git://git.knutsen.co/shii.moe
Log | Files | Refs | README | LICENSE

guestbook.html (6049B)


<!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 red;
            border-radius: 7pt;
            background: #f464;
        }
    </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>

    {% 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" required>
        <div class="textbox">
        <textarea class="comment-input input" name="comment"
                  placeholder="# Your comment&#x0a;&#x0a;(no links, ≤850 characters)"
                  required></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);

			req.addEventListener('load',
				window.location.reload.bind(window.location));
        }, 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 %}
		<center><p>No comment posted yet... :(</p></center>
        {% 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>