diff --git a/pass/lang/de/index.json b/pass/lang/de/index.json index f5f8ff91179988a8533a15b3b39f2942a0e99af7..04e25cddf3e957d6ee1f5e305530408a460d46cf 100644 --- a/pass/lang/de/index.json +++ b/pass/lang/de/index.json @@ -20,7 +20,7 @@ }, "logging": { "heading": "Ohne Logging", - "description": "Bei Ihren Internetsuchen fallen automatisch viele Daten an. Die wenigen Daten, die wir dabei traditionell loggen müssen, dienen der Spambekämpfung. Ein MetaGer Schlüssel macht aber auch das unnötig.", + "description": "Bei Ihren Internetsuchen fallen automatisch viele Daten an. Die wenigen Daten, die wir dabei traditionell loggen müssen, dienen der Spambekämpfung. Ein MetaGer Schlüssel macht aber auch das unnötig. Auch Captchas werden Ihnen nicht mehr begegnen.", "logging": "Logging" }, "compromise": { @@ -37,15 +37,15 @@ "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": "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": "Token aufladen", + "description": "Ihr Schlüssel wird durch eine einmalige <a href=\"{{linkCost}}\" target=\"_blank\">Zahlung</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ügbaren Quellen. Ein Guthaben von 500 Token (5€) reicht in der Regel für annähernd 2 Monate." }, { "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": "Werbefreie Suche jetzt einrichten", + "start": "MetaGer Schlüssel jetzt erstellen!", "login": "Ich habe bereits einen Schlüssel" } } diff --git a/pass/lang/de/pageheader.json b/pass/lang/de/pageheader.json index cf266757808995848b1dff54f55ca85f8d556ded..c1a9b9b03ef47aea1fd64e6a5a40c29a354f9706 100644 --- a/pass/lang/de/pageheader.json +++ b/pass/lang/de/pageheader.json @@ -14,5 +14,9 @@ "footer": { "impress": "Impressum", "privacy": "Datenschutz" + }, + "chat": { + "title": "Chatte mit uns!", + "button": "Fragen? Wir helfen gerne!" } } diff --git a/pass/package-lock.json b/pass/package-lock.json index 5b3faea0a25dd67bb1a01fb4129bfcfba82514b3..c542ff306f3b0ec61be13516924a6141a2a17126 100644 --- a/pass/package-lock.json +++ b/pass/package-lock.json @@ -28,6 +28,7 @@ "ioredis": "^5.2.4", "jimp": "^0.22.4", "jose": "^4.11.1", + "jquery": "^3.6.0", "knex": "^2.4.2", "less-middleware": "~2.2.1", "morgan": "~1.9.1", @@ -4017,6 +4018,11 @@ "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.4.tgz", "integrity": "sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==" }, + "node_modules/jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==" + }, "node_modules/js-sha256": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz", diff --git a/pass/package.json b/pass/package.json index 87e894274eda68343dfb727aba37c9e97bd2e76c..9423e28ec3ae51605c2c89ab0dff7732b45b6f4f 100644 --- a/pass/package.json +++ b/pass/package.json @@ -27,6 +27,7 @@ "ioredis": "^5.2.4", "jimp": "^0.22.4", "jose": "^4.11.1", + "jquery": "^3.6.0", "knex": "^2.4.2", "less-middleware": "~2.2.1", "morgan": "~1.9.1", @@ -43,4 +44,4 @@ "devDependencies": { "nodemon": "^2.0.20" } -} +} \ No newline at end of file diff --git a/pass/public/images/adfree.svg b/pass/public/images/adfree.svg new file mode 100644 index 0000000000000000000000000000000000000000..7e8376749923534639d0515163095364fd4778fa --- /dev/null +++ b/pass/public/images/adfree.svg @@ -0,0 +1,93 @@ +<?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" + width="163.1171mm" + height="36.803467mm" + viewBox="0 0 163.1171 36.803467" + version="1.1" + id="svg8" + sodipodi:docname="adfree.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"> + <defs + id="defs2" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="2.8" + inkscape:cx="187.53184" + inkscape:cy="105.63327" + inkscape:document-units="mm" + inkscape:current-layer="g845" + inkscape:document-rotation="0" + showgrid="false" + fit-margin-top="0" + fit-margin-left="0" + fit-margin-right="0" + fit-margin-bottom="0" + inkscape:window-width="2560" + inkscape:window-height="1361" + inkscape:window-x="2560" + inkscape:window-y="480" + inkscape:window-maximized="1" /> + <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 + inkscape:label="Ebene 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(-30.615119,-104.07211)"> + <rect + style="fill:#0d9c0d;fill-opacity:0;stroke:#666666;stroke-width:0.753;stroke-linejoin:bevel;stroke-miterlimit:5.1;stroke-dasharray:none;stroke-opacity:1;image-rendering:auto" + id="rect833" + width="162.36372" + height="35.337784" + x="30.991806" + y="104.80495" + ry="2.7937467" /> + <text + xml:space="preserve" + style="font-style:normal;font-weight:normal;font-size:25.4px;line-height:1.25;font-family:sans-serif;fill:#666666;fill-opacity:1;stroke:none;stroke-width:0.264583;" + x="61.634117" + y="129.04088" + id="text837"><tspan + sodipodi:role="line" + id="tspan835" + x="61.634117" + y="129.04088" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25.4px;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';fill:#666666;fill-opacity:1;stroke-width:0.264583;">Werbung</tspan></text> + <g + id="g845" + style="stroke-width:1.5;stroke-miterlimit:5.0999999;stroke-dasharray:none"> + <path + style="fill:none;stroke:#bf4040;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:5.1;stroke-dasharray:none;stroke-opacity:1" + d="m 33.915119,137.07211 c 156.700001,-29.5 0,0 156.700001,-29.5" + id="path839" + sodipodi:nodetypes="cc" /> + <path + style="fill:none;stroke:#bf4040;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:5.0999999;stroke-dasharray:none;stroke-opacity:1" + d="m 33.915119,107.57211 18.590058,3.49972 138.109943,26.00028" + id="path841" + sodipodi:nodetypes="ccc" /> + </g> + </g> +</svg> diff --git a/pass/public/images/chat.ai b/pass/public/images/chat.ai new file mode 100644 index 0000000000000000000000000000000000000000..a6792448c158afe696266105068aff3f0a32b967 Binary files /dev/null and b/pass/public/images/chat.ai differ diff --git a/pass/public/images/chat.svg b/pass/public/images/chat.svg new file mode 100644 index 0000000000000000000000000000000000000000..da957159286b1afafae0b14ba7882b1e8394a8ca --- /dev/null +++ b/pass/public/images/chat.svg @@ -0,0 +1,90 @@ +<?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" + version="1.1" + id="svg2" + xml:space="preserve" + width="339.54401" + height="296" + viewBox="0 0 339.544 296" + sodipodi:docname="chat.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata + id="metadata8"><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><defs + id="defs6"><radialGradient + fx="0" + fy="0" + cx="0" + cy="0" + r="1" + gradientUnits="userSpaceOnUse" + gradientTransform="matrix(260,0,0,-260,260,260)" + spreadMethod="pad" + id="radialGradient28"><stop + style="stop-opacity:1;stop-color:#ffffff" + offset="0" + id="stop24" /><stop + style="stop-opacity:1;stop-color:#f1f1f2" + offset="1" + id="stop26" /></radialGradient><clipPath + clipPathUnits="userSpaceOnUse" + id="clipPath38"><path + d="M 0,520 H 520 V 0 H 0 Z" + id="path36" /></clipPath></defs><sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="2560" + inkscape:window-height="1361" + id="namedview4" + showgrid="false" + fit-margin-top="0" + fit-margin-left="0" + fit-margin-right="0" + fit-margin-bottom="0" + inkscape:zoom="1.03125" + inkscape:cx="169.77186" + inkscape:cy="148.00051" + inkscape:window-x="2560" + inkscape:window-y="480" + inkscape:window-maximized="1" + inkscape:current-layer="g10" /><g + id="g10" + inkscape:groupmode="layer" + inkscape:label="chat" + transform="matrix(1.3333333,0,0,-1.3333333,-176.8948,494.66719)"><g + id="g32"><g + id="g34" + clip-path="url(#clipPath38)"><g + id="g40" + transform="translate(377.3291,164.5264)"><path + d="m 0,0 -66.67,54.349 c -0.893,0.727 -2.008,1.125 -3.159,1.125 h -164.829 v 141 H 0 Z m 5,206.474 h -244.658 c -2.761,0 -5,-2.239 -5,-5 v -151 c 0,-2.762 2.239,-5 5,-5 h 168.05 L 1.841,-14.401 c 0.91,-0.743 2.029,-1.125 3.16,-1.125 0.728,0 1.461,0.159 2.145,0.483 1.743,0.828 2.854,2.586 2.854,4.517 v 212 c 0,2.761 -2.238,5 -5,5" + style="fill:#414142;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path42" /></g><g + id="g44" + transform="translate(176.2915,272.1665)"><path + d="m 0,0 h 29.417 c 2.186,0 3.958,1.772 3.958,3.958 v 29.417 c 0,2.187 -1.772,3.958 -3.958,3.958 H 0 c -2.186,0 -3.958,-1.771 -3.958,-3.958 V 3.958 C -3.958,1.772 -2.186,0 0,0" + style="fill:#414142;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path46" /></g><g + id="g48" + transform="translate(241.7915,272.1665)"><path + d="m 0,0 h 29.417 c 2.186,0 3.958,1.772 3.958,3.958 v 29.417 c 0,2.187 -1.772,3.958 -3.958,3.958 H 0 c -2.186,0 -3.958,-1.771 -3.958,-3.958 V 3.958 C -3.958,1.772 -2.186,0 0,0" + style="fill:#414142;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path50" /></g><g + id="g52" + transform="translate(307.292,272.1665)"><path + d="m 0,0 h 29.416 c 2.187,0 3.959,1.772 3.959,3.958 v 29.417 c 0,2.187 -1.772,3.958 -3.959,3.958 H 0 c -2.187,0 -3.959,-1.771 -3.959,-3.958 V 3.958 C -3.959,1.772 -2.187,0 0,0" + style="fill:#414142;fill-opacity:1;fill-rule:nonzero;stroke:none" + id="path54" /></g></g></g></g></svg> diff --git a/pass/public/styles/base.less b/pass/public/styles/base.less index bf9e5c76ca2ccf6a936320c60bfc607f3c0a8f17..05bc44695e3224b3dfd47becc91bffd75450890f 100644 --- a/pass/public/styles/base.less +++ b/pass/public/styles/base.less @@ -49,6 +49,9 @@ html { padding: 0; min-width: @body-scroll-break-point; color: @font-color-on-white; + min-height: 100vh; + display: grid; + grid-template-rows: max-content max-content 1fr; main { max-width: @max-content-width; @@ -340,9 +343,28 @@ nav#primary-nav { } } +button.open-chat { + position: fixed; + bottom: 0; + + right: 2rem; + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + > img { + filter: brightness(0) invert(1); + width: 1rem; + } +} +.zammad-chat.zammad-chat-is-open { + z-index: 99999; +} + footer { - background-color: @color-main; - color: white; + display: flex; + flex-direction: column; + justify-content: end; a { color: white; text-decoration: none; @@ -354,6 +376,8 @@ footer { gap: 1.2rem; margin: 0; padding: 1rem 0; + background-color: @color-main; + color: white; > li:nth-child(1) { list-style-type: none; } diff --git a/pass/public/styles/key/key.less b/pass/public/styles/key/key.less index dd91f2deb8b2ec2f2cef62067dc40ecf94ae7fdb..259c58341bd3b7632aac89db3f8052084fc2c944 100644 --- a/pass/public/styles/key/key.less +++ b/pass/public/styles/key/key.less @@ -18,8 +18,15 @@ main { > #qr { grid-area: qr; justify-self: center; - > img { - max-width: 8em; + display: grid; + place-items: center; + > a { + > img { + max-width: 8em; + } + } + > button { + font-size: 0.7rem; } } @@ -100,6 +107,7 @@ main { } > a.button { padding: 0.5rem; + margin: 0 auto; } } diff --git a/pass/resources/js/chat.js b/pass/resources/js/chat.js new file mode 100644 index 0000000000000000000000000000000000000000..d6319fd7ff8a8719a7ecb51d1203383eda569fbc --- /dev/null +++ b/pass/resources/js/chat.js @@ -0,0 +1,20 @@ +let open_chat_button = document.querySelector("button.open-chat"); + +let chat_id = open_chat_button.dataset.chatid; +let title = open_chat_button.dataset.title; +let chat = new ZammadChat({ + background: '#17608b', + fontSize: '12px', + title: title, + chatId: chat_id, + show: false, + buttonClass: "open-chat", + host: "wss://support.metager.de/ws" +}); + +// Show chat button when loaded + +open_chat_button.classList.remove("hidden"); + +console.log(chat); +console.log(chat.state); \ No newline at end of file diff --git a/pass/routes/index.js b/pass/routes/index.js index 7740df24f87793e9d5628b936ed2f4c09a979a39..1b92d772916859d9c185671373e570aac2f8502c 100644 --- a/pass/routes/index.js +++ b/pass/routes/index.js @@ -67,5 +67,9 @@ router.get( "/js/enter.js", browserify(path.join(__dirname, "..", "resources", "js", "enter.js")) ); +router.get( + "/js/chat.js", + browserify(path.join(__dirname, "..", "resources", "js", "chat.js")) +); module.exports = router; diff --git a/pass/views/index.ejs b/pass/views/index.ejs index 6d792e618a9b1220cec9c5431ad7d5d190d8673f..eae0fdbef3ed3a3e8769a2ae8e78b1c49477a771 100644 --- a/pass/views/index.ejs +++ b/pass/views/index.ejs @@ -11,35 +11,23 @@ <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"> <div class="advantage" id="no-ads"> - <img src="<%= baseDir _%>/images/hand.svg" alt="Image depicting money" /> + <img src="<%= baseDir _%>/images/adfree.svg" alt="Image depicting money" /> <div class="text"> <h2><%= req.t('advantages.ads.heading') _%></h2> <p><%= req.t('advantages.ads.description') _%></p> @@ -50,10 +38,7 @@ </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> @@ -63,10 +48,7 @@ </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> @@ -91,7 +73,7 @@ <h2><%= req.t('howitworks.steps.1.heading') _%></h2> <div> <%- req.t('howitworks.steps.1.description', {linkCost: - `${baseDir}/cost`, linkPricing: `${baseDir}/cost#pricing`}) _%> + `${baseDir}/cost`}) _%> </div> </li> <li> @@ -103,10 +85,8 @@ </li> </ol> <div id="how-it-works-action"> - <a href="<%= baseDir _%>/key/create#second-nav" 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'); -%> +<%- include('templates/page_footer'); -%> \ No newline at end of file diff --git a/pass/views/key.ejs b/pass/views/key.ejs index 0e2686a75614e7086eb2cb85350071064363bb91..f1701affcc8004be5ce53dbfd972f4bedaed9f67 100644 --- a/pass/views/key.ejs +++ b/pass/views/key.ejs @@ -1,7 +1,9 @@ <%- include('templates/page_header', {css: css, js: js}); %> -<a id="qr" href="<%= key.qr _%>" target="_blank"> - <img src="<%= key.qr %> "></img> -</a> +<div id="qr"> + <a href="<%= key.qr _%>" target="_blank"> + <img src="<%= key.qr %> "></img> + </a> +</div> <div id="key"> <%= key.key.get_key() %> </div> diff --git a/pass/views/templates/page_footer.ejs b/pass/views/templates/page_footer.ejs index a5d645e3f23f94250f9d6facd7d3d1ccc7bcfc4d..71074f193d21f03506434d19ffccac1991a8d15b 100644 --- a/pass/views/templates/page_footer.ejs +++ b/pass/views/templates/page_footer.ejs @@ -5,6 +5,10 @@ <li><a href="/impressum"><%= req.t("footer.impress", {ns: "pageheader"}) _%></a></li> </ul> </footer> + <button class="open-chat button hidden" data-title="<%= req.t("chat.title", {ns: "pageheader"})%>" data-chatid="<%= req.lng == "de"? 1 : 2 %>"> + <img src="<%= baseDir %>/images/chat.svg" /> + <%= req.t("chat.button", {ns: "pageheader"}) _%> + </button> </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 f94c8b161b6ce8237581b7f4740e6fb48e7436c6..c165c695201dc18dddfc5f661ef2661ea1bd22a3 100644 --- a/pass/views/templates/page_header.ejs +++ b/pass/views/templates/page_header.ejs @@ -56,6 +56,8 @@ <%_ }) _%> <%_ } _%> <script defer src="<%= baseDir _%>/js/base.js"></script> + <script defer src="https://support.metager.de/assets/chat/chat-no-jquery.min.js"></script> + <script defer src="<%= baseDir _%>/js/chat.js"></script> <%_ if (typeof js !=='undefined' ) { -%> <%_ js.forEach(js_file=> { -%> <script src="<%- js_file %>" defer></script> @@ -93,6 +95,6 @@ <li><a href="<%= baseDir _%>/key/create" class="button"><%= req.t("rightnav.start", { ns: 'pageheader'}) _%></a></li> <%_ } _%> </ul> - + </nav> <main> \ No newline at end of file