<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up</title>
</head>
<style>
    body {
        margin: 0;
        font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    }

    button {
        font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    }

    header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 4rem;
        border-bottom: 1px solid #EAEAEA; 
    }

    .logo {
        width: 185px;
        height: auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        left: 1.50rem;
    }

    #signin {
        width: 4rem;
        height: 2rem;
        position: relative;
        top: 25%;
        right: 1.50rem;
        border-radius: 8px;
        background-color: black;
        color: white;
        border: 0;
        outline: 0;
        cursor: pointer;
        padding-bottom: 3px;
        padding-left: 6px;
        padding-right: 6px;
    }

    h1 {
        text-align: center;
        margin-top: 2rem;
        font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    }

    .inputarea {
        text-align: center;
        font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    }

    input {
        border: 0;
        outline: 0;
        border: 1px solid #EAEAEA;
        width: 20rem;
        font-size: 17px;
        font-weight: 450;
        height: 2rem;
        font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
        border-radius: 4px;
        margin-top: 12px;
        margin-bottom: 12px;
        text-indent: 10px;
    }

    input:focus {
        font-weight: 500;
    }

    #signup {
        width: 20rem;
        height: 2.6rem;
        border-radius: 4px;
        background-color: #0070F3;
        color: white;
        border: 0;
        outline: 0;
        cursor: pointer;
        margin-top: 12px;
        margin-bottom: 12px;
        font-size: 16px;
    }

    p, a {
        color: #0271F3;
        text-align: center;
        font-size: 12px;
        margin-top: 12px;
    }

    p span {
        color: black;
    }

    .alertcontainer {
        width: 20rem;
        height: 2.4rem;
        background-color: #FFFAF1;
        margin: auto;
        border-radius: 8px;
        border: 1px solid #FFB52E;
    }

    .topBtn {
        width: 7rem;
        height: 2.4rem;
        background-color: #000000;
        border: 1px solid black;
        border-radius: 6px;
        color: white;
        font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
        outline: 0;
        transition: all 0.2s ease 0s;
        font-weight: 500;
        cursor: pointer;
        position: relative;
        top: 20%;
        right: 1rem;
    }
</style>
<body>
    <header>
        <img src="https://svgshare.com/i/YXU.svg" class="logo">
        <button class="topBtn" type="button" onclick="window.location = 'https://securesign.dotdevs.xyz/register';">Sign Up</button>
    </header>

    <h1>Sign Up</h1>

    <div class="inputarea">
        <form action="/register" method="POST">
            <input type="text" id="name" name="name" placeholder="Name" required><br>
            <input type="text" id="org" name="org" placeholder="Organization Name (optional)"><br>
            <input type="email" id="email" name="email" placeholder="Email Address" required><br>
            <input type="password" id="password" name="password" placeholder="Password" required><br>
            <button type="submit" style="padding-bottom: 3px;" type="submit" id="signup">Sign Up</button>
        </form>
    </div>
    <p style="font-size: 16px;"><span>Already have an account?</span> Log in</p>

    <% if (typeof err != 'undefined') { %>
        <div class="alertcontainer">
            <p style="color: #9F7321; font-size: 18px; font-weight: 500; margin: 0; position: relative; top: 50%; transform: translateY(-50%);">
                <%=err%>
            </p>
        </div>
    <% } %>
</body>
