Skip to content

Commit 9db66ce

Browse files
JawnnypooJawnnypoo
committed
cli page
1 parent a6e64ca commit 9db66ce

File tree

4 files changed

+461
-0
lines changed

4 files changed

+461
-0
lines changed

‎src/App.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Terms from './pages/Terms';
66
import Privacy from './pages/Privacy';
77
import LearnMore from './pages/LearnMore';
88
import Pricing from './pages/Pricing';
9+
import CliAuth from './pages/CliAuth/CliAuth';
910
import {AuthProvider, useAuth} from './contexts/AuthContext';
1011

1112
const AppContent: React.FC = () => {
@@ -27,6 +28,8 @@ const AppContent: React.FC = () => {
2728
setCurrentPage('learn-more');
2829
} else if (hash === 'pricing') {
2930
setCurrentPage('pricing');
31+
} else if (hash === 'cli-auth') {
32+
setCurrentPage('cli-auth');
3033
} else if (hash === 'welcome') {
3134
setCurrentPage('welcome');
3235
} else {
@@ -145,6 +148,10 @@ const AppContent: React.FC = () => {
145148
return <Pricing/>;
146149
}
147150

151+
if (currentPage === 'cli-auth') {
152+
return <CliAuth/>;
153+
}
154+
148155
return <Welcome/>;
149156
};
150157

‎src/pages/CliAuth/CliAuth.css‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
.cli-auth-container {
2+
min-height: 100vh;
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
background-color: #111827;
7+
padding: 20px;
8+
font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
9+
}
10+
11+
.cli-auth-card {
12+
background: #1f2937;
13+
border: 1px solid #374151;
14+
border-radius: 16px;
15+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
16+
padding: 48px 40px;
17+
text-align: center;
18+
max-width: 600px;
19+
width: 100%;
20+
}
21+
22+
.cli-auth-header {
23+
margin-bottom: 32px;
24+
}
25+
26+
.cli-auth-logo {
27+
width: 48px;
28+
height: 48px;
29+
margin: 0 auto 24px;
30+
background: #ff6b35;
31+
border-radius: 8px;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
font-size: 24px;
36+
color: white;
37+
font-weight: bold;
38+
}
39+
40+
.cli-auth-header h1 {
41+
font-size: 24px;
42+
font-weight: 600;
43+
color: #f9fafb;
44+
margin: 0 0 8px 0;
45+
}
46+
47+
.cli-auth-header p {
48+
font-size: 14px;
49+
color: #d1d5db;
50+
margin: 0;
51+
font-weight: 500;
52+
}
53+
54+
.cli-auth-spinner {
55+
width: 32px;
56+
height: 32px;
57+
border: 3px solid #374151;
58+
border-top: 3px solid #ff6b35;
59+
border-radius: 50%;
60+
animation: spin 1s linear infinite;
61+
margin: 0 auto 16px;
62+
}
63+
64+
.apple-login-btn {
65+
background: #000000;
66+
color: white;
67+
border: none;
68+
border-radius: 8px;
69+
padding: 12px 24px;
70+
font-size: 16px;
71+
font-weight: 500;
72+
cursor: pointer;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
gap: 8px;
77+
margin: 0 auto;
78+
transition: background-color 0.2s;
79+
font-family: inherit;
80+
}
81+
82+
.apple-login-btn:hover {
83+
background: #1a1a1a;
84+
}
85+
86+
.apple-login-btn:disabled {
87+
opacity: 0.6;
88+
cursor: not-allowed;
89+
}
90+
91+
.apple-icon {
92+
font-size: 18px;
93+
}
94+
95+
.auth-message {
96+
color: #d1d5db;
97+
font-size: 14px;
98+
}
99+
100+
.auth-message p {
101+
margin: 8px 0;
102+
}
103+
104+
.cli-auth-generating {
105+
color: #d1d5db;
106+
}
107+
108+
.cli-auth-generating p {
109+
margin: 16px 0 0 0;
110+
font-size: 14px;
111+
}
112+
113+
.generate-token-btn {
114+
background: #ff6b35;
115+
color: white;
116+
border: none;
117+
border-radius: 8px;
118+
padding: 12px 24px;
119+
font-size: 16px;
120+
font-weight: 500;
121+
cursor: pointer;
122+
transition: background-color 0.2s;
123+
font-family: inherit;
124+
}
125+
126+
.generate-token-btn:hover {
127+
background: #e55a2b;
128+
}
129+
130+
.cli-auth-success {
131+
text-align: left;
132+
}
133+
134+
.success-icon {
135+
font-size: 32px;
136+
text-align: center;
137+
margin-bottom: 16px;
138+
}
139+
140+
.cli-auth-success h2 {
141+
font-size: 20px;
142+
font-weight: 600;
143+
color: #10b981;
144+
margin: 0 0 8px 0;
145+
text-align: center;
146+
}
147+
148+
.user-info {
149+
font-size: 14px;
150+
color: #d1d5db;
151+
margin: 0 0 32px 0;
152+
text-align: center;
153+
}
154+
155+
.token-section h3 {
156+
font-size: 16px;
157+
font-weight: 600;
158+
color: #f9fafb;
159+
margin: 0 0 8px 0;
160+
}
161+
162+
.token-instructions {
163+
font-size: 14px;
164+
color: #d1d5db;
165+
margin: 0 0 16px 0;
166+
}
167+
168+
.token-container {
169+
background: #111827;
170+
border: 1px solid #374151;
171+
border-radius: 8px;
172+
padding: 16px;
173+
margin: 16px 0;
174+
position: relative;
175+
}
176+
177+
.token-display {
178+
display: block;
179+
color: #10b981;
180+
font-size: 12px;
181+
font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
182+
word-break: break-all;
183+
line-height: 1.4;
184+
margin: 0 0 12px 0;
185+
}
186+
187+
.copy-btn {
188+
background: #374151;
189+
color: #d1d5db;
190+
border: none;
191+
border-radius: 6px;
192+
padding: 8px 12px;
193+
font-size: 12px;
194+
cursor: pointer;
195+
transition: all 0.2s;
196+
font-family: inherit;
197+
display: block;
198+
margin: 0 auto;
199+
}
200+
201+
.copy-btn:hover {
202+
background: #4b5563;
203+
}
204+
205+
.copy-btn.copied {
206+
background: #10b981;
207+
color: white;
208+
}
209+
210+
.cli-instructions {
211+
margin-top: 24px;
212+
padding: 16px;
213+
background: #111827;
214+
border-radius: 8px;
215+
border: 1px solid #374151;
216+
}
217+
218+
.cli-instructions h4 {
219+
font-size: 14px;
220+
font-weight: 600;
221+
color: #f9fafb;
222+
margin: 0 0 12px 0;
223+
}
224+
225+
.cli-instructions ol {
226+
font-size: 14px;
227+
color: #d1d5db;
228+
margin: 0;
229+
padding-left: 20px;
230+
}
231+
232+
.cli-instructions li {
233+
margin: 4px 0;
234+
}
235+
236+
.cli-auth-error {
237+
color: #f87171;
238+
text-align: center;
239+
}
240+
241+
.cli-auth-error p {
242+
font-size: 14px;
243+
margin: 8px 0 16px 0;
244+
}
245+
246+
.error-icon {
247+
font-size: 24px;
248+
margin-bottom: 8px;
249+
}
250+
251+
.retry-btn {
252+
background: #dc2626;
253+
color: white;
254+
border: none;
255+
border-radius: 6px;
256+
padding: 8px 16px;
257+
font-size: 14px;
258+
cursor: pointer;
259+
transition: background-color 0.2s;
260+
font-family: inherit;
261+
}
262+
263+
.retry-btn:hover {
264+
background: #b91c1c;
265+
}
266+
267+
.redirect-info {
268+
font-size: 12px;
269+
color: #9ca3af;
270+
margin-top: 16px;
271+
font-style: italic;
272+
}
273+
274+
@keyframes spin {
275+
0% { transform: rotate(0deg); }
276+
100% { transform: rotate(360deg); }
277+
}

0 commit comments

Comments
 (0)