Skip to content

Commit 46bb0a0

Browse files
aksprasanaksprasan
authored
Merge pull request from AlserLab/Testing
tools folder
2 parents daefb18 + 3c7fc2b commit 46bb0a0

4 files changed

Lines changed: 887 additions & 0 deletions

File tree

‎assets/css/fastrVisualizer.css‎

Lines changed: 388 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,388 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
9+
background: linear-gradient(135deg, #1a3a52 0%, #2d5a7b 100%);
10+
min-height: 100vh;
11+
padding: 20px;
12+
color: #333;
13+
}
14+
15+
.container {
16+
max-width: 1200px;
17+
margin: 0 auto;
18+
background: white;
19+
border-radius: 12px;
20+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
21+
overflow: hidden;
22+
}
23+
24+
.header {
25+
background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
26+
color: white;
27+
padding: 25px 30px;
28+
text-align: center;
29+
}
30+
31+
.header h1 {
32+
font-size: 2em;
33+
margin-bottom: 5px;
34+
font-weight: 700;
35+
letter-spacing: -0.5px;
36+
}
37+
38+
.subtitle {
39+
font-size: 0.95em;
40+
opacity: 0.95;
41+
font-weight: 300;
42+
}
43+
44+
.main-content {
45+
padding: 30px 30px;
46+
}
47+
48+
.section-header {
49+
margin-bottom: 15px;
50+
}
51+
52+
.section-header h2 {
53+
font-size: 1.3em;
54+
color: #333;
55+
margin-bottom: 5px;
56+
font-weight: 600;
57+
}
58+
59+
.help-text {
60+
font-size: 0.9em;
61+
color: #666;
62+
font-weight: 400;
63+
}
64+
65+
.input-section {
66+
margin-bottom: 25px;
67+
}
68+
69+
textarea {
70+
width: 100%;
71+
height: 80px;
72+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
73+
font-size: 14px;
74+
font-weight: 700;
75+
padding: 12px;
76+
border: 2px solid #e0e0e0;
77+
border-radius: 8px;
78+
resize: vertical;
79+
transition: all 0.3s ease;
80+
background: #fafafa;
81+
}
82+
83+
textarea:focus {
84+
outline: none;
85+
border-color: #0066cc;
86+
background: white;
87+
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
88+
}
89+
90+
.ranges-section {
91+
margin-bottom: 25px;
92+
}
93+
94+
.ranges {
95+
display: grid;
96+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
97+
gap: 12px;
98+
}
99+
100+
.range-item {
101+
display: flex;
102+
align-items: center;
103+
gap: 8px;
104+
padding: 12px;
105+
background: #f5f5f5;
106+
border-radius: 8px;
107+
border: 1px solid #e0e0e0;
108+
transition: all 0.3s ease;
109+
font-size: 0.9em;
110+
}
111+
112+
.range-item:hover {
113+
background: #fafafa;
114+
border-color: #0066cc;
115+
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
116+
}
117+
118+
.range-item.fixed {
119+
background: #e6f2ff;
120+
border-color: #0066cc;
121+
}
122+
123+
.base-label {
124+
font-weight: 700;
125+
font-size: 0.95em;
126+
min-width: 28px;
127+
text-align: center;
128+
padding: 4px 8px;
129+
border-radius: 4px;
130+
color: white;
131+
}
132+
133+
/* Color each base label according to visualization colors */
134+
.range-item.fixed .base-label {
135+
background-color: #9e9e9e;
136+
}
137+
138+
.range-item:nth-child(2) .base-label {
139+
background-color: #4caf50;
140+
}
141+
142+
.range-item:nth-child(3) .base-label {
143+
background-color: #2196f3;
144+
}
145+
146+
.range-item:nth-child(4) .base-label {
147+
background-color: #ff9800;
148+
}
149+
150+
.range-item:nth-child(5) .base-label {
151+
background-color: #e91e63;
152+
}
153+
154+
.range-value {
155+
color: #666;
156+
font-size: 0.85em;
157+
}
158+
159+
.range-item input {
160+
width: 65px;
161+
padding: 6px 8px;
162+
border: 1px solid #ddd;
163+
border-radius: 6px;
164+
font-size: 13px;
165+
transition: all 0.3s ease;
166+
}
167+
168+
.range-item input:focus {
169+
outline: none;
170+
border-color: #0066cc;
171+
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
172+
}
173+
174+
.button-container {
175+
display: flex;
176+
justify-content: center;
177+
margin-bottom: 25px;
178+
}
179+
180+
.btn-generate {
181+
padding: 12px 35px;
182+
font-size: 0.95em;
183+
font-weight: 600;
184+
color: white;
185+
background: linear-gradient(135deg, #0066cc 0%, #004499 100%);
186+
border: none;
187+
border-radius: 8px;
188+
cursor: pointer;
189+
transition: all 0.3s ease;
190+
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.4);
191+
}
192+
193+
.btn-generate:hover {
194+
transform: translateY(-2px);
195+
box-shadow: 0 6px 20px rgba(0, 102, 204, 0.6);
196+
}
197+
198+
.btn-generate:active {
199+
transform: translateY(0);
200+
}
201+
202+
.output-section {
203+
margin-top: 20px;
204+
}
205+
206+
pre {
207+
margin-top: 12px;
208+
padding: 12px;
209+
background: #f5f5f5;
210+
border: 1px solid #e0e0e0;
211+
border-radius: 8px;
212+
font-size: 12px;
213+
font-family: 'Courier New', monospace;
214+
overflow-x: auto;
215+
line-height: 1.4;
216+
}
217+
218+
table {
219+
border-collapse: collapse;
220+
margin-top: 15px;
221+
width: 100%;
222+
max-width: 100%;
223+
overflow-x: auto;
224+
}
225+
226+
td {
227+
width: 24px;
228+
height: 24px;
229+
border: 1px solid #ddd;
230+
text-align: center;
231+
font-size: 11px;
232+
font-weight: bold;
233+
transition: all 0.2s ease;
234+
}
235+
236+
td:hover {
237+
transform: scale(1.1);
238+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
239+
}
240+
241+
/* Base colors */
242+
.base-A { background-color: #4caf50; color: #fff; }
243+
.base-C { background-color: #2196f3; color: #fff; }
244+
.base-G { background-color: #ff9800; color: #000; }
245+
.base-T { background-color: #e91e63; color: #fff; }
246+
.base-N { background-color: #9e9e9e; color: #000; }
247+
248+
/* Improved visualization styles */
249+
.improved-viz {
250+
margin-top: 20px;
251+
padding: 15px;
252+
background: linear-gradient(135deg, #f0f4f8 0%, #e0e8f0 100%);
253+
border: 2px solid #0066cc;
254+
border-radius: 8px;
255+
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.15);
256+
}
257+
258+
.improved-viz h3 {
259+
color: #0066cc;
260+
margin-bottom: 10px;
261+
font-size: 1.1em;
262+
font-weight: 600;
263+
}
264+
265+
.viz-header {
266+
font-weight: bold;
267+
margin-bottom: 8px;
268+
font-size: 13px;
269+
color: #333;
270+
padding: 8px;
271+
background: white;
272+
border-radius: 6px;
273+
border-left: 4px solid #0066cc;
274+
}
275+
276+
.viz-row {
277+
display: flex;
278+
font-family: 'Courier New', monospace;
279+
font-size: 15px;
280+
line-height: 1.3;
281+
margin-bottom: 1px;
282+
padding: 4px 8px;
283+
background: white;
284+
border-radius: 4px;
285+
}
286+
287+
.base-row {
288+
margin-bottom: 0;
289+
}
290+
291+
.quality-row {
292+
margin-top: 0;
293+
margin-bottom: 0;
294+
}
295+
296+
.quality-box-row {
297+
margin-top: 0;
298+
}
299+
300+
/* Colored bases as text (no boxes) */
301+
.colored-base {
302+
width: 1ch;
303+
text-align: center;
304+
font-weight: bold;
305+
padding: 0;
306+
margin: 0;
307+
}
308+
309+
.colored-base.base-A { color: #4caf50; }
310+
.colored-base.base-C { color: #2196f3; }
311+
.colored-base.base-G { color: #ff9800; }
312+
.colored-base.base-T { color: #e91e63; }
313+
.colored-base.base-N { color: #9e9e9e; }
314+
315+
/* Quality characters as plain text with hover */
316+
.quality-char-text {
317+
width: 1ch;
318+
text-align: center;
319+
font-weight: normal;
320+
padding: 0;
321+
margin: 0;
322+
cursor: help;
323+
color: #333;
324+
}
325+
326+
/* Quality boxes (reusing Mohammed's liked colored boxes) */
327+
.quality-box {
328+
width: 1ch;
329+
height: 1.2em;
330+
display: inline-block;
331+
text-align: center;
332+
margin: 0;
333+
cursor: help;
334+
border: 1px solid rgba(0,0,0,0.1);
335+
border-radius: 3px;
336+
transition: all 0.2s ease;
337+
color: white;
338+
font-weight: bold;
339+
}
340+
341+
.quality-box:hover {
342+
transform: scale(1.15);
343+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
344+
}
345+
346+
.quality-green { background-color: #4caf50; color: white; }
347+
.quality-orange { background-color: #ff9800; color: white; }
348+
.quality-red { background-color: #f44336; color: white; }
349+
350+
/* Hover tooltip for both quality text and boxes */
351+
.quality-char-text:hover::after,
352+
.quality-box:hover::after {
353+
content: attr(data-accuracy) '%';
354+
position: absolute;
355+
bottom: 100%;
356+
left: 50%;
357+
transform: translateX(-50%);
358+
background: #333;
359+
color: white;
360+
padding: 5px 10px;
361+
border-radius: 4px;
362+
font-size: 12px;
363+
white-space: nowrap;
364+
z-index: 1000;
365+
margin-bottom: 5px;
366+
font-weight: 600;
367+
}
368+
369+
.quality-char-text:hover::before,
370+
.quality-box:hover::before {
371+
content: '';
372+
position: absolute;
373+
bottom: 100%;
374+
left: 50%;
375+
transform: translateX(-50%);
376+
border: 5px solid transparent;
377+
border-top-color: #333;
378+
z-index: 1000;
379+
}
380+
381+
.footer {
382+
background: #f5f5f5;
383+
padding: 12px;
384+
text-align: center;
385+
color: #999;
386+
font-size: 0.85em;
387+
border-top: 1px solid #e0e0e0;
388+
}

0 commit comments

Comments
 (0)