| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="description" content="Talk through emotions, practice conversations, and understand communication approaches with explanations inside Emotion Chat."> |
| <title>Emotion Chat — conversation with understanding</title> |
| <style> |
| :root { color-scheme: light; font-family: system-ui, sans-serif; color: #203a33; background: #f5f8f5; } |
| * { box-sizing: border-box; } |
| body { margin: 0; } |
| main { max-width: 1100px; margin: auto; padding: 36px 20px; } |
| .eyebrow { color: #426257; font-weight: 650; font-size: .9rem; } |
| h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 12px 0; letter-spacing: -.04em; } |
| p { max-width: 760px; line-height: 1.65; } |
| .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 24px 0; } |
| a { color: #215d4b; text-underline-offset: 3px; } |
| .button { display: inline-block; background: #286c61; color: white; padding: 13px 20px; border-radius: 8px; text-decoration: none; font-weight: 650; } |
| a:focus-visible { outline: 3px solid #80551d; outline-offset: 4px; } |
| .note { font-size: .9rem; color: #4c625a; } |
| iframe { display: block; width: 100%; height: 1050px; border: 1px solid #d3ded6; border-radius: 12px; background: white; margin: 28px 0; } |
| footer { border-top: 1px solid #d3ded6; padding-top: 20px; } |
| @media (max-width: 600px) { main { padding: 24px 14px; } iframe { height: 1200px; } } |
| </style> |
| </head> |
| <body> |
| <main> |
| <header> |
| <div class="eyebrow">CONVERSATION · UNDERSTANDING · PRACTICE</div> |
| <h1>Emotion Chat</h1> |
| <p>Talk it through in your own words. Explore what a message might mean, practice a reply, and understand why different communication approaches may help. You can ask follow-up questions and find words that work for you.</p> |
| <div class="actions"> |
| <a class="button" href="https://claytonsamples-emotion-chat.hf.space/" target="_blank" rel="noopener">Open the demo in a new tab ↗</a> |
| <a href="mailto:emotionchatllc@gmail.com?subject=Emotion%20Chat%20therapist%20pilot">Ask about the therapist pilot</a> |
| </div> |
| <p class="note">Choose “Talk it through” or “Practice with me.” Live replies require an available AI connection and your sharing consent; the app shows its connection status. Optional example lessons are also available. Open in a new tab for more room.</p> |
| </header> |
| <iframe title="Emotion Chat conversational learning" src="https://claytonsamples-emotion-chat.hf.space/" loading="lazy" referrerpolicy="no-referrer"></iframe> |
| <footer> |
| <h2>Help shape useful communication practice</h2> |
| <p>Built from personal experience and being developed for US solo therapists and small practices. Clinician and autistic community feedback will help shape the professional toolkit. The paid workspace is in development and is not yet available for purchase or client records.</p> |
| <p><a href="mailto:emotionchatllc@gmail.com?subject=Emotion%20Chat%20therapist%20pilot">emotionchatllc@gmail.com</a> · Business inquiries only. Please do not send client names, records, messages or videos.</p> |
| <p class="note">Educational practice, not therapy, diagnosis, or a validated emotional-intelligence assessment. AI chat sends messages to the named provider after your consent. Use fictional examples and omit identifying details; no client records or uploads. Your communication style, boundaries, and choice to pause matter.</p> |
| </footer> |
| </main> |
| </body> |
| </html> |
|
|
