ti-link-shortener/templates/image.j2

{% extends "bootstrap/base.html" %}
{% block title %}tia.paste{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
{% endblock %}

{% block navbar %}
{% include "fragments/navbar.j2" %}
{% endblock %}

{% block content %}
    <iframe id="apps" src="https://technicalincompetence.club/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
    <div id="overlay" style="display: none;" onclick="showApps();"></div>
<div class="container" style="margin-top: 15px">
    {% if success_msg %}
        <div id="success-alert" class="alert alert-success" role="alert">{{ success_msg }}</div>
    {% endif %}
    <div id="error-alert" class="alert alert-danger" role="alert" style="display: none;">{{ error_msg }}</div>
    <form method="post" enctype="multipart/form-data">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <label>Select an image:</label>
                <br>
                <input type=file name=file>
                <br><br>
                <button type="submit" class="btn btn-primary" id="submit">Upload Image</button>
                <br>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
function showApps () {
    $("#apps").toggle();
    $("#overlay").toggle();
}
</script>
{% endblock %}