PageSourceSearch

https://structbioinfo-intelligent-ligand-preparation.hf.space/

html structbioinfo-intelligent-ligand-preparation.hf.space collected 2026-10-03 17:24:48 UTC 27,892 bytes, 672 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8"/>
5  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6  <title>IntelligentLigPrep</title>
7  <meta name="description" content="A Web-Based Platform for Automated Ligand Preparation and AI-Assisted Physicochemical Profiling for Docking Workflows"/>
8  <link rel="preconnect" href="https://fonts.googleapis.com"/>
9  <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
10  
10<script src="https://3dmol.org/build/3Dmol-min.js"></script>
10
11  
11<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
11
12  <link rel="stylesheet" href="/static/style.css"/>
13</head>
14<body>
15
16<!-- ═══ NAV ══════════════════════════════════════════════════ -->
17<nav class="nav" id="top">
18  <div class="nav-inner">
19    <a href="#" class="nav-logo">
20      <span class="logo-hex">💊</span>
21      <span>IntelligentLigPrep</span>
22    </a>
23    <div class="nav-links">
24      <a href="#tool">Tool</a>
25      <a href="#docs">Docs</a>
26      <a href="#contact">Contact</a>
27    </div>
28  </div>
29</nav>
30
31<!-- ═══ HERO ══════════════════════════════════════════════════ -->
32<section class="hero" id="about">
33  <div class="hero-bg">
34    <div class="hero-grid"></div>
35    <div class="hero-blob blob-1"></div>
36    <div class="hero-blob blob-2"></div>
37  </div>
38    <div class="hero-content">
39
40  <h1 class="hero-title">
41    <span class="title-accent">IntelligentLigPrep</span>
42  </h1>
43
44  <div class="hero-sub">
45    A Web-Based Platform for Automated Ligand Preparation and AI-Assisted Physicochemical Profiling for Docking Workflows 
46  </div>
47
48</div>
49  <div class="hero-molecule" aria-hidden="true">
50    <svg viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" class="mol-svg">
51      <circle cx="200" cy="200" r="190" stroke="rgba(99,153,34,0.07)" stroke-width="1"/>
52      <circle cx="200" cy="200" r="130" stroke="rgba(99,153,34,0.1)" stroke-width="1"/>
53      <line x1="200" y1="200" x2="270" y2="148" stroke="rgba(99,153,34,0.5)" stroke-width="2"/>
54      <line x1="200" y1="200" x2="270" y2="252" stroke="rgba(99,153,34,0.5)" stroke-width="2"/>
55      <line x1="200" y1="200" x2="130" y2="148" stroke="rgba(99,153,34,0.5)" stroke-width="2"/>
56      <line x1="200" y1="200" x2="130" y2="252" stroke="rgba(99,153,34,0.5)" stroke-width="2"/>
57      <line x1="200" y1="200" x2="200" y2="108" stroke="rgba(99,153,34,0.5)" stroke-width="2"/>
58      <line x1="270" y1="148" x2="338" y2="138" stroke="rgba(99,153,34,0.3)" stroke-width="1.5"/>
59      <line x1="270" y1="252" x2="338" y2="262" stroke="rgba(99,153,34,0.3)" stroke-width="1.5"/>
60      <line x1="130" y1="148" x2="62"  y2="138" stroke="rgba(99,153,34,0.3)" stroke-width="1.5"/>
61      <line x1="130" y1="252" x2="62"  y2="262" stroke="rgba(99,153,34,0.3)" stroke-width="1.5"/>
62      <line x1="200" y1="108" x2="200" y2="58"  stroke="rgba(29,158,117,0.4)" stroke-width="1.5"/>
63      <circle cx="200" cy="200" r="14" fill="#1D9E75" opacity="0.9"/><text x="200" y="205" text-anchor="middle" fill="white" font-size="10" font-family="DM Mono" font-weight="500">C</text>
64      <circle cx="270" cy="148" r="12" fill="#639922" opacity="0.85"/><text x="270" y="153" text-anchor="middle" fill="white" font-size="9" font-family="DM Mono">N</text>
65      <circle cx="270" cy="252" r="12" fill="#639922" opacity="0.85"/><text x="270" y="257" text-anchor="middle" fill="white" font-size="9" font-family="DM Mono">C</text>
66      <circle cx="130" cy="148" r="12" fill="#1D9E75" opacity="0.85"/><text x="130" y="153" text-anchor="middle" fill="white" font-size="9" font-family="DM Mono">O</text>
67      <circle cx="130" cy="252" r="12" fill="#639922" opacity="0.75"/><text x="130" y="257" text-anchor="middle" fill="white" font-size="9" font-family="DM Mono">C</text>
68      <circle cx="200" cy="108" r="10" fill="#0F6E56" opacity="0.8"/><text x="200" y="113" text-anchor="middle" fill="white" font-size="8" font-family="DM Mono">N</text>
69      <circle cx="338" cy="138" r="9"  fill="#97C459" opacity="0.7"/><text x="338" y="143" text-anchor="middle" fill="white" font-size="8" font-family="DM Mono">H</text>
70      <circle cx="62"  cy="138" r="9"  fill="#BA7517" opacity="0.75"/><text x="62"  y="143" text-anchor="middle" fill="white" font-size="8" font-family="DM Mono">O</text>
71      <circle cx="200" cy="58"  r="9"  fill="#378ADD" opacity="0.75"/><text x="200" y="63"  text-anchor="middle" fill="white" font-size="8" font-family="DM Mono">F</text>
72    </svg>
73  </div>
74</section>
75<!-- ═══ COMPOUND ANALYSIS TOOL ═══════════════════════════════════ -->
76<section class="tool-section" id="tool">
77  <div class="container">
78    <div class="section-header">
79      <span class="section-tag"> COMPOUND ANALYSIS</span>
80      <h2>Ligand Preparation & AI Evaluation for Docking Workflows </h2>
81      <p>Enter a ChEMBL compound identifier </p>
82    </div>
83
84    <!-- Input card -->
85    <div class="input-card">
86      <div class="input-card-header">
87        <div class="input-card-icon">⬡</div>
88        <div>
89          <h3>ChEMBL Compound Input</h3>
90          <p>Format: CHEMBL followed by digits — e.g. CHEMBL25, CHEMBL192, CHEMBL941</p>
91        </div>
92      </div>
93      <div class="input-row">
94        <div class="input-wrapper">
95          <span class="input-prefix">ID://</span>
96          <input type="text" id="chembl_input" placeholder="CHEMBL25" autocomplete="off" spellcheck="false"/>
97          <button class="clear-btn" id="clear-btn" onclick="clearInput()" title="Clear">✕</button>
98        </div>
99        <button class="btn-analyze" id="analyze-btn" onclick="runAnalysis()">
100          <span class="btn-text">Prepare Ligand</span>
101          <span class="btn-arrow">→</span>
102        </button>
103      </div>
104      <div class="example-chips">
105        <span class="chip-label">Quick examples:</span>
106        <button class="chip" onclick="setExample('CHEMBL25')">CHEMBL25 · Aspirin</button>
107        <button class="chip" onclick="setExample('CHEMBL192')">CHEMBL192 · Ibuprofen</button>
108        <button class="chip" onclick="setExample('CHEMBL941')">CHEMBL941 · Caffeine</button>
109        <button class="chip" onclick="setExample('CHEMBL1082')">CHEMBL1082 · Paracetamol</button>
110        <button class="chip" onclick="setExample('CHEMBL6498')">CHEMBL6498 · Sildenafil</button>
111      </div>
112    </div>
113
114    <!-- Loading -->
115    <div class="loading-panel" id="loading-panel" style="display:none;">
116      <div class="loading-spinner"></div>
117      <div class="loading-steps">
118        <div class="load-step active" id="ls1">Fetching from ChEMBL database...</div>
119        <div class="load-step" id="ls2">Generating 3D conformation (ETKDGv3)...</div>
120        <div class="load-step" id="ls3">MMFF94 force-field optimization...</div>
121        <div class="load-step" id="ls4">Computing 18 molecular descriptors...</div>
122        <div class="load-step" id="ls5">Running RF+GB ensemble classifier...</div>
123        <div class="load-step" id="ls6">PAINS · ADMET · SAScore · Vina estimate...</div>
124      </div>
125    </div>
126
127    <!-- Error -->
128    <div class="error-panel" id="error-panel" style="display:none;">
129      <span class="error-icon">⚠</span>
130      <div><strong id="error-title">Error</strong><p id="error-msg"></p></div>
131      <button onclick="hideError()">✕</button>
132    </div>
133
134    <!-- ═══ RESULTS ═══ -->
135    <div id="results-panel" style="display:none;">
136
137      <!-- Compound header -->
138      <div class="compound-header">
139        <div class="compound-id-badge">
140          <span class="cid-label">ChEMBL ID</span>
141          <span class="cid-value" id="res-chembl-id">—</span>
142        </div>
143        <div class="compound-name">
144          <h2 id="res-name">—</h2>
145          <span class="compound-formula" id="res-formula">—</span>
146        </div>
147        <div class="compound-meta-flags" id="res-meta-flags"></div>
148        <div class="compound-class-badge" id="res-class-badge">—</div>
149      </div>
150
151      <!-- Downloads -->
152      <div class="section-label" style="margin-top:24px;">// DOWNLOADS</div>
153
154      <div class="downloads-row">
155
156        <button class="dl-btn" onclick="downloadPDB('after')">
157          <span class="dl-icon">⬇</span>
158          <span>
159            <strong>Prepared PDB</strong>
160            <small>MMFF94-optimized · H added</small>
161          </span>
162        </button>
163
164        <button class="dl-btn" onclick="downloadPDB('before')">
165          <span class="dl-icon">⬇</span>
166          <span>
167            <strong>Initial PDB</strong>
168            <small>3D embed · no optimization</small>
169          </span>
170        </button>
171
172        <button class="dl-btn" onclick="downloadReport()">
173          <span class="dl-icon">⬇</span>
174          <span>
175            <strong>Full Report (txt)</strong>
176            <small>All descriptors · ML scores · ADMET</small>
177          </span>
178        </button>
179
180        <button class="dl-btn" onclick="downloadSMILES()">
181          <span class="dl-icon">⬇</span>
182          <span>
183            <strong>SMILES (.smi)</strong>
184            <small>
184Canonical ligand notation</small>
185          </span>
186        </button>
187
188        <button class="dl-btn" onclick="downloadPDBQT()">
189          <span class="dl-icon">⬇</span>
190          <span>
191            <strong>Prepared PDBQT</strong>
192            <small>AutoDock Vina-ready ligand</small>
193          </span>
194        </button>
195
196      </div>
197
198      <!-- 3D / 2D viewers -->
199      <div class="section-label">// STRUCTURE VISUALIZATION</div>
200      <div class="viewer-tabs">
201        <button class="vtab active" onclick="switchViewer('2d', this)">2D Structure</button>
202        <button class="vtab" onclick="switchViewer('3d-before', this)">3D Before Prep</button>
203        <button class="vtab" onclick="switchViewer('3d-after', this)">3D After Prep (MMFF94)</button>
204      </div>
205      <div class="viewer-panel">
206        <div id="view-2d" class="view-pane active">
207          <div id="svg2d-container" class="svg2d-box"></div>
208        </div>
209        <div id="view-3d-before" class="view-pane">
210          <div id="viewer3d-before" class="viewer3d"></div>
211        </div>
212        <div id="view-3d-after" class="view-pane">
213          <div id="viewer3d-after" class="viewer3d"></div>
214        </div>
215        <div class="viewer-legend">
216          <span class="legend-item"><span class="leg-dot" style="background:#e55"></span>O</span>
217          <span class="legend-item"><span class="leg-dot" style="background:#55f"></span>N</span>
218          <span class="legend-item"><span class="leg-dot" style="background:#5a5"></span>C</span>
219          <span class="legend-item"><span class="leg-dot" style="background:#fa0"></span>S</span>
220          <span class="legend-item"><span class="leg-dot" style="background:#0cf"></span>F/Cl</span>
221          <span class="legend-item"><span class="leg-dot" style="background:#fff"></span>H</span>
222        </div>
223      </div>
224
225      <!-- ═══ THE FOLLOWING SECTIONS ARE COLLAPSIBLE — CLICK A TITLE TO SHOW/HIDE ITS RESULTS ═══ -->
226
227      <!-- Score + ML confidence banner -->
228      <div class="section-toggle-label is-collapsed" onclick="toggleSection('sec-score', this)">
229        <span>//Composite Physicochemical Readiness Score</span><span class="toggle-chevron">▾</span>
230      </div>
231      <div class="collapsible-body collapsed" id="sec-score">
232        <div class="score-banner">
233          <div class="score-main">
234            <div class="score-ring-wrap">
235              <svg viewBox="0 0 100 100" class="score-ring">
236                <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(99,153,34,0.15)" stroke-width="8"/>
237                <circle cx="50" cy="50" r="42" fill="none" stroke="#639922" stroke-width="8"
238                  stroke-linecap="round" stroke-dasharray="264" stroke-dashoffset="264"
239                  id="score-arc" transform="rotate(-90 50 50)"/>
240              </svg>
241              <div class="score-text">
242                <span class="score-num" id="res-score">0</span>
243                <span class="score-denom">/100</span>
244              </div>
245            </div>
246            <div class="score-label-wrap">
247              <span class="score-label">AI Docking Readiness</span>
248              <span class="score-verdict" id="res-verdict">—</span>
249            </div>
250          </div>
251          <div class="ml-confidence-box" id="ml-confidence-box">
252            <!-- injected -->
253          </div>
254          <div class="score-breakdown" id="score-breakdown-bars"><!-- injected --></div>
255        </div>
256      </div>
257
258      <!-- Descriptor grid -->
259      <div class="section-toggle-label is-collapsed" onclick="toggleSection('sec-descriptors', this)">
260        <span>// MOLECULAR DESCRIPTORS (18)</span><span class="toggle-chevron">▾</span>
261      </div>
262      <div class="collapsible-body collapsed" id="sec-descriptors">
263        <div class="features-grid" id="features-grid"></div>
264        <div class="rules-row" id="rules-row"></div>
265      </div>
266
267      <!-- AI + ADMET panels -->
268      <div class="section-toggle-label is-collapsed" onclick="toggleSection('sec-ai-admet', this)">
269        <span>// AI CLASSIFICATION & ADMET PROFILING</span><span class="toggle-chevron">▾</span>
270      </div>
271      <div class="collapsible-body collapsed" id="sec-ai-admet">
272        <div class="three-col">
273
274          <!-- ML classification -->
275          <div class="result-card">
276            <div class="card-header-line"><span class="card-tag">ML CLASSIFICATION</span></div>
277            <div class="class-confidence">
278              <span class="class-name" id="res-class-name">—</span>
279              <span class="confidence-badge" id="res-confidence">—</span>
280            </div>
281            <div id="ml-proba-bars" class="proba-bars"></div>
282            <div class="card-subheader">Reasons</div>
283            <div class="class-reasons" id="class-reasons"></div>
284            <div class="class-positives" id="class-positives"></div>
285            <div class="model-info-row" id="model-info-row"></div>
286          </div>
287
288          <!-- SAScore + PAINS + Vina -->
289          <div class="result-card">
290            <div class="card-header-line"><span class="card-tag">SA SCORE · PAINS · VINA</span></div>
291            <div id="sa-pains-panel"></div>
292          </div>
293
294          <!-- ADMET -->
295          <div class="result-card">
296            <div class="card-header-line"><span class="card-tag">ADMET ESTIMATES</span></div>
297            <div id="admet-panel"></div>
298          </div>
299        </div>
300      </div>
301
302      <!-- Recommendation + Checklist -->
303      <div class="section-toggle-label is-collapsed" onclick="toggleSection('sec-recommendation', this)">
304        <span>// DOCKING RECOMMENDATION & PREPARATION CHECKLIST</span><span class="toggle-chevron">▾</span>
305      </div>
306      <div class="collapsible-body collapsed" id="sec-recommendation">
307        <div class="two-col">
308          <div class="result-card">
309            <div class="card-header-line"><span class="card-tag">DOCKING PROTOCOLS</span></div>
310            <div class="rec-body" id="rec-body"></div>
311          </div>
312          <div class="result-card">
313            <div class="card-header-line"><span class="card-tag">PREPARATION CHECKLIST</span></div>
314            <div class="checklist-inner" id="checklist-grid"></div>
315          </div>
316        </div>
317      </div>
318
319      <!-- Charts + drug-space table -->
320      <div class="section-toggle-label is-collapsed" onclick="toggleSection('sec-charts', this)">
321        <span>// PROPERTY PROFILING & DRUG-SPACE COMPARISON</span><span class="toggle-chevron">▾</span>
322      </div>
323      <div class="collapsible-body collapsed" id="sec-charts">
324        <div class="charts-row">
325          <div class="result-card chart-card">
326            <div class="card-header-line"><span class="card-tag">DRUG-LIKENESS RADAR</span></div>
327            <canvas id="radarChart" height="260"></canvas>
328          </div>
329          <div class="result-card chart-card">
330            <div class="card-header-line"><span class="card-tag">AI SCORE BREAKDOWN</span></div>
331            <canvas id="barChart" height="260"></canvas>
332          </div>
333          <div class="result-card chart-card">
334            <div class="card-header-line"><span class="card-tag">vs. DRUG SPACE</span></div>
335            <canvas id="drugSpaceChart" height="260"></canvas>
336          </div>
337        </div>
338
339        <!-- Drug-space comparison table -->
340        <div class="drug-comparison-table" id="drug-comparison-table"></div>
341      </div>
342
343      <!-- Similar ligands -->
344      <div class="section-toggle-label is-collapsed" onclick="toggleSection('sec-similar', this)">
345        <span>// SIMILAR LIGANDS (ChEMBL Tanimoto ≥70%)</span><span class="toggle-chevron">▾</span>
346      </div>
347      <div class="collapsible-body collapsed" id="sec-similar">
348        <div class="similar-grid" id="similar-grid"></div>
349      </div>
350
351      <!-- Identifiers -->
352      <div class="section-toggle-label is-collapsed" onclick="toggleSection('sec-identifiers', this)">
353        <span>// IDENTIFIERS & STRUCTURE DATA</span><span class="toggle-chevron">▾</span>
354      </div>
355      <div class="collapsible-body collapsed" id="sec-identifiers">
356        <div class="identifiers-card">
357          <div class="ident-row">
358            <span class="ident-label">Canonical SMILES</span>
359            <code class="ident-val" id="res-smiles">—</code>
360            <button class="copy-btn" onclick="copyText('res-smiles')" title="Copy">⎘</button>
361          </div>
362          <div class="ident-row">
363            <span class="ident-label">InChI Key</span>
364            <code class="ident-val" id="res-inchikey">—</code>
365            <button class="copy-btn" onclick="copyText('res-inchikey')" title="Copy">⎘</button>
366          </div>
367          <div class="ident-row">
368            <span class="ident-label">Molecular Formula</span>
369            <code class="ident-val" id="res-formula2">—</code>
370          </div>
371          <div class="ident-row">
372            <span class="ident-label">Exact MW</span>
373            <code class="ident-val" id="res-exactmw">—</code>
374          </div>
375          <div class="ident-row">
376            <span class="ident-label">Processing Time</span>
377            <code class="ident-val" id="res-time">—</code>
378          </div>
379        </div>
380      </div>
381
382    </div>
383</section>
384
385<!-- ═══ DOCUMENTATION ══════════════════════════════════════════ -->
386<section class="docs-section" id="docs">
387  <div class="container">
388    <div class="section-header">
389      <span class="section-tag">DOCUMENTATION</span>
390      <h2>About IntelligentLigPrep</h2>
391      <p>A concise reference for users and researchers. Full details will be available in the associated publication.</p>
392    </div>
393
394    <!-- 4 explainer cards in a strict 2×2 grid -->
395    <div class="docs-grid">
396      <div class="doc-card">
397        <h4>What is Ligand Preparation?</h4>
398        <p>
399          Ligand preparation converts a 2D chemical structure into a stable, 3D conformation ready for computational use.
400          It includes adding hydrogens, assigning bond orders, generating 3D coordinates, and optimizing geometry
401          via a molecular force field.
402        </p>
403      </div>
404
405      <div class="doc-card">
406        <h4>Why Is Ligand Preparation Critical for Docking?</h4>
407        <p>
408          Molecular docking algorithms evaluate ligand–target interactions using three-dimensional geometry,
409          atomic charges, and physicochemical interactions. Poorly prepared ligands can lead to unreliable
410          binding poses and misleading docking scores.
411        </p>
412      </div>
413
414      <div class="doc-card">
415        <h4>What Does "AI-Assisted" Mean Here?</h4>
416        <p>
417          IntelligentLigPrep uses an explainable machine learning ensemble to perform physicochemical profiling
418          of prepared ligands. This AI module is designed to support pre-docking ligand triage by helping identify
419          compounds that are chemically suitable, borderline, or potentially problematic for docking workflows.
420        </p>
421      </div>
422
423      <div class="doc-card">
424        <h4>Important note</h4>
425        <p>
426          The composite score reflects docking-oriented physicochemical suitability and should be interpreted
427          as a pre-docking decision-support metric rather than a predictor of target-specific binding affinity.
428        </p>
429      </div>
430    </div>
431
432  </div>
433</section>       
434 <!-- Pipeline -->
435<section class="pipeline-section" id="pipeline">
436<div class="container">
437<div class="pipeline-header section-header">
438  <span class="section-tag"> PRE-DOCKING WORKFLOW</span>
439  <h2>How IntelligentLigPrep Works</h2>
440  
441</div>
442
443<div class="pipeline-steps">
444  <div class="pipe-step">
445    <div class="pipe-num">01</div>
446    
447    <h4>ChEMBL Retrieval</h4>
448    <p>Retrieve molecular structure (SMILES) and compound metadata from the ChEMBL database.</p>
449  </div>
450
451  
452
453  <div class="pipe-step">
454    <div class="pipe-num">02</div>
455    
456    <h4>3D Structure Generation</h4>
457    <p>Generate three-dimensional molecular coordinates from the input structure.</p>
458  </div>
459
460  
461
462  <div class="pipe-step">
463    <div class="pipe-num">03</div>
464    
465    <h4>Geometry Optimization</h4>
466    <p>Optimize molecular geometry using force-field minimization to obtain a stable conformation.</p>
467  </div>
468
469
470
471  <div class="pipe-step">
472    <div class="pipe-num">04</div>
473    
474    <h4>AI-Assisted Profiling</h4>
475    <p>Analyze molecular descriptors using an explainable ML model to classify physicochemical suitability for docking workflows.</p>
476  </div>
477
478  
479
480  <div class="pipe-step">
481    <div class="pipe-num">05</div>
482    
483    <h4>Cheminformatics Assessment</h4>
484    <p>Evaluate synthetic accessibility, PAINS alerts, ADMET properties, and drug-likeness indicators.</p>
485  </div>
486
487  <div class="pipe-step">
488    <div class="pipe-num">06</div>
489   
490    <h4>Pre-Docking Report</h4>
491    <p>Generate a comprehensive report including prepared structures, profiling results, and docking-oriented assessment.</p>
492  </div>    
493</div>
494</section>
495<!-- ═══ CONTACT ════════════════════════════════════════════════ -->
496<section class="contact-section" id="contact">
497  <div class="container contact-inner">
498    <div class="contact-text">
499      <span class="section-tag alt">CITATION & CONTACT</span>
500      <h2>About IntelligentLigPrep</h2>
501      
502      <p>If you use this platform in your research, please cite:</p>
503      <div class="citation-box">
504        <code>[Mahjoub R et al.] IntelligentLigPrep: A Web-Based Platform for Automated Ligand Preparation and AI-Assisted Physicochemical Profiling for Docking Workflows, in preparation, 2026.</code>
505      </div>
506      <div class="contact-links">
507        <a href="https://www.ebi.ac.uk/chembl/" class="ext-link" target="_blank">ChEMBL ↗</a>
508        <a href="https://www.rdkit.org/" class="ext-link" target="_blank">RDKit ↗</a>
509        <a href="https://autodock.scripps.edu/" class="ext-link" target="_blank">AutoDock Vina ↗</a>
510        <a href="https://3dmol.csb.pitt.edu/" class="ext-link" target="_blank">3Dmol.js ↗</a>
511      </div>
512    </div>
513   <div class="contact-card">
514  <h4>Get in Touch</h4>
515  <p>Questions, bug reports, or collaboration:</p>
516
517  <div class="contact-field">
518    <span>📧</span>
519    <span><strong>Developed by:</strong> [email protected] / [email protected]</span>
520  </div>
521
522  <div class="contact-field">
523    <span>🎨</span>
524    <span><strong>Designed by:</strong> [email protected] / [email protected]</span>
525  </div>
526
527  <div class="contact-field">
528    <span>🔬</span>
529    <span>BIMS Lab — Institut Pasteur Tunis</span>
530  </div>
531
532  <div class="contact-field">
533    <span>📄</span>
534    <span>Article in preparation — 2026</span>
535  </div>
536</div>
537</div>
538</section>
539  
540
541<!-- Footer -->
542<footer class="footer">
543  <div class="footer-inner">
544    <div class="footer-logo"><span class="logo-hex">💊</span> IntelligentLigPrep </div>
545    <p class="footer-copy">© 2026 IntelligentLigPrep — Academic Research Platform | BIMS lab · All rights reserved</p>
546  </div>
547</footer>
548
549<style>
550  /* ============================================================
551     FIXES — Pipeline section title/boxes + Contact card weight
552     (Appended after style.css so these rules win on equal specificity)
553     ============================================================ */
554
555  /* Pipeline title: same big, centered treatment as the other
556     section headers (Compound Analysis / Documentation) */
557  .pipeline-header.section-header {
558    text-align: center;
559    max-width: 720px;
560    margin: 0 auto 56px;
561  }
562  .pipeline-header.section-header .section-tag {
563    display: inline-block;
564  }
565  .pipeline-header.section-header h2 {
566    font-family: 'Syne', sans-serif;
567    font-weight: 800;
568    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
569    line-height: 1.15;
570    margin: 14px 0 16px;
571  }
572  .pipeline-header.section-header p {
573    font-family: 'Inter', sans-serif;
574    font-size: 1rem;
575    line-height: 1.6;
576    opacity: 0.8;
577    max-width: 560px;
578    margin: 0 auto;
579  }
580
581  /* Pipeline boxes: clearer cards with real contrast, readable text */
582  .pipeline-steps {
583    display: flex;
584    flex-wrap: wrap;
585    justify-content: center;
586    align-items: stretch;
587    gap: 22px;
588    margin-top: 8px;
589  }
590  .pipe-step {
591    display: flex;
592    flex-direction: column;
593    align-items: center;
594    text-align: center;
595    width: 190px;
596    padding: 28px 20px;
597    background: rgba(99, 153, 34, 0.06);
598    border: 1px solid rgba(99, 153, 34, 0.25);
599    border-radius: 16px;
600    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
601    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
602  }
603  .pipe-step:hover {
604    transform: translateY(-4px);
605    border-color: rgba(99, 153, 34, 0.55);
606    background: rgba(99, 153, 34, 0.1);
607  }
608  .pipe-num {
609    font-family: 'DM Mono', monospace;
610    font-size: 0.8rem;
611    font-weight: 500;
612    letter-spacing: 0.05em;
613    color: #639922;
614    margin-bottom: 8px;
615  }
616  .pipe-icon {
617    font-size: 1.9rem;
618    margin-bottom: 12px;
619    line-height: 1;
620  }
621  .pipe-step h4 {
622    font-family: 'Syne', sans-serif;
623    font-weight: 700;
624    font-size: 1.05rem;
625    line-height: 1.3;
626    margin: 0 0 10px;
627  }
628  .pipe-step p {
629    font-family: 'Inter', sans-serif;
630    font-weight: 400;
631    font-size: 0.88rem;
632    line-height: 1.55;
633    opacity: 0.85;
634    margin: 0;
635  }
636  .pipe-connector {
637    display: flex;
638    align-items: center;
639    justify-content: center;
640    min-width: 26px;
641  }
642  .pipe-connector .pipe-line { display: none; }
643  .pipe-connector .pipe-arrow-icon {
644    font-size: 1.3rem;
645    color: #639922;
646    opacity: 0.7;
647  }
648  @media (max-width: 900px) {
649    .pipeline-steps { flex-direction: column; align-items: center; }
650    .pipe-connector { transform: rotate(90deg); margin: -6px 0; }
651  }
652
653  /* Contact card: clear, regular-weight text (not bold) */
654  .contact-card h4 {
655    font-family: 'Syne', sans-serif;
656    font-weight: 600;
657  }
658  .contact-card p {
659    font-family: 'Inter', sans-serif;
660    font-weight: 400;
661  }
662  .contact-card .contact-field,
663  .contact-card .contact-field span {
664    font-family: 'Inter', sans-serif;
665    font-weight: 400 !important;
666    font-style: normal;
667  }
668</style>
669
670<script src="/static/app.js"></script>
670
671</body>
672</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.