From d11849817abe76f213fe116d4650e23b5dc69f53 Mon Sep 17 00:00:00 2001 From: Nicolas Varrot Date: Wed, 11 Feb 2026 20:07:02 +0000 Subject: [PATCH] style(landing): move demo to hero, replace grid with alternating feature sections - Demo animation is now the first thing visitors see (in the hero) - Features use alternating left/right layout with visual panels - Each feature has a mini illustration (tool badges, session list, etc.) - Scroll-reveal animation on feature rows - Removed the old grid layout - Responsive: stacks vertically on mobile Closes feedback #13 --- docs/index.html | 882 +++++++++++++++++++++++++++++------------------- 1 file changed, 537 insertions(+), 345 deletions(-) diff --git a/docs/index.html b/docs/index.html index 35451bc..6a2f888 100644 --- a/docs/index.html +++ b/docs/index.html @@ -37,7 +37,6 @@ overflow-x: hidden; } - /* Animated background gradient */ .bg-gradient { position: fixed; inset: 0; @@ -54,41 +53,47 @@ padding: 0 1.5rem; } - /* Hero */ + /* ─── Hero ─── */ .hero { text-align: center; - padding: 6rem 0 4rem; + padding: 4rem 0 2rem; + } + + .hero-top { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + margin-bottom: 1rem; } .hero-logo { - width: 140px; - height: 140px; - margin: 0 auto 1.5rem; - filter: drop-shadow(0 0 30px rgba(34, 211, 238, 0.3)); + width: 72px; + height: 72px; + filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.3)); animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(-10px); } + 50% { transform: translateY(-6px); } } .hero h1 { - font-size: 3.5rem; + font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - margin-bottom: 1rem; } .hero .tagline { - font-size: 1.25rem; + font-size: 1.15rem; color: var(--text-secondary); max-width: 600px; - margin: 0 auto 2.5rem; + margin: 0 auto 1.5rem; } .buttons { @@ -96,6 +101,7 @@ gap: 1rem; justify-content: center; flex-wrap: wrap; + margin-bottom: 2rem; } .btn { @@ -114,7 +120,6 @@ background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)); color: var(--bg-primary); } - .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(34, 211, 238, 0.3); @@ -125,255 +130,12 @@ color: var(--text-primary); border: 1px solid var(--border); } - .btn-secondary:hover { border-color: var(--accent-cyan); transform: translateY(-2px); } - /* Docker oneliner */ - .oneliner { - margin: 3rem auto; - max-width: 700px; - background: var(--bg-secondary); - border: 1px solid var(--border); - border-radius: 0.75rem; - padding: 1rem 1.5rem; - font-family: 'SF Mono', 'Fira Code', monospace; - font-size: 0.9rem; - color: var(--accent-cyan); - text-align: left; - position: relative; - overflow-x: auto; - } - - .oneliner::before { - content: '$ '; - color: var(--accent-purple); - } - - .oneliner-label { - text-align: center; - font-size: 0.85rem; - color: var(--text-secondary); - margin-bottom: 0.5rem; - } - - /* Features */ - .features { - padding: 4rem 0; - } - - .features h2 { - text-align: center; - font-size: 2rem; - font-weight: 700; - margin-bottom: 3rem; - } - - .features-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); - gap: 1.5rem; - } - - .feature-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 1rem; - padding: 1.5rem; - transition: all 0.2s ease; - } - - .feature-card:hover { - border-color: var(--accent-cyan); - transform: translateY(-3px); - box-shadow: 0 8px 30px rgba(34, 211, 238, 0.08); - } - - .feature-icon { - font-size: 1.75rem; - margin-bottom: 0.75rem; - } - - .feature-card h3 { - font-size: 1.1rem; - font-weight: 600; - margin-bottom: 0.5rem; - } - - .feature-card p { - font-size: 0.9rem; - color: var(--text-secondary); - line-height: 1.5; - } - - /* Screenshot section */ - .screenshot-section { - padding: 3rem 0; - text-align: center; - } - - .screenshot-section h2 { - font-size: 2rem; - font-weight: 700; - margin-bottom: 2rem; - } - - .screenshot-placeholder { - background: var(--bg-card); - border: 1px dashed var(--border); - border-radius: 1rem; - padding: 4rem 2rem; - color: var(--text-secondary); - font-size: 1rem; - } - - /* Footer */ - .footer { - text-align: center; - padding: 4rem 0 2rem; - color: var(--text-secondary); - font-size: 0.85rem; - } - - .footer a { - color: var(--accent-cyan); - text-decoration: none; - } - - .footer a:hover { - text-decoration: underline; - } - - .footer-links { - display: flex; - gap: 2rem; - justify-content: center; - margin-bottom: 1rem; - } - - /* Responsive */ - @media (max-width: 640px) { - .hero { padding: 4rem 0 2rem; } - .hero h1 { font-size: 2.5rem; } - .hero .tagline { font-size: 1.05rem; } - .oneliner { font-size: 0.78rem; } - } - - - -
- -
-
- -

PinchChat

-

A sleek, dark-themed webchat UI for OpenClaw. Monitor sessions, stream AI responses, and inspect tool calls — all in real-time.

-
- 🚀 Get Started - ⭐ GitHub -
- -

Run it now with one command:

-
docker run -p 3000:80 ghcr.io/marlburrow/pinchchat:latest
-
-
- -
-
-

Features

-
-
-
🔧
-

Tool Call Visualization

-

See what your agent is doing in real-time. Colored badges, visible parameters, expandable results — the feature missing from every other chat UI.

-
-
-
💬
-

GPT-like Interface

-

Sessions in a sidebar, switch between conversations. Instantly familiar if you've used ChatGPT or Claude.

-
-
-
📋
-

Multi-Session Navigation

-

Browse all active sessions — main chat, cron jobs, sub-agents, background tasks. Everything in one place.

-
-
-
⚡
-

Live Streaming

-

Watch the agent think and write token by token. Full WebSocket streaming from your OpenClaw gateway.

-
-
-
📊
-

Token Usage Tracking

-

Progress bars per session showing context usage in real-time. Know exactly how much headroom is left.

-
-
-
🖼️
-

Inline Images

-

Generated or read images render directly in chat. Click to view full-size in a lightbox.

-
-
-
🎯
-

Chat-Focused

-

No settings menus or config panels cluttering the screen. Just the conversation, clean and efficient.

-
-
-
🌐
-

i18n

-

English and French built-in. Easy to add new languages.

-
-
-
-
- -
-
-

See it in Action

-

Watch the agent think, call tools, and respond — all in real-time.

-
- -
-
- - PinchChat -
-
-
🏠 Main Session
-
-
-
-
⏰ Daily AI Watch
-
-
-
-
🔧 PinchChat Improve
-
-
-
-
📧 Email Check
-
-
-
- -
-
- -
-
-
-
➤
-
-
-
-
-
- - + + +
+ + +
+
+
+ +

PinchChat

+
+

A sleek webchat UI for OpenClaw. Monitor sessions, stream AI responses, and inspect tool calls — all in real-time.

+
+ 🚀 Get Started + ⭐ GitHub +
+ + +
+
+
+ + PinchChat +
+
+
🏠 Main Session
+
+
+
+
⏰ Daily AI Watch
+
+
+
+
🔧 PinchChat Improve
+
+
+
+
📧 Email Check
+
+
+
+
+
+
+
+
➤
+
+
+
+
+
+ + +
+
+

Run it now with one command:

+
docker run -p 3000:80 ghcr.io/marlburrow/pinchchat:latest
+
+
+ + +
+
+

Why PinchChat?

+

Everything you need to interact with your OpenClaw agent — nothing you don't.

+ + +
+
+
🔧
+

Tool Call Visualization

+

See what your agent is doing in real-time. Colored badges, visible parameters, expandable results — the feature missing from every other chat UI.

+
+
+
+
+ 🌐 web_search + ⚡ exec + 📖 read + ✏️ edit + 🧠 memory_search +
+
+
▶ web_search
+
{ "query": "latest AI news" } + +✓ 3 results found
+
+
+
+
+ + +
+
+
📋
+

Multi-Session Navigation

+

Browse all active sessions — main chat, cron jobs, sub-agents, background tasks. Everything in one sidebar.

+
+
+
+
+
🏠 Main Session
+
⏰ Daily Cron
+
🚀 Sub-Agent #3
+
📧 Email Checker
+
+
+
+
+ + +
+
+
⚡
+

Live Streaming

+

Watch the agent think and write token by token. Full WebSocket streaming from your OpenClaw gateway.

+
+
+
+
+
+
+
+
+
+
+ Thinking +
+
+
+
+ + +
+
+
📊
+

Token Usage Tracking

+

Progress bars per session showing context usage in real-time. Know exactly how much headroom is left.

+
+
+
+
+
+ Main +
+ 42% +
+
+ Cron +
+ 18% +
+
+ Sub-Agent +
+ 75% +
+
+
+
+
+ + +
+
+
💬
+

Familiar & Focused

+

A GPT-like interface — sessions in a sidebar, switch between conversations. No settings menus or config panels cluttering the screen. Just the conversation, clean and efficient.

+
+
+
+
🎯
+
Zero config clutter.
Just you and your agent.
+
+
+
+ + +
+
+
🖼️
+

Inline Images & i18n

+

Generated or read images render directly in chat with a click-to-zoom lightbox. English and French built-in — easy to add new languages.

+
+
+
+
+
🌄
+
🎨
+
+
+ EN + FR +
+
+
+
+
+
+ + - -