From 32e0f5890add0d6d528f6668c76d3f38ec0ca2b1 Mon Sep 17 00:00:00 2001
From: Jet Lin <jetlin101@gmail.com>
Date: Fri, 8 Mar 2024 01:15:56 -0800
Subject: [PATCH 1/3] added login bade code tips

---
 web/static/css/style.css | 56 ++++++++++++++++++++++++++++++++++++++++
 web/templates/index.html | 10 ++++++-
 2 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index a884904..19f2420 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -52,6 +52,56 @@ input::placeholder{
 	color: var(--white);
 }
 
+.handwriting-reminders{
+	padding: 0rem;
+	margin: 0rem;
+	text-align: right;
+	height: fit-content;
+	width: fit-content;
+	position: relative;
+	-o-transition-duration: 0.4s;
+	-moz-transition-duration: 0.4s;
+	-webkit-transition-duration: 0.4s;
+	transition-duration: 0.4s;
+}
+
+.tipslist{
+	display: none;
+	position: absolute;
+	top: 0rem;
+	right: -18rem;
+	padding: 1rem;
+	border: hidden;
+	border-radius: var(--radius);
+	background: var(--bg-gradient-B);
+	box-shadow: var(--shadow);
+	-o-transition-duration: 0.4s;
+	-moz-transition-duration: 0.4s;
+	-webkit-transition-duration: 0.4s;
+	transition-duration: 0.4s;
+}
+.tips{
+	margin: 0rem;
+	text-align: left;
+}
+.tips:nth-child(even){
+	background: var(--orange-glass-less);
+}
+.tips:nth-child(odd){
+	background: var(--orange-glass);
+}
+*:focus {
+	outline: none;
+}
+.handwriting-reminders:focus .tipslist{
+	cursor: pointer;
+	display: block;
+	-o-transition-duration: 0.4s;
+	-moz-transition-duration: 0.4s;
+	-webkit-transition-duration: 0.4s;
+	transition-duration: 0.4s;
+}
+
 
 body {
 	margin: 0;
@@ -526,6 +576,12 @@ input[type="submit"] {
 
 @media screen and (min-width: 300px) and (max-width: 880px) {
 
+	.tipslist{
+		top: -8rem;
+		right: -9rem;
+		max-width: min-content;
+	}
+
 	body {
 		background: linear-gradient(to bottom, var(--bg-gradient-A) 0%, var(--bg-gradient-B) 100%) fixed no-repeat;
 		overflow-x: hidden;
diff --git a/web/templates/index.html b/web/templates/index.html
index 6e77b46..b5075c1 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -12,7 +12,15 @@
 				<h1>User Login</h1>
 				<form action="/login" method="POST">
 					<input type="text" id="uid" name="uid" placeholder="Badge Code" />
-					<br><br>
+					<div class="handwriting-reminders" tabindex="0">
+						<h3 class="badgeCodeTips">Badge Code Tips:</h3>
+						<div class="tipslist" tabindex="0">
+							<h4 class="tips">1. NO SPACES</h4>
+							<h4 class="tips">2. All Letters are CAPITALIZED</h4>
+							<h4 class="tips">3. All Zeros are Slashed "Ø"</h4>
+							<h4 class="tips">4. Ask an Organizer if unsure</h4>
+						</div>
+					</div>
 					<input type="submit" value="Log In" />
 				</form>
 

From e3e89a61ee860ff95d07bde971b046cf4bd71ac7 Mon Sep 17 00:00:00 2001
From: Jet Lin <jetlin101@gmail.com>
Date: Fri, 8 Mar 2024 01:28:21 -0800
Subject: [PATCH 2/3] When user hovers over badge code tips text it becomes a
 cursor

---
 web/static/css/style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index 19f2420..5430796 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -93,6 +93,9 @@ input::placeholder{
 *:focus {
 	outline: none;
 }
+.handwriting-reminders:hover{
+	cursor: pointer;
+}
 .handwriting-reminders:focus .tipslist{
 	cursor: pointer;
 	display: block;

From d13ca858e920d16b560796e607470213d63d39ef Mon Sep 17 00:00:00 2001
From: Jet Lin <jetlin101@gmail.com>
Date: Fri, 8 Mar 2024 15:15:46 -0800
Subject: [PATCH 3/3] adding chagnes

---
 web/static/css/style.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index 5430796..4d941d0 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -53,9 +53,11 @@ input::placeholder{
 }
 
 .handwriting-reminders{
-	padding: 0rem;
-	margin: 0rem;
-	text-align: right;
+	padding: 0.005rem 1rem 0rem 1rem;
+	
+	margin: 1em 0rem 1em 0rem;
+	
+	text-align: center;
 	height: fit-content;
 	width: fit-content;
 	position: relative;