-
Notifications
You must be signed in to change notification settings - Fork 919
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
322 additions
and
1 deletion.
There are no files selected for viewing
138 changes: 138 additions & 0 deletions
138
bedrock/firefox/templates/firefox/whatsnew/whatsnew-fx117-vpn.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| {# | ||
| 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 https://mozilla.org/MPL/2.0/. | ||
| #} | ||
|
|
||
| {% extends "firefox/whatsnew/base.html" %} | ||
|
|
||
| {% block page_title %}{{ ftl('whatsnew-page-title') }}{% endblock %} | ||
|
|
||
| {#- This will appear as <meta property="og:description"> which can be used for social share -#} | ||
| {% block page_og_desc %}{{ ftl('whatsnew-page-description') }}{% endblock %} | ||
|
|
||
| {% block body_id %}firefox-whatsnew{% endblock %} | ||
|
|
||
| {% block page_css %} | ||
| {{ css_bundle('firefox_whatsnew_117_vpn') }} | ||
| {% endblock %} | ||
|
|
||
| {% block experiments %}{% endblock %} | ||
|
|
||
| {% block site_header %}{% endblock %} | ||
|
|
||
| {%- if LANG == "da": -%} | ||
| {% set vpn_title = "Det næste niveau af privatliv er kun ét klik væk" %} | ||
| {% set vpn_tagline = "Sommeren lakker mod enden, men det bør din sikkerhed ikke. Mozilla VPN kan give dig ekstra ro i sindet året rundt med kun ét klik." %} | ||
| {% set vpn_cta = "Få Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Leveret af Mozilla.</strong> Vi har sat mennesker over profit siden 1998."|safe %} | ||
|
|
||
| {%- elif LANG == "de": -%} | ||
| {% set vpn_title = "Mit einem Klick gibt’s Datenschutz der Extraklasse" %} | ||
| {% set vpn_tagline = "Der Sommer mag sich verabschieden, aber Ihre Sicherheit sollte bleiben. Mozilla VPN ist Ihre One-Click-Lösung für ein gutes Gefühl, das ganze Jahr über." %} | ||
| {% set vpn_cta = "Holen Sie sich Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Powered by Mozilla.</strong> Bei uns stehen Menschen seit 1998 über Gewinnen."|safe %} | ||
|
|
||
| {%- elif LANG.startswith("es-"): -%} | ||
| {% set vpn_title = "La privacidad al máximo nivel está a un solo clic de distancia." %} | ||
| {% set vpn_tagline = "Aunque el verano afloje, tu seguridad no debería hacerlo.Mozilla VPN es tu solución en un solo clic para disfrutar de tranquilidad extra durante todo el año." %} | ||
| {% set vpn_cta = "Consigue Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Desarrollado por Mozilla.</strong> Priorizamos a las personas sobre el beneficio desde 1998."|safe %} | ||
|
|
||
| {%- elif LANG == "fr": -%} | ||
| {% set vpn_title = "La sécurité renforcée à portée de clic" %} | ||
| {% set vpn_tagline = "L’été touche à sa fin, mais votre sécurité reste importante. En un clic, Mozilla VPN vous protège tout au long de l’année." %} | ||
| {% set vpn_cta = "Obtenir Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Conçu par Mozilla.</strong> Nous plaçons les personnes avant le profit depuis 1998."|safe %} | ||
|
|
||
| {%- elif LANG == "hr": -%} | ||
| {% set vpn_title = "Viša razina privatnosti dostupna je samo jednim klikom" %} | ||
| {% set vpn_tagline = "Ljeto je možda na odlasku, ali vaša privatnost ne bi trebala biti. Mozilla VPN je vaše rješenje jednim klikom za dodatnu bezbrižnost tijekom cijele godine." %} | ||
| {% set vpn_cta = "Uzmite Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Powered by Mozilla.</strong> Stavljamo ljude ispred profita od 1998."|safe %} | ||
|
|
||
| {%- elif LANG == "hu": -%} | ||
| {% set vpn_title = "A biztonság következő szintje csak egy kattintásra van" %} | ||
| {% set vpn_tagline = "A nyár ugyan hamarosan lejár, de biztonsága sosem lehet a múlté. A Mozilla VPN egész évben plusz biztonságot nyújt, egyetlen kattintással." %} | ||
| {% set vpn_cta = "Mozilla VPN letöltése" %} | ||
| {% set vpn_signoff = "<strong>A Mozilla erejével.</strong> Mi az embereket helyezzük a profit elé – már 1998 óta."|safe %} | ||
|
|
||
| {%- elif LANG == "it": -%} | ||
| {% set vpn_title = "La privacy di livello assoluto a portata di clic" %} | ||
| {% set vpn_tagline = "L'estate sta finendo, ma la tua sicurezza non può mai andare in vacanza. Mozilla VPN è la tua soluzione a portata di clic per un anno intero di tranquillità." %} | ||
| {% set vpn_cta = "Scopri Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Creata da Mozilla.</strong> Dal 1998, prima le persone, poi i profitti."|safe %} | ||
|
|
||
| {%- elif LANG == "lv": -%} | ||
| {% set vpn_title = "Nākamā līmeņa privātums ir tikai viena klikšķa attālumā" %} | ||
| {% set vpn_tagline = "Lai arī vasara tuvojas beigām, jūsu drošībai nevajadzētu beigties. Tikai viens klikšķis, un Mozilla VPN parūpēsies par jūsu sirdsmieru visa gada garumā." %} | ||
| {% set vpn_cta = "Iegādāties Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Nodrošina Mozilla.</strong> Rūpes par cilvēkiem, nevis peļņu, jau kopš 1998. gada."|safe %} | ||
|
|
||
| {%- elif LANG == "nl": -%} | ||
| {% set vpn_title = "Til uw privacy in één klik naar een hoger niveau" %} | ||
| {% set vpn_tagline = "De zomer loopt op zijn einde. Hoog tijd om uw veiligheid na te kijken. In één klik biedt Mozilla VPN u extra zekerheid gedurende het hele jaar." %} | ||
| {% set vpn_cta = "Mozilla VPN downloaden" %} | ||
| {% set vpn_signoff = "<strong>Mogelijk gemaakt door Mozilla.</strong> De organisatie die mensen belangrijker vindt dan winst, sinds 1998."|safe %} | ||
|
|
||
| {%- elif LANG == "pl": -%} | ||
| {% set vpn_title = "Jedno kliknięcie i wchodzisz na wyższy poziom prywatności" %} | ||
| {% set vpn_tagline = "Letnie słońce słabnie, Twoje bezpieczeństwo – wręcz przeciwnie. Mozilla VPN to prosty jak kliknięcie myszką sposób na spokojną głowę przez cały rok." %} | ||
| {% set vpn_cta = "Pobierz Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Wykorzystuje technologię Mozilla.</strong> Tworzymy dla ludzi, nie dla zysku – już od 1998 r."|safe %} | ||
|
|
||
| {%- elif LANG.startswith("pt"): -%} | ||
| {% set vpn_title = "A privacidade mais avançada está a um clique de distância" %} | ||
| {% set vpn_tagline = "O verão está quase a terminar, mas o mesmo não pode acontecer com a sua segurança. A VPN Mozilla é a sua solução com um só clique que lhe proporciona total tranquilidade durante todo o ano." %} | ||
| {% set vpn_cta = "Obtenha a VPN Mozilla" %} | ||
| {% set vpn_signoff = "<strong>Com tecnologia Mozilla.</strong> Colocamos as pessoas à frente dos lucros desde 1998."|safe %} | ||
|
|
||
| {%- elif LANG == "ru": -%} | ||
| {% set vpn_title = "Конфиденциальность следующего уровня будет вашей в один клик" %} | ||
| {% set vpn_tagline = "Лето, может быть, и подходит к концу, но не ваша безопасность.Mozilla VPN — это ваше решение одним кликом для дополнительного душевного спокойствия в течение всего года." %} | ||
| {% set vpn_cta = "Установить Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>На базе Mozilla.</strong> Ставим людей выше прибыли с 1998 года."|safe %} | ||
|
|
||
| {%- elif LANG == "sk": -%} | ||
| {% set vpn_title = "Súkromie na vyššej úrovni je vzdialené len jedno kliknutie." %} | ||
| {% set vpn_tagline = "Leto sa síce končí, ale vaša bezpečnosť by sa nemala.VPN Mozilla je vaše riešenie na jedno kliknutie pre špeciálny pocit istoty počas celého roka." %} | ||
| {% set vpn_cta = "Získajte VPN Mozilla" %} | ||
| {% set vpn_signoff = "<strong>Podporované spoločnosťou Mozilla.</strong> Ľudí uprednostňujeme pred ziskom už od roku 1998."|safe %} | ||
|
|
||
| {%- else: -%} | ||
| {% set vpn_title = "Next-level privacy is just a click away" %} | ||
| {% set vpn_tagline = "Summer may be winding down, but your security shouldn’t. Mozilla VPN is your one-click solution for extra peace of mind all year long." %} | ||
| {% set vpn_cta = "Get Mozilla VPN" %} | ||
| {% set vpn_signoff = "<strong>Powered by Mozilla.</strong> Putting people before profits since 1998."|safe %} | ||
| {%- endif -%} | ||
|
|
||
| {% block wnp_content %} | ||
| <section class="wnp-content-main"> | ||
| <div class="mzp-l-content mzp-t-content-md"> | ||
| <div class="wnp-main-image"> | ||
| <span class="toggle" role="presentation"><span class="toggle-display"></span></span> | ||
| </div> | ||
|
|
||
| <h2 class="wnp-main-title">{{ vpn_title }}</h2> | ||
|
|
||
| <p class="wnp-main-tagline"> | ||
| {{ vpn_tagline }} | ||
| </p> | ||
|
|
||
| <p class="wnp-main-cta try-reader-view"> | ||
| <a class="mzp-c-button mzp-t-product" href="{{ url('products.vpn.landing') }}" data-cta-text="Get Mozilla VPN" data-cta-type="button"> | ||
| {{ vpn_cta }} | ||
| </a> | ||
| </p> | ||
| </div> | ||
|
|
||
| <p class="wnp-sign-off"> | ||
| {{ vpn_signoff }} | ||
| </p> | ||
| </div> | ||
| </section> | ||
| {% endblock %} | ||
|
|
||
| {% block js %} | ||
| {{ js_bundle('firefox_whatsnew_update') }} | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| // 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 https://mozilla.org/MPL/2.0/. | ||
|
|
||
| $brand-theme: 'firefox'; | ||
|
|
||
| @import 'includes/base'; | ||
| @import '~@mozilla-protocol/core/protocol/css/includes/lib'; | ||
| @import '~@mozilla-protocol/core/protocol/css/components/notification-bar'; | ||
|
|
||
| .wnp-content-main { | ||
| animation: mainbg 200ms 1700ms ease-in forwards; | ||
| background-color: $color-white; | ||
| color: $color-black; | ||
| margin-top: $spacing-md; | ||
| padding-bottom: $spacing-md; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .wnp-main-title { | ||
| @include text-title-lg; | ||
| padding: 0 $layout-lg; | ||
| } | ||
|
|
||
| .wnp-main-image { | ||
| margin: $layout-sm auto; | ||
| } | ||
|
|
||
| .wnp-main-tagline { | ||
| @include text-body-lg; | ||
| color: $color-black; | ||
| padding: 0 $layout-lg; | ||
| } | ||
|
|
||
| .wnp-sign-off, | ||
| .c-utilities { | ||
| color: $color-black; | ||
| } | ||
|
|
||
| .toggle { | ||
| align-items: center; | ||
| animation: fade-and-zoom 200ms 800ms ease forwards, drop 400ms 1050ms ease-in forwards; | ||
| display: inline-flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| padding-bottom: 0; | ||
| position: relative; | ||
| opacity: 0; | ||
| transform: scale(0.85); | ||
| top: -25px; | ||
| } | ||
|
|
||
| .toggle-display { | ||
| --offset: 0.25em; | ||
| --diameter: 2.5em; | ||
| align-items: center; | ||
| animation: toggle-color 100ms 1600ms linear forwards; | ||
| background-color: $color-pink-40; | ||
| border-radius: 100vw; | ||
| border: 2px solid $color-black; | ||
| display: flex; | ||
| height: calc(var(--diameter) + var(--offset) * 2); | ||
| justify-content: space-around; | ||
| position: relative; | ||
| width: calc(var(--diameter) * 2 + var(--offset) * 2); | ||
| transition: background-color 100ms linear; | ||
|
|
||
| @media #{$mq-md} { | ||
| --diameter: 3em; | ||
| } | ||
|
|
||
| @media #{$mq-lg} { | ||
| --diameter: 3.5em | ||
| } | ||
|
|
||
| &::before { | ||
| animation: toggle-slide 500ms 1400ms cubic-bezier(.8, -0.75, .5, 1.1) forwards; | ||
| background: $color-white; | ||
| border-radius: 50%; | ||
| border: 2px solid $color-black; | ||
| box-sizing: border-box; | ||
| content: ''; | ||
| height: var(--diameter); | ||
| left: var(--offset); | ||
| position: absolute; | ||
| top: 50%; | ||
| transform: translate(0, -50%); | ||
| transition: inherit; | ||
| width: var(--diameter); | ||
| z-index: 2; | ||
| } | ||
| } | ||
|
|
||
| // Disable animations | ||
| @media (prefers-reduced-motion: reduce) { | ||
| .wnp-content-main, | ||
| .toggle, | ||
| .toggle-display, | ||
| .toggle-display::before { | ||
| animation: none; | ||
| } | ||
| } | ||
|
|
||
| // ---------------------------------------------------------------------------*/ | ||
| // Animations | ||
|
|
||
| @keyframes toggle-slide { | ||
| from { transform: translate(0, -50%); } | ||
| to { transform: translate(100%, -50%); } | ||
| } | ||
|
|
||
| @keyframes toggle-color { | ||
| from { background-color: $color-pink-40; } | ||
| to { background-color: $color-green-40; } | ||
| } | ||
|
|
||
| @keyframes mainbg { | ||
| to { background-color: $color-violet-05; } | ||
| } | ||
|
|
||
| @keyframes fade-and-zoom { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: scale(0.85); | ||
| } | ||
|
|
||
| 100% { | ||
| opacity: 1; | ||
| transform: scale(1); | ||
| } | ||
| } | ||
|
|
||
| @keyframes drop { | ||
| 0% { top: -25px; } | ||
| 50% { top: 4px; } | ||
| 70% { top: -8px; } | ||
| 90%, 100% { top: 0; } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters