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

Rounded cornerssss

Browse Source
This commit is contained in:
HW Computer
2023-04-29 15:57:07 -05:00
parent b87ed8a9c6
commit 534cb4263d
2 changed files with 66 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
index.html
View File

@@ -22,52 +22,54 @@
</head> </head>
<body> <body>
<div class="about-text" value=""> <div class="wrapper">
<h1>About</h1> <div class="about-text" value="">
<p> <h1>About</h1>
This is a database tool to assist students of the University of Texas - Austin in the biannual race for <p>
Jazz Appr- I mean course registration process. This is a database tool to assist students of the University of Texas - Austin in the biannual race for
</p> Jazz Appr- I mean course registration process.
<p> </p>
I noticed other grade sites used outdated data, so I made <p>
my own. Enjoy! I noticed other grade sites used outdated data, so I made
</p> my own. Enjoy!
</div> </p>
<div class="bg-form"> </div>
<p> <div class="bg-form">
Keep course names as close to the <p>
<a href="https://registrar.utexas.edu/schedules">official course name</a> Keep course names as close to the
as possible <a href="https://registrar.utexas.edu/schedules">official course name</a>
</p> as possible
<br> </p>
<form action=""> <br>
<form action="">
<!-- Data is separated into course number, course prefi;x, and course name-->
<label for="courseField">Department (Ex: "MUS"):</label> <!-- Data is separated into course number, course prefi;x, and course name-->
<input type="text" id="courseField" name="fname" required><br><br> <label for="courseField">Department (Ex: "MUS"):</label>
<label for="courseNum">Course Number (Ex: "307"):</label> <input type="text" id="courseField" name="fname" required><br><br>
<input type="text" id="courseNum" name="fname" required><br><br> <label for="courseNum">Course Number (Ex: "307"):</label>
<label for="courseName">Course Name (Optional, useful if classes have the same number like UGS 303):</label> <input type="text" id="courseNum" name="fname" required><br><br>
<input type="text" id="courseName" name="fname"><br><br> <label for="courseName">Course Name (Optional, useful if classes have the same number like UGS 303):</label>
<!-- <label for="courseInstructor">Instructor (Optional):</label> <input type="text" id="courseName" name="fname"><br><br>
<input type="text" id="courseInstructor" name="fname"><br><br> --> <!-- <label for="courseInstructor">Instructor (Optional):</label>
<button type="button" id="subBut">Submit</button><br><br> <input type="text" id="courseInstructor" name="fname"><br><br> -->
<button type="button" id="subBut">Submit</button><br><br>
<!-- Dropdown menu for semester selection -->
<form> <!-- Dropdown menu for semester selection -->
<label for="dropdown">Semester (under construction):</label> <form>
<select id="semester" name="dropdown"> <label for="dropdown">Semester (under construction):</label>
<option value="f2022">Fall 2022</option> <select id="semester" name="dropdown">
<option value="s2022">Summer 2022</option> <option value="f2022">Fall 2022</option>
<option value="sp2022">Spring 2022</option> <option value="s2022">Summer 2022</option>
<option value="f2021">Fall 2021</option> <option value="sp2022">Spring 2022</option>
</select> <option value="f2021">Fall 2021</option>
<br><br> </select>
<br><br>
</form>
</form> </form>
</form> <div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw">
<div class="chart-container" id="grades" value="invisible" style="position: relative; height:40vh; width:80vw"> <!--Bar graph stuff-->
<!--Bar graph stuff--> <canvas id="gradeBar" style="width:100%;height:100%;"></canvas>
<canvas id="gradeBar" style="width:100%;height:100%;"></canvas> </div>
</div> </div>
</div> </div>
<footer>Created by Derek Chen <footer>Created by Derek Chen

23
main.css
View File

@@ -1,7 +1,7 @@
body { body {
font-family: 'Helvetica Neue', sans-serif; font-family: 'Helvetica Neue', sans-serif;
background: #1b1a2a; background: #1b1a2a;
background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%) background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%);
} }
a { a {
@@ -40,23 +40,38 @@ footer {
box-sizing: border-box box-sizing: border-box
} }
.wrapper {
display: grid;
gap: 2vw;
grid-auto-rows: minmax(100px, auto);
}
.about-text { .about-text {
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
color: #fff; color: #fff;
border: 3px solid #f1f1f1; border: 3px solid #f1f1f1;
text-align: center text-align: center;
grid-column: 1;
grid-row: 1;
border-radius: 10px;
} }
.bg-form { .bg-form {
background-color: rgba(0, 0, 0, .4); background-color: rgba(0, 0, 0, .4);
color: #fff; color: #fff;
border: 3px solid #f1f1f1; border: 3px solid #f1f1f1;
text-align: center text-align: center;
grid-column: 1;
grid-row: 2;
border-radius: 10px;
} }
.chart-container { .chart-container {
position: relative; position: relative;
margin: auto; margin: auto;
height: 80vh; height: 80vh;
width: 80vw width: 80vw;
} }