130 lines
No EOL
6.9 KiB
PHP
130 lines
No EOL
6.9 KiB
PHP
<!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="preload" href="./assets/images/default-record.png" as="image">
|
||
|
||
<?php include('opengraph.php'); ?>
|
||
</head>
|
||
<body x-data>
|
||
|
||
<?php include('header.php'); ?>
|
||
|
||
<div class="container">
|
||
|
||
<div class="body-container">
|
||
|
||
<div class="title1" x-show="!$store.songApp.hasError">My Pet <br/>Love Song.</div>
|
||
|
||
<div class="record-container" x-show="!$store.songApp.hasError">
|
||
<img class="record-needle" src="./assets/images/needle.png" alt="Record Needle">
|
||
<img
|
||
class="dog-record"
|
||
:class="$store.songApp.isPlaying ? 'spinning' : ''"
|
||
:src="$store.songApp.recordImageUrl"
|
||
alt="Record"
|
||
id="pet-record"
|
||
/>
|
||
</div>
|
||
|
||
<!-- Audio player -->
|
||
<div id="audio-player-container" x-show="!$store.songApp.hasError"
|
||
style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;"
|
||
>
|
||
<p class="audio-player-label" style="display: none;">Listen while your video is being created...</p>
|
||
<audio
|
||
id="audio-player"
|
||
:src="$store.songApp.audioUrl"
|
||
preload="metadata"
|
||
x-init="$store.songApp.initScrollLogic($el)"
|
||
@play="$store.songApp.isPlaying = true"
|
||
@pause="$store.songApp.isPlaying = false"
|
||
>
|
||
Your browser does not support the audio element.
|
||
</audio>
|
||
<p id="audio-tap-message" class="audio-tap-message" style="display: none;"></p>
|
||
</div>
|
||
|
||
<div class="song-control" x-show="!$store.songApp.hasError">
|
||
<span
|
||
@click="$store.songApp.togglePlay()"
|
||
:class="$store.songApp.isPlaying ? 'song-pause' : 'song-play'"
|
||
></span>
|
||
</div>
|
||
|
||
<div
|
||
class="song-lyrics"
|
||
id="lyrics-container"
|
||
style="overflow: hidden; position: relative;"
|
||
x-show="$store.songApp.lyrics && !$store.songApp.hasError"
|
||
>
|
||
<div
|
||
id="lyrics-content"
|
||
style="transition: transform 0.4s linear; will-change: transform;"
|
||
x-text="$store.songApp.lyrics">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Error Message -->
|
||
<div class="error-container" x-show="$store.songApp.hasError">
|
||
<div class="title1" x-text="$store.songApp.errorTitle"></div>
|
||
<p class="error-msg" x-text="$store.songApp.errorMessage"></p>
|
||
</div>
|
||
|
||
<div class="share-container" x-show="!$store.songApp.hasError">
|
||
<div class="share-title">Share the love.</div>
|
||
<a
|
||
href="javascript:void(0);"
|
||
class="copy-btn"
|
||
@click="$store.songApp.copyUrlToClipboard()"
|
||
x-text="$store.songApp.copyBtnText"
|
||
></a>
|
||
|
||
<a
|
||
:href="$store.songApp.isDownloadReady ? 'https://valentinesong.oliver.digital/back/api/download/' + $store.songApp.sessionId : 'javascript:void(0);'"
|
||
class="download-song-btn"
|
||
:class="{ 'disabled-cta': !$store.songApp.isDownloadReady }"
|
||
>Download your song</a>
|
||
|
||
<template x-if="!$store.songApp.isDownloadReady">
|
||
<div class="share-subtext">Download ready in <span x-text="$store.songApp.timerDisplay">03:00</span>.</div>
|
||
</template>
|
||
|
||
<div class="share-subtext">After downloading, you’ll find your Pet Love Song in ‘Files’ (iPhone) or ‘Downloads’ (Android).</div>
|
||
<div class="share-subtext1">Don’t forget to tag us @PetsatHomeUK with #PetLoveSongs.</div>
|
||
</div>
|
||
|
||
<a href="/" class="make-another-song-btn"
|
||
x-text="$store.songApp.hasError ? 'Try again' : 'Need another song?'"
|
||
></a>
|
||
|
||
<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" />
|
||
<a href="https://www.petsathome.com/campaigns/listing/valentines" target="_blank" class="banner1-cta" aria-label="Fall head over tails">Shop now</a>
|
||
</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" />
|
||
<a href="https://signup.petsathome.com/?_gl=1*iz9hoy*_gcl_aw*R0NMLjE3Njg1NzcyODkuQ2p3S0NBaUE0S2ZMQmhCMEVpd0FVWTdHQWZTRzBGcE1pekpZYUhWVGxxMEFxNXJaRGR6cEQtQW8zSFRPOGw2bTRDVmJualRyT3V3bVBCb0NHckVRQXZEX0J3RQ..*_gcl_dc*R0NMLjE3Njg1NzcyODkuQ2p3S0NBaUE0S2ZMQmhCMEVpd0FVWTdHQWZTRzBGcE1pekpZYUhWVGxxMEFxNXJaRGR6cEQtQW8zSFRPOGw2bTRDVmJualRyT3V3bVBCb0NHckVRQXZEX0J3RQ..*_gcl_au*NDA5MDMwNTY4LjE3NjcwMDczMTk.*_ga*MTY1MTAwOTMyNy4xNzQyNDY5Mzcz*_ga_SCDHP6GJGF*czE3NzAxMTkyMzYkbzE2NCRnMSR0MTc3MDExOTY5NSRqMTIkbDAkaDIwNTY2NTE5MzQ.*_fplc*JTJCbEhEdzFrVFZ2SmFlOGUwYXZxNXI5VEhmM2Fac01MWjhPc05PV01pSnprT0poaloxclE4QWlnZ2lDNlMlMkJWNXlKTWhXM2lWVFRjV1YxcDBYbjMwcHR3anZnYmQzeVFZTWcyUGdBTHBERXdGdmR5YmdoeHIzOUZlN3RKaE5WUSUzRCUzRA.." target="_blank" class="banner2-cta" aria-label="Fall head over tails">Join now</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<?php include('footer.php'); ?>
|
||
|
||
<script defer src="./assets/js/result2.js"></script>
|
||
<script defer src="./assets/vendor/alpine.min.js"></script>
|
||
</body>
|
||
</html>
|