y/kotsukotsu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added server, db, auth system

Browse source
This commit is contained in:
polwex 2026-04-06 22:11:34 +09:00
parent 4d3395fa1c
commit 199dab69f9
28 changed files with 989 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

221
src/styles/typing.css Normal file
View file

@ -0,0 +1,221 @@
.typingArea {
background: var(--bg-card);
border-radius: var(--radius);
padding: 30px;
font-family: var(--font-mono);
font-size: 22px;
line-height: 1.8;
min-height: 120px;
cursor: text;
outline: none;
position: relative;
border: 2px solid transparent;
transition: border-color 0.2s ease;
}
.typingArea:focus {
border-color: var(--accent);
}
.typingArea.blurred::after {
content: 'Click here to start typing...';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(26, 27, 46, 0.8);
border-radius: var(--radius);
color: var(--text-dim);
font-size: 16px;
}
.char {
position: relative;
letter-spacing: 1px;
}
.correct {
color: var(--success);
}
.incorrect {
color: var(--error);
background: rgba(231, 76, 60, 0.15);
border-radius: 3px;
}
.current {
border-left: 2px solid var(--accent);
animation: blink 1s step-end infinite;
margin-left: -1px;
padding-left: 1px;
}
.pending {
color: var(--text-dim);
}
@keyframes blink {
50% { border-color: transparent; }
}
.stats {
display: flex;
gap: 30px;
padding: 16px 0;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
}
.statValue {
font-size: 28px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--accent);
}
.statLabel {
font-size: 12px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
}
.lessonSelect {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.lessonCard {
background: var(--bg-card);
border-radius: var(--radius);
padding: 20px;
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.lessonCard:hover:not(.locked) {
border-color: var(--accent);
transform: translateY(-2px);
}
.locked {
opacity: 0.4;
cursor: not-allowed;
}
.completed {
border-color: var(--success);
}
.lessonId {
font-size: 12px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
}
.lessonName {
font-size: 18px;
font-weight: 600;
margin: 6px 0;
}
.lessonKeys {
font-family: var(--font-mono);
color: var(--accent);
font-size: 14px;
}
.lessonStatus {
font-size: 12px;
margin-top: 8px;
color: var(--text-dim);
}
.modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
animation: fadeIn 0.2s ease;
}
.modalContent {
background: var(--bg-card);
border-radius: var(--radius);
padding: 40px;
max-width: 440px;
width: 90%;
text-align: center;
animation: fadeIn 0.3s ease;
}
.modalTitle {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
}
.modalStats {
display: flex;
justify-content: center;
gap: 40px;
margin: 24px 0;
}
.unlockText {
color: var(--success);
font-size: 16px;
margin: 16px 0;
}
.modalButtons {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 24px;
}
.primaryBtn {
background: var(--accent);
color: white;
font-weight: 600;
padding: 12px 28px;
font-size: 16px;
}
.primaryBtn:hover {
filter: brightness(1.1);
background: var(--accent);
}
.secondaryBtn {
background: var(--bg-hover);
padding: 12px 28px;
font-size: 16px;
}
.modeHeader {
margin-bottom: 24px;
}
.modeTitle {
font-size: 24px;
font-weight: 700;
}
.modeSubtitle {
color: var(--text-dim);
margin-top: 4px;
}