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 , # 1a1a2e0% , # 0d0d1a100% );
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