Initial commit

apple-touch-icon.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:727a07cb8f331caca8ddb725dd97b20b596b7d9240f018747cf6a072f868d934
+size 5177

assets/css/style.css

@@ -0,0 +1,689 @@
+@font-face {
+    font-family: 'Pets Headline Bold';
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/PetsHeadline-Bold.otf') format('opentype');
+}
+
+@font-face {
+    font-family: 'TT Commons Pro Body DemiBold';
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/EOT/TT_Commons_Pro_DemiBold.eot') format('embedded-opentype'), 
+        url('../fonts/WOFF2/TT_Commons_Pro_DemiBold.woff2') format('woff2'), 
+        url('../fonts/WOFF/TT_Commons_Pro_DemiBold.woff') format('woff'), 
+        url('../fonts/TTF/TT_Commons_Pro_DemiBold.ttf') format('truetype'), 
+        url('../fonts/SVG/TT_Commons_Pro_DemiBold.svg#CommonsProBodyDemiBold') format('svg');
+}
+
+@font-face {
+    font-family: 'TT Commons Pro Medium';
+    font-weight: 500;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/EOT/TT_Commons_Pro_Medium.eot') format('embedded-opentype'), 
+        url('../fonts/WOFF2/TT_Commons_Pro_Medium.woff2') format('woff2'), 
+        url('../fonts/WOFF/TT_Commons_Pro_Medium.woff') format('woff'), 
+        url('../fonts/TTF/TT_Commons_Pro_Medium.ttf') format('truetype'), 
+        url('../fonts/SVG/TT_Commons_Pro_Medium.svg#CommonsProMedium') format('svg');
+}
+
+@font-face {
+    font-family: 'TT Commons Pro Bold';
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/EOT/TT_Commons_Pro_Bold.eot') format('embedded-opentype'), 
+        url('../fonts/WOFF2/TT_Commons_Pro_Bold.woff2') format('woff2'), 
+        url('../fonts/WOFF/TT_Commons_Pro_Bold.woff') format('woff'), 
+        url('../fonts/TTF/TT_Commons_Pro_Bold.ttf') format('truetype'), 
+        url('../fonts/SVG/TT_Commons_Pro_Bold.svg#CommonsProBold') format('svg');
+}
+
+@font-face {
+    font-family: 'TT Commons Pro Regular';
+    font-weight: 200;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('../fonts/EOT/TT_Commons_Pro_Regular.eot') format('embedded-opentype'), 
+        url('../fonts/WOFF2/TT_Commons_Pro_Regular.woff2') format('woff2'), 
+        url('../fonts/WOFF/TT_Commons_Pro_Regular.woff') format('woff'), 
+        url('../fonts/TTF/TT_Commons_Pro_Regular.ttf') format('truetype'), 
+        url('../fonts/SVG/TT_Commons_Pro_Regular.svg#CommonsProRegular') format('svg');
+}
+
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Pets Headline Bold','Montserrat', sans-serif;
+    background: #fff;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0px;
+}
+
+.container {
+    max-width: 700px;
+}
+
+.header {
+    background-image: url('../images/header-title.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 60px;
+    color: transparent;
+    font-family: 'Pets Headline Bold';
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.sr-only-focusable:active, .sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+}
+
+.body-container {
+    width: 100%;
+    height: auto;
+    background-image: url('../images/pink-bg.jpg');
+    background-size: cover;
+    background-repeat: repeat;
+    background-position: center;
+    padding-bottom: 10px;
+}
+
+.jukebox-banner-mb {
+    width: auto;
+    margin: auto;
+    display: block;
+    padding: 20px 0px;
+}
+
+.jukebox-banner-dt {
+    display: none;
+}
+
+.title {
+    font-family: "Pets Headline Bold";
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 110.00000000000001%;
+    text-align: center;
+    color: #FFFAF5;
+    margin: 10px 0px;
+}
+
+.sub-title {
+    font-family: "TT Commons Pro Body DemiBold";
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 110.00000000000001%;
+    text-align: center;
+    color: #FFFAF5;
+    margin: 10px 0px;
+}
+
+.form-row {
+    /*text-align: center;*/
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.form-group {
+    /*display: inline-grid;*/
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 10px 0px;
+}
+
+label {
+    font-family: "TT Commons Pro Body DemiBold";
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 110.00000000000001%;
+    text-align: center;
+    color: #FFFFFF;
+    margin: 10px 0px;
+}
+
+input[type="text"], input[type="email"], input[type="password"], select {
+    border: 1px solid #fff;
+    border-radius: 4px;
+    font-size: 16px;
+    transition: border-color 0.3s ease;
+    color: #000;
+    width: 160px;
+}
+
+.file-upload {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    width: 100%;
+}
+
+.file-upload input[type="file"] {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+.file-upload-label {
+    display: block;
+    padding: 20px;
+    border: 2px dashed #FFFAF5;
+    border-radius: 5px;
+    background: #febac2;
+    color: #ffffff;
+    text-align: center;
+    transition: all 0.3s ease;
+    width: 70%;
+    margin: 10px auto;
+}
+
+.file-upload:hover .file-upload-label {
+    background: #febac2;
+    border-color: #FFFAF5;
+}
+
+.file-upload-icon {
+    font-size: 2rem;
+    color: #ffffff;
+    margin-bottom: 10px;
+}
+
+.file-upload-text {
+    font-family: "TT Commons Pro Body DemiBold";
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 110.00000000000001%;
+    text-align: center;
+    color: #FFFFFF;
+}
+
+.submit-btn {
+    padding: 15px 30px;
+    background: #D2323D;
+    border-color: #D2323D;
+    color: #fff;
+    border-radius: 4px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    margin: 20px auto;
+}
+
+.submit-btn:hover, .submit-btn:focus {
+    background: #E02440;
+    border-color: #E02440;
+}
+
+.melody-record, .dog-record {
+    width: 65%;
+    margin: auto;
+    display: block;
+    padding: 20px 0px;
+}
+
+.footer {
+    background: #002828;
+    color: #fff;
+    padding: 40px;
+}
+
+.footer p {
+    font-family: "TT Commons Pro Medium";
+    font-weight: 500;
+    font-size: 13px;
+    line-height: 120%;
+    margin-bottom: 10px;
+}
+
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    /*background-color: rgba(0, 0, 0, 0.6);*/
+    background: rgba(232, 112, 137, 0.86);
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background-color: #D2323D;
+    margin: 0px auto;
+    padding: 30px;
+    width: 100%;
+    max-width: 700px;
+    text-align: center;
+    color: #ffffff;
+}
+
+.modal-header {
+    font-family: "Pets Headline Bold";
+    font-size: 32px;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 20px;
+}
+
+.modal-message {
+    font-family: 'TT Commons Pro Medium';
+    font-size: 16px;
+    margin: 0px auto 25px auto;
+    color: #cccccc;
+    width: 65%;
+}
+
+.modal-close {
+    width: 80%;
+    background: #00AA28;
+    color: white;
+    border-radius: 5px;
+    border-color: #00AA28;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.modal-close:hover {
+    background: #00AA28;
+    border-color: #00AA28;
+}
+
+.heart-icon {
+    width: 100%;
+    height: 70px;
+}
+
+.white-heart-1 {
+    width: 45px;
+    float: right;
+}
+
+.white-heart-2 {
+    width: 30px;
+    float: left;
+    margin-top: 20px;
+}
+
+.pets-text-logo {
+    background-image: url('../images/pets-logo.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 60px;
+}
+
+.title1 {
+    font-family: "Pets Headline Bold";
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 110.00000000000001%;
+    text-align: center;
+    color: #FFFAF5;
+    margin: 10px auto;
+    width: 45%;
+}
+
+.heart1-icon {
+    width: 100%;
+    height: 50px;
+}
+
+.red-heart-1 {
+    width: 45px;
+    float: left;
+}
+
+.red-heart-2 {
+    width: 20px;
+    float: right;
+    margin-top: 20px;
+}
+
+.song-lyrics {
+    font-family: "TT Commons Pro Body DemiBold";
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 110.00000000000001%;
+    text-align: center;
+    color: #FFFFFF;
+}
+
+.song-control {
+    width: 100%;
+    height: 60px;
+    margin: 15px auto;
+}
+
+.song-play {
+    background-image: url('../images/play.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 60px;
+    height: 60px;
+    display: block;
+    margin: 0px auto;
+    border: 2px solid #fff;
+    border-radius: 30px;
+}
+
+.song-pause {
+    background-image: url('../images/pause.png');
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 60px;
+    height: 60px;
+    display: block;
+    margin: 0px auto;
+    border: 2px solid #fff;
+    border-radius: 30px;
+}
+
+.share-container {
+    background: #D2323D;
+    color: #fff;
+    font-family: 'TT Commons Pro Regular';
+    font-size: 16px;
+    width: 80%;
+    margin: 0px auto 20px auto;
+    text-align: center;
+    padding: 25px 20px;
+    border-radius: 20px;
+}
+
+.share-title {
+    font-family: "Pets Headline Bold";
+    font-size: 24px;
+    font-weight: 700;
+    color: #fff;
+    margin-bottom: 15px;
+}
+
+.share-icons {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    margin: 20px 0px;
+}
+
+.download-song-btn {
+    width: 90%;
+    background: #fff;
+    color: #D2323D;
+    border-radius: 5px;
+    border-color: #fff;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 700;
+    cursor: pointer;
+    margin: 10px auto;
+    display: block;
+}
+
+.download-song-btn:hover, .download-song-btn:focus {
+    color: #fff;
+    background: #D2323D;
+    border-color: #fff;
+}
+
+.copy-btn {
+    width: 90%;
+    background: #D2323D;
+    color: #fff;
+    border-radius: 5px;
+    border-color: #fff;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 700;
+    cursor: pointer;
+    margin: 10px auto;
+    display: block;
+}
+
+.copy-btn:hover, .copy-btn:focus {
+    color: #D2323D;
+    background: #fff;
+    border-color: #D2323D;
+}
+
+.share-text {
+    margin: 20px 5px 10px 5px;
+}
+
+.make-another-song-btn {
+    width: 80%;
+    background: #fff;
+    color: #D2323D;
+    border-radius: 5px;
+    border-color: #fff;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin: auto auto 30px auto;
+    display: block;
+}
+
+.make-another-song-btn:hover, .make-another-song-btn:focus {
+    color: #fff;
+    background: #D2323D;
+    border-color: #fff;
+}
+
+.banner1-container {
+    background-color: #fff;
+}
+
+.banner1 {
+    width: 100%;
+    height: auto;
+    margin: 0px auto;
+    padding: 30px 40px;
+}
+
+.banner1-cta {
+    width: auto;
+    /*background: #00AA28;
+    border-color: #00AA28;*/
+    color: white;
+    border-radius: 5px;
+    padding: 12px 15px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    margin: auto;
+
+    color: #fff;
+    background: #D2323D;
+    border-color: #fff;
+}
+
+.banner2-container {
+    margin: 30px 40px;
+}
+
+.banner2 {
+    width: 100%;
+    height: auto;
+    margin: 0px auto;
+}
+
+#banner1-mb, #banner2-mb {
+    display: block;
+}
+
+#banner1-dt, #banner2-dt {
+    display: none;
+}
+
+/* Medium devices (tablets, 768px and less than 992px) */
+@media (min-width: 768px) and (max-width: 991.98px) {
+    .jukebox-banner-mb {
+        display: none !important;
+    }
+    
+    .jukebox-banner-dt {
+        display: block;
+        width: 80%;
+        margin: 0px auto 30px;
+    }
+
+    .form-row {
+        max-width: 400px;
+        margin: auto;
+    }
+
+    .form-group {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    label {
+        margin: 0px 10px;
+        font-size: 18px;
+    }
+
+    .file-upload-label {
+        width: 100%;
+    }
+
+    input[type="text"], input[type="email"], input[type="password"], select {
+        width: 200px;
+        font-size: 18px;
+    }
+
+    #banner1-mb, #banner2-mb {
+        display: none;
+    }
+
+    #banner1-dt, #banner2-dt {
+        display: block;
+    }
+}
+
+/* Medium devices (desktops, 992px and less than 1200px) */
+@media (min-width: 992px) and (max-width: 1199.98px) {
+    .jukebox-banner-mb {
+        display: none !important;
+    }
+    
+    .jukebox-banner-dt {
+        display: block;
+        width: 80%;
+        margin: 0px auto 30px;
+    }
+
+    .form-row {
+        max-width: 400px;
+        margin: auto;
+    }
+
+    .form-group {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    label {
+        margin: 0px 10px;
+        font-size: 18px;
+    }
+
+    .file-upload-label {
+        width: 100%;
+    }
+
+    input[type="text"], input[type="email"], input[type="password"], select {
+        width: 200px;
+        font-size: 18px;
+    }
+
+    #banner1-mb, #banner2-mb {
+        display: none;
+    }
+
+    #banner1-dt, #banner2-dt {
+        display: block;
+    }
+}
+
+/* Large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+    .jukebox-banner-mb {
+        display: none !important;
+    }
+    
+    .jukebox-banner-dt {
+        display: block;
+        width: 80%;
+        margin: 0px auto 30px;
+    }
+
+    .form-row {
+        max-width: 400px;
+        margin: auto;
+    }
+
+    .form-group {
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    label {
+        margin: 0px 10px;
+        font-size: 18px;
+    }
+
+    .file-upload-label {
+        width: 100%;
+    }
+
+    input[type="text"], input[type="email"], input[type="password"], select {
+        width: 200px;
+        font-size: 18px;
+    }
+
+    #banner1-mb, #banner2-mb {
+        display: none;
+    }
+
+    #banner1-dt, #banner2-dt {
+        display: block;
+    }
+}

footer.php

@@ -0,0 +1,6 @@
+<div class="footer">
+    <p>Powered by <img src="assets/images/sonauto.png" alt="Sonauto" /></p>
+    <p>Each Pets at Home Valentine’s Pet Love Song is AI-generated, using Music by Sonauto v3.</p>
+    <p>Registered Office: Chester House, Epsom Avenue, Stanley Green Trading Estate, Hanforth, Cheshire SK9 3RN.</p>
+    <p>Registered company number: 01822577</p>
+</div>

header.php

@@ -0,0 +1 @@
+<h1 class="header"><span class="sr-only sr-only-focusable">Pets at Home</span></h1>

index.php

@@ -0,0 +1,222 @@
+<?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>

result.php

@@ -0,0 +1,83 @@
+<!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">
+    </head>
+    <body>
+        <div class="container">
+
+            <?php include('header.php'); ?>
+
+            <div class="body-container">
+
+                <div class="pets-text-logo"></div>
+
+                <div class="title1">My Pet Love Song.</div>
+
+                <img class="dog-record" src="assets/images/dog-record.png" alt="Dog Record" />
+
+                <!--<div class="heart1-icon">
+                    <img class="red-heart-1" src="assets/images/heart-red.png" alt="Red Heart" />
+                </div>
+
+                <div class="heart1-icon">
+                    <img class="red-heart-2" src="assets/images/heart-red.png" alt="Red Heart" />
+                </div>-->
+
+                <div class="song-lyrics">Woke up early, 6am sharp I was whining, <br/>playing my part.</div>
+
+                <div class="song-control">
+                    <span id="toggle-song-icon" class="song-play"></span>
+                </div>
+
+                <div class="share-container">
+                    <div class="share-title">Share the love.</div>
+                    <div class="share-icons">
+                        <img class="tiktok" src="assets/images/tiktok.png" alt="Tiktok" />
+                        <img class="instagram" src="assets/images/instagram.png" alt="Instagram" />
+                        <img class="facebook" src="assets/images/facebook.png" alt="Facebook" />
+                    </div>
+                    <button class="download-song-btn">Download your song</button>
+                    <button class="copy-btn">Copy URL</button>
+                    <div class="share-text">Download, share and don’t forget to tag us @PetsatHome with #PetLoveSongs so we can celebrate your love too.</div>
+                </div>
+
+                <button class="make-another-song-btn">Need another song</button>
+
+                <div class="banner1-container">
+                    <img id="banner1-mb" class="banner1" src="assets/images/head-tails-btn.png" alt="Fall head over tails" />
+                    <img id="banner1-dt" class="banner1" src="assets/images/head-tails-btn-dt.png" alt="Fall head over tails" />
+                </div>
+
+                <div class="banner2-container">
+                    <img id="banner2-mb" class="banner2" src="assets/images/club-member.png" alt="Not a Pets Club member" />
+                    <img id="banner2-dt" class="banner2" src="assets/images/club-member-dt.png" alt="Not a Pets Club member" />
+                </div>
+
+            </div>
+
+            <?php include('footer.php'); ?>
+
+        </div>
+
+        <script>
+            const icon = document.getElementById('toggle-song-icon');
+            icon.addEventListener('click', () => {
+                if (icon.classList.contains('song-play')) { 
+                    icon.classList.remove('song-play');
+                    icon.classList.add('song-pause'); 
+                } else { 
+                    icon.classList.remove('song-pause');
+                    icon.classList.add('song-play');
+                } 
+            });
+        </script>
+    </body>
+</html>

waiting.php

@@ -0,0 +1,34 @@
+<!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">
+    </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">Your Pet Love Song <br/>is on its way.</div>
+                <div class="sub-title">Won’t take a minute...</div>
+
+                <img class="melody-record" src="assets/images/unleashedmelody.gif" alt="Melody Record" />
+
+            </div>
+
+            <?php include('footer.php'); ?>
+
+        </div>
+    </body>
+</html>