Spidersouris-termic/templates/index.html

294 lines
17 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>termic</title>
<meta name="description" content="An alternative to Microsoft Terminology Search">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="notranslate">
<meta name="keywords" content="termic, microsoft, terminology, terminology base, translation, localization">
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon-32x32.png">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<link type="text/css" href="{{ url_for('static', filename='dropdown.css') }}" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://kit.fontawesome.com/c35e034406.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{url_for('static', filename='index.js')}}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="error-banner" class="banner">
<i id="close-error" class="fa fa-close"></i>
<p>An error occurred. Please try again.<br>If the issue persists, please <a href="https://github.com/Spidersouris/termic/issues" target="_blank">open an issue on GitHub</a> and include the error message below:<br>
<b id="error-msg"></b>
</p>
</div>
<div id="info-banner" class="banner">
<i id="close-info" class="fa fa-close"></i>
<p><b>termic <script>document.write(currentVersionHTML);</script></b> is now available! <a href="/changelog" id="changelog-link">Click here to read the changelog</a>.<br><br><i>(Click on the close button on the left to hide. This banner won't show up again on this device.)</i></p>
</div>
<div id="hamburger-container">
<div id="hamburger" class="inactive">
<a href="/changelog">Changelog</a>
<img id="vertical-line" src="{{url_for('static', filename='images/svgs/vertical-line.svg')}}" height="20" width="20" alt="Right Arrow">
<a href="/about">About</a>
</div>
<i id="hamburger-btn" class="fa fa-bars"></i>
</div>
<header>
<h1>
<a href="/" id="header-link">
<img src="static/images/logo.png" width="100px" height="100px" alt="Termic Logo">
<span id="logo-title">termic<br><p id="logo-subtitle">An alternative to<br>Microsoft Terminology Search</p></span>
</a>
</h1>
<div id="links">
<ul>
<li><a href="/changelog"><img class="clock" src="/static/images/svgs/clock.svg" alt="Changelog Icon" width="40" height="40"><br>Changelog</a></li>
<li><a href="/about"><i class="fa-solid fa-circle-info"></i><br>About</a></li>
</ul>
</div>
</header>
<div id="search-form-container">
<form id="search-form" method="post">
<div id="search-bar">
<label for="term">Search Term</label>
<input type="text" id="term" name="term" required>
</div>
<div id="search-langs-container">
<div id="source-lang-container">
<label for="source-lang">Source Language</label>
<select id="source-lang" name="source-lang">
<option selected disabled>Select…</option>
<option value="ar_sa">Arabic</option>
<option value="be_by">Belarusian</option>
<option value="bg_bg">Bulgarian</option>
<option value="ca_es">Catalan</option>
<option value="zh_cn" data-2017="true" vscode="true">Chinese (Simplified)</option>
<option value="zh_tw" data-2017="true" vscode="true">Chinese (Traditional)</option>
<option value="cs_cz" data-2017="true" vscode="true">Czech</option>
<option value="hr_hr">Croatian</option>
<option value="da_dk">Danish</option>
<option value="nl_nl">Dutch</option>
<option value="en_us" data-2017="true" vscode="true">English (United States)</option>
<option value="fi_fi" data-2017="true">Finnish</option>
<option value="fr_ca">French (Canada)</option>
<option value="fr_fr" data-2017="true" vscode="true">French (France)</option>
<option value="gl_es">Galician</option>
<option value="de_de" data-2017="true" vscode="true">German</option>
<option value="el_gr">Greek</option>
<option value="he_il">Hebrew</option>
<option value="hi_in">Hindi</option>
<option value="hu_hu">Hungarian</option>
<option value="is_is">Icelandic</option>
<option value="id_id">Indonesian</option>
<option value="it_it" data-2017="true" vscode="true">Italian</option>
<option value="ja_jp" data-2017="true" vscode="true">Japanese</option>
<option value="ko_kr" data-2017="true" vscode="true">Korean</option>
<option value="lv_lv">Latvian</option>
<option value="lt_lt">Lithuanian</option>
<option value="nb_no">Norwegian (Bokmål)</option>
<option value="nn_no">Norwegian (Nynorsk)</option>
<option value="pl_pl" data-2017="true" vscode="true">Polish</option>
<option value="pt_br" data-2017="true" vscode="true">Portuguese (Brazil)</option>
<option value="pt_pt" data-2017="true" vscode="true">Portuguese (Portugal)</option>
<option value="ro_ro">Romanian</option>
<option value="ru_ru" data-2017="true" vscode="true">Russian</option>
<option value="sk_sk">Slovak</option>
<option value="es_mx">Spanish (Mexico)</option>
<option value="es_es" data-2017="true" vscode="true">Spanish (Spain)</option>
<option value="sv_se">Swedish</option>
<option value="th_th">Thai</option>
<option value="tr_tr" vscode="true">Turkish</option>
<option value="uk_ua">Ukrainian</option>
<option value="ca_es_valencia">Valencian</option>
<option value="vi_vn">Vietnamese</option>
</select>
</div>
<button id="swap-btn" type="button"><i class="fa-solid fa-right-left"></i></button>
<div id="target-lang-container">
<label for="target-lang">Target Language</label>
<select id="target-lang" name="target-lang">
<option selected disabled>Select…</option>
<option value="ar_sa">Arabic</option>
<option value="be_by">Belarusian</option>
<option value="bg_bg">Bulgarian</option>
<option value="ca_es">Catalan</option>
<option value="zh_cn" data-2017="true" vscode="true">Chinese (Simplified)</option>
<option value="zh_tw" data-2017="true" vscode="true">Chinese (Traditional)</option>
<option value="cs_cz" data-2017="true" vscode="true">Czech</option>
<option value="hr_hr">Croatian</option>
<option value="da_dk">Danish</option>
<option value="nl_nl">Dutch</option>
<option value="en_us" data-2017="true" vscode="true">English (United States)</option>
<option value="fi_fi">Finnish</option>
<option value="fr_ca">French (Canada)</option>
<option value="fr_fr" data-2017="true" vscode="true">French (France)</option>
<option value="gl_es">Galician</option>
<option value="de_de" data-2017="true" vscode="true">German</option>
<option value="el_gr">Greek</option>
<option value="he_il">Hebrew</option>
<option value="hi_in">Hindi</option>
<option value="hu_hu">Hungarian</option>
<option value="is_is">Icelandic</option>
<option value="id_id">Indonesian</option>
<option value="it_it" data-2017="true" vscode="true">Italian</option>
<option value="ja_jp" data-2017="true" vscode="true">Japanese</option>
<option value="ko_kr" data-2017="true" vscode="true">Korean</option>
<option value="lv_lv">Latvian</option>
<option value="lt_lt">Lithuanian</option>
<option value="nb_no">Norwegian (Bokmål)</option>
<option value="nn_no">Norwegian (Nynorsk)</option>
<option value="pl_pl" data-2017="true" vscode="true">Polish</option>
<option value="pt_br" data-2017="true" vscode="true">Portuguese (Brazil)</option>
<option value="pt_pt" data-2017="true" vscode="true">Portuguese (Portugal)</option>
<option value="ro_ro">Romanian</option>
<option value="ru_ru" data-2017="true" vscode="true">Russian</option>
<option value="sk_sk">Slovak</option>
<option value="es_mx">Spanish (Mexico)</option>
<option value="es_es" data-2017="true" vscode="true">Spanish (Spain)</option>
<option value="sv_se">Swedish</option>
<option value="th_th">Thai</option>
<option value="tr_tr" vscode="true">Turkish</option>
<option value="uk_ua">Ukrainian</option>
<option value="ca_es_valencia">Valencian</option>
<option value="vi_vn">Vietnamese</option>
</select>
</div>
</div>
<div id="result-filter">
<div id="result-filter-glossary">
<input type="checkbox" id="toggle-glossary" class="toggle" data-target="#result-filter-glossary" checked/>
<label for="toggle-glossary">Toggle</label>
<h3 class="full-text">Glossary</h3>
<h3 class="short-text">Gloss.</h3>
<h3 class="very-short-text">G</h3>
<select id="result-count-glossary">
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div id="result-filter-tm">
<input type="checkbox" id="toggle-tm" class="toggle" data-target="#result-filter-tm" checked/>
<label for="toggle-tm">Toggle</label>
<h3 class="full-text">Translation Memory</h3>
<h3 class="short-text very-short-text">TM</h3>
<select id="result-count-tm">
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<div id="period-container">
<button type="button" class="period-2017" name="period-button" value="2017"><img src="static/images/svgs/polygon.svg" height="15" width="15" class="polygon">2017</button>
<button type="button" class="period-2020" name="period-button" value="2020+" data-active="active">2020+</button>
</div>
<p class="period-description" desc-2017="Search strings from 2017 (including Windows and Visual Studio strings). Data is much more consequent but search may take longer." desc-2020="Search strings from 2020. This dataset is restricted to a few products but includes exclusive strings from VSCode for the compatible languages.">Search strings from 2020. This dataset is restricted to a few products but includes exclusive strings from VSCode for the compatible languages.</p>
</div>
<div id="search-options-container">
<div id="search-buttons-container">
<div class="search-buttons">
<p class="search-options-subtitle">Match Type</p>
<button type="button" class="search-option" name="search-option" value="exact_match" title="Exact Match">
<img src="{{url_for('static', filename='images/svgs/exact-match.svg')}}" height="45" width="45" alt="Exact Match Search Button">
</button>
<button type="button" class="search-option" name="search-option" value="unexact_match" title="Broad Match" data-active="active">
<img src="{{url_for('static', filename='images/svgs/unexact-match.svg')}}" height="45" width="45" alt="Broad Match Search Button">
</button>
<button type="button" class="search-option" name="search-option" value="regex" title="RegExp">
<img src="{{url_for('static', filename='images/svgs/regex.svg')}}" height="45" width="45" alt="RegExp Search Button">
</button>
</div>
<div class="search-buttons">
<p class="search-options-subtitle">Additional Match Options</p>
<button type="button" class="additional-match-option" value="case_sensitivity" title="Case Sensitivity" data-active="inactive">
<img src="{{url_for('static', filename='images/svgs/case-sensitivity-bold.svg')}}" height="45" width="45" alt="RegExp Search Button">
</button>
</div>
<div class="search-buttons">
<p class="search-options-subtitle">Results Display</p>
<button type="button" id="two-col-btn" class="search-filter" value="two-col" title="Display Results Side by Side" data-active="inactive" disabled>
<img src="{{url_for('static', filename='images/svgs/two-col.svg')}}" height="45" width="45" alt="Display Results Side by Side Button">
</button>
<button type="button" id="highlight-btn" class="search-filter" value="highlight" title="Highlight Results" data-active="inactive" disabled>
<img src="{{url_for('static', filename='images/svgs/highlight.svg')}}" height="45" width="45" alt="Highlight Results Button">
</button>
</div>
</div>
</div>
<button id="search-btn" type="submit"><i class="fa-solid fa-fire-flame-curved fa-xl" style="margin-right: 5px;"></i> Search</button>
</div>
</div>
</form>
</div>
<div id="loader"></div>
<span id="tip-tap"><b>Tip</b>: tap with 2 fingers on a row to copy</span>
<div id="results" class="hidden">
<div id="glossary-results">
<h2 id="glossary-title">Glossary <span id="glossary-nb"></span></h2>
<div id="glossary">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Source <i class="fa-solid fa-caret-down caret-force-visible"></i><i class="fa-solid fa-caret-up"></i><br><span class="source-lang-label"></span></th>
<th>Translation <i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up"></i><br><span class="target-lang-label"></span></th>
<th>English Definition <i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up"></i></th>
<th></th> <!-- Empty row for copy button -->
</tr>
</thead>
<tbody id="glossary-results-table"></tbody>
</table>
</div>
</div>
<div id="tm-results">
<h2 id="tm-title">Translation Memory <span id="tm-nb"></span></h2>
<div id="tm">
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Source <i class="fa-solid fa-caret-down caret-force-visible"></i><i class="fa-solid fa-caret-up"></i><br><span class="source-lang-label"></span></th>
<th>Translation <i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up"></i><br><span class="target-lang-label"></span></th>
<th>String Category <i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up"></i></th>
<th>Platform <i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up"></i></th>
<th>Product <i class="fa-solid fa-caret-down"></i><i class="fa-solid fa-caret-up"></i></th>
<th></th> <!-- Empty row for copy button -->
</tr>
</thead>
<tbody id="tm-results-table"></tbody>
</table>
</div>
</div>
<p id="no-results">No results found in the TM nor the glossary. Check your search options and try querying again.</p>
</div>
<div id="toast-container">
<div id="toast"></div>
</div>
<footer><p><a href="https://edoyen.com/" target="_blank" class="edoyen-link">Enzo Doyen</a> © <script>document.write(currentYearFooter);</script>.&nbsp;&nbsp;<a href="https://github.com/Spidersouris/termic" target="_blank"><i class="fa fa-github fa-xl"></i></a>&nbsp;&nbsp;<a href="/changelog">v<script>document.write(currentVersionHTML);</script></a></p></footer>
</body>
</html>