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

Beautified and organized css html

Browse Source
This commit is contained in:
HW Computer
2023-04-23 18:05:00 -05:00
parent ddc6491169
commit e6a0cb66c3
2 changed files with 43 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@@ -2,15 +2,15 @@
<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());
<!-- 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());
gtag('config', 'G-Z5B0S1WMC4');
</script>
gtag('config', 'G-Z5B0S1WMC4');
</script>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>UT Grade Viewer</title>
@@ -19,8 +19,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"
integrity="sha512-dfX5uYVXzyU8+KHqj8bjo7UkOdg18PaOtpa48djpNbZHwExddghZ+ZmzWT06R5v6NSk3ZUfsH6FNEDepLx9hPQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
</head>
@@ -29,11 +28,11 @@
<div class="bg-text" value="">
<h1>About</h1>
<p>
This is a database tool to assist students of the University of Texas - Austin in the biannual race for
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
Jazz Appr- I mean course registration process.
</p>
<p>
I noticed other grade sites used outdated data, so I made
I noticed other grade sites used outdated data, so I made
my own. Enjoy!
</p>
</div>
@@ -45,7 +44,7 @@
</p>
<br>
<form action="">
<!-- Data is separated into course number, course prefi;x, and course name-->
<label for="courseField">Department (Ex: "MUS"):</label>
<input type="text" id="courseField" name="fname" required><br><br>
@@ -56,7 +55,7 @@
<!-- <label for="courseInstructor">Instructor (Optional):</label>
<input type="text" id="courseInstructor" name="fname"><br><br> -->
<button type="button" id="subBut">Submit</button><br><br>
<!-- Dropdown menu for semester selection -->
<form>
<label for="dropdown">Semester (under construction):</label>
@@ -75,9 +74,9 @@
</div>
<footer>Created by Derek Chen
<!-- because VAPA lecture was a bit boring that day -->
</footer>
</footer>
<script src='main.js'></script>
</body>
</html>
</html>

121
main.css
View File

@@ -1,162 +1,95 @@
/*
* Disclaimer: Made in 3 minutes while I was bored at lecture
*/
/* General Styles */
body {
font-family: 'Helvetica Neue', sans-serif;
background: rgb(27, 26, 42);
background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0%, rgb(69, 68, 84) 100%);
background: #1b1a2a;
background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0, #454454 100%)
}
a {
color: #2c82c9;
text-decoration: none;
text-decoration: none
}
/* Header Styles */
header {
background-color: #2c82c9;
color: #ffffff;
padding: 20px;
}
header h1 {
font-size: 48px;
margin: 0;
}
header h2 {
font-size: 24px;
margin: 0;
}
/* Navigation Styles */
nav {
background-color: #ffffff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #333333;
font-size: 18px;
text-decoration: none;
}
nav a:hover {
color: #2c82c9;
}
/* Main Content Styles */
main {
padding: 20px;
padding: 20px
}
main h1 {
font-size: 36px;
margin: 0 0 20px 0;
margin: 0 0 20px 0
}
main p {
font-size: 18px;
line-height: 1.5;
margin: 0 0 20px 0;
margin: 0 0 20px 0
}
/* Footer Styles */
footer {
background-color: #2e2d2d;
color: #ffffff;
color: #fff;
padding: 10px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: left;
font-size: 13px;
font-size: 13px
}
footer p {
font-size: 18px;
margin: 0;
margin: 0
}
/* Backgrund stuffs*/
* {
box-sizing: border-box;
box-sizing: border-box
}
.bg {
/* The image used */
background-image: url("tempbg.png");
/* Add the blur effect */
background-image: url(tempbg.png);
filter: blur(8px);
-webkit-filter: blur(8px);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-size: cover
}
.bg-text {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* opacity/see-through */
color: white;
font-weight: bold;
background-color: #000;
background-color: rgba(0, 0, 0, .4);
color: #fff;
font-weight: 700;
border: 3px solid #f1f1f1;
margin: 5px auto;
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
/* z-index: 2; */
width: 70%;
padding: 20px;
text-align: center;
text-align: center
}
/* Position text in the middle of the page/image */
.bg-form {
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* opacity/see-through */
color: white;
font-weight: bold;
background-color: #000;
background-color: rgba(0, 0, 0, .4);
color: #fff;
font-weight: 700;
border: 3px solid #f1f1f1;
margin: 5px auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* z-index: 2; */
width: auto;
padding: 20px;
text-align: center;
text-align: center
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
width: 80vw
}