scaffold the app: tauri crate, vite front end, icons, ci
No files matched your search
|
After Width: | Height: | Size: 331 KiB |
|
After Width: | Height: | Size: 412 KiB |
|
After Width: | Height: | Size: 291 KiB |
|
After Width: | Height: | Size: 463 KiB |
|
After Width: | Height: | Size: 470 KiB |
|
After Width: | Height: | Size: 600 KiB |
|
After Width: | Height: | Size: 341 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 203 KiB |
@@ -0,0 +1,47 @@
|
||||
#!/usr/bin/env bash
|
||||
# Renders every mockup in src/ to a PNG beside this script, at 2x. The fonts come from the
|
||||
# sibling margin repo's shared package, so nothing binary is vendored here, and Playwright comes
|
||||
# from the calendar repo's node_modules, where chromium is already installed.
|
||||
set -euo pipefail
|
||||
|
||||
here="$(cd "$(dirname "$0")" && pwd)"
|
||||
fonts="$here/../../../../python/margin/shared/fonts"
|
||||
runner="$here/../../../../python/margin-caledar"
|
||||
work="$(mktemp -d)"
|
||||
trap 'rm -rf "$work"' EXIT
|
||||
|
||||
cp "$here"/src/*.html "$here"/src/*.css "$work"/
|
||||
mkdir -p "$work/fonts"
|
||||
cp "$fonts"/HankenGrotesk-VF.ttf "$fonts"/HankenGrotesk-Italic-VF.ttf \
|
||||
"$fonts"/Literata-VF.ttf "$fonts"/Literata-Italic-VF.ttf "$work/fonts/"
|
||||
|
||||
only="${1:-}"
|
||||
|
||||
NODE_PATH="$runner/node_modules" node - "$work" "$here" "$only" <<'EOF'
|
||||
const { chromium } = require("@playwright/test");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const [work, out, only] = process.argv.slice(2);
|
||||
|
||||
(async () => {
|
||||
const browser = await chromium.launch();
|
||||
const files = fs.readdirSync(work).filter((f) => f.endsWith(".html"));
|
||||
for (const file of files) {
|
||||
const name = file.replace(/\.html$/, "");
|
||||
if (only && name !== only) continue;
|
||||
const phone = name.startsWith("phone-");
|
||||
const context = await browser.newContext({
|
||||
viewport: phone ? { width: 390, height: 844 } : { width: 1440, height: 900 },
|
||||
deviceScaleFactor: 2,
|
||||
});
|
||||
const page = await context.newPage();
|
||||
await page.goto("file://" + path.join(work, file));
|
||||
await page.evaluate(() => document.fonts.ready);
|
||||
await page.waitForTimeout(300);
|
||||
await page.screenshot({ path: path.join(out, name + ".png") });
|
||||
await context.close();
|
||||
console.log("rendered " + name + ".png");
|
||||
}
|
||||
await browser.close();
|
||||
})();
|
||||
EOF
|
||||
|
After Width: | Height: | Size: 223 KiB |
@@ -0,0 +1,211 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Compose</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option" data-active="true"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="list-col">
|
||||
<div class="list-head">
|
||||
<h1 class="list-title">Inbox</h1>
|
||||
<button class="pill"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>Screen 3 new senders<span class="key">6</span></button>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="section">New for you</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="2">MR</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Maya Raghunathan</span><span class="row-count">3</span><span class="row-time">11:42</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Dinner on Thursday?</span><span class="row-snippet">Priya said the place on Church Street takes bookings now, want me to</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new data-selected>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Arun Kulkarni</span><span class="row-time">10:15</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Re: Lease renewal for the studio</span><span class="row-snippet">Attached the revised draft. The only change is clause 7, which now</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-brand>Ai</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Airbnb</span><span class="row-time">09:03</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your reservation in Lisbon is confirmed</span><span class="row-snippet">Check-in Friday 12 September after 15:00. Your host Inês will send</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="7">SO</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Sam Okafor</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Piano lessons, the form you sent</span><span class="row-snippet">Got it, thank you. Wednesdays at five work for us. Is there a</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seen">
|
||||
<div class="section">Previously seen</div>
|
||||
|
||||
<div class="row" data-noted>
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="5">LB</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Lena Brandt</span><span class="row-count">7</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Kitchen bench quote</span><span class="row-snippet">Sounds good, Julie. Any afternoon next week works for me.</span></div>
|
||||
</div>
|
||||
<div class="row-note">Ask about the oak finish before confirming</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="3">DP</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Dev Patel</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Slides from the talk</span><span class="row-snippet">Here they are, plus the reading list I mentioned. The paper on</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Ds</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">DocuSign</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Completed: Studio lease 2026</span><span class="row-snippet">All parties have completed the envelope. You can access the</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="8">HW</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Hannah Weiss</span><span class="row-count">2</span><span class="row-time">Sun</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Photos from the Hawaii trip</span><span class="row-snippet">Finally went through them all. The ones from the ridge walk are</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="1">RY</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Russell Young</span><span class="row-time">30 Aug</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Pumpkin bread recipe</span><span class="row-snippet">From my mother's card, transcribed as best I could. Bake at 175</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piles">
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="2"></div>
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">4</span></div>
|
||||
<div class="pile-subject">Re: Cooper's parent-teacher conference</div>
|
||||
<div class="pile-from">Jeff Wolfe, and 2 more</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">5</span></div>
|
||||
<div class="pile-subject">Les Misérables tickets</div>
|
||||
<div class="pile-from">Caroline Bauhaus, and 1 more</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pane">
|
||||
<div class="pane-empty">Nothing selected</div>
|
||||
</section>
|
||||
|
||||
<div class="compose">
|
||||
<div class="compose-head">
|
||||
<h2>New message</h2>
|
||||
<button class="icon-button" title="Expand"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/></svg></button>
|
||||
<button class="icon-button" title="Close"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="compose-field">
|
||||
<span class="lab">From</span>
|
||||
<div class="chips">
|
||||
<span class="chip"><span class="avatar" data-hue="4">PJ</span>[email protected]<svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compose-field">
|
||||
<span class="lab">To</span>
|
||||
<div class="chips">
|
||||
<span class="chip"><span class="avatar" data-hue="2">MR</span>Maya Raghunathan</span>
|
||||
</div>
|
||||
<span class="more">Cc · Bcc</span>
|
||||
</div>
|
||||
<div class="compose-field">
|
||||
<span class="lab">Subject</span>
|
||||
<span>Thursday</span>
|
||||
</div>
|
||||
<div class="compose-body">
|
||||
<p>Maya, Thursday works. Church Street at eight?</p>
|
||||
<p>I will book it if you do not mind the walk from the station.<span class="caret"></span></p>
|
||||
</div>
|
||||
<div class="compose-foot">
|
||||
<button class="button" data-variant="primary">Send<span class="key">⌘↩</span></button>
|
||||
<button class="button" data-variant="ghost">Remind me if no reply</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="icon-button" title="Attach"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-clip"/></svg></button>
|
||||
<span style="color:var(--ink-faint);font-size:var(--t-1)">Undo send: 10 s</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast">Sent to Arun Kulkarni<button class="toast-action">Undo<span class="key">z</span></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Feed</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option" data-active="true"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<div class="feed">
|
||||
<div class="feed-inner">
|
||||
<div class="banner">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>
|
||||
<span>Images are loaded through Margin, never from the sender. Trackers stripped from <b>2 items</b> today.</span>
|
||||
</div>
|
||||
|
||||
<article class="feed-card">
|
||||
<div class="feed-head">
|
||||
<span class="avatar" data-brand>Tb</span>
|
||||
<div class="msg-who"><div class="msg-name">The Browser<span class="addr">[email protected]</span></div></div>
|
||||
<div class="msg-time">Today 06:00</div>
|
||||
</div>
|
||||
<h2 class="feed-title">Five things worth reading this weekend</h2>
|
||||
<div class="feed-body">
|
||||
<div class="feed-hero"></div>
|
||||
<p>Good morning. It is a long weekend in some places and a wet one in most, so this edition leans toward pieces you can settle into. A long piece on the history of the pencil, a short one on why bridges hum, and three more.</p>
|
||||
<p><b>The pencil, at length.</b> Henry Petroski wrote a whole book about the pencil and this essay is the argument for why that was a reasonable thing to do. Graphite, cedar, the Napoleonic wars and a factory in Nuremberg that still runs. Forty minutes, worth every one.</p>
|
||||
<p><b>Why bridges hum.</b> A short explanation of vortex shedding from an engineer who spent a career listening to cables. Includes the story of a footbridge that was closed for two years because it sang in a particular wind.</p>
|
||||
<p><b>The last typewriter repairman in Mumbai.</b> A profile that is really about what it means to keep a trade going after the trade has gone.</p>
|
||||
<div class="feed-fade"></div>
|
||||
</div>
|
||||
<div class="feed-foot">
|
||||
<button class="button">Read more<span class="key">↩</span></button>
|
||||
<button class="button">Save clip</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="button" data-variant="ghost">Unsubscribe</button>
|
||||
<button class="button" data-variant="ghost">Move<span class="key">v</span></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="left-off">You left off here</div>
|
||||
|
||||
<article class="feed-card">
|
||||
<div class="feed-head">
|
||||
<span class="avatar" data-brand>Fn</span>
|
||||
<div class="msg-who"><div class="msg-name">Field Notes Dispatch<span class="addr">[email protected]</span></div></div>
|
||||
<div class="msg-time">Mon 09:30</div>
|
||||
</div>
|
||||
<h2 class="feed-title">September: the notebook that survived a washing machine</h2>
|
||||
<div class="feed-body" data-open>
|
||||
<p>A reader in Tromsø sent us a photo of a pocket notebook that went through a full cycle at forty degrees, in a coat, with the coat. Every page is still legible.</p>
|
||||
<p>Also this month: the autumn edition ships on the 15th. Three colours, the usual count.</p>
|
||||
</div>
|
||||
<div class="feed-foot">
|
||||
<button class="button">See less<span class="key">↩</span></button>
|
||||
<button class="button">Save clip</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="button" data-variant="ghost">Unsubscribe</button>
|
||||
<button class="button" data-variant="ghost">Move<span class="key">v</span></button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="feed-card" data-collapsed>
|
||||
<div class="feed-head">
|
||||
<span class="avatar" data-brand>Ll</span>
|
||||
<div class="msg-who"><div class="msg-name">Ledger Lines<span class="addr">[email protected]</span></div></div>
|
||||
<div class="msg-time">30 Aug</div>
|
||||
</div>
|
||||
<h2 class="feed-title">The bond market, again</h2>
|
||||
<div class="feed-foot">
|
||||
<button class="button">Read more<span class="key">↩</span></button>
|
||||
<button class="button">Save clip</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="button" data-variant="ghost">Unsubscribe</button>
|
||||
<button class="button" data-variant="ghost">Move<span class="key">v</span></button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Focus & Reply</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="focus">
|
||||
<div class="focus-inner">
|
||||
<div class="screen-intro">
|
||||
<h1>Focus & Reply</h1>
|
||||
<p>Every thread in Reply later, each with its own reply box. Send, or move on to the next.</p>
|
||||
</div>
|
||||
<div class="focus-hint">
|
||||
<span>2 left</span>
|
||||
<span>·</span>
|
||||
<span class="key">Tab</span><span>next</span>
|
||||
<span>·</span>
|
||||
<span class="key">⌘↩</span><span>send</span>
|
||||
<span>·</span>
|
||||
<span class="key">Esc</span><span>back</span>
|
||||
</div>
|
||||
|
||||
<div class="focus-item" data-sent>
|
||||
<div class="focus-sent">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
<span>Sent to <b>Robyn Madison</b> · You have an invitation from Robyn Madison</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="focus-item" data-active>
|
||||
<div class="focus-read">
|
||||
<h2 class="thread-subject">Re: Cooper's parent-teacher conference</h2>
|
||||
<div class="msg">
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="7">JW</span>
|
||||
<div class="msg-who"><div class="msg-name">Jeff Wolfe<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
|
||||
<div class="msg-time">Yesterday 16:02</div>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<p>Mr. and Mrs. Young, this is just a reminder to schedule your parent-teacher conference with me. You can feel free to do that here.</p>
|
||||
<p>If you would prefer a video call instead of meeting at school, I am happy to do that as well. Please let me know what date and time works best for you.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="focus-write">
|
||||
<div class="reply">
|
||||
<div class="reply-head">Reply to <b>Jeff Wolfe</b></div>
|
||||
<div class="reply-body">Thanks Jeff. Wednesday at 4pm in person would suit us, if that is still open.<span class="caret"></span></div>
|
||||
<div class="reply-foot">
|
||||
<button class="button" data-variant="primary">Send<span class="key">⌘↩</span></button>
|
||||
<button class="button" data-variant="ghost">Skip<span class="key">Tab</span></button>
|
||||
<span class="spacer"></span>
|
||||
<button class="icon-button" title="Attach"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-clip"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="focus-item">
|
||||
<div class="focus-read">
|
||||
<h2 class="thread-subject">Re: Life insurance quote</h2>
|
||||
<div class="msg">
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="5">TM</span>
|
||||
<div class="msg-who"><div class="msg-name">Todd Markham<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
|
||||
<div class="msg-time">Mon 09:48</div>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<p>Following up on the quote I sent through last week for the twenty year term policy. If the premium looks right, I can start the paperwork whenever you are ready.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="focus-write">
|
||||
<div class="reply">
|
||||
<div class="reply-head">Reply to <b>Todd Markham</b></div>
|
||||
<div class="reply-body"><span class="placeholder">Write a reply</span></div>
|
||||
<div class="reply-foot">
|
||||
<button class="button" data-variant="primary">Send<span class="key">⌘↩</span></button>
|
||||
<button class="button" data-variant="ghost">Skip<span class="key">Tab</span></button>
|
||||
<span class="spacer"></span>
|
||||
<button class="icon-button" title="Attach"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-clip"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,244 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Inbox, dark</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option" data-active="true"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="list-col">
|
||||
<div class="list-head">
|
||||
<h1 class="list-title">Inbox</h1>
|
||||
<button class="pill"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>Screen 3 new senders<span class="key">6</span></button>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="section">New for you</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="2">MR</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Maya Raghunathan</span><span class="row-count">3</span><span class="row-time">11:42</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Dinner on Thursday?</span><span class="row-snippet">Priya said the place on Church Street takes bookings now, want me to</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new data-selected>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Arun Kulkarni</span><span class="row-time">10:15</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Re: Lease renewal for the studio</span><span class="row-snippet">Attached the revised draft. The only change is clause 7, which now</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-brand>Ai</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Airbnb</span><span class="row-time">09:03</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your reservation in Lisbon is confirmed</span><span class="row-snippet">Check-in Friday 12 September after 15:00. Your host Inês will send</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="7">SO</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Sam Okafor</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Piano lessons, the form you sent</span><span class="row-snippet">Got it, thank you. Wednesdays at five work for us. Is there a</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seen">
|
||||
<div class="section">Previously seen</div>
|
||||
|
||||
<div class="row" data-noted>
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="5">LB</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Lena Brandt</span><span class="row-count">7</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Kitchen bench quote</span><span class="row-snippet">Sounds good, Julie. Any afternoon next week works for me.</span></div>
|
||||
</div>
|
||||
<div class="row-note">Ask about the oak finish before confirming</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="3">DP</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Dev Patel</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Slides from the talk</span><span class="row-snippet">Here they are, plus the reading list I mentioned. The paper on</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Ds</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">DocuSign</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Completed: Studio lease 2026</span><span class="row-snippet">All parties have completed the envelope. You can access the</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="8">HW</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Hannah Weiss</span><span class="row-count">2</span><span class="row-time">Sun</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Photos from the Hawaii trip</span><span class="row-snippet">Finally went through them all. The ones from the ridge walk are</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="1">RY</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Russell Young</span><span class="row-time">30 Aug</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Pumpkin bread recipe</span><span class="row-snippet">From my mother's card, transcribed as best I could. Bake at 175</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piles">
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="2"></div>
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">4</span></div>
|
||||
<div class="pile-subject">Re: Cooper's parent-teacher conference</div>
|
||||
<div class="pile-from">Jeff Wolfe, and 2 more</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">5</span></div>
|
||||
<div class="pile-subject">Les Misérables tickets</div>
|
||||
<div class="pile-from">Caroline Bauhaus, and 1 more</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pane">
|
||||
<div class="pane-bar">
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-reply"/></svg>Reply<span class="key">r</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">l</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">s</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-snooze"/></svg>Snooze<span class="key">b</span></button>
|
||||
<span class="spacer"></span>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-archive"/></svg>Archive<span class="key">e</span></button>
|
||||
<button class="icon-button" title="More ."><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="thread">
|
||||
<div class="thread-inner">
|
||||
<div class="thread-head">
|
||||
<h1 class="thread-subject">Lease renewal for the studio</h1>
|
||||
<div class="thread-meta">
|
||||
<span class="avatars"><span class="avatar" data-hue="6">AK</span><span class="avatar" data-hue="4">PJ</span></span>
|
||||
<span>Arun Kulkarni and you</span>
|
||||
<span>·</span>
|
||||
<span>2 messages</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>
|
||||
<span>Blocked <b>1 tracker</b> from HubSpot. Remote images are off for this sender.</span>
|
||||
<button class="banner-action">Show images</button>
|
||||
</div>
|
||||
|
||||
<div class="msg" data-collapsed>
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
<div class="msg-who"><div class="msg-name">You</div><div class="msg-preview">Hi Arun, thanks for sending the renewal over. Two things before I sign: the notice period in clause 7 and</div></div>
|
||||
<div class="msg-time">Mon 14:20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg">
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="msg-who"><div class="msg-name">Arun Kulkarni<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
|
||||
<div class="msg-time">Today 10:15</div>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<p>Hi Priyanshu,</p>
|
||||
<p>Attached the revised draft. The only change is clause 7, which now reads three months either side rather than six. The rent review in clause 12 stays as it was, tied to the index and capped at four percent.</p>
|
||||
<p>If that works, sign when you get a moment and I will countersign the same day. Happy to walk through anything on a call, Thursday afternoon is open.</p>
|
||||
<p>Best,<br>Arun</p>
|
||||
<span class="quoted">··· Show quoted text</span>
|
||||
<div class="attachments">
|
||||
<div class="attachment"><span class="ext">PDF</span>Studio-lease-2026-v2.pdf<span class="size">412 KB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<span class="note-label">Note to self</span>
|
||||
Check the four percent cap against last year's index before signing. Ask Maya if she still has the 2024 letter.
|
||||
</div>
|
||||
|
||||
<div class="reply">
|
||||
<div class="reply-head">Reply to <b>Arun Kulkarni</b><span style="margin-left:auto" class="key">a</span><span style="color:var(--ink-faint)">reply all</span></div>
|
||||
<div class="reply-body">Thanks Arun, three months works. One more question on clause 12<span class="caret"></span></div>
|
||||
<div class="reply-foot">
|
||||
<button class="button" data-variant="primary">Send<span class="key">⌘↩</span></button>
|
||||
<button class="button" data-variant="ghost">Remind me if no reply</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="icon-button" title="Attach"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-clip"/></svg></button>
|
||||
<button class="icon-button" title="Note"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-note"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,244 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Inbox</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option" data-active="true"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="list-col">
|
||||
<div class="list-head">
|
||||
<h1 class="list-title">Inbox</h1>
|
||||
<button class="pill"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>Screen 3 new senders<span class="key">6</span></button>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="section">New for you</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="2">MR</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Maya Raghunathan</span><span class="row-count">3</span><span class="row-time">11:42</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Dinner on Thursday?</span><span class="row-snippet">Priya said the place on Church Street takes bookings now, want me to</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new data-selected>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Arun Kulkarni</span><span class="row-time">10:15</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Re: Lease renewal for the studio</span><span class="row-snippet">Attached the revised draft. The only change is clause 7, which now</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-brand>Ai</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Airbnb</span><span class="row-time">09:03</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your reservation in Lisbon is confirmed</span><span class="row-snippet">Check-in Friday 12 September after 15:00. Your host Inês will send</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="7">SO</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Sam Okafor</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Piano lessons, the form you sent</span><span class="row-snippet">Got it, thank you. Wednesdays at five work for us. Is there a</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seen">
|
||||
<div class="section">Previously seen</div>
|
||||
|
||||
<div class="row" data-noted>
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="5">LB</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Lena Brandt</span><span class="row-count">7</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Kitchen bench quote</span><span class="row-snippet">Sounds good, Julie. Any afternoon next week works for me.</span></div>
|
||||
</div>
|
||||
<div class="row-note">Ask about the oak finish before confirming</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="3">DP</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Dev Patel</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Slides from the talk</span><span class="row-snippet">Here they are, plus the reading list I mentioned. The paper on</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Ds</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">DocuSign</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Completed: Studio lease 2026</span><span class="row-snippet">All parties have completed the envelope. You can access the</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="8">HW</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Hannah Weiss</span><span class="row-count">2</span><span class="row-time">Sun</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Photos from the Hawaii trip</span><span class="row-snippet">Finally went through them all. The ones from the ridge walk are</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="1">RY</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Russell Young</span><span class="row-time">30 Aug</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Pumpkin bread recipe</span><span class="row-snippet">From my mother's card, transcribed as best I could. Bake at 175</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piles">
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="2"></div>
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">4</span></div>
|
||||
<div class="pile-subject">Re: Cooper's parent-teacher conference</div>
|
||||
<div class="pile-from">Jeff Wolfe, and 2 more</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">5</span></div>
|
||||
<div class="pile-subject">Les Misérables tickets</div>
|
||||
<div class="pile-from">Caroline Bauhaus, and 1 more</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pane">
|
||||
<div class="pane-bar">
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-reply"/></svg>Reply<span class="key">r</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">l</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">s</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-snooze"/></svg>Snooze<span class="key">b</span></button>
|
||||
<span class="spacer"></span>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-archive"/></svg>Archive<span class="key">e</span></button>
|
||||
<button class="icon-button" title="More ."><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="thread">
|
||||
<div class="thread-inner">
|
||||
<div class="thread-head">
|
||||
<h1 class="thread-subject">Lease renewal for the studio</h1>
|
||||
<div class="thread-meta">
|
||||
<span class="avatars"><span class="avatar" data-hue="6">AK</span><span class="avatar" data-hue="4">PJ</span></span>
|
||||
<span>Arun Kulkarni and you</span>
|
||||
<span>·</span>
|
||||
<span>2 messages</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>
|
||||
<span>Blocked <b>1 tracker</b> from HubSpot. Remote images are off for this sender.</span>
|
||||
<button class="banner-action">Show images</button>
|
||||
</div>
|
||||
|
||||
<div class="msg" data-collapsed>
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
<div class="msg-who"><div class="msg-name">You</div><div class="msg-preview">Hi Arun, thanks for sending the renewal over. Two things before I sign: the notice period in clause 7 and</div></div>
|
||||
<div class="msg-time">Mon 14:20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg">
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="msg-who"><div class="msg-name">Arun Kulkarni<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
|
||||
<div class="msg-time">Today 10:15</div>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<p>Hi Priyanshu,</p>
|
||||
<p>Attached the revised draft. The only change is clause 7, which now reads three months either side rather than six. The rent review in clause 12 stays as it was, tied to the index and capped at four percent.</p>
|
||||
<p>If that works, sign when you get a moment and I will countersign the same day. Happy to walk through anything on a call, Thursday afternoon is open.</p>
|
||||
<p>Best,<br>Arun</p>
|
||||
<span class="quoted">··· Show quoted text</span>
|
||||
<div class="attachments">
|
||||
<div class="attachment"><span class="ext">PDF</span>Studio-lease-2026-v2.pdf<span class="size">412 KB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<span class="note-label">Note to self</span>
|
||||
Check the four percent cap against last year's index before signing. Ask Maya if she still has the 2024 letter.
|
||||
</div>
|
||||
|
||||
<div class="reply">
|
||||
<div class="reply-head">Reply to <b>Arun Kulkarni</b><span style="margin-left:auto" class="key">a</span><span style="color:var(--ink-faint)">reply all</span></div>
|
||||
<div class="reply-body">Thanks Arun, three months works. One more question on clause 12<span class="caret"></span></div>
|
||||
<div class="reply-foot">
|
||||
<button class="button" data-variant="primary">Send<span class="key">⌘↩</span></button>
|
||||
<button class="button" data-variant="ghost">Remind me if no reply</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="icon-button" title="Attach"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-clip"/></svg></button>
|
||||
<button class="icon-button" title="Note"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-note"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,278 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Palette</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option" data-active="true"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="list-col">
|
||||
<div class="list-head">
|
||||
<h1 class="list-title">Inbox</h1>
|
||||
<button class="pill"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>Screen 3 new senders<span class="key">6</span></button>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="section">New for you</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="2">MR</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Maya Raghunathan</span><span class="row-count">3</span><span class="row-time">11:42</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Dinner on Thursday?</span><span class="row-snippet">Priya said the place on Church Street takes bookings now, want me to</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new data-selected>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Arun Kulkarni</span><span class="row-time">10:15</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Re: Lease renewal for the studio</span><span class="row-snippet">Attached the revised draft. The only change is clause 7, which now</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-brand>Ai</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Airbnb</span><span class="row-time">09:03</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your reservation in Lisbon is confirmed</span><span class="row-snippet">Check-in Friday 12 September after 15:00. Your host Inês will send</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="7">SO</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Sam Okafor</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Piano lessons, the form you sent</span><span class="row-snippet">Got it, thank you. Wednesdays at five work for us. Is there a</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seen">
|
||||
<div class="section">Previously seen</div>
|
||||
|
||||
<div class="row" data-noted>
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="5">LB</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Lena Brandt</span><span class="row-count">7</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Kitchen bench quote</span><span class="row-snippet">Sounds good, Julie. Any afternoon next week works for me.</span></div>
|
||||
</div>
|
||||
<div class="row-note">Ask about the oak finish before confirming</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="3">DP</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Dev Patel</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Slides from the talk</span><span class="row-snippet">Here they are, plus the reading list I mentioned. The paper on</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Ds</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">DocuSign</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Completed: Studio lease 2026</span><span class="row-snippet">All parties have completed the envelope. You can access the</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="8">HW</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Hannah Weiss</span><span class="row-count">2</span><span class="row-time">Sun</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Photos from the Hawaii trip</span><span class="row-snippet">Finally went through them all. The ones from the ridge walk are</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="1">RY</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Russell Young</span><span class="row-time">30 Aug</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Pumpkin bread recipe</span><span class="row-snippet">From my mother's card, transcribed as best I could. Bake at 175</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piles">
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="2"></div>
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">4</span></div>
|
||||
<div class="pile-subject">Re: Cooper's parent-teacher conference</div>
|
||||
<div class="pile-from">Jeff Wolfe, and 2 more</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">5</span></div>
|
||||
<div class="pile-subject">Les Misérables tickets</div>
|
||||
<div class="pile-from">Caroline Bauhaus, and 1 more</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pane">
|
||||
<div class="pane-bar">
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-reply"/></svg>Reply<span class="key">r</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">l</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">s</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-snooze"/></svg>Snooze<span class="key">b</span></button>
|
||||
<span class="spacer"></span>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-archive"/></svg>Archive<span class="key">e</span></button>
|
||||
<button class="icon-button" title="More ."><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="thread">
|
||||
<div class="thread-inner">
|
||||
<div class="thread-head">
|
||||
<h1 class="thread-subject">Lease renewal for the studio</h1>
|
||||
<div class="thread-meta">
|
||||
<span class="avatars"><span class="avatar" data-hue="6">AK</span><span class="avatar" data-hue="4">PJ</span></span>
|
||||
<span>Arun Kulkarni and you</span>
|
||||
<span>·</span>
|
||||
<span>2 messages</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>
|
||||
<span>Blocked <b>1 tracker</b> from HubSpot. Remote images are off for this sender.</span>
|
||||
<button class="banner-action">Show images</button>
|
||||
</div>
|
||||
|
||||
<div class="msg" data-collapsed>
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
<div class="msg-who"><div class="msg-name">You</div><div class="msg-preview">Hi Arun, thanks for sending the renewal over. Two things before I sign: the notice period in clause 7 and</div></div>
|
||||
<div class="msg-time">Mon 14:20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg">
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="msg-who"><div class="msg-name">Arun Kulkarni<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
|
||||
<div class="msg-time">Today 10:15</div>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<p>Hi Priyanshu,</p>
|
||||
<p>Attached the revised draft. The only change is clause 7, which now reads three months either side rather than six. The rent review in clause 12 stays as it was, tied to the index and capped at four percent.</p>
|
||||
<p>If that works, sign when you get a moment and I will countersign the same day. Happy to walk through anything on a call, Thursday afternoon is open.</p>
|
||||
<p>Best,<br>Arun</p>
|
||||
<span class="quoted">··· Show quoted text</span>
|
||||
<div class="attachments">
|
||||
<div class="attachment"><span class="ext">PDF</span>Studio-lease-2026-v2.pdf<span class="size">412 KB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="note">
|
||||
<span class="note-label">Note to self</span>
|
||||
Check the four percent cap against last year's index before signing. Ask Maya if she still has the 2024 letter.
|
||||
</div>
|
||||
|
||||
<div class="reply">
|
||||
<div class="reply-head">Reply to <b>Arun Kulkarni</b><span style="margin-left:auto" class="key">a</span><span style="color:var(--ink-faint)">reply all</span></div>
|
||||
<div class="reply-body">Thanks Arun, three months works. One more question on clause 12<span class="caret"></span></div>
|
||||
<div class="reply-foot">
|
||||
<button class="button" data-variant="primary">Send<span class="key">⌘↩</span></button>
|
||||
<button class="button" data-variant="ghost">Remind me if no reply</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="icon-button" title="Attach"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-clip"/></svg></button>
|
||||
<button class="icon-button" title="Note"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-note"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overlay" data-align="top">
|
||||
<div class="panel palette">
|
||||
<input class="palette-input" placeholder="Go to a place, run a command, or find a person" value="">
|
||||
<ul class="palette-list">
|
||||
<li class="palette-group">Places</li>
|
||||
<li class="palette-row"><span class="palette-label">Inbox</span><span class="palette-keys"><span class="key">1</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Feed</span><span class="palette-keys"><span class="key">2</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Paper Trail</span><span class="palette-keys"><span class="key">3</span></span></li>
|
||||
<li class="palette-row" data-active><span class="palette-label">Reply later</span><span class="palette-keys"><span class="key">4</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Set aside</span><span class="palette-keys"><span class="key">5</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Screener</span><span class="palette-keys"><span class="key">6</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Snoozed</span><span class="palette-keys"><span class="key">7</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Everything</span><span class="palette-keys"><span class="key">0</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Sent</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Drafts</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">All files</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Clips</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Contacts</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Screened out</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Trash</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-group">Actions</li>
|
||||
<li class="palette-row"><span class="palette-label">Write</span><span class="palette-keys"><span class="key">c</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Search</span><span class="palette-keys"><span class="key">/</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Toggle reading pane</span><span class="palette-keys"><span class="key">⌘\</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Focus & Reply</span><span class="palette-keys"><span class="key">⇧F</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Start fresh…</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Dark mode</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Add account</span><span class="palette-keys"></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Settings</span><span class="palette-keys"><span class="key">⌘,</span></span></li>
|
||||
<li class="palette-row"><span class="palette-label">Keyboard shortcuts</span><span class="palette-keys"><span class="key">?</span></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,201 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Paper Trail</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
<symbol id="i-inbox" viewBox="0 0 24 24"><path d="M3 13h5l2 3h4l2-3h5"/><path d="M5 5h14l2 8v6H3v-6z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option" data-active="true"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="list-col">
|
||||
<div class="list-head">
|
||||
<h1 class="list-title">Paper Trail</h1>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="section">This week</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Sp</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Spotify</span><span class="row-time">06:30</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your receipt</span><span class="row-snippet">Thank you for purchasing Spotify Premium. Amount charged</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-selected>
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>CP</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">City Power</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Bill payment pending</span><span class="row-snippet">Your one-time payment of 98.26 has been received and is pending</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Bo</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Bookshop.org</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your order has shipped</span><span class="row-snippet">Two items are on their way. Track your parcel with the</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Gh</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">GitHub</span><span class="row-count">12</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Notifications, bundled</span><span class="row-snippet">margin-calendar: 3 new issues, 9 comments</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Ds</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">DocuSign</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Completed: Studio lease 2026</span><span class="row-snippet">All parties have completed the envelope. You can access the</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">Earlier</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Nf</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Netflix</span><span class="row-time">28 Aug</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Receipt for your payment</span><span class="row-snippet">We received your payment of 15.49 for your membership. Your next</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Ng</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">National Geographic Kids</span><span class="row-time">27 Aug</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Gift order confirmation</span><span class="row-snippet">Thank you for your gift order. The first issue will arrive in</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Dt</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Discount Tire</span><span class="row-time">26 Aug</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your air pressure reminder</span><span class="row-snippet">It has been 30 days since your last check. Stop by any store for a</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piles">
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="2"></div>
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">4</span></div>
|
||||
<div class="pile-subject">Re: Cooper's parent-teacher conference</div>
|
||||
<div class="pile-from">Jeff Wolfe, and 2 more</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">5</span></div>
|
||||
<div class="pile-subject">Les Misérables tickets</div>
|
||||
<div class="pile-from">Caroline Bauhaus, and 1 more</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pane">
|
||||
<div class="pane-bar">
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-reply"/></svg>Reply<span class="key">r</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">s</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-snooze"/></svg>Snooze<span class="key">b</span></button>
|
||||
<span class="spacer"></span>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-inbox"/></svg>Move to Inbox<span class="key">v</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-archive"/></svg>Archive<span class="key">e</span></button>
|
||||
<button class="icon-button" title="More ."><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="thread">
|
||||
<div class="thread-inner">
|
||||
<div class="thread-head">
|
||||
<h1 class="thread-subject">Bill payment pending</h1>
|
||||
<div class="thread-meta">
|
||||
<span class="avatars"><span class="avatar" data-brand>CP</span></span>
|
||||
<span>City Power</span>
|
||||
<span>·</span>
|
||||
<span>1 message</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg">
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-brand>CP</span>
|
||||
<div class="msg-who"><div class="msg-name">City Power<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
|
||||
<div class="msg-time">Yesterday 16:04</div>
|
||||
</div>
|
||||
<div class="msg-body" data-plain>
|
||||
<p>Dear Customer,</p>
|
||||
<p>Your one-time electronic payment of 98.26 for your City Power bill has been received and is pending. Your payment will be posted within two business days.</p>
|
||||
<p><b>Confirmation number 116400046977232</b></p>
|
||||
<p>Please keep this message for your records. If you did not make this payment, call us on the number printed on your statement.</p>
|
||||
<p>Thank you,<br>City Power Customer Care</p>
|
||||
<div class="attachments">
|
||||
<div class="attachment"><span class="ext">PDF</span>Statement-August.pdf<span class="size">88 KB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light" data-phone data-touch>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Inbox (iPhone)</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="phonebar">
|
||||
<button class="icon-button" title="Search"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<div class="phonebar-title">Inbox</div>
|
||||
<button class="icon-button" title="Places"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
</header>
|
||||
|
||||
<div class="list">
|
||||
<button class="pill screen-strip"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>Screen 3 new senders</button>
|
||||
|
||||
<div class="section">New for you</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="2">MR</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Maya Raghunathan</span><span class="row-count">3</span><span class="row-time">11:42</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Dinner on Thursday?</span><span class="row-snippet">Priya said the place on Church Street takes bookings now</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Arun Kulkarni</span><span class="row-time">10:15</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Re: Lease renewal for the studio</span><span class="row-snippet">Attached the revised draft. The only change is clause 7</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-brand>Ai</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Airbnb</span><span class="row-time">09:03</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your reservation in Lisbon is confirmed</span><span class="row-snippet">Check-in Friday 12 September after 15:00</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="7">SO</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Sam Okafor</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Piano lessons, the form you sent</span><span class="row-snippet">Got it, thank you. Wednesdays at five work for us</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seen">
|
||||
<div class="section">Previously seen</div>
|
||||
|
||||
<div class="row" data-noted>
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="5">LB</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Lena Brandt</span><span class="row-count">7</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Kitchen bench quote</span><span class="row-snippet">Sounds good, Julie. Any afternoon next week works</span></div>
|
||||
</div>
|
||||
<div class="row-note">Ask about the oak finish before confirming</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="3">DP</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Dev Patel</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Slides from the talk</span><span class="row-snippet">Here they are, plus the reading list I mentioned</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Ds</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">DocuSign</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Completed: Studio lease 2026</span><span class="row-snippet">All parties have completed the envelope</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="8">HW</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Hannah Weiss</span><span class="row-count">2</span><span class="row-time">Sun</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Photos from the Hawaii trip</span><span class="row-snippet">Finally went through them all. The ones from the ridge</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piles">
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="2"></div>
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later</div>
|
||||
<div class="pile-subject">Re: Cooper's parent-teacher conference</div>
|
||||
<div class="pile-from">Jeff Wolfe, and 2 more</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside</div>
|
||||
<div class="pile-subject">Les Misérables tickets</div>
|
||||
<div class="pile-from">Caroline Bauhaus, and 1 more</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="tabbar">
|
||||
<div class="tabbar-views">
|
||||
<button class="tabbar-view" data-active="true">Inbox</button>
|
||||
<button class="tabbar-view">Feed</button>
|
||||
<button class="tabbar-view">Paper Trail</button>
|
||||
</div>
|
||||
<button class="tabbar-new" title="Write"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg></button>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light" data-phone data-touch>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Thread (iPhone)</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="phonebar">
|
||||
<button class="icon-button" title="Back"><svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-back"/></svg></button>
|
||||
<div class="phonebar-title">Inbox</div>
|
||||
<button class="icon-button" title="More"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg></button>
|
||||
</header>
|
||||
|
||||
<div class="thread">
|
||||
<div class="thread-inner">
|
||||
<div class="thread-head">
|
||||
<h1 class="thread-subject">Lease renewal for the studio</h1>
|
||||
<div class="thread-meta">
|
||||
<span class="avatars"><span class="avatar" data-hue="6">AK</span><span class="avatar" data-hue="4">PJ</span></span>
|
||||
<span>Arun Kulkarni and you</span>
|
||||
<span>·</span>
|
||||
<span>2 messages</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>
|
||||
<span>Blocked <b>1 tracker</b> from HubSpot. Remote images are off for this sender.</span>
|
||||
<button class="banner-action">Show images</button>
|
||||
</div>
|
||||
|
||||
<div class="msg" data-collapsed>
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
<div class="msg-who"><div class="msg-name">You</div><div class="msg-preview">Hi Arun, thanks for sending the renewal over. Two things before I sign: the notice period in clause 7 and</div></div>
|
||||
<div class="msg-time">Mon 14:20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg">
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="msg-who"><div class="msg-name">Arun Kulkarni<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
|
||||
<div class="msg-time">Today 10:15</div>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<p>Hi Priyanshu,</p>
|
||||
<p>Attached the revised draft. The only change is clause 7, which now reads three months either side rather than six. The rent review in clause 12 stays as it was, tied to the index and capped at four percent.</p>
|
||||
<p>If that works, sign when you get a moment and I will countersign the same day. Happy to walk through anything on a call, Thursday afternoon is open.</p>
|
||||
<p>Best,<br>Arun</p>
|
||||
<span class="quoted">··· Show quoted text</span>
|
||||
<div class="attachments">
|
||||
<div class="attachment"><span class="ext">PDF</span>Studio-lease-2026-v2.pdf<span class="size">412 KB</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone-actions">
|
||||
<button class="phone-action" data-primary><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-reply"/></svg>Reply</button>
|
||||
<button class="phone-action"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later</button>
|
||||
<button class="phone-action"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside</button>
|
||||
<button class="phone-action"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-snooze"/></svg>Snooze</button>
|
||||
<button class="phone-action"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg>More</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Screener</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="list-col" data-wide>
|
||||
<div class="list">
|
||||
<div class="screen-intro">
|
||||
<h1>Screener</h1>
|
||||
<p>Three people wrote to you for the first time. Say where their mail goes, or that it goes nowhere. Nobody is told.</p>
|
||||
</div>
|
||||
|
||||
<div class="screen-list">
|
||||
<div class="screen-tools">
|
||||
<button class="button" data-variant="ghost">Clear all</button>
|
||||
</div>
|
||||
|
||||
<div class="screen-card" data-selected>
|
||||
<span class="avatar" data-hue="3">TM</span>
|
||||
<div class="screen-who">
|
||||
<div class="screen-name">Todd Markham<span class="addr">[email protected]</span></div>
|
||||
<div class="screen-subject">Re: Life insurance quote</div>
|
||||
<div class="screen-snippet">Hello Ms. Young, I hope all is well with you. I wanted to touch base on our conversation from a few weeks ago.</div>
|
||||
<div class="screen-why">Written by a person · suggested Inbox</div>
|
||||
</div>
|
||||
<div class="screen-actions">
|
||||
<button class="button" data-variant="primary">Yes, to Inbox<span class="key">y</span></button>
|
||||
<button class="button">Elsewhere<span class="key">v</span></button>
|
||||
<button class="button" data-variant="ghost">No<span class="key">n</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen-card">
|
||||
<span class="avatar" data-brand>Tb</span>
|
||||
<div class="screen-who">
|
||||
<div class="screen-name">The Browser<span class="addr">[email protected]</span></div>
|
||||
<div class="screen-subject">Five things worth reading this weekend</div>
|
||||
<div class="screen-snippet">A long piece on the history of the pencil, a short one on why bridges hum, and three more.</div>
|
||||
<div class="screen-why">Has an unsubscribe header · suggested Feed</div>
|
||||
</div>
|
||||
<div class="screen-actions">
|
||||
<button class="button" data-variant="primary">Yes, to Feed<span class="key">y</span></button>
|
||||
<button class="button">Elsewhere<span class="key">v</span></button>
|
||||
<button class="button" data-variant="ghost">No<span class="key">n</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="screen-card">
|
||||
<span class="avatar" data-hue="6">RM</span>
|
||||
<div class="screen-who">
|
||||
<div class="screen-name">Evite on behalf of Robyn Madison<span class="addr">[email protected]</span></div>
|
||||
<div class="screen-subject">You have an invitation from Robyn Madison</div>
|
||||
<div class="screen-snippet">Join us for Jack's 8th birthday! Robyn Madison needs your RSVP.</div>
|
||||
<div class="screen-why">Sent by a service for a person · suggested Paper Trail</div>
|
||||
</div>
|
||||
<div class="screen-actions">
|
||||
<button class="button" data-variant="primary">Yes, to Paper Trail<span class="key">y</span></button>
|
||||
<button class="button">Elsewhere<span class="key">v</span></button>
|
||||
<button class="button" data-variant="ghost">No<span class="key">n</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="screen-note">Screened-out mail is kept for 90 days under Screened out, then deleted. Change your mind from a sender's contact card at any time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,282 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Margin Mail: Thread</title>
|
||||
<link rel="stylesheet" href="mail.css">
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<defs>
|
||||
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></symbol>
|
||||
<symbol id="i-places" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></symbol>
|
||||
<symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></symbol>
|
||||
<symbol id="i-reply" viewBox="0 0 24 24"><path d="M9 17 4 12l5-5"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></symbol>
|
||||
<symbol id="i-later" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
|
||||
<symbol id="i-aside" viewBox="0 0 24 24"><path d="M12 17v4"/><path d="M8 3h8l-1 7 3 3H6l3-3z"/></symbol>
|
||||
<symbol id="i-snooze" viewBox="0 0 24 24"><path d="M5 3 2 6"/><path d="m22 6-3-3"/><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/></symbol>
|
||||
<symbol id="i-archive" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="4" rx="1"/><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"/><path d="M10 12h4"/></symbol>
|
||||
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2"/><circle cx="12" cy="12" r="1.2"/><circle cx="19" cy="12" r="1.2"/></symbol>
|
||||
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/><path d="m9 12 2 2 4-4"/></symbol>
|
||||
<symbol id="i-clip" viewBox="0 0 24 24"><path d="m21 11-8.5 8.5a5 5 0 0 1-7-7L14 4a3.3 3.3 0 0 1 4.7 4.7L10.5 17a1.7 1.7 0 0 1-2.4-2.4L16 6.7"/></symbol>
|
||||
<symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></symbol>
|
||||
<symbol id="i-bolt" viewBox="0 0 24 24"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></symbol>
|
||||
<symbol id="i-bell" viewBox="0 0 24 24"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></symbol>
|
||||
<symbol id="i-merge" viewBox="0 0 24 24"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 0 9 9"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<div class="traffic"><i></i><i></i><i></i></div>
|
||||
<div class="lead">
|
||||
<button class="account-chip">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
[email protected]
|
||||
<svg class="chev" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="view-switch">
|
||||
<button class="view-option" data-active="true"><span class="key">1</span>Inbox</button>
|
||||
<button class="view-option"><span class="key">2</span>Feed</button>
|
||||
<button class="view-option"><span class="key">3</span>Paper Trail</button>
|
||||
</div>
|
||||
<div class="trail">
|
||||
<button class="icon-button" title="Search /"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-search"/></svg></button>
|
||||
<button class="icon-button" title="Places ⌘K"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-places"/></svg></button>
|
||||
<button class="write-button"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-pen"/></svg>Write<span class="key">c</span></button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stage">
|
||||
<section class="list-col">
|
||||
<div class="list-head">
|
||||
<h1 class="list-title">Inbox</h1>
|
||||
<button class="pill"><svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-shield"/></svg>Screen 3 new senders<span class="key">6</span></button>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="section">New for you</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="2">MR</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Maya Raghunathan</span><span class="row-count">3</span><span class="row-time">11:42</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Dinner on Thursday?</span><span class="row-snippet">Priya said the place on Church Street takes bookings now, want me to</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="6">AK</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Arun Kulkarni</span><span class="row-time">10:15</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Re: Lease renewal for the studio</span><span class="row-snippet">Attached the revised draft. The only change is clause 7, which now</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-brand>Ai</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Airbnb</span><span class="row-time">09:03</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Your reservation in Lisbon is confirmed</span><span class="row-snippet">Check-in Friday 12 September after 15:00. Your host Inês will send</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" data-new data-selected>
|
||||
<div class="row-gutter"><span class="row-dot"></span></div>
|
||||
<span class="avatar" data-hue="7">SO</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Sam Okafor</span><span class="row-count">4</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Piano on Wednesdays</span><span class="row-snippet">Got it, thank you. Wednesdays at five work for us. Is there a</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seen">
|
||||
<div class="section">Previously seen</div>
|
||||
|
||||
<div class="row" data-noted>
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="5">LB</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Lena Brandt</span><span class="row-count">7</span><span class="row-time">Yesterday</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Kitchen bench quote</span><span class="row-snippet">Sounds good, Julie. Any afternoon next week works for me.</span></div>
|
||||
</div>
|
||||
<div class="row-note">Ask about the oak finish before confirming</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="3">DP</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Dev Patel</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Slides from the talk</span><span class="row-snippet">Here they are, plus the reading list I mentioned. The paper on</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-brand>Ds</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">DocuSign</span><span class="row-time">Mon</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Completed: Studio lease 2026</span><span class="row-snippet">All parties have completed the envelope. You can access the</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="8">HW</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Hannah Weiss</span><span class="row-count">2</span><span class="row-time">Sun</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Photos from the Hawaii trip</span><span class="row-snippet">Finally went through them all. The ones from the ridge walk are</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row-gutter"></div>
|
||||
<span class="avatar" data-hue="1">RY</span>
|
||||
<div class="row-main">
|
||||
<div class="row-top"><span class="row-sender">Russell Young</span><span class="row-time">30 Aug</span></div>
|
||||
<div class="row-bottom"><span class="row-subject">Pumpkin bread recipe</span><span class="row-snippet">From my mother's card, transcribed as best I could. Bake at 175</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="piles">
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="2"></div>
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">4</span></div>
|
||||
<div class="pile-subject">Re: Cooper's parent-teacher conference</div>
|
||||
<div class="pile-from">Jeff Wolfe, and 2 more</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="pile">
|
||||
<div class="pile-card" data-depth="1"></div>
|
||||
<div class="pile-card" data-depth="0">
|
||||
<div class="pile-top"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">5</span></div>
|
||||
<div class="pile-subject">Les Misérables tickets</div>
|
||||
<div class="pile-from">Caroline Bauhaus, and 1 more</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pane" style="position: relative">
|
||||
<div class="pane-bar">
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-reply"/></svg>Reply<span class="key">r</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-later"/></svg>Reply later<span class="key">l</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-aside"/></svg>Set aside<span class="key">s</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-snooze"/></svg>Snooze<span class="key">b</span></button>
|
||||
<span class="spacer"></span>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-bell"/></svg>Notify<span class="key">⇧N</span></button>
|
||||
<button class="verb"><svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-archive"/></svg>Archive<span class="key">e</span></button>
|
||||
<button class="icon-button" title="More ."><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-more"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="thread">
|
||||
<div class="thread-inner">
|
||||
<div class="thread-head">
|
||||
<h1 class="thread-subject">Piano on Wednesdays<span class="renamed">renamed · was "Re: Fw: (no subject)"</span></h1>
|
||||
<div class="thread-meta">
|
||||
<span class="avatars"><span class="avatar" data-hue="7">SO</span><span class="avatar" data-brand>Sd</span><span class="avatar" data-hue="4">PJ</span></span>
|
||||
<span>Sam Okafor, Sunny Day Music and you</span>
|
||||
<span>·</span>
|
||||
<span>3 messages</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="banner" data-tone="muted">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-merge"/></svg>
|
||||
<span>Merged from <b>2 threads</b> · Sam Okafor, Sunny Day Music</span>
|
||||
<button class="banner-action">Unmerge</button>
|
||||
</div>
|
||||
|
||||
<div class="msg" data-collapsed>
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-brand>Sd</span>
|
||||
<div class="msg-who"><div class="msg-name">Sunny Day Music</div><div class="msg-preview">Enrolment received for Cooper. Term starts the week of 8 September and your teacher will be in touch to fix a</div></div>
|
||||
<div class="msg-time">12 Aug</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg" data-collapsed>
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="4">PJ</span>
|
||||
<div class="msg-who"><div class="msg-name">You</div><div class="msg-preview">Hi Sam, form signed and attached. Would a weekday after school suit Cooper? He finishes at four and</div></div>
|
||||
<div class="msg-time">Mon 09:12</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="msg">
|
||||
<div class="msg-head">
|
||||
<span class="avatar" data-hue="7">SO</span>
|
||||
<div class="msg-who"><div class="msg-name">Sam Okafor<span class="addr">[email protected]</span></div><div class="msg-to">to you</div></div>
|
||||
<div class="msg-time">Yesterday 15:40</div>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<p>Got it, thank you. Wednesdays at five work for us.</p>
|
||||
<p>The first lesson is on the 10th, nothing to prepare.</p>
|
||||
<p>The invitation is attached, it should land in your calendar.<br>Sam</p>
|
||||
</div>
|
||||
|
||||
<div class="invite">
|
||||
<div class="invite-date"><span class="mon">Sep</span><span class="day">10</span></div>
|
||||
<div>
|
||||
<div class="invite-title">Piano lesson · Cooper</div>
|
||||
<div class="invite-when">Wednesday 10 September · 17:00 to 17:45 · Sunny Day Music, Bandra</div>
|
||||
<div class="invite-actions">
|
||||
<button class="button" data-variant="primary">Accept<span class="key">y</span></button>
|
||||
<button class="button">Maybe<span class="key">m</span></button>
|
||||
<button class="button">Decline<span class="key">n</span></button>
|
||||
<span class="open">Open in Margin Calendar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reply">
|
||||
<div class="reply-head">Reply to <b>Sam Okafor</b><span style="margin-left:auto" class="key">a</span><span style="color:var(--ink-faint)">reply all</span></div>
|
||||
<div class="reply-body"><span class="placeholder">Write a reply</span></div>
|
||||
<div class="reply-foot">
|
||||
<button class="button" data-variant="primary">Send<span class="key">⌘↩</span></button>
|
||||
<button class="button" data-variant="ghost">Remind me if no reply</button>
|
||||
<span class="spacer"></span>
|
||||
<button class="icon-button" title="Attach"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-clip"/></svg></button>
|
||||
<button class="icon-button" title="Note"><svg width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><use href="#i-note"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popover" style="left: 680px; top: 352px">
|
||||
<div class="contact-head">
|
||||
<span class="avatar" data-hue="7">SO</span>
|
||||
<div>
|
||||
<div class="contact-name">Sam Okafor</div>
|
||||
<div class="contact-addr">[email protected]</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-rows">
|
||||
<div class="contact-row"><span class="lab">Delivers to</span><span class="val"><span class="pill">Inbox<svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#i-chev"/></svg></span></span></div>
|
||||
<div class="contact-row"><span class="lab">Notify</span><span class="val">Off · this thread only</span></div>
|
||||
<div class="contact-row"><span class="lab">Screened</span><span class="val">In, on 12 Aug</span></div>
|
||||
<div class="contact-row" data-wrap><span class="lab">Note</span><span class="val">Cooper's teacher. Prefers email over calls.</span></div>
|
||||
</div>
|
||||
<div class="contact-section">Recent threads</div>
|
||||
<div class="contact-thread"><span>Piano on Wednesdays</span><span>Today</span></div>
|
||||
<div class="contact-thread"><span>Recital in November</span><span>20 Aug</span></div>
|
||||
<div class="contact-thread"><span>Enrolment form</span><span>12 Aug</span></div>
|
||||
<div class="contact-section">Files</div>
|
||||
<div class="contact-thread"><span>Enrolment-form.pdf</span><span>12 Aug</span></div>
|
||||
<div class="contact-thread"><span>Term-dates.pdf</span><span>12 Aug</span></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 528 KiB |