| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Agentic PRD Generator - AI Document Review Workflow</title>
|
| <meta name="description" content="AI-powered Product Requirement Document generator with human-in-the-loop review. Automate PRD creation and QA.">
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| <link rel="stylesheet" href="/static/styles.css">
|
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
|
| <script src="/static/app.js" defer></script>
|
| </head>
|
| <body>
|
| <div class="background-elements" aria-hidden="true">
|
| <div class="blob blob-1"></div>
|
| <div class="blob blob-2"></div>
|
| </div>
|
|
|
| <div class="container">
|
| <header>
|
| <div class="logo">
|
| <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
| <h1>PRD Agent Workflow</h1>
|
| </div>
|
| <div class="status-badge" id="workflowStatus" role="status" aria-live="polite">Idle</div>
|
| </header>
|
|
|
| <main>
|
| <section class="input-section glass-panel">
|
| <h2>Raw Meeting Notes Input</h2>
|
| <p>Enter raw bullet points or meeting notes, and the AI agents will draft a professional PRD.</p>
|
| <label for="rawNotes" class="sr-only">Raw Notes</label>
|
| <textarea id="rawNotes" placeholder="E.g., We need a new login page. Users should login with email and password. Also support Google OAuth..." aria-label="Raw Meeting Notes Input"></textarea>
|
| <button id="startBtn" class="btn primary-btn" aria-label="Start Workflow to Generate PRD">
|
| <span>Generate Document</span>
|
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
| </button>
|
| </section>
|
|
|
| <section class="output-section glass-panel hidden" id="outputSection" aria-live="polite">
|
| <div class="output-header">
|
| <h2>Generated PRD <span class="revision-badge" id="revisionCount" aria-label="Revision Count">Rev: 0</span></h2>
|
| <div class="actions">
|
| <button id="approveBtn" class="btn success-btn hidden" aria-label="Approve Current Document Draft">Approve Document</button>
|
| </div>
|
| </div>
|
|
|
| <div id="feedbackContainer" class="feedback-alert hidden" role="alert">
|
| <strong>Critic Feedback:</strong> <span id="criticFeedback"></span>
|
| </div>
|
|
|
| <div class="document-content" id="documentContent">
|
| <div class="loader" role="status" aria-label="Processing">
|
| <div class="spinner"></div>
|
| <p>Agents are drafting and reviewing...</p>
|
| </div>
|
| </div>
|
| </section>
|
| </main>
|
| </div>
|
| </body>
|
| </html>
|
|
|
