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

13
index.html
View File

@@ -2,15 +2,15 @@
<html> <html>
<head> <head>
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z5B0S1WMC4"></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} function gtag() { dataLayer.push(arguments); }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'G-Z5B0S1WMC4'); gtag('config', 'G-Z5B0S1WMC4');
</script> </script>
<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>UT Grade Viewer</title> <title>UT Grade Viewer</title>
@@ -19,8 +19,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js" <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"
integrity="sha512-dfX5uYVXzyU8+KHqj8bjo7UkOdg18PaOtpa48djpNbZHwExddghZ+ZmzWT06R5v6NSk3ZUfsH6FNEDepLx9hPQ==" integrity="sha512-dfX5uYVXzyU8+KHqj8bjo7UkOdg18PaOtpa48djpNbZHwExddghZ+ZmzWT06R5v6NSk3ZUfsH6FNEDepLx9hPQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script> </script>
</head> </head>

113
main.css
View File

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