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
1body {
2 font-family: system-ui, sans-serif;
3 background: #f9fafb;
4 display: flex;
5 align-items: center;
6 justify-content: center;
7 height: 100vh;
8 margin: 0;
9}
10
11.card {
12 width: 100%;
13 max-width: 360px;
14 background: white;
15 border: 1px solid #d1d5db;
16 border-radius: 8px;
17 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
18 padding: 1.5rem;
19 box-sizing: border-box;
20}
21
22.header {
23 text-align: center;
24 margin-bottom: 1.5rem;
25}
26
27.icon-circle {
28 width: 64px;
29 height: 64px;
30 background: #dbeafe;
31 border-radius: 50%;
32 display: flex;
33 align-items: center;
34 justify-content: center;
35 margin: 0 auto 1rem;
36}
37
38.icon-circle img {
39 width: 32px;
40 height: 32px;
41}
42
43h1 {
44 font-size: 1.5rem;
45 margin: 0;
46 font-weight: 700;
47}
48
49p {
50 font-size: 0.9rem;
51 color: #6b7280;
52}
53
54.actions {
55 display: flex;
56 flex-direction: column;
57 gap: 1rem;
58}
59
60label {
61 display: block;
62 font-size: 0.85rem;
63 font-weight: 600;
64 margin-bottom: 0.25rem;
65}
66
67input {
68 width: 100%;
69 padding: 0.5rem 0.75rem;
70 border: 1px solid #d1d5db;
71 border-radius: 4px;
72 font-size: 0.95rem;
73 box-sizing: border-box;
74}
75
76input:focus {
77 outline: none;
78 border-color: #2563eb;
79 box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
80}
81
82button {
83 width: 100%;
84 padding: 0.6rem;
85 font-size: 0.95rem;
86 border-radius: 4px;
87 cursor: pointer;
88 transition: background 0.2s ease;
89 display: flex;
90 align-items: center;
91 justify-content: center;
92 gap: 0.5rem;
93}
94
95.btn-primary {
96 background: #2563eb;
97 color: white;
98 border: none;
99}
100
101.btn-primary:hover {
102 background: #1d4ed8;
103}
104
105.btn-qr {
106 background: white;
107 border: 1px solid #d1d5db;
108 color: #374151;
109}
110
111.btn-qr:hover {
112 background: #f3f4f6;
113}
114
115.btn-qr img {
116 width: 16px;
117 height: 16px;
118}
119
120.hint {
121 font-size: 0.75rem;
122 color: #6b7280;
123 margin-top: 0.25rem;
124}