aboutsummaryrefslogtreecommitdiff
path: root/web/src/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'web/src/styles.css')
-rw-r--r--web/src/styles.css910
1 files changed, 910 insertions, 0 deletions
diff --git a/web/src/styles.css b/web/src/styles.css
new file mode 100644
index 0000000..d9130b4
--- /dev/null
+++ b/web/src/styles.css
@@ -0,0 +1,910 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --primary-color: #00ff9d;
+ --secondary-color: #00cc8f;
+ --background-color: #000000;
+ --text-color: #646669;
+ --error-color: #ca4754;
+ --correct-color: #00ff9d;
+ --neutral-color: #646669;
+ --caret-color: #00ff9d;
+ --sub-color: #646669;
+}
+
+[data-theme="light"] {
+ --primary-color: #00ff9d;
+ --secondary-color: #00cc8f;
+ --background-color: #ffffff;
+ --text-color: #333333;
+ --error-color: #ca4754;
+ --correct-color: #00ff9d;
+ --neutral-color: #646669;
+ --caret-color: #00ff9d;
+ --sub-color: #646669;
+}
+
+[data-theme="dark"] {
+ --primary-color: #00ff9d;
+ --secondary-color: #00cc8f;
+ --background-color: #000000;
+ --text-color: #646669;
+ --error-color: #ca4754;
+ --correct-color: #00ff9d;
+ --neutral-color: #646669;
+ --caret-color: #00ff9d;
+ --sub-color: #646669;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: 'JetBrains Mono', monospace;
+ background-color: var(--background-color);
+ color: var(--text-color);
+ height: 100vh;
+ overflow: hidden;
+}
+
+.app {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ padding: 1rem;
+ overflow: hidden;
+}
+
+.logo {
+ position: fixed;
+ top: 1rem;
+ left: 1rem;
+ font-size: 1.2rem;
+ color: var(--primary-color);
+ font-family: 'JetBrains Mono', monospace;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ cursor: pointer;
+ transition: color 0.2s ease;
+}
+
+.logo:hover {
+ color: var(--secondary-color);
+}
+
+/* Main Menu */
+.main-menu {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ width: 100%;
+ padding: 2rem;
+}
+
+.main-menu h1 {
+ font-size: 4rem;
+ color: var(--primary-color);
+ margin-bottom: 2rem;
+ text-transform: uppercase;
+ letter-spacing: 4px;
+}
+
+.menu-options {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.menu-button {
+ background: none;
+ border: 2px solid var(--primary-color);
+ color: var(--text-color);
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-family: inherit;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ min-width: 250px;
+}
+
+.menu-button:hover {
+ background-color: var(--primary-color);
+ color: var(--background-color);
+}
+
+/* Typing Game */
+.typing-game {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 1rem;
+ position: relative;
+ height: 100vh;
+ overflow: hidden;
+}
+
+.text-container {
+ position: relative;
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 1rem 2rem 0 2rem;
+ margin-top: 2.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+}
+
+.text-display {
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 1.5rem;
+ line-height: 1.5;
+ min-height: 6rem;
+ color: var(--text-color);
+ position: relative;
+ white-space: pre-wrap;
+ word-break: keep-all;
+ overflow-wrap: break-word;
+ width: fit-content;
+ max-width: 800px;
+ tab-size: 4;
+ hyphens: none;
+ text-align: left;
+ padding: 1rem;
+}
+
+.text-display span {
+ white-space: pre;
+ position: relative;
+ display: inline-block;
+}
+
+.text-display span.correct {
+ color: var(--correct-color);
+}
+
+.text-display span.incorrect {
+ color: var(--error-color);
+}
+
+.text-display span.neutral {
+ color: var(--neutral-color);
+}
+
+.text-display span.current {
+ position: relative;
+}
+
+.text-display span.current::after {
+ content: '▏';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ color: var(--caret-color);
+ animation: blink 1s step-end infinite;
+}
+
+.typing-input {
+ position: relative;
+ width: 100%;
+ opacity: 1 !important;
+ z-index: 1;
+ cursor: text;
+ caret-color: auto !important;
+ background: transparent !important;
+ color: transparent !important;
+ border: none !important;
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+.typing-input:focus {
+ background: transparent !important;
+ color: transparent !important;
+ border: none !important;
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+.theme-toggle {
+ position: fixed;
+ top: 1rem;
+ right: 1rem;
+ background: rgba(255,255,255,0.08);
+ border: none !important;
+ outline: none !important;
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,0.12), 0 1.5px 4px 0 rgba(0,0,0,0.10);
+ color: var(--primary-color);
+ padding: 0.7rem 1rem;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(.4,0,.2,1);
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ z-index: 100;
+ border-radius: 1.5rem;
+ backdrop-filter: blur(8px);
+ -webkit-backdrop-filter: blur(8px);
+}
+
+.theme-toggle:focus,
+.theme-toggle:active {
+ border: none !important;
+ outline: none !important;
+ box-shadow: 0 4px 16px 0 rgba(0,0,0,0.18);
+ background: rgba(255,255,255,0.16);
+}
+
+.theme-toggle:hover {
+ color: var(--secondary-color);
+ background: rgba(255,255,255,0.18);
+ box-shadow: 0 6px 24px 0 rgba(0,0,0,0.18);
+ transform: scale(1.06);
+}
+
+.theme-toggle svg {
+ width: 1.5rem;
+ height: 1.5rem;
+ transition: color 0.2s, filter 0.2s;
+ filter: drop-shadow(0 1px 2px rgba(0,0,0,0.10));
+}
+
+@keyframes blink {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0; }
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+ .main-menu h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .menu-button {
+ padding: 0.8rem 1.5rem;
+ font-size: 1rem;
+ min-width: 200px;
+ }
+
+ .typing-game {
+ padding: 1rem;
+ }
+
+ .text-container {
+ padding: 1rem;
+ margin-top: 5rem;
+ }
+
+ .stats-container {
+ padding: 0 1rem;
+ }
+
+ .wpm-stat {
+ left: 1rem;
+ top: 50%;
+ }
+
+ .acc-stat {
+ right: 1rem;
+ top: 50%;
+ }
+
+ .time-stat {
+ bottom: 0.5rem;
+ font-size: 1rem;
+ }
+
+ .text-display {
+ font-size: 1.2rem;
+ }
+
+ .end-screen-stats {
+ gap: 1rem;
+ padding: 0 1rem;
+ }
+
+ .end-screen-stat {
+ padding: 0.5rem;
+ }
+
+ .end-screen-stat-value {
+ font-size: 1.5rem;
+ }
+
+ .graph-container {
+ height: 200px;
+ padding: 1rem;
+ }
+
+ .graph-axis.x {
+ left: 1rem;
+ right: 1rem;
+ }
+
+ .graph-axis.y {
+ bottom: 1rem;
+ }
+
+ .end-screen-buttons {
+ bottom: 1rem;
+ }
+}
+
+@media (max-height: 600px) {
+ .stats-container {
+ top: 0.5rem;
+ }
+
+ .wpm-stat {
+ top: 50%;
+ }
+
+ .acc-stat {
+ top: 50%;
+ }
+
+ .time-stat {
+ bottom: 0.25rem;
+ font-size: 0.9rem;
+ }
+
+ .text-container {
+ margin-top: 4.5rem;
+ padding: 1rem;
+ }
+
+ .text-display {
+ font-size: 1.2rem;
+ min-height: 4.5rem;
+ }
+
+ .end-screen-stats {
+ gap: 0.75rem;
+ margin: 1rem 0;
+ }
+
+ .end-screen-stat {
+ padding: 0.25rem;
+ }
+
+ .end-screen-stat-value {
+ font-size: 1.2rem;
+ }
+
+ .graph-container {
+ height: 200px;
+ }
+}
+
+@media (max-width: 600px) {
+ .typing-game {
+ padding: 0.5rem;
+ height: 100vh;
+ min-width: 0;
+ }
+ .text-container {
+ padding: 0.5rem 0.5rem 0 0.5rem;
+ margin-top: 1.5rem;
+ min-width: 0;
+ }
+ .text-display {
+ font-size: 1rem;
+ padding: 0.5rem;
+ min-height: 3rem;
+ max-width: 100vw;
+ word-break: break-word;
+ }
+}
+
+.loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ font-size: 1.5rem;
+ color: var(--primary-color);
+ font-family: 'JetBrains Mono', monospace;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+#root {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+/* Typing Game */
+.stats-bar {
+ display: none;
+}
+
+.end-screen {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 2rem;
+ padding-top: 6rem;
+ min-height: 100vh;
+ position: relative;
+}
+
+.end-screen-stats {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+ width: 100%;
+ margin-bottom: 3rem;
+}
+
+.end-screen-stat {
+ text-align: center;
+ padding: 1.5rem;
+ transition: transform 0.2s ease;
+}
+
+.end-screen-stat.wpm {
+ grid-column: 1;
+ grid-row: 1;
+ text-align: left;
+}
+
+.end-screen-stat.errors {
+ grid-column: 3;
+ grid-row: 1;
+ text-align: right;
+}
+
+.end-screen-stat.time {
+ grid-column: 2;
+ grid-row: 1;
+ text-align: center;
+}
+
+.end-screen-stat:hover {
+ transform: translateY(-2px);
+}
+
+.end-screen-stat-label {
+ font-size: 0.8rem;
+ color: var(--text-color);
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ margin-bottom: 0.5rem;
+}
+
+.end-screen-stat-value {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ font-weight: bold;
+}
+
+.end-screen-buttons {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 1.5rem;
+}
+
+.end-screen-button {
+ background: none;
+ border: 2px solid var(--primary-color);
+ color: var(--text-color);
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-family: inherit;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ min-width: 250px;
+ border-radius: 8px;
+}
+
+.end-screen-button:hover {
+ background-color: var(--primary-color);
+ color: var(--background-color);
+ transform: translateY(-2px);
+}
+
+/* Character styling */
+.correct {
+ color: var(--correct-color);
+}
+
+.incorrect {
+ color: var(--error-color);
+ text-decoration: underline;
+}
+
+.current {
+ background-color: rgba(0, 0, 0, 0.1);
+ border-radius: 2px;
+}
+
+.error-screen {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 2rem;
+ text-align: center;
+}
+
+.error-screen h2 {
+ margin-bottom: 1rem;
+}
+
+.error-screen p {
+ margin-bottom: 2rem;
+}
+
+.stats-container {
+ position: fixed;
+ top: 1rem;
+ left: 0;
+ right: 0;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ padding: 0 2rem;
+ z-index: 10;
+}
+
+.wpm-stat {
+ position: fixed;
+ left: 2rem;
+ top: 50%;
+ transform: translateY(-50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 6rem;
+}
+
+.acc-stat {
+ position: fixed;
+ right: 2rem;
+ top: 50%;
+ transform: translateY(-50%);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ width: 6rem;
+}
+
+.time-stat {
+ position: fixed;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 1rem;
+ z-index: 100;
+}
+
+.stat-label {
+ font-size: 0.8rem;
+ color: var(--text-color);
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ margin-bottom: 0.5rem;
+}
+
+.stat-value {
+ font-size: 2rem;
+ color: var(--primary-color);
+ font-weight: bold;
+}
+
+.graph-container {
+ width: 100%;
+ height: 300px;
+ margin: 2rem 0;
+ position: relative;
+ padding: 2rem;
+ margin-top: 6rem;
+}
+
+.graph-container canvas {
+ width: 100%;
+ height: 100%;
+}
+
+.graph-axis {
+ position: absolute;
+ color: var(--text-color);
+ font-size: 0.8rem;
+ font-family: 'JetBrains Mono', monospace;
+}
+
+.graph-axis.x {
+ bottom: 0;
+ left: 2rem;
+ right: 2rem;
+ display: flex;
+ justify-content: space-between;
+ padding: 0.5rem 0;
+}
+
+.graph-axis.y {
+ top: 0;
+ bottom: 2rem;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 0 0.5rem;
+ width: 3rem;
+ text-align: right;
+}
+
+body, .app, #root {
+ overflow-x: hidden;
+ scrollbar-width: none; /* Firefox */
+}
+body::-webkit-scrollbar, .app::-webkit-scrollbar, #root::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
+}
+
+.future-modes-placeholder {
+ width: 100%;
+ min-height: 3rem;
+ background: transparent;
+ margin-top: 1.5rem;
+}
+
+.end-screen-text {
+ width: 100%;
+ max-width: 800px;
+ margin: 0 auto 2rem auto;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 1.2rem;
+ color: var(--text-color);
+ background: rgba(0,0,0,0.04);
+ border-radius: 6px;
+ padding: 1rem 1.5rem;
+ text-align: left;
+ word-break: break-word;
+}
+
+.end-screen-graph-row {
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ justify-content: space-between;
+ width: 100%;
+ max-width: 900px;
+ margin: 0 auto 1.5rem auto;
+}
+
+.end-screen-stat.wpm {
+ flex: 0 0 120px;
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ margin-right: 1.5rem;
+}
+
+.end-screen-stat.errors {
+ flex: 0 0 120px;
+ text-align: right;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-end;
+ margin-left: 1.5rem;
+}
+
+.graph-container {
+ flex: 1 1 0;
+ min-width: 0;
+ margin: 0;
+ padding: 2rem 0;
+ height: 300px;
+ position: relative;
+ background: rgba(0,0,0,0.02);
+ border-radius: 8px;
+}
+
+.end-screen-graph-row.end-screen-time-row {
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ margin: 0 auto 2rem auto;
+}
+
+.end-screen-stat.time {
+ text-align: center;
+ margin: 0 auto;
+ font-size: 1.1rem;
+}
+
+.end-screen-rawwpm {
+ width: 100%;
+ max-width: 900px;
+ margin: 0 auto 2rem auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 1.5rem;
+ font-size: 1.3rem;
+}
+.end-screen-rawwpm .stat-label {
+ font-size: 1rem;
+ color: var(--text-color);
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ margin-right: 0.5rem;
+}
+.end-screen-rawwpm .stat-value {
+ font-size: 2rem;
+ color: var(--primary-color);
+ font-weight: bold;
+}
+
+.end-screen-stat.acc {
+ flex: 0 0 120px;
+ text-align: right;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-end;
+ margin-left: 1.5rem;
+}
+
+.end-screen-time {
+ width: 100%;
+ max-width: 900px;
+ margin: 0 auto;
+ text-align: center;
+ padding: 1rem 0;
+}
+
+.end-screen-time .stat-label {
+ font-size: 0.9rem;
+ margin-bottom: 0.3rem;
+}
+
+.end-screen-time .stat-value {
+ font-size: 1.5rem;
+}
+
+@media (max-width: 900px) {
+ .end-screen-graph-row {
+ flex-direction: column !important;
+ align-items: stretch !important;
+ max-width: 100vw !important;
+ position: relative !important;
+ }
+ .endscreen-side-stat {
+ position: static !important;
+ left: unset !important;
+ right: unset !important;
+ top: unset !important;
+ transform: none !important;
+ width: 100% !important;
+ margin-bottom: 0.5rem !important;
+ z-index: 10;
+ display: flex !important;
+ flex-direction: row !important;
+ justify-content: space-between !important;
+ align-items: center !important;
+ }
+ .graph-container {
+ max-width: 100vw !important;
+ min-width: 0 !important;
+ width: 100% !important;
+ overflow-x: auto !important;
+ margin: 0 auto 1rem auto !important;
+ height: 160px !important;
+ }
+ .end-screen-buttons {
+ position: static !important;
+ left: unset !important;
+ bottom: unset !important;
+ transform: none !important;
+ width: 100% !important;
+ margin: 1.5rem 0 0 0 !important;
+ flex-direction: column !important;
+ gap: 1rem !important;
+ z-index: 10;
+ }
+ .end-screen-time {
+ position: static !important;
+ left: unset !important;
+ transform: none !important;
+ bottom: unset !important;
+ width: 100% !important;
+ margin-top: 1rem !important;
+ }
+}
+
+@media (max-width: 600px) {
+ .end-screen-graph-row {
+ padding: 0 0.5rem !important;
+ }
+ .graph-container {
+ height: 180px !important;
+ padding: 0.5rem !important;
+ }
+ .end-screen-stat.wpm, .end-screen-stat.acc {
+ font-size: 1rem !important;
+ padding: 0.5rem !important;
+ }
+ .end-screen-time .stat-value {
+ font-size: 1.2rem !important;
+ }
+}
+
+@media (max-width: 900px) {
+ .text-container {
+ padding: 0.5rem !important;
+ min-height: 120px !important;
+ }
+}
+@media (max-width: 600px) {
+ .text-container {
+ min-height: 80px !important;
+ font-size: 1rem !important;
+ }
+}
+
+@media (max-width: 700px) {
+ body, #root, .app, .end-screen {
+ overflow-y: auto !important;
+ overflow-x: hidden !important;
+ }
+ .end-screen {
+ min-height: 0 !important;
+ height: auto !important;
+ padding-top: 1.5rem !important;
+ padding-bottom: 0.5rem !important;
+ display: flex !important;
+ flex-direction: column !important;
+ }
+ .end-screen-buttons {
+ margin-top: auto !important;
+ margin-bottom: 0 !important;
+ }
+ .end-screen-main-content {
+ flex: 1 0 auto !important;
+ width: 100% !important;
+ display: flex !important;
+ flex-direction: column !important;
+ }
+ .end-screen-buttons {
+ margin-top: auto !important;
+ margin-bottom: 0 !important;
+ width: 100% !important;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-06 04:26:32 +0000