From 7d8cce17a1e8b4235d61db7913567b13876149ad Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Thu, 24 Nov 2022 16:12:36 +0100
Subject: [PATCH] added hero to front page
---
pass/public/images/icon-lupe.svg | 66 ++++++++++++
pass/public/images/key-icon.svg | 66 ++++++++++++
pass/public/images/key-verified.svg | 53 ++++++++++
pass/public/images/metager.svg | 2 +
pass/public/styles/base.less | 3 +
pass/public/styles/index.less | 150 +++++++++++++++++++++++++++
pass/public/styles/misc/vars.less | 2 -
pass/views/index.ejs | 28 ++++-
pass/views/templates/page_footer.ejs | 1 +
pass/views/templates/page_header.ejs | 3 +-
10 files changed, 368 insertions(+), 6 deletions(-)
create mode 100644 pass/public/images/icon-lupe.svg
create mode 100644 pass/public/images/key-icon.svg
create mode 100644 pass/public/images/key-verified.svg
create mode 100644 pass/public/images/metager.svg
diff --git a/pass/public/images/icon-lupe.svg b/pass/public/images/icon-lupe.svg
new file mode 100644
index 0000000..0188dbd
--- /dev/null
+++ b/pass/public/images/icon-lupe.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ id="svg1729"
+ version="1.1"
+ viewBox="0 0 24.410983 23.632021"
+ height="89.317871"
+ width="92.261986"
+ sodipodi:docname="icon-lupe.svg"
+ inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1848"
+ inkscape:window-height="1016"
+ id="namedview7"
+ showgrid="false"
+ inkscape:zoom="2.6422484"
+ inkscape:cx="-31.832911"
+ inkscape:cy="43.145074"
+ inkscape:window-x="1992"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg1729" />
+ <defs
+ id="defs1723" />
+ <metadata
+ id="metadata1726">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <circle
+ transform="rotate(15.366798)"
+ r="7.3626533"
+ cy="6.1155853"
+ cx="10.750866"
+ id="path2298"
+ style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.767277;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <rect
+ transform="matrix(0.66463899,-0.74716465,0.74301394,0.66927594,0,0)"
+ y="19.314386"
+ x="-2.0791028"
+ height="11.882498"
+ width="2.1384423"
+ id="rect2300"
+ style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.69334972;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+</svg>
diff --git a/pass/public/images/key-icon.svg b/pass/public/images/key-icon.svg
new file mode 100644
index 0000000..85cd526
--- /dev/null
+++ b/pass/public/images/key-icon.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ id="svg8"
+ version="1.1"
+ viewBox="0 0 20.097663 20.286787"
+ height="76.674469"
+ width="75.959671"
+ sodipodi:docname="key-icon.svg"
+ inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)">
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1848"
+ inkscape:window-height="1016"
+ id="namedview10"
+ showgrid="false"
+ inkscape:zoom="3.0779476"
+ inkscape:cx="-95.875593"
+ inkscape:cy="35.738098"
+ inkscape:window-x="1992"
+ inkscape:window-y="27"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg8" />
+ <defs
+ id="defs2">
+ <linearGradient
+ osb:paint="solid"
+ id="linearGradient873">
+ <stop
+ id="stop871"
+ offset="0"
+ style="stop-color:#ff0000;stop-opacity:1;" />
+ </linearGradient>
+ </defs>
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.09970184;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 18.548841,20.021815 -1.423824,-0.0016 V 19.267543 18.51486 h -0.807962 -0.807963 l -0.0027,-0.808963 -0.0027,-0.808962 -0.864514,-0.0025 -0.864514,-0.0025 -3.106893,-3.078012 -3.106948,-3.078087 -0.6161008,0.192735 C 5.369567,11.421386 3.8428529,11.310566 2.4979419,10.605831 1.9507919,10.319124 1.8313133,10.222373 1.2635892,9.6062807 0.76770822,9.0681533 0.58520984,8.815025 0.39904078,8.4071476 -0.40413009,6.6474745 -0.21795172,4.5496725 0.89050402,2.8694977 2.5503663,0.35351264 5.808419,-0.61871048 8.3260753,0.65067571 8.8445141,0.91207017 9.0326166,1.0544137 9.5795476,1.5992191 10.139883,2.1573327 10.260718,2.3179174 10.514507,2.8412454 11.16255,4.1775219 11.26177,5.6895827 10.791983,7.0698361 L 10.643076,7.507329 13.3539,10.218376 c 1.490968,1.491061 3.578542,3.611855 4.639058,4.712871 l 1.928207,2.001851 0.06318,1.507753 c 0.03477,0.829238 0.04634,1.524573 0.02576,1.545164 -0.02059,0.02059 -0.67816,0.03674 -1.461263,0.03585 z M 13.775196,13.655162 C 9.3166978,9.1966642 9.2785429,9.1603557 9.1677711,9.2711278 c -0.11077,0.1107693 -0.074463,0.148927 4.3840349,4.6074252 4.458499,4.458497 4.496653,4.494807 4.607426,4.384035 0.11077,-0.110771 0.07446,-0.148925 -4.384036,-4.607426 z M 6.559274,3.5432717 C 6.5241824,3.2494845 6.2131384,2.8922974 5.9638794,2.8595568 5.6099197,2.8130602 5.4524596,2.9338711 4.0856398,4.3006949 2.7188201,5.667514 2.5980035,5.8249757 2.644501,6.1789343 2.6772445,6.4281918 3.0344321,6.7392357 3.3282168,6.7743292 l 0.2628987,0.031399 1.499778,-1.4997774 1.4997773,-1.4997773 z"
+ id="path937"
+ inkscape:connector-curvature="0" />
+</svg>
diff --git a/pass/public/images/key-verified.svg b/pass/public/images/key-verified.svg
new file mode 100644
index 0000000..1b519b0
--- /dev/null
+++ b/pass/public/images/key-verified.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ id="svg8"
+ version="1.1"
+ viewBox="0 0 20.2868 22.110937"
+ height="83.568893"
+ width="76.674522">
+ <defs
+ id="defs2">
+ <linearGradient
+ osb:paint="solid"
+ id="linearGradient873">
+ <stop
+ id="stop871"
+ offset="0"
+ style="stop-color:#ff0000;stop-opacity:1;" />
+ </linearGradient>
+ </defs>
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ transform="translate(-3.4184229,-3.3590331)"
+ id="layer1">
+ <g
+ transform="matrix(0.94051295,0,0,0.94051295,12.688618,13.321448)"
+ id="g951">
+ <path
+ style="fill:#888888;fill-opacity:1;stroke:none;stroke-width:0.106914;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 10.135492,10.776251 -1.5268189,-0.0017 -1e-6,-0.8071322 V 9.1602915 h -0.866408 l -0.866407,7e-7 -0.0029,-0.86748 -0.0029,-0.86748 -0.92705,-0.00273 -0.927051,-0.00273 -3.331638,-3.300666 -3.331637,-3.30066589 -0.660668,0.20667649 c -1.689156,0.5284253 -3.326308,0.4095897 -4.768506,-0.34612369 -0.58673,-0.3074467 -0.714851,-0.4111963 -1.323643,-1.0718548 -0.531751,-0.5770545 -0.727451,-0.84849281 -0.927087,-1.28587511 -0.8612711,-1.8869634 -0.661624,-4.1365143 0.527014,-5.9382279 1.779932,-2.6979853 5.273663,-3.7405363 7.97344004,-2.379325 0.555941,0.280302 0.75765,0.432943 1.344145,1.017158 0.60087796,0.598474 0.73045396,0.770674 1.00260096,1.331858 0.694921,1.4329399 0.801318,3.0543782 0.297548,4.5344753 l -0.159678,0.4691404 2.906917,2.90715631 c 1.59882,1.59891999 3.837403,3.87312629 4.974634,5.05378699 l 2.0676879,2.1466589 0.06775,1.6168194 c 0.03729,0.8892229 0.04971,1.6348564 0.02762,1.6569384 -0.02208,0.02208 -0.727216,0.03938 -1.566968,0.03845 z M 5.0165351,3.9490521 C 0.23552214,-0.83196119 0.19460714,-0.87089619 0.07582214,-0.75211149 c -0.118783,0.1187827 -0.07985,0.1597001 4.70116396,4.94071299 4.781013,4.7810138 4.821929,4.8199492 4.940713,4.7011644 0.118784,-0.1187833 0.07985,-0.1596979 -4.701164,-4.9407138 z m -7.737901,-10.8433558 c -0.03763,-0.315039 -0.371174,-0.698064 -0.638464,-0.733174 -0.379564,-0.04986 -0.548415,0.07969 -2.014106,1.5453861 -1.465692,1.4656916 -1.595248,1.6345431 -1.545387,2.0141068 0.03511,0.2672877 0.418138,0.6008314 0.733174,0.6384639 l 0.281916,0.033674 1.608268,-1.6082677 1.608267,-1.608267 z"
+ id="path937" />
+ <path
+ id="path831"
+ d="M -8.3687574,8.2904687 -5.4693718,11.491948 0.40944923,4.5325484"
+ style="fill:none;stroke:#00ff00;stroke-width:1.87663555;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ </g>
+</svg>
diff --git a/pass/public/images/metager.svg b/pass/public/images/metager.svg
new file mode 100644
index 0000000..e6e6eb4
--- /dev/null
+++ b/pass/public/images/metager.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="813.33" height="142.67" version="1.1" viewBox="0 0 813.33331 142.66667" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><g transform="matrix(1.3333 0 0 -1.3333 0 142.67)"><g transform="scale(.1)" fill="#f47216"><path d="m8.1133 805.72v-798.85h110.19v688.66h422.38v-688.66h107.12v688.66h264.75c104.06 0 156.1-55.09 156.1-163.75v-524.91h111.71v543.28c0 169.87-82.64 255.57-246.39 255.57h-925.87"/><path d="m2074.1 6.8711v108.66h-456.05c-101 0-151.5 53.563-151.5 157.63v273.93c0 108.65 52.04 149.98 156.1 149.98h243.32c82.64 0 125.49-41.32 125.49-122.43v-15.305c0-70.391-41.32-105.59-123.96-105.59h-325.14v-94.886l354.22 3e-3c136.2 0 202.01 59.692 202.01 177.53v58.152c0 140.78-70.4 211.18-212.72 211.18h-281.59c-165.28 0-249.45-85.699-249.45-255.57v-287.7c0-169.87 84.17-255.57 249.45-255.57h469.82"/><path d="m2654.1 115.53h-21.53c-98.36 0-148.88 50.86-151.4 149.73v431.81h172.93v108.65h-172.93v73.277h0.16v112.79c0 48.231-19.15 74.091-69.52 74.091h-42.19v-113.38h-0.17v-146.78h-149.97v-108.65h149.97v-146.92l-0.1 3e-3v-287.7c0-3.265 0.04-6.492 0.1-9.695v-19.105h0.77c9.22-150.7 92.92-226.77 248.57-226.77h35.31v108.66"/><path d="m2828 805.72v-230.32h69.31c27.25 0 40.87 14.426 40.87 42.879v78.789h345.86c101.01 0 151.51-53.668 151.51-157.63v-85.7h-497.37l0.01-52.015c0-28.313-13.75-42.871-40.87-42.871h-93.81v-140.79c0-140.79 70.4-211.19 212.72-211.19h281.59c165.27 0 249.45 85.699 249.45 255.57v287.7c0 169.87-84.18 255.57-249.45 255.57zm289.79-446.87h74.76c50.36 0 69.52-25.856 69.52-74.098v-112.79c0-38.305-19.21-58.168-56.76-58.168h-38.57c-32.53 0-48.95 19.25-48.95 57.465v187.59"/><path d="m3966.6 1065.9c-166.8 0-249.45-84.169-249.45-254.03l0.01-550.94c0-169.86 82.64-254.04 249.45-254.04h344.33c149.97 0 224.96 74.988 224.96 226.5v342.03h-425.45v-94.878h316.79v-225.73c0-93.34-45.92-139.26-139.26-139.26h-299.95c-102.52 0-154.56 52.028-154.56 157.62l-0.01 520.33c0 105.6 52.03 157.62 154.57 157.62h521.85v114.78h-543.28"/><path d="m5875 805.72c-166.81 0-249.45-85.699-249.45-255.82v-543.02h111.72v524.66c0 108.91 53.56 164 157.62 164h195.89v110.19h-215.78"/><path d="m5426.6 6.8711v108.66h-456.05c-101 0-151.5 53.563-151.5 157.63v273.93c0 108.65 52.03 149.98 156.09 149.98h243.33c82.64 0 125.49-41.32 125.49-122.43v-15.305c0-70.391-41.32-105.59-123.96-105.59h-325.14v-94.886l354.22 3e-3c136.2 0 202.01 59.692 202.01 177.53v58.152c0 140.78-70.4 211.18-212.72 211.18h-281.59c-165.28 0-249.45-85.699-249.45-255.57v-287.7c0-169.87 84.17-255.57 249.45-255.57h469.82"/></g></g></svg>
diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less
index 9f900c9..05d635c 100644
--- a/pass/public/styles/base.less
+++ b/pass/public/styles/base.less
@@ -1,5 +1,8 @@
@import "./misc/vars.less";
+@logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo
+@nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row
+
@font-face {
font-family: "LiberationSans";
src: local("Liberation Sans"),
diff --git a/pass/public/styles/index.less b/pass/public/styles/index.less
index 793e69d..0c78d1c 100644
--- a/pass/public/styles/index.less
+++ b/pass/public/styles/index.less
@@ -1,3 +1,153 @@
+@import "./misc/vars.less";
+
+@breakpoint-hero-medium: 800px;
+@breakpoint-hero-small: 500px;
+
+#hero {
+ color: white;
+ background-color: @color-main;
+ padding: 3rem;
+ > .container {
+ max-width: 850px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 20em auto;
+ grid-template-rows: auto auto auto;
+ grid-template-areas: "heading search-logo" "text list" "call-to-action list";
+
+ > h1 {
+ grid-area: heading;
+ margin: 0;
+ text-align: right;
+ }
+ > p {
+ margin: 0;
+ grid-area: text;
+ text-align: right;
+ }
+ > ul {
+ grid-area: list;
+ margin: 0;
+ list-style-type: none;
+ padding: 0;
+ text-align: center;
+ display: grid;
+ grid-template: "1fr 1fr" "1fr 1fr";
+ > li::before {
+ content: "✓";
+ padding-right: 0.5rem;
+ color: #3af13a;
+ }
+ }
+
+ > div.search-logo {
+ grid-area: search-logo;
+ align-self: start;
+ justify-self: center;
+ text-align: center;
+ > .metager-logo {
+ grid-area: metager-logo;
+ width: 15em;
+ max-width: calc(100% - 0.5rem);
+ align-self: end;
+ justify-self: center;
+ filter: brightness(0.4);
+ margin-bottom: 1rem;
+ }
+ > .searchbar {
+ display: grid;
+ grid-template-columns: max-content 1fr max-content;
+ background-color: white;
+ border: 1px solid #585858;
+ border-radius: 10px;
+ overflow: hidden;
+ > 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 {
+ background: inherit;
+ border: 0;
+ border-left: 1px solid #777;
+ border-right: 1px solid #777;
+ margin: 0.5rem 0;
+ padding: 0 0.5rem;
+ }
+ }
+ }
+ > a {
+ grid-area: call-to-action;
+ align-self: center;
+ justify-self: end;
+ display: block;
+ border: 1px solid #777;
+ padding: 1rem;
+ color: white;
+ text-decoration: none;
+ background-color: #3a3af9;
+ margin: 1rem 0 1rem 1rem;
+ }
+
+ @media (max-width: @breakpoint-hero-medium) {
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto auto auto auto;
+ grid-template-areas: "heading heading" "text list" "call-to-action list" "search-logo search-logo";
+
+ > h1 {
+ text-align: center;
+ }
+ > ul {
+ grid-template: "1fr" "1fr" "1fr" "1fr";
+ padding: 1rem;
+ > li {
+ align-self: center;
+ }
+ }
+ > p {
+ line-height: 1.5;
+ text-align: right;
+ padding: 1rem 0 1rem 1rem;
+ }
+
+ > div.search-logo {
+ padding: 4rem 1rem 1rem 1rem;
+ }
+ }
+ }
+ @media (max-width: @breakpoint-hero-small) {
+ padding: 0.5rem;
+ > .container {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto auto auto auto auto;
+ grid-template-areas: "heading" "text" "list" "call-to-action " "search-logo";
+
+ > p {
+ text-align: center;
+ padding: 1rem 0;
+ }
+ > div.search-logo {
+ padding: 2rem 0;
+ }
+ > ul {
+ gap: 0.5rem;
+ padding: 1rem 0;
+ }
+ > a {
+ justify-self: center;
+ margin: 1rem 0;
+ }
+ }
+ }
+}
+
#offers {
display: flex;
diff --git a/pass/public/styles/misc/vars.less b/pass/public/styles/misc/vars.less
index 825c229..da222c5 100644
--- a/pass/public/styles/misc/vars.less
+++ b/pass/public/styles/misc/vars.less
@@ -3,5 +3,3 @@
@color-main-font-color: white;
@body-scroll-break-point: 320px;
-@logo-break-point: 720px; // Breakpoint when nav items won't fit besides logo
-@nav-items-break-point: 560px; // Breakpoint when nav items won't fit into their own row
diff --git a/pass/views/index.ejs b/pass/views/index.ejs
index ec9df6a..9290042 100644
--- a/pass/views/index.ejs
+++ b/pass/views/index.ejs
@@ -1,7 +1,29 @@
<%- include('templates/page_header', {css: ['/styles/index.css'], js: ['/js/index.js']}); %>
- <p>
- Wählen Sie aus, wie viele Suchen Sie kaufen möchten.
- </p>
+ <div id="hero">
+ <div class="container">
+ <h1>Ihr Zugang zum maximalen Datenschutz bei der Suche</h1>
+ <p>Mit MetaGer-Pass können Sie die Internetsuche so genießen, wie sie immer sein sollte:</p>
+ <ul>
+ <li>Ohne Werbung</li>
+ <li>Ohne Tracking Links</li>
+ <li>Ohne Logging</li>
+ <li>Ohne Kompromisse</li>
+ </ul>
+ <div class="search-logo">
+ <img class="metager-logo" src="/images/metager.svg" alt="">
+ <div class="searchbar">
+ <button>
+ <img src="/images/key-verified.svg" alt="">
+ </button>
+ <input type="text" name="eingabe" id="eingabe" value="Anonym im Internet" disabled>
+ <button>
+ <img src="/images/icon-lupe.svg" alt="Suchen">
+ </button>
+ </div>
+ </div>
+ <a class="call-to-action" href="#">So funktioniert es</a>
+ </div>
+ </div>
<div id="offers">
<form class="offer" action="/checkout">
<input type="hidden" name="amount" value="0">
diff --git a/pass/views/templates/page_footer.ejs b/pass/views/templates/page_footer.ejs
index 691287b..d378fbe 100644
--- a/pass/views/templates/page_footer.ejs
+++ b/pass/views/templates/page_footer.ejs
@@ -1,2 +1,3 @@
+</main>
</body>
</html>
\ No newline at end of file
diff --git a/pass/views/templates/page_header.ejs b/pass/views/templates/page_header.ejs
index f620a86..fb787aa 100644
--- a/pass/views/templates/page_header.ejs
+++ b/pass/views/templates/page_header.ejs
@@ -33,4 +33,5 @@
<li><a href="#">Schlüssel verwalten</a></li>
<li><a href="#">Starten</a></li>
</ul>
- </nav>
\ No newline at end of file
+ </nav>
+ <main>
\ No newline at end of file
--
GitLab