summaryrefslogtreecommitdiff
path: root/src/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles.css')
-rw-r--r--src/styles.css856
1 files changed, 822 insertions, 34 deletions
diff --git a/src/styles.css b/src/styles.css
index 50ebaea..b2a0e62 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -21,6 +21,11 @@
--shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.2);
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
+ --card-bg: rgba(52, 73, 94, 0.6);
+ --card-border: rgba(255, 255, 255, 0.1);
+ --header-height: 70px;
+ --footer-height: 100px;
+ --glow-color: rgba(243, 156, 18, 0.6);
}
* {
@@ -34,6 +39,7 @@ body {
margin: 0;
padding: 0;
background: radial-gradient(ellipse at top, var(--bg-dark) 0%, var(--bg-darker) 100%);
+ background-attachment: fixed;
color: var(--text-light);
min-height: 100vh;
display: flex;
@@ -42,14 +48,31 @@ body {
justify-content: center;
font-size: 18px;
line-height: 1.6;
+ position: relative;
+ overflow-x: hidden;
+}
+
+body::before {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: url('/img/morse-pattern.svg') repeat;
+ opacity: 0.03;
+ z-index: -1;
+ pointer-events: none;
}
.container {
- max-width: 900px;
+ max-width: 1000px;
margin: 0 auto;
padding: 30px 20px;
text-align: center;
width: 100%;
+ position: relative;
+ z-index: 1;
}
button {
@@ -63,6 +86,7 @@ button {
outline: none;
position: relative;
overflow: hidden;
+ box-shadow: var(--shadow-md);
}
button::after {
@@ -81,16 +105,44 @@ button:hover::after {
opacity: 1;
}
+button:active {
+ transform: translateY(2px);
+ box-shadow: var(--shadow-sm);
+}
+
.title-link {
text-decoration: none;
transition: all var(--transition-normal);
position: relative;
display: inline-block;
+ font-size: 3rem;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ color: var(--text-light);
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+ letter-spacing: 2px;
}
.title-link:hover {
color: var(--secondary-color);
- text-shadow: 0 0 15px rgba(243, 156, 18, 0.6);
+ text-shadow: 0 0 15px var(--glow-color);
+}
+
+.title-link::after {
+ content: "";
+ position: absolute;
+ bottom: -5px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 0;
+ height: 3px;
+ background: var(--secondary-color);
+ transition: width var(--transition-normal);
+ box-shadow: 0 0 10px var(--glow-color);
+}
+
+.title-link:hover::after {
+ width: 80%;
}
.footer {
@@ -99,42 +151,12 @@ button:hover::after {
text-align: center;
font-size: 16px;
color: var(--text-dim);
- width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.footer a {
- color: var(--primary-color);
- text-decoration: none;
- font-weight: bold;
- transition: color var(--transition-normal);
- position: relative;
-}
-
-.footer a::after {
- content: '';
- position: absolute;
width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: -2px;
- left: 0;
- background-color: var(--primary-color);
- transform-origin: bottom right;
- transition: transform 0.3s ease-out;
-}
-
-.footer a:hover {
- color: var(--secondary-color);
-}
-
-.footer a:hover::after {
- transform: scaleX(1);
- transform-origin: bottom left;
+ background: linear-gradient(to top, rgba(26, 37, 48, 0.8), transparent);
+ backdrop-filter: blur(5px);
}
-/* Morse Hero Main Styles */
-
h1 {
font-size: 5.5em;
margin-top: 0.5rem;
@@ -910,4 +932,770 @@ body.game-active #startScreen {
transform: scaleX(1);
transform-origin: bottom left;
background-color: var(--secondary-color);
+}
+
+.option-button {
+ background: linear-gradient(145deg, var(--primary-color), var(--primary-dark));
+ color: white;
+ border-radius: var(--border-radius-md);
+ font-size: 36px;
+ padding: 20px;
+ margin: 10px;
+ width: calc(50% - 20px);
+ height: 120px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+ transition: all var(--transition-normal);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ box-shadow: var(--shadow-md), inset 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.option-button:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-lg), inset 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.option-button:active {
+ transform: translateY(1px);
+ box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, 0.15);
+}
+
+.option-button.correct {
+ background: linear-gradient(145deg, var(--success-color), var(--success-dark));
+ animation: correct-pulse 1s infinite;
+}
+
+.option-button.incorrect {
+ background: linear-gradient(145deg, var(--accent-color), var(--accent-dark));
+ animation: incorrect-shake 0.5s;
+}
+
+/* Start screen styles */
+#startScreen {
+ max-width: 600px;
+ margin: 0 auto;
+ padding: 30px;
+ background: var(--card-bg);
+ border-radius: var(--border-radius-lg);
+ box-shadow: var(--shadow-lg);
+ border: 1px solid var(--card-border);
+ backdrop-filter: blur(10px);
+ animation: fadeIn 0.8s ease-out;
+}
+
+#startScreen p {
+ font-size: 1.3rem;
+ margin-bottom: 1.5rem;
+ color: var(--text-light);
+ line-height: 1.6;
+}
+
+.start-button {
+ background: linear-gradient(145deg, var(--secondary-color), var(--secondary-dark));
+ color: white;
+ font-size: 1.5rem;
+ padding: 15px 40px;
+ border-radius: var(--border-radius-md);
+ margin: 20px 0;
+ position: relative;
+ overflow: hidden;
+ transition: all var(--transition-normal);
+ box-shadow: var(--shadow-md), 0 0 15px rgba(243, 156, 18, 0.3);
+}
+
+.start-button:hover {
+ transform: translateY(-3px) scale(1.05);
+ box-shadow: var(--shadow-lg), 0 0 20px rgba(243, 156, 18, 0.5);
+}
+
+.start-button:active {
+ transform: translateY(1px);
+}
+
+.chart-link {
+ margin-top: 20px;
+}
+
+.chart-link a {
+ color: var(--text-light);
+ text-decoration: none;
+ font-weight: 600;
+ transition: all var(--transition-normal);
+ position: relative;
+ padding: 5px 10px;
+ border-radius: var(--border-radius-sm);
+}
+
+.chart-link a::after {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: var(--primary-color);
+ transform: scaleX(0);
+ transform-origin: right;
+ transition: transform var(--transition-normal);
+}
+
+.chart-link a:hover {
+ color: var(--primary-color);
+}
+
+.chart-link a:hover::after {
+ transform: scaleX(1);
+ transform-origin: left;
+}
+
+/* Game area styles */
+#gameArea {
+ animation: fadeIn 0.5s ease-out;
+}
+
+.game-container {
+ background: var(--card-bg);
+ border-radius: var(--border-radius-lg);
+ padding: 30px;
+ margin: 20px 0;
+ box-shadow: var(--shadow-lg);
+ border: 1px solid var(--card-border);
+ backdrop-filter: blur(10px);
+}
+
+/* Chart page styles */
+.chart-section {
+ background: var(--card-bg);
+ border-radius: var(--border-radius-lg);
+ padding: 30px;
+ margin: 30px 0;
+ box-shadow: var(--shadow-lg);
+ border: 1px solid var(--card-border);
+ backdrop-filter: blur(10px);
+ animation: fadeIn 0.5s ease-out;
+}
+
+.chart-section h2 {
+ margin-bottom: 20px;
+ color: var(--secondary-color);
+ font-weight: 600;
+ position: relative;
+ display: inline-block;
+}
+
+.chart-section h2::after {
+ content: "";
+ position: absolute;
+ bottom: -5px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 50px;
+ height: 3px;
+ background: var(--secondary-color);
+ border-radius: 3px;
+}
+
+/* New animations */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes correct-pulse {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
+ }
+
+ 70% {
+ box-shadow: 0 0 0 15px rgba(46, 204, 113, 0);
+ }
+
+ 100% {
+ box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
+ }
+}
+
+@keyframes incorrect-shake {
+
+ 0%,
+ 100% {
+ transform: translateX(0);
+ }
+
+ 20%,
+ 60% {
+ transform: translateX(-5px);
+ }
+
+ 40%,
+ 80% {
+ transform: translateX(5px);
+ }
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+ .title-link {
+ font-size: 2.5rem;
+ }
+
+ .option-button {
+ font-size: 28px;
+ height: 100px;
+ }
+
+ .chart-section {
+ padding: 20px;
+ }
+}
+
+@media (max-width: 480px) {
+ .title-link {
+ font-size: 2rem;
+ }
+
+ .option-button {
+ font-size: 24px;
+ height: 90px;
+ width: calc(50% - 10px);
+ margin: 5px;
+ }
+
+ .start-button {
+ font-size: 1.2rem;
+ padding: 12px 30px;
+ }
+}
+
+/* Hero content styles */
+.hero-content {
+ text-align: center;
+}
+
+.hero-content h2 {
+ font-size: 1.8rem;
+ margin-bottom: 1rem;
+ color: var(--secondary-color);
+ font-weight: 600;
+}
+
+.hero-content > p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ max-width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Feature grid */
+.feature-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 20px;
+ margin: 30px 0;
+}
+
+.feature-item {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: var(--border-radius-md);
+ padding: 20px;
+ transition: all var(--transition-normal);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.feature-item:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--shadow-md);
+ background: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.1);
+}
+
+.feature-icon {
+ font-size: 2rem;
+ margin-bottom: 10px;
+}
+
+.feature-item h3 {
+ font-size: 1.2rem;
+ margin-bottom: 10px;
+ color: var(--primary-color);
+}
+
+.feature-item p {
+ font-size: 0.9rem;
+ color: var(--text-dim);
+}
+
+/* CTA container */
+.cta-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+ margin: 30px 0;
+}
+
+.button-morse {
+ display: block;
+ font-size: 0.8rem;
+ margin-top: 5px;
+ opacity: 0.8;
+}
+
+.how-to-play-button {
+ background: transparent;
+ color: var(--text-light);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ padding: 10px 20px;
+ border-radius: var(--border-radius-md);
+ font-size: 1rem;
+ transition: all var(--transition-normal);
+}
+
+.how-to-play-button:hover {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* How to play section */
+.how-to-play {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: var(--border-radius-md);
+ padding: 20px;
+ margin: 20px 0;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ animation: fadeIn 0.5s ease-out;
+}
+
+.how-to-play h3 {
+ font-size: 1.3rem;
+ margin-bottom: 15px;
+ color: var(--primary-color);
+}
+
+.how-to-play ol {
+ text-align: left;
+ padding-left: 30px;
+ margin-bottom: 20px;
+}
+
+.how-to-play li {
+ margin-bottom: 10px;
+ color: var(--text-light);
+}
+
+.morse-fact {
+ background: rgba(52, 152, 219, 0.1);
+ border-radius: var(--border-radius-sm);
+ padding: 15px;
+ border-left: 3px solid var(--primary-color);
+ text-align: left;
+}
+
+.morse-fact h4 {
+ color: var(--primary-color);
+ margin-bottom: 5px;
+ font-size: 1.1rem;
+}
+
+.morse-fact p {
+ font-size: 0.9rem;
+ color: var(--text-dim);
+}
+
+/* Game instructions */
+.game-instructions {
+ margin-bottom: 20px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.game-instructions p {
+ margin-bottom: 15px;
+}
+
+.replay-button {
+ background: linear-gradient(145deg, var(--primary-color), var(--primary-dark));
+ color: white;
+ padding: 8px 15px;
+ border-radius: var(--border-radius-sm);
+ font-size: 0.9rem;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.replay-icon {
+ font-size: 1.2rem;
+}
+
+/* Settings styles */
+.settings {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ margin-top: 20px;
+ padding-top: 20px;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.setting-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.reset-button {
+ background: linear-gradient(145deg, var(--accent-color), var(--accent-dark));
+ color: white;
+ padding: 8px 15px;
+ border-radius: var(--border-radius-sm);
+ font-size: 0.9rem;
+}
+
+.keyboard-tip {
+ margin-top: 20px;
+ font-size: 0.9rem;
+ color: var(--text-dim);
+ font-style: italic;
+}
+
+/* Enhanced footer */
+.footer {
+ margin-top: 60px;
+ padding: 40px 20px 20px;
+}
+
+.footer-content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 30px;
+ margin-bottom: 30px;
+ text-align: left;
+}
+
+.footer-section {
+ flex: 1;
+ min-width: 250px;
+}
+
+.footer-section h3 {
+ font-size: 1.2rem;
+ margin-bottom: 15px;
+ color: var(--text-light);
+ position: relative;
+ display: inline-block;
+}
+
+.footer-section h3::after {
+ content: "";
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 30px;
+ height: 2px;
+ background: var(--primary-color);
+}
+
+.footer-section p {
+ color: var(--text-dim);
+ line-height: 1.6;
+}
+
+.footer-section ul {
+ list-style: none;
+ padding: 0;
+}
+
+.footer-section li {
+ margin-bottom: 10px;
+}
+
+.footer-section a {
+ color: var(--primary-color);
+ text-decoration: none;
+ transition: all var(--transition-normal);
+ position: relative;
+}
+
+.footer-section a::after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ transform: scaleX(0);
+ height: 1px;
+ bottom: -2px;
+ left: 0;
+ background-color: var(--primary-color);
+ transform-origin: bottom right;
+ transition: transform 0.3s ease-out;
+}
+
+.footer-section a:hover {
+ color: var(--secondary-color);
+}
+
+.footer-section a:hover::after {
+ transform: scaleX(1);
+ transform-origin: bottom left;
+}
+
+.footer-bottom {
+ padding-top: 20px;
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ text-align: center;
+}
+
+.footer-bottom p {
+ margin-bottom: 10px;
+}
+
+.footer-bottom a {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 600;
+ transition: color var(--transition-normal);
+}
+
+.footer-bottom a:hover {
+ color: var(--secondary-color);
+}
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+ .feature-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .footer-content {
+ flex-direction: column;
+ }
+
+ .hero-content > p {
+ max-width: 100%;
+ }
+}
+
+/* Chart page specific styles */
+.page-intro {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.page-intro h2 {
+ font-size: 2rem;
+ color: var(--secondary-color);
+ margin-bottom: 15px;
+ font-weight: 600;
+}
+
+.page-intro p {
+ font-size: 1.1rem;
+ max-width: 700px;
+ margin: 0 auto;
+ color: var(--text-dim);
+}
+
+.morse-info-card {
+ background: var(--card-bg);
+ border-radius: var(--border-radius-lg);
+ padding: 30px;
+ margin: 30px 0;
+ box-shadow: var(--shadow-lg);
+ border: 1px solid var(--card-border);
+ backdrop-filter: blur(10px);
+ animation: fadeIn 0.5s ease-out;
+ text-align: left;
+}
+
+.morse-info-card h3 {
+ font-size: 1.5rem;
+ margin-bottom: 15px;
+ color: var(--primary-color);
+}
+
+.morse-info-card p {
+ line-height: 1.7;
+ margin-bottom: 20px;
+}
+
+.morse-tips {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: var(--border-radius-md);
+ padding: 20px;
+ border-left: 3px solid var(--secondary-color);
+}
+
+.morse-tips h4 {
+ color: var(--secondary-color);
+ margin-bottom: 15px;
+ font-size: 1.2rem;
+}
+
+.morse-tips ul {
+ padding-left: 20px;
+}
+
+.morse-tips li {
+ margin-bottom: 10px;
+ color: var(--text-dim);
+}
+
+.morse-history {
+ background: var(--card-bg);
+ border-radius: var(--border-radius-lg);
+ padding: 30px;
+ margin: 30px 0;
+ box-shadow: var(--shadow-lg);
+ border: 1px solid var(--card-border);
+ backdrop-filter: blur(10px);
+ animation: fadeIn 0.5s ease-out;
+ text-align: left;
+}
+
+.morse-history h3 {
+ font-size: 1.5rem;
+ margin-bottom: 20px;
+ color: var(--primary-color);
+ text-align: center;
+}
+
+.history-content {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+}
+
+.history-content p {
+ line-height: 1.7;
+ color: var(--text-dim);
+}
+
+.morse-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+ gap: 15px;
+ margin: 20px 0;
+}
+
+.morse-item {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: var(--border-radius-md);
+ padding: 15px 10px;
+ cursor: pointer;
+ transition: all var(--transition-normal);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.morse-item:hover {
+ transform: translateY(-3px);
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: var(--shadow-md);
+ border-color: rgba(255, 255, 255, 0.1);
+}
+
+.morse-item.playing {
+ background: rgba(52, 152, 219, 0.2);
+ border-color: var(--primary-color);
+ box-shadow: 0 0 15px rgba(52, 152, 219, 0.3);
+ animation: pulse 1s infinite;
+}
+
+.morse-item .character {
+ font-size: 1.8rem;
+ font-weight: 600;
+ margin-bottom: 5px;
+}
+
+.morse-item .morse {
+ font-size: 1rem;
+ color: var(--text-dim);
+ letter-spacing: 1px;
+}
+
+.back-link {
+ margin: 40px 0;
+ text-align: center;
+}
+
+.back-link a {
+ display: inline-block;
+ background: linear-gradient(145deg, var(--primary-color), var(--primary-dark));
+ color: white;
+ padding: 12px 25px;
+ border-radius: var(--border-radius-md);
+ text-decoration: none;
+ font-weight: 600;
+ transition: all var(--transition-normal);
+ box-shadow: var(--shadow-md);
+}
+
+.back-link a:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-lg);
+}
+
+.back-link a:active {
+ transform: translateY(1px);
+ box-shadow: var(--shadow-sm);
+}
+
+@media (max-width: 768px) {
+ .morse-grid {
+ grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+ gap: 10px;
+ }
+
+ .morse-item .character {
+ font-size: 1.5rem;
+ }
+
+ .morse-item .morse {
+ font-size: 0.9rem;
+ }
+
+ .morse-info-card,
+ .morse-history,
+ .chart-section {
+ padding: 20px;
+ }
+}
+
+@media (max-width: 480px) {
+ .morse-grid {
+ grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+ gap: 8px;
+ }
+
+ .morse-item {
+ padding: 10px 5px;
+ }
+
+ .morse-item .character {
+ font-size: 1.3rem;
+ }
+
+ .morse-item .morse {
+ font-size: 0.8rem;
+ }
} \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-15 12:56:10 +0000