Skip to content

Commit 68974c1

Browse files
robdmacrobdmac
committed
Update webpage
1 parent 7a9b893 commit 68974c1

File tree

3 files changed

+97
-96
lines changed

3 files changed

+97
-96
lines changed

‎docs/index.html‎

Lines changed: 90 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h2 class="modal-title">Thanks for Registering!</h2>
6767
<div class="hero-content">
6868
<h1 class="hero-title">
6969
<span class="hero-text-medium">What if </span>
70-
<span class="rotating-text" id="rotatingText">claude code</span>
70+
<span class="rotating-text" id="rotatingText">Codex Cli</span>
7171
<span class="hero-text-medium"> could </span>
7272
<span class="rotating-text-2" id="rotatingText2">talk</span>
7373
<span class="hero-text-medium">?</span>
@@ -126,21 +126,21 @@ <h2 class="section-title">Quick Start Guide</h2>
126126

127127
<div class="quick-start-tabs">
128128
<div class="tab-buttons">
129-
<button class="tab-button active" data-tab="web-extension">
129+
<button class="tab-button active" data-tab="applications">
130+
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
131+
<rect width="18" height="18" x="3" y="3" rx="2"/>
132+
<path d="M9 9h6v6H9z"/>
133+
</svg>
134+
<span>Applications</span>
135+
</button>
136+
<button class="tab-button" data-tab="web-extension">
130137
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
131138
<circle cx="12" cy="12" r="10"/>
132139
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/>
133140
<path d="M2 12h20"/>
134141
</svg>
135142
<span>Web Extension</span>
136143
</button>
137-
<button class="tab-button" data-tab="applications">
138-
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
139-
<rect width="18" height="18" x="3" y="3" rx="2"/>
140-
<path d="M9 9h6v6H9z"/>
141-
</svg>
142-
<span>Applications</span>
143-
</button>
144144
<button class="tab-button" data-tab="python-library">
145145
<svg class="tab-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
146146
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
@@ -151,91 +151,26 @@ <h2 class="section-title">Quick Start Guide</h2>
151151
</div>
152152

153153
<div class="tab-content">
154-
<!-- Web Extension Tab -->
155-
<div class="tab-panel active" id="web-extension">
156-
<div class="guide-header">
157-
<h3 class="guide-title">Chrome Extension Setup</h3>
158-
<p class="guide-subtitle">Add voice control to any website including bolt.new, Claude, and more</p>
159-
</div>
160-
161-
<div class="steps-container">
162-
<div class="step">
163-
<div class="step-number">1</div>
164-
<div class="step-content">
165-
<h4 class="step-title">Setup & Start Server</h4>
166-
<p class="step-description">Clone the repository, install dependencies, and start the TalkiTo MCP SSE server</p>
167-
<div class="code-block multi-line">
168-
<code>git clone https://github.com/robdmac/talkito.git
169-
cd talkito
170-
pip install -e .
171-
talkito --mcp-sse-server</code>
172-
<button class="copy-btn" data-copy="git clone https://github.com/robdmac/talkito.git
173-
cd talkito
174-
pip install -e .
175-
talkito --mcp-sse-server">
176-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
177-
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
178-
<path d="M4 16c-1.1 0-2-.9-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
179-
</svg>
180-
</button>
181-
</div>
182-
</div>
183-
</div>
184-
185-
<div class="step">
186-
<div class="step-number">2</div>
187-
<div class="step-content">
188-
<h4 class="step-title">Install Chrome Extension</h4>
189-
<p class="step-description">Load the extension into Chrome using developer mode</p>
190-
<div class="step-details">
191-
<ol class="sub-steps">
192-
<li>Open Chrome and go to <strong>chrome://extensions/</strong></li>
193-
<li>Enable <strong>"Developer mode"</strong> in the top right</li>
194-
<li>Click <strong>"Load unpacked"</strong></li>
195-
<li>Select the <strong>extensions/chrome</strong> folder from your TalkiTo directory</li>
196-
</ol>
197-
</div>
198-
</div>
199-
</div>
200-
201-
<div class="step">
202-
<div class="step-number">3</div>
203-
<div class="step-content">
204-
<h4 class="step-title">Start Talking!</h4>
205-
<p class="step-description">Right-click on any chat interface and select TalkiTo</p>
206-
<div class="step-details">
207-
<ol class="sub-steps">
208-
<li>Navigate to <strong>bolt.new</strong> or any website with a chat</li>
209-
<li>Right-click on the chat input area</li>
210-
<li>Select <strong>"TalkiTo: Talk"</strong> from the menu and from then on all output will be spoken aloud</li>
211-
<li>Other options include <strong>"Talkito: WhatsApp"</strong> and <strong>"Talkito: Slack"</strong></li>
212-
</ol>
213-
</div>
214-
</div>
215-
</div>
216-
</div>
217-
</div>
218-
219154
<!-- Applications Tab -->
220-
<div class="tab-panel" id="applications">
155+
<div class="tab-panel active" id="applications">
221156
<div class="guide-header">
222157
<h3 class="guide-title">Application Setup</h3>
223158
<p class="guide-subtitle">Add voice control directly to Claude Code and other desktop applications</p>
224159
</div>
225-
160+
226161
<div class="steps-container">
227162
<div class="step">
228163
<div class="step-number">1</div>
229164
<div class="step-content">
230165
<h4 class="step-title">Setup & Install</h4>
231166
<p class="step-description">Clone the repository and install all required dependencies</p>
232167
<div class="code-block multi-line">
233-
<code>git clone https://github.com/robdmac/talkito.git
234-
cd talkito
235-
pip install -e .</code>
168+
<code>git clone https://github.com/robdmac/talkito.git
169+
cd talkito
170+
pip install -e .</code>
236171
<button class="copy-btn" data-copy="git clone https://github.com/robdmac/talkito.git
237-
cd talkito
238-
pip install -e .">
172+
cd talkito
173+
pip install -e .">
239174
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
240175
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
241176
<path d="M4 16c-1.1 0-2-.9-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
@@ -266,10 +201,10 @@ <h4 class="step-title">Launch Claude Integration</h4>
266201
<div class="demo-video" style="margin: 2rem 0;">
267202
<h4 class="step-title" style="text-align: center; margin-bottom: 1rem;">See TalkiTo in Action</h4>
268203
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin: 0 auto;">
269-
<iframe src="https://www.youtube.com/embed/FJdYTYZK_0U"
270-
title="TalkiTo Demo"
271-
frameborder="0"
272-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
204+
<iframe src="https://www.youtube.com/embed/pf8jFt0smqs"
205+
title="TalkiTo Demo"
206+
frameborder="0"
207+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
273208
allowfullscreen
274209
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px;">
275210
</iframe>
@@ -327,6 +262,71 @@ <h4 class="step-title">Voice Commands</h4>
327262
</div>
328263
</div>
329264

265+
<!-- Web Extension Tab -->
266+
<div class="tab-panel" id="web-extension">
267+
<div class="guide-header">
268+
<h3 class="guide-title">Chrome Extension Setup</h3>
269+
<p class="guide-subtitle">Add voice control to any website including bolt.new, Claude, and more</p>
270+
</div>
271+
272+
<div class="steps-container">
273+
<div class="step">
274+
<div class="step-number">1</div>
275+
<div class="step-content">
276+
<h4 class="step-title">Setup & Start Server</h4>
277+
<p class="step-description">Clone the repository, install dependencies, and start the TalkiTo MCP SSE server</p>
278+
<div class="code-block multi-line">
279+
<code>git clone https://github.com/robdmac/talkito.git
280+
cd talkito
281+
pip install -e .
282+
talkito --mcp-sse-server</code>
283+
<button class="copy-btn" data-copy="git clone https://github.com/robdmac/talkito.git
284+
cd talkito
285+
pip install -e .
286+
talkito --mcp-sse-server">
287+
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
288+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
289+
<path d="M4 16c-1.1 0-2-.9-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
290+
</svg>
291+
</button>
292+
</div>
293+
</div>
294+
</div>
295+
296+
<div class="step">
297+
<div class="step-number">2</div>
298+
<div class="step-content">
299+
<h4 class="step-title">Install Chrome Extension</h4>
300+
<p class="step-description">Load the extension into Chrome using developer mode</p>
301+
<div class="step-details">
302+
<ol class="sub-steps">
303+
<li>Open Chrome and go to <strong>chrome://extensions/</strong></li>
304+
<li>Enable <strong>"Developer mode"</strong> in the top right</li>
305+
<li>Click <strong>"Load unpacked"</strong></li>
306+
<li>Select the <strong>extensions/chrome</strong> folder from your TalkiTo directory</li>
307+
</ol>
308+
</div>
309+
</div>
310+
</div>
311+
312+
<div class="step">
313+
<div class="step-number">3</div>
314+
<div class="step-content">
315+
<h4 class="step-title">Start Talking!</h4>
316+
<p class="step-description">Right-click on any chat interface and select TalkiTo</p>
317+
<div class="step-details">
318+
<ol class="sub-steps">
319+
<li>Navigate to <strong>bolt.new</strong> or any website with a chat</li>
320+
<li>Right-click on the chat input area</li>
321+
<li>Select <strong>"TalkiTo: Talk"</strong> from the menu and from then on all output will be spoken aloud</li>
322+
<li>Other options include <strong>"Talkito: WhatsApp"</strong> and <strong>"Talkito: Slack"</strong></li>
323+
</ol>
324+
</div>
325+
</div>
326+
</div>
327+
</div>
328+
</div>
329+
330330
<!-- Python Library Tab -->
331331
<div class="tab-panel" id="python-library">
332332
<div class="guide-header">
@@ -462,11 +462,11 @@ <h2 class="section-title">Feature Comparison</h2>
462462
<td class="feature-name">Speech Recognition</td>
463463
<td class="talkito-cell">
464464
<span class="feature-value">8 Options</span>
465-
<span class="feature-detail">Houndify, Whisper, Deepgram, AssemblyAI, AWS, Azure, Google, Whisper</span>
465+
<span class="feature-detail">Whisper, Houndify, Deepgram, AssemblyAI, AWS, Azure, Google, Bing</span>
466466
</td>
467467
<td class="premium-cell">
468468
<span class="feature-value">8 Options</span>
469-
<span class="feature-detail">Houndify, Whisper, Deepgram, AssemblyAI, AWS, Azure, Google, Whisper</span>
469+
<span class="feature-detail">Whisper, Houndify, Deepgram, AssemblyAI, AWS, Azure, Google, Bing</span>
470470
</td>
471471
<td class="competitor-cell">
472472
<span class="feature-value">1 Option</span>
@@ -476,12 +476,12 @@ <h2 class="section-title">Feature Comparison</h2>
476476
<tr>
477477
<td class="feature-name">Text-to-Speech</td>
478478
<td class="talkito-cell">
479-
<span class="feature-value">6 Options</span>
480-
<span class="feature-detail">OpenAI, ElevenLabs, AWS Polly, Azure, Google Cloud, Deepgram</span>
479+
<span class="feature-value">8 Options</span>
480+
<span class="feature-detail">Kokoro, KittenTTS, OpenAI, ElevenLabs, AWS Polly, Azure, Google Cloud, Deepgram</span>
481481
</td>
482482
<td class="premium-cell">
483483
<span class="feature-value">6 Options</span>
484-
<span class="feature-detail">OpenAI, ElevenLabs, AWS Polly, Azure, Google Cloud, Deepgram</span>
484+
<span class="feature-detail">Kokoro, KittenTTS, OpenAI, ElevenLabs, AWS Polly, Azure, Google Cloud, Deepgram</span>
485485
</td>
486486
<td class="competitor-cell">
487487
<svg class="x-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

‎docs/script.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', function() {
33
const rotatingText = document.getElementById('rotatingText');
44
const rotatingText2 = document.getElementById('rotatingText2');
55

6-
const words1 = ['claude code', 'bolt.new', 'any website', 'any app'];
6+
const words1 = ['Codex Cli', 'Claude Code', 'any website', 'any app'];
77
const words2 = ['talk', 'listen', 'text', 'slack'];
88

99
let currentIndex1 = 0;
@@ -18,12 +18,12 @@ document.addEventListener('DOMContentLoaded', function() {
1818
// Change text
1919
currentIndex1 = (currentIndex1 + 1) % words1.length;
2020
rotatingText.textContent = words1[currentIndex1];
21-
21+
2222
// Add letter spacing for shorter words
23-
if (words1[currentIndex1] === 'bolt.new' || words1[currentIndex1] === 'any app') {
24-
rotatingText.style.letterSpacing = '0.01em';
25-
} else {
23+
if (words1[currentIndex1] === 'Claude Code' || words1[currentIndex1] === 'any website') {
2624
rotatingText.style.letterSpacing = '-0.1em';
25+
} else {
26+
rotatingText.style.letterSpacing = '0.01em';
2727
}
2828

2929
// Fade in

‎docs/styles.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -292,8 +292,9 @@ body {
292292
color: var(--tropical-indigo);
293293
display: inline-block;
294294
transition: opacity 0.4s ease, transform 0.4s ease;
295-
width: 4.6em;
295+
width: 5em;
296296
text-align: center;
297+
letter-spacing: -0.1em;
297298
}
298299

299300
.rotating-text-2 {

0 commit comments

Comments
 (0)