feat: both pages look good! Color slider works for both too

2024-04-20 18:18:54 -05:00
parent 7889518286
commit 7510bbacc8
4 changed files with 62 additions and 14 deletions
--- a/docs/about.html
+++ b/docs/about.html
@@ -32,28 +32,41 @@
        <li><a href="/docs/changelog.html">Changelog</a></li>
      </ul>
    </nav>
-    <div class="wrapper">
+    <div class="wrapper-changelog">
      <div class="about-text" value="">
        <h1>About</h1>
        <p>
-          This is a database tool to assist students of the University of Texas
-          - Austin in the biannual scramble for Jazz Appr- I mean course
-          registration process.
+          Note: At the time I developed this site, tools like UT Registration
+          Plus and Catalyst showed very outdated grade data, if any at all.
+        </p>
+        <p>I'm sure you've all seen this before:</p>
+        <div class="image-container">
+          <img
+            src="https://user-images.githubusercontent.com/53978637/233871181-d681c4a6-20a7-4544-9f1f-5e5fae1a6569.png"
+            alt="Screenshot of registration extension"
+            class="responsive-image"
+          />
+        </div>
+        <p>
+          It's the grade distribution page from UT Registration Plus, a popular
+          registration extension, and shows for more than half the courses
+          available.
        </p>
        <p>
-          I noticed other grade sites used outdated data, so I made my own.
-          Enjoy!
+          During Spring 2023 registration, I noticed popular sites like Catalyst
+          and UT Registration Plus showed outdated on grade distributions, or no
+          data at all. As a result, instead of paying attention to the
+          pipelining lecture in 429 that day, I decided to start working on this
+          website. Magically, my quiz grade average decreased dramatically that
+          week.
        </p>
      </div>
-      <div class="bg-form">
+      <div class="about-text">
        <p>
-          Use the
-          <a href="https://registrar.utexas.edu/schedules"
-            >official course name</a
-          >
-          whenever possible.
+          On April 17th, 2023, the project was born! Though it was finished
+          midway through registration, the following registration periods saw a
+          lot of use from students all over campus.
        </p>
-        <p>Some departments have a space in the middle (e.g., "C S")</p>
      </div>
    </div>
    <div class="footy">
--- a/docs/changelog.html
+++ b/docs/changelog.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Changelog - UT Austin Grade Distribution Viewer</title>
@@ -16,7 +15,13 @@
      content="UT, University of Texas at Austin, Grade viewer, grade distribution viewer, derex, grade distribution, ut austin"
    />
    <meta name="language" content="English" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"
+    >
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    </script>
    <style>
      @media screen and (max-width: 800px) {
        .leftcolumn,
@@ -97,5 +102,7 @@
      >
      </iframe>
    </div>
+    <script src="main.js"></script>
+    <script src="colorScheme.js"></script>
  </body>
 </html>
--- a/docs/main.css
+++ b/docs/main.css
@@ -90,6 +90,17 @@ nav ul li a:hover {
    /* background-color: rgba(0, 0, 0, .4); */
 }

+.wrapper-changelog {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center items horizontally */
+    flex-grow: 1; /* Allow .wrapper to grow and occupy remaining space */
+    row-gap: 20px;
+    text-align: center;
+    color: var(--font-color);
+    margin-top: 30px;
+}
+
 .submit-button {
    display: flex;
    padding: 5px 10px;
@@ -207,6 +218,23 @@ h1 {
    align-items: center;
 }

+.image-container {
+    width: 100%;
+    max-width: fit-content;
+    margin: 0 auto;
+    margin-bottom: 10px;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.responsive-image {
+    width: 100%;
+    height: auto;
+    display: block;
+    transition: transform 0.3s ease;
+}
+
 .fa-moon {
    color: #f1c40f;
 }
--- a/now.png
+++ b/now.png