diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index eadfe96f28a726546e4c4963c55fe56edeaa6c9e..028481be427ba6ea288b75f46b66a6ba24bbfe3b 100644
--- a/pass/public/styles/base.less
+++ b/pass/public/styles/base.less
@@ -37,6 +37,7 @@
html {
font-family: Liberation Sans;
+ font-size: 1.1rem;
body {
margin: 0;
@@ -57,23 +58,28 @@ button {
.button.share,
.button.download {
display: none;
+
&.download {
display: flex;
+
img {
height: 2em;
}
}
+
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
font-size: 0.8rem;
+
&.active {
display: flex;
}
+
&.success img {
- filter: brightness(0) invert(74%) sepia(42%) saturate(2242%)
- hue-rotate(65deg) brightness(102%) contrast(104%);
+ filter: brightness(0) invert(74%) sepia(42%) saturate(2242%) hue-rotate(65deg) brightness(102%) contrast(104%);
}
+
img {
filter: brightness(0) invert();
height: 1.5rem;
@@ -88,6 +94,7 @@ button {
text-decoration: none;
background-color: @color-secondary;
width: max-content;
+
&:hover {
color: inherit;
background-color: fade(@color-secondary, 70%);
@@ -107,7 +114,7 @@ nav {
position: relative;
align-items: center;
gap: 0 2rem;
- padding: 0 1rem;
+ padding: .5rem 1rem;
#page-logo a {
display: flex;
@@ -116,16 +123,17 @@ nav {
text-decoration: none;
color: inherit;
- > img {
+ >img {
width: 1.7rem;
filter: brightness(0) invert(1);
}
}
- > input#nav-opener {
+ >input#nav-opener {
display: none;
}
- > label[for="nav-opener"] {
+
+ >label[for="nav-opener"] {
display: none;
}
@@ -142,14 +150,17 @@ nav {
&.whitespace {
flex-grow: 1;
}
- > a {
+
+ >a {
text-decoration: none;
color: inherit;
white-space: nowrap;
font-weight: bold;
+
&:hover {
color: @color-secondary;
}
+
&.button {
padding: 0.7rem;
transition: background-color 300ms, border-color 300ms, color 300ms;
@@ -159,39 +170,45 @@ nav {
}
@media (max-width: @logo-break-point) {
- > ul {
+ >ul {
max-height: 0;
visibility: hidden;
transition: max-height 0.5s, padding 0.5s;
justify-content: space-around;
- > li.whitespace {
+ >li.whitespace {
display: none;
}
}
- > input#nav-opener {
+ >input#nav-opener {
display: block;
visibility: hidden;
flex-grow: 1;
+
&:checked {
- + label {
+ +label {
border-width: 0;
transition: border-width 0ms 0ms;
- > svg {
+
+ >svg {
fill: red;
- > .line {
+
+ >.line {
transition: y 300ms ease-in 0ms, rotate 300ms ease-in 300ms,
opacity 0ms 300ms, fill 300ms ease-in 300ms;
+
//y 300ms ease-in, rotate 300ms ease-in 300ms,
// opacity 0ms 300ms, fill 300ms ease-in 300ms;
&.top {
y: 45px;
rotate: 45deg;
}
+
&.middle {
opacity: 0;
}
+
&.bottom {
y: 45px;
rotate: -45deg;
@@ -199,26 +216,28 @@ nav {
}
}
}
- ~ ul {
+
+ ~ul {
max-height: 500px;
padding: 1rem 0;
visibility: visible;
}
}
}
- > label[for="nav-opener"] {
+
+ >label[for="nav-opener"] {
--navbar-opener-color: white;
display: flex;
- margin: 1rem 0 1rem 1rem;
align-items: center;
border: 1px solid var(--navbar-opener-color);
border-radius: 0.4rem;
cursor: pointer;
transition: border-width 0ms 600ms;
- > svg {
+
+ >svg {
fill: var(--navbar-opener-color);
- > .line {
+ >.line {
transition: rotate 300ms ease-in 0ms, opacity 0ms 300ms,
y 300ms ease-in 300ms, fill 300ms ease-in 300ms;
rotate: 0deg;
@@ -229,16 +248,18 @@ nav {
}
@media (max-width: @nav-items-break-point) {
- > ul {
+ >ul {
flex-direction: column;
width: 100%;
gap: 1rem;
- > li {
+
+ >li {
text-align: center;
+
&.whitespace {
display: none;
}
}
}
}
-}
+}
\ No newline at end of file
diff --git a/pass/public/styles/index.less b/pass/public/styles/index.less
index fb875f15f20dc576f5622a862a620406ec73fa35..661d2c0687e8e7941c4ee7e3638e5af2761841a5 100644
--- a/pass/public/styles/index.less
+++ b/pass/public/styles/index.less
@@ -1,7 +1,7 @@
@import "./misc/vars.less";
-@breakpoint-hero-medium: 800px;
-@breakpoint-hero-small: 500px;
+@breakpoint-hero-medium: 850px;
+@breakpoint-hero-small: 560px;
html {
scroll-behavior: smooth;
@@ -11,7 +11,8 @@ html {
color: white;
background-color: @color-main;
padding: 3rem;
- > .container {
+
+ >.container {
max-width: 850px;
margin: 0 auto;
display: grid;
@@ -19,17 +20,19 @@ html {
grid-template-rows: auto auto auto;
grid-template-areas: "heading search-logo" "text list" "call-to-action list";
- > h1 {
+ >h1 {
grid-area: heading;
margin: 0;
text-align: right;
}
- > p {
+
+ >p {
margin: 0;
grid-area: text;
text-align: right;
}
- > ul {
+
+ >ul {
grid-area: list;
margin: 0;
list-style-type: none;
@@ -37,19 +40,21 @@ html {
text-align: center;
display: grid;
grid-template: "1fr 1fr" "1fr 1fr";
- > li::before {
+
+ >li::before {
content: "✓";
padding-right: 0.5rem;
color: #3af13a;
}
}
- > div.search-logo {
+ >div.search-logo {
grid-area: search-logo;
align-self: start;
justify-self: center;
text-align: center;
- > .metager-logo {
+
+ >.metager-logo {
grid-area: metager-logo;
width: 15em;
max-width: calc(100% - 0.5rem);
@@ -58,26 +63,31 @@ html {
filter: brightness(0.4);
margin-bottom: 1rem;
}
- > .searchbar {
+
+ >.searchbar {
display: grid;
grid-template-columns: max-content 1fr max-content;
background-color: white;
border: 1px solid #585858;
border-radius: 10px;
overflow: hidden;
- > button {
+
+ >button {
background: inherit;
border: 0;
padding: 0.5rem 1rem;
+
img {
height: 1em;
filter: invert(1) brightness(0.4);
}
+
&:nth-child(1) img {
filter: none;
}
}
- > input {
+
+ >input {
background: inherit;
border: 0;
border-left: 1px solid #777;
@@ -87,7 +97,8 @@ html {
}
}
}
- > a {
+
+ >a {
grid-area: call-to-action;
align-self: center;
justify-self: end;
@@ -99,46 +110,54 @@ html {
grid-template-rows: auto auto auto auto;
grid-template-areas: "search-logo search-logo" "heading heading" "text list" "call-to-action list";
- > h1 {
+ >h1 {
text-align: center;
}
- > ul {
+
+ >ul {
grid-template: "1fr" "1fr" "1fr" "1fr";
padding: 1rem;
- > li {
+
+ >li {
align-self: center;
}
}
- > p {
+
+ >p {
line-height: 1.5;
text-align: right;
padding: 1rem 0 1rem 1rem;
}
- > div.search-logo {
+ >div.search-logo {
padding: 0 1rem 3rem 1rem;
}
}
}
+
@media (max-width: @breakpoint-hero-small) {
padding: 0.5rem;
- > .container {
+
+ >.container {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
grid-template-areas: "search-logo" "heading" "text" "list" "call-to-action";
- > p {
+ >p {
text-align: center;
padding: 1rem 0;
}
- > div.search-logo {
+
+ >div.search-logo {
padding: 2rem 0;
}
- > ul {
+
+ >ul {
gap: 0.5rem;
padding: 1rem 0;
}
- > a {
+
+ >a {
justify-self: center;
margin: 1rem 0;
}
@@ -147,43 +166,51 @@ html {
}
#advantages {
- @advantages-breakpoint: 750px;
+ @advantages-breakpoint: 820px;
max-width: 1200px;
display: grid;
margin: 4rem auto;
gap: 4rem;
- > .advantage {
+
+ >.advantage {
display: grid;
grid-template-columns: 1fr minmax(25em, 1fr);
grid-template-areas: "image text";
align-items: center;
+
&:nth-child(even) {
grid-template-columns: minmax(25em, 1fr) 1fr;
grid-template-areas: "text image";
- > .text {
+
+ >.text {
padding-right: 0;
padding-left: 1rem;
}
}
- > img {
+
+ >img {
grid-area: image;
- max-width: 20em;
+ max-width: 320px;
justify-self: center;
align-self: center;
padding: 0 1rem;
}
- > .text {
+
+ >.text {
grid-area: text;
color: @font-color-on-white;
max-width: 40em;
padding-right: 1rem;
- > p {
+
+ >p {
line-height: 1.5;
}
- > .relevant-items {
+
+ >.relevant-items {
display: flex;
justify-content: space-around;
- > div::before {
+
+ >div::before {
content: "âŒ";
padding-right: 0.5rem;
}
@@ -194,17 +221,21 @@ html {
grid-template-columns: auto;
grid-template-areas: "image" "text";
gap: 2rem;
+
&:nth-child(even) {
grid-template-columns: auto;
grid-template-areas: "image" "text";
- > .text {
+
+ >.text {
padding: 0;
}
}
- > img {
+
+ >img {
padding: 0;
}
- > .text {
+
+ >.text {
padding: 0;
text-align: center;
margin: 0 auto;
@@ -214,20 +245,20 @@ html {
#no-logging,
#no-tradeoff {
- > img {
+ >img {
width: 10em;
}
}
}
#how-it-works {
- @breakpoint-how-it-works: 420px;
+ @breakpoint-how-it-works: 440px;
background-color: @color-main;
color: white;
line-height: 1.5;
padding: 4rem 1rem;
- > h1 {
+ >h1 {
margin: 0;
padding: 0 0 4rem 0;
white-space: nowrap;
@@ -237,7 +268,7 @@ html {
font-size: clamp(2rem, 10vw, 3rem);
}
- > ol {
+ >ol {
display: grid;
row-gap: 3rem;
max-width: 1024px;
@@ -245,7 +276,7 @@ html {
list-style-type: none;
padding: 0;
- > li {
+ >li {
counter-increment: step-counter;
display: grid;
grid-template-rows: auto auto;
@@ -256,6 +287,7 @@ html {
grid-template-rows: auto auto auto;
grid-template-columns: auto;
justify-items: center;
+ text-align: center;
}
&::before {
@@ -271,19 +303,20 @@ html {
border-radius: 50%;
background-color: white;
color: @font-color-on-white;
+
@media (max-width: @breakpoint-how-it-works) {
grid-row: auto;
margin-bottom: 1rem;
}
}
- > h2 {
+ >h2 {
margin: 0;
}
}
}
- > #how-it-works-action {
+ >#how-it-works-action {
display: flex;
justify-content: center;
padding-top: 4rem;
@@ -294,4 +327,4 @@ html {
#continue,
#info-container {
display: none;
-}
+}
\ No newline at end of file
diff --git a/pass/public/styles/key.less b/pass/public/styles/key.less
index 37e697697902102ef96882a593b8f8398ad06423..c4e821ca8a66cd027378c6163a110ff9cc64852e 100644
--- a/pass/public/styles/key.less
+++ b/pass/public/styles/key.less
@@ -1,5 +1,6 @@
@max-width: 980px;
@key-breakpoint-1: 675px;
+@key-breakpoint-2: 430px;
main {
max-width: @max-width;
@@ -31,6 +32,7 @@ main {
display: flex;
padding: 0.5rem 1rem;
border-radius: 5px;
+
> input {
line-height: 1.5;
padding: 0.1rem 0.5rem;
@@ -45,12 +47,15 @@ main {
gap: 1rem;
margin-bottom: 17px;
justify-content: flex-end;
+
@media (max-width: 435px) {
display: grid;
grid-template-columns: 1fr;
+
.button {
width: auto;
}
+
> * {
display: grid;
justify-items: center;
@@ -63,26 +68,91 @@ main {
grid-area: amount;
max-width: 200px;
justify-self: center;
- padding: 2rem;
- display: grid;
+ align-self: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
> h3 {
font-size: 1.5rem;
margin: 0;
}
+
> div.amount {
font-size: 3rem;
- justify-self: center;
}
}
> #charge {
grid-area: charge;
+
+ > #store {
+ > p {
+ line-height: 1.5;
+ }
+ }
+
+ > #checkout {
+ #checkout-amount {
+ > a {
+ text-decoration: none;
+ color: inherit;
+ display: grid;
+ width: max-content;
+ grid-template-columns: 7em 3em;
+ grid-template-rows: 2.5em 2em;
+ height: max-content;
+ > .checkout-amount {
+ font-size: 2rem;
+ font-weight: bold;
+ line-height: 1;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ border-top-left-radius: 10px;
+ border: 1px solid rgb(255, 127, 0);
+ border-bottom: 0;
+ border-right: 0;
+ }
+ > .checkout-duration {
+ width: 100%;
+ height: 100%;
+ border-bottom-left-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid rgb(255, 127, 0);
+ border-top: 0;
+ border-right: 0;
+ }
+ > .checkout-cost {
+ grid-row: span 2;
+ justify-content: center;
+ background-color: rgb(255, 127, 0);
+ color: white;
+ font-size: 1.7rem;
+ align-items: center;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ border: 1px solid rgb(255, 127, 0);
+ border-left: 0;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-self: center;
+ }
+ }
+ }
+ }
}
@media (max-width: @key-breakpoint-1) {
padding: 0 1rem;
grid-template-rows: auto auto auto auto auto;
- grid-template-areas: "qr qr " "key key" "setting-url setting-url" "buttons buttons " "amount charge ";
+ grid-template-columns: auto auto;
+ grid-template-areas: "amount qr " "key key" "setting-url setting-url" "buttons buttons " "charge charge ";
> #key {
margin: 0;
@@ -97,5 +167,19 @@ main {
justify-content: center;
margin-bottom: 0;
}
+
+ > #charge {
+ > #store {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+ }
+
+ @media (max-width: @key-breakpoint-2) {
+ grid-template-rows: auto auto auto auto auto auto;
+ grid-template-columns: auto;
+ grid-template-areas: "qr" "key" "setting-url" "buttons" "amount" "charge";
}
}
diff --git a/pass/routes/key.js b/pass/routes/key.js
index c8ca4eeaf78a65c3e7956834dce83971a26a6942..43382dc7884fed81f07b9a2af3408bf6e1cb209a 100644
--- a/pass/routes/key.js
+++ b/pass/routes/key.js
@@ -9,7 +9,7 @@ router.get("/create", function (req, res, next) {
});
});
-router.get("/:key", async (req, res) => {
+router.get("/:key/:amount?", async (req, res) => {
let key = req.params.key;
let metager_url =
diff --git a/pass/views/key.ejs b/pass/views/key.ejs
index fe25176b30726370fe251c28e159c41a53a5c1a1..ef7e2d9e255b59409be179ac9ed81b58dc335a2f 100644
--- a/pass/views/key.ejs
+++ b/pass/views/key.ejs
@@ -1,28 +1,61 @@
<%- include('templates/page_header', {css: ["/styles/key.css"], js: []}); %>
-<img id="qr" src="<%= key.qr %> "></img>
-<div id="key"><%= key.key %> </div>
-<input id="setting-url" type="text" readonly value="<%= key.settings_url %>" />
-<div id="buttons">
- <button class="copy button" data-target="setting-url"><img src="/images/copy.svg" /><div>URL kopieren</div></button>
- <button class="share button" data-share_title="MetaGer Schlüssel" data-share_url_target="setting-url"><img src="/images/share.svg" /><div>Teilen</div></button>
- <a class="download button" href="<%= key.qr %>" target="_blank" download="metager_key.png"><img src="/images/download.svg" /><div>In Datei sichern</div></a>
-</div>
+ <img id="qr" src="<%= key.qr %> "></img>
+ <div id="key">
+ <%= key.key %>
+ </div>
+ <input id="setting-url" type="text" readonly value="<%= key.settings_url %>" />
+ <div id="buttons">
+ <button class="copy button" data-target="setting-url"><img src="/images/copy.svg" />
+ <div>URL kopieren</div>
+ </button>
+ <button class="share button" data-share_title="MetaGer Schlüssel" data-share_url_target="setting-url"><img
+ src="/images/share.svg" />
+ <div>Teilen</div>
+ </button>
+ <a class="download button" href="<%= key.qr %>" target="_blank" download="metager_key.png"><img
+ src="/images/download.svg" />
+ <div>In Datei sichern</div>
+ </a>
+ </div>
-<div id="amount">
- <h3>Gültig für</h3>
- <div class="amount">0</div>
- <div>Suchanfragen</div>
-</div>
+ <div id="amount">
+ <h3>Gültig für</h3>
+ <div class="amount">0</div>
+ <div>Suchanfragen</div>
+ </div>
-<div id="charge">
- <% if (created_new) { %>
- <div id="store">
- <p>Ihr MetaGer Schlüssel wurde erstellt. Bevor Sie </p>
+ <div id="charge">
+ <% if (created_new) { %>
+ <div id="store">
+ <h2>So gehts weiter:</h2>
+ <p>
+ Ihr MetaGer Schlüssel wurde erstellt und eingerichtet. Er muss lediglich noch aufgeladen werden.
+ Bitte stellen Sie vorher sicher, dass Sie sich den Schlüssel so abgespeichert haben, dass Sie ihn
+ eingeben können, falls die Einstellung in Ihrem Browser gelöscht wird. Dafür benötigen Sie entweder
+ den Schlüssel selbst, obige URL oder den QR-Code als Datei.
+ </p>
+ <a class="button" href="/key/<%= key.key %>">Schlüssel jetzt aufladen</a>
+ </div>
+ <% }else { %>
+ <div id="checkout">
+ <h1>Aufladen</h1>
+ <div id="charge-steps">
+ <div id="charge-steps-amount"></div>
+ </div>
+ <% if (typeof checkout === "undefined" || !checkout.amount) { %>
+ <div id="checkout-amount">
+ <a href="/key/<%= key.key %>/300">
+ <span class="checkout-amount">300</span>
+ <span class="checkout-cost">5€</span>
+ <span class="checkout-duration">~1 Monat</span>
+ </a>
+ </div>
+ <% } %>
+ </div>
+ <% } %>
</div>
- <% } %>
-</div>
-<%- include('templates/page_footer'); -%>
\ No newline at end of file
+ <%- include('templates/page_footer'); -%>
\ No newline at end of file
diff --git a/pass/views/templates/page_header.ejs b/pass/views/templates/page_header.ejs
index e494ff3c5bcc20422d80a29e98e27c25df10f4bc..a3562d0ee5be3ac74f5b29ae6c019e03741d7efa 100644
--- a/pass/views/templates/page_header.ejs
+++ b/pass/views/templates/page_header.ejs
@@ -1,27 +1,28 @@
<!DOCTYPE html>
<html>
+
<head>
<title>MetaGer - Pass</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='/styles/base.css' />
- <%_ if (typeof css !== 'undefined') { -%>
- <%_ css.forEach(css_file => { -%>
- <link rel="stylesheet" href="<%- css_file %>">
- <%_ }) _%>
- <%_ } _%>
- <script defer src="/js/base.js"></script>
- <%_ if (typeof js !== 'undefined') { -%>
- <%_ js.forEach(js_file => { -%>
- <script src="<%- js_file %>" defer></script>
- <%_ }) _%>
- <%_ } _%>
+ <%_ if (typeof css !=='undefined' ) { -%>
+ <%_ css.forEach(css_file=> { -%>
+ <link rel="stylesheet" href="<%- css_file %>">
+ <%_ }) _%>
+ <%_ } _%>
+ <script defer src="/js/base.js"></script>
+ <%_ if (typeof js !=='undefined' ) { -%>
+ <%_ js.forEach(js_file=> { -%>
+ <script src="<%- js_file %>" defer></script>
+ <%_ }) _%>
+ <%_ } _%>
</head>
+
<body>
<nav>
<div id="page-logo">
<a href="#">
<img src="/images/metager-schloss-orange.svg" alt="MetaGer Schloss">
- <h1>Schlüssel</h1>
</a>
</div>
<input type="checkbox" name="nav-opener" id="nav-opener" aria-hidden="true">