Skip to content

Commit 283b4b1

Browse files
rhythmcacherhythmcache
authored
Add files via upload
1 parent 9b44ae0 commit 283b4b1

File tree

3 files changed

+709
-0
lines changed

3 files changed

+709
-0
lines changed

‎webroot/index.css‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
:root {
2+
--primary: #333;
3+
--danger: #555;
4+
--warning: #777;
5+
--success: #333;
6+
--dark-bg: #121212;
7+
--card-bg: #1E1E1E;
8+
--text: #E0E0E0;
9+
--text-secondary: #A0A0A0;
10+
--border: rgba(255, 255, 255, 0.1);
11+
--radius: 12px;
12+
}
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
19+
font-size: 14px;
20+
}
21+
22+
.mmrl-safe-area {
23+
padding-top: var(--window-inset-top, 0);
24+
padding-bottom: var(--window-inset-bottom, 0);
25+
padding-left: var(--window-inset-left, 0);
26+
padding-right: var(--window-inset-right, 0);
27+
min-height: 100vh;
28+
display: flex;
29+
flex-direction: column;
30+
}
31+
32+
.dialog, .confirm-dialog {
33+
position: fixed;
34+
top: 0;
35+
left: 0;
36+
width: 100%;
37+
height: 100%;
38+
background: rgba(0, 0, 0, 0.8);
39+
backdrop-filter: blur(4px);
40+
display: none;
41+
justify-content: center;
42+
align-items: center;
43+
z-index: 1000;
44+
}
45+
46+
.dialog-content {
47+
background: var(--card-bg);
48+
padding: 20px;
49+
border-radius: var(--radius);
50+
max-width: 400px;
51+
width: 100%;
52+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
53+
}
54+
55+
.dialog-content h2 {
56+
margin-bottom: 16px;
57+
}
58+
59+
.dialog-content .btn-group {
60+
justify-content: flex-end;
61+
margin-top: 16px;
62+
}
63+
64+
body {
65+
background: var(--dark-bg);
66+
color: var(--text);
67+
line-height: 1.4;
68+
}
69+
70+
.container {
71+
width: 100%;
72+
max-width: 800px;
73+
padding: 16px;
74+
box-sizing: border-box;
75+
}
76+
77+
.header {
78+
text-align: center;
79+
margin-bottom: 24px;
80+
padding: 16px;
81+
background: var(--card-bg);
82+
border-radius: var(--radius);
83+
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
84+
}
85+
86+
.header h1 {
87+
font-size: 20px;
88+
margin-bottom: 8px;
89+
}
90+
91+
.header p {
92+
font-size: 13px;
93+
color: var(--text-secondary);
94+
}
95+
96+
.card {
97+
background: var(--card-bg);
98+
border-radius: var(--radius);
99+
padding: 16px;
100+
margin-bottom: 16px;
101+
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
102+
}
103+
104+
.card h2 {
105+
font-size: 16px;
106+
margin-bottom: 12px;
107+
}
108+
109+
.status-item {
110+
display: flex;
111+
justify-content: space-between;
112+
align-items: center;
113+
padding: 8px 0;
114+
border-bottom: 1px solid var(--border);
115+
font-size: 13px;
116+
}
117+
118+
.status-item:last-child {
119+
border-bottom: none;
120+
}
121+
122+
.btn-group {
123+
display: flex;
124+
gap: 8px;
125+
margin-top: 12px;
126+
flex-wrap: wrap;
127+
}
128+
129+
.btn {
130+
padding: 8px 16px;
131+
border: none;
132+
border-radius: var(--radius);
133+
cursor: pointer;
134+
font-weight: 500;
135+
font-size: 13px;
136+
transition: all 0.2s;
137+
background: var(--primary);
138+
color: var(--text);
139+
position: relative;
140+
overflow: hidden;
141+
}
142+
143+
.btn:active {
144+
transform: scale(0.96);
145+
}
146+
147+
.btn::after {
148+
content: '';
149+
position: absolute;
150+
top: 50%;
151+
left: 50%;
152+
width: 100px;
153+
height: 100px;
154+
background: rgba(255, 255, 255, 0.1);
155+
border-radius: 50%;
156+
transform: translate(-50%, -50%) scale(0);
157+
opacity: 0;
158+
transition: transform 0.3s, opacity 0.3s;
159+
}
160+
161+
.btn:active::after {
162+
transform: translate(-50%, -50%) scale(2);
163+
opacity: 1;
164+
}
165+
166+
.label {
167+
display: inline-block;
168+
padding: 4px 8px;
169+
border-radius: var(--radius);
170+
font-size: 12px;
171+
cursor: pointer;
172+
}
173+
174+
.dialog, .confirm-dialog {
175+
background: rgba(0,0,0,0.8);
176+
backdrop-filter: blur(4px);
177+
}
178+
179+
.dialog-content {
180+
background: var(--card-bg);
181+
padding: 20px;
182+
border-radius: var(--radius);
183+
max-width: 400px;
184+
}
185+
186+
#logContent {
187+
font-size: 12px;
188+
border-radius: var(--radius);
189+
max-height: 300px;
190+
overflow-y: auto;
191+
white-space: pre-wrap;
192+
word-wrap: break-word;
193+
}
194+
195+
.log-line {
196+
padding: 4px;
197+
border-bottom: 1px solid var(--border);
198+
}
199+
200+
.log-line:last-child {
201+
border-bottom: none;
202+
}
203+
204+
205+
.footer {
206+
display: flex;
207+
flex-direction: column;
208+
align-items: center;
209+
gap: 6px;
210+
padding: 12px;
211+
background: var(--card-bg);
212+
border-radius: var(--radius);
213+
text-align: center;
214+
}
215+
216+
.footer a {
217+
font-size: 14px;
218+
text-decoration: underline;
219+
color: #4da6ff;
220+
}
221+
222+
.footer a:visited {
223+
color: #4da6ff;
224+
}
225+
226+
.footer a:hover {
227+
color: #3399ff;
228+
}
229+
230+
.watermark {
231+
font-size: 12px;
232+
color: rgba(255, 255, 255, 0.3);
233+
}
234+
235+
.arrow {
236+
cursor: pointer;
237+
font-size: 14px;
238+
margin-left: 8px;
239+
transition: transform 0.2s;
240+
}
241+
242+
.arrow.down {
243+
transform: rotate(90deg);
244+
}
245+
246+
#zygoteDetails {
247+
max-height: 0;
248+
overflow: hidden;
249+
transition: max-height 0.3s ease-out;
250+
}
251+
252+
#zygoteDetails.show {
253+
max-height: 100px;
254+
}
255+
256+
#monitorStatus {
257+
background: var(--primary);
258+
color: var(--text);
259+
border: 1px solid var(--border);
260+
padding: 8px 12px;
261+
cursor: pointer;
262+
border-radius: var(--radius);
263+
transition: background 0.2s, transform 0.1s;
264+
text-align: center;
265+
}
266+
267+
#monitorStatus:hover {
268+
background: var(--success);
269+
transform: scale(1.05);
270+
}
271+
272+
.btn-small {
273+
padding: 5px 8px;
274+
font-size: 12px;
275+
}
276+
277+
/*
278+
.watermark {
279+
font-size: 12px;
280+
color: rgba(255, 255, 255, 0.3);
281+
position: absolute;
282+
left: 50%;
283+
transform: translateX(-50%);
284+
bottom: 16px;
285+
}
286+
*/

0 commit comments

Comments
 (0)