5e4c7245b6
Upstream loads zip.js, OpenCV.js, WireBender (JS+WASM) and Google Fonts
from CDNs at runtime, and includes a Google Tag / gtag.js snippet. The
CMMS deployment forbids external requests. Changes:
- docs/vendor/ — local copies of opencv.js (Apache-2.0), zip.min.js
(BSD-3-Clause), WireBender.{js,wasm} (AGPL-3.0/commercial, source at
github.com/dev-lab/WireBender), and the three Google fonts (OFL, latin
subset). SOURCE.txt records provenance.
- studio.html / schema.html — zip.js + opencv.js + fonts @import point at
docs/vendor/.
- inspect-traces.js / schema/layout.js — WireBender import() + locateFile
point at docs/vendor/wirebender/.
- every *.html — Google Tag / gtag.js snippet removed.
No behaviour change; kicad-symbols zip was already bundled + local.
CMMS embedding hooks (window.PCBRETRACE_CONFIG, save-back, AI bridge)
land in a later commit.
204 lines
7.3 KiB
HTML
204 lines
7.3 KiB
HTML
<!--
|
|
~ Copyright (c) 2025-2026 Taras Greben
|
|
~ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Commercial-pcb-retrace
|
|
~ See LICENSE file for details.
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- CMMS fork: Google Tag / analytics removed (no external requests) -->
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" href="favicon.ico">
|
|
<title>PCB ReTrace</title>
|
|
<link rel="stylesheet" href="common.css">
|
|
<style>
|
|
/* OVERRIDE COMMON.CSS APP LOCKS */
|
|
/* This ensures the landing page scrolls normally and footer is visible */
|
|
html, body {
|
|
height: auto !important;
|
|
overflow-y: auto !important; /* Force scrollbar */
|
|
display: block !important; /* Disable app flex layout */
|
|
margin: 0;
|
|
padding: 0;
|
|
background: white;
|
|
color: var(--text-default);
|
|
}
|
|
|
|
:root { --hero-bg: #f8fafc; --text-main: #0f172a; --text-sub: #475569; --primary: #2563eb; }
|
|
|
|
/* HERO SECTION */
|
|
.hero {
|
|
padding: 4rem 1rem 3rem;
|
|
text-align: center;
|
|
background: radial-gradient(circle at 50% 50%, #f1f5f9 0%, #fff 70%);
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; letter-spacing: -0.05em; color: var(--text-main); }
|
|
.hero p { font-size: 1.2rem; color: var(--text-sub); max-width: 600px; margin: 0 auto 2rem; }
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
background: var(--primary); color: white;
|
|
padding: 0.8rem 2rem; border-radius: 2rem;
|
|
font-weight: 700; text-decoration: none; font-size: 1.1rem;
|
|
box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
|
|
transition: transform 0.1s, box-shadow 0.1s;
|
|
}
|
|
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3); }
|
|
.cta-button:active { transform: translateY(0); }
|
|
|
|
.secondary-links { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; font-size: 0.9rem; }
|
|
.secondary-links a { color: var(--text-sub); text-decoration: none; border-bottom: 1px dotted #ccc; }
|
|
|
|
/* FEATURES GRID */
|
|
.features {
|
|
max-width: 1000px; margin: 3rem auto; padding: 0 1rem;
|
|
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;
|
|
}
|
|
.feature-card { padding: 1.5rem; border: 1px solid #e2e8f0; border-radius: 1rem; transition: border-color 0.2s; }
|
|
.feature-card:hover { border-color: var(--primary); }
|
|
.feature-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
|
|
.feature-icon-svg {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.feature-icon-svg svg {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
display: block;
|
|
}
|
|
.feature-card h3 { margin: 0 0 0.5rem; color: var(--text-main); }
|
|
.feature-card p { color: var(--text-sub); font-size: 0.95rem; margin: 0; }
|
|
|
|
/* TOOLS LIST */
|
|
.tools-section { background: #f8fafc; padding: 3rem 1rem; border-top: 1px solid #e2e8f0; }
|
|
.tools-container { max-width: 800px; margin: 0 auto; }
|
|
.tools-title { text-align: center; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-size: 0.9rem; font-weight: 700; }
|
|
|
|
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
|
|
.tool-link {
|
|
background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem;
|
|
padding: 1rem; text-align: center; text-decoration: none; color: inherit;
|
|
transition: transform 0.2s;
|
|
}
|
|
.tool-link:hover { transform: translateY(-3px); border-color: var(--primary); }
|
|
.tool-link strong { display: block; color: var(--primary); margin-bottom: 0.2rem; }
|
|
.tool-link span { font-size: 0.8rem; color: #64748b; }
|
|
|
|
footer.landing-footer {
|
|
margin-top: 0;
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
background: white;
|
|
border-top: 1px solid #e2e8f0;
|
|
color: #94a3b8;
|
|
font-size: 0.8rem;
|
|
}
|
|
footer.landing-footer a { color: inherit; text-decoration: underline; }
|
|
|
|
@media (max-width: 600px) {
|
|
.hero { padding: 3rem 1rem; }
|
|
.hero h1 { font-size: 2rem; }
|
|
.tool-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hero">
|
|
<h1>PCB ReTrace</h1>
|
|
<p>Digitize, document, and reverse engineer printed circuit boards. Map components, trace nets, inspect layers, and generate schematics. Runs entirely in your browser.</p>
|
|
|
|
<a href="studio.html" class="cta-button">Launch Studio</a>
|
|
|
|
<div class="secondary-links">
|
|
<a href="guide.html">📖 User Guide & Documentation</a>
|
|
<a href="https://dev-lab.github.io/pcb-retrace-examples/" target="_blank">🚀 Examples Gallery</a>
|
|
<a href="https://github.com/dev-lab/pcb-retrace">GitHub Repo</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features">
|
|
<!-- 1. Privacy (Core) -->
|
|
<div class="feature-card">
|
|
<span class="feature-icon">🔒</span>
|
|
<h3>Privacy First</h3>
|
|
<p>Zero cloud upload. All images and data are stored in your browser's local database. Works 100% offline.</p>
|
|
</div>
|
|
|
|
<!-- 2. Visual Inspection (Core) -->
|
|
<div class="feature-card">
|
|
<span class="feature-icon">👁️</span>
|
|
<h3>Auto-Stitch & X-Ray</h3>
|
|
<p>Align close-up shots with wide-angle views. Stitch Top vs. Bottom layers to inspect traces through the board.</p>
|
|
</div>
|
|
|
|
<!-- 3. BOM Management (New - Requested) -->
|
|
<div class="feature-card">
|
|
<span class="feature-icon">📝</span>
|
|
<h3>Visual BOM</h3>
|
|
<p>Map components directly on the image. Record values, references, and descriptions, then export to CSV.</p>
|
|
</div>
|
|
|
|
<!-- 4. Netlist Tracing (Workflow) -->
|
|
<div class="feature-card">
|
|
<span class="feature-icon">🕸️</span>
|
|
<h3>Net Tracing</h3>
|
|
<p>Document connectivity across layers. Define nets, label nodes, and export netlists (<code>.net</code>,<code>.cir</code> for KiCad, SPICE).</p>
|
|
</div>
|
|
|
|
<!-- 5. Schematics (Workflow) -->
|
|
<div class="feature-card">
|
|
<span class="feature-icon feature-icon-svg">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<line x1="3" y1="16" x2="21" y2="16" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="12" y1="3" x2="12" y2="16" stroke="currentColor" stroke-width="2"/>
|
|
<circle cx="12" cy="16" r="2.5" fill="currentColor"/>
|
|
</svg>
|
|
</span>
|
|
<h3>Schematics</h3>
|
|
<p>Generate interactive schematic diagrams, resolve placeholders into real components, and export to KiCad (<code>.kicad_sch</code>).</p>
|
|
</div>
|
|
|
|
<!-- 6. Deep Linking (New - Sharing) -->
|
|
<div class="feature-card">
|
|
<span class="feature-icon">🔗</span>
|
|
<h3>Deep Linking</h3>
|
|
<p>Share projects instantly. Host your Device ZIP on GitHub or any CORS-enabled server and open it via a direct URL.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tools-section">
|
|
<div class="tools-container">
|
|
<div class="tools-title">Included Utilities</div>
|
|
<div class="tool-grid">
|
|
<a href="schema.html" class="tool-link">
|
|
<strong>Schema ReTrace</strong>
|
|
<span>Standalone Schematic Generator</span>
|
|
</a>
|
|
<a href="resistor.html" class="tool-link">
|
|
<strong>Resistor Decoder</strong>
|
|
<span>3-6 Bands & Reverse Lookup</span>
|
|
</a>
|
|
<a href="inductor.html" class="tool-link">
|
|
<strong>Inductor Decoder</strong>
|
|
<span>Standard & Military Codes</span>
|
|
</a>
|
|
<a href="coil.html" class="tool-link">
|
|
<strong>Coil Calculator</strong>
|
|
<span>Air-core Inductance</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="landing-footer">
|
|
<p>Dual Licensed: <strong>AGPL v3</strong> (Open Source) + <strong>Commercial</strong>.</p>
|
|
<p>Copyright © 2025—2026 Taras Greben — <a href="https://pcb.etaras.com">pcb.eTaras.com</a></p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|