newosinadjango/osinaweb/osinacore/templates/forgot-password-sent.html

{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Osina</title>

    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>


<body class="font-poppinsLight">
    <div class="w-full h-fit xlg1:h-[100vh] grid grid-cols-1 xlg1:grid-cols-2 gap-5">
        <!-- SIDE BANNER -->
        <div
            class="bg-gradient-to-b from-gray-100 to-blue-950 p-5 s:p-9 overflow-hidden w-full h-full border-r border-gray-100 duration-500 hidden xlg1:block relative">
            <div class="relative w-full h-full flex justify-center items-center">
                <div
                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
                <div
                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
                </div>
            </div>


            <div class="absolute w-full h-full hidden xlg1:flex justify-between items-center m-auto inset-0 z-10 p-9">
                <div class="flex flex-col">
                    <p class="text-white text-[30px] lg:text-[48px] xll:text-[70px] font-poppinsExtraBold">
                        PROVIDING
                        OPTIMAL
                        <br />SOLUTIONS<br />
                    </p>
                    <div class="flex justify-start items-center gap-2 mt-5">
                        <div class="w-[30px] h-[3px] bg-blue-500"></div>
                        <img src="{% static 'images/ositcom_logos/ositcomwhite.png' %}" class="w-[120px] h-auto">
                    </div>
                </div>
                <div class="absolute w-[400px] lg:w-[480px] xll:w-[550px] h-auto -right-40 bottom-5 animate-bouncePop">
                    <img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" class="w-full h-auto">
                </div>
            </div>
        </div>


        <!-- FORGOT PASSWORD FORM -->
        <div class="w-full h-[100vh] xlg1:h-full flex justify-center py-9 px-0 s:px-5 relative overflow-hidden xlg1:overflow-visible bg-gradient-to-b from-gray-100 to-blue-950 xlg1:from-white xlg1:to-white"
            id="loginRegisterContainer">

            <!-- Background blobs -->
            <div class="relative w-full flex justify-center items-center">
                <div
                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
                </div>
                <div
                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
                </div>
                <div
                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
                </div>
                <div
                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
                </div>


                <!-- EMAIL CONFIRMATION MESSAGE -->
                <div class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">

                    <!-- OSINA LOGO ON DESKTOP -->
                    <img src="{% static 'images/ositcom_logos/osinablue.png' %}" class="w-[250px] h-auto hidden xlg1:block">

                    <!-- OSINA LOGO ON MOBILE -->
                    <img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[220px] h-auto block xlg1:hidden">

                    <div class="w-full flex justify-center items-center px-5 s:px-0">
                        <div class="w-full s:w-[550px] gap-5 h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
                            <p class="text-secondosiblue font-light text-center text-base s:text-[17px]">We’ve emailed you instructions for resetting your password. You should receive them shortly.</br></br>
                                If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>