Laurence
71217ce3e1
Adds original OpenScribe illustrations and elevates the whole site from a plain
scaffold to a polished, animated product site.
What changed:
- assets/img/: original SVG artwork (CC-BY-SA, no third-party photos):
- openscribe-wearable.svg - the wearable recorder with a breathing status LED (SMIL
animation that plays even when embedded via <img>).
- openscribe-kit.svg - the dev/kit build: ESP32-S3 board + I2S mic + microSD + LiPo,
with amber trace connectors.
- favicon.svg - the "12" studio mark; wired as the site icon and header logo.
- index.html: two-column hero with the floating device, a trust strip, a featured
showcase (device image + sync diagram), project cards with device thumbnails, and a
new "why open beats a locked box" comparison table (our own words, no competitor art).
- projects/openscribe.html: device hero, the AI picker in a proper panel, and a new
"two ways to build it" section with product figures (wearable + kit) and descriptions.
- assets/styles.css: full theme refresh - atmospheric background, gradient headings,
hero float, hover lift + shadows, product/figure styles, comparison table, and
scroll-reveal transitions (honours prefers-reduced-motion).
- assets/app.js: IntersectionObserver scroll reveals alongside the provider picker.
- README: documents the artwork and that it is original/publishable.
Why:
- The user asked for product images with descriptions, then to "make it amazing" - this
delivers IP-safe original device imagery and a genuinely polished, animated site.
Notes:
- Still zero dependencies and no build step. Validated: app.js passes node --check, all
SVGs are valid XML, HTML section tags balanced, every local link/asset resolves.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
58 lines
2.6 KiB
XML
58 lines
2.6 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!-- SPDX-License-Identifier: CC-BY-SA-4.0
|
|
Original illustration of the OpenScribe wearable recorder. 12 Hobbies Studio. -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 360" role="img"
|
|
aria-label="OpenScribe wearable recorder - a small vertical capsule with a record button, status LED and microphone grille">
|
|
<defs>
|
|
<linearGradient id="body" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#2b3345"/>
|
|
<stop offset="1" stop-color="#171b26"/>
|
|
</linearGradient>
|
|
<linearGradient id="btn" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stop-color="#f6b774"/>
|
|
<stop offset="1" stop-color="#e2894e"/>
|
|
</linearGradient>
|
|
<radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
|
|
<stop offset="0" stop-color="#6ec7c0" stop-opacity="0.9"/>
|
|
<stop offset="1" stop-color="#6ec7c0" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
|
|
<feDropShadow dx="0" dy="10" stdDeviation="14" flood-color="#000000" flood-opacity="0.45"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- lanyard loop -->
|
|
<path d="M160 20 a20 20 0 0 1 20 20 v6 h-10 v-6 a10 10 0 0 0 -20 0 v6 h-10 v-6 a20 20 0 0 1 20 -20 z"
|
|
fill="#3a465c" stroke="#2c3444"/>
|
|
<rect x="150" y="40" width="20" height="10" rx="3" fill="#20242f"/>
|
|
|
|
<!-- body -->
|
|
<g filter="url(#soft)">
|
|
<rect x="108" y="46" width="104" height="286" rx="52" fill="url(#body)" stroke="#39445a" stroke-width="2"/>
|
|
</g>
|
|
<!-- left highlight -->
|
|
<rect x="120" y="60" width="16" height="256" rx="8" fill="#ffffff" opacity="0.06"/>
|
|
|
|
<!-- microphone grille -->
|
|
<g fill="#5b6a80" opacity="0.9">
|
|
<circle cx="146" cy="96" r="4"/><circle cx="160" cy="90" r="4"/><circle cx="174" cy="96" r="4"/>
|
|
<circle cx="146" cy="112" r="4"/><circle cx="160" cy="106" r="4"/><circle cx="174" cy="112" r="4"/>
|
|
</g>
|
|
|
|
<!-- status LED (breathing, as if recording) -->
|
|
<circle cx="160" cy="150" r="22" fill="url(#glow)">
|
|
<animate attributeName="opacity" values="0.35;1;0.35" dur="2.6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="160" cy="150" r="6" fill="#8fe4dd">
|
|
<animate attributeName="r" values="5;7.5;5" dur="2.6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- engraved wordmark -->
|
|
<text x="160" y="205" text-anchor="middle" font-family="ui-monospace, monospace"
|
|
font-size="13" letter-spacing="2" fill="#8a97ab">OPENSCRIBE</text>
|
|
|
|
<!-- record button -->
|
|
<circle cx="160" cy="268" r="30" fill="#12151d" stroke="#39445a" stroke-width="2"/>
|
|
<circle cx="160" cy="268" r="22" fill="url(#btn)"/>
|
|
<circle cx="160" cy="268" r="9" fill="#12151d" opacity="0.35"/>
|
|
</svg>
|
