-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
30 lines (28 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html><html lang="en" style="background-color: rgb(255, 255, 255);"><head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/png" href="https://getbizviz.s3.amazonaws.com/icon.png"> <!----> <!----> <!----> <!----> <meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow"> <!----> <title>
Pascal Plaga's Digital Business Card
</title> <!----> <meta name="author" content="SMART vCARD - Another Software Solution By BizViz"> <meta name="url" content="https://smartvcard.com"> <meta name="designer" content="Jeff Baer"> <!----> <!----> <meta property="og:title" content=" Pascal Plaga's Digital Business Card"> <meta property="twitter:title" content=" Pascal Plaga's Digital Business Card"> <!----> <!----> <script>
"http"==window.location.href.substr(0,4)&&"/"!=window.location.href.slice(-1)&&window.location.replace(window.location.href+"/");
</script> <!----> <style>
#body{ font-family: sans-serif; } input[type='range']::-moz-range-track { background: none; } input[type='range']::-moz-range-thumb { -moz-appearance: none; width: 3rem; height: 3rem; border-radius: 100%; border: none; background: #0095c9; z-index: 3; cursor: pointer; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 3rem; border-radius: 100%; border: none; background: #0095c9; z-index: 3; cursor: pointer; } .closeBtnColor{ false } .topAction{ filter:invert(1) } .action{ color:#fff; } .card{ color:#000 !important } .ziacard{ color:#000 !important;padding-top: 20px; } .text{ text-align: center;line-height: 1.5;color:#fff !important }
</style> <!----><link rel="stylesheet" href="./style.min.css"></head> <body id="body"><div id="modal" style="background-color: rgb(39, 40, 41); visibility: hidden; top: 2rem; opacity: 0;"><div id="closeModal"><a id="close" class="closeBtnColor"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"></path></svg></div></a></div> <div id="modalView"><div id="keyInfo"><p class="text">
Use my public key to send me encrypted messages
</p> <a download="" target="_blank" id="dlKey" rel="noreferrer" tabindex="-1" style="background-color: rgb(0, 149, 201);" href="./ Pascal Plaga's public key.asc"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4m4-5l5 5 5-5m-5 5V3"></path></svg></div> <span class="action">Download Key</span></a></div> <div id="copyView"><p class="text">
Copy and send the URL to share my Business Card
</p> <button id="copyURL" style="background-color: rgb(0, 149, 201);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path></svg></div> <span class="action">Copy URL</span></button></div> <div id="qrView"><div id="qr"></div> <h2 class="text">Scan the QR Code</h2> <p class="text">to view my Business Card on another device</p></div></div></div> <header><div id="topActions" style="display: none;"><div><a id="share"><div class="icon topAction"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff" stroke-width="2"><circle cx="17" cy="5" r="3"></circle><circle cx="5" cy="12" r="3"></circle><circle cx="17" cy="19" r="3"></circle><path d="M7.59 13.51l6.83 3.98m-.01-10.98l-6.82 3.98"></path></svg></div></a> <a id="showQR"><div class="icon topAction"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round"><g fill="none" stroke="#fff" stroke-width="2"><path d="M4 4h4v4H4zm0 12h4v4H4zM16 4h4v4h-4z"></path><path d="M12 3v15a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2H3"></path></g><path fill="#fff" d="M15 15h2v2h-2z"></path></svg></div></a></div> <!----></div> <div class="headerImgC"><!----> <img id="logo" src="./logo.png" alt="Logo" style="margin: 3rem 0px 8rem;"></div></header> <main style="background-color: rgb(39, 40, 41); margin-top: 0px;"><div id="profile"><img src="./photo.png" alt="Photo"> <div id="info"><p class="name text">
Pascal Plaga
</p> <!----> <p class="jobtitle text">
</p> <p class="jobtitle text">
Peak Data UG (haftungsbeschränkt)
</p></div></div> <p class="bizaddr text">
</p> <br> <p class="desc text">
Cloud Security Experts.
</p> <div class="actions"><div id="cta"><a id="vcard" rel="noreferrer" download="" target="_blank" aria-label="Save Contact" style="background-color: rgb(0, 149, 201); width: 90%; padding: 1rem 1.5rem;" href="pascalplaga.vcf"><div class="icon action"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2"><path d="M0 0h24v24H0z" fill="none"></path><circle cx="8.5" cy="7" r="4" transform="matrix(.875 0 0 .875 4.563 -.625)" fill="none" stroke="#fff" stroke-width="2.29"></circle><path d="M5 18c0-3.863 3.137-7 7-7s7 3.137 7 7m-7-2v6m3-3l-3 3-3-3" fill="none" stroke="#fff" stroke-width="2"></path></svg></div> <p class="action">Save Contact</p></a></div> <div class="actionsC"><div class="actionBtn"><a href="tel:+4915678533450" target="_blank" rel="noopener noreferrer" aria-label="Mobile" style="background-color: rgb(0, 149, 201);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216"><path d="M103.57 180.73h8.87v8.87h-8.87v-8.87zm-31.8-67.01c1.07.62 2.25.94 3.41.94 2.25 0 4.47-1.14 5.72-3.24l35.48-59.43c1.87-3.16.85-7.24-2.3-9.12a6.64 6.64 0 00-9.13 2.3L69.47 104.6a6.668 6.668 0 002.3 9.12zm98.32-85.56v159.67c0 14.68-11.94 26.61-26.61 26.61H72.52c-14.68 0-26.61-11.94-26.61-26.61V28.16c0-14.67 11.94-26.61 26.61-26.61h70.96c14.68 0 26.61 11.94 26.61 26.61zm-75.4-8.87c0 2.45 1.99 4.44 4.44 4.44h17.74c2.44 0 4.43-1.98 4.43-4.44s-1.99-4.43-4.43-4.43H99.13c-2.44 0-4.44 1.98-4.44 4.43zm26.62 157.01c0-2.44-1.99-4.43-4.43-4.43H99.13c-2.44 0-4.44 1.99-4.44 4.43v17.74a4.44 4.44 0 004.44 4.43h17.74c2.44 0 4.43-1.99 4.43-4.43V176.3h.01zm31.04-139.26h-88.7v124.19h88.71l-.01-124.19zM71.84 75.61c1.06.61 2.2.9 3.35.9 2.29 0 4.5-1.19 5.75-3.3l12.41-21.29a6.658 6.658 0 00-11.5-6.71l-12.42 21.3a6.653 6.653 0 002.41 9.1z" fill="#fff"></path></svg></div></a> <p class="text">
Mobile
</p></div></div><div class="actionsC"><div class="actionBtn"><a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer" aria-label="email" style="background-color: rgb(0, 149, 201);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><path d="M22 6l-10 7L2 6"></path></svg></div></a> <p class="text">
Email
</p></div></div><div class="actionsC"><div class="actionBtn"><a target="_blank" rel="noopener noreferrer" aria-label="website" href="https://peak-data.de" style="background-color: rgb(0, 149, 201);"><div class="icon action"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"></path></svg></div></a> <p class="text">
Website
</p></div></div></div> <div><div class="actions secondary"><div class="actionsC"><div class="actionBtn secBtn"><a target="_blank" rel="noopener noreferrer" aria-label="linkedin" href="https://linkedin.com/in/pascalplaga" style="background: rgb(0, 119, 181);"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><path d="M20 3H4a1 1 0 00-1 1v16a1 1 0 001 1h16a1 1 0 001-1V4a1 1 0 00-1-1zM8.339 18.337H5.667v-8.59h2.672v8.59zM7.003 8.574a1.548 1.548 0 110-3.096 1.548 1.548 0 010 3.096zm11.335 9.763h-2.669V14.16c0-.996-.018-2.277-1.388-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248h-2.667v-8.59h2.56v1.174h.037c.355-.675 1.227-1.387 2.524-1.387 2.704 0 3.203 1.778 3.203 4.092v4.71z"></path></svg></div></a></div></div></div></div> </main> <footer class="text" style="background-color: rgb(39, 40, 41);">
Created with
<a href="
https://smartvcard.com" target="_blank" rel="noopener noreferrer" class="text">SMART vCARD</a></footer><script src="./qrcode.min.js"></script><script>let m=document.getElementById("modal"),c=document.getElementById("close"),ki=document.getElementById("keyInfo"),cv=document.getElementById("copyView"),curl=document.getElementById("copyURL"),qrv=document.getElementById("qrView"),qr=document.getElementById("qr"),s=document.getElementById("share"),sqr=document.getElementById("showQR"),sk=document.getElementById("showKey");function tC(e){"2rem"==e.style.top?(e.style.visibility="visible",e.style.top="0px",e.style.opacity=1):(e.style.top="2rem",e.style.opacity=0,setTimeout(()=>{e.style.visibility="hidden"},200))}function dN(e){e.style.display="none"}window.addEventListener("load",()=>{document.querySelector("#topActions").style.display="flex",qr.innerHTML=new QRCode({content:window.location.href,container:"svg-viewbox",join:!0,ecl:"L",padding:0}).svg()}),navigator.canShare?s.addEventListener("click",()=>{navigator.share({title:document.title,text:"You can view my Digital Business Card here:",url:window.location.href})}):s.addEventListener("click",()=>{tC(m),cv.style.display="flex",dN(qrv),ki&&dN(ki)}),sqr.addEventListener("click",()=>{tC(m),qrv.style.display="block",dN(cv),ki&&dN(ki)}),sk&&sk.addEventListener("click",()=>{tC(m),ki&&(ki.style.display="flex"),dN(cv),dN(qrv)}),c.addEventListener("click",()=>tC(m)),curl.addEventListener("click",async()=>{let e=curl.querySelectorAll(".action")[1];await navigator.clipboard.writeText(window.location.href).then(t=>{e.innerText="Copied",setTimeout(()=>{e.innerText="Copy URL"},1e3)})});</script></body></html>