| <!doctype html> |
| <html lang="vi"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="theme-color" content="#141310"> |
| <title>vp2vi — VietPhrase/Convert to Natural Vietnamese</title> |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%23e36f45'/%3E%3Cpath d='M15 21h9l8 24 8-24h9L37 53H27z' fill='%23fff8ef'/%3E%3C/svg%3E"> |
| <link rel="stylesheet" href="./styles.css"> |
| </head> |
| <body> |
| <div class="shell"> |
| <header class="masthead"> |
| <a class="brand" href="./" aria-label="vp2vi — trang chính"> |
| <span class="brand-mark">v</span> |
| <span>vp2vi</span> |
| </a> |
| <div class="runtime" role="status" aria-live="polite"> |
| <span class="runtime-dot" aria-hidden="true"></span> |
| <span id="status">Đang khởi động…</span> |
| </div> |
| </header> |
|
|
| <main> |
| <section class="heading"> |
| <p class="eyebrow">Công cụ biên tập</p> |
| <h1>Polish bản convert</h1> |
| <p>Dán nội dung, mỗi câu một dòng. Kết quả giữ nguyên thứ tự để bạn sao chép lại ngay.</p> |
| </section> |
|
|
| <div class="workspace"> |
| <section class="panel input-panel" aria-labelledby="input-title"> |
| <div class="panel-head"> |
| <div> |
| <span class="panel-index">01</span> |
| <h2 id="input-title">Bản convert</h2> |
| </div> |
| <span id="input-count" class="counter">0 dòng</span> |
| </div> |
|
|
| <textarea id="input" spellcheck="false" placeholder="Dán nội dung vào đây…" aria-describedby="input-note"></textarea> |
|
|
| <div class="samples" aria-label="Văn bản mẫu"> |
| <span class="samples-label">Thử nhanh</span> |
| <div class="sample-options"> |
| <button class="sample-button" type="button" data-sample="story">Kể chuyện</button> |
| <button class="sample-button" type="button" data-sample="dialogue">Đối thoại</button> |
| <button class="sample-button" type="button" data-sample="action">Giao chiến</button> |
| </div> |
| </div> |
|
|
| <div class="panel-actions"> |
| <button id="clear" class="button button-quiet" type="button" disabled>Xóa</button> |
| <div class="run-group"> |
| <span id="input-note" class="shortcut"><kbd>Ctrl</kbd><span>+</span><kbd>Enter</kbd></span> |
| <button id="run" class="button button-primary" type="button" disabled> |
| <span>Polish</span> |
| <svg aria-hidden="true" viewBox="0 0 20 20"><path d="M4 10h11m-4-4 4 4-4 4"/></svg> |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="panel output-panel" aria-labelledby="output-title"> |
| <div class="panel-head"> |
| <div> |
| <span class="panel-index">02</span> |
| <h2 id="output-title">Bản đã polish</h2> |
| </div> |
| <button id="copy" class="button button-quiet" type="button" disabled>Sao chép</button> |
| </div> |
|
|
| <div id="progress" class="progress" hidden aria-hidden="true"> |
| <span id="progress-bar"></span> |
| </div> |
|
|
| <div id="results" class="results" aria-live="polite"> |
| <div class="empty-state"> |
| <span class="empty-glyph" aria-hidden="true">↗</span> |
| <p>Kết quả sẽ xuất hiện ở đây.</p> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
| </div> |
|
|
| <script type="module" src="./app.js"></script> |
| </body> |
| </html> |
|
|
