diff options
Diffstat (limited to '')
| -rw-r--r-- | browser/components/protections/content/protections.html | 313 |
1 files changed, 313 insertions, 0 deletions
diff --git a/browser/components/protections/content/protections.html b/browser/components/protections/content/protections.html new file mode 100644 index 0000000000..fd6dfbade2 --- /dev/null +++ b/browser/components/protections/content/protections.html @@ -0,0 +1,313 @@ +<!-- 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: blob:; object-src 'none'"> + <meta name="color-scheme" content="light dark"> + <link rel="localization" href="browser/branding/brandings.ftl"/> + <link rel="localization" href="branding/brand.ftl"/> + <link rel="localization" href="browser/branding/sync-brand.ftl"> + <link rel="localization" href="browser/protections.ftl"> + <!-- Temporary "en-US"-only l10n strings --> + <link rel="localization" href="preview/protections.ftl"> + <link rel="stylesheet" href="chrome://global/skin/in-content/common.css"> + <link rel="stylesheet" href="chrome://browser/content/protections.css"> + <link rel="icon" href="chrome://browser/skin/controlcenter/dashboard.svg"> + <script type="module" src="chrome://browser/content/protections.mjs"></script> + <title data-l10n-id="protection-report-webpage-title"></title> + </head> + + <body> + <div class="new-banner vpn-banner hidden"> + <div class=banner-wrapper> + <img class="icon light" src="chrome://browser/content/logos/vpn-light.svg"/> + <img class="icon dark" src="chrome://browser/content/logos/vpn-dark.svg"/> + <div class="wrapper"> + <div> + <h3 class="banner-title" data-l10n-id="vpn-banner-header"></h3> + <span class="content" data-l10n-id="vpn-banner-content"></span> + </div> + <a target="_blank" id="vpn-banner-link" data-l10n-id="get-vpn-link"></a> + <button class="exit-icon" data-l10n-id="protections-close-button2"></button> + </div> + </div> + </div> + <div id="report-content"> + <h1 id="report-title" data-l10n-id="protection-report-page-content-title"></h1> + <p id="report-summary" data-l10n-id="protection-report-page-summary-default"></p> + <p id="protection-settings" data-l10n-id="protection-report-settings-link" role="link" tabindex="0"></p> + <div class="card card-no-hover etp-card"> + <div class="card-header"> + <img class="icon light" src="chrome://browser/content/logos/tracking-protection.svg"/> + <img class="icon dark" src="chrome://browser/content/logos/tracking-protection-dark-theme.svg"/> + <div class="wrapper"> + <div> + <h2 class="card-title" data-l10n-id="etp-card-title-always"></h2> + <p id="etp-card-content" class="content" data-l10n-id="etp-card-content-description"></p> + </div> + <a target="_blank" id="manage-protections" data-l10n-id="protection-report-manage-protections"></a> + </div> + </div> + <div class="card-body"> + <div class="body-wrapper"> + <p id="graph-week-summary"></p> + <div id="graph-wrapper"> + <div id="graph" role="table" aria-labelledby="graphLegendDescription"> + <div id="private-window-message" data-l10n-id="graph-private-window"></div> + </div> + <div id="legend"> + <label id="graphLegendDescription" data-l10n-id="graph-legend-description"></label> + <input id="tab-social" data-type="social" type="radio" name="tabs" aria-labelledby="socialLabel socialTitle" aria-describedby="socialContent" checked> + <label id="socialLabel" for="tab-social" data-type="social"> + <img class="icon-small" src="chrome://browser/skin/thumb-down.svg" data-type="social"/> + <span data-type="social"></span> + </label> + + <input id="tab-cookie" data-type="cookie" type="radio" name="tabs" aria-labelledby="cookieLabel cookieTitle" aria-describedby="cookieContent"> + <label id="cookieLabel" for="tab-cookie" data-type="cookie"> + <img class="icon-small" src="chrome://browser/skin/controlcenter/3rdpartycookies.svg" data-type="cookie"/> + <span data-type="cookie"></span> + </label> + + <input id="tab-tracker" data-type="tracker" type="radio" name="tabs" aria-labelledby="trackerLabel trackerTitle" aria-describedby="trackerContent"> + <label id="trackerLabel" for="tab-tracker" data-type="tracker"> + <img class="icon-small" src="chrome://browser/skin/canvas.svg" data-type="tracker"/> + <span data-type="tracker"></span> + </label> + + <input id="tab-fingerprinter" data-type="fingerprinter" type="radio" name="tabs" aria-labelledby="fingerprinterLabel fingerprinterTitle" aria-describedby="fingerprinterContent"> + <label id="fingerprinterLabel" for="tab-fingerprinter" data-type="fingerprinter"> + <img class="icon-small" src="chrome://browser/skin/fingerprint.svg" data-type="fingerprinter"/> + <span data-type="fingerprinter"></span> + </label> + + <input id="tab-cryptominer" data-type="cryptominer" type="radio" name="tabs" aria-labelledby="cryptominerLabel cryptominerTitle" aria-describedby="cryptominerContent"> + <label id="cryptominerLabel" for="tab-cryptominer" data-type="cryptominer"> + <img class="icon-small" src="chrome://browser/skin/controlcenter/cryptominers.svg" data-type="cryptominer"/> + <span data-type="cryptominer"></span> + </label> + <div id=highlight></div> + <div id=highlight-hover></div> + <div id="social" class="tab-content"> + <p id="socialTitle" class="content-title" data-l10n-id="social-tab-title"></p> + <p id="socialContent" data-l10n-id="social-tab-contant"> + <a target="_blank" id="social-link" data-l10n-name="learn-more-link"></a> + </p> + </div> + <div id="cookie" class="tab-content"> + <p id="cookieTitle" class="content-title" data-l10n-id="cookie-tab-title"></p> + <p id="cookieContent" data-l10n-id="cookie-tab-content"> + <a target="_blank" id="cookie-link" data-l10n-name="learn-more-link"></a> + </p> + </div> + <div id="tracker" class="tab-content"> + <p id="trackerTitle" class="content-title" data-l10n-id="tracker-tab-title"></p> + <p id="trackerContent" data-l10n-id="tracker-tab-description"> + <a target="_blank" id="tracker-link" data-l10n-name="learn-more-link"></a> + </p> + </div> + <div id="fingerprinter" class="tab-content"> + <p id="fingerprinterTitle" class="content-title" data-l10n-id="fingerprinter-tab-title"></p> + <p id="fingerprinterContent" data-l10n-id="fingerprinter-tab-content"> + <a target="_blank" id="fingerprinter-link" data-l10n-name="learn-more-link"></a> + </p> + </div> + <div id="cryptominer" class="tab-content"> + <p id="cryptominerTitle" class="content-title" data-l10n-id="cryptominer-tab-title"></p> + <p id="cryptominerContent" data-l10n-id="cryptominer-tab-content"> + <a target="_blank" id="cryptominer-link" data-l10n-name="learn-more-link"></a> + </p> + </div> + </div> + </div> + <div id="graph-total-summary"></div> + </div> + </div> + <div id="mobile-hanger" class="card-body hidden"> + <div class="body-wrapper"> + <button class="exit-icon" data-l10n-id="protections-close-button2"></button> + <div id="etp-mobile-content"> + <img class="mobile-app-icon" src="chrome://browser/content/logos/etp-mobile.svg"/> + <span> + <h2 class="card-title" data-l10n-id="mobile-app-title"></h2> + <p class="content"> + <span data-l10n-id="mobile-app-card-content"></span> + <span target="_blank" id="mobile-app-links" data-l10n-id="mobile-app-links"> + <a target="_blank" id="android-mobile-inline-link" data-l10n-name="android-mobile-inline-link" href=""></a> + <a target="_blank" id="ios-mobile-inline-link" data-l10n-name="ios-mobile-inline-link" href=""></a> + </span> + </p> + </span> + </div> + </div> + </div> + </div> + <!-- Markup for Monitor card. --> + <section class="card card-no-hover monitor-card hidden"> + <div class="card-header"> + <img class="icon" src="chrome://browser/content/logos/monitor.svg"/> + <div class="wrapper"> + <div> + <h2 id="monitor-title" class="card-title" data-l10n-id="monitor-title"></h2> + <p id="monitor-header-content" class="content"> + <span> + <!-- Insert Monitor header content here. --> + </span> + <a target="_blank" href="" id="monitor-link" data-l10n-id="monitor-link"></a> + </p> + <div class="monitor-scanned-wrapper"> + <img class="icon-small" src="chrome://global/skin/icons/reload.svg"/> + <span class="monitor-scanned-text" data-l10n-id="auto-scan"></span> + </div> + </div> + <a target="_blank" id="sign-up-for-monitor-link"> + <!-- Insert Monitor link content here. --> + </a> + </div> + </div> + <div class="card-body"> + <div class="body-wrapper"> + <div id="monitor-body-content"> + <div class="monitor-info-wrapper"> + <div class="monitor-block email"> + <a target="_blank" id="monitor-stored-emails-link" data-l10n-id="monitor-emails-tooltip"> + <span class="monitor-stat"> + <img class="icon-med" src="chrome://browser/skin/mail.svg"/> + <span data-type="stored-emails"> + <!-- Display number of stored emails here. --> + </span> + </span> + <span id="info-monitored-addresses" class="info-text"></span> + </a> + </div> + <div class="monitor-block breaches"> + <a target="_blank" id="monitor-known-breaches-link" data-l10n-id="monitor-breaches-tooltip"> + <span class="monitor-stat"> + <img class="icon-med" src="chrome://browser/skin/fxa/avatar.svg"/> + <span data-type="known-breaches"> + <!-- Display number of known breaches here. --> + </span> + </span> + <span id="info-known-breaches" class="info-text"></span> + </a> + </div> + <div class="monitor-block passwords"> + <a target="_blank" id="monitor-exposed-passwords-link" data-l10n-id="monitor-passwords-tooltip"> + <span class="monitor-stat"> + <img class="icon-med" src="chrome://browser/skin/login.svg"/> + <span data-type="exposed-passwords"> + <!-- Display number of exposed passwords here. --> + </span> + </span> + <span id="info-exposed-passwords" class="info-text"></span> + </a> + </div> + </div> + <div class="monitor-breaches-wrapper"> + <div class="monitor-breaches-header"> + <img id="monitor-breaches-icon"/> + <span id="monitor-breaches-title"/> + </div> + <div class="monitor-breaches-description-wrapper"> + <span id="monitor-breaches-description" class="content"></span> + <div class="monitor-breaches-link-wrapper"> + <a id="monitor-breaches-link" target="_blank"></a> + </div> + </div> + </div> + <div class="monitor-partial-breaches-wrapper"> + <div class="monitor-partial-breaches-header"> + <img id="monitor-partial-breaches-icon" src="chrome://browser/skin/protections/resolved-breach-gray.svg"/> + <span id="monitor-partial-breaches-title"></span> + <span id="monitor-partial-breaches-percentage"></span> + </div> + <progress class="progress-bar" max="100"></progress> + <div class="monitor-partial-breaches-motivation-text"> + <span id="monitor-partial-breaches-motivation-title"></span> + <div class="monitor-partial-breaches-motivation-wrapper"> + <span id="monitor-partial-breaches-motivation-desc" class="content" data-l10n-id="monitor-partial-breaches-motivation-description"></span> + <div class="monitor-partial-breaches-link-wrapper"> + <a id="monitor-partial-breaches-link" target="_blank" data-l10n-id="monitor-resolve-breaches-link"></a> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </section> + <!-- Markup for passwords card. --> + <section class="card card-no-hover lockwise-card hidden"> + <div class="card-header"> + <img class="icon" src="chrome://browser/content/logos/lockwise.svg"/> + <div class="wrapper"> + <div> + <h2 id="lockwise-title" class="card-title"> + <!-- Insert Lockwise card title here. --> + </h2> + <p id="lockwise-header-content" class="content"> + <span> + <!-- Insert Lockwise header content here. --> + </span> + <a target="_blank" id="lockwise-how-it-works" data-l10n-id="lockwise-how-it-works-link" href=""></a> + </p> + </div> + <button id="save-passwords-button" class="primary" data-l10n-id="protection-report-passwords-save-passwords-button"></button> + <div class="lockwise-scanned-wrapper"> + <img id="lockwise-scanned-icon" /> + <span id="lockwise-scanned-text" class="content"> + <!-- Display message for stored logins here. --> + </span> + </div> + <button id="manage-passwords-button" class="primary" data-l10n-id="protection-report-passwords-manage-passwords-button"></button> + </div> + </div> + <!-- <div class="card-body hidden"> + <div id="lockwise-body-content" class="body-wrapper"> + <div class="no-logins hidden"> + </div> + </div> + </div> --> + </section> + <!-- Markup for Proxy card --> + <section class="card card-no-hover proxy-card hidden"> + <div class="card-header"> + <img class="icon light" src="chrome://browser/content/logos/proxy-light.svg"/> + <img class="icon dark" src="chrome://browser/content/logos/proxy-dark.svg"/> + <div class="wrapper"> + <div> + <h3 class="card-title" data-l10n-id="proxy-title"></h3> + <p class="content" data-l10n-id="proxy-header-content"></p> + </div> + <a target="_blank" id="get-proxy-extension-link" data-l10n-id="get-proxy-extension-link"></a> + </div> + </div> + </section> + + <section class="card card-no-hover vpn-card hidden"> + <div class="card-header"> + <img class="icon light" src="chrome://browser/content/logos/vpn-light.svg"/> + <img class="icon dark" src="chrome://browser/content/logos/vpn-dark.svg"/> + <div class="wrapper"> + <div> + <div class="title-wrapper"> + <img id="check-icon" src="chrome://browser/skin/protections/resolved-breach.svg"> + <h3 class="card-title" data-l10n-id="vpn-title"></h3> + </div> + <p class="content" data-l10n-id="vpn-header-content"></p> + <p class="content subscribed" data-l10n-id="vpn-header-content-subscribed"> + <a target="_blank" id="vpn-google-playstore-link" data-l10n-name="vpn-google-playstore-link"></a> + <a target="_blank" id="vpn-app-store-link" data-l10n-name="vpn-app-store-link"></a> + </p> + </div> + <a target="_blank" id="get-vpn-link" data-l10n-id="get-vpn-link"></a> + </div> + </div> + </section> + </div> + </body> +</html> |