From 2113f1ff6dfd90c73477a948af26b7629b5769a0 Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Thu, 30 May 2024 22:31:40 -0500
Subject: [PATCH] feat: less word clutter for a better UI

---
 docs/index.html |  7 ++++---
 docs/main.css   | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index bc724a9..f0167eb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -67,14 +67,15 @@
       <p>
         Some departments have a space in the middle (e.g., "C S")
       </p>
+      <p>Course Name is optional, but used for duplicate ID courses (e.g. "UGS 303")</p>
       <br>
       <form action="">
         <!-- Data is separated into course number, course prefi;x, and course name-->
-        <label for="courseField">Department (e.g., "MUS"):</label>
+        <label for="courseField">Department (e.g. "MUS"):</label>
         <input type="text" id="courseField" name="fname" required><br><br>
-        <label for="courseNum">Course Number (e.g., "307"):</label>
+        <label for="courseNum">Course Number (e.g. "307"):</label>
         <input type="text" id="courseNum" name="fname" required><br><br>
-        <label for="courseName">Course Name (Optional, for same-number classes (e.g., "UGS 303")):</label>
+        <label for="courseName">Course Name (e.g. "JAZZ APPRECIATION-WB"):</label>
         <input type="text" id="courseName" name="fname"><br><br>
 
         <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
diff --git a/docs/main.css b/docs/main.css
index cad54b0..2dd2b21 100644
--- a/docs/main.css
+++ b/docs/main.css
@@ -135,6 +135,45 @@ nav ul li a:hover {
     max-width: 800px;
 }
 
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+  }
+  
+.tooltip .tooltiptext {
+visibility: hidden;
+width: 120px;
+background-color: #555;
+color: #fff;
+text-align: center;
+border-radius: 6px;
+padding: 5px 0;
+position: absolute;
+z-index: 1;
+bottom: 125%;
+left: 50%;
+margin-left: -60px;
+opacity: 0;
+transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+content: "";
+position: absolute;
+top: 100%;
+left: 50%;
+margin-left: -5px;
+border-width: 5px;
+border-style: solid;
+border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+visibility: visible;
+opacity: 1;
+}
+
 .bg-form {
     background-color: var(--container-color);
     /* grid-column: 1;