DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: form blurb text centered

Browse Source
This commit is contained in:
Derek Chen
2025-10-19 02:28:08 -05:00
parent b6120ffd40
commit 8ad1b2c694
2 changed files with 186 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

288
docs/index.html
View File

@@ -1,143 +1,203 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
<head> gtag("config", "G-Z5B0S1WMC4");
<!-- Google tag (gtag.js) --> </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"></script> <meta charset="utf-8" />
<script> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
window.dataLayer = window.dataLayer || []; <title>UT Austin Grade Distribution Viewer</title>
function gtag() { dataLayer.push(arguments); } <link rel="icon" href="favicon.ico" />
gtag('js', new Date()); <meta
name="description"
content="An up to date grade distribution viewer for students at the University of Texas at Austin"
/>
<meta name="author" content="Derek Chen" />
<meta
name="keywords"
content="UT, Austin, Grade, Distribution, Grades, University of Texas, UT Austin, ut grade distributions, ut grades plus, grades+"
/>
<meta
property="og:description"
content="Explore UT Austin's grade distributions with two simple clicks!"
/>
<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>
</head>
gtag('config', 'G-Z5B0S1WMC4'); <body>
</script> <nav>
<meta charset='utf-8'> <ul>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>UT Austin Grade Distribution Viewer</title>
<link rel="icon" href="favicon.ico">
<meta name="description" content="An up to date grade distribution viewer for students at the University of Texas at Austin">
<meta name="author" content="Derek Chen">
<meta name="keywords" content="UT, Austin, Grade, Distribution, Grades, University of Texas, UT Austin, ut grade distributions, ut grades plus, grades+">
<meta property="og:description" content="Explore UT Austin's grade distributions with two simple clicks!">
<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>
</head>
<body>
<nav>
<ul>
<!-- <li><a href="/docs/index.html">Home</a></li> <!-- <li><a href="/docs/index.html">Home</a></li>
<li><a href="/docs/about.html">About</a></li> <li><a href="/docs/about.html">About</a></li>
<li><a href="/docs/changelog.html">Changelog</a></li> --> <li><a href="/docs/changelog.html">Changelog</a></li> -->
<li><a href="https://derec4.github.io/ut-grade-distribution-viewer/index">Home</a></li> <li>
<li><a href="https://derec4.github.io/ut-grade-distribution-viewer/about">About</a></li> <a href="https://derec4.github.io/ut-grade-distribution-viewer/index"
<li><a href="https://derec4.github.io/ut-grade-distribution-viewer/changelog">Changelog</a></li> >Home</a
>
</li>
<li>
<a href="https://derec4.github.io/ut-grade-distribution-viewer/about"
>About</a
>
</li>
<li>
<a
href="https://derec4.github.io/ut-grade-distribution-viewer/changelog"
>Changelog</a
>
</li>
<div class="top-left"> <div class="top-left">
<input type="checkbox" class="checkbox" id="colorToggle"> <input type="checkbox" class="checkbox" id="colorToggle" />
<label for="colorToggle" class="checkbox-label"> <label for="colorToggle" class="checkbox-label">
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>
<i class="fas fa-sun"></i> <i class="fas fa-sun"></i>
<span class="ball"></span> <span class="ball"></span>
</label> </label>
</div> </div>
</ul> </ul>
</nav> </nav>
<div class="wrapper"> <div class="wrapper">
<div class="about-text" value=""> <div class="about-text" value="">
<h1>Intro</h1> <h1>Intro</h1>
<p> <p>
This is a database tool to assist students of the <a href="https://en.wikipedia.org/wiki/University_of_Texas_at_Austin">University of Texas at Austin</a> in the biannual scramble for This is a database tool to assist students of the
Jazz Appr- I mean course registration process. <a href="https://en.wikipedia.org/wiki/University_of_Texas_at_Austin"
</p> >University of Texas at Austin</a
<p> >
I noticed other grade sites used outdated data, so I made in the biannual scramble for Jazz Appr- I mean course registration
my own. Enjoy! process.
</p> </p>
</div> <p>
<div class="bg-form"> I noticed other grade sites used outdated data, so I made my own.
<p> Enjoy!
Use the </p>
<a href="https://registrar.utexas.edu/schedules">official course name</a> </div>
for best results. <div class="bg-form">
</p> <div class="bg-form-blurb">
<p> <p>
Some departments have a space in the middle (e.g., "C S") Use the
</p> <a href="https://registrar.utexas.edu/schedules"
<p>Course Name is optional, but used for duplicate ID courses (e.g. "UGS 303")</p> >official course name</a
<br> >
<form action=""> for best results.
<!-- Data is separated into course number, course prefix, and course name--> </p>
<div class="form-group"> <p>Some departments have a space in the middle (e.g., "C S")</p>
<label for="courseField">Department (e.g. "MUS"):</label> <p>
<input type="text" id="courseField" name="fname" required> Course Name is optional, but used for duplicate ID courses (e.g.
"UGS 303")
</p>
</div> </div>
<br />
<form action="">
<!-- Data is separated into course number, course prefix, and course name-->
<div class="form-group">
<label for="courseField">Department (e.g. "MUS"):</label>
<input type="text" id="courseField" name="fname" required />
</div>
<div class="form-group"> <div class="form-group">
<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> <input type="text" id="courseNum" name="fname" required />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="courseName">Course Name (e.g. "JAZZ APPRECIATION-WB"):</label> <label for="courseName"
<input type="text" id="courseName" name="fname"> >Course Name (e.g. "JAZZ APPRECIATION-WB"):</label
</div> >
<input type="text" id="courseName" name="fname" />
</div>
<!-- <label for="sectionNum">Section Number (Optional, Experimental)</label> <!-- <label for="sectionNum">Section Number (Optional, Experimental)</label>
<input type="text" id="sectionNum" name="fname" required> --> <input type="text" id="sectionNum" name="fname" required> -->
<div class="form-group"> <div class="form-group">
<label for="courseInstructor" title="This is an experimental option!">Instructor:</label> <label
<input type="text" id="courseInstructor" name="fname"> for="courseInstructor"
</div> title="This is an experimental option!"
>Instructor:</label
>
<input type="text" id="courseInstructor" name="fname" />
</div>
<!-- Dropdown menu for semester selection --> <!-- Dropdown menu for semester selection -->
<div class="form-group"> <div class="form-group">
<label for="semester">Semester:</label> <label for="semester">Semester:</label>
<select id="semester" name="dropdown"> <select id="semester" name="dropdown">
<option value="f2024">Fall 2024</option> <option value="f2024">Fall 2024</option>
<option value="sp2024">Spring 2024</option> <option value="sp2024">Spring 2024</option>
<option value="f2023">Fall 2023</option> <option value="f2023">Fall 2023</option>
<option value="s2023">Summer 2023</option> <option value="s2023">Summer 2023</option>
<option value="sp2023">Spring 2023</option> <option value="sp2023">Spring 2023</option>
<option value="f2022">Fall 2022</option> <option value="f2022">Fall 2022</option>
<option value="s2022">Summer 2022</option> <option value="s2022">Summer 2022</option>
<option value="sp2022">Spring 2022</option> <option value="sp2022">Spring 2022</option>
<option value="f2021">Fall 2021</option> <option value="f2021">Fall 2021</option>
<option value="s2021">Summer 2021</option> <option value="s2021">Summer 2021</option>
<option value="sp2021">Spring 2021</option> <option value="sp2021">Spring 2021</option>
<option value="f2020">Fall 2020</option> <option value="f2020">Fall 2020</option>
<option value="s2020">Summer 2020</option> <option value="s2020">Summer 2020</option>
<option value="sp2020">Spring 2020</option> <option value="sp2020">Spring 2020</option>
</select> </select>
</div> </div>
<button type="button" id="subBut" class="submit-button">Submit</button> <button type="button" id="subBut" class="submit-button">
</form> Submit
<div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw"> </button>
<!--Bar graph stuff--> </form>
<canvas id="gradeBar" style="width:100%;height:100%;"></canvas> <div
class="chart-container"
id="grades"
value="invisible"
style="position: relative; height: 40vh; width: 80vw"
>
<!--Bar graph stuff-->
<canvas id="gradeBar" style="width: 100%; height: 100%"></canvas>
</div>
</div> </div>
</div> </div>
</div> <div class="footy">
<div class="footy"> <div class="footy-interior">
<div class="footy-interior"> <p>
<p>Created by <a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a> Created by
<!-- because VAPA lecture was a bit boring that day --> <a href="https://www.linkedin.com/in/derekyujirchen/">Derek Chen.</a>
Help keep the site up by <a href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21&currency_code=USD">donating!</a> <!-- because VAPA lecture was a bit boring that day -->
Report feedback <a href="https://github.com/DereC4/ut-grade-distribution-viewer/issues">here!</a></p> Help keep the site up by
<!-- <iframe <a
href="https://www.paypal.com/donate/?business=ND35WHTPKM494&no_recurring=0&item_name=Help+support+our+grade+distribution+site+and+other+tools%21&currency_code=USD"
>donating!</a
>
Report feedback
<a
href="https://github.com/DereC4/ut-grade-distribution-viewer/issues"
>here!</a
>
</p>
<!-- <iframe
src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large" src="https://ghbtns.com/github-btn.html?user=Derec4&repo=ut-grade-distribution-viewer&type=star&count=true&size=large"
frameborder="0" scrolling="0" width="100" height="30" title="GitHub"> frameborder="0" scrolling="0" width="100" height="30" title="GitHub">
</iframe> --> </iframe> -->
</div>
</div> </div>
</div> <script src="main.js"></script>
<script src='main.js'></script> <script src="colorScheme.js"></script>
<script src='colorScheme.js'></script> <script src="rememberSemester.js"></script>
<script src='rememberSemester.js'></script> </body>
</body>
</html> </html>

10
docs/main.css
View File

@@ -186,19 +186,26 @@ opacity: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: fit-content; height: fit-content;
align-items: center;
}
.bg-form-blurb {
text-align: left;
align-items: flex-start;
} }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 15px; margin-bottom: 15px;
text-align: center;
align-items: center; align-items: center;
} }
.form-group label { .form-group label {
margin-bottom: 5px; margin-bottom: 5px;
font-weight: 500; font-weight: 500;
text-align: left;
width: 100%;
} }
.form-group input, .form-group input,
@@ -209,6 +216,7 @@ opacity: 1;
font-size: var(--p-size); font-size: var(--p-size);
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
text-align: left;
} }
.form-group input:focus, .form-group input:focus,