Hugging Face's logo

Spaces:
webml-community
/
RF-DETR-WebGPU
Running

App Files Community
Xenova HF Staff commited on
Commit
c2cfd12
·
verified ·
1 Parent(s): 1f97e39

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +153 -17
style.css CHANGED
@@ -1,28 +1,164 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
  body {
2
+ font-family: system-ui, -apple-system, sans-serif;
3
+ background: #111;
4
+ color: #eee;
5
+ margin: 0;
6
+ display: flex;
7
+ flex-direction: column;
8
+ align-items: center;
9
+ justify-content: center;
10
+ min-height: 100vh;
11
+ padding: 20px;
12
+ box-sizing: border-box;
13
  }
14
 
15
  h1 {
16
+ margin: 0 0 10px 0;
17
+ font-size: 2.2rem;
18
+ font-weight: 500;
19
+ background: linear-gradient(45deg, #60a5fa, #a78bfa);
20
+ -webkit-background-clip: text;
21
+ -webkit-text-fill-color: transparent;
22
+ text-align: center;
23
  }
24
 
25
+ .subtitle {
26
+ margin: 0 0 25px 0;
27
+ font-size: 0.95rem;
28
+ color: #9ca3af;
29
+ text-align: center;
30
+ line-height: 1.5;
31
  }
32
 
33
+ .container {
34
+ position: relative;
35
+ border-radius: 12px;
36
+ overflow: hidden;
37
+ box-shadow: 0 4px 24px rgba(0,0,0,0.5);
38
+ background: #000;
39
+ line-height: 0;
40
+ width: 100%;
41
+ max-width: 640px;
42
+ aspect-ratio: 4/3;
43
  }
44
 
45
+ video {
46
+ display: block;
47
+ width: 100%;
48
+ height: 100%;
49
+ object-fit: cover;
50
+ }
51
+
52
+ canvas {
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ width: 100%;
57
+ height: 100%;
58
+ pointer-events: none;
59
+ }
60
+
61
+ #fps {
62
+ position: absolute;
63
+ top: 12px;
64
+ left: 12px;
65
+ background: rgba(0, 0, 0, 0.6);
66
+ backdrop-filter: blur(4px);
67
+ color: #4ade80;
68
+ padding: 6px 10px;
69
+ border-radius: 6px;
70
+ font-family: monospace;
71
+ font-size: 14px;
72
+ line-height: 1;
73
+ z-index: 10;
74
+ pointer-events: none;
75
+ min-width: 75px;
76
+ text-align: center;
77
+ }
78
+
79
+ #status {
80
+ position: absolute;
81
+ inset: 0;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: center;
85
+ background: rgba(0,0,0,0.85);
86
+ z-index: 20;
87
+ backdrop-filter: blur(8px);
88
+ flex-direction: column;
89
+ gap: 24px;
90
+ transition: opacity 0.3s ease;
91
+ }
92
+
93
+ #status-content {
94
+ text-align: center;
95
+ }
96
+
97
+ #status-text {
98
+ font-size: 1.2em;
99
+ font-weight: bold;
100
+ margin-bottom: 24px;
101
+ }
102
+
103
+ #status-sub {
104
+ font-size: 0.9em;
105
+ color: #aaa;
106
+ }
107
+
108
+ .controls {
109
+ display: flex;
110
+ gap: 15px;
111
+ margin-top: 20px;
112
+ align-items: center;
113
+ background: #222;
114
+ padding: 12px 24px;
115
+ border-radius: 50px;
116
+ border: 1px solid #333;
117
+ }
118
+
119
+ .control-label {
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 10px;
123
+ font-size: 0.9rem;
124
+ }
125
+
126
+ input[type=range] {
127
+ accent-color: #3b82f6;
128
+ cursor: pointer;
129
+ }
130
+
131
+ #thresh-val {
132
+ font-family: monospace;
133
+ width: 3ch;
134
+ }
135
+
136
+ footer {
137
+ margin-top: 30px;
138
+ font-size: 0.8rem;
139
+ color: #666;
140
+ }
141
+
142
+ footer a {
143
+ color: #888;
144
+ text-decoration: none;
145
+ border-bottom: 1px dotted #888;
146
+ transition: color 0.2s;
147
+ }
148
+
149
+ footer a:hover {
150
+ color: #eee;
151
+ }
152
+
153
+ .spinner {
154
+ width: 32px;
155
+ height: 32px;
156
+ border: 3px solid rgba(255,255,255,0.3);
157
+ border-radius: 50%;
158
+ border-top-color: #3b82f6;
159
+ animation: spin 1s ease-in-out infinite;
160
+ }
161
+
162
+ @keyframes spin {
163
+ to { transform: rotate(360deg); }
164
  }