Pressed Flower Frame Customizer
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.header {
text-align: center;
margin-bottom: 30px;
}
.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;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
cursor: move;
z-index: 3;
}
.flower-options {
display: flex;
gap: 10px;
margin: 20px 0;
justify-content: center;
flex-wrap: wrap;
padding: 10px;
background-color: #f9f9f9;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
}
.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 img {
width: 100%;
height: auto;
max-width: 80px;
max-height: 80px;
object-fit: cover;
border-radius: 5px;
}
.instructions {
background-color: #e8f5e9;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
color: #2e7d32;
line-height: 1.6;
}
.marker {
position: absolute;
width: 12px;
height: 12px;
background-color: red;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
/* Mobile styles */
@media screen and (max-width: 768px) {
.container {
padding: 5px;
}
.header h1 {
font-size: 24px;
}
.instructions {
font-size: 14px;
padding: 10px;
}
.flower-overlay {
width: 25px;
height: 25px;
}
.marker {
width: 6px;
height: 6px;
}
.customization-area {
padding: 10px;
}
.flower-option {
padding: 5px;
font-size: 12px;
}
.flower-option img {
max-width: 48px;
max-height: 48px;
}
}
/* Tablet and Desktop styles */
@media screen and (min-width: 769px) {
.flower-option {
width: auto;
}
#productImage {
max-width: 600px;
}
.flower-option img {
max-width: 80px;
max-height: 80px;
}
.flower-overlay {
width: 50px;
height: 50px;
}
}
</style>
<div class="container">
<div class="instructions">
<strong>How to customize:</strong><br>
1. Select a flower from the options below<br>
2. Click on the image where you want to place the flower<br>
3. Repeat to add more flowers<br>
4. After placing your order, please take a screenshot of the customized layout and email it to info@driedpetalsgallery.com.
</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">
<!-- Flowers will be populated by JavaScript -->
</div>
</div>
</div>
<script>
const flowers = [
{
name: 'Pink',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/pink.png?v=1736576906'
},
{
name: 'Orange',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/orange.png?v=1736576691'
},
{
name: 'Yellow',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/yellow.png?v=1736576305'
},
{
name: 'Red',
image: 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/red.png?v=1736577057'
}
];
let selectedFlower = null;
let isDragging = false;
let currentDragElement = null;
window.onload = function() {
const productImage = document.getElementById('productImage');
productImage.src = 'https://cdn.shopify.com/s/files/1/0858/4328/0160/files/20_inches.jpg?v=1736577347';
setupImageClickHandler();
populateFlowerOptions();
};
function populateFlowerOptions() {
const container = document.getElementById('flowerOptions');
flowers.forEach(flower => {
const div = document.createElement('div');
div.className = 'flower-option';
div.innerHTML = `
<img src="${flower.image}" alt="${flower.name}">
<p>${flower.name}</p>
`;
div.onclick = () => selectFlower(flower, div);
container.appendChild(div);
});
}
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;
addMarkerAndFlower(x, y);
} else {
alert('Please select a flower first!');
}
});
}
function addMarkerAndFlower(x, y) {
const preview = document.getElementById('productPreview');
const marker = document.createElement('div');
marker.className = 'marker';
marker.style.left = x + 'px';
marker.style.top = y + 'px';
preview.appendChild(marker);
const flowerOverlay = document.createElement('img');
flowerOverlay.src = selectedFlower.image;
flowerOverlay.className = 'flower-overlay';
flowerOverlay.style.left = x + 'px';
flowerOverlay.style.top = y + 'px';
flowerOverlay.addEventListener('mousedown', startDragging);
preview.appendChild(flowerOverlay);
}
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 stopDragging() {
if (currentDragElement) {
currentDragElement.style.cursor = 'move';
}
isDragging = false;
currentDragElement = null;
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stopDragging);
}
</script>
</body>