diff --git a/static/difficulty-select.css b/static/difficulty-select.css new file mode 100644 index 0000000..cf0d48e --- /dev/null +++ b/static/difficulty-select.css @@ -0,0 +1,425 @@ +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap'); + +/* === CSS VARIABLES === */ +:root { + /* Colors */ + --color-bg-body: #161b22; + --color-bg-dark: #121212; + --color-bg-sidebar: #111; + --color-bg-component: #1e1e1e; + --color-bg-hover: #2a2a2a; + --color-bg-accent: #005f87; + --color-bg-tab-active: #1a3d2a; + --color-border: #444; + --color-border-accent: #00ff88; + --color-border-panel: #30363d; + --color-text-primary: #ccc; + --color-text-muted: #888; + --color-text-accent: #00ff88; + --color-text-white: #fff; + --color-text-dark: #333; + --color-button: #238636; + --color-button-disabled: #555; + --color-connection: #333; + --color-connection-selected: #007bff; + --color-tooltip-bg: #333; + --color-tooltip-text: #fff; + + /* Sizes */ + --radius-small: 4px; + --radius-medium: 6px; + --radius-large: 8px; + --font-family-mono: 'JetBrains Mono', monospace; + --font-family-code: 'Fira Code', monospace; + --component-padding: 8px; + --component-gap: 12px; + + /* Difficulty-specific colors using existing palette */ + --color-easy: var(--color-text-accent); + --color-medium: #d29922; + --color-hard: #f85149; +} + +/* === RESET === */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: var(--font-family-mono); + background-color: var(--color-bg-body); + color: var(--color-text-primary); + min-height: 100vh; + background: + radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%), + radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%), + var(--color-bg-body); +} + +/* === HEADER === */ +.header { + width: 100%; + background: transparent; + padding: 12px 24px; + border-bottom: 1px solid var(--color-border); + display: flex; + align-items: center; + justify-content: space-between; +} + +.header-text { + font-size: 24px; + margin: 0; + color: var(--color-text-accent); + font-weight: bold; +} + +.back-button { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + background: transparent; + color: var(--color-text-primary); + text-decoration: none; + border: 1px solid var(--color-border); + border-radius: var(--radius-medium); + font-weight: 500; + font-family: var(--font-family-mono); + font-size: 12px; + transition: all 0.2s ease; +} + +.back-button:hover { + background-color: var(--color-bg-hover); + border-color: var(--color-border-accent); +} + +/* === MAIN CONTENT === */ +.main-container { + max-width: 1200px; + margin: 0 auto; + padding: 60px 24px; +} + +.title-section { + text-align: center; + margin-bottom: 60px; +} + +.main-title { + font-size: 48px; + font-weight: 700; + margin: 0 0 20px 0; + background: linear-gradient(135deg, var(--color-text-accent), var(--color-connection-selected)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.subtitle { + font-size: 18px; + color: var(--color-text-muted); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +/* === DIFFICULTY CARDS === */ +.difficulty-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + max-width: 1000px; + margin: 0 auto; +} + +.difficulty-card { + background: var(--color-bg-component); + border: 2px solid var(--color-border); + border-radius: var(--radius-large); + padding: 24px; + cursor: pointer; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.difficulty-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05)); + opacity: 0; + transition: opacity 0.3s ease; +} + +.difficulty-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); + background-color: var(--color-bg-hover); +} + +.difficulty-card:hover::before { + opacity: 1; +} + +.difficulty-card.easy { + border-color: var(--color-easy); +} + +.difficulty-card.easy:hover { + border-color: var(--color-easy); + box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3); +} + +.difficulty-card.medium { + border-color: var(--color-medium); +} + +.difficulty-card.medium:hover { + border-color: var(--color-medium); + box-shadow: 0 10px 30px rgba(210, 153, 34, 0.3); +} + +.difficulty-card.hard { + border-color: var(--color-hard); +} + +.difficulty-card.hard:hover { + border-color: var(--color-hard); + box-shadow: 0 10px 30px rgba(248, 81, 73, 0.3); +} + +.difficulty-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 20px; +} + +.difficulty-icon { + width: 50px; + height: 50px; + border-radius: var(--radius-medium); + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + font-weight: bold; + background: var(--color-bg-dark); + border: 1px solid var(--color-border-panel); +} + +.difficulty-card.easy .difficulty-icon { + color: var(--color-easy); + border-color: var(--color-easy); +} + +.difficulty-card.medium .difficulty-icon { + color: var(--color-medium); + border-color: var(--color-medium); +} + +.difficulty-card.hard .difficulty-icon { + color: var(--color-hard); + border-color: var(--color-hard); +} + +.difficulty-title { + font-size: 28px; + font-weight: 700; + margin: 0; + color: var(--color-text-white); +} + +.difficulty-description { + font-size: 16px; + color: var(--color-text-muted); + margin-bottom: 25px; + line-height: 1.5; +} + +.difficulty-features { + list-style: none; + padding: 0; + margin: 0 0 25px 0; +} + +.difficulty-features li { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 12px; + font-size: 14px; + color: var(--color-text-primary); +} + +.difficulty-features li::before { + content: '✓'; + font-weight: bold; + width: 16px; + height: 16px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + font-size: 12px; + background: var(--color-bg-dark); + border: 1px solid var(--color-border); +} + +.difficulty-card.easy .difficulty-features li::before { + color: var(--color-easy); + border-color: var(--color-easy); +} + +.difficulty-card.medium .difficulty-features li::before { + color: var(--color-medium); + border-color: var(--color-medium); +} + +.difficulty-card.hard .difficulty-features li::before { + color: var(--color-hard); + border-color: var(--color-hard); +} + +.difficulty-stats { + background: var(--color-bg-dark); + border: 1px solid var(--color-border-panel); + border-radius: var(--radius-medium); + padding: 16px; + margin-bottom: 25px; +} + +.stats-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.stat-item { + text-align: center; +} + +.stat-label { + font-size: 12px; + color: var(--color-text-muted); + margin-bottom: 5px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.stat-value { + font-size: 18px; + font-weight: 700; + color: var(--color-text-white); +} + +.select-button { + width: 100%; + padding: 15px; + border: none; + border-radius: var(--radius-medium); + font-size: 16px; + font-weight: 600; + font-family: var(--font-family-mono); + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; + background: var(--color-button); + color: var(--color-text-white); +} + +.select-button:hover { + background: var(--color-bg-accent); + transform: translateY(-2px); +} + +.select-button:disabled { + background: var(--color-button-disabled); + cursor: not-allowed; + transform: none; +} + +.difficulty-card.easy .select-button { + border: 1px solid var(--color-easy); +} + +.difficulty-card.easy .select-button:hover { + border-color: var(--color-easy); + box-shadow: 0 0 10px rgba(0, 255, 136, 0.3); +} + +.difficulty-card.medium .select-button { + border: 1px solid var(--color-medium); +} + +.difficulty-card.medium .select-button:hover { + border-color: var(--color-medium); + box-shadow: 0 0 10px rgba(210, 153, 34, 0.3); +} + +.difficulty-card.hard .select-button { + border: 1px solid var(--color-hard); +} + +.difficulty-card.hard .select-button:hover { + border-color: var(--color-hard); + box-shadow: 0 0 10px rgba(248, 81, 73, 0.3); +} + +/* === RESPONSIVE === */ +@media (max-width: 1024px) { + .difficulty-grid { + grid-template-columns: 1fr; + gap: 20px; + } +} + +@media (max-width: 768px) { + .main-title { + font-size: 36px; + } + + .difficulty-card { + padding: 20px; + } + + .main-container { + padding: 40px 16px; + } +} + +/* === ANIMATIONS === */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.difficulty-card { + animation: fadeInUp 0.6s ease forwards; +} + +.difficulty-card:nth-child(1) { + animation-delay: 0.1s; +} + +.difficulty-card:nth-child(2) { + animation-delay: 0.2s; +} + +.difficulty-card:nth-child(3) { + animation-delay: 0.3s; +} \ No newline at end of file diff --git a/static/difficulty-select.html b/static/difficulty-select.html index 1e57e67..de7d5f2 100644 --- a/static/difficulty-select.html +++ b/static/difficulty-select.html @@ -4,433 +4,7 @@ System Design Game - Select Difficulty - +
diff --git a/static/failure.css b/static/failure.css new file mode 100644 index 0000000..d708aee --- /dev/null +++ b/static/failure.css @@ -0,0 +1,625 @@ +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap'); + +/* === CSS VARIABLES === */ +:root { + /* Failure Colors - Red Theme */ + --color-bg-body: #1a0a0a; + --color-bg-dark: #0f0505; + --color-bg-card: #2a1010; + --color-bg-hover: #3a1515; + --color-bg-accent: #8b0000; + + --color-border: #660000; + --color-border-accent: #ff4444; + --color-border-panel: #4a1515; + + --color-text-primary: #ffcccc; + --color-text-muted: #cc8888; + --color-text-accent: #ff4444; + --color-text-white: #fff; + --color-text-danger: #ff0000; + + --color-button: #cc0000; + --color-button-hover: #ff0000; + --color-button-disabled: #660000; + + /* Normal Colors - Original Theme (for recovery) */ + --color-bg-body-normal: #161b22; + --color-bg-dark-normal: #121212; + --color-bg-card-normal: #1e1e1e; + --color-bg-hover-normal: #2a2a2a; + --color-bg-accent-normal: #005f87; + + --color-border-normal: #444; + --color-border-accent-normal: #00ff88; + --color-border-panel-normal: #30363d; + + --color-text-primary-normal: #ccc; + --color-text-muted-normal: #888; + --color-text-accent-normal: #00ff88; + --color-text-white-normal: #fff; + + --color-button-normal: #238636; + --color-button-hover-normal: #2ea043; + + /* Sizes */ + --radius-small: 4px; + --radius-medium: 6px; + --radius-large: 8px; + + --font-family-mono: 'JetBrains Mono', monospace; +} + +/* === RESET === */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: var(--font-family-mono); + background-color: var(--color-bg-body); + color: var(--color-text-primary); + min-height: 100vh; + overflow: hidden; + background-image: + radial-gradient(circle at 20% 30%, rgba(255, 0, 0, 0.3), transparent 40%), + radial-gradient(circle at 80% 70%, rgba(139, 0, 0, 0.2), transparent 50%), + radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.1), transparent 60%); + animation: backgroundPulse 3s ease-in-out infinite alternate; + transition: all 3s ease-in-out; +} + +/* Recovery state - transitions to normal colors */ +body.recovering { + background-color: var(--color-bg-body-normal); + color: var(--color-text-primary-normal); + background-image: + radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%), + radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%); + animation: none; +} + +@keyframes backgroundPulse { + 0% { + background-size: 100% 100%, 100% 100%, 100% 100%; + } + 100% { + background-size: 110% 110%, 110% 110%, 110% 110%; + } +} + +/* === HEADER === */ +.header { + width: 100%; + background: linear-gradient(90deg, var(--color-bg-dark), var(--color-bg-accent), var(--color-bg-dark)); + padding: 12px 24px; + font-weight: bold; + color: var(--color-text-danger); + border-bottom: 1px solid var(--color-border-accent); + display: flex; + align-items: center; + justify-content: space-between; + box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3); + animation: headerFlicker 2s ease-in-out infinite; + transition: all 3s ease-in-out; +} + +.recovering .header { + background: none; + color: var(--color-text-accent-normal); + border-bottom: 1px solid var(--color-border-normal); + box-shadow: none; + animation: none; +} + +@keyframes headerFlicker { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.8; } +} + +.header-text { + font-size: 24px; + margin: 0; + text-shadow: 0 0 10px rgba(255, 0, 0, 0.8); + transition: all 3s ease-in-out; +} + +.recovering .header-text { + text-shadow: 0 0 10px rgba(0, 255, 136, 0.8) +} + +.status-indicator { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + background-color: var(--color-bg-accent); + color: var(--color-text-white); + border-radius: var(--radius-medium); + font-weight: 500; + font-size: 12px; + border: 1px solid var(--color-border-accent); + animation: statusBlink 1s ease-in-out infinite; + transition: all 3s ease-in-out; +} + +.recovering .status-indicator { + background-color: var(--color-bg-accent-normal); + border-color: var(--color-border-accent-normal); + animation: none; +} + +@keyframes statusBlink { + 0%, 50% { background-color: var(--color-bg-accent); } + 51%, 100% { background-color: var(--color-button-hover); } +} + +/* === MAIN FAILURE SCREEN === */ +.failure-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: calc(100vh - 80px); + padding: 40px 20px; + position: relative; +} + +/* Doom-style skull/warning icon */ +.failure-icon { + font-size: 120px; + color: var(--color-text-danger); + margin-bottom: 30px; + animation: skullPulse 2s ease-in-out infinite; + text-shadow: + 0 0 20px rgba(255, 0, 0, 0.8), + 0 0 40px rgba(255, 0, 0, 0.6), + 0 0 60px rgba(255, 0, 0, 0.4); + transition: all 3s ease-in-out; +} + +.recovering .failure-icon { + color: var(--color-text-accent-normal); + animation: none; + text-shadow: + 0 0 20px rgba(0, 255, 136, 0.8), + 0 0 40px rgba(0, 255, 136, 0.6), + 0 0 60px rgba(0, 255, 136, 0.4); +} + +@keyframes skullPulse { + 0%, 100% { + transform: scale(1); + filter: brightness(1); + } + 50% { + transform: scale(1.1); + filter: brightness(1.3); + } +} + +.failure-title { + font-size: 64px; + font-weight: 700; + color: var(--color-text-danger); + margin: 0 0 20px 0; + text-align: center; + text-shadow: + 0 0 10px rgba(255, 0, 0, 0.8), + 0 0 20px rgba(255, 0, 0, 0.6), + 0 0 30px rgba(255, 0, 0, 0.4); + animation: titleGlitch 3s ease-in-out infinite; + transition: all 3s ease-in-out; +} + +.recovering .failure-title { + color: var(--color-text-accent-normal); + text-shadow: + 0 0 10px rgba(0, 255, 136, 0.8), + 0 0 20px rgba(0, 255, 136, 0.6), + 0 0 30px rgba(0, 255, 136, 0.4); + animation: none; +} + +@keyframes titleGlitch { + 0%, 90%, 100% { + transform: translateX(0); + filter: hue-rotate(0deg); + } + 92% { + transform: translateX(-2px); + filter: hue-rotate(90deg); + } + 94% { + transform: translateX(2px); + filter: hue-rotate(-90deg); + } + 96% { + transform: translateX(-1px); + filter: hue-rotate(45deg); + } +} + +.failure-subtitle { + font-size: 24px; + color: var(--color-text-accent); + margin: 0 0 40px 0; + text-align: center; + opacity: 0.9; + animation: subtitleFade 2s ease-in-out infinite alternate; + transition: all 3s ease-in-out; +} + +.recovering .failure-subtitle { + color: var(--color-text-muted-normal); + animation: none; + opacity: 1; +} + +@keyframes subtitleFade { + 0% { opacity: 0.7; } + 100% { opacity: 1; } +} + +/* === FAILURE DETAILS === */ +.failure-details { + background: var(--color-bg-card); + border: 2px solid var(--color-border-accent); + border-radius: var(--radius-large); + padding: 30px; + margin-bottom: 40px; + max-width: 600px; + width: 100%; + box-shadow: + 0 0 20px rgba(255, 0, 0, 0.3), + inset 0 0 20px rgba(255, 0, 0, 0.1); + animation: detailsPulse 4s ease-in-out infinite; + transition: all 3s ease-in-out; +} + +.recovering .failure-details { + background: var(--color-bg-card-normal); + border-color: var(--color-border-accent-normal); + box-shadow: + 0 0 20px rgba(0, 255, 136, 0.3), + inset 0 0 20px rgba(0, 255, 136, 0.1); + animation: none; +} + +@keyframes detailsPulse { + 0%, 100% { + border-color: var(--color-border-accent); + box-shadow: + 0 0 20px rgba(255, 0, 0, 0.3), + inset 0 0 20px rgba(255, 0, 0, 0.1); + } + 50% { + border-color: var(--color-text-danger); + box-shadow: + 0 0 30px rgba(255, 0, 0, 0.5), + inset 0 0 30px rgba(255, 0, 0, 0.2); + } +} + +.failure-reason { + font-size: 18px; + font-weight: 600; + color: var(--color-text-white); + margin-bottom: 20px; + text-align: center; + transition: all 3s ease-in-out; +} + +.recovering .failure-reason { + color: var(--color-text-white-normal); +} + +.failure-metrics { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-bottom: 20px; +} + +.metric-item { + background: var(--color-bg-dark); + border: 1px solid var(--color-border); + border-radius: var(--radius-medium); + padding: 15px; + text-align: center; + transition: all 3s ease-in-out; +} + +.recovering .metric-item { + background: var(--color-bg-dark-normal); + border-color: var(--color-border-normal); +} + +.metric-label { + font-size: 14px; + color: var(--color-text-muted); + margin-bottom: 5px; + transition: all 3s ease-in-out; +} + +.recovering .metric-label { + color: var(--color-text-muted-normal); +} + +.metric-value { + font-size: 20px; + font-weight: 700; + color: var(--color-text-danger); + transition: all 3s ease-in-out; +} + +.recovering .metric-value { + color: var(--color-text-accent-normal); +} + +.metric-value.exceeded { + animation: valueFlash 1s ease-in-out infinite; +} + +.recovering .metric-value.exceeded { + animation: none; +} + +@keyframes valueFlash { + 0%, 50% { color: var(--color-text-danger); } + 51%, 100% { color: var(--color-text-white); } +} + +/* === ERROR LOG === */ +.error-log { + background: var(--color-bg-dark); + border: 1px solid var(--color-border); + border-radius: var(--radius-medium); + padding: 15px; + font-family: 'Courier New', monospace; + font-size: 12px; + color: var(--color-text-accent); + max-height: 150px; + overflow-y: auto; + margin-bottom: 20px; + transition: all 3s ease-in-out; +} + +.recovering .error-log { + background: var(--color-bg-dark-normal); + border-color: var(--color-border-normal); + color: var(--color-text-accent-normal); +} + +.error-line { + margin-bottom: 5px; + opacity: 0; + animation: errorAppear 0.5s ease-out forwards; + transition: all 3s ease-in-out; +} + +.error-line:nth-child(1) { animation-delay: 0.5s; } +.error-line:nth-child(2) { animation-delay: 1s; } +.error-line:nth-child(3) { animation-delay: 1.5s; } +.error-line:nth-child(4) { animation-delay: 2s; } + +@keyframes errorAppear { + 0% { + opacity: 0; + transform: translateX(-10px); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +/* === ACTION BUTTONS === */ +.action-buttons { + display: flex; + gap: 20px; + justify-content: center; + flex-wrap: wrap; +} + +.action-button { + padding: 15px 30px; + border: 2px solid var(--color-border-accent); + border-radius: var(--radius-medium); + font-size: 16px; + font-weight: 600; + font-family: var(--font-family-mono); + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 10px; + min-width: 160px; + justify-content: center; +} + +.retry-button { + background: var(--color-button); + color: var(--color-text-white); + transition: all 3s ease-in-out; +} + +.recovering .retry-button { + background: var(--color-button-normal); + border-color: var(--color-border-accent-normal); +} + +.retry-button:hover { + background: var(--color-button-hover); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(255, 0, 0, 0.4); +} + +.recovering .retry-button:hover { + background: var(--color-button-hover-normal); + box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4); +} + +.menu-button { + background: transparent; + color: var(--color-text-accent); + transition: all 3s ease-in-out; +} + +.recovering .menu-button { + color: var(--color-text-accent-normal); + border-color: var(--color-border-accent-normal); +} + +.menu-button:hover { + background: var(--color-bg-hover); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(255, 68, 68, 0.3); +} + +.recovering .menu-button:hover { + background: var(--color-bg-hover-normal); + box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3); +} + +/* === SCREEN EFFECTS === */ +.screen-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1000; + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(255, 0, 0, 0.03) 2px, + rgba(255, 0, 0, 0.03) 4px + ); + animation: scanlines 0.1s linear infinite; + transition: all 3s ease-in-out; +} + +.recovering .screen-overlay { + background: + repeating-linear-gradient( + 0deg, + transparent, + transparent 2px, + rgba(0, 255, 136, 0.02) 2px, + rgba(0, 255, 136, 0.02) 4px + ); +} + +@keyframes scanlines { + 0% { transform: translateY(0); } + 100% { transform: translateY(4px); } +} + +/* === RECOVERY MESSAGE === */ +.recovery-message { + position: absolute; + top: 20px; + left: 50%; + transform: translateX(-50%); + background: var(--color-bg-accent-normal); + color: var(--color-text-white-normal); + padding: 10px 20px; + border-radius: var(--radius-medium); + font-size: 14px; + font-weight: 600; + opacity: 0; + transition: opacity 1s ease-in-out; + z-index: 100; +} + +.recovery-message.show { + opacity: 1; +} + +/* === RESPONSIVE === */ +@media (max-width: 768px) { + .failure-title { + font-size: 48px; + } + + .failure-subtitle { + font-size: 18px; + } + + .failure-icon { + font-size: 80px; + } + + .failure-metrics { + grid-template-columns: 1fr; + } + + .action-buttons { + flex-direction: column; + align-items: center; + } + + .action-button { + width: 100%; + max-width: 300px; + } +} + +/* === DOOM-STYLE GLITCH EFFECTS === */ +.glitch { + position: relative; +} + +.glitch::before, +.glitch::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: opacity 3s ease-in-out; +} + +.glitch::before { + animation: glitch-1 2s infinite; + color: #ff0000; + z-index: -1; +} + +.glitch::after { + animation: glitch-2 2s infinite; + color: #00ff00; + z-index: -2; +} + +/* Hide glitch effects during recovery */ +.recovering .glitch::before, +.recovering .glitch::after { + opacity: 0; + animation: none; +} + +@keyframes glitch-1 { + 0%, 14%, 15%, 49%, 50%, 99%, 100% { + transform: translate(0); + } + 15%, 49% { + transform: translate(-2px, 0); + } +} + +@keyframes glitch-2 { + 0%, 20%, 21%, 62%, 63%, 99%, 100% { + transform: translate(0); + } + 21%, 62% { + transform: translate(2px, 0); + } +} \ No newline at end of file diff --git a/static/failure.html b/static/failure.html index 72579a4..186bb6f 100644 --- a/static/failure.html +++ b/static/failure.html @@ -4,633 +4,7 @@ System Design Game - System Failed - +
diff --git a/static/game-mode.css b/static/game-mode.css new file mode 100644 index 0000000..a59896a --- /dev/null +++ b/static/game-mode.css @@ -0,0 +1,440 @@ +/* Reusing the existing CSS from the game */ +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap'); + +/* === CSS VARIABLES === */ +:root { + /* Colors */ + --color-bg-body: #161b22; + --color-bg-dark: #121212; + --color-bg-sidebar: #111; + --color-bg-component: #1e1e1e; + --color-bg-hover: #2a2a2a; + --color-bg-accent: #005f87; + --color-bg-tab-active: #1a3d2a; + --color-border: #444; + --color-border-accent: #00ff88; + --color-border-panel: #30363d; + --color-text-primary: #ccc; + --color-text-muted: #888; + --color-text-accent: #00ff88; + --color-text-white: #fff; + --color-text-dark: #333; + --color-button: #238636; + --color-button-disabled: #555; + --color-connection: #333; + --color-connection-selected: #007bff; + --color-tooltip-bg: #333; + --color-tooltip-text: #fff; + + /* Sizes */ + --radius-small: 4px; + --radius-medium: 6px; + --radius-large: 8px; + --font-family-mono: 'JetBrains Mono', monospace; + --font-family-code: 'Fira Code', monospace; + --component-padding: 8px; + --component-gap: 12px; +} + +/* === RESET & BASE STYLES === */ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: var(--font-family-mono); + background-color: var(--color-bg-body); + color: var(--color-text-primary); + min-height: 100vh; +} + +/* === LAYOUT === */ +#page-container { + display: flex; + flex-direction: column; + width: 100%; + min-height: 100vh; +} + +#sd-header { + width: 100%; + background: none; + padding: 12px 24px; + font-weight: bold; + color: var(--color-text-accent); + border-bottom: 1px solid var(--color-text-dark); + display: flex; + align-items: center; + justify-content: space-between; +} + +.header-text { + font-size: 24px; + margin: 0; +} + +#main-content { + display: flex; + flex-direction: column; + flex: 1; + padding: 60px 24px; + align-items: center; + background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1), transparent 50%), + radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1), transparent 50%); +} + +/* === REUSED EXISTING CLASSES === */ +.requirements-section { + background: #161b22; + border: 1px solid #30363d; + border-radius: 8px; + padding: 20px; + margin-bottom: 20px; +} + +.requirements-list { + margin: 0; + padding: 0; + list-style: none; +} + +.requirement-item { + position: relative; + padding: 8px 0 8px 25px; + margin: 0; + border-bottom: 1px solid #30363d; +} + +.requirement-item:before { + content: "✓"; + color: #00ff88; + position: absolute; + left: 0; +} + +.panel-title { + font-weight: bold; + color: var(--color-text-white); + font-size: 15px; + margin-bottom: 0.5rem; +} + +.panel-metric { + margin-bottom: 0.4rem; +} + +.panel-metric .label { + display: inline-block; + width: 140px; + color: var(--color-text-muted); +} + +#github-login-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 14px; + background-color: #fff; + color: #000000; + text-decoration: none; + border-radius: var(--radius-medium); + font-weight: 500; + font-family: var(--font-family-mono); + font-size: 12px; + border: 1px solid #2ea043; + transition: background-color 0.2s ease; +} + +#github-login-btn:hover { + background-color: #ccc; +} + +/* === CUSTOM STYLES FOR GAME MODE SELECTION === */ +.hero-section { + text-align: center; + margin-bottom: 60px; +} + +.hero-section h1 { + font-size: 48px; + font-weight: 700; + margin: 0 0 20px 0; + background: linear-gradient(135deg, var(--color-text-accent), var(--color-connection-selected)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-section p { + font-size: 18px; + color: var(--color-text-muted); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.game-mode-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + max-width: 1000px; + width: 100%; + margin-bottom: 60px; +} + +.game-mode-card { + background: var(--color-bg-component); + border: 2px solid var(--color-border); + border-radius: var(--radius-large); + padding: 30px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.game-mode-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05)); + opacity: 0; + transition: opacity 0.3s ease; +} + +.game-mode-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); + background-color: var(--color-bg-hover); +} + +.game-mode-card:hover::before { + opacity: 1; +} + +.game-mode-card.campaign { + border-color: var(--color-border-accent); +} + +.game-mode-card.campaign:hover { + border-color: var(--color-border-accent); + box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3); +} + +.game-mode-card.practice { + border-color: #ff6b35; +} + +.game-mode-card.practice:hover { + border-color: #ff6b35; + box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3); +} + +.mode-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 25px; +} + +.mode-icon { + width: 60px; + height: 60px; + border-radius: var(--radius-medium); + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + font-weight: bold; + background: var(--color-bg-dark); + border: 1px solid var(--color-border-panel); +} + +.game-mode-card.campaign .mode-icon { + color: var(--color-text-accent); + border-color: var(--color-border-accent); +} + +.game-mode-card.practice .mode-icon { + color: #ff6b35; + border-color: #ff6b35; +} + +.mode-title { + font-size: 28px; + font-weight: 700; + margin: 0 0 5px 0; + color: var(--color-text-white); +} + +.mode-subtitle { + font-size: 16px; + color: var(--color-text-muted); + margin: 0; +} + +.mode-features { + margin-bottom: 25px; +} + +.mode-features .requirements-list .requirement-item { + border-bottom: 1px solid var(--color-border-panel); +} + +.game-mode-card.campaign .mode-features .requirement-item:before { + color: var(--color-text-accent); +} + +.game-mode-card.practice .mode-features .requirement-item:before { + color: #ff6b35; +} + +.mode-progress { + background: var(--color-bg-dark); + border: 1px solid var(--color-border-panel); + border-radius: var(--radius-medium); + padding: 16px; + margin-bottom: 25px; +} + +.progress-bar { + background: var(--color-border); + height: 8px; + border-radius: var(--radius-small); + overflow: hidden; + margin-top: 8px; +} + +.progress-fill { + height: 100%; + background: linear-gradient(90deg, var(--color-text-accent), var(--color-connection-selected)); + width: 33%; + border-radius: var(--radius-small); +} + +.recent-activity { + font-size: 14px; +} + +.recent-activity .activity-item { + margin-bottom: 4px; +} + +.recent-activity .activity-item.active { + color: #ff6b35; +} + +.recent-activity .activity-item.inactive { + color: var(--color-text-muted); +} + +.mode-button { + width: 100%; + padding: 15px; + border: none; + border-radius: var(--radius-medium); + font-size: 16px; + font-weight: 600; + font-family: var(--font-family-mono); + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; + text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; +} + +.game-mode-card.campaign .mode-button { + background: linear-gradient(90deg, var(--color-text-accent), var(--color-connection-selected)); + color: var(--color-bg-body); +} + +.game-mode-card.practice .mode-button { + background: linear-gradient(90deg, #ff6b35, #f7931e); + color: var(--color-text-white); +} + +.mode-button:hover { + opacity: 0.9; + transform: translateY(-2px); +} + +/* === STATS GRID === */ +.stats-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; + max-width: 800px; + width: 100%; +} + +.stat-card { + background: var(--color-bg-component); + border: 1px solid var(--color-border); + border-radius: var(--radius-large); + padding: 20px; + text-align: center; +} + +.stat-value { + font-size: 28px; + font-weight: 700; + margin-bottom: 8px; +} + +.stat-card:nth-child(1) .stat-value { + color: var(--color-text-accent); +} + +.stat-card:nth-child(2) .stat-value { + color: var(--color-connection-selected); +} + +.stat-card:nth-child(3) .stat-value { + color: #ff6b35; +} + +.stat-card:nth-child(4) .stat-value { + color: #f7931e; +} + +.stat-label { + font-size: 14px; + color: var(--color-text-muted); +} + +/* === RESPONSIVE === */ +@media (max-width: 1024px) { + .game-mode-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + .stats-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .hero-section h1 { + font-size: 36px; + } + + .game-mode-card { + padding: 20px; + } + + #main-content { + padding: 40px 16px; + } + + .stats-grid { + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/static/game-mode.html b/static/game-mode.html index 61594af..50a1b14 100644 --- a/static/game-mode.html +++ b/static/game-mode.html @@ -4,448 +4,7 @@ System Design Game - Choose Your Path - +
diff --git a/static/style.css b/static/game.css similarity index 70% rename from static/style.css rename to static/game.css index 81efecb..d59014f 100644 --- a/static/style.css +++ b/static/game.css @@ -200,210 +200,197 @@ body { } .dropped.selected rect { - stroke: #00bcd4; + stroke: var(--color-border-accent); stroke-width: 2; } -/* === TOOLBAR === */ #canvas-toolbar { - position: absolute; - top: 12px; - left: 12px; - z-index: 20; display: flex; gap: 8px; - background: var(--color-bg-component); - border: 1px solid var(--color-border); - border-radius: var(--radius-small); - padding: 6px; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.4); + padding: 8px 0; + border-bottom: 1px solid var(--color-border-panel); + background: var(--color-bg-dark); + align-items: center; + justify-content: flex-start; } .toolbar-btn { - background: none; + padding: 6px 12px; + background: var(--color-bg-component); border: 1px solid var(--color-border); - color: var(--color-text-primary); - padding: 6px 10px; border-radius: var(--radius-small); - font-size: 14px; + color: var(--color-text-primary); cursor: pointer; - font-family: var(--font-family-mono); + font-size: 14px; } .toolbar-btn:hover { - background-color: var(--color-bg-hover); + background: var(--color-bg-hover); border-color: var(--color-border-accent); } .toolbar-btn.active { - background-color: var(--color-bg-accent); + background: var(--color-bg-accent); color: var(--color-text-white); border-color: var(--color-button); } -/* === PANELS === */ #info-panel { position: absolute; - top: 12px; - right: 12px; - background: var(--color-bg-dark); - color: var(--color-text-primary); - padding: 1rem; - border-radius: var(--radius-large); - font-family: monospace; + top: 8px; + right: 8px; + background: var(--color-bg-component); + border: 1px solid var(--color-border-panel); + border-radius: var(--radius-medium); + padding: 12px; + min-width: 200px; font-size: 14px; - min-width: 220px; - z-index: 10; - border: 1px solid var(--color-text-dark); - box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); + color: var(--color-text-primary); } #node-props-panel { position: absolute; - width: 220px; - background-color: var(--color-bg-sidebar); - border: 1px solid var(--color-border); - border-radius: var(--radius-small); + top: 8px; + left: 8px; + background: var(--color-bg-component); + border: 1px solid var(--color-border-panel); + border-radius: var(--radius-medium); padding: 12px; - color: var(--color-text-white); - box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + min-width: 250px; display: none; - z-index: 10; } #node-props-panel h3 { - margin-top: 0; - font-size: 15px; - color: var(--color-text-primary); + margin: 0 0 12px 0; + color: var(--color-text-accent); + font-size: 16px; } #node-props-panel .form-group { - margin-bottom: 10px; + margin-bottom: 12px; } #node-props-panel label { display: block; - font-weight: bold; margin-bottom: 4px; + color: var(--color-text-primary); + font-size: 14px; } #node-props-panel select { width: 100%; - padding: 4px; - font-size: 14px; + padding: 6px; + background: var(--color-bg-dark); + border: 1px solid var(--color-border); + border-radius: var(--radius-small); + color: var(--color-text-primary); } .prop-group { - display: none; - margin-bottom: 12px; + margin-bottom: 8px; } .prop-group label, -.prop-group input { +.prop-group input, +.prop-group select { display: block; width: 100%; - margin-top: 6px; - font-size: 13px; + margin-bottom: 4px; } .panel-title { + font-size: 14px; font-weight: bold; - color: var(--color-text-white); - font-size: 15px; - margin-bottom: 0.5rem; + color: var(--color-text-accent); + margin-bottom: 8px; + text-transform: uppercase; } .panel-metric { - margin-bottom: 0.4rem; + margin-bottom: 6px; + font-size: 13px; } .panel-metric .label { - display: inline-block; - width: 140px; color: var(--color-text-muted); + margin-right: 8px; } -/* === INPUTS & BUTTONS === */ input[type="text"], -input[type="number"] { - padding: 6px; - background-color: #222; +input[type="number"], +select { + background: var(--color-bg-dark); border: 1px solid var(--color-border); - color: var(--color-text-white); + color: var(--color-text-primary); + padding: 6px 8px; border-radius: var(--radius-small); - font-family: var(--font-family-code); } #node-props-save, #run-button { - margin-top: 8px; - padding: 10px; - background-color: var(--color-button); + background: var(--color-button); color: var(--color-text-white); border: none; + padding: 8px 16px; border-radius: var(--radius-small); cursor: pointer; font-size: 14px; } #run-button:disabled, -#node-props-panel button:disabled { - background-color: var(--color-button-disabled); +#node-props-save:disabled { + background: var(--color-button-disabled); cursor: not-allowed; } #github-login-btn { - display: inline-flex; + display: flex; align-items: center; gap: 8px; - padding: 8px 14px; - background-color: #fff; - color: #000000; + padding: 8px 16px; + background: #238636; + color: white; text-decoration: none; - border-radius: var(--radius-medium); + border-radius: 6px; font-weight: 500; - font-family: var(--font-family-mono); - font-size: 12px; + transition: background-color 0.2s; border: 1px solid #2ea043; - transition: background-color 0.2s ease; - float: right; } #github-login-btn:hover { - background-color: #ccc; + background: #2ea043; } #github-login-btn img { - width: 18px; - height: 18px; + width: 20px; + height: 20px; + filter: invert(1); } -/* === TABS === */ .tabs { display: flex; flex-direction: column; height: 100%; - overflow: hidden; } .tab-labels { display: flex; - cursor: pointer; + border-bottom: 1px solid var(--color-border-panel); } .tab-labels label { - padding: 10px 20px; - background: var(--color-bg-body); - margin-right: 4px; - margin-bottom: 20px; - border-radius: var(--radius-small); + padding: 12px 24px; + cursor: pointer; + background: var(--color-bg-component); + border: 1px solid var(--color-border-panel); + margin-right: 2px; + color: var(--color-text-muted); } .tab-content { - border-top: 1px solid var(--color-border-panel); - padding: 20px 0 0; + padding: 16px; + flex: 1; display: none; - height: 100%; } input[name="tab"] { @@ -414,63 +401,59 @@ input[name="tab"] { #tab2:checked ~ .tabs .tab-labels label[for="tab2"], #tab3:checked ~ .tabs .tab-labels label[for="tab3"] { background: var(--color-bg-tab-active); - font-weight: bold; color: var(--color-text-accent); + border-color: var(--color-border-accent); } #tab1:checked ~ .tabs #content1, #tab2:checked ~ .tabs #content2, #tab3:checked ~ .tabs #content3 { - display: flex; - flex-direction: column; - height: 100%; - overflow: hidden; + display: block; } -/* === CHALLENGE PANEL === */ #challenge-container { - width: 15%; - background: var(--color-bg-dark); - margin: 12px 12px; - border: 2px solid var(--color-border-panel); - border-radius: var(--radius-large); - padding: 0 12px; + width: 280px; + background: var(--color-bg-component); + border-right: 1px solid var(--color-border-panel); + padding: 16px; + overflow-y: auto; + flex-shrink: 0; } .challenge-list { list-style: none; - margin: 0; padding: 0; + margin: 0; } .challenge-item { - padding: 10px; - margin: 5px 0; - background: #21262d; - border-radius: 6px; + padding: 12px; + margin-bottom: 8px; + background: var(--color-bg-dark); + border: 1px solid var(--color-border); + border-radius: var(--radius-medium); cursor: pointer; transition: all 0.2s ease; - border-left: 3px solid transparent; - list-style: none; } .challenge-item:hover { - background: #30363d; + border-color: var(--color-border-accent); } .challenge-item.active { - background: #1a3d2a; - border-left-color: #00ff88; + background: var(--color-bg-tab-active); + border-color: var(--color-border-accent); } .challenge-name { font-weight: 500; - margin-bottom: 5px; + margin-bottom: 4px; } .challenge-difficulty { - font-size: 0.8rem; - color: #0b949e; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 1px; } .challenge-difficulty.easy { @@ -485,71 +468,78 @@ input[name="tab"] { color: #f85149; } -/* === REQUIREMENTS === */ .requirements-section { - background: #161b22; - border: 1px solid #30363d; - border-radius: 8px; - padding: 20px; - margin-bottom: 20px; + background: var(--color-bg-component); + border: 1px solid var(--color-border-panel); + border-radius: var(--radius-medium); + padding: 16px; + margin-bottom: 16px; } .requirements-list { - margin: 0; - padding: 0; list-style: none; + padding: 0; + margin: 0; } .requirement-item { - position: relative; - padding: 8px 0 8px 25px; - margin: 0; - border-bottom: 1px solid #30363d; + padding: 8px 0; + border-bottom: 1px solid var(--color-border); + color: var(--color-text-primary); + line-height: 1.5; } .requirement-item:before { - content: "✓"; - color: #00ff88; - position: absolute; - left: 0; + content: "▶ "; + color: var(--color-text-accent); + font-size: 12px; + margin-right: 8px; } -/* === MODAL === */ .modal { - position: absolute; - top: 30%; - left: 50%; - transform: translate(-50%, -30%); - background: #121212; - padding: 20px; - border-radius: 8px; - border: 1px solid #444; - z-index: 999; - color: #ccc; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + background: var(--color-bg-component); + padding: 24px; + border-radius: var(--radius-medium); + min-width: 300px; + border: 1px solid var(--color-border-panel); } .modal-content label { display: block; - margin: 10px 0; + margin: 8px 0; + color: var(--color-text-primary); } .modal-actions { - margin-top: 10px; - text-align: right; + display: flex; + gap: 8px; + margin-top: 16px; } .modal input, .modal select { width: 100%; - padding: 6px; + padding: 8px; margin-top: 4px; - background: #222; - border: 1px solid #444; - color: #fff; - border-radius: 4px; + background: var(--color-bg-dark); + border: 1px solid var(--color-border); + border-radius: var(--radius-small); + color: var(--color-text-primary); } -/* === MISC === */ #score-panel { margin-top: 16px; } @@ -557,11 +547,11 @@ input[name="tab"] { .userbox { display: flex; align-items: center; - gap: 12px; -} -.avatar { - width: 24px; - height: 24px; - border-radius: 12px; + gap: 8px; } +.avatar { + width: 32px; + height: 32px; + border-radius: 50%; +} \ No newline at end of file diff --git a/static/game.html b/static/game.html index ceff018..78be7c6 100644 --- a/static/game.html +++ b/static/game.html @@ -4,7 +4,7 @@ System Design Game - +
diff --git a/static/index.css b/static/index.css new file mode 100644 index 0000000..d4374ce --- /dev/null +++ b/static/index.css @@ -0,0 +1,749 @@ +@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'JetBrains Mono', monospace; + background: #0a0a0a; + color: #e0e0e0; + line-height: 1.6; + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header */ +header { + background: rgba(10, 10, 10, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid #333; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; + padding: 15px 0; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: #00ff88; + text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); +} + +.nav-links { + display: flex; + gap: 30px; + list-style: none; +} + +.nav-links a { + color: #e0e0e0; + text-decoration: none; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: #00ff88; +} + +.beta-badge { + background: linear-gradient(45deg, #ff6b35, #f7931e); + color: white; + padding: 5px 12px; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 500; +} + +/* Hero Section */ +.hero { + min-height: 100vh; + display: flex; + align-items: center; + background: radial-gradient(circle at 30% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%); + position: relative; + padding-top: 80px; +} + +.hero-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; +} + +.hero-text h1 { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 20px; + background: linear-gradient(135deg, #00ff88, #00cc6a); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1.2; +} + +.hero-text .subtitle { + font-size: 1.3rem; + color: #b0b0b0; + margin-bottom: 30px; + line-height: 1.4; +} + +.hero-text .description { + font-size: 1.1rem; + color: #888; + margin-bottom: 40px; + line-height: 1.6; +} + +.cta-form { + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 30px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); +} + +.cta-form h3 { + color: #00ff88; + margin-bottom: 20px; + font-size: 1.3rem; +} + +.email-input { + width: 100%; + padding: 15px; + background: rgba(0, 0, 0, 0.5); + border: 1px solid #333; + border-radius: 8px; + color: #e0e0e0; + font-family: inherit; + font-size: 1rem; + margin-bottom: 15px; + transition: border-color 0.3s ease; +} + +.email-input:focus { + outline: none; + border-color: #00ff88; + box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2); +} + +.cta-button { + width: 100%; + padding: 15px; + background: linear-gradient(135deg, #00ff88, #00cc6a); + color: #000; + border: none; + border-radius: 8px; + font-family: inherit; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3); +} + +.beta-info { + font-size: 0.9rem; + color: #666; + margin-top: 15px; + text-align: center; +} + +/* Browser Demo */ +.browser-demo { + background: #161b22; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 0 30px rgba(0, 255, 136, 0.2); + border: 1px solid #30363d; +} + +.browser-header { + background: #0d1117; + padding: 12px 20px; + display: flex; + align-items: center; + border-bottom: 1px solid #30363d; +} + +.browser-dots { + display: flex; + gap: 8px; + margin-right: 15px; +} + +.browser-dot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.dot-red { background: #ff5f56; } +.dot-yellow { background: #ffbd2e; } +.dot-green { background: #27ca3f; } + +.browser-address { + background: #0d1117; + border: 1px solid #30363d; + border-radius: 8px; + padding: 6px 12px; + color: #8b949e; + font-size: 0.8rem; + flex: 1; +} + +.browser-content { + padding: 20px; + height: 350px; + position: relative; + overflow: hidden; +} + +/* Game Interface */ +.game-interface { + display: grid; + grid-template-columns: 200px 1fr; + gap: 15px; + height: 100%; +} + +.game-sidebar { + background: #0d1117; + border: 1px solid #30363d; + border-radius: 8px; + padding: 15px; +} + +.sidebar-title { + color: #00ff88; + font-size: 0.9rem; + margin-bottom: 15px; + padding-bottom: 8px; + border-bottom: 1px solid #30363d; +} + +.challenge-list { + list-style: none; +} + +.challenge-item { + padding: 8px 10px; + margin: 5px 0; + background: #161b22; + border-radius: 4px; + font-size: 0.8rem; + cursor: pointer; + border-left: 3px solid transparent; +} + +.challenge-item.active { + border-left-color: #00ff88; + background: #1a3d2a; +} + +.difficulty { + font-size: 0.7rem; + color: #8b949e; +} + +.difficulty.easy { color: #3fb950; } +.difficulty.medium { color: #d29922; } +.difficulty.hard { color: #f85149; } + +.game-main { + background: #0d1117; + border: 1px solid #30363d; + border-radius: 8px; + padding: 15px; + position: relative; +} + +.game-tabs { + display: flex; + gap: 5px; + margin-bottom: 15px; + border-bottom: 1px solid #30363d; + padding-bottom: 10px; +} + +.game-tab { + padding: 5px 12px; + background: #161b22; + border-radius: 4px; + font-size: 0.8rem; + color: #8b949e; + cursor: pointer; +} + +.game-tab.active { + background: #1a3d2a; + color: #00ff88; +} + +.design-canvas { + background: #0d1117; + border: 2px dashed #30363d; + border-radius: 8px; + height: 200px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin-top: 15px; +} + +.component { + position: absolute; + background: #161b22; + border: 2px solid #00ff88; + border-radius: 6px; + padding: 8px 12px; + font-size: 0.8rem; + cursor: move; +} + +.component.database { + top: 120px; + left: 50px; + border-color: #3fb950; +} + +.component.api { + top: 50px; + left: 150px; + border-color: #00ff88; +} + +.component.cache { + top: 120px; + left: 250px; + border-color: #d29922; +} + +.connection-line { + position: absolute; + height: 2px; + background: #00ff88; + transform-origin: 0 0; + z-index: -1; +} + +.line1 { + width: 120px; + top: 65px; + left: 200px; + transform: rotate(45deg); +} + +.line2 { + width: 120px; + top: 65px; + left: 200px; + transform: rotate(-45deg); +} + +.metrics-panel { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + margin-top: 15px; +} + +.metric-box { + background: #161b22; + border: 1px solid #30363d; + border-radius: 6px; + padding: 10px; + text-align: center; +} + +.metric-value { + font-size: 1.2rem; + font-weight: 700; + color: #00ff88; +} + +.metric-label { + font-size: 0.7rem; + color: #8b949e; +} + +/* Problem Section */ +.problem { + padding: 100px 0; + background: rgba(255, 255, 255, 0.02); +} + +.problem h2 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 60px; + color: #ff6b35; +} + +.problem-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 40px; +} + +.problem-card { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #333; + border-radius: 12px; + padding: 30px; + text-align: center; + transition: all 0.3s ease; +} + +.problem-card:hover { + border-color: #ff6b35; + transform: translateY(-5px); +} + +.problem-icon { + font-size: 3rem; + margin-bottom: 20px; +} + +.problem-card h3 { + color: #ff6b35; + margin-bottom: 15px; + font-size: 1.3rem; +} + +/* Solution Section */ +.solution { + padding: 100px 0; +} + +.solution h2 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 60px; + color: #00ff88; +} + +.solution-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; +} + +.feature-list { + list-style: none; +} + +.feature-item { + display: flex; + align-items: flex-start; + gap: 15px; + margin-bottom: 25px; + padding: 20px; + background: rgba(0, 255, 136, 0.05); + border-radius: 8px; + border-left: 4px solid #00ff88; +} + +.feature-icon { + font-size: 1.5rem; + color: #00ff88; + margin-top: 5px; +} + +.feature-text h4 { + color: #00ff88; + margin-bottom: 8px; + font-size: 1.1rem; +} + +.feature-text p { + color: #b0b0b0; + line-height: 1.5; +} + +/* How It Works */ +.how-it-works { + padding: 100px 0; + background: rgba(255, 255, 255, 0.02); +} + +.how-it-works h2 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 60px; + color: #00ff88; +} + +.steps { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; +} + +.step { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #333; + border-radius: 12px; + padding: 30px; + text-align: center; + position: relative; +} + +.step-number { + position: absolute; + top: -20px; + left: 50%; + transform: translateX(-50%); + background: #00ff88; + color: #000; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 1.2rem; +} + +.step-icon { + font-size: 2.5rem; + margin-bottom: 20px; + color: #00ff88; +} + +.step h3 { + color: #00ff88; + margin-bottom: 15px; + font-size: 1.3rem; +} + +.step p { + color: #b0b0b0; +} + +/* FAQ Section */ +.faq { + padding: 100px 0; +} + +.faq h2 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 60px; + color: #00ff88; +} + +.faq-list { + max-width: 800px; + margin: 0 auto; +} + +.faq-item { + background: rgba(0, 0, 0, 0.3); + border: 1px solid #333; + border-radius: 12px; + padding: 25px; + margin-bottom: 20px; +} + +.faq-question { + font-size: 1.2rem; + color: #00ff88; + margin-bottom: 15px; + font-weight: 500; +} + +.faq-answer { + color: #b0b0b0; + line-height: 1.6; +} + +/* Final CTA */ +.final-cta { + padding: 100px 0; + text-align: center; + background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(255, 107, 53, 0.1)); +} + +.final-cta h2 { + font-size: 2.8rem; + margin-bottom: 20px; + color: #e0e0e0; +} + +.final-cta p { + font-size: 1.2rem; + color: #888; + margin-bottom: 40px; +} + +.final-cta-form { + max-width: 500px; + margin: 0 auto; + display: flex; + gap: 15px; +} + +.final-cta-form input { + flex: 1; + padding: 15px; + background: rgba(0, 0, 0, 0.5); + border: 1px solid #333; + border-radius: 8px; + color: #e0e0e0; + font-family: inherit; + font-size: 1rem; +} + +.final-cta-form button { + padding: 15px 30px; + background: linear-gradient(135deg, #00ff88, #00cc6a); + color: #000; + border: none; + border-radius: 8px; + font-family: inherit; + font-weight: 600; + cursor: pointer; + white-space: nowrap; +} + +/* Footer */ +footer { + background: #000; + padding: 40px 0; + text-align: center; + border-top: 1px solid #333; +} + +.footer-content { + color: #666; +} + +/* Responsive */ +@media (max-width: 768px) { + .hero-content { + grid-template-columns: 1fr; + gap: 40px; + } + + .hero-text h1 { + font-size: 2.5rem; + } + + .solution-content { + grid-template-columns: 1fr; + gap: 40px; + } + + .final-cta-form { + flex-direction: column; + } + + .nav-links { + display: none; + } +} + +.success-message { + background: rgba(0, 255, 136, 0.1); + border: 1px solid #00ff88; + border-radius: 8px; + padding: 15px; + margin-top: 15px; + color: #00ff88; + text-align: center; + display: none; +} + +/* Browser UI Elements */ +.component-palette { + display: flex; + gap: 10px; + margin-bottom: 15px; +} + +.palette-item { + background: #161b22; + border: 1px solid #30363d; + border-radius: 4px; + padding: 5px 10px; + font-size: 0.7rem; + cursor: grab; +} + +.palette-item:hover { + border-color: #00ff88; +} + +.game-controls { + position: absolute; + bottom: 15px; + right: 15px; + display: flex; + gap: 10px; +} + +.game-button { + background: #161b22; + border: 1px solid #30363d; + border-radius: 4px; + padding: 5px 10px; + font-size: 0.7rem; + color: #e0e0e0; + cursor: pointer; +} + +.game-button.primary { + background: #1a3d2a; + border-color: #00ff88; + color: #00ff88; +} + +/* Coming Soon Badge */ +.coming-soon { + position: absolute; + top: 10px; + right: 10px; + background: linear-gradient(45deg, #ff6b35, #f7931e); + color: white; + padding: 5px 12px; + border-radius: 20px; + font-size: 0.8rem; + font-weight: 500; + z-index: 10; +} + +@media (max-width: 400px) { + .hero { + padding-top: 120px; + } +} \ No newline at end of file diff --git a/static/index.html b/static/index.html index 6c87e3d..bf2747d 100644 --- a/static/index.html +++ b/static/index.html @@ -3,758 +3,8 @@ - The System Design Game - Interactive Browser-Based Learning - + System Design Game - Interactive Platform for Engineers +
diff --git a/static/success.html b/static/success.html index c655b01..8c4399d 100644 --- a/static/success.html +++ b/static/success.html @@ -580,11 +580,6 @@ input[name="tab"] {

System Design Game

-
-
- ✅ SYSTEM SUCCESS -
-
@@ -622,35 +617,14 @@ input[name="tab"] {
- 🏠 Main Menu + Main Menu
- -