Notes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Papertrail — Notes</title>
<style>
  :root{--bg:#f7f8fb;--panel:#fff;--soft:#f1f3f7;--line:#e6e9ef;--ink:#1d2433;--muted:#8991a2;--accent:#7367f0;--accent-soft:#efedff;--amber:#f5b343;--green:#46b88b;--shadow:0 18px 45px rgba(29,36,51,.08)}
  *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:14px Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden} button,input,textarea{font:inherit;color:inherit;border:0;outline:0} button{cursor:pointer;background:none}.app{height:100vh;display:grid;grid-template-columns:240px 330px 1fr;min-width:1050px}
  .sidebar{background:#fbfbfd;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:25px 14px 16px}.brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:18px;letter-spacing:-.4px;padding:0 12px 30px}.logo{height:30px;width:30px;border-radius:10px;background:linear-gradient(135deg,#8f86ff,#5f55df);display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 7px 13px #7367f033}.nav-title{padding:0 12px 9px;color:#abb1be;text-transform:uppercase;font-size:10px;font-weight:750;letter-spacing:1px}.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:#697386;text-decoration:none;margin-bottom:3px}.nav a:hover,.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.nav svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}.count{margin-left:auto;color:#b2b8c5;font-size:12px}.workspace{margin-top:28px}.space-item{display:flex;align-items:center;gap:10px;padding:9px 12px;color:#697386}.space-dot{height:8px;width:8px;border-radius:50%;background:#6dceaa}.space-dot.orange{background:#ffb765}.space-dot.blue{background:#70a5ee}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:15px}.profile{display:flex;align-items:center;gap:9px;padding:9px 10px}.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#ffd9c8;color:#a55838;font-size:11px;font-weight:700}.profile small{display:block;color:var(--muted);margin-top:2px;font-size:11px}.dots{margin-left:auto;color:#a4aaba}
  .notes-list{background:#fff;border-right:1px solid var(--line);padding:24px 18px;overflow:hidden}.list-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px}.list-title{font-weight:750;font-size:20px;letter-spacing:-.5px}.icon-btn{height:31px;width:31px;display:grid;place-items:center;border-radius:8px;color:#9ba3b4}.icon-btn:hover{background:var(--soft);color:var(--ink)}.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}.search{height:36px;display:flex;align-items:center;background:var(--soft);border-radius:8px;padding:0 10px;gap:8px;margin-bottom:17px}.search svg{width:16px;stroke:#9da5b5;fill:none;stroke-width:2}.search input{background:none;width:100%;font-size:12px}.filter{display:flex;gap:6px;align-items:center;margin:0 0 13px;color:#9aa2b2;font-size:11px}.filter button{font-size:11px;color:#737b8b;padding:4px 7px;border-radius:5px}.filter button.selected{background:var(--soft);color:var(--ink);font-weight:650}.note-card{padding:13px 12px 12px;border:1px solid transparent;border-radius:10px;margin-bottom:5px;cursor:pointer}.note-card:hover{background:#fafbfc}.note-card.selected{background:var(--accent-soft);border-color:#e6e3ff}.note-card h3{font-size:13px;margin:0 0 6px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-card p{font-size:11px;color:#8991a0;margin:0;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta{display:flex;align-items:center;margin-top:10px;color:#a1a8b6;font-size:10px}.tag{background:#fbefd9;color:#b17c30;padding:3px 6px;border-radius:4px;margin-left:auto;font-weight:600}.tag.purple{background:#f0edff;color:#7264cf}.tag.green{background:#e6f7f0;color:#3b9a74}
  .editor{background:#fff;display:flex;flex-direction:column;min-width:0}.toolbar{height:65px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 38px;gap:17px}.toolbar .crumb{color:#9ba2af;font-size:12px}.toolbar .crumb strong{color:#616a7b;font-weight:600}.toolbar-spacer{flex:1}.save-state{display:flex;align-items:center;color:#a2a9b6;font-size:11px;gap:6px}.save-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}.toolbar-btn{color:#a0a7b5}.toolbar-btn:hover{color:var(--accent)}.toolbar-btn svg{height:17px;width:17px;fill:none;stroke:currentColor;stroke-width:1.8}.page{max-width:820px;width:100%;margin:0 auto;padding:64px 56px 80px;overflow:auto}.page::-webkit-scrollbar{width:7px}.page::-webkit-scrollbar-thumb{background:#e5e7ed;border-radius:10px}.eyebrow{font-size:11px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:13px}.title{font-size:35px;letter-spacing:-1.5px;line-height:1.15;margin:0 0 12px;font-weight:760}.subtitle{font-size:13px;color:#9aa1af;margin-bottom:30px}.editor-content{color:#515a6b;line-height:1.8;font-size:14px}.editor-content p{margin:0 0 20px}.editor-content strong{color:#303849}.callout{background:#f7f6ff;border-left:3px solid var(--accent);border-radius:5px;padding:13px 16px;margin:25px 0;color:#6d6794;font-size:13px}.section-label{font-weight:700;color:#333b4d;font-size:16px;letter-spacing:-.2px;margin:27px 0 12px}.check{display:flex;align-items:center;gap:11px;margin:12px 0;color:#626b7b}.check input{appearance:none;width:17px;height:17px;border:1px solid #cbd0db;border-radius:5px;position:relative}.check input:checked{border-color:var(--accent);background:var(--accent)}.check input:checked:after{content:'✓';color:#fff;position:absolute;left:3px;top:-2px;font-size:13px}.check.done span{text-decoration:line-through;color:#aab0bb}.quote{border-left:2px solid #d6d9e2;padding-left:15px;color:#858d9c;font-style:italic;margin:25px 0}.footer-line{border-top:1px solid var(--line);margin-top:40px;padding-top:16px;color:#adb4c0;font-size:11px;display:flex;justify-content:space-between}
  .new-note{position:fixed;left:184px;bottom:22px;border-radius:8px;background:var(--accent);color:white;padding:10px 15px;box-shadow:0 8px 16px #7367f044;font-size:12px;font-weight:650}.new-note svg{vertical-align:middle;margin-right:5px;width:14px;stroke:currentColor;fill:none;stroke-width:2.5}
  @media(max-width:1100px){.app{grid-template-columns:220px 300px 1fr}.page{padding-left:40px;padding-right:40px}.new-note{left:165px}}
</style>
</head>
<body>
<div class="app">
  <aside class="sidebar">
    <div class="brand"><div class="logo">P</div>papertrail</div>
    <div class="nav-title">Library</div>
    <nav class="nav">
      <a href="#" class="active" data-filter="all"><svg viewBox="0 0 24 24"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21.5z"/><path d="M4 5.5v16M8 7h8M8 11h8"/></svg>All notes <span class="count">24</span></a>
      <a href="#" data-filter="starred"><svg viewBox="0 0 24 24"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z"/></svg>Starred <span class="count">6</span></a>
      <a href="#"><svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h10"/></svg>Quick notes</a>
      <a href="#"><svg viewBox="0 0 24 24"><path d="M6 3h12v18H6zM9 7h6M9 11h6M9 15h4"/></svg>Templates</a>
    </nav>
    <div class="workspace nav-title">Workspaces</div>
    <div class="space-item"><i class="space-dot"></i>Personal <span class="count">12</span></div>
    <div class="space-item"><i class="space-dot orange"></i>Work <span class="count">8</span></div>
    <div class="space-item"><i class="space-dot blue"></i>Ideas <span class="count">4</span></div>
    <div class="sidebar-bottom"><div class="nav"><a href="#"><svg viewBox="0 0 24 24"><path d="M12 15.3a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6z"/><path d="m19.4 15 .1.1a1.5 1.5 0 0 1-2.1 2.1l-.1-.1a1.5 1.5 0 0 0-2.5 1.1v.2a1.5 1.5 0 0 1-3 0v-.2a1.5 1.5 0 0 0-2.5-1.1l-.1.1a1.5 1.5 0 1 1-2.1-2.1l.1-.1A1.5 1.5 0 0 0 6.2 12a1.5 1.5 0 0 0-1.1-2.5h-.2a1.5 1.5 0 0 1 0-3h.2A1.5 1.5 0 0 0 6.2 4l-.1-.1a1.5 1.5 0 1 1 2.1-2.1l.1.1A1.5 1.5 0 0 0 10.8.8h.2a1.5 1.5 0 0 1 3 0V1a1.5 1.5 0 0 0 2.5 1.1l.1-.1a1.5 1.5 0 1 1 2.1 2.1l-.1.1A1.5 1.5 0 0 0 19.8 7h.2a1.5 1.5 0 0 1 0 3h-.2a1.5 1.5 0 0 0-1.1 2.5z"/></svg>Settings</a></div><div class="profile"><div class="avatar">AM</div><div><b>Alex Morgan</b><small>Personal space</small></div><span class="dots">•••</span></div></div>
  </aside>
  <section class="notes-list">
    <div class="list-top"><div class="list-title">All notes</div><button class="icon-btn" title="Sort notes"><svg viewBox="0 0 24 24"><path d="M8 6h13M8 12h9M8 18h5M3 6h.01M3 12h.01M3 18h.01"/></svg></button></div>
    <label class="search"><svg viewBox="0 0 24 24"><circle cx="10.8" cy="10.8" r="6.8"/><path d="m16 16 5 5"/></svg><input id="search" placeholder="Search notes..." /></label>
    <div class="filter"><span>Sort by</span><button class="selected">Recent</button><button>Title</button></div>
    <div id="cards">
      <article class="note-card selected" data-title="Designing a calmer digital life"><h3>Designing a calmer digital life</h3><p>A few principles for making space to think...</p><div class="meta">Today, 9:42 AM <span class="tag purple">Reflection</span></div></article>
      <article class="note-card" data-title="Books to read this summer"><h3>Books to read this summer</h3><p>Stories that have been waiting patiently...</p><div class="meta">Yesterday <span class="tag">Reading list</span></div></article>
      <article class="note-card" data-title="Q3 project kick-off"><h3>Q3 project kick-off</h3><p>Goals, milestones, and people in the room...</p><div class="meta">Jun 18 <span class="tag green">Work</span></div></article>
      <article class="note-card" data-title="Ideas for the balcony garden"><h3>Ideas for the balcony garden</h3><p>Herbs, warm lights, and a little lemon tree.</p><div class="meta">Jun 16 <span class="tag green">Personal</span></div></article>
      <article class="note-card" data-title="Weekend in Lisbon"><h3>Weekend in Lisbon</h3><p>Alfama in the morning, ocean air by dusk.</p><div class="meta">Jun 12 <span class="tag">Travel</span></div></article>
      <article class="note-card" data-title="Grocery list"><h3>Grocery list</h3><p>Oat milk · peaches · basil · sourdough...</p><div class="meta">Jun 10 <span class="tag purple">Quick note</span></div></article>
    </div>
  </section>
  <main class="editor">
    <header class="toolbar"><span class="crumb">Personal / <strong>Reflection</strong></span><div class="toolbar-spacer"></div><div class="save-state"><i class="save-dot"></i> Saved just now</div><button class="toolbar-btn" title="Favorite"><svg viewBox="0 0 24 24"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z"/></svg></button><button class="toolbar-btn" title="More"><svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="1" fill="currentColor"/><circle cx="12" cy="12" r="1" fill="currentColor"/><circle cx="19" cy="12" r="1" fill="currentColor"/></svg></button></header>
    <article class="page"><div class="eyebrow">Reflection · Personal</div><h1 class="title" contenteditable="true">Designing a calmer digital life</h1><div class="subtitle">A collection of small ideas for making more room to think, notice, and be present.</div><div class="editor-content" contenteditable="true"><p>We have more ways to capture our thoughts than ever. But the best tools are often the ones that <strong>quietly get out of the way</strong> — leaving us with the space to focus on what matters.</p><div class="callout">✦ &nbsp;The goal isn’t to organize everything. It’s to make the things you care about easy to find.</div><div class="section-label">A few principles I want to remember</div><div class="check"><input type="checkbox" checked /><span>Choose fewer tools, and learn them deeply</span></div><div class="check"><input type="checkbox" checked /><span>Keep a small, trusted place for unfinished thoughts</span></div><div class="check"><input type="checkbox" /><span>Make room for ideas that don’t have a purpose yet</span></div><p class="quote">“Your attention is the most valuable thing you own. Spend it with intention.”</p><p>Perhaps a calmer digital life doesn’t mean using technology less. It means using it with enough intention that it starts to feel like an extension of your mind, rather than another room you have to tidy.</p><div class="footer-line"><span>Last edited by Alex Morgan</span><span>124 words</span></div></div></article>
  </main>
</div>
<button class="new-note" id="newNote"><svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg> New note</button>
<script>
  const search=document.getElementById('search'), cards=[...document.querySelectorAll('.note-card')];
  search.addEventListener('input',()=>{const q=search.value.toLowerCase();cards.forEach(c=>c.style.display=c.dataset.title.toLowerCase().includes(q)?'block':'none')});
  cards.forEach(card=>card.addEventListener('click',()=>{cards.forEach(c=>c.classList.remove('selected'));card.classList.add('selected');document.querySelector('.title').textContent=card.dataset.title;document.querySelector('.eyebrow').textContent='Personal · Notes';document.querySelector('.subtitle').textContent=card.querySelector('p').textContent;document.querySelector('.save-state').innerHTML='<i class="save-dot"></i> Saved just now'}));
  document.querySelectorAll('.check input').forEach(box=>box.addEventListener('change',()=>box.parentElement.classList.toggle('done',box.checked)));
  document.getElementById('newNote').addEventListener('click',()=>{document.querySelector('.title').textContent='Untitled note';document.querySelector('.subtitle').textContent='Start writing something worth remembering.';document.querySelector('.title').focus();window.getSelection().selectAllChildren(document.querySelector('.title'))});
  document.querySelectorAll('.filter button').forEach(btn=>btn.addEventListener('click',()=>{document.querySelectorAll('.filter button').forEach(b=>b.classList.remove('selected'));btn.classList.add('selected');if(btn.textContent==='Title'){cards.sort((a,b)=>a.dataset.title.localeCompare(b.dataset.title)).forEach(c=>document.getElementById('cards').appendChild(c))}}));
</script>
</body>
</html>