<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>code</title>
    <style>
        body {
            background: #3c3d3c;
        }

        .styled-box {
            display: inline-block;
            min-width: 50%;
            max-width: 100%;
            margin: 25px 0;
            font-size: 2em;
            font-family: sans-serif;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
            background: #7d2fb5;
        }

        ::placeholder {
            color: #35005b;
            opacity: 70%;
        }

        .styled-box form {
            position: relative;
            display: flex;
            flex-direction: column;
            padding-bottom: 3.4rem;
        }

        .styled-box input {
            margin: .4rem;
            font-size: 2rem;
            color: #35005b;
        }

        .styled-box input[type="submit"]{
            position: absolute;
            top: 7rem;
            right: 0;
        }

        .styled-box p {
            color: white;
            font-weight: bold;
            text-align: center;
            max-height: 0;
            margin: 0;
            opacity: 0;
            animation-name: fade;
            animation-duration: 5s;
        }

        @keyframes fade {
            15%, 85%{
                max-height: 6rem;
                margin: .6rem;
                opacity: 1;
            }
            0%, 100% {
                max-height: 0;
                margin: 0;
                opacity: 0;
            }
        }


    </style>
</head>
<body>
<div class="styled-box">
    <form action="/add_code" method="post">
        <input type="text" id="email" name="email" placeholder="email">
        <input type="text" id="code" name="code" placeholder="code">
        <input type="submit" id="submit" value="Send">
    </form>
    {% if submitted %}
    <p>{{code}} was enabled</p>
    {% endif %}

</div>
</body>
</html>