Borealis_Localizer/index.html at main · Alliance-RDM-GDR/Borealis_Localizer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Borealis Localizer</title>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
  <header>
    <h1>Borealis Localizer</h1>
    <p>The Borealis Localizer is a client-side web tool that compares two .properties files in different languages, highlights missing or changed translations, and helps translators export updated bundles. This tool was originally designed to support the Source language to Canadian Target language localization of Dataverse.</p>
    <p style="margin-top: 1.5rem; margin-bottom: 1.5rem;">
      <a href="QuickStart.md" target="_blank" style="background-color: #facc15; color: #1e3a8a; padding: 0.6rem 1.2rem; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 1.1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">📖 Read the Quick Start Guide</a>
    </p>
    <p>
      To report an issue, or to provide feedback, please fill out the <a href="https://forms.gle/PEH3Az3bbEFRZStw9" target="_blank">Feedback Form</a>, or contact <a href="mailto:info@borealisdata.ca">info@borealisdata.ca</a>.
    </p>
  </header>

  <main>
    <section class="upload-section">
      <div>
        <label for="sourceFile">Upload new Source language .properties file</label>
        <input type="file" id="sourceFile" accept=".properties" />
      </div>
      <div>
        <label for="targetFile">Upload existing Target language .properties file</label>
        <input type="file" id="targetFile" accept=".properties" />
      </div>
      <button id="compareBtn">Compare Files</button>
    </section>
    <section class="github-section">
      <h2>Or Load Directly from GitHub</h2>
      <div class="github-grid">
        <div class="field">
          <label for="githubSource languagePath">Source language file URL</label>
          <input type="url" id="githubSource languagePath" placeholder="https://raw.githubusercontent.com/.../Bundle.properties" />
        </div>
        <div class="field">
          <label for="githubTarget languagePath">Target language file URL</label>
          <input type="url" id="githubTarget languagePath" placeholder="https://raw.githubusercontent.com/.../Bundle_fr.properties" />
        </div>
      </div>
      <div class="github-actions">
        <button id="loadGithubBtn" class="secondary-button">Load from GitHub</button>
        <small class="hint">
          Paste raw file URLs or GitHub blob URLs (we’ll convert them automatically).
        </small>
      </div>
    </section>

    <section id="table-section" class="hidden">
      <h2>Translation Table</h2>
      <div class="filters-row">
        <input type="text" id="searchInput" placeholder="Search keys or text..." />
        <div class="select-wrapper">
          <label for="keyCategory">Key group</label>
          <select id="keyCategory">
            <option value="">All keys</option>
          </select>
        </div>
      </div>
      <div class="toggle-wrapper">
        <label>
          <input type="checkbox" id="toggleMissing" />
          Show only missing or changed translations
        </label>
      </div>

      <div id="alignmentSummary" class="info-panel hidden"></div>

      <div class="table-wrapper">
        <table id="translationTable">
          <thead>
            <tr>
              <th><div class="resizable"><span>Key</span><div class="resizer"></div></div></th>
              <th><div class="resizable"><span>Source language</span><div class="resizer"></div></div></th>
              <th><div class="resizable"><span>Target language (editable)</span><div class="resizer"></div></div></th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>

      <div class="button-row">
        <button id="exportBtn">Export Updated Target language File</button>
        <button id="exportMissingBtn">Export Only Missing Translations</button>
        <button id="previewBtn" class="button secondary-button">Show Preview</button>
      </div>

      <div id="previewContainer" class="preview-box hidden">
        <h3>Export Preview</h3>
        <pre id="previewContent" class="code-preview"></pre>
      </div>
    </section>
  </main>

  <script src="js/app.js"></script>
</body>
</html>