forked from
me.webbeef.org/browser.html
Rewild Your Web
Add 'powered by' tribute to mobile launchscreen
Signed-off-by: webbeef <me@webbeef.org>
+58
-6
+18
-6
ui/system/index_mobile.html
+18
-6
ui/system/index_mobile.html
···
1
-
<!DOCTYPE html>
1
+
<!doctype html>
2
2
<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
3
3
<html>
4
4
<head>
5
5
<title>Beaver</title>
6
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
6
+
<meta
7
+
name="viewport"
8
+
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
9
+
/>
7
10
<link rel="stylesheet" href="//theme.localhost:8888/index.css" />
8
11
<link rel="stylesheet" href="//shared.localhost:8888/fonts/fonts.css" />
9
-
<link rel="stylesheet" href="//shared.localhost:8888/third_party/lucide/lucide.css" />
12
+
<link
13
+
rel="stylesheet"
14
+
href="//shared.localhost:8888/third_party/lucide/lucide.css"
15
+
/>
10
16
<script type="module" src="//shared.localhost:8888/lucide_icon.js"></script>
11
17
<link rel="stylesheet" href="index.css" />
12
18
<link rel="stylesheet" href="mobile.css" />
···
21
27
<div id="mobile-splash" class="mobile-splash">
22
28
<div class="splash-content">
23
29
<div class="splash-logo">Beaver</div>
24
-
<img src="./logo.png" alt="Beaver Logo"/>
30
+
<img src="./logo.png" alt="Beaver Logo" />
25
31
<div class="splash-spinner">
26
32
<lucide-icon name="loader-circle"></lucide-icon>
27
33
</div>
34
+
<div id="powered-by">
35
+
Powered By
36
+
<div id="powered-by-logos">
37
+
<img src="//shared.localhost:8888/images/servo-color-negative-no-container.svg" alt="servo"/>
38
+
<img src="//shared.localhost:8888/images/iroh-wordmark-purple.svg" alt="iroh"/>
39
+
</div>
40
+
</div>
28
41
</div>
29
42
</div>
30
43
<main>
31
44
<div id="root"></div>
32
45
</main>
33
-
<footer id="footer">
34
-
</footer>
46
+
<footer id="footer"></footer>
35
47
</body>
36
48
</html>
+18
ui/system/mobile.css
+18
ui/system/mobile.css
···
364
364
transform: rotate(360deg);
365
365
}
366
366
}
367
+
368
+
#powered-by {
369
+
display: flex;
370
+
flex-direction: column;
371
+
align-items: center;
372
+
font-family: monospace;
373
+
color: lightgray;
374
+
gap: 0.5em;
375
+
}
376
+
377
+
#powered-by-logos {
378
+
display: flex;
379
+
gap: 1em;
380
+
}
381
+
382
+
#powered-by-logos img {
383
+
height: 32px;
384
+
}