Skip to content

Commit 56dcdab

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent 42ad74e commit 56dcdab

File tree

3 files changed

+525
-0
lines changed

3 files changed

+525
-0
lines changed

‎examples/homepage.css‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,289 @@ body {
1212
position: relative;
1313
}
1414

15+
/* Login Screen */
16+
.login-screen {
17+
position: fixed;
18+
top: 0;
19+
left: 0;
20+
width: 100%;
21+
height: 100%;
22+
z-index: 10000;
23+
background: linear-gradient(to bottom, #5a7fbe 0%, #305ca8 50%, #1e4a8a 100%);
24+
display: flex;
25+
align-items: center;
26+
justify-content: center;
27+
}
28+
29+
.login-screen.hidden {
30+
display: none;
31+
}
32+
33+
.login-background {
34+
width: 100%;
35+
height: 100%;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
}
40+
41+
.login-container {
42+
background: rgba(255, 255, 255, 0.95);
43+
border-radius: 8px;
44+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
45+
padding: 40px;
46+
min-width: 400px;
47+
text-align: center;
48+
position: relative;
49+
}
50+
51+
.login-close-btn {
52+
position: absolute;
53+
top: 10px;
54+
right: 10px;
55+
width: 30px;
56+
height: 30px;
57+
border: 1px solid #999;
58+
background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 100%);
59+
border-radius: 3px;
60+
cursor: pointer;
61+
font-size: 24px;
62+
line-height: 1;
63+
color: #333;
64+
display: flex;
65+
align-items: center;
66+
justify-content: center;
67+
font-family: Arial, sans-serif;
68+
transition: all 0.2s;
69+
padding: 0;
70+
}
71+
72+
.login-close-btn:hover {
73+
background: linear-gradient(to bottom, #e74c3c 0%, #c0392b 100%);
74+
color: white;
75+
border-color: #c0392b;
76+
}
77+
78+
.login-header {
79+
margin-bottom: 30px;
80+
}
81+
82+
.login-logo {
83+
font-size: 36px;
84+
font-weight: bold;
85+
color: #0831d9;
86+
margin-bottom: 10px;
87+
font-family: 'Segoe UI', Tahoma, sans-serif;
88+
letter-spacing: 2px;
89+
}
90+
91+
.login-subtitle {
92+
font-size: 14px;
93+
color: #374151;
94+
}
95+
96+
.login-users {
97+
display: flex;
98+
flex-direction: column;
99+
gap: 15px;
100+
margin-bottom: 30px;
101+
}
102+
103+
.login-user-button {
104+
display: flex;
105+
align-items: center;
106+
gap: 15px;
107+
padding: 15px 20px;
108+
background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 100%);
109+
border: 2px solid #003c74;
110+
border-radius: 4px;
111+
cursor: pointer;
112+
transition: all 0.2s;
113+
font-family: 'Tahoma', sans-serif;
114+
font-size: 14px;
115+
}
116+
117+
.login-user-button:hover {
118+
background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%);
119+
border-color: #0066cc;
120+
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
121+
}
122+
123+
.login-user-button:active {
124+
background: linear-gradient(to bottom, #bbdefb 0%, #90caf9 100%);
125+
}
126+
127+
.login-user-icon {
128+
font-size: 32px;
129+
}
130+
131+
.login-user-name {
132+
font-size: 16px;
133+
font-weight: bold;
134+
color: #1e293b;
135+
}
136+
137+
.login-footer {
138+
padding-top: 20px;
139+
border-top: 1px solid #cbd5e1;
140+
}
141+
142+
.login-footer-text {
143+
font-size: 12px;
144+
color: #64748b;
145+
}
146+
147+
/* Login Forms */
148+
.login-form {
149+
position: fixed;
150+
top: 0;
151+
left: 0;
152+
width: 100%;
153+
height: 100%;
154+
z-index: 10001;
155+
background: linear-gradient(to bottom, #5a7fbe 0%, #305ca8 50%, #1e4a8a 100%);
156+
display: flex;
157+
align-items: center;
158+
justify-content: center;
159+
}
160+
161+
.login-form.hidden {
162+
display: none;
163+
}
164+
165+
.login-form-background {
166+
width: 100%;
167+
height: 100%;
168+
display: flex;
169+
align-items: center;
170+
justify-content: center;
171+
}
172+
173+
.login-form-container {
174+
background: rgba(255, 255, 255, 0.95);
175+
border-radius: 8px;
176+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
177+
padding: 30px;
178+
min-width: 450px;
179+
max-width: 500px;
180+
position: relative;
181+
}
182+
183+
.login-form-header {
184+
margin-bottom: 25px;
185+
}
186+
187+
.login-back-button {
188+
background: linear-gradient(to bottom, #ffffff 0%, #ece9d8 100%);
189+
border: 1px solid #003c74;
190+
padding: 6px 12px;
191+
border-radius: 3px;
192+
cursor: pointer;
193+
font-family: 'Tahoma', sans-serif;
194+
font-size: 12px;
195+
margin-bottom: 15px;
196+
transition: all 0.2s;
197+
}
198+
199+
.login-back-button:hover {
200+
background: linear-gradient(to bottom, #e3f2fd 0%, #bbdefb 100%);
201+
border-color: #0066cc;
202+
}
203+
204+
.login-form-title {
205+
display: flex;
206+
align-items: center;
207+
gap: 12px;
208+
justify-content: center;
209+
}
210+
211+
.login-form-icon {
212+
font-size: 32px;
213+
}
214+
215+
.login-form-title h2 {
216+
font-size: 24px;
217+
color: #0831d9;
218+
font-family: 'Segoe UI', Tahoma, sans-serif;
219+
}
220+
221+
.login-form-content {
222+
text-align: left;
223+
}
224+
225+
.login-form-prompt {
226+
font-size: 13px;
227+
color: #374151;
228+
margin-bottom: 20px;
229+
text-align: center;
230+
}
231+
232+
.login-input-group {
233+
margin-bottom: 15px;
234+
}
235+
236+
.login-input-group label {
237+
display: block;
238+
font-size: 13px;
239+
font-weight: bold;
240+
color: #1e293b;
241+
margin-bottom: 6px;
242+
}
243+
244+
.login-input {
245+
width: 100%;
246+
padding: 8px 12px;
247+
border: 2px solid #cbd5e1;
248+
border-radius: 3px;
249+
font-family: 'Tahoma', sans-serif;
250+
font-size: 13px;
251+
transition: all 0.2s;
252+
}
253+
254+
.login-input:focus {
255+
outline: none;
256+
border-color: #0066cc;
257+
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
258+
}
259+
260+
.login-actions {
261+
margin-top: 25px;
262+
display: flex;
263+
justify-content: flex-end;
264+
}
265+
266+
.login-submit-btn {
267+
display: flex;
268+
align-items: center;
269+
gap: 8px;
270+
padding: 10px 20px;
271+
background: linear-gradient(to bottom, #3b82f6 0%, #2563eb 100%);
272+
border: 1px solid #1e40af;
273+
border-radius: 4px;
274+
color: white;
275+
font-family: 'Tahoma', sans-serif;
276+
font-size: 14px;
277+
font-weight: bold;
278+
cursor: pointer;
279+
transition: all 0.2s;
280+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
281+
}
282+
283+
.login-submit-btn:hover {
284+
background: linear-gradient(to bottom, #2563eb 0%, #1d4ed8 100%);
285+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
286+
}
287+
288+
.login-submit-btn:active {
289+
background: linear-gradient(to bottom, #1d4ed8 0%, #1e40af 100%);
290+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
291+
transform: translateY(1px);
292+
}
293+
294+
.login-btn-icon {
295+
font-size: 16px;
296+
}
297+
15298
/* Desktop Background */
16299
.desktop {
17300
width: 100%;

0 commit comments

Comments
 (0)