|
|
@@ -0,0 +1,123 @@
|
|
|
+:root {
|
|
|
+ --bg-main: #213248;
|
|
|
+ --bg-card: #1a2a3a;
|
|
|
+ --color-primary: #4074cf;
|
|
|
+ --color-primary-hover: #5585d8;
|
|
|
+ --color-text: #e2ecf8;
|
|
|
+ --color-muted: #8aaecb;
|
|
|
+ --border-soft: #4074cf33;
|
|
|
+}
|
|
|
+
|
|
|
+* {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ background-color: var(--bg-main);
|
|
|
+ background-image: url(assets/images/background.png);
|
|
|
+ color: var(--color-text);
|
|
|
+ font-family: 'Share Tech Mono', monospace;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ max-width: 560px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 1.5rem;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.subtitle {
|
|
|
+ color: var(--color-primary);
|
|
|
+ font-size: 0.75rem;
|
|
|
+ letter-spacing: 0.2em;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ font-size: 3.5rem;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ line-height: 1;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.terminal {
|
|
|
+ background: var(--bg-card);
|
|
|
+ border: 1px solid var(--border-soft);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 20px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.terminal-header {
|
|
|
+ color: var(--color-primary);
|
|
|
+ font-size: 0.8rem;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.terminal-body {
|
|
|
+ font-size: 0.82rem;
|
|
|
+ line-height: 2;
|
|
|
+ color: var(--color-muted);
|
|
|
+}
|
|
|
+
|
|
|
+.prompt {
|
|
|
+ color: var(--color-primary);
|
|
|
+}
|
|
|
+
|
|
|
+.output {
|
|
|
+ padding-left: 1rem;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+
|
|
|
+.cursor {
|
|
|
+ display: inline-block;
|
|
|
+ width: 9px;
|
|
|
+ height: 1em;
|
|
|
+ background: var(--color-primary);
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 2px;
|
|
|
+ animation: blink 1s step-end infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes blink {
|
|
|
+ 50% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.divider {
|
|
|
+ height: 1px;
|
|
|
+ background: var(--color-primary);
|
|
|
+ opacity: 0.3;
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.buttons {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ background: var(--color-primary);
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 10px 24px;
|
|
|
+ font-family: 'Share Tech Mono', monospace;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ text-decoration: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: inline-block;
|
|
|
+ transition: background 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.btn:hover {
|
|
|
+ background: var(--color-primary-hover);
|
|
|
+}
|
