Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>coachproai — Chat Interface</title> | |
| <link rel="stylesheet" href="style.css"/> | |
| </head> | |
| <body> | |
| <div class="chat-container" role="region" aria-label="coachproai Chat"> | |
| <header class="chat-header"> | |
| <img src="https://via.placeholder.com/150x50.png?text=coachproai" alt="coachproai Logo" id="logo"/> | |
| </header> | |
| <!-- 1) User tab (short input) --> | |
| <div class="input-area" aria-label="User Prompt"> | |
| <input type="text" id="idea-input" placeholder="Write a short idea or topic…" aria-label="Short idea input"/> | |
| </div> | |
| <!-- 2) Options as buttons --> | |
| <section class="options-stack" aria-label="Options"> | |
| <!-- Tone --> | |
| <div class="option-group" role="group" aria-label="Tone"> | |
| <span class="group-label">Tone</span> | |
| <div class="btn-row" data-group="tone"> | |
| <button class="btn toggle selected" data-value="Friendly" aria-pressed="true">Friendly</button> | |
| <button class="btn toggle" data-value="Professional" aria-pressed="false">Professional</button> | |
| <button class="btn toggle" data-value="Humorous" aria-pressed="false">Humorous</button> | |
| </div> | |
| </div> | |
| <!-- Format --> | |
| <div class="option-group" role="group" aria-label="Format"> | |
| <span class="group-label">Format</span> | |
| <div class="btn-row" data-group="format"> | |
| <button class="btn toggle selected" data-value="Paragraph" aria-pressed="true">Paragraph</button> | |
| <button class="btn toggle" data-value="Bullet Points" aria-pressed="false">Bullet Points</button> | |
| <button class="btn toggle" data-value="Email" aria-pressed="false">Email</button> | |
| </div> | |
| </div> | |
| <!-- Length --> | |
| <div class="option-group" role="group" aria-label="Length"> | |
| <span class="group-label">Length</span> | |
| <div class="btn-row" data-group="length"> | |
| <button class="btn toggle selected" data-value="Short" aria-pressed="true">Short</button> | |
| <button class="btn toggle" data-value="Medium" aria-pressed="false">Medium</button> | |
| <button class="btn toggle" data-value="Detailed" aria-pressed="false">Detailed</button> | |
| </div> | |
| </div> | |
| <!-- Language --> | |
| <div class="option-group" role="group" aria-label="Language"> | |
| <span class="group-label">Language</span> | |
| <div class="btn-row" data-group="language"> | |
| <button class="btn toggle selected" data-value="English" aria-pressed="true">English</button> | |
| <button class="btn toggle" data-value="Urdu" aria-pressed="false">Urdu</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3) Long tab + Start Chat --> | |
| <section class="composer" aria-label="Composer"> | |
| <textarea id="long-input" rows="5" placeholder="Add details, context, or instructions (optional)…" aria-label="Detailed message"></textarea> | |
| <button id="start-chat-btn" class="btn primary" aria-label="Start Chat">Start Chat</button> | |
| </section> | |
| <!-- 4) Response --> | |
| <div id="chat-output" class="chat-output" role="status" aria-live="polite"> | |
| The response will appear here in a typewriter style... | |
| </div> | |
| <!-- 5) Copy & open GPT --> | |
| <div class="action-footer"> | |
| <button id="copy-and-open-btn" class="btn ghost hidden" aria-label="Copy and open GPT">📋 Copy & Paste Now</button> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |