144 lines
No EOL
7.8 KiB
PHP
144 lines
No EOL
7.8 KiB
PHP
<?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="Create a personalized love song for your pet with our fun and easy tool.">
|
||
<link rel="stylesheet" href="assets/css/style.css">
|
||
<link rel="stylesheet" href="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.css">
|
||
|
||
<?php include('opengraph.php'); ?>
|
||
</head>
|
||
<body x-data="petSongForm">
|
||
|
||
<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 id="uploadForm" @submit.prevent="submitForm">
|
||
|
||
<div class="form-row">
|
||
|
||
<div class="form-group">
|
||
<label for="petName">Pet name</label>
|
||
<input type="text" id="petName" name="petName" x-model="formData.petName" pattern="[A-Za-z ]+" minlength="2" maxlength="100" oninput="this.value = this.value.replace(/[^A-Za-z ]/g, '');" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="petType">Pet type</label>
|
||
<select id="petType" name="petType" class="form-control" x-model="formData.petType" required>
|
||
<option value=""></option>
|
||
<template x-for="type in petCategory" :key="type">
|
||
<option :value="type" x-text="type"></option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="file-upload">
|
||
<input type="file" id="image" x-ref="imageInput" accept="image/jpeg,image/jpg,image/png" :required="!formData.croppedImage">
|
||
<label for="image" class="file-upload-label" id="upload-label" x-show="!isCropping && !formData.croppedImage">
|
||
<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" x-show="isCropping" style="display:none; padding: 10px;">
|
||
<div style="max-width: 100%; max-height: 300px; overflow: hidden;">
|
||
<img id="cropper-image" x-ref="cropperImg" src="" style="max-width: 100%;">
|
||
</div>
|
||
<div style="margin-top: 10px; display: flex; gap: 10px; justify-content: center;">
|
||
<button type="button" @click="acceptCrop()" id="btn-accept" style="background: #00AA28; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">✓ Accept</button>
|
||
<button type="button" @click="cancelCrop()" 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" @click="$refs.imageInput.click()" class="file-upload-label" x-show="formData.croppedImage && !isCropping" 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" x-model="formData.croppedImage">
|
||
|
||
<div class="form-group">
|
||
<label for="musicVibe">Music vibe?</label>
|
||
<select id="musicVibe" name="musicVibe" class="form-control" x-model="formData.musicVibe" required>
|
||
<option value=""></option>
|
||
<template x-for="genre in musicGenre" :key="genre">
|
||
<option :value="genre" x-text="genre"></option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="yourName">Your name</label>
|
||
<input type="text" id="yourName" name="yourName" x-model="formData.yourName" pattern="[A-Za-z ]+" minlength="2" maxlength="100" oninput="this.value = this.value.replace(/[^A-Za-z ]/g, '');" required>
|
||
</div>
|
||
|
||
<button type="submit" id="submit-btn" class="submit-btn" :disabled="isSubmitting" x-text="isSubmitting ? 'Creating...' : 'Make my Pet Love Song'">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 defer src="https://unpkg.com/cropperjs@1.6.2/dist/cropper.min.js"></script>
|
||
<script defer src="./assets/js/home.js"></script>
|
||
<script defer src="https://unpkg.com/alpinejs@3.15.5/dist/cdn.min.js"></script>
|
||
</body>
|
||
</html>
|