Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const dropZone = document.getElementById('dropZone');
+ const fileInput = document.getElementById('fileInput');
+ const previewImage = document.getElementById('previewImage');
+ const previewContainer = document.querySelector('.preview-container');
+
+ // Upload handling
+ dropZone.addEventListener('click', () => fileInput.click());
+
+ dropZone.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = 'var(--primary-color)';
+ });
+
+ dropZone.addEventListener('dragleave', () => {
+ dropZone.style.borderColor = '#ddd';
+ });
+
+ dropZone.addEventListener('drop', (e) => {
+ e.preventDefault();
+ dropZone.style.borderColor = '#ddd';
+ const file = e.dataTransfer.files[0];
+ handleFile(file);
+ });
+
+ fileInput.addEventListener('change', (e) => {
+ const file = e.target.files[0];
+ handleFile(file);
+ });
+
+ function handleFile(file) {
+ if (file && file.type.startsWith('image/')) {
+ const reader = new FileReader();
+
+ reader.onload = (e) => {
+ previewImage.src = e.target.result;
+ previewContainer.hidden = false;
+ dropZone.style.display = 'none';
+ };
+
+ reader.readAsDataURL(file);
+ } else {
+ alert('Please upload an image file.');
+ }
+ }
+
+ // Hairstyle and color selection
+ const hairstyleSelect = document.getElementById('hairstyleSelect');
+ const colorSwatches = document.querySelectorAll('.color-swatch');
+
+ hairstyleSelect.addEventListener('change', (e) => {
+ // Here you would implement the hairstyle change logic
+ console.log('Selected hairstyle:', e.target.value);
+ });
+
+ colorSwatches.forEach(swatch => {
+ swatch.addEventListener('click', () => {
+ const color = swatch.dataset.color;
+ // Here you would implement the color change logic
+ console.log('Selected color:', color);
+ });
+ });
+ });
