From 221a16a3c033ec10102ee9f6e71ff530077636c5 Mon Sep 17 00:00:00 2001 From: revengeday Date: Thu, 14 Nov 2024 22:08:15 +0000 Subject: [PATCH] Upload files to "css" --- css/style.css | 284 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 css/style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..e235d38 --- /dev/null +++ b/css/style.css @@ -0,0 +1,284 @@ +@font-face { +/* + Note: The font files are not included in this repository due to legal restrictions. + For more information, please refer to the README.md file located in the 'fonts' directory. +*/ + font-family: 'Departure Mono'; + src: url('../fonts/DepartureMono-Regular.woff2') format('woff2'), + url('../fonts/DepartureMono-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Departure Mono'; + font-size: 18px; + line-height: 1.75; + background-color: #05130f; + color: #e8f0f2; + overflow-x: hidden; + text-align: center; +} + +.hero { + position: relative; + width: 100%; + height: 60vh; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + background: url('/img/circle.jpg') no-repeat center center; + background-size: cover; + margin-bottom: 40px; +} + +.hero img { + width: 100%; + height: 100%; + object-fit: cover; + filter: brightness(0.8); + transition: filter 0.5s; +} + +.hero-text { + position: absolute; + background-color: rgba(0, 0, 0, 0.7); + padding: 30px; + border-radius: 15px; + backdrop-filter: blur(5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); + color: #e8f0f2; + max-width: 80%; +} + +h1 { + font-size: 2.5rem; + margin-bottom: 10px; +} + +main { + padding: 40px 20px; + max-width: 1000px; + margin: 0 auto; +} + +.form-section { + background-color: #102f2a; + padding: 30px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + margin-bottom: 40px; +} + +.input-group, .radio-group, button { + width: 100%; + margin: 15px auto; + display: block; +} + +input[type="text"] { + font-family: 'Departure Mono'; + width: calc(100% - 20px); + padding: 10px; + border: 2px solid #1bec99; + border-radius: 5px; + background-color: #0d2f25; + color: #e8f0f2; + outline: none; + transition: border-color 0.3s; +} + +input[type="text"]:focus { + border-color: #159262; +} + +.radio-group { + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +.radio-group input[type="radio"] { + display: none; +} + +.radio-group label { + width: calc(25% - 10px); + margin: 5px; + padding: 10px; + text-align: center; + cursor: pointer; + transition: background-color 0.3s, color 0.3s, border-color 0.3s; + background-color: #05130f; + border-radius: 5px; + border: 2px solid transparent; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + color: #e8f0f2; +} + +.radio-group input[type="radio"]:checked + label { + background-color: #159262; + border-color: #1bec99; + color: #fff; +} + +button { + font-family: 'Departure Mono'; + padding: 10px 20px; + border-radius: 5px; + background-color: #05130f; + color: #e8f0f2; + font-size: 1rem; + cursor: pointer; + border: 2px solid transparent; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s, border-color 0.3s, transform 0.3s; +} + +button:hover { + background-color: #159262; + border-color: #1bec99; + color: #fff; + transform: translateY(-3px); +} + +button:active { + transform: translateY(0); +} + +.canvas-container { + margin: 20px auto; + max-width: 100%; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); + border-radius: 10px; + overflow: hidden; +} + +#canvas { + width: 100%; + height: auto; +} + +#outInfo { + font-style: italic; + color: red; + margin: 20px 0; + display: block; +} + +.output-section { + margin-top: 40px; +} + +#outDiv { + display: none; + margin-top: 30px; + text-align: center; +} + +.faq-section, .credits-section { + background-color: #0d2f25; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + color: #e8f0f2; + margin-top: 40px; + text-align: left; +} + +.faq-section hr { + border: none; + height: 2px; + background: linear-gradient(to right, #159262, #1bec99); + margin: 20px 0; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.credits-section h3 { + text-align: left; +} + +#usersDiv { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: 20px; + gap: 20px; +} + +.userSubDiv { + flex: 1 1 calc(33.333% - 40px); + margin: 10px; + padding: 20px; + border: none; + border-radius: 15px; + background-color: #0d2f25; + color: #e8f0f2; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + transition: transform 0.3s, box-shadow 0.3s; +} + +.userSubDiv:hover { + transform: scale(1.05); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); +} + +.userItem { + display: block; + font-size: 1.1rem; + font-weight: 600; + text-decoration: underline; + text-decoration-style: dotted; + margin-bottom: 10px; + color: #1bec99; + transition: color 0.3s, text-decoration 0.3s; +} + +.userItem:hover { + text-decoration-style: solid; + color: #86e0b6; +} + +.userHost { + opacity: 0.75; + font-style: italic; +} + +.userImg { + border-radius: 50%; + width: 2em; + height: 2em; + vertical-align: middle; + user-select: none; + margin-right: 0.5em; +} + +#footer { + padding: 20px; + color: #fff; + margin-top: 20px; + text-align: center; +} + +.footer-note { + margin-top: 10px; + font-size: 0.9rem; +} + +a { + color: #1bec99; + transition: color 0.3s; +} + +a:hover { + text-decoration: none; + color: #159262; +} \ No newline at end of file