mirror of
https://github.com/pocketpaw/pocketpaw.git
synced 2026-05-13 21:21:53 +00:00
4bb7313829
Consolidate documentation from the separate pocketpaw-web repo into the main pocketpaw repo. This keeps docs and code in sync so PRs can update both atomically. - Remove docs/ from .gitignore - Remove docs' own .git (was pocketpaw/pocketpaw-web) - Add .github/workflows/deploy-docs.yml (builds from docs/ subdirectory) - Track all 120+ MDX pages, config, landing page, and public assets The separate pocketpaw-web repo can now be archived. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
245 lines
9.3 KiB
HTML
245 lines
9.3 KiB
HTML
<!-- OG Social Sharing Image — 2026-02-08
|
|
1200x630 screenshot target for Twitter/LinkedIn link previews.
|
|
Open in browser, screenshot the card. Matches "Denim & Honey" landing page design.
|
|
Updated: fixed logo stretch (object-fit contain), matched Pocket+Paw italic style,
|
|
added WhatsApp channel, single-color faded top accent. -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>PocketPaw OG Image</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
background: #e0ddd8;
|
|
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.card {
|
|
width: 1200px;
|
|
height: 630px;
|
|
background: #f9f8f6;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0;
|
|
}
|
|
|
|
/* Dot grid texture */
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: radial-gradient(rgba(26,26,46,0.05) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.card > * { position: relative; z-index: 1; }
|
|
|
|
/* Soft faded blue top accent */
|
|
.accent-top {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, transparent 0%, #4a6fa5 30%, #4a6fa5 70%, transparent 100%);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Mascot image */
|
|
.mascot {
|
|
width: auto;
|
|
height: 200px;
|
|
object-fit: contain;
|
|
margin-bottom: 16px;
|
|
filter: drop-shadow(0 12px 32px rgba(80,60,30,0.15));
|
|
}
|
|
|
|
/* Brand name — matches landing page: Pocket (regular) + Paw (italic blue) */
|
|
.brand-name {
|
|
font-family: 'Fraunces', Georgia, serif;
|
|
font-size: 64px;
|
|
font-weight: 400;
|
|
color: #1a1a2e;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.brand-name em {
|
|
font-style: italic;
|
|
color: #4a6fa5;
|
|
}
|
|
|
|
/* Tagline */
|
|
.tagline {
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
color: #5c5c7a;
|
|
letter-spacing: 0.01em;
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* Install command pill */
|
|
.install {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: #1a1a2e;
|
|
color: #e8eef6;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
padding: 12px 28px;
|
|
border-radius: 100px;
|
|
letter-spacing: 0.02em;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.install .prompt {
|
|
color: #d49a5c;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Channel row */
|
|
.channels {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.channel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #5c5c7a;
|
|
background: #ffffff;
|
|
border: 1px solid rgba(26,26,46,0.07);
|
|
border-radius: 100px;
|
|
padding: 7px 16px;
|
|
box-shadow: 0 1px 3px rgba(26,26,46,0.04);
|
|
}
|
|
|
|
.channel svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Bottom bar */
|
|
.bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 40px;
|
|
background: rgba(255,255,255,0.5);
|
|
border-top: 1px solid rgba(26,26,46,0.04);
|
|
}
|
|
|
|
.bottom-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #9b9bb0;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.bottom-left .dot {
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 50%;
|
|
background: #9b9bb0;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.bottom-right {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #4a6fa5;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="accent-top"></div>
|
|
|
|
<img src="./paw.png" alt="PocketPaw mascot" class="mascot">
|
|
|
|
<h1 class="brand-name">Pocket<em>Paw</em></h1>
|
|
|
|
<p class="tagline">Your AI agent. Modular. Secure. Everywhere.</p>
|
|
|
|
<div class="install">
|
|
<span class="prompt">$</span> curl -fsSL https://pocketpaw.xyz/install.sh | sh
|
|
</div>
|
|
|
|
<div class="channels">
|
|
<!-- Telegram -->
|
|
<div class="channel">
|
|
<svg viewBox="0 0 24 24" fill="#4a6fa5"><path d="M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.479.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
|
|
Telegram
|
|
</div>
|
|
<!-- Discord -->
|
|
<div class="channel">
|
|
<svg viewBox="0 0 24 24" fill="#4a6fa5"><path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128c.126-.094.252-.192.372-.292a.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"/></svg>
|
|
Discord
|
|
</div>
|
|
<!-- Slack -->
|
|
<div class="channel">
|
|
<svg viewBox="0 0 24 24" fill="#4a6fa5"><path d="M5.042 15.165a2.528 2.528 0 01-2.52 2.523A2.528 2.528 0 010 15.165a2.527 2.527 0 012.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 012.521-2.52 2.527 2.527 0 012.521 2.52v6.313A2.528 2.528 0 018.834 24a2.528 2.528 0 01-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 01-2.521-2.52A2.528 2.528 0 018.834 0a2.528 2.528 0 012.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 012.521 2.521 2.528 2.528 0 01-2.521 2.521H2.522A2.528 2.528 0 010 8.834a2.528 2.528 0 012.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 012.522-2.521A2.528 2.528 0 0124 8.834a2.528 2.528 0 01-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 01-2.523 2.521 2.527 2.527 0 01-2.52-2.521V2.522A2.527 2.527 0 0115.165 0a2.528 2.528 0 012.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 012.523 2.522A2.528 2.528 0 0115.165 24a2.527 2.527 0 01-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 01-2.52-2.523 2.526 2.526 0 012.52-2.52h6.313A2.527 2.527 0 0124 15.165a2.528 2.528 0 01-2.522 2.523h-6.313z"/></svg>
|
|
Slack
|
|
</div>
|
|
<!-- WhatsApp -->
|
|
<div class="channel">
|
|
<svg viewBox="0 0 24 24" fill="#4a6fa5"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
|
|
WhatsApp
|
|
</div>
|
|
<!-- Web -->
|
|
<div class="channel">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="#4a6fa5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
Web
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom">
|
|
<div class="bottom-left">
|
|
<span>Open Source</span>
|
|
<span class="dot"></span>
|
|
<span>MIT Licensed</span>
|
|
<span class="dot"></span>
|
|
<span>Python 3.11+</span>
|
|
<span class="dot"></span>
|
|
<span>30-Second Install</span>
|
|
</div>
|
|
<div class="bottom-right">github.com/pocketpaw</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|