First version of the site

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

LICENSE

@@ -1,5 +1,5 @@
 MIT License
-Copyright (c) <year> <copyright holders>
+Copyright (c) 2026 bajdev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,3 +1,21 @@
 # mpckit-site
 
-Website for MPCKit tool for MPC Sample
+Website for mpckit, the kit editor for the Akai MPC Sample: https://mpckit.monoexp.com/
+
+A single static page in `public/` (HTML, one stylesheet, no build step), styled after [monoexp.com](https://monoexp.com/). The app itself lives in its own repository.
+
+## Preview locally
+
+```
+python3 -m http.server 18010 --bind 127.0.0.1 --directory public
+```
+
+Then open http://127.0.0.1:18010/.
+
+## Deploy
+
+Merges into `main` publish `public/` to the server (deploy pipeline, `static` kind). The nginx site file is in `nginx/`.
+
+## Licence
+
+MIT. See [LICENSE](LICENSE). mpckit is not affiliated with Akai Professional or inMusic Brands.

nginx/mpckit.monoexp.com.conf

@@ -0,0 +1,23 @@
+# /etc/nginx/vhosts.d/mpckit.monoexp.com.conf
+#
+# Static site for mpckit, published from public/ by the deploy pipeline.
+# Port 80 (ACME challenges and the HTTP->HTTPS redirect) is handled by the
+# `.monoexp.com` block in 00-default.conf.
+#
+# Certificate: sudo /usr/local/sbin/issue-cert mpckit.monoexp.com
+
+server {
+    listen 443 ssl; listen [::]:443 ssl;
+    server_name mpckit.monoexp.com;
+    ssl_certificate     /etc/letsencrypt/live/mpckit.monoexp.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/mpckit.monoexp.com/privkey.pem;
+    include snippets/tls-common.conf;
+
+    root /srv/www/vhosts/mpckit.monoexp.com;
+    index index.html;
+
+    location / { try_files $uri $uri/ =404; }
+
+    # Short cache for the stylesheet, icon and screenshots; HTML keeps nginx's defaults.
+    location ~* \.(css|svg|png|webp)$ { expires 1h; }
+}

public/favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <!-- The app icon: a 4x4 pad grid with pad 1 (bottom left) lit. -->
+  <rect width="64" height="64" rx="14" fill="#15171a"/>
+  <g fill="#333842">
+    <rect x="8" y="8" width="10" height="10" rx="2"/><rect x="21" y="8" width="10" height="10" rx="2"/><rect x="34" y="8" width="10" height="10" rx="2"/><rect x="47" y="8" width="10" height="10" rx="2"/>
+    <rect x="8" y="21" width="10" height="10" rx="2"/><rect x="21" y="21" width="10" height="10" rx="2"/><rect x="34" y="21" width="10" height="10" rx="2"/><rect x="47" y="21" width="10" height="10" rx="2"/>
+    <rect x="8" y="34" width="10" height="10" rx="2"/><rect x="21" y="34" width="10" height="10" rx="2"/><rect x="34" y="34" width="10" height="10" rx="2"/><rect x="47" y="34" width="10" height="10" rx="2"/>
+    <rect x="21" y="47" width="10" height="10" rx="2"/><rect x="34" y="47" width="10" height="10" rx="2"/><rect x="47" y="47" width="10" height="10" rx="2"/>
+  </g>
+  <rect x="8" y="47" width="10" height="10" rx="2" fill="#f5a524"/>
+</svg>

public/index.html

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>mpckit: kit editor for the Akai MPC Sample</title>
+  <meta name="description" content="mpckit builds Akai MPC Sample projects on your computer: assign WAVs to pads, tune them, set mute groups and sequences, then export to the device. Windows, macOS and Linux.">
+  <meta name="color-scheme" content="light dark">
+  <link rel="canonical" href="https://mpckit.monoexp.com/">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <header class="site-header">
+    <div class="wrap header-inner">
+      <a class="wordmark" href="/">mpc<span>kit</span></a>
+      <nav aria-label="Main">
+        <a href="#features">Features</a>
+        <a href="#download">Download</a>
+        <a href="https://git.monoexp.com/bajdev/mpckit">Source</a>
+      </nav>
+    </div>
+  </header>
+
+  <main class="wrap">
+    <section class="about" aria-labelledby="about-title">
+      <p class="eyebrow"><span class="badge">Beta</span> Version 0.5.0</p>
+      <h1 id="about-title">mpckit</h1>
+      <p class="lede">
+        Build Akai MPC Sample projects on your computer.
+      </p>
+      <p>
+        Drop WAV files onto pads, tune them, set mute groups and sequences,
+        then export a project the device opens as it is. mpckit can also load
+        a project saved on the device, so you can change it on a bigger screen
+        and send it back.
+      </p>
+      <div class="actions">
+        <a class="button" href="#download">Download</a>
+        <a class="button secondary" href="https://git.monoexp.com/bajdev/mpckit">Source</a>
+      </div>
+    </section>
+
+    <!-- Screenshot of the main window goes here (images/main.png). -->
+    <figure class="shot placeholder" aria-hidden="true">
+      <span>Screenshot</span>
+    </figure>
+
+    <section id="features" aria-labelledby="features-title">
+      <h2 id="features-title" class="section-title">Features</h2>
+      <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>
+        </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>
+        </li>
+        <li class="card">
+          <h3>Sequences</h3>
+          <p>Set up each sequence's name, tempo and length. 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>
+        </li>
+      </ul>
+    </section>
+
+    <section id="download" aria-labelledby="download-title">
+      <h2 id="download-title" class="section-title">Download</h2>
+      <p class="note">
+        <strong>0.5.0 is a beta for testing.</strong> Expect rough edges, and keep
+        copies of projects you care about. Downloads will be listed here;
+        until then, mpckit can be built from source.
+      </p>
+      <ul class="cards">
+        <li class="card">
+          <div class="card-head"><h3>Windows</h3><span class="tag">10 &middot; 11</span></div>
+          <p>Run <code>mpckit.exe</code>. If SmartScreen says &ldquo;Windows protected your PC&rdquo;, choose <strong>More info</strong>, then <strong>Run anyway</strong>. Uses the WebView2 runtime, which current Windows includes.</p>
+        </li>
+        <li class="card">
+          <div class="card-head"><h3>macOS</h3><span class="tag">.app</span></div>
+          <p>Move <code>mpckit.app</code> to Applications and open it. When macOS says it can't check the app, open <strong>System Settings &rarr; Privacy &amp; Security</strong> and choose <strong>Open Anyway</strong>.</p>
+        </li>
+        <li class="card">
+          <div class="card-head"><h3>Linux</h3><span class="tag">GTK 4</span></div>
+          <p>Make the file executable (<code>chmod +x mpckit</code>) and run it. Needs the GTK 4 and WebKitGTK 6.0 libraries from your distribution.</p>
+        </li>
+        <li class="card">
+          <div class="card-head"><h3>From source</h3><span class="tag">Go &middot; Wails</span></div>
+          <p>Go 1.26, Node.js and the Wails v3 CLI. The <a href="https://git.monoexp.com/bajdev/mpckit">README</a> has the steps.</p>
+        </li>
+      </ul>
+      <p class="small">Builds aren't signed yet, which is why each system warns the first time you open mpckit.</p>
+    </section>
+
+    <section id="disclaimer" aria-labelledby="disclaimer-title">
+      <h2 id="disclaimer-title" class="section-title">Disclaimer</h2>
+      <p class="small">
+        mpckit is an independent project. It is not affiliated with, endorsed by
+        or supported by Akai Professional or inMusic Brands. Akai, MPC and MPC
+        Sample are trademarks of their respective owners and are used here only
+        to describe the device mpckit works with.
+      </p>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <p>mpckit is MIT licensed &middot; A <a href="https://monoexp.com/">Mono Experiments</a> project &middot; <a href="https://git.monoexp.com/bajdev/mpckit-site">Source for this site</a></p>
+    </div>
+  </footer>
+</body>
+</html>

public/style.css

@@ -0,0 +1,212 @@
+/* mpckit.monoexp.com — one stylesheet, no framework.
+   Based on monoexp.com's; the amber accent is the app's. */
+
+:root {
+  --bg: #fafaf9;
+  --surface: #ffffff;
+  --text: #1c1c1a;
+  --muted: #5f5f5a;
+  --border: #e4e4e0;
+  --accent: #1c1c1a;
+  --tag-bg: #f0f0ed;
+  --focus: #2f6fdb;
+  --amber: #b86e00;
+  --amber-bg: #fdf1dc;
+
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --radius: 10px;
+  --max: 760px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #121211;
+    --surface: #1a1a19;
+    --text: #ececea;
+    --muted: #a3a39e;
+    --border: #2c2c2a;
+    --accent: #ececea;
+    --tag-bg: #252524;
+    --focus: #7aa7f5;
+    --amber: #f5a524;
+    --amber-bg: #2e2412;
+  }
+}
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 17px/1.6 var(--sans);
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color: inherit; text-underline-offset: 3px; }
+a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
+
+.wrap {
+  max-width: var(--max);
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+/* Header */
+.site-header { border-bottom: 1px solid var(--border); }
+.header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 64px;
+}
+.wordmark {
+  font: 600 18px/1 var(--mono);
+  letter-spacing: -0.02em;
+  text-decoration: none;
+}
+.wordmark span { color: var(--amber); }
+nav { display: flex; gap: 20px; }
+nav a {
+  font-size: 15px;
+  color: var(--muted);
+  text-decoration: none;
+}
+nav a:hover { color: var(--text); }
+
+/* About */
+.about { padding: 56px 0 40px; }
+.about h1 { font-family: var(--mono); }
+.about h1 {
+  margin: 0 0 12px;
+  font-size: clamp(30px, 6vw, 42px);
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+}
+.about p { margin: 0 0 14px; color: var(--muted); max-width: 62ch; }
+.about .lede { font-size: 20px; color: var(--text); }
+
+/* Hero extras */
+.eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 0 0 14px !important;
+  font: 13px/1 var(--mono);
+  color: var(--muted);
+}
+.badge {
+  font: 600 12px/1 var(--mono);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--amber);
+  background: var(--amber-bg);
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
+.button {
+  display: inline-block;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  background: var(--text);
+  color: var(--bg);
+  border: 1px solid var(--text);
+}
+.button:hover { opacity: 0.85; }
+.button.secondary { background: transparent; color: var(--text); border-color: var(--border); }
+.button.secondary:hover { opacity: 1; border-color: var(--accent); }
+
+/* Screenshot */
+.shot {
+  margin: 0 0 48px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  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);
+  color: var(--muted);
+}
+
+/* Sections */
+main section:not(.about) { padding-bottom: 48px; scroll-margin-top: 16px; }
+.section-title {
+  margin: 0 0 16px;
+  font: 600 13px/1 var(--mono);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+.note { margin: 0 0 16px; color: var(--muted); font-size: 15.5px; }
+.note strong { color: var(--text); }
+.small { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
+#disclaimer .small { margin-top: 0; max-width: 62ch; }
+code {
+  font: 0.88em var(--mono);
+  background: var(--tag-bg);
+  padding: 2px 5px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+/* Cards */
+.cards {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+@media (min-width: 640px) {
+  .cards { grid-template-columns: 1fr 1fr; }
+}
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+}
+.card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
+.card-head h3 { margin: 0; }
+.card p { margin: 0; color: var(--muted); font-size: 15.5px; }
+.card strong { color: var(--text); font-weight: 600; }
+.tag {
+  flex-shrink: 0;
+  font: 12px/1 var(--mono);
+  color: var(--muted);
+  background: var(--tag-bg);
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+
+/* Footer */
+.site-footer { border-top: 1px solid var(--border); }
+.site-footer p { margin: 0; padding: 24px 0 32px; font-size: 14px; color: var(--muted); }

pull-releases/001-first-site/README.md

@@ -0,0 +1,18 @@
+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/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).
+- `README.md`, `pull-releases/`: how to preview and deploy; this record.
+
+## Notes
+
+- No download links yet: the page says builds will be listed there and points to the source until then.
+- Source links point to git.monoexp.com/bajdev/mpckit until the app repository moves.
+
+## Testing
+
+- Served `public/` locally and checked desktop, mobile, light and dark screenshots.

pull-releases/README.md

@@ -0,0 +1,7 @@
+# Pull releases
+
+One folder per pull request, with a README whose first line is the PR title.
+
+| # | PR | Branch |
+|---|----|--------|
+| 001 | [First version of the site](001-first-site/README.md) | feature/first-site |