Sunny Summer Frame Customizer
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flower Frame Customizer</title>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.button-container {
display: flex;
gap: 10px;
justify-content: center;
margin: 10px 0;
}
.size-button {
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
background-color: #f8f8f8; /* Light default background */
transition: all 0.3s ease;
font-size: 16px;
color: #666;
}
.size-button.selected { /* Changed from 'active' to 'selected' */
background-color: #2e7d32;
color: white;
border-color: #1b5e20;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
font-weight: bold;
}
.size-button:hover:not(.selected) { /* Don't change color on hover if selected */
background-color: #f0f0f0;
}
.undo-button {
background-color: #f44336;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
.undo-button:hover {
background-color: #d32f2f;
}
.customization-area {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
margin-top: 20px;
width: 100%;
box-sizing: border-box;
}
.product-preview {
margin: 20px auto;
text-align: center;
position: relative;
display: inline-block;
background-color: #fff;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
box-sizing: border-box;
}
#productImage {
max-width: 100%;
height: auto;
border: 1px solid #ddd;
display: block;
margin: 0 auto;
cursor: crosshair;
}
.flower-overlay {
position: absolute;
transform: translate(-50%, -50%);
cursor: move;
z-index: 3;
}
.flower-options {
margin: 20px 0;
padding: 10px;
background-color: #f9f9f9;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
}
.flower-size-section {
margin: 20px 0;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.flower-size-section:last-child {
border-bottom: none;
}
.flower-size-section h4 {
margin: 0 0 10px 0;
color: #2e7d32;
}
.flower-size-container {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.flower-option {
text-align: center;
padding: 5px;
border: 2px solid transparent;
background-color: white;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
width: calc(50% - 20px);
max-width: 150px;
box-sizing: border-box;
}
.flower-option:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.flower-option.selected {
border-color: #4CAF50;
background-color: #e8f5e9;
}
.flower-option[data-size="large"] img {
max-width: 104px;
max-height: 104px;
}
.flower-option[data-size="medium"] img {
max-width: 80px;
max-height: 80px;
}
.flower-option[data-size="small"] img {
max-width: 56px;
max-height: 56px;
}
.instructions {
background-color: #e8f5e9;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
color: #2e7d32;
line-height: 1.6;
}
#productImage.size-15x15 {
max-width: 80% !important;
margin: 0 auto;
display: block;
}
/* Modify the existing media query */
@media screen and (min-width: 769px) {
.flower-option {
width: auto;
}
#productImage {
max-width: 600px;
width: 100%;
}
/* Remove the previous size-15x15 class styles */
}
/* Mobile styles */
@media screen and (max-width: 768px) {
.container {
padding: 5px;
}
.header h1 {
font-size: 24px;
}
.instructions {
font-size: 14px;
padding: 10px;
}
.customization-area {
padding: 10px;
}
.flower-option {
padding: 5px;
font-size: 12px;
}
.flower-option[data-size="large"] img {
max-width: 62px;
max-height: 62px;
}
.flower-option[data-size="medium"] img {
max-width: 48px;
max-height: 48px;
}
.flower-option[data-size="small"] img {
max-width: 34px;
max-height: 34px;
}
.button-container {
flex-direction: column;
align-items: center;
}
.size-button, .undo-button {
width: 100%;
max-width: 200px;
}
}
/* Tablet and Desktop styles */
@media screen and (min-width: 769px) {
.flower-option {
width: auto;
}
#productImage {
max-width: 600px;
}
}
</style>
<div class="container">
<div class="instructions">
<strong>How to customize:</strong><br>
1. Select your preferred frame size<br>
2. Select a flower from the options below<br>
3. Click on the image where you want to place the flower<br>
4. Repeat to add more flowers<br>
5. Use the Undo button to remove the last placed flower<br>
6. After placing your order, please take a screenshot of the customized layout and email it to info@driedpetalsgallery.com.
</div>
<div class="button-container">
<button class="size-button selected" onclick="changeSize('20x20')">20" x 20" Layout</button>
<button class="size-button" onclick="changeSize('15x15')">15" x 15" Layout</button>
<button class="undo-button" onclick="undoLastFlower()">Undo Last Flower</button>
</div>
<div class="customization-area">
<div class="product-preview" id="productPreview">
<img id="productImage" alt="Product Image">
</div>
<h3>Available Flowers</h3>
<div class="flower-options" id="flowerOptions">
<div class="flower-size-section">
<h4>Large Flowers</h4>
<div class="flower-size-container" id="largeFlowers"></div>
</div>
<div class="flower-size-section">
<h4>Medium Flowers</h4>
<div class="flower-size-container" id="mediumFlowers"></div>
</div>
<div class="flower-size-section">
<h4>Small Flowers</h4>
<div class="flower-size-container" id="smallFlowers"></div>
</div>
</div>
</div>
</div>
<script>
const flowers = [
{
name: 'Cosmos',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/Cosmos-remove-background.com.png?v=1736828627',
size: 'large'
},
{
name: 'Red Rose',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/Rose_red-remove-background.com.png?v=1736828627',
size: 'large'
},
{
name: 'White Rose',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/Rose_white-remove-background.com.png?v=1736828627',
size: 'large'
},
{
name: 'Pink Rose',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/Rose_pink-remove-background.com.png?v=1736828627',
size: 'large'
},
{
name: 'Orange Rose',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/orange.png?v=1736576691',
size: 'large'
},
{
name: 'Asiatic Apple Flower',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/Asiatic_apple_flower-remove-background.com.png?v=1736828865',
size: 'medium'
},
{
name: 'Rose Mallow',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/rose_mallow-remove-background.com.png?v=1736828864',
size: 'medium'
},
{
name: 'Rapeseed Flowers',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/Rapeseed_flowers-remove-background.com.png?v=1736828865',
size: 'medium'
},
{
name: 'Lily',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/lily-remove-background.com.png?v=1736828865',
size: 'medium'
},
{
name: 'Ranunculus Acris',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/Ranunculus_acris.png?v=1736828864',
size: 'small'
},
{
name: 'Hydrangea Blue',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/big_leaf_hydrangea_blue-remove-background.com.png?v=1736829997',
size: 'small'
},
{
name: 'Hydrangea Light Pink',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/big_leaf_hydrangea_light_pink-remove-background.com.png?v=1736829996',
size: 'small'
},
{
name: 'Daisy',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/daisy-remove-background.com.png?v=1736829996',
size: 'medium'
},
{
name: 'Asiatic Apple',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/Asiatic_apple-remove-background.com.png?v=1736829996',
size: 'medium'
},
{
name: 'Small Red Rose',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/small_rose-remove-background.com.png?v=1736828865',
size: 'medium'
}
];
const sizeImages = {
'20x20': 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/20inches_sunny_summer.jpg?v=1737086304',
'15x15': 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/15_inches_sunny_summer.jpg?v=1737086304'
};
let selectedFlower = null;
let isDragging = false;
let currentDragElement = null;
let placedFlowers = [];
let currentSize = '20x20';
window.onload = function() {
setupImageClickHandler();
populateFlowerOptions();
changeSize('20x20'); // Initialize with 20x20 layout
};
function changeSize(size) {
currentSize = size;
const productImage = document.getElementById('productImage');
productImage.src = sizeImages[size];
// Update button styles
document.querySelectorAll('.size-button').forEach(button => {
button.classList.remove('selected'); // Changed from 'active' to 'selected'
});
// Find and select the clicked button
const selectedButton = Array.from(document.querySelectorAll('.size-button'))
.find(button => button.textContent.includes(size));
if (selectedButton) {
selectedButton.classList.add('selected'); // Changed from 'active' to 'selected'
}
// Clear all placed flowers when changing size
placedFlowers.forEach(flower => flower.remove());
placedFlowers = [];
}
function populateFlowerOptions() {
const largeContainer = document.getElementById('largeFlowers');
const mediumContainer = document.getElementById('mediumFlowers');
const smallContainer = document.getElementById('smallFlowers');
flowers.forEach(flower => {
const div = document.createElement('div');
div.className = 'flower-option';
div.setAttribute('data-size', flower.size);
div.innerHTML = `
<img src="${flower.image}" alt="${flower.name}">
<p>${flower.name}</p>
`;
div.onclick = () => selectFlower(flower, div);
switch(flower.size) {
case 'large':
largeContainer.appendChild(div);
break;
case 'medium':
mediumContainer.appendChild(div);
break;
case 'small':
smallContainer.appendChild(div);
break;
}
});
}
function selectFlower(flower, element) {
document.querySelectorAll('.flower-option').forEach(el => {
el.classList.remove('selected');
});
element.classList.add('selected');
selectedFlower = flower;
}
function setupImageClickHandler() {
const preview = document.getElementById('productPreview');
const productImage = document.getElementById('productImage');
productImage.addEventListener('click', function(e) {
if (selectedFlower) {
const rect = preview.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
addFlower(x, y);
} else {
alert('Please select a flower first!');
}
});
}
function addFlower(x, y) {
const preview = document.getElementById('productPreview');
const flowerOverlay = document.createElement('img');
flowerOverlay.src = selectedFlower.image;
flowerOverlay.className = 'flower-overlay';
flowerOverlay.style.left = x + 'px';
flowerOverlay.style.top = y + 'px';
const baseSize = window.innerWidth <= 768 ? 25 : 50;
const sizeMultiplier = selectedFlower.size === 'large' ? 1.3 :
selectedFlower.size === 'small' ? 0.7 : 1;
const finalSize = baseSize * sizeMultiplier;
flowerOverlay.style.width = `${finalSize}px`;
flowerOverlay.style.height = `${finalSize}px`;
flowerOverlay.addEventListener('mousedown', startDragging);
preview.appendChild(flowerOverlay);
placedFlowers.push(flowerOverlay);
}
function undoLastFlower() {
if (placedFlowers.length > 0) {
const lastFlower = placedFlowers.pop();
lastFlower.remove();
}
}
function startDragging(e) {
isDragging = true;
currentDragElement = e.target;
currentDragElement.style.cursor = 'grabbing';
const rect = currentDragElement.getBoundingClientRect();
currentDragElement.offsetX = e.clientX - rect.left - rect.width/2;
currentDragElement.offsetY = e.clientY - rect.top - rect.height/2;
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDragging);
}
function drag(e) {
if (isDragging && currentDragElement) {
e.preventDefault();
const preview = document.getElementById('productPreview');
const rect = preview.getBoundingClientRect();
const x = e.clientX - rect.left - currentDragElement.offsetX;
const y = e.clientY - rect.top - currentDragElement.offsetY;
currentDragElement.style.left = x + 'px';
currentDragElement.style.top = y + 'px';
}
}
function changeSize(size) {
currentSize = size;
const productImage = document.getElementById('productImage');
productImage.src = sizeImages[size];
// Set the width directly based on the size
if (size === '15x15') {
productImage.style.width = '80%'; // Scale down to 80%
productImage.style.maxWidth = '480px'; // 80% of 600px
} else {
productImage.style.width = '100%';
productImage.style.maxWidth = '600px';
}
// Update button styles
document.querySelectorAll('.size-button').forEach(button => {
button.classList.remove('selected');
});
// Find and select the clicked button
const selectedButton = Array.from(document.querySelectorAll('.size-button'))
.find(button => button.textContent.includes(size));
if (selectedButton) {
selectedButton.classList.add('selected');
}
// Clear all placed flowers when changing size
placedFlowers.forEach(flower => flower.remove());
placedFlowers = [];
}
function stopDragging() {
if (currentDragElement) {
currentDragElement.style.cursor = 'move';
}
isDragging = false;
currentDragElement = null;
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stopDragging);
}
</script>
</body>