lee
/
subline


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>The Subline</title>
        <link rel="icon" type="img/png" href="/shared/images/logo.png">
        <link rel="stylesheet" href="/otherPages/style.css">
        <link rel="stylesheet" href="/shared/shared.css">
        <link href="https://fonts.googleapis.com/css?family=Saira&display=swap" rel="stylesheet">
    </head>
    <body id="register">
        <div class="header">
            <a class="headerStart" href="/" >
                <img src="/shared/images/logo.png" alt="Subline">
                <div class='headerLogo'>THE SUBLINE</div>
            </a>
        </div>

        <% include ../shared/banner.ejs %>

        <form method="post">
            <h1> Join The Subline </h1>

            <label id="nameLabel">Restaurant Name
                <input type="text" name="name" required>
            </label>
    
            <label>Email
                <input type="email" name="email" required>
            </label>
    
            <label>Password
                <input type="password" name="password" required>
            </label>
    
            <label>Confirm Password
                <input type="password" name="confirmPassword" required>
            </label>
    
            <label id="agreement">
                <input type="checkbox" name="agree" required>

                <p>I agree to the 
                    <a class="link" href="/privacy">Privacy Policy</a> and the 
                    <a class="link" href="/terms">Terms and Conditions</a>
                </p>
            </label>

            <h2 class="customText">SIGN UP WITH:</h2>

            <button id="squareButton" class="button" formaction="/squarelogin">
                <svg aria-hidden="true" viewBox="0 0 44 44" width="44" height="44">
                    <path fill="currentColor" d="M36.65 0H7.354A7.354 7.354 0 0 0 0 7.354V36.65a7.354 7.354 0 0 0 7.354 7.354H36.65a7.353 7.353 0 0 0 7.354-7.354V7.354A7.352 7.352 0 0 0 36.65 0zm-.646 33.685a2.32 2.32 0 0 1-2.32 2.32H10.325a2.32 2.32 0 0 1-2.321-2.32v-23.36a2.32 2.32 0 0 1 2.321-2.321h23.359a2.32 2.32 0 0 1 2.32 2.321v23.36z"></path>
                    <path fill="currentColor" d="M17.333 28.003c-.736 0-1.332-.6-1.332-1.339V17.34c0-.739.596-1.339 1.332-1.339h9.338c.738 0 1.332.6 1.332 1.339v9.324c0 .739-.594 1.339-1.332 1.339h-9.338z"></path>
                </svg>
                <svg aria-hidden="true" viewBox="0 0 66 22" width="105" height="35">
                    <path d="M11.2 10c-.7-.2-1.3-.4-1.8-.6C8.4 9 8 8.4 8 7.6c0-1.5 1.5-2.2 3-2.2 1.4 0 2.6.6 3.5 1.6l.1.1 1.2-.9-.1-.1c-1.1-1.4-2.7-2.2-4.6-2.2-1.2 0-2.4.3-3.2.9-1 .8-1.5 1.7-1.5 2.9 0 2.7 2.6 3.4 4.6 3.9 2.1.6 3.4 1 3.4 2.6s-1.3 2.6-3.2 2.6c-1 0-2.8-.3-3.9-2l-.1-.1-1.2.9v.1c1.1 1.6 2.9 2.5 5.1 2.5 2.9 0 4.9-1.6 4.9-4.1 0-2.8-2.7-3.5-4.8-4.1z" fill="currentColor"></path>
                    <path d="M25.5 9.5V8h1.4v14h-1.4v-5.5c-.8 1.1-2 1.7-3.4 1.7-2.7 0-4.5-2.1-4.5-5.2s1.9-5.2 4.5-5.2c1.4-.1 2.6.6 3.4 1.7zM19.1 13c0 2.9 1.6 3.9 3.2 3.9 2 0 3.3-1.5 3.3-3.9s-1.3-3.9-3.3-3.9c-2.4 0-3.2 2-3.2 3.9z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"></path>
                    <path d="M36.2 8v5.5c0 1.9-1.3 3.3-3.2 3.3-1.5 0-2.3-.9-2.3-2.8V8h-1.4v6.4c0 2.4 1.3 3.8 3.5 3.8 1.4 0 2.5-.6 3.3-1.6V18h1.4V8h-1.3z" fill="currentColor"></path>
                    <path d="M40.3 9c1-.8 2.4-1.3 3.9-1.3 2.2 0 3.6 1.1 3.6 3V18h-1.4v-1.1c-.7.9-1.7 1.3-3.1 1.3-2.2 0-3.5-1.2-3.5-3.1 0-2.5 2.3-2.8 3.3-3 .2 0 .3-.1.5-.1 1.4-.2 2.7-.4 2.7-1.6 0-1.3-1.7-1.4-2.2-1.4-.9 0-2.2.3-3.1 1v.2L40.3 9zm.9 6.1c0 1.6 1.5 1.8 2.2 1.8 1.4 0 2.9-.8 2.9-2.9v-1.4c-.7.4-1.7.6-2.5.8l-.4.1c-1.5.1-2.2.5-2.2 1.6z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"></path>
                    <path d="M55.9 8.2c-.3-.2-.9-.4-1.4-.4-1.1 0-2.2.6-2.8 1.5V8h-1.4v10h1.4v-5.4c0-2.4 1.3-3.4 2.7-3.4.4 0 .8.1 1.1.2l.1.1.3-1.3z" fill="currentColor"></path>
                    <path d="M56.3 13c0-3.1 1.9-5.3 4.7-5.3 2.7 0 4.5 1.9 4.5 4.7V13.2h-7.7c0 2.2 1.4 3.6 3.4 3.6 1.2 0 2.2-.5 2.8-1.3l.1-.1 1 .9-.1.1c-.7.8-1.9 1.8-3.9 1.8-2.9 0-4.8-2.1-4.8-5.2zm4.6-3.9c-1.7 0-2.9 1.1-3.1 2.9H64c-.1-1.4-1-2.9-3.1-2.9z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"></path>
                </svg>
            </button>

            <button id="noneButton" class="button" formaction="/merchant/create/none">NO POS</button>

            <!-- <a class="button buttonWithBorder" href="/cloverlogin">Sign Up with Clover</a> -->

            <a class="link" href="/login">Already have an account? Please Sign In</a>
        </form>

        <% include ../shared/footer %>

        <script>
            let locals = <%- JSON.stringify(locals) %>

            if(locals.banner !== undefined){
                let bannerElem = document.getElementById("banner");
                bannerElem.children[0].style.background = locals.banner.color;
                bannerElem.children[1].innerText = locals.banner.message;
                bannerElem.style.display = "flex";

                switch(banner.type){
                    case "error":
                        bannerElem.children[0].innerHTML = `
                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="15" y1="9" x2="9" y2="15"></line>
                                <line x1="9" y1="9" x2="15" y2="15"></line>
                            </svg>
                        `;
                        break;
                    case "success":
                        bannerElem.children[0].innerHTML = `
                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <line x1="12" y1="8" x2="12" y2="12"></line>
                                <line x1="12" y1="16" x2="12.01" y2="16"></line>
                            </svg>
                        `;
                        break;
                    default: 
                        bannerElem.children[0].innerHTML = `
                            <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                <polyline points="22 4 12 14.01 9 11.01"></polyline>
                            </svg>
                        `;
                }

                let timer = setTimeout(()=>{
                    bannerElem.style.display = "none"
                }, 7000);

                bannerElem.children[2].onclick = ()=>{
                    bannerElem.style.display = "none";
                    clearTimeout(timer);
                }
            }
        </script>
    </body>
</html>