Skip to content

Commit d2beca4

Browse files
joelteplyclaude
joelteply
and
claude
committed
Add complete web framework for cyberpunk terminal interfaces
- Create cyberpunk-web.css with theme-driven CSS variables - Add cyberpunk-web.js with CyberpunkTerminal and CyberpunkConsole classes - Build comprehensive examples.html showing all use cases: * Full terminal interfaces for web apps * Console widgets for debugging/dev tools * Game interfaces with cyberpunk aesthetics * DevOps dashboards and monitoring tools * Theme customization and switching - Enable developers to create cyberpunk terminals on websites - CSS framework mirrors Python package themes exactly - JavaScript API matches Python package conventions - Responsive design works on mobile and desktop - CDN-ready for easy inclusion in any website Now developers can use cyberpunk aesthetics for: - Web application interfaces - Game development consoles - Admin panels and dashboards - Interactive documentation - Developer tools and debugging 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 40559c5 commit d2beca4

4 files changed

Lines changed: 992 additions & 3 deletions

File tree

‎docs/cyberpunk-web.css‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
/* Cyberpunk CLI Web Framework */
2+
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@400&display=swap');
3+
4+
/* Base Terminal Styles */
5+
.cyberpunk-terminal {
6+
font-family: 'Share Tech Mono', monospace;
7+
background: var(--cyberpunk-bg);
8+
color: var(--cyberpunk-primary);
9+
overflow: hidden;
10+
cursor: none;
11+
width: 100%;
12+
height: 100vh;
13+
padding: 20px;
14+
box-sizing: border-box;
15+
}
16+
17+
.cyberpunk-header {
18+
text-align: center;
19+
margin-bottom: 20px;
20+
border: 2px solid var(--cyberpunk-primary);
21+
padding: 10px;
22+
background: var(--cyberpunk-panel-bg);
23+
}
24+
25+
.cyberpunk-logo {
26+
font-size: 12px;
27+
line-height: 1.2;
28+
color: var(--cyberpunk-primary);
29+
white-space: pre;
30+
}
31+
32+
.cyberpunk-subtitle {
33+
margin: 10px 0;
34+
color: var(--cyberpunk-accent);
35+
border: 1px solid var(--cyberpunk-accent);
36+
padding: 5px;
37+
background: var(--cyberpunk-accent-bg);
38+
}
39+
40+
.cyberpunk-menu {
41+
margin: 20px auto;
42+
max-width: 800px;
43+
}
44+
45+
.cyberpunk-menu-item {
46+
padding: 10px 20px;
47+
margin: 5px 0;
48+
background: var(--cyberpunk-panel-bg);
49+
border: 1px solid var(--cyberpunk-primary);
50+
cursor: pointer;
51+
transition: all 0.3s ease;
52+
display: flex;
53+
justify-content: space-between;
54+
}
55+
56+
.cyberpunk-menu-item:hover,
57+
.cyberpunk-menu-item.selected {
58+
background: var(--cyberpunk-primary);
59+
color: var(--cyberpunk-bg);
60+
box-shadow: 0 0 20px var(--cyberpunk-primary);
61+
}
62+
63+
.cyberpunk-theme-selector {
64+
position: fixed;
65+
top: 20px;
66+
right: 20px;
67+
background: var(--cyberpunk-panel-bg);
68+
border: 2px solid var(--cyberpunk-primary);
69+
padding: 10px;
70+
border-radius: 5px;
71+
}
72+
73+
.cyberpunk-btn {
74+
display: block;
75+
width: 100%;
76+
margin: 5px 0;
77+
padding: 5px 10px;
78+
background: var(--cyberpunk-bg);
79+
border: 1px solid var(--cyberpunk-primary);
80+
color: var(--cyberpunk-primary);
81+
cursor: pointer;
82+
font-family: inherit;
83+
transition: all 0.3s ease;
84+
}
85+
86+
.cyberpunk-btn:hover {
87+
background: var(--cyberpunk-primary);
88+
color: var(--cyberpunk-bg);
89+
box-shadow: 0 0 10px var(--cyberpunk-primary);
90+
}
91+
92+
.cyberpunk-output {
93+
margin: 20px 0;
94+
padding: 15px;
95+
background: var(--cyberpunk-output-bg);
96+
border: 1px solid var(--cyberpunk-primary);
97+
min-height: 100px;
98+
}
99+
100+
.cyberpunk-cursor {
101+
display: inline-block;
102+
width: 10px;
103+
height: 20px;
104+
background: var(--cyberpunk-primary);
105+
animation: cyberpunk-blink 1s infinite;
106+
}
107+
108+
.cyberpunk-footer {
109+
position: fixed;
110+
bottom: 20px;
111+
left: 20px;
112+
right: 20px;
113+
text-align: center;
114+
border: 1px solid var(--cyberpunk-primary);
115+
padding: 10px;
116+
background: var(--cyberpunk-footer-bg);
117+
}
118+
119+
.cyberpunk-link {
120+
position: fixed;
121+
top: 20px;
122+
left: 20px;
123+
padding: 10px 15px;
124+
background: var(--cyberpunk-panel-bg);
125+
border: 2px solid var(--cyberpunk-primary);
126+
color: var(--cyberpunk-primary);
127+
text-decoration: none;
128+
border-radius: 5px;
129+
transition: all 0.3s ease;
130+
}
131+
132+
.cyberpunk-link:hover {
133+
background: var(--cyberpunk-primary);
134+
color: var(--cyberpunk-bg);
135+
box-shadow: 0 0 20px var(--cyberpunk-primary);
136+
}
137+
138+
@keyframes cyberpunk-blink {
139+
0%, 50% { opacity: 1; }
140+
51%, 100% { opacity: 0; }
141+
}
142+
143+
/* Theme Variables */
144+
145+
/* Loki Theme - Green/Gold Nordic */
146+
.cyberpunk-theme-loki {
147+
--cyberpunk-bg: #001100;
148+
--cyberpunk-primary: #00ff00;
149+
--cyberpunk-accent: #ffff00;
150+
--cyberpunk-panel-bg: #002200;
151+
--cyberpunk-accent-bg: #111100;
152+
--cyberpunk-output-bg: #111;
153+
--cyberpunk-footer-bg: rgba(0, 17, 0, 0.8);
154+
}
155+
156+
/* Matrix Theme - Digital Rain */
157+
.cyberpunk-theme-matrix {
158+
--cyberpunk-bg: #000;
159+
--cyberpunk-primary: #00ff00;
160+
--cyberpunk-accent: #ffffff;
161+
--cyberpunk-panel-bg: #001100;
162+
--cyberpunk-accent-bg: #000011;
163+
--cyberpunk-output-bg: #111;
164+
--cyberpunk-footer-bg: rgba(0, 0, 0, 0.8);
165+
}
166+
167+
/* Fallout Theme - Vault-Tec Amber */
168+
.cyberpunk-theme-fallout {
169+
--cyberpunk-bg: #110800;
170+
--cyberpunk-primary: #ffcc00;
171+
--cyberpunk-accent: #ffffff;
172+
--cyberpunk-panel-bg: #221100;
173+
--cyberpunk-accent-bg: #111000;
174+
--cyberpunk-output-bg: #1a1100;
175+
--cyberpunk-footer-bg: rgba(17, 8, 0, 0.8);
176+
}
177+
178+
/* Tron Theme - Neon Blue Grid */
179+
.cyberpunk-theme-tron {
180+
--cyberpunk-bg: #000011;
181+
--cyberpunk-primary: #00ccff;
182+
--cyberpunk-accent: #ffffff;
183+
--cyberpunk-panel-bg: #001122;
184+
--cyberpunk-accent-bg: #000044;
185+
--cyberpunk-output-bg: #111122;
186+
--cyberpunk-footer-bg: rgba(0, 0, 17, 0.8);
187+
}
188+
189+
/* Responsive Design */
190+
@media (max-width: 768px) {
191+
.cyberpunk-theme-selector {
192+
position: relative;
193+
top: 0;
194+
right: 0;
195+
margin-bottom: 20px;
196+
}
197+
198+
.cyberpunk-link {
199+
position: relative;
200+
top: 0;
201+
left: 0;
202+
display: inline-block;
203+
margin-bottom: 10px;
204+
}
205+
206+
.cyberpunk-footer {
207+
position: relative;
208+
bottom: 0;
209+
margin-top: 20px;
210+
}
211+
212+
.cyberpunk-terminal {
213+
height: auto;
214+
min-height: 100vh;
215+
}
216+
}
217+
218+
/* Custom Console Widget */
219+
.cyberpunk-console {
220+
width: 100%;
221+
max-width: 800px;
222+
margin: 20px auto;
223+
background: var(--cyberpunk-bg);
224+
border: 2px solid var(--cyberpunk-primary);
225+
border-radius: 5px;
226+
overflow: hidden;
227+
}
228+
229+
.cyberpunk-console-header {
230+
background: var(--cyberpunk-panel-bg);
231+
padding: 10px;
232+
border-bottom: 1px solid var(--cyberpunk-primary);
233+
display: flex;
234+
justify-content: between;
235+
}
236+
237+
.cyberpunk-console-title {
238+
color: var(--cyberpunk-primary);
239+
font-weight: bold;
240+
}
241+
242+
.cyberpunk-console-controls {
243+
margin-left: auto;
244+
}
245+
246+
.cyberpunk-console-body {
247+
padding: 15px;
248+
min-height: 200px;
249+
background: var(--cyberpunk-output-bg);
250+
}
251+
252+
.cyberpunk-input {
253+
width: 100%;
254+
background: transparent;
255+
border: none;
256+
color: var(--cyberpunk-primary);
257+
font-family: inherit;
258+
outline: none;
259+
font-size: inherit;
260+
}
261+
262+
.cyberpunk-input::placeholder {
263+
color: var(--cyberpunk-accent);
264+
opacity: 0.6;
265+
}

0 commit comments

Comments
 (0)