Hugging Face's logo

Spaces:
Devashishraghav
/
CardProcessor-Pro
Build error

App Files Community
Devashishraghav commited on
Commit
ddf3552
·
verified ·
1 Parent(s): 72b5dbe

Upload static/style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. static/style.css +202 -0
static/style.css ADDED
@@ -0,0 +1,202 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --bg-color: #0f172a;
3
+ --surface-color: #1e293b;
4
+ --text-primary: #f8fafc;
5
+ --text-secondary: #94a3b8;
6
+ --accent-color: #3b82f6;
7
+ --accent-hover: #2563eb;
8
+ --border-color: #334155;
9
+ --success-color: #10b981;
10
+ --radius: 12px;
11
+ }
12
+
13
+ * {
14
+ box-sizing: border-box;
15
+ margin: 0;
16
+ padding: 0;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Inter', sans-serif;
21
+ background-color: var(--bg-color);
22
+ color: var(--text-primary);
23
+ line-height: 1.6;
24
+ min-height: 100vh;
25
+ display: flex;
26
+ justify-content: center;
27
+ align-items: center;
28
+ background-image: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 400px),
29
+ radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.1), transparent 400px);
30
+ }
31
+
32
+ .container {
33
+ width: 100%;
34
+ max-width: 800px;
35
+ padding: 2rem;
36
+ background: rgba(30, 41, 59, 0.7);
37
+ backdrop-filter: blur(16px);
38
+ -webkit-backdrop-filter: blur(16px);
39
+ border: 1px solid var(--border-color);
40
+ border-radius: var(--radius);
41
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
42
+ }
43
+
44
+ header {
45
+ text-align: center;
46
+ margin-bottom: 2.5rem;
47
+ }
48
+
49
+ h1 {
50
+ font-size: 2.5rem;
51
+ font-weight: 800;
52
+ letter-spacing: -0.05em;
53
+ margin-bottom: 0.5rem;
54
+ }
55
+
56
+ .highlight {
57
+ color: var(--accent-color);
58
+ }
59
+
60
+ header p {
61
+ color: var(--text-secondary);
62
+ font-size: 1.1rem;
63
+ }
64
+
65
+ .drop-zone {
66
+ border: 2px dashed var(--border-color);
67
+ border-radius: var(--radius);
68
+ padding: 4rem 2rem;
69
+ text-align: center;
70
+ cursor: pointer;
71
+ transition: all 0.3s ease;
72
+ background: rgba(51, 65, 85, 0.2);
73
+ }
74
+
75
+ .drop-zone:hover, .drop-zone.dragover {
76
+ border-color: var(--accent-color);
77
+ background: rgba(59, 130, 246, 0.05);
78
+ }
79
+
80
+ .upload-icon {
81
+ color: var(--accent-color);
82
+ margin-bottom: 1rem;
83
+ transition: transform 0.3s ease;
84
+ }
85
+
86
+ .drop-zone:hover .upload-icon {
87
+ transform: translateY(-5px);
88
+ }
89
+
90
+ .drop-text {
91
+ font-size: 1.2rem;
92
+ color: var(--text-secondary);
93
+ }
94
+
95
+ .drop-text span {
96
+ color: var(--accent-color);
97
+ font-weight: 600;
98
+ }
99
+
100
+ .hidden {
101
+ display: none !important;
102
+ }
103
+
104
+ .file-list {
105
+ margin-top: 2rem;
106
+ }
107
+
108
+ .file-list h3 {
109
+ margin-bottom: 1rem;
110
+ font-weight: 600;
111
+ }
112
+
113
+ #files-preview {
114
+ list-style: none;
115
+ display: grid;
116
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
117
+ gap: 1rem;
118
+ margin-bottom: 2rem;
119
+ }
120
+
121
+ #files-preview li {
122
+ background: var(--surface-color);
123
+ padding: 0.5rem;
124
+ border-radius: 8px;
125
+ font-size: 0.8rem;
126
+ color: var(--text-secondary);
127
+ overflow: hidden;
128
+ text-overflow: ellipsis;
129
+ white-space: nowrap;
130
+ border: 1px solid var(--border-color);
131
+ text-align: center;
132
+ }
133
+
134
+ .primary-btn, .secondary-btn {
135
+ display: inline-block;
136
+ width: 100%;
137
+ padding: 1rem;
138
+ border: none;
139
+ border-radius: 8px;
140
+ font-size: 1.1rem;
141
+ font-weight: 600;
142
+ cursor: pointer;
143
+ text-align: center;
144
+ transition: all 0.3s ease;
145
+ }
146
+
147
+ .primary-btn {
148
+ background: var(--accent-color);
149
+ color: white;
150
+ }
151
+
152
+ .primary-btn:hover {
153
+ background: var(--accent-hover);
154
+ transform: translateY(-2px);
155
+ box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4);
156
+ }
157
+
158
+ .secondary-btn {
159
+ background: var(--surface-color);
160
+ color: var(--text-primary);
161
+ border: 1px solid var(--border-color);
162
+ margin-top: 1rem;
163
+ }
164
+
165
+ .secondary-btn:hover {
166
+ background: var(--border-color);
167
+ }
168
+
169
+ .loading-state, .result-state {
170
+ text-align: center;
171
+ padding: 3rem 0;
172
+ }
173
+
174
+ .spinner {
175
+ width: 50px;
176
+ height: 50px;
177
+ border: 4px solid var(--border-color);
178
+ border-top-color: var(--accent-color);
179
+ border-radius: 50%;
180
+ animation: spin 1s linear infinite;
181
+ margin: 0 auto 1.5rem auto;
182
+ }
183
+
184
+ @keyframes spin {
185
+ to { transform: rotate(360deg); }
186
+ }
187
+
188
+ .result-state h3 {
189
+ color: var(--success-color);
190
+ font-size: 1.8rem;
191
+ margin-bottom: 0.5rem;
192
+ }
193
+
194
+ .result-state p {
195
+ color: var(--text-secondary);
196
+ margin-bottom: 2rem;
197
+ }
198
+
199
+ .download-btn {
200
+ text-decoration: none;
201
+ margin-bottom: 1rem;
202
+ }