8ae9920af4
Sorry if you're looking to understand the TailwindCSS and DaisyUI. There's plenty of guides and documentation out there lol. I'm probably done with this. Unless I need to do unprivilged stuff.
44 lines
2.4 KiB
HTML
44 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Informs the browser this page uses the UTF-8 set of characters. Check out UTF-8 encoding -->
|
|
<meta charset="UTF-8">
|
|
<!-- This goes way back when, since mobile devices spoof their width. This helps correct scaling with that (I think) -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The title here is the title of the tab in the browser when it renders this page -->
|
|
<title>Sniph Bank</title>
|
|
<!-- Acts as a way to import css from a different, relative, url. -->
|
|
<link href="./css/style.css" rel="stylesheet">
|
|
</head>
|
|
<!-- Body dictates the actual content of the HTML -->
|
|
<body class="min-h-[100vh] min-w-[100vw]">
|
|
<!-- Header is an organizational element -->
|
|
<header class="text-primary flex items-center h-[35vh]">
|
|
<!-- H1 is the largest header, accompanied by TailwindCSS utility classes to make it way way bigger, and centered --->
|
|
<h1 class="text-8xl text-center text-primary w-full">Sniph Bank</h1>
|
|
</header>
|
|
<!-- The main content of the HTML page, in this case, it only holds the form -->
|
|
<main class="flex justify-center items-center">
|
|
<!-- The most important parts here are "method" and "action" -->
|
|
<!-- The "method" attribute says "use this HTTP method when the user submits the form" -->
|
|
<!-- The "action" attribute says "send that HTTP method to this endpoint when the user submits the form" -->
|
|
<!-- So with this in mind, the "request-line" of the request sent by the sumbit button on this form ends up looking like "POST /login HTTP/1.1"" -->
|
|
<form method="post" action="/login" class="flex gap-y-2 flex-col card w-[20vw]" autocomplete="off">
|
|
<!-- A required text field of the form, with the name "username" -->
|
|
<input type="text" required name="username" placeholder="Username" class="input w-full">
|
|
<!-- A required text field of the form, specifically annoatted as a password field so the browser masks input, with the name "password" -->
|
|
<input type="password" required name="password" placeholder="Password" class="input w-full">
|
|
<!-- Clicking this button will send an HTTP request looking something like: -->
|
|
<!--
|
|
POST /login HTTP/1.1
|
|
Host: sniphbank.com
|
|
Other-Headers: ...
|
|
|
|
username=username_input&password=password_input
|
|
-->
|
|
<input type="submit" class="btn btn-primary">
|
|
</form>
|
|
</main>
|
|
</body>
|
|
</html>
|