ocr/app.css at main · altrudev/ocr · GitHub

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --coral: #FF6B6B;
  --teal: #2EC4B6;
  --navy: #0F1923;
  --navy-light: #1A2734;
  --navy-lighter: #243447;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--navy);
  color: #e8e8e8;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* ── Header ── */
.header {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 0.75rem 1rem;
}
.header-inner {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-group { display: flex; align-items: center; gap: 0.75rem; }
.logo-icon {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--coral), var(--teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: white;
}
.logo-text h1 { font-size: 1rem; font-weight: 600; line-height: 1.2; }
.logo-text p { font-size: 0.65rem; color: var(--teal); opacity: 0.7; }

.mode-toggle {
  display: flex; background: var(--navy-lighter); border-radius: 0.5rem; padding: 2px;
}
.mode-btn {
  padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500;
  border-radius: 0.375rem; border: none; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.4); transition: all 0.2s;
}
.mode-btn.active { background: rgba(46,196,182,0.2); color: var(--teal); }
.mode-btn:hover:not(.active) { color: rgba(255,255,255,0.6); }

/* ── Main ── */
.main { max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem; }

/* ── Glass panels ── */
.glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
}

/* ── Presets ── */
.presets { display: flex; align-items: center; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 1rem; }
.presets-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.3); white-space: nowrap; }
.preset-btn {
  padding: 0.25rem 0.75rem; font-size: 0.75rem; border-radius: 9999px;
  white-space: nowrap; border: 1px solid rgba(255,255,255,0.05);
  background: transparent; color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.2s;
}
.preset-btn:hover { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); }
.preset-btn.active { background: rgba(46,196,182,0.2); color: var(--teal); border-color: rgba(46,196,182,0.3); }

/* ── Upload zone ── */
.upload-zone {
  padding: 3rem 2rem; text-align: center; cursor: pointer; transition: all 0.2s; margin-bottom: 1rem;
}
.upload-zone:hover { border-color: rgba(255,255,255,0.15); }
.upload-zone.dragging { border-color: rgba(46,196,182,0.5); background: rgba(46,196,182,0.05); }
.upload-zone input { display: none; }
.upload-icon {
  width: 3rem; height: 3rem; margin: 0 auto 0.75rem; border-radius: 50%;
  background: var(--navy-lighter); display: flex; align-items: center; justify-content: center;
}
.upload-zone p { font-size: 0.875rem; color: rgba(255,255,255,0.7); font-weight: 500; }
.upload-zone .subtext { font-size: 0.75rem; color: rgba(255,255,255,0.3); margin-top: 0.375rem; }

/* ── Camera ── */
.camera-start { padding: 3rem 2rem; text-align: center; cursor: pointer; margin-bottom: 1rem; }
.camera-start:hover { background: rgba(255,255,255,0.02); }
.cam-icon {
  width: 3rem; height: 3rem; margin: 0 auto 0.75rem; border-radius: 50%;
  background: var(--navy-lighter); display: flex; align-items: center; justify-content: center;
}
.camera-active { position: relative; overflow: hidden; margin-bottom: 1rem; }
.camera-active video { width: 100%; max-height: 20rem; object-fit: cover; background: black; display: block; }
.camera-controls {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.cam-btn-sm {
  width: 2rem; height: 2rem; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.cam-btn-sm:hover { background: rgba(255,255,255,0.2); }
.cam-btn-sm svg { width: 1rem; height: 1rem; color: white; }
.shutter-btn {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; border: none; cursor: pointer;
  background: white; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: all 0.15s;
}
.shutter-btn:hover { background: rgba(255,255,255,0.9); }
.shutter-btn:active { transform: scale(0.95); }
.shutter-ring { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--navy); }

/* ── Progress ── */
.progress-bar { margin-bottom: 1rem; padding: 1rem; }
.progress-bar .meta { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.progress-bar .meta span { font-size: 0.75rem; font-family: monospace; }
.progress-bar .meta .label { color: rgba(255,255,255,0.6); }
.progress-bar .meta .pct { color: var(--teal); }
.progress-track { height: 4px; background: var(--navy-lighter); border-radius: 2px; overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 2px; transition: width 0.3s ease-out;
  background: linear-gradient(90deg, var(--teal), var(--coral));
}

/* ── Error ── */
.error-msg {
  padding: 1rem; margin-bottom: 1rem; border-radius: 0.75rem;
  background: rgba(255,107,107,0.05); border: 1px solid rgba(255,107,107,0.3);
  font-size: 0.875rem; color: var(--coral);
}

/* ── Results layout ── */
.results-grid { display: grid; gap: 1rem; }
.results-grid.has-result { grid-template-columns: 1fr 1fr; }
@media (max-width: 48rem) { .results-grid.has-result { grid-template-columns: 1fr; } }

/* ── Preview ── */
.preview img { width: 100%; max-height: 20rem; object-fit: contain; background: rgba(0,0,0,0.2); display: block; border-radius: 0.75rem; }

/* ── Result panel ── */
.result-panel { display: flex; flex-direction: column; max-height: 37.5rem; }
.result-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }
.tab-btn {
  flex: 1; padding: 0.625rem; font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; border: none; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.3); transition: color 0.2s;
  border-bottom: 2px solid transparent;
}
.tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }
.tab-btn:hover:not(.active) { color: rgba(255,255,255,0.5); }

.result-content { flex: 1; overflow-y: auto; padding: 1rem; }
.result-text { white-space: pre-wrap; font-family: monospace; font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.8); }

.region-card {
  padding: 0.75rem; border-radius: 0.5rem; margin-bottom: 0.5rem;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
}
.region-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.region-badge {
  font-size: 0.6rem; padding: 0.1em 0.5em; border-radius: 9999px;
  text-transform: uppercase; font-weight: 500;
}
.badge-heading { background: rgba(255,107,107,0.2); color: var(--coral); }
.badge-paragraph { background: rgba(46,196,182,0.2); color: var(--teal); }
.badge-caption { background: rgba(255,200,50,0.2); color: #ffc832; }
.badge-header, .badge-footer { background: rgba(150,150,255,0.2); color: #9696ff; }
.badge-unknown { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.region-order { font-size: 0.6rem; color: rgba(255,255,255,0.3); }
.region-conf { font-size: 0.6rem; margin-left: auto; }
.conf-high { color: var(--teal); }
.conf-mid { color: #ffc832; }
.conf-low { color: var(--coral); }
.region-text { font-family: monospace; font-size: 0.85rem; color: rgba(255,255,255,0.7); }

.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; font-size: 0.875rem; }
.meta-label { color: rgba(255,255,255,0.4); }
.meta-value { color: rgba(255,255,255,0.7); font-family: monospace; }
.meta-value.highlight { color: var(--coral); }

.result-actions {
  border-top: 1px solid rgba(255,255,255,0.05); padding: 0.75rem;
  display: flex; gap: 0.5rem; flex-shrink: 0;
}
.btn-primary {
  flex: 1; padding: 0.625rem; border: none; border-radius: 0.5rem; cursor: pointer;
  font-size: 0.75rem; font-weight: 500; background: var(--coral); color: white;
  transition: all 0.2s;
}
.btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(255,107,107,0.2); }
.btn-primary:active { transform: scale(0.98); }

/* ── Footer ── */
.footer { text-align: center; font-size: 0.65rem; color: rgba(255,255,255,0.2); padding: 2rem 0 1rem; }

/* ── Status indicator ── */
.status-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 0.375rem;
}
.status-dot.idle { background: rgba(255,255,255,0.3); }
.status-dot.loading { background: var(--teal); animation: pulse 1s infinite; }
.status-dot.ready { background: var(--teal); }
.status-dot.processing { background: var(--coral); animation: pulse 0.5s infinite; }
.status-dot.error { background: var(--coral); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }