-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathall.html
157 lines (147 loc) · 5.53 KB
/
all.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AMP Library | B-AMP</title>
<link rel="icon" type="image/x-icon" href="./static/images/favicon.ico">
<link rel="stylesheet" href="static/css/style.css" />
</head>
<body style="height: 100%">
<nav>
<h1 id="siteTitle">B-AMP</h1>
<section id="navLinksSection">
<a href="index.html"><h3>Home</h3></a>
<h3 id="currentPage">AMP Library</h3>
<a href="anti_gram_positive.html"><h3>Anti Gram Positive AMPs</h3></a>
<a href="anti_gram_negative.html"><h3>Anti Gram Negative AMPs</h3></a>
<a href="targets.html"><h3>Biofilm Targets</h3></a>
<a href="docked_single.html"><h3>AMPs Docked to Single Biofilm Target</h3></a>
<a href="docked_dual.html"><h3>AMPs Docked to Dual Biofilm Targets</h3></a>
<a href="code.html"><h3>Code</h3></a>
<a href="references.html"><h3>References</h3></a>
</section>
</nav>
<div class="bubbleWrap">
<section class="helpBubble">
<p>
B-AMP is an easy search facility for AMPs, using PEP ID, DRAMP ID,
or name of the AMP, across a structural and functional library of 5766
AMPs. Each card for a particular AMP contains its own FASTA file, PDB
structure file and model image, and PubMed annotations, which can be
downloaded by clicking on the respective icons. Please click on the
<strong>SHOW HELP</strong> button for specific instructions and the image legend.
<br />
<br />
<a
style="color: white"
target="_blank"
data-goatcounter-title="(REDIRECT) All Peptides Reference Sheet"
href="static/pdf/reference_sheets/B-AMP_All_Peptides_ReferenceSheet.pdf"
>
Reference sheet for AMP Library
</a>
<br />
<a
style="color: white"
target="_blank"
data-goatcounter-title="(REDIRECT) PubMed Biofilm Literature"
href="static/pdf/reference_sheets/B-AMPs_PubMed_Biofilm_literature.pdf"
>
PubMed Biofilm Literature
</a>
<br />
<a
style="color: white"
target="_blank"
data-goatcounter-title="(REDIRECT) PubMed Biofilm Literature Count"
href="static/pdf/reference_sheets/B-AMPs_PubMed_Biofilm_literature_count.pdf"
>
PubMed Biofilm Literature Count
</a>
<br />
</p>
</section>
</div>
<section id="search">
<input
type="text"
name="dramp_id"
id="searchBox"
placeholder="frogs, bacteriocin, DRAMP/Pep ID"
spellcheck="false"
autofocus
/>
<button id="toggleHelpButton" onclick="showHelpOverlay()">💡 SHOW HELP</button>
</section>
<section id="errorsConsole"></section>
<div style="display: flex; justify-content: center; align-items: center">
<h4 class="resultsToast" id="resultsCount" style="visibility: hidden"></h4>
</div>
<main id="drampCards"></main>
<section id="paginationButtons">
<button class="paginationButton" id="prevButton" style="visibility: hidden;" onclick="renderPrev()">< PREV</button>
<button class="paginationButton" id="nextButton" style="visibility: hidden;" onclick="renderNext()">NEXT ></button>
</section>
<section id="helpOverlay" class="overlay">
<div style="display: flex; justify-content: flex-end; width: 95%">
<img
src="static/icons/close.png"
alt="close-icon"
width="32"
onclick="hideHelpOverlay()"
id="closeHelpButton"
/>
</div>
<h1>SEARCH LIKE A PRO</h1>
<p style="margin: 10px 50px; text-align: center">
⚡ Search for a peptide by any part of its name:
<span class="mono">raphanus sativus</span> or <span class="mono">frogs</span>
<br />
⚡ Search for a peptide by its DRAMP or PEP ID:
<span class="mono">DRAMP01472</span> or <span class="mono">PEP1217</span>
<br />
⚡ Search for a range of peptides by their PEP IDs:
<span class="mono">PEP12-25</span>
<br />
⚡ Add commas for running multiple searches:
<span class="mono">DRAMP01472, PEP1217, PEP12-25</span>
</p>
<hr style="width: 50%; border-color: #ddd; margin: 15px 0px" />
<h1>LEGEND</h1>
<p>
Each card in the search results is color-coded as per the activity exhibited by that
peptide.
</p>
<section id="legends">
<span class="legend antiGramPositive">Anti-Gram Positive</span>
<span class="legend antiGramNegative">Anti-Gram Negative</span>
<span class="legend bothActivities">Anti-Gram Positive & Negative</span>
<span class="legend otherActivity">
Other Activity <br />
<p style="font-size: 0.7em">(Non anti-bacterial)</p>
</span>
</section>
</section>
<section id="disclaimerFooter" style="position: fixed; bottom: 0; width: 100%">
Peptides were modeled using: <br />
a) PEP-FOLD3 for peptides of length <50 amino acids. <br />
b) Robetta for peptides of length >50 amino acids. <br />
c) PEP-FOLD3 for peptides containing undetermined ‘X’ amino acids.
</section>
<script src="static/js/pep_to_dramp_index.js"></script>
<script src="static/js/dramp_to_pep_index.js"></script>
<script src="static/js/pep_to_activity_and_name_index.js"></script>
<script src="static/js/text_to_pep_index.js"></script>
<script src="static/js/search.js"></script>
<script src="static/js/paginate.js"></script>
<script src="static/js/pep_pubmed_mapping.json"></script>
<script src="static/js/view.js"></script>
<script
data-goatcounter="https://b-amp.goatcounter.com/count"
async
src="//gc.zgo.at/count.js"
></script>
</body>
</html>