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

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Screw You Bardo</title>
		<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
		<link rel="icon" type="image/x-icon" href="https://www.foreverpyrite.com/favicon.ico">
		<script defer src="{{ url_for('static', filename='script.js') }}"></script>
	</head>

	<body class=" flex justify-center items-center h-screen bg-[#1F1F1F] text-white">
		<main class="flex flex-col w-11/12 h-[90vh] bg-[#2E2E2E] rounded-lg shadow-lg overflow-hidden">
			<section id="response-section" class="flex-1 p-5 bg-[#1E1E1E] overflow-y-auto text-base leading-relaxed scroll-smooth">
				<pre id="response-area" class="text-lg whitespace-pre-wrap" style="font-family: inherit;">Response will appear here.</pre>
			</section>

			<section class="py-4 px-5 bg-[#3A3A3A]">
				<form id="url-form" class="flex gap-2">
					<input id="url_box" type="url" name="url" placeholder="Paste the lecture URL here." required autofocus class="flex-1 py-2 px-3 bg-[#4A4A4A] text-white text-base rounded-md focus:outline-none placeholder-[#B0B0B0]">
					<button type="submit" id="submit" class="py-2 px-5 bg-[#5A5A5A] text-white text-base rounded-md hover:bg-[#7A7A7A] disabled:bg-[#3A3A3A] disabled:cursor-not-allowed">
						Submit
					</button>
				</form>
			</section>
		</main>
	</body>
</html>
