kuannnn
42861ea7fa
Multi-adapter mobile UI for AI coding assistants. Supports Claude Code, Codex CLI, and Gemini CLI through one interface. Features: - Real-time bidirectional sync via tmux + WebSocket - Cross-AI review (send one AI's output to another for review) - Multi-review tabs with minimize/expand - Push notifications (PWA) with smart session-aware filtering - Three-channel event system (hooks, file watcher, pane monitor) - Voice input, image paste, draft persistence - Terminal-native design (JetBrains Mono, dark theme, pixel art claw) - CLI with --adapter flag on every command - Zero-overhead fire-and-forget hooks
288 lines
13 KiB
HTML
288 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>ClawTap — Simple Claw Loading</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
background: #09090b;
|
||
color: #fafafa;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 40px 20px;
|
||
gap: 40px;
|
||
}
|
||
h2 { color: #71717a; font-size: 11px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 8px; }
|
||
.section { text-align: center; width: 100%; max-width: 400px; }
|
||
.divider { width: 100%; height: 1px; background: #27272a; }
|
||
.tag { display: inline-block; background: #18181b; color: #22c55e; font-size: 10px; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; }
|
||
|
||
.svg-c { image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.3)); overflow: visible; }
|
||
|
||
.track { display: flex; align-items: center; justify-content: center; height: 48px; overflow: hidden; }
|
||
.walk { animation: walk 2.2s linear infinite; display: flex; align-items: center; }
|
||
@keyframes walk { 0% { transform: translateX(-24px); } 100% { transform: translateX(8px); } }
|
||
|
||
.dots { display: flex; gap: 8px; margin-left: 4px; align-items: center; }
|
||
.d {
|
||
width: 4px; height: 4px; background: rgba(34, 197, 94, 0.35);
|
||
border-radius: 50%; animation: eat 2.2s ease-in-out infinite;
|
||
}
|
||
.d:nth-child(1) { animation-delay: 0s; }
|
||
.d:nth-child(2) { animation-delay: 0.35s; }
|
||
.d:nth-child(3) { animation-delay: 0.7s; }
|
||
.d:nth-child(4) { animation-delay: 1.05s; }
|
||
.d:nth-child(5) { animation-delay: 1.4s; }
|
||
@keyframes eat {
|
||
0%, 50% { opacity: 0.5; transform: scale(1); }
|
||
65% { opacity: 0; transform: scale(0); }
|
||
80%, 100% { opacity: 0.5; transform: scale(1); }
|
||
}
|
||
|
||
.lbl { font-size: 11px; color: #71717a; animation: pulse 2s ease-in-out infinite; margin-top: 4px; }
|
||
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
|
||
|
||
/* Pivot animations */
|
||
@keyframes p12t { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(0deg); } }
|
||
@keyframes p12b { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(0deg); } }
|
||
@keyframes p18t { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(0deg); } }
|
||
@keyframes p18b { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(0deg); } }
|
||
@keyframes p25t { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(0deg); } }
|
||
@keyframes p25b { 0%, 100% { transform: rotate(25deg); } 50% { transform: rotate(0deg); } }
|
||
|
||
.ascii { color: #22c55e; font-size: 14px; line-height: 1.2; white-space: pre; text-shadow: 0 0 8px rgba(34, 197, 94, 0.2); font-weight: 700; }
|
||
.brand { font-size: 22px; font-weight: 700; letter-spacing: 4px; color: #fafafa; text-shadow: 0 0 12px rgba(34, 197, 94, 0.15); margin-top: 8px; }
|
||
.sub { font-size: 11px; color: #71717a; margin-top: 3px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Logo -->
|
||
<div class="section">
|
||
<h2>Logo</h2>
|
||
<pre class="ascii">
|
||
▐▌ ▐▌
|
||
▐█ █▌
|
||
▐██▄▄██▌
|
||
▀████▀
|
||
██
|
||
</pre>
|
||
<div class="brand">ClawTap</div>
|
||
<div class="sub">remote terminal</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== 1: Original 8×6, no eye, 12° ====== -->
|
||
<div class="section">
|
||
<h2>1 — Original (8×6, 12°)</h2>
|
||
<span class="tag">clean, no eye</span>
|
||
<div class="track">
|
||
<div class="walk">
|
||
<svg width="48" height="36" viewBox="0 0 8 6" class="svg-c">
|
||
<g style="transform-origin: 3px 2px; animation: p12t 0.4s ease-in-out infinite;">
|
||
<rect x="4" y="0" width="4" height="1" fill="#22c55e"/>
|
||
<rect x="3" y="1" width="2" height="1" fill="#22c55e"/>
|
||
</g>
|
||
<rect x="0" y="2" width="4" height="2" fill="#22c55e"/>
|
||
<rect x="4" y="2" width="1" height="2" fill="#4ade80" opacity="0.5"/>
|
||
<g style="transform-origin: 3px 4px; animation: p12b 0.4s ease-in-out infinite;">
|
||
<rect x="3" y="4" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="4" y="5" width="4" height="1" fill="#22c55e"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="dots"><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div></div>
|
||
</div>
|
||
<div class="lbl">Connecting...</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== 2: With eye, 12° ====== -->
|
||
<div class="section">
|
||
<h2>2 — With Eye (8×6, 12°)</h2>
|
||
<span class="tag">+ eye pixel</span>
|
||
<div class="track">
|
||
<div class="walk">
|
||
<svg width="48" height="36" viewBox="0 0 8 6" class="svg-c">
|
||
<g style="transform-origin: 3px 2px; animation: p12t 0.4s ease-in-out infinite;">
|
||
<rect x="4" y="0" width="4" height="1" fill="#22c55e"/>
|
||
<rect x="3" y="1" width="2" height="1" fill="#22c55e"/>
|
||
</g>
|
||
<rect x="0" y="2" width="4" height="2" fill="#22c55e"/>
|
||
<rect x="4" y="2" width="1" height="2" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="1" y="2" width="1" height="1" fill="#09090b"/>
|
||
<g style="transform-origin: 3px 4px; animation: p12b 0.4s ease-in-out infinite;">
|
||
<rect x="3" y="4" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="4" y="5" width="4" height="1" fill="#22c55e"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="dots"><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div></div>
|
||
</div>
|
||
<div class="lbl">Connecting...</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== 3: With eye, 18° wider ====== -->
|
||
<div class="section">
|
||
<h2>3 — With Eye (8×6, 18°)</h2>
|
||
<span class="tag">wider open</span>
|
||
<div class="track">
|
||
<div class="walk">
|
||
<svg width="48" height="36" viewBox="0 0 8 6" class="svg-c">
|
||
<g style="transform-origin: 3px 2px; animation: p18t 0.4s ease-in-out infinite;">
|
||
<rect x="4" y="0" width="4" height="1" fill="#22c55e"/>
|
||
<rect x="3" y="1" width="2" height="1" fill="#22c55e"/>
|
||
</g>
|
||
<rect x="0" y="2" width="4" height="2" fill="#22c55e"/>
|
||
<rect x="4" y="2" width="1" height="2" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="1" y="2" width="1" height="1" fill="#09090b"/>
|
||
<g style="transform-origin: 3px 4px; animation: p18b 0.4s ease-in-out infinite;">
|
||
<rect x="3" y="4" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="4" y="5" width="4" height="1" fill="#22c55e"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="dots"><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div></div>
|
||
</div>
|
||
<div class="lbl">Connecting...</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== 4: With eye, 25° dramatic ====== -->
|
||
<div class="section">
|
||
<h2>4 — With Eye (8×6, 25°)</h2>
|
||
<span class="tag">big chomp</span>
|
||
<div class="track">
|
||
<div class="walk">
|
||
<svg width="48" height="40" viewBox="0 0 8 6" class="svg-c">
|
||
<g style="transform-origin: 3px 2px; animation: p25t 0.4s ease-in-out infinite;">
|
||
<rect x="4" y="0" width="4" height="1" fill="#22c55e"/>
|
||
<rect x="3" y="1" width="2" height="1" fill="#22c55e"/>
|
||
</g>
|
||
<rect x="0" y="2" width="4" height="2" fill="#22c55e"/>
|
||
<rect x="4" y="2" width="1" height="2" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="1" y="2" width="1" height="1" fill="#09090b"/>
|
||
<g style="transform-origin: 3px 4px; animation: p25b 0.4s ease-in-out infinite;">
|
||
<rect x="3" y="4" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="4" y="5" width="4" height="1" fill="#22c55e"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="dots"><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div></div>
|
||
</div>
|
||
<div class="lbl">Connecting...</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== 5: Longer pincers 9×6, 18° ====== -->
|
||
<div class="section">
|
||
<h2>5 — Long Pincers (9×6, 18°)</h2>
|
||
<span class="tag">+ 1px reach</span>
|
||
<div class="track">
|
||
<div class="walk">
|
||
<svg width="54" height="36" viewBox="0 0 9 6" class="svg-c">
|
||
<g style="transform-origin: 4px 2px; animation: p18t 0.4s ease-in-out infinite;">
|
||
<rect x="5" y="0" width="4" height="1" fill="#22c55e"/>
|
||
<rect x="4" y="1" width="3" height="1" fill="#22c55e"/>
|
||
</g>
|
||
<rect x="0" y="2" width="5" height="2" fill="#22c55e"/>
|
||
<rect x="5" y="2" width="1" height="2" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="1" y="2" width="1" height="1" fill="#09090b"/>
|
||
<g style="transform-origin: 4px 4px; animation: p18b 0.4s ease-in-out infinite;">
|
||
<rect x="4" y="4" width="3" height="1" fill="#22c55e"/>
|
||
<rect x="5" y="5" width="4" height="1" fill="#22c55e"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="dots"><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div></div>
|
||
</div>
|
||
<div class="lbl">Connecting...</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== 6: Curved pincers 8×7, 18° ====== -->
|
||
<div class="section">
|
||
<h2>6 — Curved Pincers (8×7, 18°)</h2>
|
||
<span class="tag">organic shape</span>
|
||
<div class="track">
|
||
<div class="walk">
|
||
<svg width="48" height="42" viewBox="0 0 8 7" class="svg-c">
|
||
<g style="transform-origin: 3px 2.5px; animation: p18t 0.4s ease-in-out infinite;">
|
||
<rect x="5" y="0" width="3" height="1" fill="#22c55e"/>
|
||
<rect x="4" y="1" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="3" y="2" width="2" height="1" fill="#22c55e"/>
|
||
</g>
|
||
<rect x="0" y="3" width="4" height="1" fill="#22c55e"/>
|
||
<rect x="4" y="3" width="1" height="1" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="1" y="3" width="1" height="1" fill="#09090b"/>
|
||
<g style="transform-origin: 3px 4px; animation: p18b 0.4s ease-in-out infinite;">
|
||
<rect x="3" y="4" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="4" y="5" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="5" y="6" width="3" height="1" fill="#22c55e"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="dots"><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div><div class="d"></div></div>
|
||
</div>
|
||
<div class="lbl">Connecting...</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- ====== STATIC COMPARISON ====== -->
|
||
<div class="section">
|
||
<h2>Static Comparison</h2>
|
||
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
|
||
<div style="text-align: center;">
|
||
<svg width="36" height="27" viewBox="0 0 8 6" class="svg-c">
|
||
<rect x="4" y="0" width="4" height="1" fill="#22c55e"/><rect x="3" y="1" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="0" y="2" width="4" height="2" fill="#22c55e"/><rect x="4" y="2" width="1" height="2" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="3" y="4" width="2" height="1" fill="#22c55e"/><rect x="4" y="5" width="4" height="1" fill="#22c55e"/>
|
||
</svg>
|
||
<div style="color: #52525b; font-size: 9px; margin-top: 4px;">1</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<svg width="36" height="27" viewBox="0 0 8 6" class="svg-c">
|
||
<rect x="4" y="0" width="4" height="1" fill="#22c55e"/><rect x="3" y="1" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="0" y="2" width="4" height="2" fill="#22c55e"/><rect x="4" y="2" width="1" height="2" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="1" y="2" width="1" height="1" fill="#09090b"/>
|
||
<rect x="3" y="4" width="2" height="1" fill="#22c55e"/><rect x="4" y="5" width="4" height="1" fill="#22c55e"/>
|
||
</svg>
|
||
<div style="color: #52525b; font-size: 9px; margin-top: 4px;">2-4</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<svg width="40" height="27" viewBox="0 0 9 6" class="svg-c">
|
||
<rect x="5" y="0" width="4" height="1" fill="#22c55e"/><rect x="4" y="1" width="3" height="1" fill="#22c55e"/>
|
||
<rect x="0" y="2" width="5" height="2" fill="#22c55e"/><rect x="5" y="2" width="1" height="2" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="1" y="2" width="1" height="1" fill="#09090b"/>
|
||
<rect x="4" y="4" width="3" height="1" fill="#22c55e"/><rect x="5" y="5" width="4" height="1" fill="#22c55e"/>
|
||
</svg>
|
||
<div style="color: #52525b; font-size: 9px; margin-top: 4px;">5</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<svg width="36" height="32" viewBox="0 0 8 7" class="svg-c">
|
||
<rect x="5" y="0" width="3" height="1" fill="#22c55e"/><rect x="4" y="1" width="2" height="1" fill="#22c55e"/><rect x="3" y="2" width="2" height="1" fill="#22c55e"/>
|
||
<rect x="0" y="3" width="4" height="1" fill="#22c55e"/><rect x="4" y="3" width="1" height="1" fill="#4ade80" opacity="0.5"/>
|
||
<rect x="1" y="3" width="1" height="1" fill="#09090b"/>
|
||
<rect x="3" y="4" width="2" height="1" fill="#22c55e"/><rect x="4" y="5" width="2" height="1" fill="#22c55e"/><rect x="5" y="6" width="3" height="1" fill="#22c55e"/>
|
||
</svg>
|
||
<div style="color: #52525b; font-size: 9px; margin-top: 4px;">6</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|