-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbookmarklet.html
More file actions
148 lines (133 loc) · 9.72 KB
/
Copy pathbookmarklet.html
File metadata and controls
148 lines (133 loc) · 9.72 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<title>LIVIA — Bookmarklet</title>
<style>
html { scrollbar-gutter: stable; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #333; min-height: 100vh; display: flex; flex-direction: column; }
.header { background: white; color: #1a5276; padding: 0.8rem 2rem 0.8rem; border-bottom: 1px solid #e8e8e8; }
.header h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.15rem; color: #1a5276; letter-spacing: -0.02em; }
.header h1 .livia { color: #2471A3; font-weight: 700; }
.header .subtitle { font-size: 0.92rem; color: #888; margin-bottom: 0.8rem; font-weight: 400; }
.header-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.header-links a { color: #555; text-decoration: none; font-size: 0.74rem; padding: 0.22rem 0.5rem; border: 1px solid #ddd; border-radius: 6px; transition: all 0.2s; background: #f8f9fa; }
.header-links a:hover { background: #2471A3; color: white; border-color: #2471A3; }
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; flex: 1; }
.card { background: white; border-radius: 14px; padding: 1.6rem 2rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 1.2rem; }
.card h2 { font-size: 1.3rem; color: #1a5276; margin-bottom: 0.4rem; }
.card h3 { font-size: 1rem; color: #1a5276; margin-top: 1rem; margin-bottom: 0.4rem; }
.card p, .card li { font-size: 0.92rem; color: #555; line-height: 1.55; }
.card ul, .card ol { padding-left: 1.4rem; }
.card li { margin-bottom: 0.25rem; }
.bm-row { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 0.5rem; flex-wrap: wrap; }
.bm-link {
display: inline-block; padding: 0.6rem 1.2rem;
background: #2471A3; color: white; border-radius: 10px;
font-weight: 600; font-size: 0.95rem; text-decoration: none;
cursor: grab; user-select: none; transition: background 0.2s;
}
.bm-link:hover { background: #1a5276; }
.bm-link:active { cursor: grabbing; }
.bm-hint { font-size: 0.82rem; color: #888; }
.targets { background: #f8f9fa; border-radius: 8px; padding: 0.8rem 1rem; margin-top: 0.8rem; }
.targets table { width: 100%; font-size: 0.85rem; border-collapse: collapse; }
.targets td { padding: 0.3rem 0.5rem; vertical-align: top; }
.targets td:first-child { color: #1a5276; font-weight: 600; white-space: nowrap; }
.targets td:nth-child(2) { color: #888; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; word-break: break-all; }
.targets td:nth-child(3) { color: #2471A3; font-weight: 600; font-size: 0.85rem; }
.code { background: #f4f6f8; border: 1px solid #e0e6ec; border-radius: 8px; padding: 0.7rem 0.9rem; margin-top: 0.5rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; color: #555; line-height: 1.45; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.note { background: #eaf2f8; border: 1px solid #d4e3f0; border-radius: 8px; padding: 0.7rem 1rem; margin-top: 0.8rem; font-size: 0.85rem; color: #1a5276; }
.footer { text-align: center; padding: 1.5rem 2rem; font-size: 0.8rem; color: #999; }
.footer a { color: #2471A3; text-decoration: none; }
</style>
</head>
<body>
<div class="header">
<div class="container">
<h1><span class="livia">LIVIA</span> — Bookmarklet</h1>
<p class="subtitle">One-click jump from AlphaFold DB or FlyPredictome to the matching LIVIA page</p>
<div class="header-links">
<a href="index.html">Home</a>
<a href="universal.html">Prediction Analysis</a>
<a href="flypredictome.html">FlyPredictome</a>
<a href="ortholog_predictome.html">Ortholog Interactome</a>
<a href="dimer.html">AFDB Dimer</a>
<a href="monomer.html">AFDB Monomer Subdomain</a>
<a href="tutorials.html">Tutorials</a>
<a href="about.html">About</a>
<a href="bookmarklet.html" style="background:#2471A3; color:white; border-color:#2471A3; font-weight:600;" aria-current="page">Bookmarklet ★</a>
<a href="https://github.com/flyark/LIVIA" target="_blank">GitHub</a>
</div>
</div>
</div>
<div class="container">
<div class="card">
<h2>Open in LIVIA</h2>
<p>Drag the blue button below to your browser's bookmarks bar. When you're on an AlphaFold DB entry page or a FlyPredictome details page, click the bookmark and LIVIA will open the matching analysis page automatically.</p>
<div class="bm-row">
<a class="bm-link" title="Drag me to your bookmarks bar"
href="javascript:(function(){var u=location.href,p=location.origin+location.pathname,t=null,m;if(m=u.match(/alphafold\.ebi\.ac\.uk\/entry\/(AF-\d+)/))t='https://flyark.github.io/LIVIA/dimer.html?id='+m[1];else if(m=u.match(/alphafold\.ebi\.ac\.uk\/entry\/(?:AF-)?([A-Z][0-9][A-Z0-9]{3}[0-9](?:[A-Z][A-Z0-9]{2}[0-9])?)/i))t='https://flyark.github.io/LIVIA/monomer.html?id='+m[1].toUpperCase();else if(/flyrnai\.org\/tools\/fly_predictome\/web\/famdb_details_ortho\//.test(u))t='https://flyark.github.io/LIVIA/ortholog_predictome.html?url='+encodeURIComponent(p);else if(/flyrnai\.org\/tools\/fly_predictome\/web\/famdb_details\//.test(u))t='https://flyark.github.io/LIVIA/flypredictome.html?url='+encodeURIComponent(p);if(t)window.open(t,'_blank','noopener');else alert('LIVIA: Unsupported page. Use on an AlphaFold DB entry page (alphafold.ebi.ac.uk/entry/...) or FlyPredictome details page (flyrnai.org/.../famdb_details[_ortho]/...).');})();">Open in LIVIA</a>
<span class="bm-hint">← drag to your bookmarks bar</span>
</div>
<div class="note">If the bookmarks bar isn't visible, enable it with <strong>View → Show Bookmarks Bar</strong> (Chrome / Edge / Safari) or <strong>Ctrl/Cmd+Shift+B</strong>.</div>
</div>
<div class="card">
<h3>Where it works</h3>
<div class="targets">
<table>
<tr>
<td>AlphaFold DB dimer/complex</td>
<td>alphafold.ebi.ac.uk/entry/AF-…</td>
<td>→ AFDB Dimer</td>
</tr>
<tr>
<td>AlphaFold DB monomer</td>
<td>alphafold.ebi.ac.uk/entry/<UniProt></td>
<td>→ AFDB Monomer Subdomain</td>
</tr>
<tr>
<td>FlyPredictome</td>
<td>flyrnai.org/…/famdb_details/…/SET_xxx/</td>
<td>→ FlyPredictome</td>
</tr>
<tr>
<td>FlyPredictome ortholog</td>
<td>flyrnai.org/…/famdb_details_ortho/…/SET_xxx/</td>
<td>→ Ortholog Interactome</td>
</tr>
</table>
</div>
<p style="font-size:0.84rem; color:#888; margin-top:0.6rem;">On any other page the bookmarklet shows a short message and does nothing else.</p>
</div>
<div class="card">
<h3>How to install</h3>
<ol>
<li>Make sure the bookmarks bar is visible.</li>
<li>Drag the <strong>Open in LIVIA</strong> button above onto the bookmarks bar.</li>
<li>Visit an AlphaFold DB entry or FlyPredictome details page.</li>
<li>Click the new bookmark — the tab navigates to the matching LIVIA page.</li>
</ol>
<h3>If drag doesn't work</h3>
<ol>
<li>Right-click the bookmarks bar → <em>Add page</em> (or <em>New bookmark</em>).</li>
<li>Name: anything you like (e.g. <code>LIVIA</code>).</li>
<li>URL: paste the code below.</li>
</ol>
<div class="code">javascript:(function(){var u=location.href,p=location.origin+location.pathname,t=null,m;if(m=u.match(/alphafold\.ebi\.ac\.uk\/entry\/(AF-\d+)/))t='https://flyark.github.io/LIVIA/dimer.html?id='+m[1];else if(m=u.match(/alphafold\.ebi\.ac\.uk\/entry\/(?:AF-)?([A-Z][0-9][A-Z0-9]{3}[0-9](?:[A-Z][A-Z0-9]{2}[0-9])?)/i))t='https://flyark.github.io/LIVIA/monomer.html?id='+m[1].toUpperCase();else if(/flyrnai\.org\/tools\/fly_predictome\/web\/famdb_details_ortho\//.test(u))t='https://flyark.github.io/LIVIA/ortholog_predictome.html?url='+encodeURIComponent(p);else if(/flyrnai\.org\/tools\/fly_predictome\/web\/famdb_details\//.test(u))t='https://flyark.github.io/LIVIA/flypredictome.html?url='+encodeURIComponent(p);if(t)window.open(t,'_blank','noopener');else alert('LIVIA: Unsupported page. Use on an AlphaFold DB entry page (alphafold.ebi.ac.uk/entry/...) or FlyPredictome details page (flyrnai.org/.../famdb_details[_ortho]/...).');})();</div>
<p style="font-size:0.84rem; color:#888; margin-top:0.8rem;">Tested on desktop Chrome. Other browsers (Firefox, Safari, Edge) typically support bookmarklets too, but were not verified.</p>
</div>
</div>
<div class="footer">
<a href="https://github.com/flyark/LIVIA" target="_blank">LIVIA GitHub</a> · <a href="https://github.com/flyark/AFM-LIS" target="_blank">AFM-LIS GitHub</a>
<br>
<a href="https://doi.org/10.64898/2026.05.01.721633" target="_blank">Kim & Perrimon (2026)</a>
<br>
Ah-Ram Kim · Harvard Medical School
</div>
<script data-goatcounter="https://livia.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
</body>
</html>