{% extends "layout.html" %} {% block content %}

<form action="/process" method="get">
    <input class="input is-rounded inputHeight" type="text" placeholder="Enter path to your Music directory/ song" name="path"
        width="150px">

    <br>
    <br>

    <br>
    <br>


    <input type="submit" value="Process" class="button is-primary" id="anim" style="font-size:25px; border-radius:20px;">
</form>


{% endblock content %} {% block button %}
<div id="vis" class="fadein_slowly">

</div>{% endblock button %} {% block script %}
<script>
    document.getElementById('anim').onclick = function () {

        elem = document.getElementById('vis');
        elem.style.visibility = "visible";

        elem.style.top = "0";
        elem.style.left = "0";
        elem.style.width = "100%";

        elem.style.height = "100%";
        elem.style.borderRadius = "0px";

    }
</script> {% endblock script %}