1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+
5+ < meta charset ="UTF-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < title > FASTR Sequence Visualization</ title >
8+ < link rel ="stylesheet " href ="../../../assets/css/fastrVisualizer.css ">
9+ </ head >
10+ < body >
11+ < div class ="container ">
12+ < header class ="header ">
13+ < h1 > FASTR Sequence Visualization</ h1 >
14+ < p class ="subtitle "> Analyze genomic sequences with quality scoring</ p >
15+ </ header >
16+
17+ < main class ="main-content ">
18+ < section class ="input-section ">
19+ < div class ="section-header ">
20+ < h2 > Input Sequence</ h2 >
21+ < p class ="help-text "> Format: Header line starting with @ followed by 8-bit values (000–255)</ p >
22+ </ div >
23+
24+ < textarea id ="sequenceInput " placeholder ="@SRR4343242342.1 003066129192255128191064032096160224 "> @SRR4343242342.1
25+ 003066129192255128191064032096160224</ textarea >
26+ </ section >
27+
28+ < section class ="ranges-section ">
29+ < div class ="section-header ">
30+ < h2 > Base Range Configuration</ h2 >
31+ < p class ="help-text "> Define the value ranges for each nucleotide base</ p >
32+ </ div >
33+
34+ < div class ="ranges ">
35+ < div class ="range-item fixed ">
36+ < span class ="base-label "> N</ span >
37+ < span class ="range-value "> 0–2 & 254–255 (fixed)</ span >
38+ </ div >
39+ < div class ="range-item ">
40+ < span class ="base-label "> A</ span >
41+ < input id ="Amin " value ="3 " type ="number "> –
42+ < input id ="Amax " value ="65 " type ="number ">
43+ </ div >
44+ < div class ="range-item ">
45+ < span class ="base-label "> C</ span >
46+ < input id ="Cmin " value ="66 " type ="number "> –
47+ < input id ="Cmax " value ="128 " type ="number ">
48+ </ div >
49+ < div class ="range-item ">
50+ < span class ="base-label "> G</ span >
51+ < input id ="Gmin " value ="129 " type ="number "> –
52+ < input id ="Gmax " value ="191 " type ="number ">
53+ </ div >
54+ < div class ="range-item ">
55+ < span class ="base-label "> T</ span >
56+ < input id ="Tmin " value ="192 " type ="number "> –
57+ < input id ="Tmax " value ="253 " type ="number ">
58+ </ div >
59+ </ div >
60+ </ section >
61+
62+ < div class ="button-container ">
63+ < button class ="btn-generate " onclick ="generateImage() "> Generate Visualization</ button >
64+ </ div >
65+
66+ < div id ="output " class ="output-section "> </ div >
67+ </ main >
68+
69+ < footer class ="footer ">
70+ < p > FASTR Sequence Visualization Tool • Genomic Analysis</ p >
71+ </ footer >
72+ </ div >
73+
74+ < script src ="../../../assets/js/fastrVisualizer.js "> </ script >
75+ </ body >
76+ </ html >
0 commit comments