Public
Edited
Apr 26
qrCode = {
let qrCode = new qr({
width: 100,
height: 100,
type: "svg",
data: "https://sustainablejoy.org/Contact",
dotsOptions: {
color: qrCodeColor,
type: "dots"
},
cornersSquareOptions: {
type: "dot",
},
cornersDotOptions: {
type: "dot",
},
backgroundOptions: {
color: null,
},
imageOptions: {
crossOrigin: "anonymous",
margin: 20
}
});
return qrCode
}
<div class="container">
<figure class="image">${await FileAttachment("joanna-kosinska-BteMcldTQVo-unsplash.jpg").image()}</figure>
<svg class="svg-overlay" xmlns="http://www.w3.org/2000/svg">
${qrCode._svg}
</svg>
<p class="sub-txt">portal.gift/frame</p>
</div>
<style>
/* Container for the image and SVG overlay */
.container {
position: relative;
width: 800px; /* Set the container width */
height: auto; /* Set the container height */
--blend-mode: luminosity;
}
/* Style the image */
.image {
max-width: 100%; /* Ensure the image doesn't exceed the container width */
height: auto; /* Maintain aspect ratio */
}
/* Style the SVG */
.svg-overlay {
position: absolute;
top: 50px; /* Adjust the top position as needed */
left: 50px; /* Adjust the left position as needed */
mix-blend-mode: var(--blend-mode);
}
.sub-txt {
font-family: 'Roboto', Monospace;
font-size: 11px;
color: ${qrCodeColor};
position: absolute;
top: 140px;
left: 45px;
mix-blend-mode: var(--blend-mode);
}
.gradient {
/* height: 200px; */
background: linear-gradient(in hsl longer hue 45deg, red 0 0);
}
</style>
imgColors = {
let colorThief = new ColorThief();
let img = await FileAttachment("joanna-kosinska-BteMcldTQVo-unsplash.jpg").image()
let rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
const hex = x.toString(16)
return hex.length === 1 ? '0' + hex : hex
}).join('')
let rgbArray = colorThief.getPalette(img)
let hexArray = rgbArray.map(i => {
return rgbToHex(i[0], i[1], i[2]); // #663399
})
return hexArray;
}
qrCodeLive._svg
qrCodeLive = {
let qrCode = new qr({
width: 100,
height: 100,
type: "svg",
data: "LNURL1DP68GURN8GHJ7MR9VAJKUEPWD3HXY6T5WVHXXMMD9AKXUATJD3CZ7EMSGEDRW3CSEUSNH",
dotsOptions: {
color: "blue",
type: "dots"
},
cornersSquareOptions: {
type: "dot",
},
cornersDotOptions: {
type: "dot",
},
backgroundOptions: {
color: null,
},
imageOptions: {
crossOrigin: "anonymous",
margin: 20
}
});
return qrCode
}
<div class="backdrop">
<div class="holographic-container">
<p class="side-txt">Passport Authenticated</p>
<div class="white-box">
<svg class="svg-layer" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
${qrCodeLive._svg}
</svg>
</div>
<p class="side-txt bottom">bitcoin ⚡️ on lightning</p>
</div>
</div>
<style>
.backdrop {
background: white;
width: 250px;
height: 250px;
}
/* Base container styles */
.holographic-container {
width: 250px;
height: 250px;
background: linear-gradient(in hsl longer hue 45deg, red 0 0); /* Adjust colors as needed */
background-size: 222% 222%; /* Control the size of the gradient animation */
animation: fluid 5s ease infinite alternate; /* Adjust the animation duration and easing */
positoin: relative;
border-radius: 20px;
opacity: 0.8;
/* margin-left: 100px;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-45deg) scale(1.2);
transform: rotateY(20deg) rotateX(60deg) rotateZ(-10deg);
transform: rotateY(15deg) rotateX(50deg) rotateZ(-15deg);
box-shadow: -40px 80px 80px -10px rgba(0, 0, 0, 0.3); */
}
.white-box {
width: 210px;
height: 210px;
background-color: white;
position: absolute;
top: 20px; /* Adjust to vertically center the box */
left: 20px; /* Adjust to horizontally center the box */
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
object-fit: contain;
}
/* Style the SVG */
.svg-layer {
width: 100%;
height: auto;
/* border: 1px solid red; */
}
.side-txt {
font-family: 'Roboto', Monospace;
font-size: 11px;
color: white;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.bottom {
margin-top: 210px;
}
/* Animation keyframes for holographic effect */
@keyframes fluid {
from {
background-position: top;
}
to {
background-position: bottom;
}
}
</style>
qrReader = import('https://cdn.jsdelivr.net/npm/vue-qrcode-reader@5.3.6/+esm')
qrCodeForTheWay = {
let qrCode = new qr({
width: 100,
height: 100,
type: "svg",
data: "LNURL1DP68GURN8GHJ7MR9VAJKUEPWD3HXY6T5WVHXXMMD9AKXUATJD3CZ7DZK2YU9YEC5E3TTU",
dotsOptions: {
color: "#e5b80b",
type: "dots"
},
cornersSquareOptions: {
type: "dot",
},
cornersDotOptions: {
type: "dot",
},
backgroundOptions: {
color: null,
},
imageOptions: {
crossOrigin: "anonymous",
margin: 20
}
});
return qrCode
}
qrCodeForTheWay._svg
viewof qrDownLoadBtn = Inputs.button("Download QR Code PNG", {value: null, reduce: () => qrCodeForTheWay.download({ name: "qr-give-to-the-way", extension: "png" })})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
