| <!DOCTYPE html> |
| <html lang="ko"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>μμ± μμ½ λ
ΈνΈ</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <main class="app"> |
| <header class="header"> |
| <h1>ποΈ μμ± μμ½ λ
ΈνΈ</h1> |
| <p>λ§νλ©΄ λ°μμ κ³ , ν΅μ¬λ§ μμ½ν΄ λλ €μ.</p> |
| </header> |
|
|
| <section class="card token-box"> |
| <label for="token">Hugging Face ν ν°</label> |
| <input type="password" id="token" placeholder="hf_xxxxxxxxxxxxxxxx" autocomplete="off"> |
| </section> |
|
|
| <section class="card recorder"> |
| <button id="recordBtn" class="record-btn" type="button" aria-label="λ
Ήμ μμ"> |
| <span class="dot"></span> |
| </button> |
| <p id="status" class="status">λ²νΌμ λλ¬ λ
Ήμμ μμνμΈμ</p> |
| <p id="timer" class="timer">00:00</p> |
| </section> |
|
|
| <section class="card"> |
| <h2>π λ°μμ°κΈ°</h2> |
| <textarea id="transcript" placeholder="λ
Ήμ ν μ¬κΈ°μ ν
μ€νΈκ° νμλ©λλ€. μ§μ μμ ν μλ μμ΄μ."></textarea> |
| <button id="summarizeBtn" class="btn" type="button" disabled>μμ½νκΈ°</button> |
| </section> |
|
|
| <section class="card summary-card"> |
| <h2>β¨ μμ½</h2> |
| <div id="summary" class="summary empty">μμ½ κ²°κ³Όκ° μ¬κΈ°μ νμλ©λλ€.</div> |
| <button id="saveBtn" class="btn secondary" type="button" disabled>λ
ΈνΈμ μ μ₯</button> |
| </section> |
|
|
| <section class="card"> |
| <h2>π μ μ₯λ λ
ΈνΈ</h2> |
| <ul id="noteList" class="note-list"></ul> |
| </section> |
| </main> |
|
|
| <script src="script.js"></script> |
| </body> |
| </html> |
|
|
