molforge/index.html at main · lwang68/molforge · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>MolForge – Browser-based Chemical Data Platform</title>
  <meta name="description" content="A single-file chemical data platform for medicinal chemistry. SAR analysis, ADME prediction, kinase selectivity, bioisosteric replacement — all in the browser, no install."/>
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #0f172a; background: #f8fafc; line-height: 1.55; }
    .hero { padding: 72px 24px 56px; text-align: center; background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 50%, #f5f3ff 100%); border-bottom: 1px solid #e2e8f0; }
    .hero .logo { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .hero .logo-mark { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37,99,235,0.25); }
    .hero .logo-mark svg { width: 28px; height: 28px; }
    .hero h1 { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
    .hero .tag { font-size: 20px; color: #475569; margin: 16px auto 0; max-width: 640px; font-weight: 400; }
    .hero .cta { display: inline-flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-size: 15px; font-weight: 600; border-radius: 12px; text-decoration: none; border: 1px solid transparent; transition: transform .1s, box-shadow .1s; }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
    .btn-primary { background: #2563eb; color: white; }
    .btn-primary:hover { background: #1d4ed8; }
    .btn-secondary { background: white; color: #334155; border-color: #cbd5e1; }
    .btn-ghost { background: transparent; color: #334155; }
    .hero .note { margin-top: 20px; font-size: 13px; color: #64748b; }
    .content { max-width: 1100px; margin: 0 auto; padding: 56px 24px; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
    .card { background: white; border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; }
    .card .icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; }
    .card h3 { font-size: 16px; margin: 0 0 8px; font-weight: 700; }
    .card p { font-size: 14px; color: #475569; margin: 0; }
    .section-title { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 28px; text-align: center; }
    .section-sub { font-size: 15px; color: #64748b; text-align: center; max-width: 600px; margin: 0 auto 36px; }
    .demo-frame { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
    .demo-window { border: 1px solid #cbd5e1; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 36px rgba(15,23,42,0.12); background: white; }
    .demo-window .chrome { background: #f1f5f9; border-bottom: 1px solid #e2e8f0; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b; }
    .demo-window .dots { display: flex; gap: 6px; }
    .demo-window .dot { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; }
    .demo-window .dot:nth-child(1) { background: #fca5a5; }
    .demo-window .dot:nth-child(2) { background: #fcd34d; }
    .demo-window .dot:nth-child(3) { background: #86efac; }
    .demo-window iframe { width: 100%; height: 720px; border: 0; display: block; background: white; }
    .footer { padding: 40px 24px; text-align: center; font-size: 13px; color: #64748b; border-top: 1px solid #e2e8f0; background: white; }
    .footer a { color: #2563eb; text-decoration: none; }
    .footer a:hover { text-decoration: underline; }
    .pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #dbeafe; color: #1e40af; margin-bottom: 12px; }
    .banner { max-width: 900px; margin: 0 auto 20px; padding: 16px 20px; background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 12px; font-size: 14px; color: #78350f; line-height: 1.55; }
    .banner strong { color: #92400e; }
    .banner .row { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin-top: 10px; }
    .banner .tag-small { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; }
    .banner .tag-demo { background: #fef3c7; color: #92400e; }
    .banner .tag-local { background: #dcfce7; color: #166534; }
    .banner a { color: #78350f; font-weight: 600; text-decoration: underline; }
    @media (max-width: 640px) {
      .hero h1 { font-size: 32px; }
      .hero .tag { font-size: 17px; }
      .demo-window iframe { height: 540px; }
    }
  </style>
</head>
<body>
  <div class="hero">
    <div class="logo">
      <div class="logo-mark">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="6" cy="5" r="2.2" fill="white"/><circle cx="18" cy="5" r="2.2" fill="white"/><circle cx="12" cy="18" r="2.2" fill="white"/><line x1="8.1" y1="5" x2="15.9" y2="5" stroke="white" stroke-width="1.5"/><line x1="7.2" y1="6.9" x2="11.2" y2="16" stroke="white" stroke-width="1.5"/><line x1="16.8" y1="6.9" x2="12.8" y2="16" stroke="white" stroke-width="1.5"/></svg>
      </div>
      <span style="font-size:28px; font-weight:800; letter-spacing:-0.02em;">MolForge</span>
    </div>
    <span class="pill">LIVE PREVIEW · RUNS IN YOUR BROWSER</span>
    <h1>A single-file chemical<br/>data platform</h1>
    <p class="tag">SAR, ADME, MPO, kinase selectivity, and AI/ML — all in one HTML file. Your compounds stay on your machine. No install, no account, no server.</p>
    <div class="cta">
      <a class="btn btn-primary" href="molforge_database.html">
        🚀 Launch live demo
      </a>
      <a class="btn btn-secondary" href="https://github.com/">
        ⭐ View on GitHub
      </a>
      <a class="btn btn-ghost" href="molforge_database.html" download>
        ⬇ Download the HTML file
      </a>
    </div>
    <p class="note">The demo is pre-loaded with 25 public FDA-approved drugs across 6 project series (EGFR, BCR-ABL, VEGFR, JAK, BTK, CDK/ALK, COX-1) plus a 300-kinase sample selectivity panel — so every feature (SAR, MMPA, ADME, MPO, AutoQSAR, Kinase Selectivity) works immediately, no uploads required.</p>
  </div>

  <div class="content">
    <h2 class="section-title">What's inside</h2>
    <p class="section-sub">Everything below works offline after the first load. All data stays on your device.</p>
    <div class="grid">
      <div class="card"><div class="icon" style="background:#fef3c7;">🧩</div><h3>SAR analysis</h3><p>Scaffold and R-group decomposition with auto-MCS, SAR matrix, activity landscape with manual compound selection, MMPA, and 2D chemical-space projection.</p></div>
      <div class="card"><div class="icon" style="background:#dbeafe;">🧪</div><h3>ADME prediction</h3><p>25 endpoints covering solubility, permeability, CYP inhibition, protein binding, and CNS properties. Rule-based QSAR (ESOL, Lobell, Lombardo, Clark/Ertl, Wager).</p></div>
      <div class="card"><div class="icon" style="background:#fae8ff;">⭐</div><h3>MPO scoring</h3><p>QED, CNS MPO, Rule of 5, Rule of 3, and pMPO — with a summary table, per-compound breakdowns, and CSV/Excel export.</p></div>
      <div class="card"><div class="icon" style="background:#cffafe;">🤖</div><h3>AI / ML</h3><p>AutoQSAR with Ridge, Random Forest, DNN, and MPNN/GNN. Bioisosteric replacements matched by SMARTS. SyntheMol-inspired analog generation.</p></div>
      <div class="card"><div class="icon" style="background:#fed7aa;">🧬</div><h3>Kinase selectivity</h3><p>Upload KINOMEscan / Eurofins / DiscoverX panels (Excel, CSV, TSV). Uploads persist across sessions. KinMap visualization and KLIFS-style interaction analysis.</p></div>
      <div class="card"><div class="icon" style="background:#d1fae5;">✏</div><h3>Structure editor</h3><p>Built-in OpenChemLib editor — paste from ChemDraw, zoom, undo/redo, periodic-table picker for adding any element, and text annotations.</p></div>
    </div>
  </div>

  <div class="demo-frame">
    <h2 class="section-title">Try it now</h2>
    <p class="section-sub">This is the real app, embedded in an iframe. Click around, run SAR analysis on the pre-loaded compounds, or add your own.</p>
    <div class="banner">
      <strong>ℹ️ Demo vs. downloaded copy — what happens to compounds you add?</strong>
      <div class="row">
        <span class="tag-small tag-demo">Demo</span>
        <span>Compounds you add on this page are saved to <strong>your browser's local cache</strong> (IndexedDB) for the current browser &amp; computer. Closing and reopening the tab keeps them, but clearing browser data or switching devices will not. Clicking <strong>💾 Save</strong> prompts you to download a copy with your data embedded. Exports (CSV, Excel, JSON, SDF) work normally.</span>
        <span class="tag-small tag-local">Downloaded</span>
        <span>After <a href="molforge_database.html" download>downloading the HTML file</a> and opening it locally, clicking <strong>💾 Save</strong> writes your compounds <strong>directly back into the file</strong>. The file itself becomes your persistent database — email it, copy it, or version-control it to share with colleagues.</span>
      </div>
    </div>
    <div class="demo-window">
      <div class="chrome">
        <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
        <span>molforge_database.html</span>
      </div>
      <iframe src="molforge_database.html" title="MolForge live demo" loading="lazy"></iframe>
    </div>
    <p class="note" style="text-align:center; margin-top:16px;">
      For the full experience (new-tab analysis tools, larger viewport), <a href="molforge_database.html" style="color:#2563eb; font-weight:600;">open the demo in its own tab →</a>
    </p>
  </div>

  <div class="content">
    <h2 class="section-title">How it works</h2>
    <div class="grid">
      <div class="card"><div class="icon" style="background:#e0f2fe;">📄</div><h3>Your data lives in the file</h3><p>Click <strong>Save</strong> to write your compound list back into the HTML. Email the file to a colleague — they open it and get the full database. No cloud, no sync, no accounts.</p></div>
      <div class="card"><div class="icon" style="background:#e0f2fe;">💾</div><h3>IndexedDB session cache</h3><p>Every change auto-saves in the browser so a refresh or crash doesn't lose work. Also stores uploaded kinase panels so you can resume where you left off.</p></div>
      <div class="card"><div class="icon" style="background:#e0f2fe;">🛡</div><h3>Privacy by design</h3><p>The only network requests are to load CDN libraries on startup. Nothing is tracked, nothing is uploaded. Use <strong>Create Portable Version</strong> for a fully offline build.</p></div>
    </div>
  </div>

  <div class="footer">
    <p>
      Built with <a href="https://github.com/rdkit/rdkit-js">RDKit.js</a>,
      <a href="https://github.com/Actelion/openchemlib-js">OpenChemLib</a>,
      <a href="https://www.tensorflow.org/js">TensorFlow.js</a>,
      and <a href="https://sheetjs.com/">SheetJS</a>.
      AGPL-3.0 licensed; commercial licenses available. Sample compound data is public (FDA-approved drugs) — not confidential.
    </p>
  </div>
</body>
</html>