
<!DOCTYPE html>
<html>

<head>
    <title>Sign In - TigerLake</title>
    <link rel="icon" href="../uploads/branding/tigerlake-tiger-icon.svg">
    <script src="https://cdn.tailwindcss.com"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

</head>

<body class="bg-gradient-to-br from-gray-800 to-gray-900">
    <div class="relative container m-auto px-6 md:px-12 xl:px-40">
<div class="min-h-screen flex justify-center items-center">
    <div class="w-full max-w-screen-xl shadow md:flex md:flex-row">
        <div class="bg-gray-800 md:w-1/2 xl:w-5/12 p-6 sm:p-12 px-4 rounded-lg md:rounded-l-lg md:rounded-r-none">
            <div class="text-center">
                <img src="../uploads/branding/tigerlake-full.svg" alt="TigerLake" class="w-40 mx-auto" />
            </div>
            <div class="mt-12 flex flex-col items-center">
                <h1 class="text-2xl xl:text-3xl font-bold font-mono text-gray-50">
                    Sign In
                </h1>
                <div class="w-full mt-8">
                    <div class="flex flex-col items-center">
                        <button onclick="location.href='login'" type="button" class="flex items-center px-10 py-4 font-medium tracking-wide text-white capitalize   bg-indigo-500 rounded-md hover:bg-indigo-700  focus:outline-none focus:bg-indigo-800   transition duration-300 transform active:scale-95 ease-in-out">
                            <div class="bg-white p-2 rounded-full">
                                <svg class="w-5" viewBox="0 0 533.5 544.3">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#5865f2;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
                                </svg>
                            </div>
                            <span class="pl-2 mx-1">Sign In with Discord</span>
                         </button>
                    </div>

                    <div class="my-12 border-b text-center border-gray-700">
                        <!-- Other content here -->
                    </div>

                    <div class="mx-auto max-w-xs">
                        <p class="mt-6 text-xs text-gray-400 text-center">
                            I agree to abide by TigerLakes's<br>
                            <a href="#" class="border-b border-gray-500 border-dotted">
                                Terms of Service
                            </a>
                            and its
                            <a href="#" class="border-b border-gray-500 border-dotted">
                                Privacy Policy
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="hidden md:flex md:flex-1 bg-cover bg-center backdrop-grayscale rounded-r-lg" style="background-image: url('https://images.unsplash.com/photo-1605092676920-8ac5ae40c7c8');">
        </div>      
    </div>
</div>
</div> 
</body>

</html>
