-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyle.css
More file actions
95 lines (84 loc) · 3.28 KB
/
style.css
File metadata and controls
95 lines (84 loc) · 3.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/* DocuMind Frontend — Blue Gradient, Glass UI, ChatGPT-style Ring Loader */
/* fonts: Poppins via system fallback */
:root{
--bg1:#0d47a1;
--bg2:#42a5f5;
--card: rgba(255,255,255,0.12);
--accent1:#00b4db;
--accent2:#0083b0;
--glass-border: rgba(255,255,255,0.18);
--text:#ffffff;
--muted: rgba(255,255,255,0.9);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%}
body{
min-height:100vh;
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background: linear-gradient(135deg,var(--bg1),var(--bg2));
display:flex;
align-items:center;
justify-content:center;
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding:24px;
}
/* Page wrapper */
.page{width:100%;max-width:980px}
/* Card */
.card{
margin:0 auto;
background:var(--card);
backdrop-filter: blur(12px) saturate(120%);
border-radius:20px;
border: 1px solid var(--glass-border);
box-shadow: 0 12px 40px rgba(2,6,23,0.45);
padding:32px;
text-align:center;
animation:cardIn .9s cubic-bezier(.2,.9,.3,1);
}
/* Brand */
.brand{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px}
.logo{width:120px;height:auto;border-radius:12px;object-fit:cover;animation:pulse 2.4s infinite;box-shadow:0 6px 20px rgba(0,0,0,0.25)}
h1{font-size:2.1rem;letter-spacing:0.2px}
.tagline{color:var(--muted);font-size:0.98rem;margin-top:-6px}
/* Controls */
.controls{margin:18px auto;display:flex;gap:12px;align-items:center;justify-content:center}
#uploadBtn{
background: linear-gradient(90deg,var(--accent1),var(--accent2));
color:#fff;padding:12px 22px;border-radius:999px;border:none;font-weight:700;cursor:pointer;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
transition: transform .18s ease, box-shadow .18s ease;
}
#uploadBtn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,0.28)}
#uploadBtn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
/* Loader: ChatGPT-style ring */
.loader{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hidden{display:none !important}
.ring{
width:70px;height:70px;border-radius:50%;
border:6px solid rgba(255,255,255,0.12);
border-top-color: #00e5ff;
border-left-color: rgba(255,255,255,0.12);
animation:spin 0.95s linear infinite;
box-shadow: 0 6px 18px rgba(0,229,255,0.08), inset 0 -6px 18px rgba(0,0,0,0.05);
}
.loader-text{color:var(--muted);font-weight:600}
.loader-dot{display:inline-block;opacity:1;animation:dotPulse 1s steps(3,end) infinite}
/* Result box */
.result{margin-top:18px;background:rgba(255,255,255,0.06);padding:16px;border-radius:12px;color:var(--muted);display:none; text-align:left;}
/* Footer */
.footer{text-align:center;margin-top:18px;color:rgba(255,255,255,0.75);font-size:0.9rem}
/* Animations */
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes dotPulse{0%{opacity:0.2}50%{opacity:1}100%{opacity:0.2}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:0.95}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Responsive */
@media (max-width:520px){
.card{padding:20px}
.logo{width:88px}
h1{font-size:1.6rem}
#uploadBtn{padding:10px 16px}
}