mobile bluesky app made with flutter
lazurite.stormlightlabs.org/
mobile
bluesky
flutter
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, maximum-scale=1.0, user-scalable=no">
6 <title>Login - Lazurite</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com">
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9 <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet">
10 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
11 <link rel="stylesheet" href="styles.css">
12 <style>
13 .login-screen {
14 min-height: 100vh;
15 display: flex;
16 flex-direction: column;
17 justify-content: center;
18 padding: 24px;
19 background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
20 }
21
22 .login-header {
23 text-align: center;
24 margin-bottom: 48px;
25 }
26
27 .logo {
28 width: 80px;
29 height: 80px;
30 background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
31 border-radius: 20px;
32 margin: 0 auto 24px;
33 display: flex;
34 align-items: center;
35 justify-content: center;
36 box-shadow: 0 8px 32px rgba(0, 102, 255, 0.25);
37 }
38
39 .logo svg {
40 width: 44px;
41 height: 44px;
42 color: white;
43 }
44
45 .app-name {
46 font-size: 32px;
47 font-weight: 700;
48 color: var(--text-primary);
49 margin-bottom: 8px;
50 letter-spacing: -0.5px;
51 }
52
53 .app-tagline {
54 color: var(--text-secondary);
55 font-size: 15px;
56 }
57
58 .login-methods {
59 display: flex;
60 flex-direction: column;
61 gap: 16px;
62 margin-bottom: 32px;
63 }
64
65 .divider-with-text {
66 display: flex;
67 align-items: center;
68 gap: 16px;
69 margin: 24px 0;
70 color: var(--text-muted);
71 font-size: 13px;
72 font-weight: 500;
73 text-transform: uppercase;
74 }
75
76 .divider-with-text::before,
77 .divider-with-text::after {
78 content: '';
79 flex: 1;
80 height: 1px;
81 background-color: var(--border);
82 }
83
84 .debug-section {
85 background-color: var(--surface);
86 border-radius: 12px;
87 padding: 20px;
88 border: 1.5px dashed var(--border);
89 }
90
91 .debug-header {
92 display: flex;
93 align-items: center;
94 gap: 8px;
95 margin-bottom: 16px;
96 }
97
98 .debug-title {
99 font-weight: 600;
100 color: var(--text-primary);
101 font-size: 15px;
102 }
103
104 .debug-form {
105 display: flex;
106 flex-direction: column;
107 gap: 12px;
108 }
109
110 .input-group {
111 display: flex;
112 flex-direction: column;
113 gap: 6px;
114 }
115
116 .input-label {
117 font-size: 13px;
118 font-weight: 500;
119 color: var(--text-secondary);
120 text-transform: uppercase;
121 }
122
123 .help-text {
124 font-size: 12px;
125 color: var(--text-muted);
126 margin-top: 8px;
127 text-align: center;
128 }
129
130 .login-footer {
131 text-align: center;
132 margin-top: auto;
133 padding-top: 32px;
134 }
135
136 .terms-text {
137 font-size: 12px;
138 color: var(--text-muted);
139 line-height: 1.6;
140 }
141 </style>
142</head>
143<body>
144 <div class="mobile-container">
145 <div class="login-screen">
146 <!-- Logo & Header -->
147 <div class="login-header">
148 <div class="logo">
149 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
150 <path d="M12 2L2 7l10 5 10-5-10-5z"/>
151 <path d="M2 17l10 5 10-5"/>
152 <path d="M2 12l10 5 10-5"/>
153 </svg>
154 </div>
155 <h1 class="app-name">Lazurite</h1>
156 <p class="app-tagline">Roam the ATmosphere</p>
157 </div>
158
159 <!-- Login Methods -->
160 <div class="login-methods">
161 <!-- OAuth 2.0 Login -->
162 <button class="oauth-btn">
163 <svg viewBox="0 0 24 24" fill="currentColor">
164 <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
165 </svg>
166 Continue
167 </button>
168
169 <div class="divider-with-text">Or</div>
170
171 <!-- Debug Mode - App Password -->
172 <div class="debug-section">
173 <div class="debug-header">
174 <span class="debug-badge">Debug Mode</span>
175 <span class="debug-title">App Password Login</span>
176 </div>
177
178 <form class="debug-form">
179 <div class="input-group">
180 <label class="input-label">Handle or DID</label>
181 <input type="text" class="input" placeholder="@username.bsky.social">
182 </div>
183
184 <div class="input-group">
185 <label class="input-label">App Password</label>
186 <input type="password" class="input" placeholder="xxxx-xxxx-xxxx-xxxx">
187 </div>
188
189 <button type="submit" class="btn btn-primary">
190 Sign In
191 </button>
192 </form>
193
194 <p class="help-text">
195 App passwords can be generated in BlueSky Settings → App Passwords
196 </p>
197 </div>
198 </div>
199
200 <!-- Footer -->
201 <div class="login-footer">
202 <p class="terms-text">
203 By continuing, you agree to BlueSky's<br>
204 <a href="#" class="link">Terms of Service</a> and <a href="#" class="link">Privacy Policy</a>
205 </p>
206 </div>
207 </div>
208 </div>
209</body>
210</html>