1 files changed, 70 insertions, 0 deletions
diff --git a/toolkit/components/translations/content/translations.html b/toolkit/components/translations/content/translations.html
new file mode 100644
index 0000000000..bd2c114a0a
--- /dev/null
+++ b/toolkit/components/translations/content/translations.html
@@ -0,0 +1,70 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Security-Policy" content="default-src chrome:; object-src 'none'">
+    <meta name="color-scheme" content="light dark">
+    <meta name="viewport" content="width=device-width" />
+    <title data-l10n-id="about-translations-title"></title>
+    <link rel="stylesheet" href="chrome://global/skin/global.css">
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+    <link rel="stylesheet" href="chrome://global/content/translations/translations.css">
+    <link rel="localization" href="toolkit/branding/brandings.ftl"/>
+    <link rel="localization" href="locales-preview/aboutTranslations.ftl"/>
+    <script type="module" src="chrome://global/content/translations/translations.mjs"></script>
+  </head>
+  <body>
+    <h1 data-l10n-id="about-translations-header"></h1>
+    <main class="about-translations-contents">
+
+      <header class="about-translations-header">
+        <div class="about-translations-header-start">
+          <select
+            class="about-translations-select"
+            id="language-from"
+            disabled>
+            <option data-l10n-id="about-translations-detect" value="detect"></option>
+          </select>
+        </div>
+        <div class="about-translations-header-end">
+          <select
+            class="about-translations-select"
+            id="language-to"
+            disabled>
+            <option data-l10n-id="about-translations-select" value=""></option>
+          </select>
+        </div>
+      </header>
+
+      <main class="about-translations-input">
+        <div class="about-translations-input-start">
+          <textarea
+            class="about-translations-input-textarea"
+            data-l10n-id="about-translations-textarea"
+            id="translation-from"
+            ></textarea>
+        </div>
+        <div class="about-translations-input-end">
+          <div
+            class="about-translations-input-results about-translations-input-results-blank"
+            id="translation-to-blank">
+            <div class="about-translations-info" id="translation-info">
+              <div class="about-translations-info-icon"></div>
+              <div class="about-translations-info-message" id="translation-info-message"></div>
+            </div>
+            <div data-l10n-id="about-translations-results-placeholder"></div>
+          </div>
+          <div
+            class="about-translations-input-results"
+            id="translation-to">
+          </div>
+        </div>
+      </main>
+
+    </div>
+  </body>
+</html>