updated texts

pass/lang/de/index.json

@@ -34,18 +34,18 @@
     "steps": [
       {
         "heading": "MetaGer Schlüssel erstellen",
-        "description": "Ihr Schlüssel ist das einzige, was Sie sich für die Nutzung der werbefreien Suche notieren müssen. Dieser wird automatisch für Sie erstellt. Wir benötigen keine Kontaktdaten."
+        "description": "Ihr Schlüssel ist das einzige, was Sie für die Nutzung der werbefreien Suche benötigen. Dieser wird automatisch für Sie generiert. Wir benötigen keine Kontaktdaten."
       },
       {
-        "heading": "Token aufladen (ca. 3€ / Monat)",
-        "description": "Ihr Schlüssel wird mit einer einmaligen <a href=\"{{linkCost}}\" target=\"_blank\">Zahlung</a> aktiviert. Eine Abozahlung ist nicht notwendig. Er wird anschließend automatisch auf Ihrem Gerät verwendet und Sie haben Zugriff auf die Ergebnisse sämtlicher verfügbarer Suchmaschinen inklusive einer vollwertigen Bildersuche. Erfahren Sie, wie sich unsere <a href=\"{{linkPricing}}\" target=\"_blank\">Preise zusammensetzen</a>."
+        "heading": "Schlüssel aktivieren",
+        "description": "Ihr Schlüssel wird durch den Kauf von <a href=\"{{linkCost}}\" target=\"_blank\">Guthaben (Token)</a> aktiviert. Er wird anschließend automatisch verwendet. Sämtliche Werbung auf MetaGer ist nun entfernt und Sie haben Zugriff auf die Ergebnisse aller verfügbarer Suchmaschinen. Erfahren Sie, wie sich unsere <a href=\"{{linkPricing}}\" target=\"_blank\">Preise zusammensetzen</a>."
       },
       {
         "heading": "Verwenden Sie Ihren Schlüssel auf beliebig vielen Geräten",
         "description": "Ihr Schlüssel kann auf beliebig vielen Geräten verwendet werden. Sie können Ihn auch mit Freunden/Verwandten teilen. Rufen Sie einfach mit Ihrem Gerät <a href=\"https://metager.de\" target=\"_blank\">MetaGer</a> auf, geben Sie dort Ihren Schlüssel ein, indem Sie auf das Schlüsselsymbol neben der Suchleiste klicken und schon kann es losgehen."
       }
     ],
-    "start": "Los geht's",
+    "start": "Werbefreie Suche jetzt einrichten",
     "login": "Ich habe bereits einen Schlüssel"
   }
 }

pass/lang/de/login.json

@@ -11,7 +11,7 @@
     "invalid-qr": "Qr Code enthält keine gültigen Daten.",
     "close": "Schließen"
   },
-  "how-it-works": "So funktioniert die werbefreie Suche",
+  "create": "Werbefreie Suche neu einrichten",
   "submit": "Abschicken",
   "error": "Ein gültiger Schlüssel oder eine gültige Sicherungsdatei ist erforderlich."
 }

pass/public/styles/base.less

@@ -275,7 +275,7 @@ nav#primary-nav {
         }
 
         &.button {
-          padding: 0.5rem;
+          padding: 0.25rem 0.5rem;
           transition: background-color 300ms, border-color 300ms, color 300ms;
         }
       }
@@ -288,6 +288,11 @@ nav#primary-nav {
     &.key-management {
       grid-area: key-management;
       justify-content: flex-end;
+      > li {
+        &:nth-child(1) {
+          font-size: 0.9em;
+        }
+      }
     }
   }
 

pass/public/styles/key/enter.less

@@ -165,7 +165,7 @@ body {
         }
       }
     }
-    #how-it-works {
+    #create {
       width: 280px;
       a.button {
         padding: 0.5rem;

pass/routes/key.js

@@ -17,7 +17,9 @@ router.get("/create", function (req, res, next) {
     return res.redirect(`${res.locals.baseDir}/key/enter`);
   }
   Key.GET_NEW_KEY().then((key) => {
-    res.redirect(`${res.locals.baseDir}/key/` + key.get_key() + "?new=true");
+    res.redirect(
+      `${res.locals.baseDir}/key/` + key.get_key() + "?new=true#second-nav"
+    );
   });
 });
 
@@ -177,11 +179,11 @@ router.get("/:key", async (req, res) => {
 });
 
 router.get("/:key/logincode", (req, res) => {
-  req.data.key.key.get_logincode().then(code => {
+  req.data.key.key.get_logincode().then((code) => {
     res.set("Cache-Control", "no-store");
     res.json({
       key: req.data.key.key.get_key(),
-      code: code
+      code: code,
     });
   });
 });

pass/views/index.ejs

@@ -3,9 +3,7 @@
 <div id="hero">
   <div class="container">
     <h1><%= req.t('hero.title') _%></h1>
-    <p>
-      <%= req.t('hero.description') _%>
-    </p>
+    <p><%= req.t('hero.description') _%></p>
     <ul>
       <li><%= req.t('hero.advantages.ads') _%></li>
       <li><%= req.t('hero.advantages.tracking') _%></li>
@@ -13,18 +11,30 @@
       <li><%= req.t('hero.advantages.compromise') _%></li>
     </ul>
     <div class="search-logo">
-      <img class="metager-logo" src="<%= baseDir _%>/images/metager.svg" alt="" />
+      <img
+        class="metager-logo"
+        src="<%= baseDir _%>/images/metager.svg"
+        alt=""
+      />
       <div class="searchbar">
         <button>
           <img src="<%= baseDir _%>/images/key-verified.svg" alt="" />
         </button>
-        <input type="text" name="eingabe" id="eingabe" value="<%= req.t('hero.searchbarplaceholder') _%>" disabled />
+        <input
+          type="text"
+          name="eingabe"
+          id="eingabe"
+          value="<%= req.t('hero.searchbarplaceholder') _%>"
+          disabled
+        />
         <button>
           <img src="<%= baseDir _%>/images/icon-lupe.svg" alt="Suchen" />
         </button>
       </div>
     </div>
-    <a class="call-to-action button" href="#how-it-works"><%= req.t('hero.calltoaction') _%></a>
+    <a class="call-to-action button" href="#how-it-works"
+      ><%= req.t('hero.calltoaction') _%></a
+    >
   </div>
 </div>
 <div id="advantages">
@@ -40,7 +50,10 @@
     </div>
   </div>
   <div class="advantage" id="no-logging">
-    <img src="<%= baseDir _%>/images/robot.svg" alt="Image depicting a roboter" />
+    <img
+      src="<%= baseDir _%>/images/robot.svg"
+      alt="Image depicting a roboter"
+    />
     <div class="text">
       <h2><%= req.t('advantages.logging.heading') _%></h2>
       <p><%= req.t('advantages.logging.description') _%></p>
@@ -50,11 +63,16 @@
     </div>
   </div>
   <div class="advantage" id="no-tradeoff">
-    <img src="<%= baseDir _%>/images/metager-schloss-orange.svg" alt="Image depicting a lock" />
+    <img
+      src="<%= baseDir _%>/images/metager-schloss-orange.svg"
+      alt="Image depicting a lock"
+    />
     <div class="text">
       <h2><%= req.t('advantages.compromise.heading') _%></h2>
       <p>
-        <%- req.t('advantages.compromise.description', {linkPaymentMethods: `${baseDir}/cost#payment-methods`, linktoken: `${baseDir}/help/anonymous-token`}) _%>
+        <%- req.t('advantages.compromise.description', {linkPaymentMethods:
+        `${baseDir}/cost#payment-methods`, linktoken:
+        `${baseDir}/help/anonymous-token`}) _%>
       </p>
       <div class="relevant-items">
         <div><%= req.t('advantages.compromise.compromise') _%></div>
@@ -71,16 +89,24 @@
     </li>
     <li>
       <h2><%= req.t('howitworks.steps.1.heading') _%></h2>
-      <div><%- req.t('howitworks.steps.1.description', {linkCost: `${baseDir}/cost`, linkPricing: `${baseDir}/cost#pricing`}) _%></div>
+      <div>
+        <%- req.t('howitworks.steps.1.description', {linkCost:
+        `${baseDir}/cost`, linkPricing: `${baseDir}/cost#pricing`}) _%>
+      </div>
     </li>
     <li>
       <h2><%= req.t('howitworks.steps.2.heading') _%></h2>
-      <div><%- req.t('howitworks.steps.2.description', {linkCost: `${baseDir}/cost`}) _%></div>
+      <div>
+        <%- req.t('howitworks.steps.2.description', {linkCost:
+        `${baseDir}/cost`}) _%>
+      </div>
     </li>
   </ol>
   <div id="how-it-works-action">
-    <a href="<%= baseDir _%>/key/create" class="button"><%= req.t('howitworks.start') _%></a>
+    <a href="<%= baseDir _%>/key/create#second-nav" class="button"
+      ><%= req.t('howitworks.start') _%></a
+    >
     <a href="<%= baseDir %>/key/enter"><%= req.t("howitworks.login") _%></a>
   </div>
 </div>
-<%- include('templates/page_footer'); -%>
\ No newline at end of file
+<%- include('templates/page_footer'); -%>

pass/views/key.ejs

@@ -42,7 +42,7 @@
 <div id="store">
   <h2><%= req.t("key.new.heading", {ns: "key"}) %>:</h2>
   <p><%= req.t("key.new.text", {ns: "key"}) %></p>
-  <a class="button" href="<%= baseDir _%>/key/<%= key.key.get_key() %>"><%= req.t("key.new.charge", {ns: "key"}) %></a>
+  <a class="button" href="<%= baseDir _%>/key/<%= key.key.get_key() %>#second-nav"><%= req.t("key.new.charge", {ns: "key"}) %></a>
 </div>
 <% } else if (page === "order") { %>
 <%_ if(typeof order === "undefined") { _%>

pass/views/login/key.ejs

-<%- include('../templates/page_header', {css: [`${baseDir}/styles/key/enter.css`], js:[`${baseDir}/js/enter.js`]}); %>
+<%- include('../templates/page_header', {css:
+[`${baseDir}/styles/key/enter.css`], js:[`${baseDir}/js/enter.js`]}); %>
 
 <div id="enter">
   <div id="form">
     <div id="direct-option" class="enter-option">
-      <h3><%= req.t("heading", {ns: "login"}) _%> <a href="<%= baseDir %>" class="hint-icon">?</a></h3>
-      <form id="key-form" action="<%= baseDir _%>/key/enter" method="post" enctype="multipart/form-data">
-        <input type="text" name="key" id="key" placeholder="<%= req.t("key-input.placeholder", {ns: "login"}) _%>" />
+      <h3>
+        <%= req.t("heading", {ns: "login"}) _%>
+        <a href="<%= baseDir %>" class="hint-icon">?</a>
+      </h3>
+      <form
+        id="key-form"
+        action="<%= baseDir _%>/key/enter"
+        method="post"
+        enctype="multipart/form-data"
+      >
+        <input type="text" name="key" id="key" placeholder="<%=
+        req.t("key-input.placeholder", {ns: "login"}) _%>" />
       </form>
     </div>
     <div id="file-option" class="enter-option">
@@ -24,15 +34,21 @@
         <img src="<%= baseDir _%>/images/camera.svg" alt="" />
         <span><%= req.t("scan-qr.button", {ns: "login"}) _%></span>
       </a>
-      <div id="qr-camera-error" class="error"><%= req.t("scan-qr.no-camera", {ns: "login"}) _%></div>
-      <div id="qr-decode-error" class="error"><%= req.t("scan-qr.invalid-qr", {ns: "login"}) _%></div>
+      <div id="qr-camera-error" class="error">
+        <%= req.t("scan-qr.no-camera", {ns: "login"}) _%>
+      </div>
+      <div id="qr-decode-error" class="error">
+        <%= req.t("scan-qr.invalid-qr", {ns: "login"}) _%>
+      </div>
     </div>
   </div>
 
   <%_ if(typeof errors !== "undefined") { _%>
   <div class="error"><%= req.t("error", {ns: "login"}) _%></div>
   <%_ } _%>
-  <button id="enter-submit" type="submit" form="key-form"><%= req.t("submit", {ns: "login"}) _%></button>
+  <button id="enter-submit" type="submit" form="key-form">
+    <%= req.t("submit", {ns: "login"}) _%>
+  </button>
   <div id="qr-scanner">
     <div id="scanner-container">
       <video></video>
@@ -40,8 +56,10 @@
     </div>
   </div>
 </div>
-<div id="how-it-works">
-  <a href="<%= baseDir _%>#how-it-works" class="button"><%= req.t("how-it-works", {ns: "login"}) _%></a>
+<div id="create">
+  <a href="<%= baseDir _%>/key/create#second-nav" class="button"
+    ><%= req.t("create", {ns: "login"}) _%></a
+  >
 </div>
 
-<%- include('../templates/page_footer'); -%>
\ No newline at end of file
+<%- include('../templates/page_footer'); -%>