<!DOCTYPE html>
<html>

<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/style.css" />
    <title>Odyssey Register</title>
</head>

<body onload="typeWriter()" style="background-image: url('/img/map2.jpg'); background-size: cover; background-repeat: no-repeat;">
	<div class="body-container">
    <nav class="navbar navbar-expand-lg navbar-dark justify-content-between" id="display-2">
        <a class="navbar-brand" href="#">ODYSSEY</a>
        <a class="btn" href="/login">Login</a>
    </nav>

    <div class="jumbotron-fluid text-center my-5">
        <h1 class="display-4 blinking-cursor text-center" id="text"></h1>
    </div>

    <div id="inputDiv">
        <div class="my-5 col-lg-4 col-md-6 col-sm-10 col-10 offset-lg-4 offset-md-3 offset-sm-1 offset-1"
            style="padding: 1.5rem; margin-top: 0.25rem; border-radius: 1rem; border: medium solid grey;">
            <form class="form-group-row">
                <div class="text-center" id="title">
                    <label for="emailArea" class="col-lg-4 col-md-4 col-sm-4 col-form-label"
                        style="font-weight: 700;">Name</label>
                    <input placeholder="Enter your full name"
                        class="input-box col-lg-6 col-md-6 col-sm-6 col-xs-6 col-6" id="nameArea" autocomplete="name"
                        required>
                </div>
                <div class="text-center" id="title">
                    <label for="emailArea" class="col-lg-4 col-md-4 col-sm-4 col-form-label"
                        style="font-weight: 700;">Email</label>
                    <input placeholder="Enter Email" class="input-box col-lg-6 col-md-6 col-sm-6 col-xs-6 col-6"
                        id="emailArea" autocomplete="email" required>
                </div>
                <div class="text-center" id="title">
                    <label for="emailArea" class="col-lg-4 col-md-4 col-sm-4 col-form-label"
                        style="font-weight: 700;">Password</label>
                    <input type="Password" placeholder="Password"
                        class="input-box col-lg-6 col-md-6 col-sm-6 col-xs-6 col-6" id="passwordArea"
                        autocomplete="current-password" required>
                </div>
            </form>
            <div style="padding: 10px;" class="text-center">
                <button class="btn" onclick="sendCredentials()">Register</button>
            </div>
            <div id="message" class="text-center" style="font-family: 'Source Code Pro', monospace; color: yellow;">
            </div>
        </div>
    </div>
    <script src="/js/login.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</body>

</html>
