Skip to content

Commit 8ac2818

Browse files
AuchrioAuchrio
committed
- Added a new route called /files which lets users login and view there uploaded files and shared files
- Added specific css and js directories and used them to standardise styling across all web pages
1 parent bbafde7 commit 8ac2818

File tree

6 files changed

+1354
-93
lines changed

6 files changed

+1354
-93
lines changed

‎pages/css/style.css‎

Lines changed: 399 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,399 @@
1+
/* === Global Styles === */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
10+
color: #e0e0e0;
11+
background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 100%);
12+
min-height: 100vh;
13+
}
14+
15+
.container {
16+
max-width: 1200px;
17+
margin: 0 auto;
18+
padding: 20px;
19+
}
20+
21+
/* === Header === */
22+
header {
23+
text-align: center;
24+
margin-bottom: 40px;
25+
padding: 40px 20px 20px;
26+
}
27+
28+
.logo {
29+
font-size: 3rem;
30+
margin-bottom: 15px;
31+
}
32+
33+
h1 {
34+
font-size: 2.5rem;
35+
margin-bottom: 10px;
36+
background: linear-gradient(135deg, #7431ff 0%, #9d6eff 100%);
37+
-webkit-background-clip: text;
38+
-webkit-text-fill-color: transparent;
39+
background-clip: text;
40+
}
41+
42+
.tagline {
43+
font-size: 1.1rem;
44+
color: #a0a0a0;
45+
}
46+
47+
/* === Form Elements === */
48+
.auth-section {
49+
background: rgba(116, 49, 255, 0.05);
50+
border: 1px solid rgba(116, 49, 255, 0.2);
51+
border-radius: 12px;
52+
padding: 30px;
53+
margin-bottom: 40px;
54+
max-width: 600px;
55+
margin-left: auto;
56+
margin-right: auto;
57+
}
58+
59+
.form-group {
60+
margin-bottom: 20px;
61+
}
62+
63+
.form-group label {
64+
display: block;
65+
margin-bottom: 8px;
66+
font-weight: 600;
67+
color: #e0e0e0;
68+
}
69+
70+
.form-group input,
71+
.form-group textarea {
72+
width: 100%;
73+
padding: 12px 15px;
74+
border: 1px solid rgba(116, 49, 255, 0.3);
75+
border-radius: 8px;
76+
background: rgba(255, 255, 255, 0.05);
77+
color: #e0e0e0;
78+
font-size: 1rem;
79+
transition: all 0.3s ease;
80+
}
81+
82+
.form-group input:focus,
83+
.form-group textarea:focus {
84+
outline: none;
85+
border-color: #7431ff;
86+
background: rgba(116, 49, 255, 0.1);
87+
box-shadow: 0 0 0 3px rgba(116, 49, 255, 0.1);
88+
}
89+
90+
.form-group textarea {
91+
resize: vertical;
92+
min-height: 60px;
93+
font-family: 'Courier New', monospace;
94+
}
95+
96+
/* === Buttons === */
97+
button {
98+
padding: 12px 24px;
99+
border: none;
100+
border-radius: 8px;
101+
font-size: 1rem;
102+
font-weight: 600;
103+
cursor: pointer;
104+
transition: all 0.3s ease;
105+
}
106+
107+
.btn-primary {
108+
background: linear-gradient(135deg, #7431ff 0%, #9d6eff 100%);
109+
color: white;
110+
width: 100%;
111+
}
112+
113+
.btn-primary:hover:not(:disabled) {
114+
transform: translateY(-2px);
115+
box-shadow: 0 10px 30px rgba(116, 49, 255, 0.4);
116+
}
117+
118+
.btn-primary:disabled {
119+
opacity: 0.5;
120+
cursor: not-allowed;
121+
}
122+
123+
.btn-secondary {
124+
background: rgba(116, 49, 255, 0.2);
125+
color: #e0e0e0;
126+
border: 1px solid rgba(116, 49, 255, 0.3);
127+
}
128+
129+
.btn-secondary:hover:not(:disabled) {
130+
background: rgba(116, 49, 255, 0.3);
131+
border-color: #7431ff;
132+
}
133+
134+
.btn-small {
135+
padding: 8px 16px;
136+
font-size: 0.9rem;
137+
width: auto;
138+
}
139+
140+
.btn-download {
141+
background: rgba(76, 175, 80, 0.2);
142+
color: #4caf50;
143+
border: 1px solid rgba(76, 175, 80, 0.3);
144+
}
145+
146+
.btn-download:hover {
147+
background: rgba(76, 175, 80, 0.3);
148+
border-color: #4caf50;
149+
}
150+
151+
/* === Status Boxes === */
152+
.status-box {
153+
background: rgba(116, 49, 255, 0.05);
154+
border-left: 4px solid #7431ff;
155+
padding: 15px 20px;
156+
border-radius: 8px;
157+
margin-bottom: 20px;
158+
display: flex;
159+
align-items: center;
160+
gap: 15px;
161+
}
162+
163+
.status-icon {
164+
font-size: 1.5rem;
165+
flex-shrink: 0;
166+
}
167+
168+
.status-text {
169+
flex: 1;
170+
}
171+
172+
.error {
173+
background: rgba(211, 47, 47, 0.1);
174+
border-left-color: #d32f2f;
175+
color: #ff8a80;
176+
}
177+
178+
.success {
179+
background: rgba(76, 175, 80, 0.1);
180+
border-left-color: #4caf50;
181+
color: #81c784;
182+
}
183+
184+
.info {
185+
background: rgba(33, 150, 243, 0.1);
186+
border-left-color: #2196f3;
187+
color: #64b5f6;
188+
}
189+
190+
/* === Progress Bar === */
191+
.progress-bar {
192+
width: 100%;
193+
height: 6px;
194+
background: rgba(116, 49, 255, 0.1);
195+
border-radius: 3px;
196+
overflow: hidden;
197+
margin-top: 10px;
198+
}
199+
200+
.progress-fill {
201+
height: 100%;
202+
background: linear-gradient(90deg, #7431ff 0%, #9d6eff 100%);
203+
width: 0%;
204+
transition: width 0.3s ease;
205+
}
206+
207+
/* === File Browser === */
208+
.file-browser {
209+
background: rgba(116, 49, 255, 0.05);
210+
border: 1px solid rgba(116, 49, 255, 0.2);
211+
border-radius: 12px;
212+
padding: 20px;
213+
}
214+
215+
.breadcrumb {
216+
display: flex;
217+
align-items: center;
218+
gap: 10px;
219+
margin-bottom: 20px;
220+
font-size: 0.95rem;
221+
flex-wrap: wrap;
222+
}
223+
224+
.breadcrumb-item {
225+
color: #7431ff;
226+
cursor: pointer;
227+
padding: 0;
228+
border-radius: 4px;
229+
transition: all 0.3s ease;
230+
}
231+
232+
.breadcrumb-item:hover {
233+
background: rgba(116, 49, 255, 0.2);
234+
}
235+
236+
.breadcrumb-separator {
237+
color: #606060;
238+
}
239+
240+
.file-list {
241+
display: flex;
242+
flex-direction: column;
243+
gap: 10px;
244+
}
245+
246+
.file-item {
247+
display: flex;
248+
align-items: center;
249+
padding: 15px;
250+
background: rgba(116, 49, 255, 0.08);
251+
border: 1px solid rgba(116, 49, 255, 0.15);
252+
border-radius: 8px;
253+
cursor: pointer;
254+
transition: all 0.3s ease;
255+
}
256+
257+
.file-item:hover {
258+
background: rgba(116, 49, 255, 0.15);
259+
border-color: rgba(116, 49, 255, 0.3);
260+
transform: translateX(5px);
261+
}
262+
263+
.file-icon {
264+
font-size: 1.5rem;
265+
margin-right: 15px;
266+
flex-shrink: 0;
267+
width: 30px;
268+
text-align: center;
269+
}
270+
271+
.file-info {
272+
flex: 1;
273+
min-width: 0;
274+
}
275+
276+
.file-name {
277+
font-weight: 600;
278+
margin-bottom: 4px;
279+
word-break: break-word;
280+
}
281+
282+
.file-path {
283+
font-size: 0.85rem;
284+
color: #a0a0a0;
285+
font-family: 'Courier New', monospace;
286+
}
287+
288+
.file-actions {
289+
display: flex;
290+
gap: 10px;
291+
margin-left: 15px;
292+
}
293+
294+
.empty-state {
295+
text-align: center;
296+
padding: 60px 20px;
297+
color: #a0a0a0;
298+
}
299+
300+
.empty-icon {
301+
font-size: 3rem;
302+
margin-bottom: 20px;
303+
opacity: 0.5;
304+
}
305+
306+
.empty-text {
307+
font-size: 1.1rem;
308+
margin-bottom: 10px;
309+
}
310+
311+
/* === Spinner === */
312+
.spinner {
313+
display: inline-block;
314+
width: 16px;
315+
height: 16px;
316+
border: 2px solid rgba(255, 255, 255, 0.2);
317+
border-top: 2px solid #7431ff;
318+
border-radius: 50%;
319+
animation: spin 0.8s linear infinite;
320+
}
321+
322+
@keyframes spin {
323+
0% { transform: rotate(0deg); }
324+
100% { transform: rotate(360deg); }
325+
}
326+
327+
/* === Utility Classes === */
328+
.hidden {
329+
display: none !important;
330+
}
331+
332+
.text-center {
333+
text-align: center;
334+
}
335+
336+
.text-muted {
337+
color: #a0a0a0;
338+
}
339+
340+
.mt-20 {
341+
margin-top: 20px;
342+
}
343+
344+
.mb-20 {
345+
margin-bottom: 20px;
346+
}
347+
348+
/* === Responsive === */
349+
@media (max-width: 768px) {
350+
header {
351+
padding: 30px 20px 15px;
352+
}
353+
354+
h1 {
355+
font-size: 1.8rem;
356+
}
357+
358+
.auth-section {
359+
padding: 20px;
360+
}
361+
362+
.file-item {
363+
flex-direction: column;
364+
align-items: flex-start;
365+
}
366+
367+
.file-icon {
368+
margin-right: 0;
369+
margin-bottom: 10px;
370+
}
371+
372+
.file-actions {
373+
width: 100%;
374+
margin-left: 0;
375+
margin-top: 10px;
376+
}
377+
378+
.btn-small {
379+
flex: 1;
380+
}
381+
382+
.breadcrumb {
383+
font-size: 0.85rem;
384+
}
385+
}
386+
387+
/* === Footer === */
388+
footer {
389+
text-align: center;
390+
margin-top: 80px;
391+
padding-top: 40px;
392+
border-top: 1px solid rgba(116, 49, 255, 0.2);
393+
color: #808080;
394+
font-size: 0.95rem;
395+
}
396+
397+
footer p {
398+
margin: 8px 0;
399+
}

0 commit comments

Comments
 (0)