web: a demo note - the native executable is significantly faster
Browse files- index.html +3 -0
index.html
CHANGED
|
@@ -48,6 +48,8 @@ h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;font-weight:600;margin:0
|
|
| 48 |
main{max-width:1180px;margin:0 auto;padding:30px 22px 80px}
|
| 49 |
h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0 0 10px;text-wrap:balance}
|
| 50 |
.lede{color:var(--dim);max-width:64ch;margin:0 0 22px;font-size:16px}
|
|
|
|
|
|
|
| 51 |
/* drop */
|
| 52 |
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;padding:24px;border:1.5px dashed var(--rule);border-radius:var(--radius);background:var(--card);cursor:pointer;transition:border-color .12s,background .12s;text-align:center}
|
| 53 |
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
|
|
@@ -190,6 +192,7 @@ footer .v{margin-left:auto}
|
|
| 190 |
<main>
|
| 191 |
<h1>Exact vectors from your logo, in your browser.</h1>
|
| 192 |
<p class="lede">Drop a PNG, JPEG, WebP, GIF, BMP or TIFF. The tracer runs as WebAssembly on your machine, so nothing is uploaded. Edges land where the anti-aliasing says they are, circles come back as circles, and every colour is one clean path.</p>
|
|
|
|
| 193 |
|
| 194 |
<label class="drop" id="drop">
|
| 195 |
<input type="file" id="file" accept="image/*">
|
|
|
|
| 48 |
main{max-width:1180px;margin:0 auto;padding:30px 22px 80px}
|
| 49 |
h1{font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0 0 10px;text-wrap:balance}
|
| 50 |
.lede{color:var(--dim);max-width:64ch;margin:0 0 22px;font-size:16px}
|
| 51 |
+
.demo-note{display:flex;align-items:center;gap:9px;margin:-8px 0 22px;padding:9px 14px;max-width:64ch;border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:8px;background:var(--card);color:var(--faint);font-size:13.5px;line-height:1.5}
|
| 52 |
+
.demo-note svg{flex:none;width:15px;height:15px;color:var(--accent)}
|
| 53 |
/* drop */
|
| 54 |
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;padding:24px;border:1.5px dashed var(--rule);border-radius:var(--radius);background:var(--card);cursor:pointer;transition:border-color .12s,background .12s;text-align:center}
|
| 55 |
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
|
|
|
|
| 192 |
<main>
|
| 193 |
<h1>Exact vectors from your logo, in your browser.</h1>
|
| 194 |
<p class="lede">Drop a PNG, JPEG, WebP, GIF, BMP or TIFF. The tracer runs as WebAssembly on your machine, so nothing is uploaded. Edges land where the anti-aliasing says they are, circles come back as circles, and every colour is one clean path.</p>
|
| 195 |
+
<p class="demo-note"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2L4.5 13.5H11L10 22l8.5-11.5H12L13 2z"/></svg><span>This page is a demo. The same tracer, run natively as a <a href="https://github.com/logolabs/inkvec/releases" target="_blank" rel="noopener noreferrer">command-line executable</a>, is significantly faster.</span></p>
|
| 196 |
|
| 197 |
<label class="drop" id="drop">
|
| 198 |
<input type="file" id="file" accept="image/*">
|