Self-hosted, federated location sharing app and server that prioritizes user privacy and security
azom.dev
end-to-end-encryption
location-sharing
privacy
self-hosted
federated
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <script type="module">
6 import Alpine from "alpinejs";
7 window.Alpine = Alpine;
8 Alpine.start();
9 </script>
10 <link rel="stylesheet" href="/src/styles.css" />
11 </head>
12
13 <body>
14 <div class="card">
15 <div class="header">
16 <div class="icon-circle">
17 <img src="./src/assets/pin.svg" alt="Pin Icon" />
18 </div>
19 <h1>Position Share</h1>
20 <p>Connect with your server to start sharing</p>
21 </div>
22
23 <!-- x-data connects this element to the signupState Alpine component, enabling its data (serverAddress and signupKey) and functions (signup and scanQR) to work within it :) -->
24 <div class="actions" x-data="signupState">
25 <div>
26 <label for="server">Server Address</label>
27 <input id="server" type="url" placeholder="https://your-server.com" x-model="serverAddress" required />
28 </div>
29
30 <div>
31 <label for="key">Signup Key</label>
32 <input id="key" type="password" placeholder="Enter your signup key" x-model="signupKey" required />
33 </div>
34
35 <p class="hint">Scan a QR code to automatically fill both server address and signup key</p>
36 <button type="button" class="btn-qr" @click="scanQR">
37 <img src="./src/assets/qr.svg" alt="QR Icon" />
38 Scan QR Code
39 </button>
40
41 <button class="btn-primary" @click="signup">Connect</button>
42 </div>
43 </div>
44
45 <script>
46 function signupState() {
47 return {
48 serverAddress: "",
49 signupKey: "",
50 // we have the functions within a bigger function because this is how we can access the variables we define (by using this.variableWeWant)
51 signup() {
52 alert(this.serverAddress);
53 },
54 scanQR() {
55 alert(this.signupKey);
56 },
57 };
58 }
59 </script>
60 </body>
61</html>