Skip to content

Commit c13e7b1

Browse files
author
Chris Warren-Smith
committed
ANDROID: light-weight portal UI replacement
1 parent 8688244 commit c13e7b1

File tree

3 files changed

+830
-0
lines changed

3 files changed

+830
-0
lines changed

‎src/platform/android/portal-ui/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="icon" type="image/png" href="sb-desktop-32x32.png">
7+
<title>SmallBASIC</title>
8+
<link rel="stylesheet" type="text/css" href="./main.css"/>
9+
<script type="module" crossorigin src="./main.js"></script>
10+
</head>
11+
<body>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div class="app-bar">
14+
<h1>SmallBASIC</h1>
15+
<a href="https://smallbasic.github.io" target="_blank">smallbasic.github.io</a>
16+
</div>
17+
<div class="main-content" id="main-content"></div>
18+
<input type="file" id="file-upload" multiple class="hidden">
19+
</body>
20+
</html>

‎src/platform/android/portal-ui/main.css‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9+
background: #f5f5f5;
10+
height: 100vh;
11+
}
12+
13+
.app-bar {
14+
background: #1976d2;
15+
color: white;
16+
padding: 1rem;
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: center;
20+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
21+
}
22+
23+
.app-bar h1 {
24+
font-size: 1.25rem;
25+
font-weight: 500;
26+
}
27+
28+
.app-bar a {
29+
color: white;
30+
text-decoration: none;
31+
font-size: 1.25rem;
32+
}
33+
34+
.app-bar a:hover {
35+
text-decoration: underline;
36+
}
37+
38+
.main-content {
39+
height: calc(100vh - 88px);
40+
width: 100%;
41+
overflow: auto;
42+
}
43+
44+
.login-container {
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
height: 100%;
49+
}
50+
51+
.login-form {
52+
background: white;
53+
padding: 2rem;
54+
border-radius: 8px;
55+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
56+
min-width: 320px;
57+
}
58+
59+
.form-group {
60+
margin-bottom: 1rem;
61+
}
62+
63+
.form-group label {
64+
display: block;
65+
margin-bottom: 0.5rem;
66+
font-weight: 500;
67+
}
68+
69+
.form-group input {
70+
width: 100%;
71+
padding: 0.75rem;
72+
border: 1px solid #ddd;
73+
border-radius: 4px;
74+
font-size: 1rem;
75+
}
76+
77+
.form-group input:focus {
78+
outline: none;
79+
border-color: #1976d2;
80+
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
81+
}
82+
83+
.form-group input.error {
84+
border-color: #d32f2f;
85+
}
86+
87+
.helper-text {
88+
font-size: 0.875rem;
89+
color: #666;
90+
margin-top: 0.25rem;
91+
}
92+
93+
.helper-text.error {
94+
color: #d32f2f;
95+
}
96+
97+
.btn {
98+
background: #1976d2;
99+
color: white;
100+
border: none;
101+
padding: 0.75rem 1.5rem;
102+
border-radius: 4px;
103+
cursor: pointer;
104+
font-size: 1rem;
105+
transition: background 0.2s;
106+
}
107+
108+
.btn:hover {
109+
background: #1565c0;
110+
}
111+
112+
.btn:disabled {
113+
background: #ccc;
114+
cursor: not-allowed;
115+
}
116+
117+
.btn-small {
118+
padding: 0.5rem 1rem;
119+
font-size: 0.875rem;
120+
}
121+
122+
.btn-icon {
123+
display: inline-flex;
124+
align-items: center;
125+
gap: 0.5rem;
126+
}
127+
128+
.toolbar {
129+
background: white;
130+
padding: 1rem;
131+
border-bottom: 1px solid #ddd;
132+
display: flex;
133+
gap: 1rem;
134+
flex-wrap: wrap;
135+
}
136+
137+
.table-container {
138+
background: white;
139+
margin: 0;
140+
overflow: auto;
141+
}
142+
143+
table {
144+
width: 100%;
145+
border-collapse: collapse;
146+
}
147+
148+
th, td {
149+
padding: 1rem;
150+
text-align: left;
151+
border-bottom: 1px solid #eee;
152+
}
153+
154+
th {
155+
background: #f5f5f5;
156+
font-weight: 600;
157+
position: sticky;
158+
top: 0;
159+
}
160+
161+
tr:hover {
162+
background: #f9f9f9;
163+
}
164+
165+
.selected {
166+
background: #e3f2fd !important;
167+
}
168+
169+
.editable {
170+
cursor: text;
171+
}
172+
173+
.editable:hover {
174+
background: #f0f0f0;
175+
}
176+
177+
.edit-input {
178+
width: 100%;
179+
padding: 0.25rem;
180+
border: 1px solid #1976d2;
181+
border-radius: 2px;
182+
font-size: inherit;
183+
}
184+
185+
.snackbar {
186+
position: fixed;
187+
bottom: 1rem;
188+
left: 50%;
189+
transform: translateX(-50%);
190+
background: #323232;
191+
color: white;
192+
padding: 1rem 1.5rem;
193+
border-radius: 4px;
194+
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
195+
z-index: 1000;
196+
min-width: 300px;
197+
text-align: center;
198+
}
199+
200+
.snackbar.success {
201+
background: #4caf50;
202+
}
203+
204+
.snackbar.error {
205+
background: #f44336;
206+
}
207+
208+
.dialog-overlay {
209+
position: fixed;
210+
top: 0;
211+
left: 0;
212+
right: 0;
213+
bottom: 0;
214+
background: rgba(0,0,0,0.5);
215+
display: flex;
216+
align-items: center;
217+
justify-content: center;
218+
z-index: 1000;
219+
}
220+
221+
.dialog {
222+
background: white;
223+
border-radius: 8px;
224+
padding: 1.5rem;
225+
min-width: 320px;
226+
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
227+
}
228+
229+
.dialog h2 {
230+
margin-bottom: 1rem;
231+
font-size: 1.25rem;
232+
}
233+
234+
.dialog p {
235+
margin-bottom: 1.5rem;
236+
color: #666;
237+
}
238+
239+
.dialog-actions {
240+
display: flex;
241+
justify-content: flex-end;
242+
gap: 1rem;
243+
}
244+
245+
.checkbox {
246+
width: 18px;
247+
height: 18px;
248+
margin-right: 0.5rem;
249+
}
250+
251+
.hidden {
252+
display: none;
253+
}
254+
255+
.loading {
256+
display: inline-block;
257+
width: 20px;
258+
height: 20px;
259+
border: 3px solid #f3f3f3;
260+
border-top: 3px solid #1976d2;
261+
border-radius: 50%;
262+
animation: spin 1s linear infinite;
263+
}
264+
265+
@keyframes spin {
266+
0% { transform: rotate(0deg); }
267+
100% { transform: rotate(360deg); }
268+
}
269+
270+
.sort-indicator {
271+
margin-left: 0.5rem;
272+
opacity: 0.5;
273+
}
274+
275+
.sort-indicator.active {
276+
opacity: 1;
277+
}

0 commit comments

Comments
 (0)