CINXE.COM
inchword : translation tools to help people translate books
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>inchword : translation tools to help people translate books</title> <meta name="author" content="Derek Sivers"> <link rel="icon" href="favicon.svg"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <a href="/"><img src="inchword-350.png" alt="Inchword translation logo"></a> </header> <main> <h1> Translator translates one sentence at a time. </h1> <p> <strong>After reading the chapter in context</strong>, with the final formatting, the Translator uses this page to translate each sentence. </p><p> Notice the <strong>Author clarifications</strong> that can appear below a highlighted sentence. </p> </main> <style> body { margin: 0; padding: 0 } body, input, textarea { font-family: Georgia, serif } h1, h2, h3, h4, nav, label, aside { font-family: sans-serif } label, select, textarea, button { display: block } input, textarea { font-size: 1.1em; } .small, aside { font-size: 0.8em; color: #666 } aside { margin-top: 1em } #navigation, #navigation a { background-color: #000; color: #fff } #navigation ul { margin: 0; padding: 0 } #navigation li { display: inline; list-style-type: none; margin: 0 2em } #content { margin: 1em } table { width: 100% } td { width: 50%; vertical-align: top; padding-bottom: 2em } input, textarea { width: 100% } .highlight { background-color: #ff9; cursor: pointer } .hide { display: none } /* TODO: change css names to status names */ textarea.err { border: 3px solid #c00 } textarea.do { border: 2px solid #090 } textarea, textarea.done { border: 1px solid #aaa } dl#qa dt { background-color: #f9f9f9 } dl#qa dd { margin-bottom: 2em; } button.go { background-color: #060; color: #fff; font-weight: bold; padding: 10px; margin: 0 auto } #help { margin: 0 auto; max-width: 40em } #help h2, #help h3, #help h4 { margin-top: 4em } #help li { margin-bottom: 1em } /* The Modal (background) */ #popup { display: block; position: fixed; z-index: 1; /* sit on top */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* enable scroll if needed */ background-color: rgb(0,0,0); /* fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ #qcontents { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 50% } /* Modal Close Button */ .close { color: #900; float: right; font-size: 24px; font-weight: bold } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer } </style> <section id="app"> <table id="sentences"> <tr> <td>Commit. <aside class="hide">usually has a target: commit to something. Read definitions inside the article. Try to find the common meaning.</aside> <button class="qbutt hide" data-id="121464" data-sentence="Commit.">ask question</button> </td> <td> <textarea id="121464" name="translation" tabindex="1" class="done">Будьте верны своему выбору</textarea> </td> </tr> <tr> <td>If you’ve ever been confused or distracted, with too many options… <aside class="hide">ends 3 sentences below</aside> <button class="qbutt hide" data-id="121466" data-sentence="If you’ve ever been confused or distracted, with too many options…">ask question</button> </td> <td> <textarea id="121466" name="translation" tabindex="3" class="done">Теряетесь перед выбором из множества вариантов?</textarea> </td> </tr> <tr> <td>If you don’t finish what you start… <aside class="hide">ends 2 sentences below</aside> <button class="qbutt hide" data-id="121467" data-sentence="If you don’t finish what you start…">ask question</button> </td> <td> <textarea id="121467" name="translation" tabindex="4" class="done">Не доводите начатое до конца?</textarea> </td> </tr> <tr> <td>If you’re not with a person you love… <aside class="hide">ends 1 sentence below</aside> <button class="qbutt hide" data-id="121468" data-sentence="If you’re not with a person you love…">ask question</button> </td> <td> <textarea id="121468" name="translation" tabindex="5" class="done">Чувствуете, что рядом с вами нелюбимый человек?</textarea> </td> </tr> <tr> <td>… then you’ve felt the problem. <button class="qbutt hide" data-id="121469" data-sentence="… then you’ve felt the problem.">ask question</button> </td> <td> <textarea id="121469" name="translation" tabindex="6" class="done">Значит вам знакома эта проблема.</textarea> </td> </tr> <tr> <td>The problem is a lack of commitment. <button class="qbutt hide" data-id="121470" data-sentence="The problem is a lack of commitment.">ask question</button> </td> <td> <textarea id="121470" name="translation" tabindex="7" class="done">Вы не готовы принять последствия своего решения.</textarea> </td> </tr> <tr> <td>You’ve been looking for the best person, place, or career. <button class="qbutt hide" data-id="121471" data-sentence="You’ve been looking for the best person, place, or career.">ask question</button> </td> <td> <textarea id="121471" name="translation" tabindex="8" class="done">Вы ищете идеального человека, место или карьеру.</textarea> </td> </tr> <tr> <td>But seeking the best is the problem. <button class="qbutt hide" data-id="121472" data-sentence="But seeking the best is the problem.">ask question</button> </td> <td> <textarea id="121472" name="translation" tabindex="9" class="done">Вы согласны только на лучшее, и в этом вся беда.</textarea> </td> </tr> <tr> <td>No choice is inherently the best. <button class="qbutt hide" data-id="121473" data-sentence="No choice is inherently the best.">ask question</button> </td> <td> <textarea id="121473" name="translation" tabindex="10" class="done">Готового идеального варианта не существует.</textarea> </td> </tr> </table> <template id="qtemplate"> <div id="popup"> <div id="qcontents"> <span class="close" id="qclose">X</span> <p id="qsentence"></p> <p id="qtranslation"></p> <label for="question">Question about this?</label> <form id="askquestion"> <textarea id="question" name="question"></textarea> <input type="submit" value="submit"> </form> </div> </div> </template> <script> function showTStatus (translation_id, stat) { if (stat === 'do' || stat === 'done' || stat === 'err') { const textarea = document.getElementById(translation_id); textarea.classList.remove('do'); textarea.classList.remove('done'); textarea.classList.remove('err'); textarea.classList.add(stat); } } function closePopup () { const qt2 = document.getElementById('popup'); document.querySelector('body').removeChild(qt2); } function thanksPopup () { const qc = document.getElementById('qcontents'); qc.innerHTML = `<p>Thanks. I will email you an answer.</p> <span class="close" id="qclose">OK</span> <p> — Derek</p>`; document.getElementById('qclose').addEventListener('click', closePopup); } function showQuestionForm (e) { e.preventDefault(); const id = e.target.getAttribute('data-id'); const sentence = e.target.getAttribute('data-sentence'); const translation = document.getElementById(id).value; const qt = document.getElementById('qtemplate').content.cloneNode(true); qt.getElementById('qsentence').textContent = sentence; qt.getElementById('qtranslation').textContent = translation; qt.getElementById('qclose').addEventListener('click', closePopup); qt.getElementById('askquestion').addEventListener('submit', e => { e.preventDefault(); thanksPopup(); }); document.querySelector('body').appendChild(qt); } function focusit (tr, id) { return function (e) { tr.classList.add('highlight'); const comment = tr.querySelector('aside'); if (comment) { comment.classList.remove('hide'); } tr.querySelector('button.qbutt').classList.remove('hide'); }; } function blurit (tr, id) { return function (e) { tr.classList.remove('highlight'); const comment = tr.querySelector('aside'); if (comment) { comment.classList.add('hide'); } tr.querySelector('button.qbutt').classList.add('hide'); }; } let tr; document.querySelectorAll('textarea').forEach(e => { tr = e.parentNode.parentNode; tr.addEventListener('mouseenter', focusit(tr, e.id)); tr.addEventListener('mouseleave', blurit(tr, e.id)); e.addEventListener('focus', focusit(tr, e.id)); e.addEventListener('blur', blurit(tr, e.id)); }); document.querySelectorAll('button.qbutt').forEach(e => { e.addEventListener('click', showQuestionForm); }); </script> </section> <footer>Inchword is made by <a href="https://sive.rs/">Derek Sivers</a>. © 2024 Sivers Inc</footer> </body> </html>