Spaces:
Sleeping
Sleeping
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OMR Corrector</title> | |
| <link rel="stylesheet" href="corrector.css"> | |
| </head> | |
| <body> | |
| <!-- Feedback Banner --> | |
| <div id="feedback-bar"> | |
| <a id="feedback-btn" href="https://docs.google.com/forms/d/e/1FAIpQLScDoM53RMjDLlftORYHXmZ5kmkN4TTZOIyFIRuVsZhp4RGjEA/viewform" target="_blank" rel="noopener">Feedback</a> | |
| </div> | |
| <!-- Upload Bar --> | |
| <div id="upload-bar"> | |
| <label><span data-i18n="images">μ΄λ―Έμ§</span>: <input type="file" id="image-input" accept=".png,.jpg,.jpeg" multiple></label> | |
| <label>MusicXML: <input type="file" id="xml-input" accept=".xml,.musicxml,.mxl" multiple></label> | |
| <label>DPI: <input type="number" id="dpi-input" value="300" min="72" max="1200" step="1"></label> | |
| <button id="load-btn" data-i18n="load">λΆλ¬μ€κΈ°</button> | |
| <span id="page-nav"> | |
| <button id="btn-prev-page" data-i18n-title="prev_page" title="μ΄μ νμ΄μ§">«</button> | |
| <span id="page-indicator">-</span> | |
| <button id="btn-next-page" data-i18n-title="next_page" title="λ€μ νμ΄μ§">»</button> | |
| </span> | |
| <span id="load-status"></span> | |
| </div> | |
| <!-- Toolbar --> | |
| <div id="toolbar"> | |
| <div class="tool-group"> | |
| <button id="btn-undo" data-i18n-title="undo_title" title="μ€νμ·¨μ (Ctrl+Z)">↩</button> | |
| <button id="btn-redo" data-i18n-title="redo_title" title="λ€μμ€ν (Ctrl+Y)">↪</button> | |
| </div> | |
| <div class="tool-group"> | |
| <button id="btn-up" data-i18n-title="pitch_up" title="μλμ΄ μ¬λ¦Ό (β)">▲</button> | |
| <button id="btn-down" data-i18n-title="pitch_down" title="μλμ΄ λ΄λ¦Ό (β)">▼</button> | |
| </div> | |
| <div class="tool-group"> | |
| <button id="btn-dblsharp" data-i18n-title="dblsharp" title="κ²Ήμ¬λ¦Όν (πͺ)">πͺ</button> | |
| <button id="btn-sharp" data-i18n-title="sharp" title="μ¬λ¦Όν (#)">#</button> | |
| <button id="btn-flat" data-i18n-title="flat" title="λ΄λ¦Όν (b)">b</button> | |
| <button id="btn-dblflat" data-i18n-title="dblflat" title="κ²Ήλ΄λ¦Όν (π«)">π«</button> | |
| <button id="btn-natural" data-i18n-title="natural" title="μ μ리ν (n)">♮</button> | |
| <button id="btn-delete" data-i18n-title="delete_note" title="μν μμ (Del)">🗑</button> | |
| </div> | |
| <div class="tool-group"> | |
| <button id="btn-dur-whole" data-i18n-title="whole" title="μ¨μν (1)">𝅝</button> | |
| <button id="btn-dur-half" data-i18n-title="half" title="2λΆμν (2)">𝅗𝅥</button> | |
| <button id="btn-dur-quarter" data-i18n-title="quarter" title="4λΆμν (4)">𝅘𝅥</button> | |
| <button id="btn-dur-eighth" data-i18n-title="eighth" title="8λΆμν (5)">𝅘𝅥𝅮</button> | |
| <button id="btn-dur-16th" data-i18n-title="sixteenth" title="16λΆμν (6)">𝅘𝅥𝅯</button> | |
| <button id="btn-dur-dot" data-i18n-title="dot" title="μ ν κΈ (.)">•</button> | |
| </div> | |
| <div class="tool-group"> | |
| <button id="btn-prev" data-i18n-title="prev_note" title="μ΄μ μν (Shift+Tab)"><</button> | |
| <button id="btn-next" data-i18n-title="next_note" title="λ€μ μν (Tab)">></button> | |
| </div> | |
| <div class="tool-group"> | |
| <button id="btn-play" data-i18n-title="play_note" title="μν μ¬μ">♫</button> | |
| <button id="btn-playall" data-i18n-title="play_all" title="μ 체 μ¬μ (Space)">▶</button> | |
| <button id="btn-stop" data-i18n-title="stop" title="μ μ§">■</button> | |
| <label><span data-i18n="bpm">BPM</span>: <input type="number" id="bpm-input" value="120" min="20" max="300" step="5" style="width:94px"></label> | |
| <label><span data-i18n="vol">μλ</span>: <input type="range" id="vol-slider" min="0" max="100" value="50" step="5" style="width:80px"><span id="vol-label">50%</span></label> | |
| </div> | |
| <div class="tool-group"> | |
| <label><span data-i18n="zoom">νλ</span>: <input type="range" id="zoom-slider" min="25" max="200" value="100" step="5"><span id="zoom-label">100%</span></label> | |
| </div> | |
| <div class="tool-group"> | |
| <label><span data-i18n="x_off">X μ€νμ </span>: <input type="number" id="offset-x" value="0" step="1" style="width:84px"></label> | |
| <label><span data-i18n="y_off">Y μ€νμ </span>: <input type="number" id="offset-y" value="0" step="1" style="width:84px"></label> | |
| </div> | |
| <div class="tool-group"> | |
| <label><span data-i18n="staff_dist">보ν κ°κ²©</span>: <input type="number" id="staff-dist-input" value="65" step="1" style="width:84px"></label> | |
| <label><span data-i18n="sys_dist">λ¨ κ°κ²© 보μ </span>: <input type="number" id="sys-dist-adj" value="0" step="1" style="width:84px"></label> | |
| </div> | |
| <div class="tool-group"> | |
| <button id="btn-debug-lines" data-i18n="staff_lines" title="μ€μ νμ/μ¨κΉ">μ€μ νμ</button> | |
| <button id="btn-adjust-staves" data-i18n="adjust_staves" title="μ€μ μμΉ μλ μ‘°μ ">μ€μ μ‘°μ </button> | |
| </div> | |
| <div class="tool-group"> | |
| <button id="btn-lang" title="νκ΅μ΄/English">EN</button> | |
| </div> | |
| <div class="tool-group right"> | |
| <button id="btn-download" data-i18n="download">XML λ€μ΄λ‘λ</button> | |
| </div> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div id="progress-bar-container"> | |
| <div id="progress-bar-fill"></div> | |
| <span id="progress-time">0:00 / 0:00</span> | |
| </div> | |
| <!-- Shortcut Reference --> | |
| <div id="shortcut-bar"> | |
| <span><b data-i18n="sc_select">μ ν</b>: Click / Tab</span> | |
| <span><b data-i18n="sc_pitch">μλμ΄</b>: ββ / Drag</span> | |
| <span><b>#/b/n:</b> <span data-i18n="sc_acc">μμν</span></span> | |
| <span><b>1/2/4/5/6:</b> <span data-i18n="sc_dur">λ°μ</span></span> | |
| <span><b>.</b> <span data-i18n="sc_dot">μ </span></span> | |
| <span><b>Del:</b> <span data-i18n="sc_del">μμ </span></span> | |
| <span><b>r:</b> <span data-i18n="sc_rest">μνβμΌν</span></span> | |
| <span><b>Shift+N:</b> <span data-i18n="sc_add">μΆκ° λͺ¨λ</span></span> | |
| <span><b>Shift+A:</b> <span data-i18n="sc_chord">νμ μΆκ°</span></span> | |
| <span><b>Space:</b> <span data-i18n="sc_play">μ¬μ</span></span> | |
| <span><b>Shift+Click:</b> <span data-i18n="sc_seek">νμ</span></span> | |
| <span><b>DblClick:</b> <span data-i18n="sc_dblclick">νμ+μ¬μ</span></span> | |
| <span><b>PgUp/Dn:</b> <span data-i18n="sc_page">νμ΄μ§</span></span> | |
| <span><b>Ctrl+Z/Y:</b> <span data-i18n="sc_undo">μ€νμ·¨μ/λ€μμ€ν</span></span> | |
| </div> | |
| <!-- Main Canvas Area --> | |
| <div id="canvas-wrapper"> | |
| <div id="canvas-container"> | |
| <img id="score-image" alt="Score image"> | |
| <svg id="marker-svg" xmlns="http://www.w3.org/2000/svg"></svg> | |
| </div> | |
| </div> | |
| <!-- Chord Popup --> | |
| <div id="chord-popup" class="hidden"> | |
| <div id="chord-popup-title" data-i18n="chord_select">μν μ ν:</div> | |
| <ul id="chord-popup-list"></ul> | |
| </div> | |
| <!-- Status Bar --> | |
| <div id="status-bar"> | |
| <span id="status-mode" style="color:#ffff66;font-weight:bold;"></span> | |
| <span id="status-selection" data-i18n="no_sel">μ ν μμ</span> | |
| <span id="status-total"></span> | |
| </div> | |
| <script src="corrector.js"></script> | |
| </body> | |
| </html> | |