From a8814c6211915ab9a62521f1a3640976ab83816b Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@hebeler.club>
Date: Fri, 16 Jun 2023 21:19:20 +0200
Subject: [PATCH] updated texts
---
pass/lang/de/index.json | 8 ++---
pass/lang/de/login.json | 2 +-
pass/public/styles/base.less | 7 ++++-
pass/public/styles/key/enter.less | 2 +-
pass/routes/key.js | 8 +++--
pass/views/index.ejs | 52 +++++++++++++++++++++++--------
pass/views/key.ejs | 2 +-
pass/views/login/key.ejs | 38 ++++++++++++++++------
8 files changed, 85 insertions(+), 34 deletions(-)
diff --git a/pass/lang/de/index.json b/pass/lang/de/index.json
index 276f599..f5f8ff9 100644
--- a/pass/lang/de/index.json
+++ b/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"
}
}
diff --git a/pass/lang/de/login.json b/pass/lang/de/login.json
index f60982d..dca55aa 100644
--- a/pass/lang/de/login.json
+++ b/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."
}
diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index fbe7777..bf9e5c7 100644
--- a/pass/public/styles/base.less
+++ b/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;
+ }
+ }
}
}
diff --git a/pass/public/styles/key/enter.less b/pass/public/styles/key/enter.less
index 7c9f4cf..f4376e1 100644
--- a/pass/public/styles/key/enter.less
+++ b/pass/public/styles/key/enter.less
@@ -165,7 +165,7 @@ body {
}
}
}
- #how-it-works {
+ #create {
width: 280px;
a.button {
padding: 0.5rem;
diff --git a/pass/routes/key.js b/pass/routes/key.js
index 6c0cdcf..b942c10 100644
--- a/pass/routes/key.js
+++ b/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,
});
});
});
diff --git a/pass/views/index.ejs b/pass/views/index.ejs
index 29d5a84..6d792e6 100644
--- a/pass/views/index.ejs
+++ b/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'); -%>
diff --git a/pass/views/key.ejs b/pass/views/key.ejs
index c4f9e54..0e2686a 100644
--- a/pass/views/key.ejs
+++ b/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") { _%>
diff --git a/pass/views/login/key.ejs b/pass/views/login/key.ejs
index 1d9f954..51787fa 100644
--- a/pass/views/login/key.ejs
+++ b/pass/views/login/key.ejs
@@ -1,11 +1,21 @@
-<%- 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'); -%>
--
GitLab