patx/micropie

{% extends 'layout.html' %}
{% block title %}Your Timeline{% endblock %}
{% block content %}
<h2>Your Timeline</h2>

<div class="form-container">
    <form action="/add_message" method="post">
        <textarea id="message-input" name="message" placeholder="What's happening?" required maxlength="140"></textarea>
        <div id="char-count">140 characters remaining</div>
        <button id="submit-btn" type="submit">Post</button>
    </form>
</div>
<script>
    const messageInput = document.getElementById('message-input');
    const charCount = document.getElementById('char-count');

    messageInput.addEventListener('input', function () {
        const remaining = 140 - messageInput.value.length;
        charCount.textContent = remaining + " characters remaining";

        if (remaining < 0) {
            charCount.style.color = 'red';
        } else {
            charCount.style.color = '#333';
        }
    });
</script>
<br><br>
<ul class="messages">
    {% for message in messages %}
        <li>
            <h3>{{ message[1] | safe }}</h3>
            <a href="/user/{{ message[0] }}">{{ message[0] }}</a> <small>@ {{ message[2] }}</small>
        </li>
    {% endfor %}
</ul>
{% endblock %}

{% block extra_css %}
<style>
    h2 {
        text-align: center;
        font-size: 28px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .form-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    #message-input {
        width: 100%;
        height: 100px;
        padding: 15px;
        font-size: 18px;
        border: 1px solid #ccc;
        border-radius: 8px;
        outline: none;
        transition: border-color 0.3s ease;
        resize: none;
    }

    #message-input:focus {
        border-color: #007bff;
    }

    #char-count {
        font-size: 14px;
        color: #777;
        text-align: right;
    }

    #submit-btn {
        padding: 15px;
        font-size: 18px;
        border: none;
        border-radius: 8px;
        background-color: #007bff;
        color: #fff;
        cursor: pointer;
        transition: background 0.3s ease;
        width: 25%;
    }

    #submit-btn:hover {
        background-color: #0056b3;
    }

    /* Responsive Design for Mobile */
    @media (max-width: 600px) {
        h2 {
            font-size: 22px;
            text-align: center;
        }

        .form-container {
            width: 90%;
            max-width: 100%;
            padding: 0 10px;
        }

        #message-input {
            font-size: 16px;
            padding: 12px;
            height: 100px;
        }

        #submit-btn {
            font-size: 16px;
            padding: 12px;
        }
    }
</style>
{% endblock %}