const traits = [
{ id: 1, src: "/content/7eb0c16981f5336bad07e78dd0e3869897893e6a37ad61e91315e1dc5b2a118ai0", zIndex: 9 },
{ id: 2, src: "/content/04dcce63e4c33492e2a8fa697c0f21c5dee792a9c8a5e54b9b5a419e287717a6i0", zIndex: 9 },
{ id: 3, src: "/content/5376c93370b9e75f83044446e1d12aa7e51ca06b325011da938b19095cb4e8ebi0", zIndex: 9 },
{ id: 4, src: "/content/4beac2ec0ff3aadfc97b21a6dc40c05f77724556593a27d9f7a56fcf81f6d40bi0", zIndex: 9 },
{ id: 5, src: "/content/44eb31c6eb7a9637d0c2f4d54334e368c9bb0303b3e3f4fc7a906e27b653c006i0", zIndex: 9 },
{ id: 6, src: "/content/097804f3aecbb82252503a1f96d46df78f94991cf0b9ccaf3a6f754eed873fd0i0", zIndex: 9 },
{ id: 7, src: "/content/658296f7f7604b4efc4677fe789068547b56c1bb31d28d52ee4ab71ce4623624i0", zIndex: 9 },
{ id: 8, src: "/content/dbe525293505dcf4096e246d43f739530adbbe8c06b221a9efdc47ad8aa81b7fi0", zIndex: 9 },
{ id: 9, src: "/content/b94090a85ff239ea67fd200e204c241aa6cdf15e01ea90ef7363ec10e009da24i0", zIndex: 9 },
{ id: 10, src: "/content/51fceabc8612cbb6ce1cdd61e7c1731dae306eb15763167306091edc7ffddf9bi0", zIndex: 9 },
{ id: 11, src: "/content/899cacc4ef555bb1c2c1c61eac18c8e59a74a01d511b89759ea60b5e28ee8290i0", zIndex: 9 },
{ id: 12, src: "/content/998bb85749e07366b6c1243d6c624395aa1b8a085b015abcfbbff6ae5018bc0fi0", zIndex: 9 },
{ id: 13, src: "/content/64c1b68f6ad9227e2622e922721d0e369914fdf326db132feae914200e689b53i0", zIndex: 9 },
{ id: 14, src: "/content/cd31a544f9c81baa073e1182bcfe9459b4770b6613c1b36c215bd1c7b8e74387i0", zIndex: 9 },
{ id: 15, src: "/content/dcd4fb9fc3cc3fc01aa59cc3d99f1b811f0a82df41eb813967c2624ffbc9bd86i0", zIndex: 9 },
{ id: 16, src: "/content/ab0b11a02d38fc50a499ae7b8d09697098ac314b65944ec055cf39b625ecb8d7i0", zIndex: 9 },
{ id: 17, src: "/content/cc6f25f5f4711b75a4720070eb231dd5ded3947464b982d03caa2ab6546f537ei0", zIndex: 9 },
{ id: 18, src: "/content/e037cc58ff3ba82010f0750a5877552df43904b11e0ea9490bbe0c21f3ddd42ai0", zIndex: 9 },
{ id: 19, src: "/content/4b7ca4ec2ed8f3dc9013ceffd1fe56650a771cbe957bf830e69468e11d19afcei0", zIndex: 9 },
{ id: 20, src: "/content/c20bdd12aaddc3167e4a6313fb71aa185b16a9641dd702866045b48d7de986ffi0", zIndex: 9 },
{ id: 21, src: "/content/43fdb441fd8cf7673cd476f5ffbf45f81d7f0bdb48bcdad074e2f31ad50205afi0", zIndex: 9 },
{ id: 22, src: "/content/bd9ec64cfee1c09ff89c823d0cc5bcf557a353817afaa7cee05e541bdee285f7i0", zIndex: 9 },
{ id: 23, src: "/content/4c62ee2807de2686f90c8dce903d7b523d11cfb68d921de2b324a8cb86de5d84i0", zIndex: 9 },
{ id: 24, src: "/content/e0465be04c723efae7d7bf116bd47c59beb2fccbb52eb7b9e08bc11064712808i0", zIndex: 9 },
{ id: 25, src: "/content/148be1673ab4a494e3864c86609a8c53fc4e8034133fd91e7345127f82eb6c69i0", zIndex: 9 },
{ id: 26, src: "/content/35ae4a98bdd7de8a7245ae56d4a3128b0287a60b89da51eb377bfdfe5035adeei0", zIndex: 9 },
];
export function createInteractiveMenu(selectedTraits) {
document.title = "Cypher Punks";
document.body.innerHTML = `
<div class="main">
<div class="img-wrap" id="img-wrap">
<div id="background-square"></div>
<img id="image2" src="https://static-testnet.unisat.io/content/a197daccfb7009b1d8a859c351a40dfe584cc1deff81d6f2b76d9f2896d9775bi0" style="display:none" />
<img id="image3" src="https://static-testnet.unisat.io/content/da7e42f7614df44f6c50ff7dd0502b486a61b5e0524129e116c29e8e150e1b9ai0" style="display:none" />
<img id="image4" src="https://static-testnet.unisat.io/content/09d57650ae4bccaf4c2ee90e30fc850db8f0913a0c164eb031cf7bf7e9367a9ei0" style="display:none" />
<img id="image5" src="https://static-testnet.unisat.io/content/942fe80453012adadf3bc193b48fc00de3cb9df0abff1fb9ca8b89f13af7da3bi0" style="display:none" />
<img id="image6" src="https://static-testnet.unisat.io/content/0fe4a76cdb46c3d3f438eab7bd1293a23f1de59e0c4eb6a28e544f298e730803i0" style="display:none" />
<img id="image7" src="https://static-testnet.unisat.io/content/df6a24f71ff1d010bed8a77ea7bdf41efdc126402b604b7ad3abebae0098719bi0" style="display:none" />
<img id="image8" src="https://static-testnet.unisat.io/content/af46efeee646233f7a06d38ba3f88d00513a5df77a7433fc382cce4707f2c6f6i0" style="display:none" />
<img id="image9" src="https://static-testnet.unisat.io/content/8bb5d8111e71b4606a36a1b48c40513ca1ef6bea5dca026e36b22bf1cff42d0ci0" style="display:none" />
${selectedTraits.map(id => {
const trait = traits.find(t => t.id === id);
return `<img id="trait-${id}" src="${trait.src}" style="position:absolute;z-index:9" />`;
}).join('')}
<div class="menu" id="menu">
<button class="toggle-button" id="toggle-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
</div>
</div>
<div class="modal" id="modal">
<div class="modal-container">
<div class="modal-content">
<div class="button-group basic-group">
<div class="menu-item active">
<button class="modal-button active" id="show-stickers">
<svg class="svg-inline--fa fa-layer-group fa-w-16 nft-icon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="layer-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32" height="32">
<path fill="white" d="M12.41 148.19l224 80c3.47 1.23 7.09 1.84 10.59 1.84s7.12-.61 10.59-1.84l224-80c9.25-3.31 15.41-12.08 15.41-21.83s-6.16-18.52-15.41-21.83l-224-80c-6.7-2.39-14.48-2.39-21.18 0l-224 80C3.16 107.84 0 115.85 0 124.8s3.16 16.98 12.41 21.83zM500.12 268.98l-65.19-23.3c-2.02-1.19-4.4-1.84-6.88-1.84-4.63 0-9.06 1.85-12.31 5.16L256 366.43 96.25 249c-3.25-3.31-7.69-5.16-12.31-5.16-2.48 0-4.86.66-6.88 1.84l-65.19 23.3C3.16 273.29 0 281.3 0 290.25s3.16 16.98 12.41 21.83l224 80c3.47 1.23 7.09 1.84 10.59 1.84s7.12-.61 10.59-1.84l224-80c9.25-3.31 15.41-12.08 15.41-21.83s-6.16-18.52-15.41-21.83zM500.12 397.8l-65.19-23.3c-2.02-1.19-4.4-1.84-6.88-1.84-4.63 0-9.06 1.85-12.31 5.16L256 495.24 96.25 378.82c-3.25-3.31-7.69-5.16-12.31-5.16-2.48 0-4.86.66-6.88 1.84l-65.19 23.3C3.16 402.11 0 410.12 0 419.07s3.16 16.98 12.41 21.83l224 80c3.47 1.23 7.09 1.84 10.59 1.84s7.12-.61 10.59-1.84l224-80c9.25-3.31 15.41-12.08 15.41-21.83s-6.16-18.52-15.41-21.83z"></path>
</svg>
</button>
<span class="text">Stickers</span>
</div>
<div class="menu-item">
<button class="modal-button" id="show-background">
<svg class="nft-icon" fill="#ffff" height="32" width="32" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 458.178 458.178" xml:space="preserve">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier"> <g> <path d="M130.415,277.741C95.083,313.074,45.038,324.723,0,312.697c5.918,22.164,17.568,43.116,34.956,60.504 c52.721,52.721,138.198,52.721,190.919,0c26.361-26.36,26.36-69.099,0-95.459C199.514,251.38,156.776,251.38,130.415,277.741z"></path>
<path d="M212.771,234.276c12.728,4.827,24.403,12.338,34.317,22.252c10.077,10.077,17.456,21.838,22.19,34.378l53.47-53.47 l-56.568-56.569C245.886,201.161,226.908,220.139,212.771,234.276z"></path> <path d="M446.462,57.153c-15.621-15.621-40.948-15.621-56.568,0c-5.887,5.887-54.496,54.496-102.501,102.501l56.568,56.569 l102.501-102.501C462.083,98.101,462.083,72.774,446.462,57.153z">
</path>
</g>
</g>
</svg>
</button>
<span class="text">Background</span>
</div>
<div class="menu-item download-item">
<button class="modal-button" id="show-download">
<svg class="nft-icon" fill="#ffff" height="32" width="32" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 121.93" style="enable-background:new 0 0 122.88 121.93" xml:space="preserve"><g><path d="M8.33,0.02h29.41v20.6H20.36v80.7h82.1V84.79h20.36v37.14H0V0.02H8.33L8.33,0.02z M122.88,0H53.3l23.74,23.18l-33.51,33.5 l21.22,21.22L98.26,44.4l24.62,24.11V0L122.88,0z"/></g></svg>
</button>
<span class="text">Resize</span>
</div>
<div class="indicator" id="indicator">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="center-menu-stickers">
<div class="modal-container">
<div class="modal-content stickers-modal-content">
<div class="stickers-button-group">
<div class="stickers-menu-item active">
<button class="sticker-modal-button active" id="sticker1">
<img src="https://static-testnet.unisat.io/content/f2efc4d689d8b6ecee894c0d4951a1e6fa88f51949c4ecaa9419991dd3d97ee0i0" class="stickers-nft-icon" style="width:45px;height:45px" />
</button>
<p>GM</p>
</div>
<div class="stickers-menu-item">
<button class="sticker-modal-button" id="sticker2">
<img src="https://static-testnet.unisat.io/content/b0cee9c020e3b864b9b80574c923269306134f3104f4e1107a7206c3e045cf3ei0" class="stickers-nft-icon" style="width:45px;height:45px" />
</button>
<p>Yes</p>
</div>
<div class="stickers-menu-item">
<button class="sticker-modal-button" id="sticker3">
<img src="https://static-testnet.unisat.io/content/f7e0f92add48334bb93823a482460962caf381ee3a10835833b35608b15a1026i0" class="stickers-nft-icon" style="width:45px;height:45px" />
</button>
<p>No</p>
</div>
<div class="stickers-menu-item">
<button class="sticker-modal-button" id="sticker4">
<img src="https://static-testnet.unisat.io/content/4ab434a0f68313fbb2d779e6bcd483ca26495e49bedf7982bf78467a46ddd9e9i0" class="stickers-nft-icon" style="width:45px;height:45px" />
</button>
<p>Wen</p>
</div>
<div class="stickers-menu-item">
<button class="sticker-modal-button" id="sticker5">
<img src="https://static-testnet.unisat.io/content/84cd4da98ba4bbff343b813857be67098f6a5028bbb1eead2140dee0a50564b2i0" class="stickers-nft-icon" style="width:45px;height:45px" />
</button>
<p>Fud</p>
</div>
<div class="stickers-menu-item">
<button class="sticker-modal-button" id="sticker6">
<img src="https://static-testnet.unisat.io/content/94af7010c5a279ddb110591f374028a0e39ddef015859602e011f2ba497adab6i0" class="stickers-nft-icon" style="width:45px;height:45px" />
</button>
<p>Micro</p>
</div>
<div class="stickers-menu-item">
<button class="sticker-modal-button" id="sticker7">
<img src="https://static-testnet.unisat.io/content/c4f2e90472f4fd772406677d499f5007fe00f2720a08c1ae70ca834a0e954f86i0" class="stickers-nft-icon" style="width:45px;height:45px" />
</button>
<p>Heart</p>
</div>
<div class="stickers-menu-item">
<button class="sticker-modal-button" id="sticker8">
<img src="https://static-testnet.unisat.io/content/2f57b77249f479ffa81930a5b76c90813e52ca23b3d3b603f5e19ba8b25f9d25i0" class="stickers-nft-icon" style="width:45px;height:45px" />
</button>
<p>GN</p>
</div>
<div class="indicator" id="sticker_indicator">
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="center-menu-background">
<div class="modal-container">
<div class="modal-content color-modal-content">
<div class="color-button-group">
<div class="color-menu-item active">
<button class="color-modal-button active" id="bg-orange" style="padding:0">
<div class="orange-color">
</button>
<p>🟧</p>
</div>
<div class="color-menu-item">
<button class="color-modal-button" id="bg-red" style="padding:0">
<div class="red-color">
</button>
<p>🟥</p>
</div>
<div class="color-menu-item">
<button class="color-modal-button" id="bg-gray" style="padding:0">
<div class="gray-color">
</button>
<p>⬜ </p>
</div>
<div class="color-menu-item">
<button class="color-modal-button" id="bg-pink" style="padding:0">
<div class="pink-color">
</button>
<p>🟪</p>
</div>
<div class="color-menu-item">
<button class="color-modal-button" id="bg-yellow" style="padding:0">
<div class="yellow-color">
</button>
<p>🟨</p>
</div>
<div class="color-menu-item">
<button class="color-modal-button" id="bg-blue" style="padding:0">
<div class="blue-color">
</button>
<p>🟦</p>
</div>
<div class="color-menu-item">
<button class="color-modal-button" id="bg-green" style="padding:0">
<div class="green-color">
</button>
<p>🟩</p>
</div>
<div class="color-menu-item">
<button class="color-modal-button" id="bg-black" style="padding:0">
<div class="black-color">
</button>
<p>⬛</p>
</div>
<div class="indicator" id="color_indicator">
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="center-menu-download">
<div class="modal-container">
<div class="center-menu">
<div class="center-menu-content">
<input type="number" id="canvas-size" value="2000" min="2000" max="10000" step="1000">
<p style="color:#0fc">Resize</p>
<button id="confirm-download" style="margin-top:20px;color:#0fc">Download</button>
</div>
</div>
</div>
</div>
`;
const imgWrap = document.querySelector('.img-wrap');
const menuButton = document.getElementById('toggle-button');
menuButton.style.opacity = 0;
imgWrap.addEventListener('mouseover', () => {
menuButton.style.opacity = 1;
});
imgWrap.addEventListener('mouseout', () => {
menuButton.style.opacity = 0;
});
const modal = document.getElementById("modal");
const centerMenuStickers = document.getElementById(
"center-menu-stickers"
);
const centerMenuBackground = document.getElementById(
"center-menu-background"
);
const centerMenuDownload = document.getElementById(
"center-menu-download"
);
const downloadItem = document.querySelector(".download-item");
const backgroundSquare = document.getElementById("background-square");
const image2 = document.getElementById("image2");
const image3 = document.getElementById("image3");
const image4 = document.getElementById("image4");
const image5 = document.getElementById("image5");
const image6 = document.getElementById("image6");
const image7 = document.getElementById("image7");
const image8 = document.getElementById("image8");
const image9 = document.getElementById("image9");
const menu = document.getElementById("menu");
const toggleButton = document.getElementById("toggle-button");
const images = { image2, image3, image4, image5, image6, image7, image8, image9 };
let currentImage = null;
let isMenuOpen = false;
function isInsidePlatform() {
return window.self !== window.top;
}
function updateDownloadVisibility() {
if (isInsidePlatform()) {
downloadItem.style.display = "none";
} else {
downloadItem.style.display = "flex";
}
}
updateDownloadVisibility();
const style = document.createElement("style");
style.textContent = `
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
margin: 0;
padding: 0;
background-color: #0d0d0d;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.main {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.img-wrap {
position: relative;
width: 100vmin;
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
}
#background-square {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff5500;
z-index: 0;
display: none;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 10;
}
.menu {
position: absolute;
top: 10px;
right: 10px;
z-index: 11;
opacity: 1;
transition: opacity 0.3s ease;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.toggle-button {
background-color: transparent;
color: black;
border: none;
padding: 10px;
cursor: pointer;
outline: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 3;
}
.bar {
width: 20px;
height: 3px;
background-color: black;
margin: 3px;
border-radius: 2px;
}
.modal {
background : rgba(0,0,0,0.6);
image-rendering: pixelated;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
display: none;
padding: 10px;
background-size: contain;
overflow: auto;
}
.modal-container {
height : 100%;
padding : 10px;
position : relative;
}
.modal.active {
display: block;
}
.modal-content {
position: relative;
width: 100%;
max-width: 400px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #141414, #141414);
margin: auto;
z-index: 1000;
border-radius : 10px;
height : 70px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow : 0 0 20px #00ffcc, 0 0 30px #00ffcc, 0 0 40px #00ffcc;
}
.stickers-modal-content {
max-width: 300px !important;
}
.color-modal-content {
max-width: 300px !important;
}
img.nft-logo {
width: 65px;
height: 65px;
position : relative;
}
div.close-button {
margin-right: auto;
transform: rotate(90deg);
cursor: pointer;
opacity: 0.5;
height: 25px;
width: 25px;
position: absolute;
top: 50px;
left: 0;
color : white;
left: auto;
right: 30px;
}
.stickers-button-group {
display: flex;
gap : 4px;
align-items: center;
width : 100%;
padding-left : 5px;
padding-right : 5px;
}
.color-button-group {
display: flex;
gap : 4px;
align-items: center;
width : 100%;
padding-left : 5px;
padding-right : 5px;
}
.button-group {
display: flex;
align-items: center;
width : 210px;
}
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
width : 70px;
position : relative;
}
.stickers-menu-item {
width : 12%;
position : relative;
}
.color-menu-item {
width : 12%;
position : relative;
}
.modal-button.active .nft-icon {
transform: translateY(-32px);
transition: transform 0.3s ease; /* Smooth transition */
}
.sticker-modal-button.active .stickers-nft-icon {
transform: translateY(-25px);
transition: transform 0.3s ease; /* Smooth transition */
}
.color-modal-button.active {
transform: translateY(-23px);
transition: transform 0.3s ease; /* Smooth transition */
}
.orange-color {
width : 32px;
height : 32px;
background-color: #ff5500;
border-radius: 50%;
}
.red-color {
width : 32px;
height : 32px;
background-color: #f50000;
border-radius: 50%;
}
.gray-color {
width : 32px;
height : 32px;
background-color: #ededed;
border-radius: 50%;
}
.pink-color {
width : 32px;
height : 32px;
background-color: #b36cff;
border-radius: 50%;
}
.yellow-color {
width : 32px;
height : 32px;
background-color: #ffD400;
border-radius: 50%;
}
.blue-color {
width : 32px;
height : 32px;
background-color: #6089ff;
border-radius: 50%;
}
.green-color {
width : 32px;
height : 32px;
background-color: #00a900;
border-radius: 50%;
}
.black-color {
width : 32px;
height : 32px;
background-color: #464b4b;
border-radius: 50%;
}
/* Ensure the default state has no transformation */
.nft-icon {
transition: transform 0.3s ease;
z-index : 12;
position : absolute;
}
.stickers-nft-icon {
width : 32px !important;
height :32px !important;
transition: transform 0.3s ease;
z-index : 12;
position : absolute;
}
.menu-item .text {
position : absolute;
color : #fff;
font-weight : 400;
font-size : 0.75em;
letter-spacing : 0.05em;
opacity : 0;
transform : translateY(20px);
transition : 0.5s;
top : 22px;
}
.modal-button.active ~ .text {
opacity: 1;
transform: translateY(10px);
}
.sticker-modal-button.active ~ p {
transform: translateY(-16px);
}
.color-modal-button.active ~ p {
transform: translateY(-8px);
}
.indicator {
position: absolute;
top: -50%;
width: 70px;
height: 70px;
background: linear-gradient(45deg, #141414, #141414);
border: 6px solid #595959f7;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
z-index : -1;
}
#sticker_indicator {
top: -34.5%;
width: 46px;
height: 46px;
left : -2px;
}
#color_indicator {
top: -31.5%;
width: 46px;
height: 46px;
left : -2px;
}
.indicator::before {
content: "";
position: absolute;
top: 50%;
left: -22px;
width: 20px;
height: 20px;
background: transparent;
border-top-right-radius: 20px;
}
.indicator::after {
content: "";
position: absolute;
top: 50%;
right: -22px;
width: 20px;
height: 20px;
background: transparent;
border-top-left-radius: 20px;
}
.modal-button,
.sticker-modal-button,
.color-modal-button {
background-color: transparent;
border: none;
padding: 25px;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.sticker-modal-button
{
padding: 16px !important;
}
.modal-button:hover,
sticker-modal-button:hover,
.color-modal-button:hover {
background-color: rgba(0, 255, 204, 0.1);
}
.button-icon {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.menu-item p {
margin-top: 0px;
font-size: 14px;
color: #ffff;
}
.stickers-menu-item p {
margin-top: 5px;
font-size: 12px;
color: #ffff;
text-align : center;
}
.color-menu-item p {
margin-top: 5px;
font-size: 12px;
color: #ffff;
text-align : center;
}
.center-menu {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background : linear-gradient(45deg, #141414, #141414);
padding: 40px;
border-radius: 10px;
z-index: 4;
box-shadow: 0 0 20px #00ffcc, 0 0 30px #00ffcc, 0 0 40px #00ffcc;
width: 300px;
height: 210px;
justify-content: center;
align-items: center;
}
.center-menu.active {
display: flex;
}
.center-menu-content {
text-align: center;
color: #00ffcc;
text-shadow: 0 0 5px #00ffcc;
}
.color-modal-button:hover {
background-color: rgba(0, 255, 204, 0.1);
box-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc, 0 0 45px #00ffcc;
}
#canvas-size {
width: 100px;
font-size: 16px;
padding: 10px;
text-align: center;
border: 2px solid #00ffcc;
border-radius: 5px;
color: #00ffcc;
background-color: transparent;
margin-bottom: 20px;
}
#confirm-download {
margin-top: 20px;
color: #00ffcc;
display: block;
margin-left: auto;
margin-right: auto;
border: 2px solid #00ffcc;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
background : rgba(0, 255, 204, 0.1);
}
#confirm-download:hover {
background-color: rgb(0 0 0 / 10%);
}
@media only screen and (max-width: 768px) {
.modal-content {
width : 100%;
}
.download-item {
display : none !important;
}
.basic-group {
width : 140px;
}
}
`;
changeBackgroundColor('#ff5500');
const buttons = document.querySelectorAll(".modal-button");
const stickerButtons = document.querySelectorAll(".sticker-modal-button");
const colorButtons = document.querySelectorAll(".color-modal-button");
const indicator = document.querySelector("#indicator");
const s_indicator = document.querySelector("#sticker_indicator");
const c_indicator = document.querySelector("#color_indicator");
const menus = document.querySelectorAll(".menu-item");
buttons.forEach((button, index) => {
button.addEventListener("click", function () {
indicator.style.transform = `translateX(calc(70px * ${0}))`;
buttons.forEach((btn) => btn.classList.remove("active"));
this.classList.add("active");
indicator.style.transform = `translateX(calc(70px * ${index}))`;
const buttonId = this.id;
setTimeout(() => {
handleSelectedMenu(buttonId);
}, 500);
});
});
stickerButtons.forEach((button, index) => {
button.addEventListener("click", function () {
s_indicator.style.transform = `translateX(calc(36.75 px * ${0}))`;
stickerButtons.forEach((btn) => btn.classList.remove("active"));
this.classList.add("active");
s_indicator.style.transform = `translateX(calc(36.75px * ${index}))`;
const buttonId = this.id;
setTimeout(() => {
handleSelectedMenu(buttonId);
}, 500);
});
});
colorButtons.forEach((button, index) => {
button.addEventListener("click", function () {
c_indicator.style.transform = `translateX(calc(36.75px * ${0}))`;
colorButtons.forEach((btn) => btn.classList.remove("active"));
this.classList.add("active");
c_indicator.style.transform = `translateX(calc(36.75px * ${index}))`;
const buttonId = this.id;
setTimeout(() => {
handleSelectedMenu(buttonId);
}, 500);
});
});
function handleSelectedMenu(buttonId) {
switch (buttonId) {
case "show-stickers":
console.log("Button 1 clicked");
centerMenuStickers.classList.add("active");
modal.classList.remove("active");
break;
case "show-background":
console.log("Button 2 clicked");
centerMenuBackground.classList.add("active");
modal.classList.remove("active");
break;
case "show-download":
console.log("Button 3 clicked");
centerMenuDownload.style.display = "block";
modal.classList.remove("active");
break;
case "sticker1":
toggleImage("image2");
break;
case "sticker2":
toggleImage("image3");
break;
case "sticker3":
toggleImage("image4");
break;
case "sticker4":
toggleImage("image5");
break;
case "sticker5":
toggleImage("image6");
break;
case "sticker6":
toggleImage("image7");
break;
case "sticker7":
toggleImage("image8");
break;
case "sticker8":
toggleImage("image9");
break;
case "bg-orange":
changeBackgroundColor("#ff5500");
break;
case "bg-red":
changeBackgroundColor("#f50000");
break;
case "bg-gray":
changeBackgroundColor("#ededed");
break;
case "bg-pink":
changeBackgroundColor("#b36cff");
break;
case "bg-yellow":
changeBackgroundColor("#ffD400");
break;
case "bg-blue":
changeBackgroundColor("#6089ff");
break;
case "bg-green":
changeBackgroundColor("#00a900");
break;
case "bg-black":
changeBackgroundColor("#464b4b");
break;
default:
console.log("Unknown button clicked");
break;
}
}
document.head.appendChild(style);
toggleButton.addEventListener("mouseenter", function () {
if (!isMenuOpen) {
menu.classList.add("active");
}
});
menu.addEventListener("mouseleave", function () {
if (!isMenuOpen) {
menu.classList.remove("active");
}
});
toggleButton.addEventListener("click", function () {
if (!isMenuOpen) {
modal.classList.add("active");
toggleButton.style.pointerEvents = "none";
isMenuOpen = true;
}
});
function toggleImage(imageId) {
if (currentImage === imageId) {
images[currentImage].style.display = "none";
currentImage = null;
} else {
if (currentImage) {
images[currentImage].style.display = "none";
}
images[imageId].style.display = "block";
currentImage = imageId;
}
centerMenuStickers.classList.remove("active");
isMenuOpen = false;
toggleButton.style.pointerEvents = "auto";
}
function changeBackgroundColor(color) {
backgroundSquare.style.backgroundColor = color;
backgroundSquare.style.display = "block";
centerMenuBackground.classList.remove("active");
isMenuOpen = false;
toggleButton.style.pointerEvents = "auto";
}
document
.getElementById("confirm-download")
.addEventListener("click", function () {
const size = parseInt(document.getElementById("canvas-size").value);
if (size >= 2000 && size <=10000) { downloadImage(size); } else { alert("Escolha um tamanho entre 2000x2000 e 10000x10000."); } }); function downloadImage(size) { const canvas=document.createElement("canvas"); const ctx=canvas.getContext("2d"); canvas.width=size; canvas.height=size; const backgroundElement=document.getElementById("background-square"); if (backgroundElement) { ctx.fillStyle=getComputedStyle(backgroundElement).backgroundColor; ctx.fillRect(0, 0, canvas.width, canvas.height); } const traits=document.querySelectorAll('[id^="trait"]'); traits.forEach(traitElement=> {
if (traitElement && traitElement.style.display !== "none") {
ctx.drawImage(traitElement, 0, 0, canvas.width, canvas.height);
}
});
const stickers = [
document.getElementById("image2"),
document.getElementById("image3"),
document.getElementById("image4"),
document.getElementById("image5"),
document.getElementById("image6"),
document.getElementById("image7"),
document.getElementById("image8"),
document.getElementById("image9")
];
stickers.forEach(sticker => {
if (sticker && sticker.style.display !== "none") {
ctx.drawImage(sticker, 0, 0, canvas.width, canvas.height);
}
});
const link = document.createElement("a");
link.download = `custom-image-${size}x${size}.png`;
link.href = canvas.toDataURL("image/png");
link.click();
centerMenuDownload.style.display = "none";
toggleButton.style.pointerEvents = "auto";
isMenuOpen = false;
}
}