Skip to content

Commit bd91259

Browse files
do-medo-me
committed
make mobile friendly
1 parent 9256347 commit bd91259

File tree

2 files changed

+193
-52
lines changed

2 files changed

+193
-52
lines changed

‎app.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,13 +139,36 @@ generateBtn.addEventListener('click', () => {
139139
updateLayer(data);
140140
generateBtn.innerText = 'Generate';
141141
generateBtn.disabled = false;
142+
143+
// Auto-close on mobile after generation
144+
if (window.innerWidth <= 768) {
145+
controlPanel.classList.remove('open');
146+
}
142147
}, 10);
143148
});
144149

145150
const removeBtn = document.getElementById('remove-btn');
146151
removeBtn.addEventListener('click', () => {
147152
currentData = null;
148153
updateLayer([]);
154+
155+
// Auto-close on mobile after removal
156+
if (window.innerWidth <= 768) {
157+
controlPanel.classList.remove('open');
158+
}
159+
});
160+
161+
// --- Mobile UI Toggles ---
162+
const controlPanel = document.getElementById('control-panel');
163+
const panelToggle = document.getElementById('panel-toggle');
164+
const closePanel = document.getElementById('close-panel');
165+
166+
panelToggle.addEventListener('click', () => {
167+
controlPanel.classList.add('open');
168+
});
169+
170+
closePanel.addEventListener('click', () => {
171+
controlPanel.classList.remove('open');
149172
});
150173

151174
// --- Drag and Drop ---

‎index.html‎

Lines changed: 170 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -29,64 +29,130 @@
2929
position: absolute;
3030
top: 20px;
3131
left: 20px;
32-
padding: 20px;
33-
background: rgba(255, 255, 255, 0.9);
34-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
35-
border-radius: 8px;
36-
z-index: 10;
37-
width: 300px;
38-
backdrop-filter: blur(4px);
32+
padding: 24px;
33+
background: rgba(255, 255, 255, 0.95);
34+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
35+
border-radius: 16px;
36+
z-index: 1000;
37+
width: 320px;
38+
backdrop-filter: blur(12px);
39+
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
40+
border: 1px solid rgba(255, 255, 255, 0.3);
41+
}
42+
43+
/* Mobile Toggle Button */
44+
#panel-toggle {
45+
position: absolute;
46+
top: 20px;
47+
left: 20px;
48+
z-index: 999;
49+
background: #0078ff;
50+
color: white;
51+
border: none;
52+
border-radius: 50%;
53+
width: 48px;
54+
height: 48px;
55+
display: none;
56+
align-items: center;
57+
justify-content: center;
58+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
59+
cursor: pointer;
60+
}
61+
62+
/* Close Button for Mobile */
63+
#close-panel {
64+
position: absolute;
65+
top: 15px;
66+
right: 15px;
67+
display: none;
68+
background: none;
69+
border: none;
70+
color: #999;
71+
cursor: pointer;
72+
padding: 5px;
73+
width: auto;
3974
}
4075

4176
h2 {
4277
margin-top: 0;
43-
font-size: 18px;
44-
color: #333;
78+
font-size: 20px;
79+
font-weight: 800;
80+
color: #1a1a1a;
81+
letter-spacing: -0.5px;
4582
}
4683

4784
.input-group {
48-
margin-bottom: 15px;
85+
margin-bottom: 20px;
4986
}
5087

5188
label {
5289
display: block;
53-
margin-bottom: 5px;
54-
font-size: 14px;
55-
font-weight: 600;
56-
color: #666;
90+
margin-bottom: 8px;
91+
font-size: 13px;
92+
font-weight: 700;
93+
color: #444;
94+
text-transform: uppercase;
95+
letter-spacing: 0.5px;
5796
}
5897

5998
input[type="text"] {
6099
width: 100%;
61-
padding: 8px;
62-
border: 1px solid #ccc;
63-
border-radius: 4px;
100+
padding: 12px 16px;
101+
border: 2px solid #eee;
102+
border-radius: 12px;
64103
box-sizing: border-box;
65-
font-size: 14px;
104+
font-size: 16px;
105+
/* Prevents iOS auto-zoom */
106+
transition: border-color 0.2s;
107+
}
108+
109+
input[type="text"]:focus {
110+
outline: none;
111+
border-color: #0078ff;
66112
}
67113

68114
button {
69115
width: 100%;
70-
padding: 10px;
116+
padding: 14px;
71117
background: #0078ff;
72118
color: white;
73119
border: none;
74-
border-radius: 4px;
120+
border-radius: 12px;
75121
cursor: pointer;
76-
font-weight: 600;
77-
transition: background 0.2s;
122+
font-weight: 700;
123+
font-size: 15px;
124+
transition: all 0.2s;
125+
box-shadow: 0 4px 12px rgba(0, 120, 255, 0.2);
78126
}
79127

80128
button:hover {
81129
background: #0062cc;
130+
transform: translateY(-1px);
131+
box-shadow: 0 6px 16px rgba(0, 120, 255, 0.3);
132+
}
133+
134+
button:active {
135+
transform: translateY(0);
82136
}
83137

84138
#status {
85139
margin-top: 15px;
86-
font-size: 12px;
87-
color: #666;
88-
border-top: 1px solid #eee;
89-
padding-top: 10px;
140+
font-size: 13px;
141+
color: #555;
142+
background: #f8f9fa;
143+
padding: 12px;
144+
border-radius: 8px;
145+
}
146+
147+
#status div {
148+
display: flex;
149+
justify-content: space-between;
150+
margin-bottom: 4px;
151+
}
152+
153+
#status span {
154+
font-weight: 700;
155+
color: #000;
90156
}
91157

92158
#drop-zone {
@@ -95,13 +161,14 @@
95161
left: 0;
96162
width: 100%;
97163
height: 100%;
98-
background: rgba(0, 120, 255, 0.2);
164+
background: rgba(0, 120, 255, 0.15);
99165
border: 4px dashed #0078ff;
100166
display: none;
101167
align-items: center;
102168
justify-content: center;
103-
z-index: 100;
169+
z-index: 10000;
104170
pointer-events: none;
171+
backdrop-filter: blur(4px);
105172
}
106173

107174
#drop-zone.active {
@@ -110,17 +177,17 @@
110177

111178
#drop-zone span {
112179
font-size: 32px;
113-
font-weight: bold;
180+
font-weight: 800;
114181
color: #0078ff;
115182
background: white;
116-
padding: 20px 40px;
117-
border-radius: 40px;
118-
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
183+
padding: 24px 48px;
184+
border-radius: 50px;
185+
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
119186
}
120187

121188
.button-group {
122189
display: flex;
123-
gap: 10px;
190+
gap: 12px;
124191
margin-bottom: 15px;
125192
}
126193

@@ -130,51 +197,102 @@
130197

131198
#remove-btn {
132199
background: #ff4d4f;
133-
flex: 0 0 50px;
134-
padding: 10px 0;
135-
display: flex;
136-
align-items: center;
137-
justify-content: center;
200+
flex: 0 0 54px;
201+
padding: 14px 0;
202+
box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
138203
}
139204

140205
#remove-btn:hover {
141206
background: #ff7875;
207+
box-shadow: 0 6px 16px rgba(255, 77, 79, 0.3);
142208
}
143209

144210
.author-info {
145-
margin-top: 15px;
211+
margin-top: 20px;
146212
border-top: 1px solid #eee;
147-
padding-top: 10px;
213+
padding-top: 15px;
148214
display: flex;
149215
align-items: center;
150216
justify-content: space-between;
151-
font-size: 13px;
152-
color: #333;
217+
font-size: 14px;
218+
font-weight: 500;
153219
}
154220

155221
.author-info a {
156222
color: #333;
157223
text-decoration: none;
158224
display: flex;
159225
align-items: center;
226+
transition: color 0.2s;
227+
}
228+
229+
.author-info a:hover {
230+
color: #0078ff;
160231
}
161232

162233
.author-info svg {
163-
width: 20px;
164-
height: 20px;
165-
margin-left: 8px;
234+
width: 22px;
235+
height: 22px;
236+
margin-left: 10px;
237+
}
238+
239+
/* Mobile Specific Overrides */
240+
@media (max-width: 768px) {
241+
#panel-toggle {
242+
display: flex;
243+
}
244+
245+
#control-panel {
246+
top: auto;
247+
bottom: 0;
248+
left: 0;
249+
width: 100%;
250+
border-radius: 24px 24px 0 0;
251+
transform: translateY(100%);
252+
box-sizing: border-box;
253+
padding-bottom: 40px;
254+
/* Space for home indicator */
255+
}
256+
257+
#control-panel.open {
258+
transform: translateY(0);
259+
}
260+
261+
#close-panel {
262+
display: block;
263+
}
264+
265+
h2 {
266+
padding-right: 30px;
267+
}
268+
269+
.author-info {
270+
padding-bottom: 10px;
271+
}
166272
}
167273
</style>
168274
</head>
169275

170276
<body>
171277
<div id="map"></div>
172278

173-
<div id="control-panel">
174-
<h2>WebGPU-Scatterplot (deck.gl)</h2>
279+
<button id="panel-toggle" title="Open Settings">
280+
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
281+
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
282+
</svg>
283+
</button>
284+
285+
<div id="control-panel" class="open">
286+
<button id="close-panel" title="Close Panel">
287+
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
288+
<path
289+
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
290+
</svg>
291+
</button>
292+
<h2>Scatterplot Controls</h2>
175293
<div class="input-group">
176-
<label for="point-count">Generate Points (e.g. 10,000,000)</label>
177-
<input type="text" id="point-count" placeholder="50,000,000" value="1,000,000">
294+
<label for="point-count">Generate Points</label>
295+
<input type="text" id="point-count" placeholder="1,000,000" value="1,000,000" inputmode="numeric">
178296
</div>
179297
<div class="button-group">
180298
<button id="generate-btn">Generate</button>
@@ -188,9 +306,9 @@ <h2>WebGPU-Scatterplot (deck.gl)</h2>
188306
<div>Points: <span id="count-display">0</span></div>
189307
<div>Load time: <span id="time-display">-</span></div>
190308
</div>
191-
<p style="font-size: 11px; color: #888; margin-top: 10px;">
192-
Tip: Drag & Drop a JSON file anywhere to load your own data. Expects this format:<br>
193-
[[65.279,86.838,1],[131.162,-21.818,2],...]
309+
<p style="font-size: 11px; color: #888; margin-top: 15px; line-height: 1.4;">
310+
Tip: Drag & Drop a JSON file anywhere to load your own data. Format:
311+
<code>[[lon,lat,val],...]</code>
194312
</p>
195313

196314
<div class="author-info">

0 commit comments

Comments
 (0)