diff --git a/pass/public/images/icon-lupe.svg b/pass/public/images/icon-lupe.svg new file mode 100644 index 0000000000000000000000000000000000000000..0188dbdc01993d18cf0b2ccc6684be699461e692 --- /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 0000000000000000000000000000000000000000..85cd526aad1c31c24b398c7c2215a541278cdcce --- /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 0000000000000000000000000000000000000000..1b519b0ad11d858ce3b48e04526fe1bcf3bd89b8 --- /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 0000000000000000000000000000000000000000..e6e6eb468de13a4f4a44ded9aa6919f5ba0eed59 --- /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 9f900c9aa5f4ca0d047f594d95daf24568c5e800..05d635c8a0d92fdc58f7d7aa9c58b6ca631294e3 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 793e69d6ab84f509b439ed1d83b1f6f526a70049..0c78d1cd598004189c27718f9ea43eb4ad28f48f 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 825c2290aee22e59581d2f847b89d4001eaec7fe..da222c5a4e687128ca9e4def54e16019d8ec09d6 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 ec9df6a9f12fdcf00c5ec7f5081922ae5fbd8164..9290042c80fe71542239d8d3c253b183bc6224e4 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 691287b6e353f56675fffd37fe96ead589956f33..d378fbee81f0bdebdef84a797134fdad28bfd3ac 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 f620a862d9d75d3af50f3b1cda644754cc66a40d..fb787aa1789e5b7c9de4fa25fb50d75137d69b61 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