foreverpyrite/sniph-bank
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a little explaination to the HTML as well.

Browse Source 
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.
This commit is contained in:
foreverpyrite
2025-12-02 20:16:19 -05:00
parent 8fe3f7d756
commit 8ae9920af4
3 changed files with 30 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
website/index.html
View File

@@ -1,19 +1,41 @@
<!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>