From 5565e7902bb25ffd12a58d715cc0fe21feccecd1 Mon Sep 17 00:00:00 2001 From: Harshad Date: Fri, 30 Jan 2026 14:58:44 +0530 Subject: [PATCH] initial logic shift from PHP to JS --- assets/js/home.js | 86 ++++++++++++++++++++++++ index.php | 166 ++++++++++++---------------------------------- 2 files changed, 129 insertions(+), 123 deletions(-) diff --git a/assets/js/home.js b/assets/js/home.js index e69de29..77f31c5 100644 --- a/assets/js/home.js +++ b/assets/js/home.js @@ -0,0 +1,86 @@ +const petCategory = ["Dog", "Cat", "Bird", "Fish", "Reptile", "Other"]; +const musicGenre = ["Pop", "Rock", "Classical", "Jazz", "Country", "Electronic", "Other"]; + +document.addEventListener('alpine:init', () => { + Alpine.data('petSongForm', () => ({ + petCategory: petCategory, + musicGenre: musicGenre, + isCropping: false, + isSubmitting: false, + cropper: null, + formData: { + petName: '', + petType: '', + musicVibe: '', + yourName: '', + croppedImage: '' + }, + init() { + // Listen for file selection + const fileInput = document.getElementById('image'); + fileInput.addEventListener('change', (e) => this.handleFileSelect(e)); + }, + + handleFileSelect(e) { + const file = e.target.files[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = (event) => { + this.isCropping = true; + const cropperImg = document.getElementById('cropper-image'); + cropperImg.src = event.target.result; + + if (this.cropper) this.cropper.destroy(); + this.cropper = new Cropper(cropperImg, { + aspectRatio: 1, + viewMode: 1, + autoCropArea: 1 + }); + }; + reader.readAsDataURL(file); + }, + + acceptCrop() { + const canvas = this.cropper.getCroppedCanvas({ width: 600, height: 600 }); + this.formData.croppedImage = canvas.toDataURL('image/jpeg', 0.9); + + document.getElementById('preview-image').src = this.formData.croppedImage; + this.isCropping = false; + this.cropper.destroy(); + this.cropper = null; + }, + + cancelCrop() { + document.getElementById('image').value = ''; + this.isCropping = false; + if (this.cropper) { + this.cropper.destroy(); + this.cropper = null; + } + }, + + async submitForm() { + // Trigger native browser validation bubbles + if (!this.$el.checkValidity()) { + this.$el.reportValidity(); + return; + } + + if (!this.formData.croppedImage) { + alert("Please upload and accept a photo."); + return; + } + + this.isSubmitting = true; + + // Mocking API call + console.log("Sending JSON data:", JSON.stringify(this.formData)); + + setTimeout(() => { + this.isSubmitting = false; + // window.location.href = 'success.html'; + }, 1500); + } + })); +}); \ No newline at end of file diff --git a/index.php b/index.php index 0e6266a..3865d5c 100644 --- a/index.php +++ b/index.php @@ -1,11 +1,11 @@ @@ -20,89 +20,85 @@ - + - + +
- +
- + Jukebox Jukebox - +
Let's make your
Pet Love Song.
Tell us about your furry, finned,
or feathered Valentine and our
song-maker will do the rest.
- -
- + + +
- +
- +
- +
- +
- +
- -