1033 lines
66 KiB
Plaintext
1033 lines
66 KiB
Plaintext
---
|
||
import Layout from '../../layouts/Layout.astro';
|
||
---
|
||
<Layout title='Drawing Game'>
|
||
<main>
|
||
<div id="parentMainContainer"class="hidden">
|
||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
|
||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
|
||
</div>
|
||
<div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||
<div id="star-container"></div>
|
||
</div>
|
||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
|
||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||
</div>
|
||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||
<button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
|
||
<div class="flex flex-row z-50 place-items-end clip-art">
|
||
<img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
|
||
<div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
|
||
<img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
|
||
<img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
|
||
|
||
<!-- Content -->
|
||
<div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
|
||
<p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
|
||
<button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
|
||
<a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
|
||
<div class="w-full max-w-6xl bg-white rounded-lg">
|
||
<div class="flex justify-between p-3">
|
||
<p class="text-[19px] font-[700]">Attempt 2</p>
|
||
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
|
||
</div>
|
||
<div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
|
||
<img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
|
||
|
||
<button id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
|
||
<button id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
|
||
|
||
<div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
|
||
<h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
|
||
<p class="text-sm" id="imageDescription">Description goes here.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||
</main>
|
||
|
||
</Layout>
|
||
<script src="/saveGameAI.js" is:inline></script>
|
||
<script is:inline>
|
||
const jsonData = [
|
||
{
|
||
"src": "/assets/back.jpeg",
|
||
"title": "Image Title 1",
|
||
"description": "Description for image 1 goes here."
|
||
},
|
||
{
|
||
"src": "/assets/background.jpg",
|
||
"title": "Image Title 2",
|
||
"description": "Description for image 2 goes here."
|
||
},
|
||
{
|
||
"src": "/assets/backgroundImage.png",
|
||
"title": "Image Title 3",
|
||
"description": "Description for image 3 goes here."
|
||
},
|
||
{
|
||
"src": "/assets/beanieImage.png",
|
||
"title": "Image Title 4",
|
||
"description": "Description for image 4 goes here."
|
||
}
|
||
];
|
||
let currentSlide = 0;
|
||
function updateSlide(){
|
||
const slide = jsonData[currentSlide];
|
||
document.getElementById('slideImage').src = slide.src;
|
||
document.getElementById('imageTitle').textContent = slide.title;
|
||
document.getElementById('imageDescription').textContent = slide.description;
|
||
}
|
||
document.getElementById('nextButton').addEventListener('click', () => {
|
||
currentSlide = (currentSlide + 1) % jsonData.length;
|
||
console.log(currentSlide)
|
||
updateSlide();
|
||
})
|
||
document.getElementById('prevButton').addEventListener('click', () => {
|
||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||
updateSlide();
|
||
})
|
||
updateSlide();
|
||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||
function closeGallery(){
|
||
parentMainContainer.classList.add('hidden');
|
||
gallerySliderId.classList.add('hidden');
|
||
|
||
}
|
||
function showAnimation() {
|
||
const clipArt = document.querySelector('.clip-art');
|
||
clipArt.classList.add('show');
|
||
}
|
||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||
|
||
const drawingZone = {
|
||
x: 0,
|
||
y: 0,
|
||
width: window.innerWidth,
|
||
height: window.innerHeight,
|
||
};
|
||
let topLogoWidth;
|
||
let muteIconWidth;
|
||
let galleryIconWidth;
|
||
let resetIconWidth;
|
||
let tickIconWidth;
|
||
let cancelIconWidth;
|
||
var assetsList = {}
|
||
var snapshotButton;
|
||
let submitButton;
|
||
let galleryButton;
|
||
let formattedDateTime;
|
||
let shortUniqueID;
|
||
let scoreTotal = 0;
|
||
let noticeWidth;
|
||
let noticeHeight;
|
||
let muteIcon;
|
||
let retryButton;
|
||
let maxScore;
|
||
if(isMobile){
|
||
topLogoWidth = 4.5;
|
||
muteIconWidth = 1.65;
|
||
resetIconWidth = 1.40;
|
||
tickIconWidth = 1.21;
|
||
cancelIconWidth = 1.08;
|
||
galleryIconWidth = 2;
|
||
}else if(isTab){
|
||
topLogoWidth = 4.5;
|
||
muteIconWidth = 1.6;
|
||
resetIconWidth = 1.43;
|
||
tickIconWidth = 1.29;
|
||
cancelIconWidth = 1.18;
|
||
galleryIconWidth = 1.81;
|
||
}else{
|
||
topLogoWidth = 6;
|
||
muteIconWidth = 1.3;
|
||
resetIconWidth = 1.26;
|
||
tickIconWidth = 1.222;
|
||
cancelIconWidth = 1.185;
|
||
galleryIconWidth = 1.345;
|
||
}
|
||
|
||
if(isMobile){
|
||
submitWidth = 250;
|
||
submitHeight = 110;
|
||
noticeWidth = 100;
|
||
noticeHeight = 0;
|
||
downloadWidth = 67;
|
||
downloadHeight = 200;
|
||
learningWidth = 200;
|
||
learningHeight = 400
|
||
}else {
|
||
submitWidth = 380;
|
||
submitHeight = 95;
|
||
noticeWidth = 0;
|
||
noticeHeight = 0;
|
||
downloadWidth = 180;
|
||
downloadHeight = 70;
|
||
learningWidth = 450;
|
||
learningHeight = 400
|
||
}
|
||
|
||
gameResult = [];
|
||
window.onload = function() {
|
||
currentDate = new Date();
|
||
formattedDateTime = currentDate.toLocaleString();
|
||
// console.log("Page loaded on: " + formattedDateTime);
|
||
};
|
||
function generateShortUniqueID(length) {
|
||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||
let result = '';
|
||
for (let i = 0; i < length; i++) {
|
||
const randomIndex = Math.floor(Math.random() * characters.length);
|
||
result += characters.charAt(randomIndex);
|
||
}
|
||
return result;
|
||
}
|
||
// shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
|
||
// console.log(shortUniqueID);
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
const paramsID = params.get('id');
|
||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||
.then(response => response.json())
|
||
.then(({data}) => {
|
||
// console.log(data)
|
||
// colorList = data.colors;
|
||
const {image} = data;
|
||
assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
|
||
// console.log(assetsList)
|
||
|
||
const config = {
|
||
type: Phaser.AUTO,
|
||
width: window.innerWidth,
|
||
height: window.innerHeight,
|
||
backgroundColor: '#ffffff',
|
||
scale: {
|
||
mode: Phaser.Scale.FIT,
|
||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||
},
|
||
scene: {
|
||
preload: preload,
|
||
create: create,
|
||
update: update,
|
||
},
|
||
};
|
||
const game = new Phaser.Game(config);
|
||
})
|
||
|
||
.catch(error => {
|
||
console.error('Error fetching initial data:', error);
|
||
});
|
||
const customWidth = window.innerWidth;
|
||
const customHeight = window.innerHeight;
|
||
let graphics;
|
||
let isDrawing = false;
|
||
let selectedColor = '#f00f0f'; // Default color
|
||
let brushSize = 10; // Default brush size
|
||
let customCursor;
|
||
const cursorSizeMultiplier = 1;
|
||
let isErasing = false;
|
||
let snapNotice;
|
||
let colorList;
|
||
|
||
function preload() {
|
||
this.load.image('outline', assetsList.image);
|
||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
||
this.load.image('colorButton', '/assets/color_button.png');
|
||
}
|
||
|
||
function create() {
|
||
const params = new URLSearchParams(window.location.search);
|
||
const paramsID = params.get('id');
|
||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||
.then(response => response.json())
|
||
.then(({ data }) => {
|
||
// console.log(data.colors)
|
||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||
const baseFontSize = 24;
|
||
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
|
||
let wrapWidth;
|
||
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
|
||
const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
|
||
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
|
||
// this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
|
||
})
|
||
.catch(error => {
|
||
console.error('Error fetching initial data:', error);
|
||
});
|
||
// window.load
|
||
|
||
const borderBottom = this.add.graphics();
|
||
const x = 0; const y = 54;
|
||
const lineWidth = window.innerWidth;
|
||
borderBottom.lineStyle(1, 0x0348A8);
|
||
borderBottom.setAlpha(0.2);
|
||
borderBottom.beginPath();
|
||
borderBottom.moveTo(x, y);
|
||
borderBottom.lineTo(x + lineWidth, y);
|
||
borderBottom.strokePath();
|
||
|
||
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
|
||
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
||
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||
|
||
|
||
retryButton.setInteractive().on('pointerdown', () => {
|
||
// window.location.reload();
|
||
graphics.clear();
|
||
});
|
||
|
||
|
||
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||
|
||
// submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
|
||
// submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
|
||
// font: '600 30px Quicksand',
|
||
// fill: '#fff',
|
||
// backgroundColor: 'blue',
|
||
// padding: { x: 20, y: 10 },
|
||
// });
|
||
submitButton.setVisible(true);
|
||
submitButton.setInteractive().on('pointerdown', () => {
|
||
submitUserData(this);
|
||
showAnimation();
|
||
parentMainContainer.classList.remove('hidden');
|
||
if(isMobile){
|
||
colorContainer.style.display = 'none';
|
||
// parentMainContainer.classList.remove('hidden');
|
||
}
|
||
});
|
||
|
||
galleryButton.setInteractive().on('pointerdown', () => {
|
||
parentMainContainer.classList.remove('hidden');
|
||
gallerySliderId.classList.remove('hidden');
|
||
});
|
||
|
||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||
if(!isMobile){
|
||
// this.add.text(customWidth / 10, 20, "Drawing", textStyle);
|
||
// this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||
} else {
|
||
// this.add.text(customWidth / 30, 0, "Drawing", textStyle);
|
||
// this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
|
||
}
|
||
const outlineImage = this.add.image(customWidth / 2, customHeight / 2.2, 'outline');
|
||
if(isMobile){
|
||
outlineImage.setDepth(1).setScale(0.30);
|
||
}else if(isTab){
|
||
outlineImage.setDepth(1).setScale(0.40);
|
||
} else{
|
||
outlineImage.setDepth(1).setScale(0.65);
|
||
}
|
||
graphics = this.add.graphics();
|
||
const colorContainer = document.createElement('div');
|
||
colorContainer.style.zIndex = '1';
|
||
colorContainer.style.position = 'absolute';
|
||
colorContainer.style.top = '13%';
|
||
colorContainer.style.left = '10px';
|
||
colorContainer.style.display = 'flex';
|
||
colorContainer.style.marginBottom = '0';
|
||
if(!isMobile){
|
||
colorContainer.style.top = '10%';
|
||
colorContainer.style.flexDirection = 'column';
|
||
}
|
||
if(isMobile){
|
||
colorContainer.style.display = 'none';
|
||
colorContainer.style.flexDirection = 'row';
|
||
|
||
}
|
||
colorContainer.style.backgroundColor = '#FFFFFF';
|
||
colorContainer.style.padding = '30px 20px';
|
||
colorContainer.style.borderRadius = '80px';
|
||
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
|
||
colorContainer.style.left = '0px';
|
||
colorContainer.style.top = '50%';
|
||
colorContainer.style.transform = 'translate(0, -50%)';
|
||
colorContainer.style.border = '1px solid #F9F9F9';
|
||
|
||
let colorEraserCont = document.createElement('div');
|
||
colorEraserCont.style.display = 'flex';
|
||
colorEraserCont.style.flexDirection = 'row';
|
||
|
||
colorContainer.appendChild(colorEraserCont);
|
||
|
||
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
|
||
if(!isMobile){
|
||
colorViewButton.setVisible(false);
|
||
}
|
||
colorViewButton.setInteractive().on('pointerdown', () => {
|
||
if(colorContainer.style.display === 'block') {
|
||
colorContainer.style.display = 'none';
|
||
}else{
|
||
colorContainer.style.display = 'block';
|
||
}
|
||
});
|
||
|
||
|
||
// Create the color picker
|
||
const colorPicker = document.createElement('input');
|
||
colorPicker.type = 'color';
|
||
colorPicker.value = selectedColor;
|
||
colorPicker.className = 'color-picker';
|
||
colorPicker.style.marginBottom = '0px';
|
||
colorPicker.style.marginTop = '-0px';
|
||
colorPicker.style.marginRight = '15px';
|
||
// colorPicker.style.padding = '1px 1px';
|
||
// colorPicker.style.outline = 'none';
|
||
if (!isMobile) {
|
||
colorPicker.style.marginBottom = '15px';
|
||
colorPicker.style.width = '46px';
|
||
colorPicker.style.height = '46px';
|
||
} else {
|
||
colorPicker.style.width = '40px';
|
||
colorPicker.style.height = '40px';
|
||
}
|
||
colorPicker.style.border = '3px solid #05b3a4';
|
||
colorPicker.style.borderRadius = '20%';
|
||
colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||
colorPicker.addEventListener('input', (event) => {
|
||
if (!isErasing) {
|
||
selectedColor = event.target.value; // Update selectedColor if not erasing
|
||
}
|
||
});
|
||
// Append the color picker to the color container data
|
||
|
||
// const colors = data.colors;
|
||
// var colors = colorList;
|
||
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
|
||
// var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
|
||
// const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
|
||
const buttonSize = 60;
|
||
const buttonSpacing = 5;
|
||
// Create a container div for the color buttons
|
||
const colorButtonsContainer = document.createElement('div');
|
||
colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
|
||
colorButtonsContainer.style.flexDirection = 'column'; //** */
|
||
if(!isMobile){
|
||
colorButtonsContainer.style.flexDirection = 'column';
|
||
}
|
||
// Align the color buttons to the left of the viewport
|
||
const buttonX = 30; // Adjusted position (e.g., 10px from the left)
|
||
const colorPaletteY = drawingZone.y - 20; // Position it at the top of the drawing zone
|
||
// Keep track of the selected color
|
||
let selectedButton = null;
|
||
|
||
colors.forEach((color, index) => {
|
||
const x = buttonX + index * (buttonSize + buttonSpacing);
|
||
const button = document.createElement('button');
|
||
|
||
// Make the button transparent
|
||
button.style.backgroundColor = 'transparent';
|
||
|
||
// Remove any border or outline styles
|
||
button.style.border = 'none';
|
||
button.style.outline = 'none';
|
||
|
||
// Other button styles remain the same
|
||
// ${color}
|
||
// Create the SVG element with dynamic fill color
|
||
if (!isMobile) {
|
||
// pencilSize = '150px';
|
||
button.style.width = `${buttonSize}px`;
|
||
button.style.height = `${buttonSize}px`;
|
||
} else {
|
||
// pencilSize = '150px';
|
||
// button.style.width = `${buttonSize}px`;
|
||
// button.style.height = `${buttonSize}px`;
|
||
// pencilSize = '40px';
|
||
button.style.width = `45px`;
|
||
button.style.height = `45px`;
|
||
}
|
||
button.innerHTML = `
|
||
<svg width="125" height="25" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
|
||
<g style="mix-blend-mode:multiply">
|
||
<path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
|
||
</g>
|
||
<g style="mix-blend-mode:screen" opacity="0.6">
|
||
<path d="M122.791 10.5199C122.791 10.5199 121.651 10.4399 121.491 12.3699C121.491 12.3699 121.591 10.9699 122.791 10.5199Z" fill="#F8F8F7"/>
|
||
</g>
|
||
<path d="M-33.199 19.2499C-34.279 17.1299 -35.079 14.9299 -34.989 12.5199C-34.939 11.0099 -34.659 8.80989 -33.869 7.47989C-33.869 7.47989 -30.569 1.92989 -26.809 1.39989L95.731 0.839893C95.731 0.839893 88.811 5.8299 90.831 14.2499C92.581 21.5899 95.611 23.1699 95.611 23.1699C95.611 23.1699 -27.549 23.9999 -27.699 23.9999C-30.259 24.0199 -32.189 21.2099 -33.199 19.2499Z" fill="${color}"/>
|
||
<path d="M90.8307 14.2499C88.8107 5.82992 95.7307 0.839922 95.7307 0.839922C95.7307 0.839922 96.5407 0.649921 97.0507 1.30992C97.5507 1.96992 96.9307 22.8199 96.9307 22.8199C96.9307 22.8199 96.1707 23.1699 95.6207 23.1699C95.6207 23.1699 92.5907 21.5899 90.8407 14.2499H90.8307Z" fill="#ffffff"/>
|
||
<path d="M92.4112 13.1799C91.3612 6.26989 97.0512 1.30989 97.0512 1.29988L122.901 10.5299C122.901 10.5299 121.821 10.2699 121.521 12.0599C121.231 13.7699 122.611 15.3799 123.471 15.1399C123.351 15.2599 123.221 15.3799 123.071 15.4699C122.231 15.9699 102.251 21.3799 96.9212 22.8199C96.0312 21.9799 93.2812 18.9599 92.4112 13.1799Z" fill="${color}"/>
|
||
<path style="mix-blend-mode:screen" opacity="0.7" d="M94.4812 1.94991L-30.1688 3.0899C-29.1588 2.2499 -28.0088 1.5699 -26.8188 1.3999L95.7212 0.839905C95.7212 0.839905 95.2012 1.21991 94.4912 1.93991C94.4912 1.93991 94.4812 1.93991 94.4712 1.94991H94.4812Z" fill="${color}"/>
|
||
<path style="mix-blend-mode:multiply" d="M92.5108 19.1599C94.0408 22.3399 95.6108 23.1699 95.6108 23.1699C95.6108 23.1699 -27.5492 23.9999 -27.6992 23.9999C-30.2592 24.0199 -32.1892 21.2099 -33.1992 19.2499L92.5108 19.1599Z" fill="url(#paint6_linear_3573_1528)"/>
|
||
<path style="mix-blend-mode:multiply" opacity="0.8" d="M92.5209 19.1599C93.9909 19.8999 94.2509 19.0799 94.2509 19.0799C95.2909 21.1199 96.4109 22.3299 96.9209 22.8199C96.9209 22.8199 96.1609 23.1699 95.6109 23.1699C95.6109 23.1699 94.0509 22.3399 92.5109 19.1599H92.5209Z" fill="url(#paint7_linear_3573_1528)"/>
|
||
<path style="mix-blend-mode:multiply" d="M94.251 19.0799L121.591 13.2999C121.901 14.4599 122.831 15.3199 123.481 15.1399C123.361 15.2599 123.231 15.3799 123.081 15.4699C122.241 15.9699 102.261 21.3799 96.931 22.8199C96.421 22.3299 95.291 21.1199 94.261 19.0799H94.251Z" fill="url(#paint8_linear_3573_1528)"/>
|
||
<g style="mix-blend-mode:screen" opacity="0.1">
|
||
<path d="M95.9608 2.42987C95.9608 2.42987 95.0908 1.32987 94.5008 1.92987C95.2108 1.20987 95.7308 0.82987 95.7308 0.82987C95.7308 0.82987 96.5408 0.639869 97.0508 1.29987C97.0508 1.29987 96.5908 1.70987 95.9708 2.42987H95.9608Z" fill="${color}"/>
|
||
</g>
|
||
<path opacity="0.4" d="M95.9609 2.42987C96.5909 1.70987 97.0409 1.29987 97.0409 1.29987L122.901 10.5299C122.901 10.5299 122.271 10.3899 121.841 11.1199L121.651 11.0799L95.9609 2.43987V2.42987Z" fill="${color}"/>
|
||
<path style="mix-blend-mode:overlay" opacity="0.8" d="M93.0608 7.24991L91.4508 6.39991L-34.4192 8.76991C-34.2692 8.29991 -34.0892 7.84991 -33.8692 7.47991C-33.8692 7.47991 -33.4192 6.72991 -32.6692 5.74991L92.3308 4.69991L93.8808 5.44991L121.521 12.0599C121.461 12.4199 121.481 12.7699 121.551 13.0999L93.0608 7.24991Z" fill="url(#paint10_linear_3573_1528)"/>
|
||
<path d="M77.6709 0.759924L81.1909 0.739923C78.8909 3.42992 72.7809 12.3099 80.8009 23.3399C79.8809 23.3399 78.9309 23.3499 77.9509 23.3599C69.8509 12.6599 75.1409 3.90992 77.6709 0.759924Z" fill="url(#paint11_linear_3573_1528)"/>
|
||
<path d="M-1.92906 1.1199L77.6809 0.759903C75.1509 3.9199 69.8609 12.6699 77.9609 23.3599C56.9909 23.4999 21.8709 23.7399 -2.36906 23.8999C-10.7591 12.5699 -3.86906 3.3299 -1.92906 1.1199Z" fill="${color}"/>
|
||
<path opacity="0.6" d="M6.38071 11.5899L58.1407 10.6999C58.1407 10.6999 65.4307 9.98993 66.7607 14.0799C66.7607 14.0799 67.9207 18.5799 62.8807 19.4999L5.36071 19.6799C5.36071 19.6799 2.74072 19.7899 1.57072 18.0199C0.400719 16.2499 1.20071 12.3099 6.38071 11.5999V11.5899Z" fill="#ffffff"/>
|
||
<path d="M7.50074 11.4999L56.8107 10.6499C56.8107 10.6499 63.7607 9.97992 65.0207 13.8699C65.0207 13.8699 66.1207 18.1599 61.3207 19.0299L6.53074 19.1999C6.53074 19.1999 4.04074 19.2999 2.92074 17.6199C1.80074 15.9299 2.57074 12.1799 7.50074 11.4999Z" fill="#ffffff70"/>
|
||
<g opacity="0.6">
|
||
<g style="mix-blend-mode:screen" opacity="0.8">
|
||
<path d="M94.1011 2.33987C94.1011 2.33987 89.2511 6.86987 90.7611 13.9899C90.7611 13.9899 89.4911 7.60987 94.1011 2.33987Z" fill="#F8F8F7"/>
|
||
</g>
|
||
<g style="mix-blend-mode:screen" opacity="0.8">
|
||
<path d="M94.7212 4.03987C94.7212 4.03987 91.3312 8.57987 92.4612 13.5499C92.4612 13.5499 91.2712 10.2599 94.7212 4.03987Z" fill="#F8F8F7"/>
|
||
</g>
|
||
</g>
|
||
<path style="mix-blend-mode:screen" opacity="0.8" d="M79.6012 2.07988C79.6012 2.07988 77.3112 4.52988 76.5512 7.60988C76.5512 7.60988 76.4412 9.19988 74.3912 9.06988C72.3412 8.94988 -5.1188 10.3099 -5.1188 10.3099C-5.1188 10.3099 -7.9988 10.9699 -8.3088 8.83988C-8.6088 6.70988 -6.1188 2.34988 -4.29881 2.04988C-2.47881 1.75988 78.1912 1.50988 78.1912 1.50988C78.1912 1.50988 80.2512 1.28988 79.6012 2.06988V2.07988Z" fill="url(#paint14_linear_3573_1528)"/>
|
||
<path style="mix-blend-mode:multiply" d="M74.5509 17.1199C75.2209 19.0999 76.3109 21.1899 77.9609 23.3699C56.9909 23.5099 21.8709 23.7499 -2.36906 23.9099C-4.14906 21.5099 -5.23907 19.1999 -5.82907 17.0299L74.5609 17.1199H74.5509Z" fill="url(#paint15_linear_3573_1528)"/>
|
||
<defs>
|
||
<linearGradient id="paint0_linear_3573_1528" x1="123.151" y1="13.9754" x2="122.087" y2="9.86632" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.12" stop-color="#881913"/>
|
||
<stop offset="0.53" stop-color="#CA3418"/>
|
||
<stop offset="1" stop-color="#EB5C37"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint1_linear_3573_1528" x1="124.053" y1="23.1306" x2="122.178" y2="6.751" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#721C0D"/>
|
||
<stop offset="0.35" stop-color="#491C0E"/>
|
||
<stop offset="0.9" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint2_linear_3573_1528" x1="30.7266" y1="22.0303" x2="30.1754" y2="0.66354" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.11" stop-color="#5E1104"/>
|
||
<stop offset="0.55" stop-color="#DE3313"/>
|
||
<stop offset="1" stop-color="#EA562A"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint3_linear_3573_1528" x1="98.7993" y1="14.0938" x2="90.164" y2="7.46254" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.12" stop-color="#881913"/>
|
||
<stop offset="0.53" stop-color="#CC361A"/>
|
||
<stop offset="0.59" stop-color="#DA4727"/>
|
||
<stop offset="0.65" stop-color="#E35330"/>
|
||
<stop offset="0.74" stop-color="#E95A35"/>
|
||
<stop offset="1" stop-color="#EB5C37"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint4_linear_3573_1528" x1="106.626" y1="23.7951" x2="109.063" y2="2.27873" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.12" stop-color="#881913"/>
|
||
<stop offset="0.53" stop-color="#CA3418"/>
|
||
<stop offset="1" stop-color="#EB5C37"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint5_linear_3573_1528" x1="32.7047" y1="1.02997" x2="33.1363" y2="8.59623" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.1" stop-color="white"/>
|
||
<stop offset="0.72" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint6_linear_3573_1528" x1="31.0748" y1="27.8663" x2="31.2566" y2="15.6366" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#721C0D"/>
|
||
<stop offset="0.35" stop-color="#491C0E"/>
|
||
<stop offset="0.9" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint7_linear_3573_1528" x1="95.4797" y1="23.146" x2="93.4037" y2="17.3432" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#721C0D"/>
|
||
<stop offset="0.35" stop-color="#491C0E"/>
|
||
<stop offset="0.9" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint8_linear_3573_1528" x1="109.97" y1="21.5463" x2="107.895" y2="13.3528" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="#721C0D"/>
|
||
<stop offset="0.35" stop-color="#491C0E"/>
|
||
<stop offset="0.9" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint9_linear_3573_1528" x1="109.12" y1="7.20142" x2="109.703" y2="5.67219" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.28" stop-color="white"/>
|
||
<stop offset="0.9" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint10_linear_3573_1528" x1="44.6929" y1="-6.07285" x2="42.3312" y2="28.5009" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="white"/>
|
||
<stop offset="0.9" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint11_linear_3573_1528" x1="76.7851" y1="25.5965" x2="78.0173" y2="0.368542" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.03" stop-color="#6D6D6C"/>
|
||
<stop offset="0.89" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint12_linear_3573_1528" x1="35.6096" y1="26.5751" x2="36.1045" y2="-8.47478" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.11" stop-color="#5E1104"/>
|
||
<stop offset="0.55" stop-color="#CF0F14"/>
|
||
<stop offset="1" stop-color="#E40426"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint13_linear_3573_1528" x1="34.2885" y1="23.4606" x2="32.9234" y2="2.31828" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.03" stop-color="#6D6D6C"/>
|
||
<stop offset="0.89" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint14_linear_3573_1528" x1="35.7513" y1="-3.06963" x2="35.62" y2="10.0918" gradientUnits="userSpaceOnUse">
|
||
<stop stop-color="white"/>
|
||
<stop offset="0.9" stop-color="white"/>
|
||
</linearGradient>
|
||
<linearGradient id="paint15_linear_3573_1528" x1="36.0594" y1="24.0621" x2="36.0012" y2="15.0485" gradientUnits="userSpaceOnUse">
|
||
<stop offset="0.03" stop-color="#9D3D3D"/>
|
||
<stop offset="0.89" stop-color="white"/>
|
||
</linearGradient>
|
||
</defs>
|
||
</svg>`;
|
||
// button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`
|
||
// if(isMobile){
|
||
// button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
|
||
// } else{
|
||
// button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`
|
||
// } //** */
|
||
button.style.marginRight = `${buttonSpacing}px`;
|
||
button.addEventListener('click', () => {
|
||
// Remove the border from the previously selected button, if any
|
||
if (selectedButton) {
|
||
selectedButton.style.border = 'none';
|
||
selectedButton.style.scale = '1';
|
||
selectedButton.style.transform = 'translateX(0px)';
|
||
selectedButton.style.marginTop = '0px';
|
||
selectedButton.style.marginBottom = '0px';
|
||
}
|
||
// Set the new selected color
|
||
selectedColor = color;
|
||
// Add a border or tick mark to indicate the selected color to the current button
|
||
button.style.scale = '1.1';
|
||
if(!isMobile){
|
||
button.style.transform = 'translateX(0.75rem)';
|
||
button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
|
||
button.style.marginTop = '5px';
|
||
button.style.marginBottom = '5px';
|
||
} else{
|
||
button.style.transform = 'translateX(0.75rem)';
|
||
button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
|
||
button.style.marginTop = '5px';
|
||
button.style.marginBottom = '5px';
|
||
// button.style.border = "2px solid";
|
||
// button.style.borderColor = color;
|
||
// button.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||
// button.style.borderRadius = '20%';
|
||
}
|
||
// Update the selectedButton variable to the current button
|
||
selectedButton = button;
|
||
});
|
||
// Append the color button to the color buttons container
|
||
colorButtonsContainer.appendChild(button);
|
||
});
|
||
const colorPreview = document.createElement('div');
|
||
colorPreview.style.width = '40px';
|
||
colorPreview.style.height = '40px';
|
||
colorPreview.style.backgroundColor = 'blue';
|
||
// Append the color buttons container to the color container
|
||
colorContainer.appendChild(colorButtonsContainer);
|
||
// Append the color container to the document body
|
||
document.body.appendChild(colorContainer);
|
||
// Create a container div for both buttons
|
||
const buttonsContainer = document.createElement('div');
|
||
buttonsContainer.style.position = 'absolute';
|
||
buttonsContainer.style.display = 'flex';
|
||
buttonsContainer.style.flexDirection = 'row';
|
||
buttonsContainer.style.top = '50%';
|
||
// buttonsContainer.style.transform = 'translate(0, -50%)';
|
||
// buttonsContainer.style.marginTop = '30px';
|
||
|
||
|
||
if(!isMobile){
|
||
// buttonsContainer.style.position = 'fixed';
|
||
buttonsContainer.style.top = '10%';
|
||
buttonsContainer.style.flexDirection = 'column';
|
||
buttonsContainer.style.marginLeft = '60px';
|
||
buttonsContainer.style.marginTop = '0%';
|
||
}
|
||
buttonsContainer.style.left = '20px';
|
||
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
|
||
document.body.appendChild(buttonsContainer);
|
||
// Create the Clear button
|
||
const clearButton = document.createElement('button');
|
||
clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
|
||
// clearButton.style.border = '3px solid blue';
|
||
// clearButton.style.color = 'blue';
|
||
// clearButton.style.width = 'fit-content';
|
||
// clearButton.style.marginRight = '10px';
|
||
if(isMobile){
|
||
clearButton.style.padding = '2px 8px';
|
||
clearButton.style.display = 'none';
|
||
buttonsContainer.style.top = '9.5%';
|
||
buttonsContainer.style.marginLeft = '30px';
|
||
} else {
|
||
clearButton.style.padding = '5px 10px';
|
||
}
|
||
// clearButton.style.fontWeight = 'bold';
|
||
// clearButton.style.borderRadius = '20%';
|
||
// clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
|
||
clearButton.addEventListener('click', () => {
|
||
clearDrawing();
|
||
});
|
||
colorViewButton.setInteractive().on('pointerdown', () => {
|
||
if(eraserButton.style.display === 'block') {
|
||
eraserButton.style.display = 'none';
|
||
}else{
|
||
eraserButton.style.display = 'block';
|
||
}
|
||
})
|
||
// Create the Eraser button
|
||
const eraserButton = document.createElement('button');
|
||
if(isMobile){
|
||
eraserButton.style.display = 'none';
|
||
}
|
||
// eraserButton.textContent = 'Eraser';
|
||
eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
|
||
eraserButton.style.color = 'blue';
|
||
// eraserButton.style.border = '3px solid blue';
|
||
// eraserButton.style.color = 'white';
|
||
eraserButton.style.width = 'fit-content';
|
||
eraserButton.style.marginRight = '15px';
|
||
// eraserButton.style.marginTop = '0px';
|
||
eraserButton.style.marginBottom = '0px';
|
||
if(isMobile){
|
||
eraserButton.style.padding = '4px 4px';
|
||
}else{
|
||
eraserButton.style.padding = '5px 9px';
|
||
eraserButton.style.top = '50%';
|
||
eraserButton.style.marginBottom = '15px';
|
||
}
|
||
eraserButton.style.fontWeight = 'bold';
|
||
eraserButton.style.borderRadius = '20%';
|
||
eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
|
||
eraserButton.addEventListener('click', () => {
|
||
isErasing = !isErasing;
|
||
if (isErasing) {
|
||
eraserButton.style.border = '2px solid #0348A8';
|
||
} else {
|
||
// Return to drawing mode
|
||
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
|
||
eraserButton.style.color = 'blue';
|
||
eraserButton.style.border = 'none';
|
||
}
|
||
});
|
||
// Add the Clear and Eraser buttons to the container
|
||
// colorPicker.appendChild(eraserButton);
|
||
// colorPicker.appendChild(eraserButton);
|
||
// colorPicker.appendChild(eraserButton);
|
||
|
||
colorEraserCont.append(colorPicker);
|
||
colorEraserCont.append(eraserButton);
|
||
// colorContainer.appendChild(eraserButton);
|
||
const sliderContainer = document.createElement('div');
|
||
sliderContainer.style.backgroundColor = '#fff';
|
||
|
||
sliderContainer.className = 'slider-container';
|
||
// sliderContainer.style.position = 'absolute';
|
||
// sliderContainer.style.top = '25%';
|
||
sliderContainer.style.left = '100%';
|
||
// Create the slider
|
||
const slider = document.createElement('input');
|
||
slider.type = 'range';
|
||
slider.min = '2';
|
||
slider.max = '80';
|
||
slider.value = brushSize.toString();
|
||
slider.style.transform = 'rotate(0deg)';
|
||
slider.style.marginTop = '20px';
|
||
slider.style.marginLeft = '0px';
|
||
if(isMobile){
|
||
|
||
}
|
||
// slider.style.width = `${window.innerWidth / 2}px`;
|
||
slider.addEventListener('input', (event) => {
|
||
brushSize = parseInt(event.target.value);
|
||
slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
|
||
slider.style.backgroundColor = '#05b3a4';
|
||
});
|
||
// colorContainer colorButtonsContainer
|
||
colorButtonsContainer.appendChild(slider);
|
||
// sliderContainer.appendChild(slider);
|
||
// buttonsContainer.appendChild(sliderContainer);
|
||
|
||
this.input.on('pointerdown', () => {
|
||
isDrawing = true;
|
||
startDrawing(this.input.x, this.input.y);
|
||
});
|
||
|
||
this.input.on('pointermove', () => {
|
||
if (isDrawing) {
|
||
continueDrawing(this.input.x, this.input.y);
|
||
}
|
||
});
|
||
this.input.on('pointerup', () => {
|
||
if (isDrawing) {
|
||
finishDrawing();
|
||
}
|
||
isDrawing = false;
|
||
});
|
||
customCursor = this.add.graphics();
|
||
customCursor.setDepth(2)
|
||
// Disable the default cursor
|
||
this.input.setDefaultCursor('none');
|
||
const borderThickness = 0;
|
||
const borderColor = 0xffffff; // White color (you can customize this)
|
||
const borderGraphics = this.add.graphics();
|
||
borderGraphics.lineStyle(borderThickness, borderColor);
|
||
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
|
||
function continueDrawing(x, y) {
|
||
// Check if the pointer coordinates are within the drawing zone
|
||
if (
|
||
x >= drawingZone.x &&
|
||
x <= drawingZone.x + drawingZone.width &&
|
||
y >= drawingZone.y &&
|
||
y <= drawingZone.y + drawingZone.height
|
||
) {
|
||
// The pointer is within the drawing zone, so continue drawing
|
||
graphics.lineTo(x, y);
|
||
graphics.strokePath();
|
||
}
|
||
};
|
||
// Add a "Save Snapshot" button
|
||
if(isMobile){
|
||
snapWidth = 70;
|
||
snapHeight = 70;
|
||
} else {
|
||
snapWidth = 200;
|
||
snapHeight = 70;
|
||
}
|
||
snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
|
||
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
|
||
snapshotButton.setInteractive();
|
||
snapshotButton.on('pointerdown', () => {
|
||
captureSnapshot(this);
|
||
});
|
||
snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
|
||
snapNotice.setVisible(false);
|
||
}
|
||
function captureSnapshot(drawingZone) {
|
||
// snapNotice.setVisible(true);
|
||
submitButton.setVisible(false);
|
||
snapshotButton.setVisible(false);
|
||
customCursor.setVisible(false);
|
||
muteIcon.setVisible(false);
|
||
retryButton.setVisible(false);
|
||
galleryButton.setVisible(false);
|
||
|
||
|
||
drawingZone.renderer.snapshot((image) => {
|
||
submitButton.setVisible(true);
|
||
snapshotButton.setVisible(true);
|
||
customCursor.setVisible(true);
|
||
muteIcon.setVisible(true);
|
||
retryButton.setVisible(true);
|
||
galleryButton.setVisible(true);
|
||
|
||
image.style.width = '160px';
|
||
image.style.height = '120px';
|
||
image.style.paddingLeft = '2px';
|
||
document.body.appendChild(image);
|
||
// Download the snapshot as an image
|
||
const link = document.createElement('a');
|
||
link.href = image.src;
|
||
link.download = 'my_drawing.png';
|
||
link.click();
|
||
document.body.removeChild(image);
|
||
// Clear the drawing
|
||
// graphics.clear();
|
||
});
|
||
}
|
||
|
||
// const url = window.location.href;
|
||
// const gameName = url.split('/');
|
||
// const gameType = gameName[3].split('?id=');
|
||
// function submitUserData(drawingZone) {
|
||
// let imageCode;
|
||
// // console.log(drawingZone);
|
||
// drawingZone.renderer.snapshot((image) => {
|
||
// submitButton.setVisible(true);
|
||
// snapshotButton.setVisible(true);
|
||
// customCursor.setVisible(true);
|
||
// image.style.width = '160px';
|
||
// image.style.height = '120px';
|
||
// image.style.paddingLeft = '2px';
|
||
// document.body.appendChild(image);
|
||
// // Download the snapshot as an image
|
||
// const link = document.createElement('a');
|
||
// link.href = image.src;
|
||
// link.download = 'my_drawing.png';
|
||
// link.click();
|
||
// document.body.removeChild(image);
|
||
// imageCode = image.src;
|
||
|
||
|
||
// let userData = {
|
||
// 'userID': 'drawing@beanstalkedu.com',
|
||
// 'gameType': gameType[0],
|
||
// 'gameID': gameType[1],
|
||
// 'screenShot': imageCode
|
||
// // 'starts': formattedDateTime,
|
||
// // 'game_start' : gameStartTime,
|
||
// };
|
||
// console.log(userData);
|
||
|
||
// fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
|
||
// method: 'POST',
|
||
// headers: {
|
||
// 'Content-Type' : 'application/json'
|
||
// },
|
||
// body: JSON.stringify(userData)
|
||
// })
|
||
// .then(response => {
|
||
// if(response.ok){
|
||
// console.log('Data Saved', response)
|
||
// } else{
|
||
// // console.log('Something Wrong', response)
|
||
// }
|
||
// })
|
||
// .catch(error => {
|
||
// console.error('An error occured', error)
|
||
// });
|
||
|
||
// // Clear the drawing
|
||
// // graphics.clear();
|
||
// });
|
||
// };
|
||
// function captureSnapshot(drawingZone) {
|
||
// submitButton.setVisible(false);
|
||
// // snapNotice.setVisible(true);
|
||
// snapshotButton.setVisible(false);
|
||
// customCursor.setVisible(false);
|
||
// drawingZone.renderer.snapshot((image) => {
|
||
// submitButton.setVisible(true);
|
||
// snapshotButton.setVisible(true);
|
||
// customCursor.setVisible(true);
|
||
// image.style.width = '160px';
|
||
// image.style.height = '120px';
|
||
// image.style.paddingLeft = '2px';
|
||
// document.body.appendChild(image);
|
||
// // Download the snapshot as an image
|
||
// const link = document.createElement('a');
|
||
// link.href = image.src;
|
||
// link.download = 'my_drawing.png';
|
||
// link.click();
|
||
// document.body.removeChild(image);
|
||
|
||
// // Clear the drawing
|
||
// // graphics.clear();
|
||
// });
|
||
// }
|
||
function startDrawing(x, y) {
|
||
if (!isErasing) {
|
||
graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
|
||
} else {
|
||
graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
|
||
}
|
||
graphics.beginPath();
|
||
graphics.moveTo(x, y);
|
||
|
||
}
|
||
|
||
function continueDrawing(x, y) {
|
||
if (!isErasing) {
|
||
graphics.lineTo(x, y); // Drawing
|
||
} else {
|
||
graphics.lineTo(x, y); // Erasing by drawing with a white line
|
||
}
|
||
graphics.strokePath();
|
||
}
|
||
|
||
function finishDrawing() {
|
||
// No need for additional actions here
|
||
}
|
||
|
||
function clearDrawing() {
|
||
graphics.clear();
|
||
}
|
||
function update() {
|
||
const slider = document.querySelector('input[type="range"]');
|
||
if (slider && !isDrawing) {
|
||
const sliderValue = parseInt(slider.value);
|
||
const max = parseInt(slider.max);
|
||
const width = slider.offsetWidth;
|
||
const offsetX = (sliderValue - 2) / (max - 2) * width;
|
||
slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
||
};
|
||
const cursorSize = brushSize * cursorSizeMultiplier;
|
||
customCursor.clear(); // Clear the previous frame
|
||
customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
|
||
customCursor.strokeCircle(0, 0, cursorSize);
|
||
// Position the cursor at the current mouse pointer coordinates
|
||
customCursor.x = this.input.x;
|
||
customCursor.y = this.input.y;
|
||
}
|
||
|
||
// function update() {
|
||
// const slider = document.querySelector('input[type="range"]');
|
||
|
||
// if (slider && !isDrawing) {
|
||
// const sliderValue = parseInt(slider.value);
|
||
// const max = parseInt(slider.max);
|
||
// const width = slider.offsetWidth;
|
||
// const offsetX = (sliderValue - 2) / (max - 2) * width;
|
||
// slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
|
||
// }
|
||
|
||
// const cursorSize = brushSize * cursorSizeMultiplier;
|
||
// const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
|
||
|
||
// // Assuming 'this' refers to your Phaser.Scene instance
|
||
// if (!this.customCursor) {
|
||
// // Create the custom cursor sprite
|
||
// this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
|
||
// this.customCursor.setOrigin(0.3, 0.8);
|
||
// }
|
||
|
||
// // Set the tint or fill color dynamically based on the selectedColor
|
||
// const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
|
||
// this.customCursor.setTint(color);
|
||
|
||
// // Resize the cursor
|
||
// this.customCursor.setScale( cursorScale);
|
||
|
||
// // Position the cursor at the current mouse pointer coordinates
|
||
// this.customCursor.x = this.input.x;
|
||
// this.customCursor.y = this.input.y;
|
||
// }
|
||
</script>
|
||
<style>
|
||
.clear-button {
|
||
background-color: blue;
|
||
}
|
||
/* Animation styles */
|
||
@keyframes slideInUp {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(100%); /* Start below the viewport */
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(0); /* End at its original position */
|
||
}
|
||
}
|
||
|
||
.clip-art-container {
|
||
overflow: hidden; /* Prevents overflow during the animation */
|
||
}
|
||
|
||
.clip-art {
|
||
transform: translateX(100%); /* Initially off-screen to the right */
|
||
opacity: 0; /* Initially hidden */
|
||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
|
||
}
|
||
|
||
.clip-art.show {
|
||
transform: translateX(0); /* Move the image into view */
|
||
opacity: 1; /* Fade in */
|
||
}
|
||
.slide{
|
||
display: none;
|
||
}
|
||
.active{
|
||
display: block;
|
||
}
|
||
</style>
|
||
<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> --> |