Hugging Face's logo

Spaces:
ivanoctaviogaitansantos
/
space-l7wrp66b
Running

App Files Community
ivanoctaviogaitansantos commited on
Commit
07aea47
路
verified 路
1 Parent(s): d369456

Upload style.css with huggingface_hub

Browse files
Files changed (1) hide show
  1. style.css +192 -46
style.css CHANGED
@@ -1,76 +1,222 @@
 
1
  * {
2
- box-sizing: border-box;
3
- padding: 0;
4
  margin: 0;
5
- font-family: sans-serif;
 
6
  }
7
 
8
- html,
9
  body {
10
- height: 100%;
 
 
 
 
 
11
  }
12
 
13
- body {
14
- padding: 32px;
 
 
 
 
 
15
  }
16
 
17
- body,
18
- #container {
 
 
19
  display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
  align-items: center;
 
23
  }
24
 
25
- #container {
26
- position: relative;
27
- gap: 0.4rem;
 
 
 
28
 
29
- width: 640px;
30
- height: 640px;
31
- max-width: 100%;
32
- max-height: 100%;
33
 
34
- border: 2px dashed #D1D5DB;
35
- border-radius: 0.75rem;
36
- overflow: hidden;
37
- cursor: pointer;
38
- margin: 1rem;
39
 
40
- background-size: 100% 100%;
41
- background-position: center;
42
- background-repeat: no-repeat;
43
- font-size: 18px;
 
 
44
  }
45
 
46
- #upload {
47
- display: none;
 
 
48
  }
49
 
50
- svg {
51
- pointer-events: none;
 
 
 
52
  }
53
 
54
- #example {
55
- font-size: 14px;
56
- text-decoration: underline;
57
- cursor: pointer;
58
  }
59
 
60
- #example:hover {
61
- color: #2563EB;
 
 
 
62
  }
63
 
64
- .bounding-box {
65
- position: absolute;
66
- box-sizing: border-box;
67
- border: solid 2px;
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  }
69
 
70
- .bounding-box-label {
 
 
 
 
 
 
 
 
71
  color: white;
72
- position: absolute;
73
- font-size: 12px;
74
- margin: -16px 0 0 -2px;
75
- padding: 1px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  }
 
1
+ /* style.css */
2
  * {
 
 
3
  margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
  }
7
 
 
8
  body {
9
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ line-height: 1.6;
11
+ color: #333;
12
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
13
+ min-height: 100vh;
14
+ padding: 20px;
15
  }
16
 
17
+ header {
18
+ background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
19
+ color: white;
20
+ padding: 1rem 0;
21
+ border-radius: 10px;
22
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
+ margin-bottom: 2rem;
24
  }
25
 
26
+ .header-content {
27
+ max-width: 1200px;
28
+ margin: 0 auto;
29
+ padding: 0 20px;
30
  display: flex;
31
+ justify-content: space-between;
 
32
  align-items: center;
33
+ flex-wrap: wrap;
34
  }
35
 
36
+ .anycoder-link {
37
+ color: #ffdd40;
38
+ text-decoration: none;
39
+ font-weight: bold;
40
+ font-size: 0.9rem;
41
+ }
42
 
43
+ .anycoder-link:hover {
44
+ text-decoration: underline;
45
+ }
 
46
 
47
+ h1 {
48
+ font-size: 1.8rem;
49
+ font-weight: 600;
50
+ }
 
51
 
52
+ .container {
53
+ max-width: 1200px;
54
+ margin: 0 auto;
55
+ display: grid;
56
+ grid-template-columns: 1fr 1fr;
57
+ gap: 2rem;
58
  }
59
 
60
+ @media (max-width: 768px) {
61
+ .container {
62
+ grid-template-columns: 1fr;
63
+ }
64
  }
65
 
66
+ .controls {
67
+ background: white;
68
+ padding: 1.5rem;
69
+ border-radius: 10px;
70
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
71
  }
72
 
73
+ .model-selector, .device-toggle {
74
+ margin-bottom: 1.5rem;
 
 
75
  }
76
 
77
+ label {
78
+ display: block;
79
+ margin-bottom: 0.5rem;
80
+ font-weight: 600;
81
+ color: #4f46e5;
82
  }
83
 
84
+ select, textarea {
85
+ width: 100%;
86
+ padding: 0.75rem;
87
+ border: 1px solid #d1d5db;
88
+ border-radius: 6px;
89
+ font-size: 1rem;
90
+ transition: border-color 0.3s;
91
+ }
92
+
93
+ select:focus, textarea:focus {
94
+ outline: none;
95
+ border-color: #4f46e5;
96
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
97
+ }
98
+
99
+ .input-section {
100
+ margin-top: 1.5rem;
101
  }
102
 
103
+ textarea {
104
+ min-height: 150px;
105
+ resize: vertical;
106
+ margin-bottom: 1rem;
107
+ font-family: inherit;
108
+ }
109
+
110
+ button {
111
+ background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
112
  color: white;
113
+ border: none;
114
+ padding: 0.75rem 1.5rem;
115
+ border-radius: 6px;
116
+ cursor: pointer;
117
+ font-size: 1rem;
118
+ font-weight: 600;
119
+ transition: transform 0.2s, box-shadow 0.2s;
120
+ }
121
+
122
+ button:hover {
123
+ transform: translateY(-2px);
124
+ box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
125
+ }
126
+
127
+ button:active {
128
+ transform: translateY(0);
129
+ }
130
+
131
+ .output-section {
132
+ background: white;
133
+ padding: 1.5rem;
134
+ border-radius: 10px;
135
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
136
+ }
137
+
138
+ .output-section h3 {
139
+ color: #4f46e5;
140
+ margin-bottom: 1rem;
141
+ font-size: 1.2rem;
142
+ }
143
+
144
+ .output-container {
145
+ min-height: 200px;
146
+ background: #f9fafb;
147
+ border: 1px solid #e5e7eb;
148
+ border-radius: 6px;
149
+ padding: 1rem;
150
+ overflow-wrap: break-word;
151
+ }
152
+
153
+ .placeholder {
154
+ color: #9ca3af;
155
+ font-style: italic;
156
+ }
157
+
158
+ .loading {
159
+ color: #4f46e5;
160
+ font-weight: 600;
161
+ text-align: center;
162
+ padding: 2rem 0;
163
+ }
164
+
165
+ .error {
166
+ color: #ef4444;
167
+ font-weight: 600;
168
+ padding: 1rem;
169
+ background: #fef2f2;
170
+ border-radius: 6px;
171
+ border-left: 4px solid #ef4444;
172
+ }
173
+
174
+ .output-container h4 {
175
+ color: #4f46e5;
176
+ margin: 0 0 1rem 0;
177
+ font-size: 1.1rem;
178
+ }
179
+
180
+ .output-container ul {
181
+ list-style: none;
182
+ padding-left: 0;
183
+ }
184
+
185
+ .output-container li {
186
+ background: #f3f4f6;
187
+ margin-bottom: 0.5rem;
188
+ padding: 0.75rem;
189
+ border-radius: 6px;
190
+ border-left: 4px solid #4f46e5;
191
+ }
192
+
193
+ footer {
194
+ text-align: center;
195
+ margin-top: 2rem;
196
+ color: #6b7280;
197
+ font-size: 0.9rem;
198
+ }
199
+
200
+ @media (max-width: 768px) {
201
+ body {
202
+ padding: 10px;
203
+ }
204
+
205
+ h1 {
206
+ font-size: 1.5rem;
207
+ }
208
+
209
+ .header-content {
210
+ flex-direction: column;
211
+ gap: 10px;
212
+ text-align: center;
213
+ }
214
+
215
+ .container {
216
+ gap: 1rem;
217
+ }
218
+
219
+ .controls, .output-section {
220
+ padding: 1rem;
221
+ }
222
  }