Add files via upload
This commit is contained in:
Tyler
@@ -0,0 +1,311 @@
|
||||
/* ===== Global Reset ===== */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===== Body ===== */
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background-color: #121212;
|
||||
color: #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
justify-content: center; /* Vertically center content */
|
||||
align-items: center; /* Horizontally center content */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ===== Header ===== */
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 30px 20px;
|
||||
background-color: #1c1c1c;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.8em;
|
||||
color: #00ff99;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.1em;
|
||||
color: #00ff99;
|
||||
}
|
||||
|
||||
/* ===== Main Layout ===== */
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
gap: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ===== Section Card Styling ===== */
|
||||
.card {
|
||||
background-color: #1e1e1e;
|
||||
padding: 20px 25px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 153, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== Uniform Form Inputs ===== */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
input[type="file"] {
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
padding: 12px 20px;
|
||||
border: 2px solid #00ff99;
|
||||
border-radius: 8px;
|
||||
background-color: #2c2f33;
|
||||
color: #00ff99;
|
||||
font-size: 1em;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 140px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
border: 2px dashed #00ff99;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input[type="file"]::file-selector-button {
|
||||
background-color: #00ff99;
|
||||
color: #121212;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
input[type="file"]::file-selector-button:hover {
|
||||
background-color: #00cc77;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 8px rgba(0, 255, 153, 0.8);
|
||||
}
|
||||
|
||||
/* ===== Match input and output textarea sizes ===== */
|
||||
#input-text,
|
||||
#output-text {
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
height: 140px;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* ===== Buttons ===== */
|
||||
.button-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #00ff99;
|
||||
border-radius: 8px;
|
||||
background-color: #2c2f33;
|
||||
color: #00ff99;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
width: 100%; /* Makes buttons stretch to fill container */
|
||||
max-width: 200px; /* Restricts button width */
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #00ff99;
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
/* ===== Toggle Buttons ===== */
|
||||
.radio-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.radio-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 18px;
|
||||
border: 2px solid #00ff99;
|
||||
border-radius: 8px;
|
||||
background-color: #2c2f33;
|
||||
color: #00ff99;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.radio-button:hover {
|
||||
background-color: #00ff99;
|
||||
color: #121212;
|
||||
}
|
||||
|
||||
.radio-button input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-button input:checked + span {
|
||||
background-color: #00ff99;
|
||||
color: #121212;
|
||||
padding: 8px 18px;
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* ===== Remove File Button ===== */
|
||||
#remove-file-btn {
|
||||
display: none; /* only shows when a file is selected */
|
||||
margin-top: 8px;
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #ff5555;
|
||||
background-color: #2c2f33;
|
||||
color: #ff5555;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#remove-file-btn:hover {
|
||||
background-color: #ff5555;
|
||||
color: #2c2f33;
|
||||
}
|
||||
|
||||
/* ===== Toast Notifications ===== */
|
||||
.toast {
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
background-color: #333;
|
||||
color: #00ff99;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
margin-top: 8px;
|
||||
font-size: 0.9em;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Pacman Canvas ===== */
|
||||
.pacman-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
#pacmanCanvas {
|
||||
background-color: black;
|
||||
border: 2px solid #00ff99;
|
||||
border-radius: 10px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
/* ===== Footer ===== */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 18px;
|
||||
background-color: #1c1c1c;
|
||||
color: #00ff99;
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #00ff99;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #ff0066;
|
||||
}
|
||||
|
||||
/* ===== Password Input Field ===== */
|
||||
#password-input {
|
||||
display: flex; /* Password input is visible by default */
|
||||
margin-top: 15px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#password-input input {
|
||||
padding: 12px;
|
||||
font-size: 1em;
|
||||
border: 2px solid #00ff99;
|
||||
border-radius: 8px;
|
||||
background-color: #2c2f33;
|
||||
color: #00ff99;
|
||||
width: 100%; /* Ensure the password field takes full width */
|
||||
}
|
||||
Reference in New Issue
Block a user