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

3
README.md
View File

@@ -84,3 +84,6 @@ There is a very low chance that someone wants to tinker, and in that case (assum
./tw-css/tailwindcss -i tw-css/input.css -o website/css/style.css -w ./tw-css/tailwindcss -i tw-css/input.css -o website/css/style.css -w
``` ```
But you have to be on 64-bit AMD Linux/WSL. Otherwise you gotta download your own. But you have to be on 64-bit AMD Linux/WSL. Otherwise you gotta download your own.
## Contact me.
ForeverPyrite. I use Discord btw.

7
website/account.html
View File

@@ -1,4 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- There isn't really anything special about this page: everything is just being rendered as is. -->
<!-- This page is entirely static, and ChatGPT highkey did most of the work here. I just made minor adjustments. -->
<!-- Feel free to change words around and refresh the page if you wanna see how that works. -->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -15,7 +18,7 @@
</div> </div>
<div class="flex-none gap-2"> <div class="flex-none gap-2">
<div class="text-right hidden sm:block"> <div class="text-right hidden sm:block">
<p class="font-bold">Welcome, Alex Doe</p> <p class="font-bold">Welcome, Jacob Ronalds</p>
<p class="text-xs">Last login: Today at 10:45 AM</p> <p class="text-xs">Last login: Today at 10:45 AM</p>
</div> </div>
<div class="dropdown dropdown-end"> <div class="dropdown dropdown-end">
@@ -117,7 +120,7 @@
<div class="mt-4 space-y-2"> <div class="mt-4 space-y-2">
<p><strong>Full Name:</strong> <p><strong>Full Name:</strong>
Alex M. Doe</p> Jacob L. Ronalds
<p><strong>Address:</strong> <p><strong>Address:</strong>
123 Phishing Lane, Anytown, USA 12345</p> 123 Phishing Lane, Anytown, USA 12345</p>
<p><strong>Phone:</strong> <p><strong>Phone:</strong>

22
website/index.html
View File

@@ -1,19 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Informs the browser this page uses the UTF-8 set of characters. Check out UTF-8 encoding -->
<meta charset="UTF-8"> <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"> <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> <title>Sniph Bank</title>
<!-- Acts as a way to import css from a different, relative, url. -->
<link href="./css/style.css" rel="stylesheet"> <link href="./css/style.css" rel="stylesheet">
</head> </head>
<!-- Body dictates the actual content of the HTML -->
<body class="min-h-[100vh] min-w-[100vw]"> <body class="min-h-[100vh] min-w-[100vw]">
<!-- Header is an organizational element -->
<header class="text-primary flex items-center h-[35vh]"> <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> <h1 class="text-8xl text-center text-primary w-full">Sniph Bank</h1>
</header> </header>
<!-- The main content of the HTML page, in this case, it only holds the form -->
<main class="flex justify-center items-center"> <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"> <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"> <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"> <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"> <input type="submit" class="btn btn-primary">
</form> </form>
</main> </main>