margin-mail/docs/mockups/src/phone-inbox.html

<!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>