222 lines
No EOL
12 KiB
PHP
Executable file
222 lines
No EOL
12 KiB
PHP
Executable file
<?php
|
||
$soldPage = true;
|
||
$soldPage = false;
|
||
|
||
$soldPageDisplay = 'display: none';
|
||
if($soldPage == true){
|
||
$soldPageDisplay = 'display: flex';
|
||
}
|
||
?>
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||
<title>Pets at Home</title>
|
||
<meta name="description" content="Pets at Home">
|
||
<link rel="stylesheet" href="assets/css/style.css">
|
||
<link rel="stylesheet" href="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.css">
|
||
<script defer src="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.js"></script>
|
||
<script defer src="assets/js/home.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<?php include('header.php'); ?>
|
||
|
||
<div class="body-container">
|
||
|
||
<img class="jukebox-banner-mb" src="assets/images/jukebox-banner-mb.png" alt="Jukebox" />
|
||
<img class="jukebox-banner-dt" src="assets/images/jukebox-banner-dt.png" alt="Jukebox" />
|
||
|
||
<div class="title">Let's make your <br/>Pet Love Song.</div>
|
||
<div class="sub-title">Tell us about your furry, finned, <br/>or feathered Valentine and our <br/>song-maker will do the rest.</div>
|
||
|
||
<form method="POST" enctype="multipart/form-data" id="uploadForm">
|
||
|
||
<div class="form-row">
|
||
|
||
<div class="form-group">
|
||
<label for="petName">Pet name</label>
|
||
<input type="text" id="petName" name="petName" pattern="[A-Za-z ]+" minlength="5" maxlength="100" oninput="this.value = this.value.replace(/[^A-Za-z ]/g, '');" required value="<?php echo htmlspecialchars($_POST['petName'] ?? ''); ?>">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="petType">Pet type</label>
|
||
<select id="petType" name="petType" class="form-control" required>
|
||
<option value=""> </option>
|
||
<option value="Dog" <?php if(($_POST['petType'] ?? '') === 'Dog') echo 'selected'; ?>>Dog</option>
|
||
<option value="Cat" <?php if(($_POST['petType'] ?? '') === 'Cat') echo 'selected'; ?>>Cat</option>
|
||
<option value="Bird" <?php if(($_POST['petType'] ?? '') === 'Bird') echo 'selected'; ?>>Bird</option>
|
||
<option value="Fish" <?php if(($_POST['petType'] ?? '') === 'Fish') echo 'selected'; ?>>Fish</option>
|
||
<option value="Other" <?php if(($_POST['petType'] ?? '') === 'Other') echo 'selected'; ?>>Other</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="file-upload">
|
||
<input type="file" id="image" name="image" accept="image/jpeg,image/jpg,image/png" required>
|
||
<label for="image" class="file-upload-label" id="upload-label">
|
||
<div class="file-upload-icon">📷</div>
|
||
<div class="file-upload-text">Upload a photo or take a pic</div>
|
||
</label>
|
||
<!-- START -->
|
||
<!-- Cropper state (hidden initially) -->
|
||
<div id="cropper-box" class="file-upload-label" style="display:none; padding: 10px;">
|
||
<div style="max-width: 100%; max-height: 300px; overflow: hidden;">
|
||
<img id="cropper-image" src="" style="max-width: 100%;">
|
||
</div>
|
||
<div style="margin-top: 10px; display: flex; gap: 10px; justify-content: center;">
|
||
<button type="button" id="btn-accept" style="background: #00AA28; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">✓ Accept</button>
|
||
<button type="button" id="btn-cancel" style="background: #666; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">✕ Cancel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Preview state (hidden initially) -->
|
||
<div id="preview-box" class="file-upload-label" style="display:none; padding: 10px; cursor: pointer;">
|
||
<img id="preview-image" src="" style="width: 100%; max-width: 300px; border-radius: 4px;">
|
||
<div style="margin-top: 10px; font-size: 14px;">✎ Click to change photo</div>
|
||
</div>
|
||
<!-- END -->
|
||
</div>
|
||
<input type="hidden" name="croppedImage" id="croppedImage">
|
||
|
||
<div class="form-group">
|
||
<label for="musicVibe">Music vibe?</label>
|
||
<select id="musicVibe" name="musicVibe" class="form-control" required>
|
||
<option value=""> </option>
|
||
<option value="Chill" <?php if(($_POST['musicVibe'] ?? '') === 'Chill') echo 'selected'; ?>>Chill</option>
|
||
<option value="Energetic" <?php if(($_POST['musicVibe'] ?? '') === 'Energetic') echo 'selected'; ?>>Energetic</option>
|
||
<option value="Romantic" <?php if(($_POST['musicVibe'] ?? '') === 'Romantic') echo 'selected'; ?>>Romantic</option>
|
||
<option value="Party" <?php if(($_POST['musicVibe'] ?? '') === 'Party') echo 'selected'; ?>>Party</option>
|
||
<option value="Relaxing" <?php if(($_POST['musicVibe'] ?? '') === 'Relaxing') echo 'selected'; ?>>Relaxing</option>
|
||
<option value="Other" <?php if(($_POST['musicVibe'] ?? '') === 'Other') echo 'selected'; ?>>Other</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="yourName">Your name</label>
|
||
<input type="text" id="yourName" name="yourName" pattern="[A-Za-z ]+" minlength="5" maxlength="100" oninput="this.value = this.value.replace(/[^A-Za-z ]/g, '');" required value="<?php echo htmlspecialchars($_POST['yourName'] ?? ''); ?>">
|
||
</div>
|
||
|
||
<button type="submit" id="submit-btn" class="submit-btn">Make my Pet Love Song</button>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<div id="errorModal" class="modal" style="<?php echo $soldPageDisplay; ?>">
|
||
<div class="modal-content">
|
||
<div class="heart-icon">
|
||
<img class="white-heart-1" src="assets/images/heart-white.png" alt="White Heart" />
|
||
</div>
|
||
<div class="modal-header">Sorry, we're <br/>all sold out!</div>
|
||
<div class="modal-message" id="modalMessage">Pet Love Songs was such a hit that we’re all out of records. But you can always spoil the one you love with our special Valentine’s treats.</div>
|
||
<button class="modal-close" onclick="closeErrorModal()">Shop now</button>
|
||
<div class="heart-icon">
|
||
<img class="white-heart-2" src="assets/images/heart-white.png" alt="White Heart" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<?php include('footer.php'); ?>
|
||
|
||
</div>
|
||
<style>
|
||
/* Make cropper container responsive */
|
||
#cropper-box .cropper-container {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
/* Ensure file-upload-label works for all states */
|
||
.file-upload-label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const fileInput = document.getElementById('image');
|
||
const uploadLabel = document.getElementById('upload-label');
|
||
const cropperBox = document.getElementById('cropper-box');
|
||
const previewBox = document.getElementById('preview-box');
|
||
const cropperImg = document.getElementById('cropper-image');
|
||
const previewImg = document.getElementById('preview-image');
|
||
const btnAccept = document.getElementById('btn-accept');
|
||
const btnCancel = document.getElementById('btn-cancel');
|
||
const croppedInput = document.getElementById('croppedImage');
|
||
|
||
let cropper;
|
||
|
||
// When file is selected
|
||
fileInput.addEventListener('change', (e) => {
|
||
const file = e.target.files[0];
|
||
if (!file) return;
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = (event) => {
|
||
// Hide upload label and preview, show cropper
|
||
uploadLabel.style.display = 'none';
|
||
previewBox.style.display = 'none';
|
||
cropperBox.style.display = 'block';
|
||
|
||
cropperImg.src = event.target.result;
|
||
|
||
// Destroy existing cropper if any
|
||
if (cropper) cropper.destroy();
|
||
|
||
// Initialize Cropper.js
|
||
cropper = new Cropper(cropperImg, {
|
||
aspectRatio: 1,
|
||
viewMode: 1,
|
||
autoCropArea: 1
|
||
});
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
|
||
// Accept crop
|
||
btnAccept.addEventListener('click', () => {
|
||
const canvas = cropper.getCroppedCanvas({ width: 600, height: 600 });
|
||
const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
|
||
|
||
// Store cropped image
|
||
croppedInput.value = dataUrl;
|
||
|
||
// Show preview
|
||
previewImg.src = dataUrl;
|
||
cropperBox.style.display = 'none';
|
||
previewBox.style.display = 'block';
|
||
|
||
// Destroy cropper
|
||
cropper.destroy();
|
||
cropper = null;
|
||
});
|
||
|
||
// Cancel crop
|
||
btnCancel.addEventListener('click', () => {
|
||
fileInput.value = '';
|
||
cropperBox.style.display = 'none';
|
||
uploadLabel.style.display = 'flex';
|
||
if (cropper) {
|
||
cropper.destroy();
|
||
cropper = null;
|
||
}
|
||
});
|
||
|
||
// Click preview to change photo
|
||
previewBox.addEventListener('click', () => {
|
||
fileInput.click();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|