<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PearBrowser Next Release UI Preview</title>
<link rel="stylesheet" href="../ui/theme/pear-ui.css" />
<style>
:root {
color-scheme: light;
--canvas: #f6f8f7;
--surface: #ffffff;
--surface-soft: #eef3f1;
--surface-warm: #fff7f1;
--line: #dde6e2;
--line-strong: #c9d6d0;
--text: #17211b;
--muted: #65736c;
--quiet: #8a9790;
--pear: #16834f;
--pear-soft: #e5f5ec;
--teal: #0f766e;
--coral: #e45d45;
--amber: #b97812;
--shadow: 0 18px 48px rgba(24, 36, 30, 0.10);
--radius: 8px;
}
* { box-sizing: border-box; }
html,
body {
width: 100%;
min-height: 100%;
margin: 0;
}
body {
background: var(--canvas);
color: var(--text);
font: 13px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
button,
input {
font: inherit;
}
button {
color: inherit;
}
.preview-app {
min-height: 100vh;
display: grid;
grid-template-columns: 236px minmax(0, 1fr);
background: var(--canvas);
}
.sidebar {
display: flex;
flex-direction: column;
gap: 18px;
padding: 18px 14px;
background: rgba(255, 255, 255, 0.82);
border-right: 1px solid var(--line);
}
.brand {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px 14px;
border-bottom: 1px solid var(--line);
}
.mark {
width: 30px;
height: 30px;
color: var(--pear);
flex: 0 0 auto;
}
.brand-copy {
min-width: 0;
}
.brand-name {
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
}
.brand-tag {
color: var(--quiet);
font-size: 11px;
}
.nav-group {
display: grid;
gap: 3px;
}
.rail-item,
.icon-button,
.tab-action,
.chip-button {
border: 1px solid transparent;
background: transparent;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.rail-item {
display: flex;
align-items: center;
gap: 10px;
min-height: 38px;
width: 100%;
padding: 0 10px;
border-radius: var(--radius);
color: var(--muted);
text-align: left;
}
.rail-item svg {
width: 17px;
height: 17px;
stroke-width: 1.8;
}
.rail-item:hover {
background: var(--surface-soft);
color: var(--text);
}
.rail-item.active {
background: var(--pear-soft);
border-color: rgba(22, 131, 79, 0.16);
color: var(--pear);
font-weight: 650;
}
.sidebar-footer {
margin-top: auto;
display: grid;
gap: 10px;
}
.identity-card {
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.identity-top {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--surface-warm);
color: var(--coral);
font-weight: 800;
flex: 0 0 auto;
}
.identity-name {
font-weight: 650;
}
.identity-key {
color: var(--quiet);
font: 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mini-meter {
height: 5px;
margin-top: 10px;
overflow: hidden;
border-radius: 999px;
background: var(--surface-soft);
}
.mini-meter span {
display: block;
height: 100%;
width: 42%;
border-radius: inherit;
background: linear-gradient(90deg, var(--pear), var(--teal));
}
.main {
min-width: 0;
display: flex;
flex-direction: column;
}
.window-bar {
height: 44px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 0 16px;
background: rgba(255, 255, 255, 0.72);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(18px);
}
.traffic {
display: flex;
gap: 7px;
}
.traffic span {
width: 11px;
height: 11px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.traffic span:nth-child(1) { background: #ff6159; }
.traffic span:nth-child(2) { background: #ffbd2e; }
.traffic span:nth-child(3) { background: #28c840; }
.tab-strip {
min-width: 0;
display: flex;
gap: 6px;
align-items: center;
overflow: hidden;
}
.browser-tab {
min-width: 116px;
max-width: 212px;
height: 30px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 9px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.72);
color: var(--muted);
}
.browser-tab.active {
background: var(--surface);
color: var(--text);
border-color: var(--line-strong);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.tab-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pear);
flex: 0 0 auto;
}
.browser-tab:nth-child(2) .tab-dot { background: var(--teal); }
.browser-tab:nth-child(3) .tab-dot { background: var(--coral); }
.tab-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
.tab-close {
margin-left: auto;
color: var(--quiet);
font-size: 16px;
line-height: 1;
}
.tab-action,
.icon-button {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: var(--radius);
color: var(--muted);
}
.tab-action:hover,
.icon-button:hover {
background: var(--surface-soft);
color: var(--text);
}
.release-pill {
display: inline-flex;
align-items: center;
gap: 7px;
height: 26px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
background: var(--surface);
font-size: 11px;
white-space: nowrap;
}
.release-pill::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--pear);
box-shadow: 0 0 0 3px var(--pear-soft);
}
.toolbar {
display: grid;
grid-template-columns: auto minmax(240px, 760px) auto;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
.toolbar-group {
display: flex;
gap: 4px;
align-items: center;
}
.address {
min-width: 0;
height: 38px;
display: flex;
align-items: center;
gap: 9px;
padding: 0 10px 0 12px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--canvas);
}
.address svg {
width: 16px;
height: 16px;
color: var(--pear);
flex: 0 0 auto;
}
.address input {
min-width: 0;
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
font: 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace;
}
.address input::selection {
background: rgba(22, 131, 79, 0.18);
}
.route-chip {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 999px;
background: var(--pear-soft);
color: var(--pear);
font-size: 11px;
font-weight: 650;
white-space: nowrap;
}
.content {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) 292px;
gap: 14px;
padding: 14px;
}
.stage,
.side-panel,
.view-panel {
min-width: 0;
}
.stage {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
overflow: hidden;
}
.view-panel {
display: none;
min-height: 100%;
}
.view-panel.active {
display: block;
}
.page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
padding: 24px 26px 18px;
border-bottom: 1px solid var(--line);
}
.page-kicker {
color: var(--quiet);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
h1,
h2,
h3,
p {
margin: 0;
}
h1 {
margin-top: 4px;
font-size: clamp(24px, 3vw, 36px);
line-height: 1.04;
font-weight: 760;
letter-spacing: 0;
}
.page-subtitle {
max-width: 520px;
margin-top: 8px;
color: var(--muted);
font-size: 14px;
}
.page-actions {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.command {
margin: 22px 26px 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 54px;
padding: 0 8px 0 16px;
border: 1px solid var(--line-strong);
border-radius: var(--radius);
background: var(--canvas);
}
.command input {
min-width: 0;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
font-size: 15px;
}
.command input::placeholder {
color: var(--quiet);
}
.command-key {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 8px;
border: 1px solid var(--line);
border-radius: 6px;
color: var(--quiet);
background: var(--surface);
font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
}
.grid-section {
padding: 22px 26px 26px;
}
.section-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
h2 {
color: var(--muted);
font-size: 12px;
font-weight: 750;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.site-card,
.app-card,
.setting-row,
.activity-row {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.site-card,
.app-card {
min-height: 144px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.site-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: var(--radius);
color: #fff;
font-weight: 800;
background: var(--pear);
}
.site-card:nth-child(2) .site-icon { background: var(--teal); }
.site-card:nth-child(3) .site-icon { background: var(--coral); }
.badge {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 8px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--muted);
background: var(--canvas);
font-size: 11px;
white-space: nowrap;
}
.badge.good {
color: var(--pear);
background: var(--pear-soft);
border-color: rgba(22, 131, 79, 0.16);
}
.badge.hot {
color: var(--coral);
background: #fff0ed;
border-color: rgba(228, 93, 69, 0.18);
}
.card-title {
font-size: 15px;
font-weight: 730;
}
.card-copy {
color: var(--muted);
font-size: 12px;
}
.mono-line {
margin-top: auto;
color: var(--quiet);
font: 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chip-button {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 30px;
padding: 0 10px;
border-color: var(--line);
border-radius: var(--radius);
background: var(--surface);
color: var(--muted);
}
.chip-button:hover {
background: var(--surface-soft);
color: var(--text);
}
.chip-button.primary {
color: #fff;
background: var(--pear);
border-color: var(--pear);
font-weight: 700;
}
.chip-button.primary:hover {
background: #116c41;
}
.side-panel {
display: flex;
flex-direction: column;
gap: 14px;
}
.panel-card {
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 10px 28px rgba(24, 36, 30, 0.06);
overflow: hidden;
}
.panel-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 14px;
border-bottom: 1px solid var(--line);
font-weight: 730;
}
.status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--pear);
box-shadow: 0 0 0 4px var(--pear-soft);
}
.metric-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--line);
}
.metric {
padding: 13px 14px;
}
.metric:nth-child(odd) {
border-right: 1px solid var(--line);
}
.metric-value {
font-size: 21px;
font-weight: 780;
line-height: 1;
}
.metric-label {
margin-top: 4px;
color: var(--quiet);
font-size: 11px;
}
.activity-list {
display: grid;
}
.activity-row {
border-width: 0 0 1px;
border-radius: 0;
padding: 12px 14px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.activity-row:last-child {
border-bottom: 0;
}
.activity-icon {
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--surface-soft);
color: var(--teal);
}
.activity-title {
font-weight: 650;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.activity-sub {
color: var(--quiet);
font-size: 11px;
}
.app-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 24px 26px 26px;
}
.app-card {
min-height: 120px;
}
.app-row {
display: flex;
align-items: center;
gap: 12px;
}
.app-icon {
width: 42px;
height: 42px;
border-radius: var(--radius);
display: grid;
place-items: center;
color: #fff;
font-weight: 800;
background: var(--pear);
flex: 0 0 auto;
}
.app-card:nth-child(2) .app-icon { background: var(--coral); }
.app-card:nth-child(3) .app-icon { background: var(--teal); }
.app-card:nth-child(4) .app-icon { background: var(--amber); }
.list-view {
padding: 24px 26px 26px;
display: grid;
gap: 8px;
}
.setting-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 13px 14px;
}
.row-title {
font-weight: 700;
}
.row-sub {
color: var(--muted);
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.toggle {
width: 38px;
height: 22px;
display: inline-flex;
align-items: center;
padding: 2px;
border-radius: 999px;
background: var(--pear);
}
.toggle::after {
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transform: translateX(16px);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
.site-list {
padding: 24px 26px 26px;
display: grid;
gap: 10px;
}
.wide-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px;
}
.icon-button svg,
.tab-action svg,
.chip-button svg {
width: 16px;
height: 16px;
stroke-width: 1.8;
}
.hidden {
display: none !important;
}
@media (max-width: 1120px) {
.preview-app {
grid-template-columns: 78px minmax(0, 1fr);
}
.brand-copy,
.rail-item span,
.identity-name,
.identity-key,
.mini-meter {
display: none;
}
.brand,
.rail-item {
justify-content: center;
}
.sidebar {
padding: 16px 10px;
}
.card-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 900px) {
.content {
grid-template-columns: 1fr;
overflow: auto;
}
.side-panel {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 720px) {
.preview-app {
display: flex;
flex-direction: column;
}
.sidebar {
flex-direction: row;
align-items: center;
overflow-x: auto;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.brand {
border-bottom: 0;
border-right: 1px solid var(--line);
padding: 0 14px 0 4px;
}
.nav-group {
display: flex;
gap: 4px;
}
.rail-item {
width: 38px;
flex: 0 0 auto;
}
.sidebar-footer {
display: none;
}
.window-bar {
grid-template-columns: auto minmax(0, 1fr);
}
.release-pill {
display: none;
}
.toolbar {
grid-template-columns: auto minmax(0, 1fr);
}
.toolbar-group.right {
grid-column: 1 / -1;
justify-content: flex-end;
}
.page-head,
.command,
.grid-section,
.app-grid,
.list-view,
.site-list {
margin-left: 0;
margin-right: 0;
padding-left: 16px;
padding-right: 16px;
}
.command {
grid-template-columns: auto minmax(0, 1fr);
}
.command-key {
display: none;
}
.command .chip-button {
grid-column: 1 / -1;
justify-content: center;
width: 100%;
}
.card-grid,
.app-grid,
.side-panel {
grid-template-columns: 1fr;
}
.wide-card,
.setting-row {
grid-template-columns: auto minmax(0, 1fr);
}
.wide-card .chip-button,
.setting-row .chip-button,
.setting-row .toggle {
grid-column: 1 / -1;
justify-self: start;
}
}
</style>
</head>
<body class="pear-ui">
<div class="preview-app">
<aside class="sidebar" aria-label="PearBrowser sections">
<div class="brand">
<svg class="mark" viewBox="0 0 48 48" aria-hidden="true">
<path d="M25 6c4 1 6 4 6 8 7 3 11 10 11 18 0 8-7 13-18 13S6 40 6 32c0-8 4-15 11-18 1-4 3-7 8-8Z" fill="currentColor" opacity="0.14"/>
<path d="M24 9c3 0 5 3 5 7 7 2 10 9 10 16 0 7-6 10-15 10S9 39 9 32c0-7 4-14 10-16 0-4 2-7 5-7Z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/>
<path d="M26 10c4-5 9-5 12-2-2 5-7 7-12 2Z" fill="currentColor"/>
<circle cx="18" cy="28" r="2.3" fill="currentColor"/>
<circle cx="30" cy="28" r="2.3" fill="currentColor"/>
<path d="M19 35c3 2 7 2 10 0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<div class="brand-copy">
<div class="brand-name">PearBrowser</div>
<div class="brand-tag">Release UI preview</div>
</div>
</div>
<nav class="nav-group" aria-label="Primary">
<button class="rail-item active" type="button" data-view="browse" aria-label="Browse">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<circle cx="12" cy="12" r="8"></circle>
<path d="M4 12h16M12 4c2 2 3 5 3 8s-1 6-3 8M12 4c-2 2-3 5-3 8s1 6 3 8"></path>
</svg>
<span>Browse</span>
</button>
<button class="rail-item" type="button" data-view="apps" aria-label="Apps">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<rect x="4" y="4" width="6" height="6" rx="1.4"></rect>
<rect x="14" y="4" width="6" height="6" rx="1.4"></rect>
<rect x="4" y="14" width="6" height="6" rx="1.4"></rect>
<rect x="14" y="14" width="6" height="6" rx="1.4"></rect>
</svg>
<span>Apps</span>
</button>
<button class="rail-item" type="button" data-view="sites" aria-label="Sites">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M5 20V6.5A2.5 2.5 0 0 1 7.5 4H19v16H7.5A2.5 2.5 0 0 1 5 17.5"></path>
<path d="M8 8h8M8 12h7M8 16h5"></path>
</svg>
<span>P2P Sites</span>
</button>
<button class="rail-item" type="button" data-view="library" aria-label="Library">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M7 4h10a2 2 0 0 1 2 2v15l-7-4-7 4V6a2 2 0 0 1 2-2Z"></path>
</svg>
<span>Library</span>
</button>
<button class="rail-item" type="button" data-view="settings" aria-label="Settings">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"></path>
<path d="M19 12a7.6 7.6 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a8.5 8.5 0 0 0-1.7-1L14.5 3h-5L9.2 6a8.5 8.5 0 0 0-1.7 1L5.1 6l-2 3.5 2 1.5a7.6 7.6 0 0 0 0 2l-2 1.5 2 3.5 2.4-1c.5.4 1.1.7 1.7 1l.3 3h5l.3-3c.6-.3 1.2-.6 1.7-1l2.4 1 2-3.5-2-1.5c.1-.3.1-.7.1-1Z"></path>
</svg>
<span>Settings</span>
</button>
</nav>
<div class="sidebar-footer">
<div class="identity-card">
<div class="identity-top">
<div class="avatar">P</div>
<div>
<div class="identity-name">Local identity</div>
<div class="identity-key">pk_8fb2...c91a</div>
</div>
</div>
<div class="mini-meter" aria-label="Storage usage"><span></span></div>
</div>
</div>
</aside>
<main class="main">
<div class="window-bar">
<div class="traffic" aria-hidden="true">
<span></span>
<span></span>
<span></span>
</div>
<div class="tab-strip" aria-label="Open tabs">
<div class="browser-tab active">
<span class="tab-dot"></span>
<span class="tab-title">PearBrowser Home</span>
<span class="tab-close">x</span>
</div>
<div class="browser-tab">
<span class="tab-dot"></span>
<span class="tab-title">p2pbuilders</span>
<span class="tab-close">x</span>
</div>
<div class="browser-tab">
<span class="tab-dot"></span>
<span class="tab-title">peerit</span>
<span class="tab-close">x</span>
</div>
<button class="tab-action" type="button" aria-label="New tab" title="New tab">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M12 5v14M5 12h14"></path>
</svg>
</button>
</div>
<div class="release-pill">Next release concept</div>
</div>
<div class="toolbar">
<div class="toolbar-group">
<button class="icon-button" type="button" aria-label="Back" title="Back">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="m15 18-6-6 6-6"></path>
</svg>
</button>
<button class="icon-button" type="button" aria-label="Forward" title="Forward">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
<button class="icon-button" type="button" aria-label="Reload" title="Reload">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M20 12a8 8 0 1 1-2.3-5.7"></path>
<path d="M20 4v6h-6"></path>
</svg>
</button>
</div>
<label class="address" aria-label="Address">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M12 3 5 6v5c0 5 3 8 7 10 4-2 7-5 7-10V6l-7-3Z"></path>
<path d="M9 12l2 2 4-5"></path>
</svg>
<input value="hyper://explore" aria-label="Address value" />
<span class="route-chip">hybrid</span>
</label>
<div class="toolbar-group right">
<button class="icon-button" type="button" aria-label="Bookmark" title="Bookmark">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9L12 3Z"></path>
</svg>
</button>
<button class="icon-button" type="button" aria-label="Site details" title="Site details">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<circle cx="12" cy="12" r="9"></circle>
<path d="M12 11v5M12 8h.01"></path>
</svg>
</button>
</div>
</div>
<div class="content">
<section class="stage">
<div class="view-panel active" data-panel="browse">
<header class="page-head">
<div>
<div class="page-kicker">Browse</div>
<h1>Peer web</h1>
<p class="page-subtitle">Trusted names, local history, and live hyper:// destinations in one quiet surface.</p>
</div>
<div class="page-actions">
<button class="chip-button" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
New
</button>
<button class="chip-button primary" type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path d="M5 12h14"></path>
<path d="m13 6 6 6-6 6"></path>
</svg>
Open
</button>
</div>
</header>
<label class="command">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<circle cx="11" cy="11" r="7"></circle>
<path d="m16 16 4 4"></path>
</svg>
<input placeholder="Search, paste hyper://, or type a pearname" value="" />
<span class="command-key">Cmd K</span>
</label>
<div class="grid-section">
<div class="section-row">
<h2>Live destinations</h2>
<span class="badge good">3 relays reachable</span>
</div>
<div class="card-grid">
<article class="site-card">
<div class="card-top">
<div class="site-icon">PB</div>
<span class="badge good">pinned</span>
</div>
<div>
<div class="card-title">PearBrowser Home</div>
<p class="card-copy">Release notes, starter sites, and current network entry points.</p>
</div>
<div class="mono-line">hyper://1868916a...9e25d/</div>
</article>
<article class="site-card">
<div class="card-top">
<div class="site-icon">HN</div>
<span class="badge">42 peers</span>
</div>
<div>
<div class="card-title">p2pbuilders</div>
<p class="card-copy">Posts and links from builders shipping on the peer web.</p>
</div>
<div class="mono-line">pearname://p2pbuilders</div>
</article>
<article class="site-card">
<div class="card-top">
<div class="site-icon">PI</div>
<span class="badge hot">new</span>
</div>
<div>
<div class="card-title">peerit</div>
<p class="card-copy">A front page for community threads and published drives.</p>
</div>
<div class="mono-line">pearname://peerit</div>
</article>
</div>
</div>
</div>
<div class="view-panel" data-panel="apps">
<header class="page-head">
<div>
<div class="page-kicker">Apps</div>
<h1>Apps</h1>
<p class="page-subtitle">A quieter catalog view with stronger hierarchy and launch state.</p>
</div>
<button class="chip-button primary" type="button">Open catalog</button>
</header>
<div class="app-grid">
<article class="app-card">
<div class="app-row">
<div class="app-icon">K</div>
<div>
<div class="card-title">Keet</div>
<p class="card-copy">Encrypted P2P chat and calls.</p>
</div>
</div>
<div class="mono-line">Native v3 package required</div>
</article>
<article class="app-card">
<div class="app-row">
<div class="app-icon">A</div>
<div>
<div class="card-title">anonGPT</div>
<p class="card-copy">Private pay-per-inference chat.</p>
</div>
</div>
<div class="mono-line">Native v3 package required</div>
</article>
<article class="app-card">
<div class="app-row">
<div class="app-icon">P</div>
<div>
<div class="card-title">PearPass</div>
<p class="card-copy">Local-first password manager.</p>
</div>
</div>
<div class="mono-line">Native v3 package required</div>
</article>
<article class="app-card">
<div class="app-row">
<div class="app-icon">PC</div>
<div>
<div class="card-title">Peercord</div>
<p class="card-copy">Community chat over peers.</p>
</div>
</div>
<div class="mono-line">Native v3 package required</div>
</article>
</div>
</div>
<div class="view-panel" data-panel="sites">
<header class="page-head">
<div>
<div class="page-kicker">P2P Sites</div>
<h1>Published sites</h1>
<p class="page-subtitle">Drafts, pins, and live drive status collected into one publish surface.</p>
</div>
<button class="chip-button primary" type="button">Publish</button>
</header>
<div class="site-list">
<article class="wide-card">
<div class="site-icon">PB</div>
<div>
<div class="row-title">PearBrowser Home</div>
<div class="row-sub">Pinned on 3 relays - 18 peers - updated today</div>
</div>
<button class="chip-button" type="button">Open</button>
</article>
<article class="wide-card">
<div class="site-icon" style="background: var(--amber)">D</div>
<div>
<div class="row-title">Draft: Release notes</div>
<div class="row-sub">Local draft - not published</div>
</div>
<button class="chip-button" type="button">Edit</button>
</article>
</div>
</div>
<div class="view-panel" data-panel="library">
<header class="page-head">
<div>
<div class="page-kicker">Library</div>
<h1>Library</h1>
<p class="page-subtitle">Bookmarks, recent drives, and local index results with less visual weight.</p>
</div>
<button class="chip-button" type="button">Sync</button>
</header>
<div class="list-view">
<article class="setting-row">
<div>
<div class="row-title">PearBrowser Home</div>
<div class="row-sub">hyper://1868916a7a282ff0...709e25d/</div>
</div>
<span class="badge good">bookmark</span>
</article>
<article class="setting-row">
<div>
<div class="row-title">p2pbuilders</div>
<div class="row-sub">pearname://p2pbuilders</div>
</div>
<span class="badge">history</span>
</article>
<article class="setting-row">
<div>
<div class="row-title">Keet app bundle</div>
<div class="row-sub">Legacy native record · package required</div>
</div>
<span class="badge">app</span>
</article>
</div>
</div>
<div class="view-panel" data-panel="settings">
<header class="page-head">
<div>
<div class="page-kicker">Settings</div>
<h1>Settings</h1>
<p class="page-subtitle">Identity, relays, and experimental flags grouped into compact rows.</p>
</div>
</header>
<div class="list-view">
<article class="setting-row">
<div>
<div class="row-title">Hybrid relay fetch</div>
<div class="row-sub">Fallback to pure P2P when relays are unavailable</div>
</div>
<span class="toggle" aria-hidden="true"></span>
</article>
<article class="setting-row">
<div>
<div class="row-title">Device sync</div>
<div class="row-sub">Encrypted bookmarks paired across this identity</div>
</div>
<span class="toggle" aria-hidden="true"></span>
</article>
<article class="setting-row">
<div>
<div class="row-title">Storage</div>
<div class="row-sub">438 MB used locally</div>
</div>
<button class="chip-button" type="button">Manage</button>
</article>
</div>
</div>
</section>
<aside class="side-panel" aria-label="Session details">
<section class="panel-card">
<div class="panel-title">
<span>Network</span>
<span class="status-dot" aria-label="Connected"></span>
</div>
<div class="metric-grid">
<div class="metric">
<div class="metric-value">28</div>
<div class="metric-label">Peers</div>
</div>
<div class="metric">
<div class="metric-value">3</div>
<div class="metric-label">Relays</div>
</div>
<div class="metric">
<div class="metric-value">12ms</div>
<div class="metric-label">Proxy</div>
</div>
<div class="metric">
<div class="metric-value">42%</div>
<div class="metric-label">Cache</div>
</div>
</div>
</section>
<section class="panel-card">
<div class="panel-title">
<span>Activity</span>
<span class="badge">live</span>
</div>
<div class="activity-list">
<div class="activity-row">
<div class="activity-icon">OK</div>
<div>
<div class="activity-title">Landing page resolved</div>
<div class="activity-sub">hybrid fetch - 18 peers</div>
</div>
<span class="activity-sub">now</span>
</div>
<div class="activity-row">
<div class="activity-icon">UP</div>
<div>
<div class="activity-title">peerit opened</div>
<div class="activity-sub">pearname registry</div>
</div>
<span class="activity-sub">2m</span>
</div>
<div class="activity-row">
<div class="activity-icon">ON</div>
<div>
<div class="activity-title">Catalog updated</div>
<div class="activity-sub">PearBrowser Network</div>
</div>
<span class="activity-sub">8m</span>
</div>
</div>
</section>
</aside>
</div>
</main>
</div>
<script>
const buttons = document.querySelectorAll('[data-view]')
const panels = document.querySelectorAll('[data-panel]')
const address = document.querySelector('.address input')
const title = document.querySelector('.browser-tab.active .tab-title')
const addresses = {
browse: 'hyper://explore',
apps: 'hyperbee://pearbrowser-network/apps',
sites: 'hyper://sites',
library: 'hyper://library',
settings: 'hyper://settings'
}
const titles = {
browse: 'PearBrowser Home',
apps: 'Apps',
sites: 'Published sites',
library: 'Library',
settings: 'Settings'
}
buttons.forEach((button) => {
button.addEventListener('click', () => {
const view = button.dataset.view
buttons.forEach((item) => item.classList.toggle('active', item === button))
panels.forEach((panel) => panel.classList.toggle('active', panel.dataset.panel === view))
if (address) address.value = addresses[view] || 'hyper://explore'
if (title) title.textContent = titles[view] || 'PearBrowser'
})
})
</script>
</body>
</html>