Skip to content

Commit a0e8a04

Browse files
codegithubkacodegithubka
committed
first demo is functional
1 parent aaefab9 commit a0e8a04

File tree

4 files changed

+436
-148
lines changed

4 files changed

+436
-148
lines changed

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,7 @@ env/
55

66
# Byte-compiled / Optimized / DLL files
77
__pycache__/
8-
*.pyc
8+
*.pyc
9+
10+
# Generated from package installers
11+
node_modules/

‎frontend/src/App.css‎

Lines changed: 170 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,175 @@
1-
/* App layout styles */
2-
31
* {
4-
margin: 0;
5-
padding: 0;
6-
box-sizing: border-box;
7-
}
8-
9-
body {
10-
font-family: system-ui, -apple-system, sans-serif;
11-
background: #0d0d1a;
12-
color: #fff;
13-
min-height: 100vh;
14-
}
15-
16-
.app {
17-
min-height: 100vh;
18-
display: flex;
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: system-ui, sans-serif;
9+
background: #0d0d1a;
10+
color: #fff;
11+
}
12+
13+
.app {
14+
min-height: 100vh;
15+
}
16+
17+
.header {
18+
padding: 20px;
19+
text-align: center;
20+
background: #1a1a2e;
21+
border-bottom: 1px solid #333;
22+
}
23+
24+
.header h1 {
25+
color: #4ecdc4;
26+
font-size: 24px;
27+
}
28+
29+
.main {
30+
display: flex;
31+
justify-content: center;
32+
gap: 24px;
33+
padding: 24px;
34+
max-width: 1200px;
35+
margin: 0 auto;
36+
}
37+
38+
.canvas {
39+
border: 2px solid #333;
40+
border-radius: 8px;
41+
}
42+
43+
.controls {
44+
width: 260px;
45+
background: #1e1e2e;
46+
border-radius: 8px;
47+
padding: 16px;
48+
}
49+
50+
.section {
51+
margin-bottom: 20px;
52+
padding-bottom: 16px;
53+
border-bottom: 1px solid #333;
54+
}
55+
56+
.section:last-child {
57+
border-bottom: none;
58+
}
59+
60+
.section h3 {
61+
font-size: 12px;
62+
color: #888;
63+
text-transform: uppercase;
64+
margin-bottom: 12px;
65+
}
66+
67+
.status {
68+
display: flex;
69+
align-items: center;
70+
gap: 8px;
71+
margin-bottom: 12px;
72+
}
73+
74+
.dot {
75+
width: 10px;
76+
height: 10px;
77+
border-radius: 50%;
78+
background: #666;
79+
}
80+
81+
.dot.connecting { background: #f0ad4e; }
82+
.dot.connected { background: #4ecdc4; }
83+
.dot.error { background: #ff6b6b; }
84+
85+
.buttons {
86+
display: flex;
87+
gap: 8px;
88+
}
89+
90+
button {
91+
flex: 1;
92+
padding: 8px 12px;
93+
background: #4ecdc4;
94+
color: #1a1a2e;
95+
border: none;
96+
border-radius: 4px;
97+
font-weight: 600;
98+
cursor: pointer;
99+
}
100+
101+
button:hover {
102+
background: #45b7aa;
103+
}
104+
105+
select {
106+
width: 100%;
107+
padding: 8px;
108+
background: #2a2a3e;
109+
color: #fff;
110+
border: 1px solid #333;
111+
border-radius: 4px;
112+
}
113+
114+
.checkbox {
115+
display: flex;
116+
align-items: center;
117+
gap: 8px;
118+
cursor: pointer;
119+
margin-bottom: 12px;
120+
}
121+
122+
.checkbox input {
123+
width: 18px;
124+
height: 18px;
125+
accent-color: #4ecdc4;
126+
}
127+
128+
.slider {
129+
margin-bottom: 12px;
130+
}
131+
132+
.slider-header {
133+
display: flex;
134+
justify-content: space-between;
135+
margin-bottom: 4px;
136+
font-size: 13px;
137+
}
138+
139+
.slider-value {
140+
color: #4ecdc4;
141+
font-family: monospace;
142+
background: #2a2a3e;
143+
padding: 1px 6px;
144+
border-radius: 3px;
145+
font-size: 11px;
146+
}
147+
148+
input[type="range"] {
149+
width: 100%;
150+
height: 6px;
151+
border-radius: 3px;
152+
background: #333;
153+
cursor: pointer;
154+
-webkit-appearance: none;
155+
}
156+
157+
input[type="range"]::-webkit-slider-thumb {
158+
-webkit-appearance: none;
159+
width: 14px;
160+
height: 14px;
161+
border-radius: 50%;
162+
background: #4ecdc4;
163+
cursor: pointer;
164+
}
165+
166+
@media (max-width: 1000px) {
167+
.main {
19168
flex-direction: column;
169+
align-items: center;
20170
}
21-
22-
/* Header */
23-
.app-header {
24-
padding: 20px;
25-
text-align: center;
26-
background: linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 100%);
27-
border-bottom: 1px solid #333;
28-
}
29-
30-
.app-header h1 {
31-
font-size: 28px;
32-
font-weight: 700;
33-
color: #4ecdc4;
34-
margin-bottom: 4px;
35-
}
36-
37-
.app-header p {
38-
font-size: 14px;
39-
color: #888;
40-
}
41-
42-
/* Main content */
43-
.app-main {
44-
flex: 1;
45-
display: flex;
46-
justify-content: center;
47-
gap: 24px;
48-
padding: 24px;
49-
max-width: 1200px;
50-
margin: 0 auto;
171+
.controls {
51172
width: 100%;
173+
max-width: 500px;
52174
}
53-
54-
.simulation-container {
55-
display: flex;
56-
align-items: flex-start;
57-
justify-content: center;
58-
}
59-
60-
.controls-container {
61-
flex-shrink: 0;
62-
max-height: calc(100vh - 180px);
63-
}
64-
65-
/* Footer */
66-
.app-footer {
67-
padding: 16px;
68-
text-align: center;
69-
background: #1a1a2e;
70-
border-top: 1px solid #333;
71-
}
72-
73-
.app-footer p {
74-
font-size: 13px;
75-
color: #666;
76-
}
77-
78-
.app-footer a {
79-
color: #4ecdc4;
80-
text-decoration: none;
81-
}
82-
83-
.app-footer a:hover {
84-
text-decoration: underline;
85-
}
86-
87-
/* Responsive */
88-
@media (max-width: 1100px) {
89-
.app-main {
90-
flex-direction: column;
91-
align-items: center;
92-
}
93-
94-
.controls-container {
95-
width: 100%;
96-
max-width: 600px;
97-
max-height: none;
98-
}
99-
}
175+
}

0 commit comments

Comments
 (0)