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

This commit is contained in:
2024-04-20 18:18:54 -05:00
parent 7889518286
commit 7510bbacc8
4 changed files with 62 additions and 14 deletions

View File

@@ -32,28 +32,41 @@
<li><a href="/docs/changelog.html">Changelog</a></li> <li><a href="/docs/changelog.html">Changelog</a></li>
</ul> </ul>
</nav> </nav>
<div class="wrapper"> <div class="wrapper-changelog">
<div class="about-text" value=""> <div class="about-text" value="">
<h1>About</h1> <h1>About</h1>
<p> <p>
This is a database tool to assist students of the University of Texas Note: At the time I developed this site, tools like UT Registration
- Austin in the biannual scramble for Jazz Appr- I mean course Plus and Catalyst showed very outdated grade data, if any at all.
registration process. </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>
<p> <p>
I noticed other grade sites used outdated data, so I made my own. During Spring 2023 registration, I noticed popular sites like Catalyst
Enjoy! 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> </p>
</div> </div>
<div class="bg-form"> <div class="about-text">
<p> <p>
Use the On April 17th, 2023, the project was born! Though it was finished
<a href="https://registrar.utexas.edu/schedules" midway through registration, the following registration periods saw a
>official course name</a lot of use from students all over campus.
>
whenever possible.
</p> </p>
<p>Some departments have a space in the middle (e.g., "C S")</p>
</div> </div>
</div> </div>
<div class="footy"> <div class="footy">

View File

@@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Changelog - UT Austin Grade Distribution Viewer</title> <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" content="UT, University of Texas at Austin, Grade viewer, grade distribution viewer, derex, grade distribution, ut austin"
/> />
<meta name="language" content="English" /> <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" /> <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> <style>
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.leftcolumn, .leftcolumn,
@@ -97,5 +102,7 @@
> >
</iframe> </iframe>
</div> </div>
<script src="main.js"></script>
<script src="colorScheme.js"></script>
</body> </body>
</html> </html>

View File

@@ -90,6 +90,17 @@ nav ul li a:hover {
/* background-color: rgba(0, 0, 0, .4); */ /* 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 { .submit-button {
display: flex; display: flex;
padding: 5px 10px; padding: 5px 10px;
@@ -207,6 +218,23 @@ h1 {
align-items: center; 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 { .fa-moon {
color: #f1c40f; color: #f1c40f;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB