shii.moe

{% extends 'layout.html' %}
{% block head %}
    <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>
{% endblock %}
{% block header %}
    <a href="/"><h1>{% block title %}Guestbook{% endblock %}!!</h1></a>
{% endblock %}
{% block content %}
    {% 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&#x0a;&#x0a;(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 %}
{% endblock %}