amount selection completed

pass/public/styles/base.less

@@ -43,6 +43,7 @@ html {
     margin: 0;
     padding: 0;
     min-width: @body-scroll-break-point;
+    color: @font-color-on-white;
   }
 }
 
@@ -77,7 +78,8 @@ button {
   }
 
   &.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 {
@@ -114,7 +116,7 @@ nav {
   position: relative;
   align-items: center;
   gap: 0 2rem;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
 
   #page-logo a {
     display: flex;
@@ -123,17 +125,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;
   }
 
@@ -151,7 +153,7 @@ nav {
         flex-grow: 1;
       }
 
-      >a {
+      > a {
         text-decoration: none;
         color: inherit;
         white-space: nowrap;
@@ -170,31 +172,31 @@ 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;
 
@@ -217,7 +219,7 @@ nav {
           }
         }
 
-        ~ul {
+        ~ ul {
           max-height: 500px;
           padding: 1rem 0;
           visibility: visible;
@@ -225,7 +227,7 @@ nav {
       }
     }
 
-    >label[for="nav-opener"] {
+    > label[for="nav-opener"] {
       --navbar-opener-color: white;
       display: flex;
       align-items: center;
@@ -234,10 +236,10 @@ nav {
       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;
@@ -248,12 +250,12 @@ nav {
   }
 
   @media (max-width: @nav-items-break-point) {
-    >ul {
+    > ul {
       flex-direction: column;
       width: 100%;
       gap: 1rem;
 
-      >li {
+      > li {
         text-align: center;
 
         &.whitespace {
@@ -262,4 +264,4 @@ nav {
       }
     }
   }
-}
\ No newline at end of file
+}

pass/public/styles/key.less

+@import "./misc/vars.less";
+
 @max-width: 980px;
-@key-breakpoint-1: 675px;
+@key-breakpoint-1: 770px;
 @key-breakpoint-2: 430px;
 
 main {
@@ -68,7 +70,6 @@ main {
     grid-area: amount;
     max-width: 200px;
     justify-self: center;
-    align-self: center;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -93,13 +94,25 @@ main {
     }
 
     > #checkout {
+      > h2 {
+        margin: 0 0 1rem;
+        text-align: center;
+        border-bottom: 1px solid @color-main;
+      }
       #checkout-amount {
+        @checkout-amount-breakpoint-1: 800px;
+        @checkout-amount-breakpoint-2: 470px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 1rem;
+        justify-items: center;
+        align-items: center;
         > a {
           text-decoration: none;
           color: inherit;
           display: grid;
           width: max-content;
-          grid-template-columns: 7em 3em;
+          grid-template-columns: 7em 3.5em;
           grid-template-rows: 2.5em 2em;
           height: max-content;
           > .checkout-amount {
@@ -144,6 +157,16 @@ main {
             align-self: center;
           }
         }
+        @media (max-width: @checkout-amount-breakpoint-1) {
+          grid-template-columns: 1fr 1fr;
+        }
+        @media (max-width: @checkout-amount-breakpoint-2) {
+          grid-template-columns: 1fr;
+          > a {
+            width: 100%;
+            grid-template-columns: 1fr 3em;
+          }
+        }
       }
     }
   }
@@ -168,6 +191,10 @@ main {
       margin-bottom: 0;
     }
 
+    > #amount {
+      align-self: center;
+    }
+
     > #charge {
       > #store {
         display: flex;

pass/views/key.ejs

@@ -39,7 +39,7 @@
         </div>
         <% }else { %>
         <div id="checkout">
-            <h1>Aufladen</h1>
+            <h2>Suchanfragen auffüllen</h2>
             <div id="charge-steps">
                 <div id="charge-steps-amount"></div>
             </div>
@@ -48,9 +48,35 @@
                 <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>
+                    <span class="checkout-duration">~1 Monat*</span>
+                </a>
+                <a href="/key/<%= key.key %>/600">
+                    <span class="checkout-amount">600</span>
+                    <span class="checkout-cost">10€</span>
+                    <span class="checkout-duration">~2 Monate*</span>
+                </a>
+                <a href="/key/<%= key.key %>/900">
+                    <span class="checkout-amount">900</span>
+                    <span class="checkout-cost">15€</span>
+                    <span class="checkout-duration">~3 Monate*</span>
+                </a>
+                <a href="/key/<%= key.key %>/1200">
+                    <span class="checkout-amount">1200</span>
+                    <span class="checkout-cost">20€</span>
+                    <span class="checkout-duration">~4 Monate*</span>
+                </a>
+                <a href="/key/<%= key.key %>/1800">
+                    <span class="checkout-amount">1800</span>
+                    <span class="checkout-cost">30€</span>
+                    <span class="checkout-duration">~6 Monate*</span>
+                </a>
+                <a href="/key/<%= key.key %>/3600">
+                    <span class="checkout-amount">3600</span>
+                    <span class="checkout-cost">60€</span>
+                    <span class="checkout-duration">~1 Jahr*</span>
                 </a>
             </div>
+            <p>* Die angegebenen Zeiträume sind Schätzungen, die auf unseren Erfahrungswerten basieren und sollen einen Anhaltspunkt geben, wie viele Suchanfragen benötigt werden.</p>
             <% } %>
         </div>
         <% } %>