From 09d207439ac36e9cb94f0a6fdad280173b80ebc9 Mon Sep 17 00:00:00 2001 From: vishnuraghavb Date: Fri, 10 Dec 2021 00:31:06 +0530 Subject: [PATCH] fixed vcf, added themes, improved consistency --- assets/icons/add-img.svg | 2 +- assets/icons/add.svg | 2 +- assets/icons/calendar.svg | 2 +- assets/icons/code.svg | 2 +- assets/icons/key.svg | 2 +- assets/icons/line.svg | 2 +- assets/icons/location.svg | 2 +- assets/icons/share.svg | 2 +- assets/icons/text.svg | 2 +- assets/icons/viber.svg | 2 +- assets/icons/website.svg | 2 +- assets/scripts/main.js | 4 +- assets/styles/T1.min.css | 2 +- assets/styles/T1.scss | 276 ++-- assets/styles/T3.min.css | 1 + assets/styles/T3.scss | 344 +++++ components/Attachment.vue | 18 +- components/Cropper.vue | 2 +- components/DocumentDownloader.vue | 8 +- components/Featured.vue | 4 +- components/MediaPlayer.vue | 26 +- components/Preview.vue | 1104 ++++++++++------ components/ProductCard.vue | 3 + components/ProductShowcase.vue | 18 +- jsconfig.json | 12 + package-lock.json | 2014 ++++++++++------------------- package.json | 8 +- pages/index.vue | 191 ++- 28 files changed, 2079 insertions(+), 1978 deletions(-) create mode 100644 assets/styles/T3.min.css create mode 100755 assets/styles/T3.scss create mode 100644 jsconfig.json diff --git a/assets/icons/add-img.svg b/assets/icons/add-img.svg index 65b0c0d..97aaf9c 100755 --- 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 238e2d9..c195341 100755 --- a/assets/icons/add.svg +++ b/assets/icons/add.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/calendar.svg b/assets/icons/calendar.svg index 517d3cf..671d796 100755 --- a/assets/icons/calendar.svg +++ b/assets/icons/calendar.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 cd81468..8299f9a 100755 --- 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/key.svg b/assets/icons/key.svg index 9ab3b49..c5f72fa 100755 --- a/assets/icons/key.svg +++ b/assets/icons/key.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/line.svg b/assets/icons/line.svg index c76b8bf..f258199 100755 --- a/assets/icons/line.svg +++ b/assets/icons/line.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/location.svg b/assets/icons/location.svg index 0c2c41c..64e484a 100755 --- a/assets/icons/location.svg +++ b/assets/icons/location.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/share.svg b/assets/icons/share.svg index 804ce81..9a255f8 100755 --- a/assets/icons/share.svg +++ b/assets/icons/share.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/text.svg b/assets/icons/text.svg index 1e5e11d..75419bd 100755 --- a/assets/icons/text.svg +++ b/assets/icons/text.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/viber.svg b/assets/icons/viber.svg index ea87dc4..5df6e9f 100755 --- a/assets/icons/viber.svg +++ b/assets/icons/viber.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/icons/website.svg b/assets/icons/website.svg index fd00c41..a52f96a 100755 --- a/assets/icons/website.svg +++ b/assets/icons/website.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/scripts/main.js b/assets/scripts/main.js index a351802..24a9b9e 100755 --- a/assets/scripts/main.js +++ b/assets/scripts/main.js @@ -1,6 +1,6 @@ let m = document.getElementById('modal'), c = document.getElementById('close'), - ki = document.getElementById('keyInfo'), + ki = document.getElementById('keyView'), cv = document.getElementById('copyView'), curl = document.getElementById('copyURL'), qrv = document.getElementById('qrView'), @@ -57,7 +57,7 @@ if (sk) { c.addEventListener('click', () => tC(m)), curl.addEventListener('click', async () => { - let action = curl.querySelectorAll('.action')[1] + let action = curl.querySelectorAll('.iconColor')[1] await navigator.clipboard.writeText(window.location.href).then((e) => { action.innerText = 'Copied' setTimeout(() => { diff --git a/assets/styles/T1.min.css b/assets/styles/T1.min.css index 0a7a210..b968584 100755 --- 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;position:relative}#modal{position:absolute;z-index:1;width:100%;bottom:0;transition:top .2s ease-out,opacity .1s ease-out;transform:translateZ(0)}#closeModal{display:flex;justify-content:flex-end;margin:1rem 1rem 0 0}#close{padding:.75rem;cursor:pointer;line-height:0}.icon{width:1.5rem;height:1.5rem}#modalView,#copyView,#qrView,#keyInfo{display:flex;flex-direction:column;align-items:center}#copyView p,#keyInfo p{margin:1rem 2em 2rem;text-align:center}#copyURL,#dlKey{display:inline-flex;align-items:center;border-radius:5rem;padding:.75rem 1.5rem;border:none;outline:none;cursor:pointer}#copyURL span,#dlKey span{margin-left:.5rem}#qrView h2,#qrView p{margin:0 2rem .5rem}#qr{margin:1rem 2rem 2rem;padding:2rem;background:#fff;border-radius:.5rem}header{display:flex;align-items:center;justify-content:center;position:relative;padding:6rem 3rem;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{flex-direction:row-reverse;justify-content:space-between;position:absolute;left:1rem;right:0;top:1rem}#topActions>div{display:flex}#topActions a{padding:.75rem;cursor:pointer;border-radius:100%;line-height:0;margin-right:1rem}main{padding:1rem}#profile{display:flex;flex-direction:column;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:flex;flex-direction:column;justify-content: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:.875rem;margin:.25rem 0 0 0}.bizname{font-size:.875rem;margin:.5rem 0 0 0;opacity:.6}.desc,.textC{font-size:.875rem;white-space:pre-line;line-height:1.5;margin:1rem}.textC{font-size:1rem;margin:2rem 1rem}.actions{margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center}.actionsC{width:33.33%}.actionBtn{padding:.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.actionBtn a{border-radius:100%;padding:.75rem;line-height:0}.actionBtn p{margin:.5rem 0 0;font-size:.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:flex;justify-content:center;width:100%}#vcard{display:flex;align-items:center;border-radius:5rem;margin-top:1.5rem;padding:.75rem 1.5rem;cursor:pointer;line-height:0}#vcard .icon{margin-right:.5rem}#vcard p{margin:0}.attachments{margin-top:1.5rem;display:flex;flex-direction:column;justify-content:center}.section{font-weight:bold;text-align:center;font-size:1.5rem;margin:3rem 1rem 1rem}.content{overflow:hidden;border-radius:1rem;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:flex;flex-direction:column;justify-content:space-evenly;align-items:center}video{width:100%}.controls{padding:2rem 1rem;font-size:.875rem;text-align:center;width:100%;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:.75rem 1.5rem}.label p{margin:0}.title{font-size:1.125rem;font-weight:bold;margin:0 0 .5rem}.mediaInfo{margin:0}.pCtrl,.docDl{display:none;flex-direction:column;align-items:center;width:100%}.docDl{display:flex}.seekBar{width:100%;height:.5rem;margin-top:2rem;border-radius:5rem;background:#adb5bd;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.dlBtn{margin:2rem .5rem 0;padding:.75rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}footer{padding:2.5rem 1.5rem 2rem;font-size:.75rem}footer a{text-decoration:underline;color:inherit} \ No newline at end of file +body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#eee;position:relative}p{line-height:1.5}.icon{width:1.5rem;height:1.5rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#modal{display:flex;flex-direction:column;position:absolute;z-index:1;width:100%;bottom:0;transition:top .2s ease-out,opacity .1s ease-out;transform:translateZ(0)}#close{align-self:end;padding:1rem;cursor:pointer;line-height:0}#keyView,#copyView,#qrView{display:flex;flex-direction:column;align-items:center;margin:0 1rem}#keyView p,#copyView p,#qrView p{margin:2rem;text-align:center}#copyURL,#dlKey{display:flex;width:100%;align-items:center;justify-content:center;border-radius:5rem;padding:1rem 1.5rem;border:none;outline:none;cursor:pointer;box-sizing:border-box}#copyURL span,#dlKey span{margin-left:.5rem}#qrView h3{margin:2rem 2rem 0}#qrView p{margin:.5rem 2rem 0}#qr{margin:2rem;padding:2rem;background:#fff;border-radius:.5rem}header{display:flex;justify-content:flex-start;flex-direction:column;aspect-ratio:1}.headerImgC{display:grid;grid-template-columns:auto;grid-template-rows:auto;height:100%;overflow:hidden}#cover{grid-column:1;grid-row:1;width:100%;height:100%;-o-object-position:top center;object-position:top center;-o-object-fit:cover;object-fit:cover}#logo{max-height:6rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;grid-column:1;grid-row:1;align-self:center;justify-self:center}#topActions{flex-direction:row-reverse;justify-content:space-between}#topActions>div{display:flex}#topActions a{padding:1rem;cursor:pointer;line-height:0}main{padding:1rem;display:flex;flex-direction:column;align-items:center;text-align:center}#profilePhoto{width:10rem;height:10rem;border-radius:100%;box-sizing:content-box;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-6rem}#info{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:1rem;line-height:1.25;word-break:break-word}.name{font-weight:bold;font-size:1.5rem;margin:0}.bizname{font-size:.9rem;margin:.5rem 0 0 0;opacity:.8}.sub,.textC{font-size:1rem;white-space:pre-line;line-height:1.5}.sub{font-size:.9rem;margin-top:.5rem;opacity:.8}.textC{margin:1rem}#cta{display:flex;align-items:center;border-radius:5rem;margin-top:2rem;padding:1rem 1.5rem;cursor:pointer;line-height:0;width:100%;justify-content:center;box-sizing:border-box}#cta .icon{margin-right:.5rem}#cta p{margin:0}.actions{width:100%;margin-top:2rem;display:flex;flex-wrap:wrap;justify-content:center}.actionsC{width:33.33%}.actionBtn{padding:.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.actionBtn a{border-radius:100%;padding:1rem;line-height:0}.actionBtn p{margin:.5rem 0 0;font-size:.9rem}.secBtn{padding:1rem}.featured{display:flex;flex-direction:column;justify-content:center;margin:2rem 0 0}.section{font-weight:bold;text-align:center;font-size:1.3rem;padding:1rem 0}.media{overflow:hidden;border-radius:1rem;margin-top:1rem}.media 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:flex;flex-direction:column;justify-content:space-evenly;align-items:center}video{width:100%}.controls{padding:1rem;font-size:.9rem;text-align:center;width:100%;box-sizing:border-box}.pCtrl,.docDl{display:none;flex-direction:column;align-items:center;width:100%}.docDl{display:flex}.seekBar{width:100%;height:.5rem;margin:1.5rem 0 .5rem;border-radius:5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.dlBtn{margin:1rem 0 .5rem;padding:1rem;border-radius:5rem;line-height:0;cursor:pointer}.pause{display:none}.title{font-size:1rem;font-weight:bold;margin:0}.prodInfo .sub{margin:-1rem 0 0}.price{margin:1rem 0 0;font-size:1rem;font-weight:bold}.label{display:inline-block;font-size:1rem;margin:1rem 0 .5rem;border-radius:5rem;letter-spacing:1px;padding:1rem 1.5rem}.label p{margin:0}footer{padding:4rem 1rem 2rem;font-size:.9rem;text-align:center}footer a{text-decoration:underline;color:inherit} \ No newline at end of file diff --git a/assets/styles/T1.scss b/assets/styles/T1.scss index e06ddca..d866b63 100755 --- a/assets/styles/T1.scss +++ b/assets/styles/T1.scss @@ -1,12 +1,28 @@ +// General body { margin: 0 auto; width: 100%; padding: 0; max-width: 30rem; - color: #fff; + color: #eee; position: relative; } +p { + line-height: 1.5; +} +.icon { + width: 1.5rem; + height: 1.5rem; +} +a { + text-decoration: none; + user-select: none; +} + +// Modal #modal { + display: flex; + flex-direction: column; position: absolute; z-index: 1; width: 100%; @@ -14,110 +30,115 @@ body { transition: top 0.2s ease-out, opacity 0.1s ease-out; transform: translateZ(0); } -#closeModal { - display: flex; - justify-content: flex-end; - margin: 1rem 1rem 0 0; -} #close { - padding: 0.75rem; + align-self: end; + padding: 1rem; cursor: pointer; line-height: 0; } -.icon { - width: 1.5rem; - height: 1.5rem; -} -#modalView, +#keyView, #copyView, -#qrView, -#keyInfo { +#qrView { display: flex; flex-direction: column; align-items: center; -} -#copyView, -#keyInfo { + margin: 0 1rem; p { - margin: 1rem 2em 2rem; + margin: 2rem; text-align: center; } } #copyURL, #dlKey { - display: inline-flex; + display: flex; + width: 100%; align-items: center; + justify-content: center; border-radius: 5rem; - padding: 0.75rem 1.5rem; + padding: 1rem 1.5rem; border: none; outline: none; cursor: pointer; + box-sizing: border-box; span { margin-left: 0.5rem; } } #qrView { - h2, + h3 { + margin: 2rem 2rem 0; + } p { - margin: 0 2rem 0.5rem; + margin: 0.5rem 2rem 0; } } #qr { - margin: 1rem 2rem 2rem; + margin: 2rem; padding: 2rem; background: #fff; border-radius: 0.5rem; } +// Heder header { display: flex; - align-items: center; - justify-content: center; - position: relative; - padding: 6rem 3rem; - box-sizing: border-box; + justify-content: flex-start; + flex-direction: column; + aspect-ratio: 1; +} +.headerImgC { + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + height: 100%; + overflow: hidden; +} +#cover { + grid-column: 1; + grid-row: 1; + width: 100%; + height: 100%; + object-position: top center; + object-fit: cover; } #logo { max-height: 6rem; - text-align: center; - color: gray; pointer-events: none; user-select: none; + grid-column: 1; + grid-row: 1; + align-self: center; + justify-self: center; } #topActions { flex-direction: row-reverse; justify-content: space-between; - position: absolute; - left: 1rem; - right: 0; - top: 1rem; & > div { display: flex; } a { - padding: 0.75rem; + padding: 1rem; cursor: pointer; - border-radius: 100%; line-height: 0; - margin-right: 1rem; } } + +// Body main { padding: 1rem; -} -#profile { display: flex; flex-direction: column; align-items: center; - img { - width: 7rem; - height: 7rem; - border-radius: 100%; - text-align: center; - pointer-events: none; - user-select: none; - margin-top: -4.5rem; - } + text-align: center; +} +#profilePhoto { + width: 10rem; + height: 10rem; + border-radius: 100%; + box-sizing: content-box; + pointer-events: none; + user-select: none; + margin-top: -6rem; } #info { display: flex; @@ -130,30 +151,48 @@ main { } .name { font-weight: bold; - font-size: 1.25rem; + font-size: 1.5rem; margin: 0; } -.jobtitle { - font-size: 0.875rem; - margin: 0.25rem 0 0 0; -} .bizname { - font-size: 0.875rem; + font-size: 0.9rem; margin: 0.5rem 0 0 0; - opacity: 0.6; + opacity: 0.8; } -.desc, +.sub, .textC { - font-size: 0.875rem; + font-size: 1rem; white-space: pre-line; line-height: 1.5; - margin: 1rem; +} +.sub { + font-size: 0.9rem; + margin-top: 0.5rem; + opacity: 0.8; } .textC { - font-size: 1rem; - margin: 2rem 1rem; + margin: 1rem; +} +#cta { + display: flex; + align-items: center; + border-radius: 5rem; + margin-top: 2rem; + padding: 1rem 1.5rem; + cursor: pointer; + line-height: 0; + width: 100%; + justify-content: center; + box-sizing: border-box; + .icon { + margin-right: 0.5rem; + } + p { + margin: 0; + } } .actions { + width: 100%; margin-top: 2rem; display: flex; flex-wrap: wrap; @@ -170,57 +209,32 @@ main { justify-content: center; a { border-radius: 100%; - padding: 0.75rem; + padding: 1rem; line-height: 0; } p { margin: 0.5rem 0 0; - font-size: 0.875rem; + font-size: 0.9rem; } } -.secondary { - margin-top: 1.25rem; -} .secBtn { padding: 1rem; } -a { - text-decoration: none; - user-select: none; -} -#cta { - display: flex; - justify-content: center; - width: 100%; -} -#vcard { - display: flex; - align-items: center; - border-radius: 5rem; - margin-top: 1.5rem; - padding: 0.75rem 1.5rem; - cursor: pointer; - line-height: 0; - .icon { - margin-right: 0.5rem; - } - p { - margin: 0; - } -} -.attachments { - margin-top: 1.5rem; + +// Featured Content +.featured { display: flex; flex-direction: column; justify-content: center; + margin: 2rem 0 0; } .section { font-weight: bold; text-align: center; - font-size: 1.5rem; - margin: 3rem 1rem 1rem; + font-size: 1.3rem; + padding: 1rem 0; } -.content { +.media { overflow: hidden; border-radius: 1rem; margin-top: 1rem; @@ -256,41 +270,12 @@ video { width: 100%; } .controls { - padding: 2rem 1rem; - font-size: 0.875rem; + padding: 1rem; + font-size: 0.9rem; text-align: center; width: 100%; 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; - p { - margin: 0; - } -} -.title { - font-size: 1.125rem; - font-weight: bold; - margin: 0 0 0.5rem; -} -.mediaInfo { - margin: 0; -} .pCtrl, .docDl { display: none; @@ -304,16 +289,15 @@ video { .seekBar { width: 100%; height: 0.5rem; - margin-top: 2rem; + margin: 1.5rem 0 0.5rem; border-radius: 5rem; - background: #adb5bd; appearance: none; cursor: pointer; } .playPause, .dlBtn { - margin: 2rem 0.5rem 0; - padding: 0.75rem; + margin: 1rem 0 0.5rem; + padding: 1rem; border-radius: 5rem; line-height: 0; cursor: pointer; @@ -321,11 +305,39 @@ video { .pause { display: none; } + +// Product Card +.title { + font-size: 1rem; + font-weight: bold; + margin: 0; +} +.prodInfo .sub { + margin: -1rem 0 0; +} +.price { + margin: 1rem 0 0; + font-size: 1rem; + font-weight: bold; +} +.label { + display: inline-block; + font-size: 1rem; + margin: 1rem 0 0.5rem; + border-radius: 5rem; + letter-spacing: 1px; + padding: 1rem 1.5rem; + p { + margin: 0; + } +} + footer { - padding: 2.5rem 1.5rem 2rem; - font-size: 0.75rem; + padding: 4rem 1rem 2rem; + font-size: 0.9rem; + text-align: center; a { text-decoration: underline; color: inherit; } -} \ No newline at end of file +} diff --git a/assets/styles/T3.min.css b/assets/styles/T3.min.css new file mode 100644 index 0000000..f9bcd66 --- /dev/null +++ b/assets/styles/T3.min.css @@ -0,0 +1 @@ +body{margin:0 auto;width:100%;padding:0;max-width:30rem;color:#eee;position:relative}p{line-height:1.5}.icon{width:1.5rem;height:1.5rem}a{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#modal{display:flex;flex-direction:column;position:absolute;z-index:1;width:100%;bottom:0;transition:top .2s ease-out,opacity .1s ease-out;transform:translateZ(0)}#close{align-self:end;padding:1rem;cursor:pointer;line-height:0}#keyView,#copyView,#qrView{display:flex;flex-direction:column;align-items:center;margin:0 1rem;text-align:center}#keyView p,#copyView p,#qrView p{margin:2rem}#copyURL,#dlKey{display:flex;width:100%;align-items:center;justify-content:center;border-radius:.5rem;padding:1rem 1.5rem;border:none;outline:none;cursor:pointer;box-sizing:border-box}#copyURL span,#dlKey span{margin-left:.5rem}#qrView h3{margin:2rem 2rem 0}#qrView p{margin:.5rem 2rem 0}#qr{margin:2rem;padding:2rem;background:#fff;border-radius:.5rem}header{display:flex;justify-content:flex-start;flex-direction:column;aspect-ratio:1}.headerImgC{display:grid;grid-template-columns:auto;grid-template-rows:auto;height:100%;overflow:hidden}#cover{grid-column:1;grid-row:1;width:100%;height:100%;-o-object-position:top center;object-position:top center;-o-object-fit:cover;object-fit:cover}#logo{max-height:6rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;grid-column:1;grid-row:1;align-self:center;justify-self:center}#topActions{flex-direction:row-reverse;justify-content:space-between}#topActions>div{display:flex}#topActions a{padding:1rem;cursor:pointer;line-height:0}main{padding:1rem;display:flex;flex-direction:column;align-items:start}#profilePhoto{width:10rem;height:10rem;border-radius:.5rem;box-sizing:content-box;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-6rem}#info{display:flex;flex-direction:column;justify-content:center;align-items:start;margin-top:1rem;line-height:1.25;word-break:break-word;padding:.25rem 1rem}.name{font-weight:bold;font-size:1.5rem;margin:0}.bizname{font-size:.9rem;margin:.5rem 0 0 0;opacity:.8}.sub,.textC{font-size:1rem;white-space:pre-line;line-height:1.5}.sub{font-size:.9rem;margin-top:.5rem;opacity:.8}.textC{margin:1rem}#cta{display:flex;align-items:center;border-radius:.5rem;margin-top:2rem;padding:1rem 1.5rem;cursor:pointer;line-height:0;justify-content:center;box-sizing:border-box}#cta .icon{margin-right:.5rem}#cta p{margin:0}.actions{width:100%;margin-top:2rem;display:grid;grid-gap:1rem;grid-template-columns:1fr 1fr}.actionBtn{display:flex;flex-direction:row;align-items:center;justify-content:start}.actionBtn a{border-radius:.5rem;padding:1rem;line-height:0}.actionBtn p{margin:0 0 0 .75rem;font-size:.9rem;white-space:nowrap}.secondary{grid-template-columns:repeat(auto-fill, minmax(3.5rem, 1fr))}.featured{display:flex;flex-direction:column;justify-content:center;margin:3rem 0 0}.section{font-weight:bold;font-size:1.3rem;padding:.5rem 1rem;margin-bottom:1rem}.media{overflow:hidden;border-radius:.5rem;margin-top:1rem}.media 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:flex;flex-direction:column;justify-content:space-evenly;align-items:center}video{width:100%}.controls{padding:1rem;font-size:.9rem;width:100%;box-sizing:border-box}.pCtrl,.docDl{display:none;align-items:center;justify-content:start;width:100%;margin:1rem 0 0}.docDl{display:flex}.fileSize{margin:0 0 0 1rem}.currentTime{margin:0 .5rem 0 1rem}.seekBar{width:100%;height:.5rem;border-radius:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.playPause,.dlBtn{padding:1rem;border-radius:.5rem;line-height:0;cursor:pointer;order:-1}.pause{display:none}.title{font-size:1rem;font-weight:bold;margin:0}.prodInfo .sub{margin:-1rem 0 0}.price{margin:1rem 0 0;font-size:1rem;font-weight:bold}.label{display:inline-block;font-size:1rem;margin:1rem 0 0;border-radius:.5rem;letter-spacing:1px;padding:1rem 1.5rem}.label p{margin:0}footer{padding:4rem 1rem 2rem;font-size:.9rem;text-align:center}footer a{text-decoration:underline;color:inherit} \ No newline at end of file diff --git a/assets/styles/T3.scss b/assets/styles/T3.scss new file mode 100755 index 0000000..e9361c8 --- /dev/null +++ b/assets/styles/T3.scss @@ -0,0 +1,344 @@ +// General +body { + margin: 0 auto; + width: 100%; + padding: 0; + max-width: 30rem; + color: #eee; + position: relative; +} +p { + line-height: 1.5; +} +.icon { + width: 1.5rem; + height: 1.5rem; +} +a { + text-decoration: none; + user-select: none; +} + +// Modal +#modal { + display: flex; + flex-direction: column; + position: absolute; + z-index: 1; + width: 100%; + bottom: 0; + transition: top 0.2s ease-out, opacity 0.1s ease-out; + transform: translateZ(0); +} +#close { + align-self: end; + padding: 1rem; + cursor: pointer; + line-height: 0; +} +#keyView, +#copyView, +#qrView { + display: flex; + flex-direction: column; + align-items: center; + margin: 0 1rem; + text-align: center; + p { + margin: 2rem; + } +} +#copyURL, +#dlKey { + display: flex; + width: 100%; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + padding: 1rem 1.5rem; + border: none; + outline: none; + cursor: pointer; + box-sizing: border-box; + span { + margin-left: 0.5rem; + } +} +#qrView { + h3 { + margin: 2rem 2rem 0; + } + p { + margin: 0.5rem 2rem 0; + } +} +#qr { + margin: 2rem; + padding: 2rem; + background: #fff; + border-radius: 0.5rem; +} + +// Heder +header { + display: flex; + justify-content: flex-start; + flex-direction: column; + aspect-ratio: 1; +} +.headerImgC { + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; + height: 100%; + overflow: hidden; +} +#cover { + grid-column: 1; + grid-row: 1; + width: 100%; + height: 100%; + object-position: top center; + object-fit: cover; +} +#logo { + max-height: 6rem; + pointer-events: none; + user-select: none; + grid-column: 1; + grid-row: 1; + align-self: center; + justify-self: center; +} +#topActions { + flex-direction: row-reverse; + justify-content: space-between; + & > div { + display: flex; + } + a { + padding: 1rem; + cursor: pointer; + line-height: 0; + } +} + +// Body +main { + padding: 1rem; + display: flex; + flex-direction: column; + align-items: start; +} +#profilePhoto { + width: 10rem; + height: 10rem; + border-radius: 0.5rem; + box-sizing: content-box; + pointer-events: none; + user-select: none; + margin-top: -6rem; +} +#info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + margin-top: 1rem; + line-height: 1.25; + word-break: break-word; + padding: 0.25rem 1rem; +} +.name { + font-weight: bold; + font-size: 1.5rem; + margin: 0; +} +.bizname { + font-size: 0.9rem; + margin: 0.5rem 0 0 0; + opacity: 0.8; +} +.sub, +.textC { + font-size: 1rem; + white-space: pre-line; + line-height: 1.5; +} +.sub { + font-size: 0.9rem; + margin-top: 0.5rem; + opacity: 0.8; +} +.textC { + margin: 1rem; +} +#cta { + display: flex; + align-items: center; + border-radius: 0.5rem; + margin-top: 2rem; + padding: 1rem 1.5rem; + cursor: pointer; + line-height: 0; + justify-content: center; + box-sizing: border-box; + .icon { + margin-right: 0.5rem; + } + p { + margin: 0; + } +} +.actions { + width: 100%; + margin-top: 2rem; + display: grid; + grid-gap: 1rem; + grid-template-columns: 1fr 1fr; +} +.actionBtn { + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; + a { + border-radius: 0.5rem; + padding: 1rem; + line-height: 0; + } + p { + margin: 0 0 0 0.75rem; + font-size: 0.9rem; + white-space: nowrap; + } +} +.secondary { + grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); +} + +// Featured Content +.featured { + display: flex; + flex-direction: column; + justify-content: center; + margin: 3rem 0 0; +} +.section { + font-weight: bold; + font-size: 1.3rem; + padding: 0.5rem 1rem; + margin-bottom: 1rem; +} +.media { + overflow: hidden; + border-radius: 0.5rem; + margin-top: 1rem; + img { + display: block; + pointer-events: none; + user-select: none; + width: 100%; + } +} +.embedded { + position: relative; + padding-top: 56.25%; + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} +.music, +.video { + width: 100%; +} +.mediaC { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; +} +video { + width: 100%; +} +.controls { + padding: 1rem; + font-size: 0.9rem; + width: 100%; + box-sizing: border-box; +} +.pCtrl, +.docDl { + display: none; + align-items: center; + justify-content: start; + width: 100%; + margin: 1rem 0 0; +} +.docDl { + display: flex; +} +.fileSize { + margin: 0 0 0 1rem; +} +.currentTime { + margin: 0 0.5rem 0 1rem; +} +.seekBar { + width: 100%; + height: 0.5rem; + border-radius: 0.5rem; + appearance: none; + cursor: pointer; +} +.playPause, +.dlBtn { + padding: 1rem; + border-radius: 0.5rem; + line-height: 0; + cursor: pointer; + order: -1; +} +.pause { + display: none; +} + +// Product Card +.title { + font-size: 1rem; + font-weight: bold; + margin: 0; +} +.prodInfo .sub { + margin: -1rem 0 0; +} +.price { + margin: 1rem 0 0; + font-size: 1rem; + font-weight: bold; +} +.label { + display: inline-block; + font-size: 1rem; + margin: 1rem 0 0; + border-radius: 0.5rem; + letter-spacing: 1px; + padding: 1rem 1.5rem; + p { + margin: 0; + } +} + +footer { + padding: 4rem 1rem 2rem; + font-size: 0.9rem; + text-align: center; + a { + text-decoration: underline; + color: inherit; + } +} diff --git a/components/Attachment.vue b/components/Attachment.vue index 8d9f559..1cb7510 100755 --- a/components/Attachment.vue +++ b/components/Attachment.vue @@ -15,7 +15,13 @@ class="w-12 h-12 rounded object-contain" v-if="imageAttached" :src="content[type].url" - :title="`${type == 'logo' ? 'Brand logo' : 'Card holder\'s photo'}`" + :title="`${ + type == 'logo' + ? 'Brand logo' + : type == 'photo' + ? 'Card holder\'s photo' + : 'Cover image' + }`" />