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.