wehub-resource-sync
383 lines
13 KiB
HTML
383 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tab Harbor README Mockups</title>
|
|
<link rel="stylesheet" href="./mockups.css">
|
|
</head>
|
|
<body>
|
|
<main class="stage">
|
|
<section class="scene" data-scene="overview">
|
|
<div class="window">
|
|
<div class="banner">
|
|
<span class="banner-dot"></span>
|
|
Domain-grouped tabs, custom groups, and one-click jumps from the top icon rail.
|
|
</div>
|
|
<header class="hero">
|
|
<div>
|
|
<p class="eyebrow">Tab Harbor</p>
|
|
<h1>Open tabs, sorted into calm workspaces.</h1>
|
|
<p class="subcopy">
|
|
Group by domain, keep quick links nearby, and give homepage tabs their own lane instead of letting
|
|
everything collapse into one endless browser strip.
|
|
</p>
|
|
</div>
|
|
<div class="search">
|
|
<span class="search-icon">⌕</span>
|
|
<span>Search with your default engine...</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="shortcut-row">
|
|
<span class="shortcut github">GitHub</span>
|
|
<span class="shortcut docs">Docs</span>
|
|
<span class="shortcut local">Localhost</span>
|
|
<span class="shortcut read">Read Later</span>
|
|
<span class="shortcut add">+</span>
|
|
</div>
|
|
|
|
<div class="icon-rail">
|
|
<span class="rail-pill active">GH</span>
|
|
<span class="rail-pill">DOC</span>
|
|
<span class="rail-pill">LD</span>
|
|
<span class="rail-pill">LP</span>
|
|
<span class="rail-pill">HP</span>
|
|
</div>
|
|
|
|
<div class="content-grid">
|
|
<article class="workspace-card">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">github.com</p>
|
|
<h2>5 open tabs</h2>
|
|
</div>
|
|
<span class="badge">Auto group</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">repo / issues</span>
|
|
<span class="chip">README polish</span>
|
|
<span class="chip">PR diff</span>
|
|
<span class="chip">Actions</span>
|
|
<span class="chip">notifications</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="workspace-card">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">Docs</p>
|
|
<h2>4 open tabs</h2>
|
|
</div>
|
|
<span class="badge">Jump fast</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">Chrome extension API</span>
|
|
<span class="chip">Manifest V3</span>
|
|
<span class="chip">CDP screenshot notes</span>
|
|
<span class="chip">Theme reference</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="workspace-card accent">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">Launch Prep</p>
|
|
<h2>3 pinned tabs</h2>
|
|
</div>
|
|
<span class="badge">Custom group</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">README checklist</span>
|
|
<span class="chip">release notes</span>
|
|
<span class="chip">community post draft</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="workspace-card">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">Homepages</p>
|
|
<h2>4 landing tabs</h2>
|
|
</div>
|
|
<span class="badge">Clean top bar</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">YouTube</span>
|
|
<span class="chip">LinkedIn</span>
|
|
<span class="chip">X</span>
|
|
<span class="chip">Gmail</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="scene" data-scene="saved">
|
|
<div class="window">
|
|
<header class="hero compact">
|
|
<div>
|
|
<p class="eyebrow">Saved For Later</p>
|
|
<h1>Turn “not now” tabs into an inbox.</h1>
|
|
</div>
|
|
<div class="drawer-tabs">
|
|
<span class="drawer-tab active">Saved</span>
|
|
<span class="drawer-tab">Todos</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="split-layout">
|
|
<div class="left-stack">
|
|
<article class="workspace-card">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">linux.do</p>
|
|
<h2>3 open tabs</h2>
|
|
</div>
|
|
<span class="badge">Community</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">Extension feedback</span>
|
|
<span class="chip">Showcase thread</span>
|
|
<span class="chip">Launch notes</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="workspace-card">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">localhost</p>
|
|
<h2>2 active tabs</h2>
|
|
</div>
|
|
<span class="badge">:3000 / :5173</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">preview build</span>
|
|
<span class="chip">extension sandbox</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<aside class="drawer">
|
|
<div class="drawer-header">
|
|
<div>
|
|
<p class="label">Saved for later</p>
|
|
<h2>5 waiting reads</h2>
|
|
</div>
|
|
<span class="mini-action">Search</span>
|
|
</div>
|
|
|
|
<div class="list">
|
|
<div class="list-item">
|
|
<div class="checkbox"></div>
|
|
<div>
|
|
<strong>Designing calm productivity surfaces</strong>
|
|
<p>Saved 2h ago · Medium</p>
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="checkbox"></div>
|
|
<div>
|
|
<strong>Chrome tabs API reference</strong>
|
|
<p>Saved yesterday · developer.chrome.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="checkbox"></div>
|
|
<div>
|
|
<strong>Tab-out inspiration notes</strong>
|
|
<p>Saved yesterday · GitHub</p>
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="checkbox"></div>
|
|
<div>
|
|
<strong>README screenshot checklist</strong>
|
|
<p>Saved 3m ago · local note</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="archive">
|
|
<div class="archive-row">
|
|
<span>Archive</span>
|
|
<span>12 done</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="scene" data-scene="todos">
|
|
<div class="window">
|
|
<header class="hero compact">
|
|
<div>
|
|
<p class="eyebrow">Tasks In Context</p>
|
|
<h1>Keep todos where the tabs already live.</h1>
|
|
</div>
|
|
<div class="drawer-tabs">
|
|
<span class="drawer-tab">Saved</span>
|
|
<span class="drawer-tab active">Todos</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="split-layout">
|
|
<div class="left-stack">
|
|
<article class="workspace-card accent">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">Top icon rail</p>
|
|
<h2>One click to jump</h2>
|
|
</div>
|
|
<span class="badge">Focused navigation</span>
|
|
</div>
|
|
<div class="icon-rail left">
|
|
<span class="rail-pill active">WK</span>
|
|
<span class="rail-pill">DOC</span>
|
|
<span class="rail-pill">GH</span>
|
|
<span class="rail-pill">RD</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">Work</span>
|
|
<span class="chip">Docs</span>
|
|
<span class="chip">GitHub</span>
|
|
<span class="chip">Reading</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="workspace-card">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">Quick capture</p>
|
|
<h2>From a tab to a task</h2>
|
|
</div>
|
|
<span class="badge">No context switch</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">Write changelog</span>
|
|
<span class="chip">Trim duplicates</span>
|
|
<span class="chip">Reply in Linux.do</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<aside class="drawer">
|
|
<div class="drawer-header">
|
|
<div>
|
|
<p class="label">Todos</p>
|
|
<h2>4 active tasks</h2>
|
|
</div>
|
|
<span class="mini-action">New</span>
|
|
</div>
|
|
|
|
<div class="todo-card">
|
|
<div class="todo-row">
|
|
<span class="todo-check checked"></span>
|
|
<div>
|
|
<strong>Refresh README screenshots</strong>
|
|
<p>Feature showcase · in progress</p>
|
|
</div>
|
|
</div>
|
|
<div class="todo-row">
|
|
<span class="todo-check"></span>
|
|
<div>
|
|
<strong>Highlight core selling points</strong>
|
|
<p>Domain groups, custom groups, top rail jump</p>
|
|
</div>
|
|
</div>
|
|
<div class="todo-row">
|
|
<span class="todo-check"></span>
|
|
<div>
|
|
<strong>Add upstream acknowledgement</strong>
|
|
<p>Link to Zara's repo and Linux.do community</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="archive">
|
|
<div class="archive-row">
|
|
<span>Archive</span>
|
|
<span>7 completed</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="scene" data-scene="themes">
|
|
<div class="window">
|
|
<div class="banner warning">
|
|
<span class="banner-dot"></span>
|
|
You have 2 Tab Harbor tabs open. Close extras and keep just this workspace.
|
|
<span class="banner-action">Close extras</span>
|
|
</div>
|
|
|
|
<header class="hero compact">
|
|
<div>
|
|
<p class="eyebrow">Theme Controls</p>
|
|
<h1>Switch themes, tune transparency, keep the browser tidy.</h1>
|
|
</div>
|
|
<div class="theme-trigger">Theme ▾</div>
|
|
</header>
|
|
|
|
<div class="theme-layout">
|
|
<article class="workspace-card">
|
|
<div class="card-head">
|
|
<div>
|
|
<p class="label">Cleanup actions</p>
|
|
<h2>Fast duplicate control</h2>
|
|
</div>
|
|
<span class="badge">One click</span>
|
|
</div>
|
|
<div class="chips">
|
|
<span class="chip">Close duplicate tabs</span>
|
|
<span class="chip">Close all in group</span>
|
|
<span class="chip">Keep one copy</span>
|
|
</div>
|
|
</article>
|
|
|
|
<aside class="theme-panel">
|
|
<div class="theme-header">
|
|
<div>
|
|
<p class="label">Appearance</p>
|
|
<h2>Paper themes</h2>
|
|
</div>
|
|
<span class="mini-action">Upload background</span>
|
|
</div>
|
|
|
|
<div class="swatches">
|
|
<span class="swatch paper active"></span>
|
|
<span class="swatch sage"></span>
|
|
<span class="swatch mist"></span>
|
|
<span class="swatch blush"></span>
|
|
</div>
|
|
|
|
<div class="range-block">
|
|
<div class="range-row">
|
|
<span>Surface transparency</span>
|
|
<strong>14%</strong>
|
|
</div>
|
|
<div class="range-track">
|
|
<span class="range-thumb"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-preview">
|
|
<div class="preview-card"></div>
|
|
<div class="preview-card warm"></div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const scene = new URLSearchParams(window.location.search).get('scene') || 'overview';
|
|
document.documentElement.dataset.scene = scene;
|
|
</script>
|
|
</body>
|
|
</html>
|