Răsfoiți Sursa

Add app screenshots and match feature copy to the app

The export path in the status bar is painted out of both screenshots.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude 1 zi în urmă
părinte
comite
f6b50b9f00

BIN
public/images/pads.png


BIN
public/images/sequences.png


+ 13 - 7
public/index.html

@@ -41,9 +41,10 @@
       </div>
     </section>
 
-    <!-- Screenshot of the main window goes here (images/main.png). -->
-    <figure class="shot placeholder" aria-hidden="true">
-      <span>Screenshot</span>
+    <figure class="shot">
+      <img src="/images/pads.png" width="1182" height="867"
+           alt="The mpckit window on the Pads tab: bank A's 16 pads, ten of them holding drum samples, with the settings for pad A03 (Closed Hat) on the right: play, tuning sliders and mute group.">
+      <figcaption>Pads: eight banks of 16, with the selected pad's settings on the right.</figcaption>
     </figure>
 
     <section id="features" aria-labelledby="features-title">
@@ -51,21 +52,26 @@
       <ul class="cards">
         <li class="card">
           <h3>Pads and banks</h3>
-          <p>All eight banks of 16 pads. Assign WAVs by dropping them on a pad, then move, copy or swap pads.</p>
+          <p>All 128 pads in eight banks of 16. Drop a WAV on a pad to assign it, click to hear it, and drag pads to move, swap or copy them.</p>
         </li>
         <li class="card">
           <h3>Tuning and mute groups</h3>
-          <p>Coarse and fine tuning per pad, and mute groups 1 to 16, with the same limits the device uses.</p>
+          <p>Tune each pad by &plusmn;24 semitones and &plusmn;90 cents, and put pads in mute groups so they cut each other off, as on the device.</p>
         </li>
         <li class="card">
           <h3>Sequences</h3>
-          <p>Set up each sequence's name, tempo and length. Notes are recorded on the device.</p>
+          <p>Up to 128 sequence slots, each with a name, tempo (20&ndash;999 BPM) and length in bars. Notes are recorded on the device.</p>
         </li>
         <li class="card">
           <h3>Load and export</h3>
-          <p>Open a project from the device, edit it, and export to a folder (for example straight onto the card) or a zip.</p>
+          <p>Open a project saved on the device, edit it, and export to a folder (for example straight onto the card) or a zip.</p>
         </li>
       </ul>
+      <figure class="shot">
+        <img src="/images/sequences.png" width="1182" height="867" loading="lazy"
+             alt="The mpckit window on the Sequences tab: six sequences in bank A (Intro, Verse 1, Verse 2, Outro, Chorus, Bridge), with the name, BPM and length of A01 on the right.">
+        <figcaption>Sequences: one slot per pad, with name, tempo and length.</figcaption>
+      </figure>
     </section>
 
     <section id="download" aria-labelledby="download-title">

+ 6 - 7
public/style.css

@@ -138,15 +138,14 @@ nav a:hover { color: var(--text); }
   overflow: hidden;
   background: var(--surface);
 }
-.shot img { display: block; width: 100%; height: auto; }
-.shot.placeholder {
-  display: grid;
-  place-items: center;
-  aspect-ratio: 16 / 9;
-  border-style: dashed;
-  font: 13px/1 var(--mono);
+.shot img { display: block; width: 100%; height: auto; background: #15171a; }
+.shot figcaption {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  font-size: 14px;
   color: var(--muted);
 }
+#features .shot { margin: 16px 0 0; }
 
 /* Sections */
 main section:not(.about) { padding-bottom: 48px; scroll-margin-top: 16px; }

+ 3 - 2
pull-releases/001-first-site/README.md

@@ -2,7 +2,8 @@ First version of the site
 
 ## What changed
 
-- `public/`: a single page for mpckit (intro, screenshot, features, download and install notes per system, disclaimer). Styled after monoexp.com: the same stylesheet tokens, light and dark themes, with the app's amber as the only accent.
+- `public/`: a single page for mpckit (intro, app screenshots, features, download and install notes per system, disclaimer). Styled after monoexp.com: the same stylesheet tokens, light and dark themes, with the app's amber as the only accent.
+- `public/images/`: screenshots of the Pads and Sequences tabs from the Windows build. The local export path in the status bar was painted out.
 - `public/favicon.svg`: the app icon (4x4 pad grid, pad 1 lit), redrawn as SVG.
 - `nginx/mpckit.monoexp.com.conf`: the site file for the server.
 - `LICENSE`: filled in the copyright line (2026 bajdev).
@@ -10,7 +11,7 @@ First version of the site
 
 ## Notes
 
-- No download links yet: the page says builds will be listed there and points to the source until then.
+- No download links yet: builds come with the app's new repository. Until then the page says downloads will be listed there and points to the source.
 - Source links point to git.monoexp.com/bajdev/mpckit until the app repository moves.
 
 ## Testing