diff --git a/README.md b/README.md index 8e53873..84386c6 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,37 @@ -

+

-

Stop printing. Start hosting!

-

Digital Business Card Generator is a free and open-source front-end web application that lets you to quickly generate an interactive and responsive HTML-based digital business card that can be hosted with your website.

-

Check out the demo | Create your own

+

An Open-Source Digital Business Card Generator

+ +

Why Pay When Your Digital Business Cards Can Be Hosted on Your Website for Free!

+

EnBizCard helps you create interactive and responsive HTML-based digital business cards that can be hosted with your website.

+

Open Website

---

-

+

--- ## Goals -- Minimize the cost of paying third-party services to host your digital business cards +- Easily create digital business cards +- Elegant design and functionality - Quick and easy setup -- Simple, clutter-free design +- Discourage paper business cards and save trees ## Features -- Clean and simple design - Concise action buttons - Click to contact via Phone, WhatsApp, Email, etc - Direct vCard download (lets user download your contact information to their phone) - Social media links - PGP public key sharing with fingerprint -- Easily share your card using QR-code or link -- Feature images, artworks, music releases, video showreels, brochures and much more -- Embed any kind of HTML content (that means you can now add YouTube videos) -- Showcase products, services or anything up to your imagination +- Share your card with anyone using QR-code or link +- Showcase images, artworks, music, videos, poems, brochures, products, services or anything up to your imagination +- Embed any kind of HTML content (videos, music, maps, contact forms, you name it.) +- Track your audience with analytics +- Custom fonts ## Highlights @@ -38,7 +41,7 @@ ## Future -Check out the [roadmap](https://github.com/vishnuraghavb/dbizcard/projects/1) to see the upcoming features of Digital Business Card Generator. +Check out the [roadmap](https://github.com/vishnuraghavb/enbizcard/projects/1) to see the upcoming features of Digital Business Card Generator. Your feedback and suggestions are very important. If you have an idea to improve Digital Business Card Generator, [do let me know](#having-issues-suggestions-and-feedback). I'm always open to ideas ;) @@ -46,8 +49,8 @@ Your feedback and suggestions are very important. If you have an idea to improve You can, -- [Create an issue here](https://github.com/vishnuraghavb/dbizcard/issues) -- [Join the Telegram group](http://t.me/dbizcard) (quicker replies and best for discussion) +- [Create an issue here](https://github.com/vishnuraghavb/enbizcard/issues) +- [Join the Telegram group](http://t.me/enbizcard) (quicker replies and best for discussion) - Contact me at apps@vishnuraghav.com ## Assets @@ -63,6 +66,7 @@ You can, ## License ``` +EnBizCard - An Open-Source Digital Business Card Generator Copyright (C) 2020 Vishnu Raghav B This program is free software: you can redistribute it and/or modify diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index 33efe29..c9cf24c 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -10,16 +10,8 @@ @apply right-0; right: 0; } -.toggle-switch:checked + .toggle-label { - @apply bg-green-600; - background-color: #38a169; -} -.checkbox:checked { - background-color: #38a169; - border-color: #38a169; -} #device { - border-radius: 2rem; + border-radius: 1rem; width: 100%; } .max-hd { @@ -48,19 +40,13 @@ } @media (min-width: 640px) { - .footer { - display: none; - } - .max-hd { - max-height: 38rem; - } .stepC { margin-left: 0.5rem; margin-right: 0.5rem; } } -@media (min-width: 480px) { - #device { - max-width: 24rem; +@media (min-width: 768px) { + .max-hd { + max-height: 38rem; } } diff --git a/assets/icons/add-img.svg b/assets/icons/add-img.svg index 2897af2..ccc71dc 100644 --- a/assets/icons/add-img.svg +++ b/assets/icons/add-img.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/add.svg b/assets/icons/add.svg index 21c048a..33c69b9 100644 --- a/assets/icons/add.svg +++ b/assets/icons/add.svg @@ -1,4 +1,4 @@ + xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> \ No newline at end of file diff --git a/assets/icons/box.svg b/assets/icons/box.svg index 8e2f80c..a57bb5c 100644 --- a/assets/icons/box.svg +++ b/assets/icons/box.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/check.svg b/assets/icons/check.svg index 94a8d62..e86a7b1 100644 --- a/assets/icons/check.svg +++ b/assets/icons/check.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/code.svg b/assets/icons/code.svg index 2d80097..044b7c0 100644 --- a/assets/icons/code.svg +++ b/assets/icons/code.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/drag.svg b/assets/icons/drag.svg new file mode 100644 index 0000000..6120f5f --- /dev/null +++ b/assets/icons/drag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/file.svg b/assets/icons/file.svg new file mode 100644 index 0000000..2c81422 --- /dev/null +++ b/assets/icons/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/open-collective.svg b/assets/icons/open-collective.svg new file mode 100644 index 0000000..e5ef247 --- /dev/null +++ b/assets/icons/open-collective.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/patreon.svg b/assets/icons/patreon.svg new file mode 100644 index 0000000..fed8621 --- /dev/null +++ b/assets/icons/patreon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/qrcodeb.svg b/assets/icons/qrcodeb.svg deleted file mode 100755 index 28affc0..0000000 --- a/assets/icons/qrcodeb.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/assets/icons/text.svg b/assets/icons/text.svg new file mode 100644 index 0000000..216e7a8 --- /dev/null +++ b/assets/icons/text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/x.svg b/assets/icons/x.svg index d6dc88b..60cb095 100644 --- a/assets/icons/x.svg +++ b/assets/icons/x.svg @@ -1,4 +1,4 @@ + 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"> \ No newline at end of file diff --git a/assets/images/featureGraphic.png b/assets/images/featureGraphic.png deleted file mode 100755 index 2841215..0000000 Binary files a/assets/images/featureGraphic.png and /dev/null differ diff --git a/assets/styles/T1.min.css b/assets/styles/T1.min.css index 0e366e8..2eab748 100644 --- a/assets/styles/T1.min.css +++ b/assets/styles/T1.min.css @@ -1 +1 @@ -body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;font-family:sans-serif;position:relative}#modal{position:absolute;z-index:1;width:100%;bottom:0;-webkit-transition:top 0.2s ease-out, opacity 0.1s ease-out;transition:top 0.2s ease-out, opacity 0.1s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0)}#closeModal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:1rem 1rem 0 0}#close{padding:0.75rem;cursor:pointer;line-height:0}.icon{width:1.5rem;height:1.5rem}#modalView,#copyView,#qrView,#keyInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#copyView p,#keyInfo p{margin:1rem 2em 0;line-height:1.5;text-align:center}#copyURL,#dlKey{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:2rem;padding:0.75rem 1.5rem;cursor:pointer}#copyURL span,#dlKey span{margin-left:0.5rem}#qrView{text-align:center;width:100%}#qrView h2,#qrView p{padding:0 2rem}#qrView h2{margin:0}#qrView p{margin-top:0.5rem}#qr{margin:1rem 2rem 2rem;padding:2rem;background:#fff;border-radius:0.5rem}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:6rem 3rem;-webkit-box-sizing:border-box;box-sizing:border-box}#logo{max-height:6rem;text-align:center;color:gray;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#topActions{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:1rem;right:0;top:1rem}#topActions>div{display:-webkit-box;display:-ms-flexbox;display:flex}#topActions a{padding:0.75rem;cursor:pointer;border-radius:100%;line-height:0;margin-right:1rem}main{padding:1rem}#profile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:-4.5rem}#profile img,#profile .img{width:7rem;height:7rem;border-radius:100%;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:1rem;line-height:1.25;word-break:break-word}.name{font-weight:700;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.desc{font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}.actions{margin-top:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.actionsC{width:33.33%}.actionBtn{padding:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.actionBtn a{border-radius:100%;padding:0.75rem;line-height:0}.actionBtn p{margin:0.5rem 0 0;font-size:0.875rem}.secActions{margin-top:1.25rem}.secBtn{padding:1rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#cta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}#dlVcard{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:1.5rem;padding:0.75rem 1.5rem;cursor:pointer;line-height:0}#dlVcard .icon{margin-right:0.5rem}#dlVcard p{margin:0}.attachments{margin-top:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.section{font-weight:700;text-align:center;font-size:1.5rem;margin:3rem 1rem 1rem}.content{overflow:hidden;border-radius:0.5rem;margin-top:1rem}.content img{display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.embedded{position:relative;padding-top:56.25%}.embedded iframe{position:absolute;top:0;left:0;width:100%;height:100%}.music,.video{width:100%}.mediaC{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}video{width:100%}.controls{padding:2rem 1rem;font-size:0.875rem;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.prodInfo .desc{margin:-1rem 0 0}.price{margin:2rem 0 0;font-size:1.25rem;font-weight:700}.label{display:inline-block;font-size:1rem;margin-top:1rem;border-radius:5rem;letter-spacing:1px;padding:0.75rem 1.5rem}.label p{margin:0}.title{font-size:1.125rem;font-weight:700;margin:0 0 0.5rem}.mediaInfo{margin:0}.pCtrl,.docDl{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.docDl{display:-webkit-box;display:-ms-flexbox;display:flex}.seekBar{width:100%;height:0.5rem;margin-top:2rem;border-radius:5rem;background:#adb5bd;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.dlBtn{margin:2rem 0.5rem 0;padding:0.75rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}footer{padding:2.5rem 1.5rem 2rem;font-size:0.75rem;text-align:center}footer a{text-decoration:underline;color:inherit} +body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#fff;position:relative}#modal{position:absolute;z-index:1;width:100%;bottom:0;-webkit-transition:top 0.2s ease-out, opacity 0.1s ease-out;transition:top 0.2s ease-out, opacity 0.1s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0)}#closeModal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin:1rem 1rem 0 0}#close{padding:0.75rem;cursor:pointer;line-height:0}.icon{width:1.5rem;height:1.5rem}#modalView,#copyView,#qrView,#keyInfo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#copyView p,#keyInfo p{margin:1rem 2em 2rem;text-align:center}#copyURL,#dlKey{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;padding:0.75rem 1.5rem;cursor:pointer}#copyURL span,#dlKey span{margin-left:0.5rem}#qrView h2,#qrView p{margin:0 2rem 0.5rem}#qr{margin:1rem 2rem 2rem;padding:2rem;background:#fff;border-radius:0.5rem}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:6rem 3rem;-webkit-box-sizing:border-box;box-sizing:border-box}#logo{min-height:6rem;max-height:6rem;text-align:center;color:gray;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#topActions{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;position:absolute;left:1rem;right:0;top:1rem}#topActions>div{display:-webkit-box;display:-ms-flexbox;display:flex}#topActions a{padding:0.75rem;cursor:pointer;border-radius:100%;line-height:0;margin-right:1rem}main{padding:1rem}#profile{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}#profile img{width:7rem;height:7rem;border-radius:100%;text-align:center;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-4.5rem}#info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:1rem;line-height:1.25;word-break:break-word}.name{font-weight:bold;font-size:1.25rem;margin:0}.jobtitle{font-size:1rem;margin:0.25rem 0 0 0}.desc,.textC{font-size:0.875rem;white-space:pre-line;line-height:1.5;margin:1rem}.textC{font-size:1rem;margin:2rem 1rem}.actions{margin-top:2rem;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.actionsC{width:33.33%}.actionBtn{padding:0.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.actionBtn a{border-radius:100%;padding:0.75rem;line-height:0}.actionBtn p{margin:0.5rem 0 0;font-size:0.875rem}.secondary{margin-top:1.25rem}.secBtn{padding:1rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#cta{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}#dlVcard{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:5rem;margin-top:1.5rem;padding:0.75rem 1.5rem;cursor:pointer;line-height:0}#dlVcard .icon{margin-right:0.5rem}#dlVcard p{margin:0}.attachments{margin-top:1.5rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.section{font-weight:bold;text-align:center;font-size:1.5rem;margin:3rem 1rem 1rem}.content{overflow:hidden;border-radius:0.5rem;margin-top:1rem}.content img{display:block;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.embedded{position:relative;padding-top:56.25%}.embedded iframe{position:absolute;top:0;left:0;width:100%;height:100%}.music,.video{width:100%}.mediaC{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center}video{width:100%}.controls{padding:2rem 1rem;font-size:0.875rem;text-align:center;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.prodInfo .desc{margin:-1rem 0 0}.price{margin:2rem 0 0;font-size:1.25rem;font-weight:bold}.label{display:inline-block;font-size:1rem;margin-top:1rem;border-radius:5rem;letter-spacing:1px;padding:0.75rem 1.5rem}.label p{margin:0}.title{font-size:1.125rem;font-weight:bold;margin:0 0 0.5rem}.mediaInfo{margin:0}.pCtrl,.docDl{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.docDl{display:-webkit-box;display:-ms-flexbox;display:flex}.seekBar{width:100%;height:0.5rem;margin-top:2rem;border-radius:5rem;background:#adb5bd;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.dlBtn{margin:2rem 0.5rem 0;padding:0.75rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}footer{padding:2.5rem 1.5rem 2rem;font-size:0.75rem}footer a{text-decoration:underline;color:inherit} diff --git a/assets/styles/T1.scss b/assets/styles/T1.scss index 3fef7d6..c8cad76 100644 --- a/assets/styles/T1.scss +++ b/assets/styles/T1.scss @@ -4,7 +4,6 @@ body { padding: 0; max-width: 30rem; color: #fff; - font-family: sans-serif; position: relative; } #modal { @@ -40,8 +39,7 @@ body { #copyView, #keyInfo { p { - margin: 1rem 2em 0; - line-height: 1.5; + margin: 1rem 2em 2rem; text-align: center; } } @@ -50,7 +48,6 @@ body { display: inline-flex; align-items: center; border-radius: 5rem; - margin-top: 2rem; padding: 0.75rem 1.5rem; cursor: pointer; span { @@ -58,17 +55,9 @@ body { } } #qrView { - text-align: center; - width: 100%; h2, p { - padding: 0 2rem; - } - h2 { - margin: 0; - } - p { - margin-top: 0.5rem; + margin: 0 2rem 0.5rem; } } #qr { @@ -87,6 +76,7 @@ header { box-sizing: border-box; } #logo { + min-height: 6rem; max-height: 6rem; text-align: center; color: gray; @@ -118,15 +108,14 @@ main { display: flex; flex-direction: column; align-items: center; - margin-top: -4.5rem; - img, - .img { + img { width: 7rem; height: 7rem; border-radius: 100%; text-align: center; pointer-events: none; user-select: none; + margin-top: -4.5rem; } } #info { @@ -139,7 +128,7 @@ main { word-break: break-word; } .name { - font-weight: 700; + font-weight: bold; font-size: 1.25rem; margin: 0; } @@ -147,13 +136,17 @@ main { font-size: 1rem; margin: 0.25rem 0 0 0; } - -.desc { +.desc, +.textC { font-size: 0.875rem; white-space: pre-line; line-height: 1.5; margin: 1rem; } +.textC { + font-size: 1rem; + margin: 2rem 1rem; +} .actions { margin-top: 2rem; display: flex; @@ -179,7 +172,7 @@ main { font-size: 0.875rem; } } -.secActions { +.secondary { margin-top: 1.25rem; } .secBtn { @@ -216,7 +209,7 @@ a { justify-content: center; } .section { - font-weight: 700; + font-weight: bold; text-align: center; font-size: 1.5rem; margin: 3rem 1rem 1rem; @@ -271,7 +264,7 @@ video { .price { margin: 2rem 0 0; font-size: 1.25rem; - font-weight: 700; + font-weight: bold; } .label { display: inline-block; @@ -286,7 +279,7 @@ video { } .title { font-size: 1.125rem; - font-weight: 700; + font-weight: bold; margin: 0 0 0.5rem; } .mediaInfo { @@ -325,7 +318,6 @@ video { footer { padding: 2.5rem 1.5rem 2rem; font-size: 0.75rem; - text-align: center; a { text-decoration: underline; color: inherit; diff --git a/components/Action.vue b/components/Action.vue index 870bcde..addf7db 100644 --- a/components/Action.vue +++ b/components/Action.vue @@ -1,7 +1,7 @@ @@ -63,19 +63,19 @@ export default { .hu-color-picker { box-shadow: none; &.light { - background: #4a5568; + background: #2d3748; .color-type { .name { - background: #2d3748; + background: #4a5568; color: #fff; } .value { - background: #1a202c; + background: #000; color: #fff; } } } - .color-show{ + .color-show { display: none; } & > div:nth-last-child(-2n + 2), diff --git a/components/CryptoField.vue b/components/CryptoField.vue deleted file mode 100644 index 9c2d419..0000000 --- a/components/CryptoField.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - - diff --git a/components/Donate.vue b/components/Donate.vue deleted file mode 100644 index e0a096d..0000000 --- a/components/Donate.vue +++ /dev/null @@ -1,137 +0,0 @@ - - - - \ No newline at end of file diff --git a/components/Download.vue b/components/Download.vue new file mode 100644 index 0000000..fc3fa1d --- /dev/null +++ b/components/Download.vue @@ -0,0 +1,51 @@ + + + \ No newline at end of file diff --git a/components/Embed.vue b/components/Embed.vue deleted file mode 100644 index c14e51f..0000000 --- a/components/Embed.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - diff --git a/components/Feature.vue b/components/Feature.vue deleted file mode 100644 index ec17d3b..0000000 --- a/components/Feature.vue +++ /dev/null @@ -1,379 +0,0 @@ - - - diff --git a/components/Featured.vue b/components/Featured.vue new file mode 100644 index 0000000..cb1bc2e --- /dev/null +++ b/components/Featured.vue @@ -0,0 +1,542 @@ + + + diff --git a/components/Footer.vue b/components/Footer.vue new file mode 100644 index 0000000..3ac10ba --- /dev/null +++ b/components/Footer.vue @@ -0,0 +1,43 @@ + + + + + \ No newline at end of file diff --git a/components/Help.vue b/components/Help.vue new file mode 100644 index 0000000..c6f4091 --- /dev/null +++ b/components/Help.vue @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/components/MediaPlayer.vue b/components/MediaPlayer.vue index b25ca43..00a1e53 100644 --- a/components/MediaPlayer.vue +++ b/components/MediaPlayer.vue @@ -15,7 +15,7 @@ :src=" PreviewMode ? media.dataURI + '#t=0.2' - : `./featured/${getTitle(media.title)}.${media.format}` + : `./media/${getTitle(media.title)}.${media.format}` " /> @@ -23,7 +23,7 @@ :src=" PreviewMode ? media.coverDataURI - : `./featured/${getTitle(media.title)}.${media.coverFormat}` + : `./media/${getTitle(media.title)}.${media.coverFormat}` " alt="cover" /> diff --git a/components/Modal.vue b/components/Modal.vue index 7492006..be9fac9 100644 --- a/components/Modal.vue +++ b/components/Modal.vue @@ -1,17 +1,23 @@ diff --git a/components/Preview.vue b/components/Preview.vue index 177c4c7..de61c45 100644 --- a/components/Preview.vue +++ b/components/Preview.vue @@ -1,356 +1,322 @@ @@ -361,11 +327,9 @@ import ProductShowcase from './ProductShowcase' export default { props: [ 'username', - 'businessInfo', + 'genInfo', 'images', 'featured', - 'embedContent', - 'products', 'colors', 'primaryActions', 'secondaryActions', @@ -375,7 +339,6 @@ export default { 'footerCredit', 'showAlert', 'hasLightBG', - 'publicKey', 'pubKeyIsValid', ], components: { @@ -398,7 +361,7 @@ export default { return this.featured.music }, getEmbedContent() { - return this.embedContent + return this.embedded .map((e) => { return { title: e.title, @@ -407,6 +370,34 @@ export default { }) .filter((e) => e) }, + getCssHref() { + if (this.genInfo.fontLink) { + let html = new DOMParser().parseFromString( + this.genInfo.fontLink, + 'text/html' + ) + let link = Array.from(html.getElementsByTagName('link')).filter( + (e) => e.getAttribute('rel') == 'stylesheet' + ) + return link.length && link[0].getAttribute('href') + } + return false + }, + getFontFamily() { + let regex = /^font-family[^;]*/ + let css = this.genInfo.fontCss.replace(/\s+/, '') + if (regex.test(css)) { + return css.match(/^font-family[^;]*/)[0] + } + }, + getTrackingCode() { + let regex = //g + let tracker = this.genInfo.tracker + if (regex.test(tracker)) { + let scripts = tracker.match(regex) + return scripts.length && scripts.join() + } + }, }, methods: { getTitle(e) { @@ -418,6 +409,7 @@ export default { return iframe.match(/src="?([^"\s]+)"/)[1] } else return null }, + toggleContainer(e) { '2rem' == e.style.top ? ((e.style.visibility = 'visible'), @@ -437,11 +429,12 @@ export default { copyView.style.display = qrView.style.display = 'none' }, closePublicKey() { + let modal = this.$refs.modal this.toggleContainer(modal) }, sharingAlert() { this.showAlert( - 'You are able to share your business card after completing the hosting process\n\nCheck out the demo to test the functionality.' + 'You are able to share your business card after completing the hosting process.\n\nCheck out the demo to test the functionality.' ) }, togglePlay(ref) { @@ -478,7 +471,6 @@ export default { padding: 0; max-width: 30rem; color: #fff; - font-family: sans-serif; position: relative; } #modal { @@ -514,8 +506,7 @@ export default { #copyView, #keyInfo { p { - margin: 1rem 2em 0; - line-height: 1.5; + margin: 1rem 2em 2rem; text-align: center; } } @@ -524,7 +515,6 @@ export default { display: inline-flex; align-items: center; border-radius: 5rem; - margin-top: 2rem; padding: 0.75rem 1.5rem; cursor: pointer; span { @@ -532,17 +522,9 @@ export default { } } #qrView { - text-align: center; - width: 100%; h2, p { - padding: 0 2rem; - } - h2 { - margin: 0; - } - p { - margin-top: 0.5rem; + margin: 0 2rem 0.5rem; } } #qr { @@ -561,6 +543,7 @@ export default { box-sizing: border-box; } #logo { + min-height: 6rem; max-height: 6rem; text-align: center; color: gray; @@ -592,15 +575,14 @@ export default { display: flex; flex-direction: column; align-items: center; - margin-top: -4.5rem; - img, - .img { + img { width: 7rem; height: 7rem; border-radius: 100%; text-align: center; pointer-events: none; user-select: none; + margin-top: -4.5rem; } } #info { @@ -613,7 +595,7 @@ export default { word-break: break-word; } .name { - font-weight: 700; + font-weight: bold; font-size: 1.25rem; margin: 0; } @@ -621,13 +603,17 @@ export default { font-size: 1rem; margin: 0.25rem 0 0 0; } - - .desc { + .desc, + .textC { font-size: 0.875rem; white-space: pre-line; line-height: 1.5; margin: 1rem; } + .textC { + font-size: 1rem; + margin: 2rem 1rem; + } .actions { margin-top: 2rem; display: flex; @@ -653,7 +639,7 @@ export default { font-size: 0.875rem; } } - .secActions { + .secondary { margin-top: 1.25rem; } .secBtn { @@ -690,7 +676,7 @@ export default { justify-content: center; } .section { - font-weight: 700; + font-weight: bold; text-align: center; font-size: 1.5rem; margin: 3rem 1rem 1rem; @@ -745,7 +731,7 @@ export default { .price { margin: 2rem 0 0; font-size: 1.25rem; - font-weight: 700; + font-weight: bold; } .label { display: inline-block; @@ -760,7 +746,7 @@ export default { } .title { font-size: 1.125rem; - font-weight: 700; + font-weight: bold; margin: 0 0 0.5rem; } .mediaInfo { @@ -799,7 +785,6 @@ export default { footer { padding: 2.5rem 1.5rem 2rem; font-size: 0.75rem; - text-align: center; a { text-decoration: underline; color: inherit; diff --git a/components/Product.vue b/components/Product.vue deleted file mode 100644 index ce7c7e6..0000000 --- a/components/Product.vue +++ /dev/null @@ -1,119 +0,0 @@ - - - diff --git a/components/ProductCard.vue b/components/ProductCard.vue index 3704573..4695a27 100644 --- a/components/ProductCard.vue +++ b/components/ProductCard.vue @@ -1,103 +1,123 @@ diff --git a/components/ProductShowcase.vue b/components/ProductShowcase.vue index ceb2a99..b466ba1 100644 --- a/components/ProductShowcase.vue +++ b/components/ProductShowcase.vue @@ -1,48 +1,44 @@ diff --git a/layouts/default.vue b/layouts/default.vue index 627fe08..88a6043 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,5 +1,5 @@ @@ -28,4 +28,23 @@ html { -webkit-font-smoothing: antialiased; box-sizing: border-box; } +.drop-enter-active, +.drop-leave-active { + transition: transform 0.2s ease; +} + +.drop-enter, +.drop-leave-to { + transform: translateY(-100%); +} +.fade-enter-active, +.fade-leave-active { + backface-visibility: hidden; + transition: transform 0.4s ease, opacity 0.2s ease; +} +.fade-enter, +.fade-leave-to { + transform: translateY(-100%); + opacity: 0; +} diff --git a/nuxt.config.js b/nuxt.config.js index c9a2e4e..c206dd6 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -19,7 +19,7 @@ export default { // ogUrl: false, ogTitle: 'EnBizCard - An Open-Source Digital Business Card Generator', ogDescription: - 'EnBizCard helps you create interactive and responsive HTML-based digital business card that can be hosted with your website.', + 'EnBizCard helps you create beautiful, responsive HTML-based digital business cards that can be hosted on your website.', ogSiteName: 'EnBizCard - An Open-Source Digital Business Card Generator', theme_color: '#111827', author: 'Vishnu Raghav', @@ -35,7 +35,7 @@ export default { hid: 'description', name: 'description', content: - 'EnBizCard helps you create interactive and responsive HTML-based digital business card that can be hosted with your website.', + 'EnBizCard helps you create beautiful, responsive HTML-based digital business cards that can be hosted on your website.', }, { hid: 'msapplication-TileColor', @@ -217,9 +217,8 @@ export default { ** See https://nuxtjs.org/api/configuration-build/ */ build: { - extend(config, ctx) { + extend(config) { config.module.rules.push({ - // enforce: 'pre', test: /\.min.css|\.min.js$/, use: [ { @@ -232,6 +231,24 @@ export default { exclude: /(node_modules)/, }) }, + html: { + minify: { + collapseBooleanAttributes: true, + collapseInlineTagWhitespace: true, + collapseWhitespace: true, + html5: true, + decodeEntities: true, + minifyCSS: true, + minifyJS: true, + processConditionalComments: true, + removeComments: true, + removeEmptyAttributes: true, + removeRedundantAttributes: true, + sortClassName: true, + trimCustomFragments: true, + useShortDoctype: true, + }, + }, }, generate: { dir: 'public', diff --git a/package-lock.json b/package-lock.json index 4018826..02cc325 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10862,6 +10862,11 @@ "is-plain-obj": "^1.0.0" } }, + "sortablejs": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz", + "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==" + }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -11748,9 +11753,9 @@ "integrity": "sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==" }, "uglify-js": { - "version": "3.12.7", - "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.7.tgz", - "integrity": "sha512-SIZhkoh+U/wjW+BHGhVwE9nt8tWJspncloBcFapkpGRwNPqcH8pzX36BXe3TPBjzHWPMUZotpCigak/udWNr1Q==" + "version": "3.12.8", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.8.tgz", + "integrity": "sha512-fvBeuXOsvqjecUtF/l1dwsrrf5y2BCUk9AOJGzGcm6tE7vegku5u/YvqjyDaAGr422PLoLnrxg3EnRvTqsdC1w==" }, "unfetch": { "version": "4.2.0", @@ -12185,6 +12190,14 @@ "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==" }, + "vuedraggable": { + "version": "2.24.3", + "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz", + "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==", + "requires": { + "sortablejs": "1.10.2" + } + }, "vuex": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz", diff --git a/package.json b/package.json index c82549f..d8cc433 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "id3-parser": "^2.0.0", "jszip": "^3.6.0", "nuxt": "^2.14.12", - "vue-clickaway2": "^2.3.2" + "vue-clickaway2": "^2.3.2", + "vuedraggable": "^2.24.3" }, "devDependencies": { "@nuxtjs/tailwindcss": "^3.4.2", diff --git a/pages/hosting-guide/index.vue b/pages/hosting-guide/index.vue new file mode 100644 index 0000000..6c68763 --- /dev/null +++ b/pages/hosting-guide/index.vue @@ -0,0 +1,249 @@ + + \ No newline at end of file diff --git a/pages/index.vue b/pages/index.vue index 1c08745..61f1f63 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,49 +1,114 @@ @@ -479,18 +493,17 @@ import Modal from '@/components/Modal' import Attachment from '@/components/Attachment' import Action from '@/components/Action' -import Feature from '@/components/Feature' -import Embed from '@/components/Embed' -import Product from '@/components/Product' +import Featured from '@/components/Featured' import Colour from '@/components/Colour' import Preview from '@/components/Preview' -import Check from '@/components/Check' -import Donate from '@/components/Donate' +import Download from '@/components/Download' +import Help from '@/components/Help' +import Footer from '@/components/Footer' -import ReadMe from '@/components/ReadMe' import Vcard from '@/components/Vcard' import JSZip from 'jszip' import { saveAs } from 'file-saver' +// let minify = require('html-minifier').minify import QRCode from '!!raw-loader!~/static/qrcode.min.js' import Theme1 from '!!raw-loader!~/assets/styles/T1.min.css' export default { @@ -498,14 +511,12 @@ export default { Modal, Attachment, Action, - Feature, - Embed, - Product, + Featured, Colour, Preview, - Check, - Donate, - ReadMe, + Download, + Help, + Footer, Vcard, }, @@ -518,12 +529,11 @@ export default { checked: false, }, { - label: - 'I have verified that all the links are working correctly in the Preview', + label: 'I have verified that all the links are working correctly', checked: false, }, { - label: 'I have removed all unused and empty fields or sections', + label: 'I have removed all unused fields and sections', checked: false, }, ], @@ -542,30 +552,33 @@ export default { }, }, colors: { - mainBg: { - color: `#eee`, + logoBg: { + color: `#1F2937`, openPalette: false, }, - logoBg: { - color: `#000`, + mainBg: { + color: `#F9FAFB`, openPalette: false, }, buttonBg: { - color: `#000`, + color: `#374151`, openPalette: false, }, cardBg: { - color: `#ddd`, + color: `#E5E7EB`, openPalette: false, }, }, - businessInfo: { + genInfo: { name: null, - jobTitle: null, - businessName: null, - businessDescription: null, - publicKey: null, - fingerprint: null, + title: null, + biz: null, + desc: null, + key: null, + fp: null, + tracker: null, + fontLink: null, + fontCss: null, }, primaryActions: [], secondaryActions: [], @@ -834,6 +847,20 @@ export default { color: '#003087', label: 'PayPal.me URL', }, + { + name: 'patreon', + placeholder: 'https://patreon.com/username', + value: null, + color: '#FF424D', + label: 'Patreon URL', + }, + { + name: 'open-collective', + placeholder: 'https://opencollective.com/username', + value: null, + color: '#fff', + label: 'Open Collective URL', + }, ], }, featured: [ @@ -842,55 +869,36 @@ export default { content: [], }, ], - embedContent: [ - { - title: 'Section title', - content: [], - }, - ], - products: [ - { - title: 'Section title', - content: [], - }, - ], footerCredit: true, PreviewMode: true, content: null, + inView: false, + showPreview: false, + scrollPos: null, + opening: false, } }, computed: { pubKeyIsValid() { - if (this.businessInfo.publicKey) { - if ( - !this.businessInfo.publicKey.match( - /^(-----BEGIN PGP PUBLIC KEY BLOCK-----)/ - ) - ) + if (this.genInfo.key) { + if (!this.genInfo.key.match(/^(-----BEGIN PGP PUBLIC KEY BLOCK-----)/)) return false - if ( - !this.businessInfo.publicKey.match( - /(-----END PGP PUBLIC KEY BLOCK-----)$/ - ) - ) + if (!this.genInfo.key.match(/(-----END PGP PUBLIC KEY BLOCK-----)$/)) return false return true } else return false }, fingerprintIsValid() { - return ( - this.businessInfo.fingerprint && - this.businessInfo.fingerprint.match(/^[a-zA-Z0-9]{40}$/) - ) + return this.genInfo.fp && this.genInfo.fp.match(/^[a-zA-Z0-9]{40}$/) }, downloadChecked() { return this.downloadCheckList.filter((e) => e.checked).length == 3 }, username() { - return this.businessInfo.name - ? this.businessInfo.name.toLowerCase().replace(/\W+/g, '') + return this.genInfo.name + ? this.genInfo.name.toLowerCase().replace(/\W+/g, '') : 'username' }, vCard() { @@ -905,19 +913,48 @@ export default { .filter((e) => e)[0] let randomNumber = Math.floor(100000 + Math.random() * 900000) return { - FN: this.businessInfo.name, - TITLE: this.businessInfo.jobTitle, - ORG: this.businessInfo.businessName, + FN: this.genInfo.name, + TITLE: this.genInfo.title, + ORG: this.genInfo.biz, TEL1: phoneNumbers[0], TEL2: phoneNumbers[1], EMAIL: email, URL: website, - KEY: this.businessInfo.fingerprint, - UID: `dbizcard-${randomNumber}`, + KEY: this.genInfo.fp, + UID: `enbizcard-${randomNumber}`, } }, }, methods: { + togglePreview() { + this.opening = true + let c = this.$refs.container + if (this.showPreview) { + c.classList.remove('overflow-y-hidden', 'h-screen') + window.scrollTo(0, this.scrollPos) + this.opening = false + } else { + this.scrollPos = window.scrollY + setTimeout(() => { + c.classList.add('overflow-y-hidden', 'h-screen') + this.opening = false + }, 400) + } + this.showPreview = !this.showPreview + }, + checkView() { + let e = this.$refs.create + if (e) { + let top = e.getBoundingClientRect().top + this.inView = this.showPreview ? true : top < 0 + } + }, + clearContent() { + this.content = null + }, + create() { + this.$refs.create.scrollIntoView({ behavior: 'smooth' }) + }, getTitle(e) { return e.toLowerCase().split(' ').join('_') }, @@ -927,27 +964,6 @@ export default { content: [], }) }, - addEmbed() { - this.embedContent.push({ - title: 'Section title', - content: [''], - }) - }, - addProduct() { - this.products.push({ - title: 'Section title', - content: [ - { - image: null, - title: null, - description: null, - price: null, - label: null, - link: null, - }, - ], - }) - }, hasLightBG(e) { let hex = this.colors[e].color hex = hex.slice(1) @@ -980,12 +996,12 @@ export default { saveAs(window.URL.createObjectURL(blob), `${this.username}.vcf`) }, downloadKey() { - let blob = new Blob([this.businessInfo.publicKey], { + let blob = new Blob([this.genInfo.key], { type: 'text/plain', }) saveAs( window.URL.createObjectURL(blob), - `${this.businessInfo.name}'s public key.asc` + `${this.genInfo.name}'s public key.asc` ) }, async resizeImage(type, index1, index2) { @@ -998,7 +1014,7 @@ export default { } else if (type == 'music') { file = await this.featured[index1].content[index2].cover } else if (type == 'product') { - file = await this.products[index1].content[index2].image.file + file = await this.featured[index1].content[index2].image.file } } else { file = this.images[type].blob @@ -1043,7 +1059,7 @@ export default { } else if (type == 'music') { vm.featured[index1].content[index2].cover = image } else if (type == 'product') { - vm.products[index1].content[index2].image.file = image + vm.featured[index1].content[index2].image.file = image } } else { vm.images[type].resized = image @@ -1092,19 +1108,24 @@ export default { let vCard = new Blob([this.$refs.vCard.$refs.vCard.innerText], { type: 'text/plain', }) - let README = new Blob([this.$refs.readme.$refs.readme.innerText], { - type: 'text/plain', - }) + let guide = new Blob( + [ + '', + ], + { + type: 'text/html', + } + ) let qrScript = new Blob([QRCode], { type: 'application/javascript', }) - let name = this.businessInfo.name + let name = this.genInfo.name let username = this.username let zip = new JSZip() zip.folder(username).file('index.html', html) zip.folder(username).file('style.min.css', css) zip.folder(username).file('qrcode.min.js', qrScript) - zip.file('README.txt', README) + zip.file('Hosting-Guide.html', guide) if (this.images.logo.url) { zip.folder(username).file( `logo.${this.images.logo.format}`, @@ -1127,32 +1148,27 @@ export default { if (this.featured.length && hasFeaturedContent) { this.featured.forEach((item, index) => { item.content.forEach((item, i) => { - zip - .folder(username) - .folder('featured') - .file( - `${this.getTitle(item.title)}.${item.format}`, - item.file - ) - if (item.type.match(/music|document/gi)) { + if (item.contentType == 'media') { zip .folder(username) - .folder('featured') + .folder('media') .file( - `${this.getTitle(item.title)}.${item.coverFormat}`, - item.cover + `${this.getTitle(item.title)}.${item.format}`, + item.file ) - } - }) - }) - } - if (this.products.length) { - this.products.forEach((item, index) => { - item.content.forEach((item, i) => { - if (item.image) { + if (item.type.match(/music|document/gi)) { + zip + .folder(username) + .folder('media') + .file( + `${this.getTitle(item.title)}.${item.coverFormat}`, + item.cover + ) + } + } else if (item.contentType == 'product' && item.image) { zip .folder(username) - .folder('products') + .folder('media') .file( `${this.getTitle(item.image.title)}.${item.image.format}`, item.image.file @@ -1164,10 +1180,7 @@ export default { if (this.pubKeyIsValid) { zip .folder(username) - .file( - `${this.businessInfo.name}'s public key.asc`, - this.businessInfo.publicKey - ) + .file(`${this.genInfo.name}'s public key.asc`, this.genInfo.key) } zip.folder(username).file(`${username}.vcf`, vCard) zip @@ -1177,10 +1190,16 @@ export default { .then(function (zip) { saveAs(zip, `${name}'s Digital Business Card.zip`) }) + this.showAlert( + 'Your Download Has Been Started!\n\nExtract the downloaded ZIP file and follow the Hosting Guide to get your digital business card online.\n\nIf you find this service valuable to you or your business, please consider donating.\nDonate' + ) this.PreviewMode = true }, 250) } }, }, + mounted() { + window.addEventListener('scroll', this.checkView) + }, } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 0870ad6..54f5e86 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,7 +11,10 @@ module.exports = { extend: {}, }, variants: { - extend: {}, + extend: { + backgroundColor: ['group-focus', 'checked'], + borderColor: ['checked'], + }, }, plugins: [], }