105 lines
No EOL
4.6 KiB
PHP
105 lines
No EOL
4.6 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">
|
||
|
||
<?php include('opengraph.php'); ?>
|
||
</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="record-container">
|
||
<!--<img class="dog-record rotate" src="assets/images/blank-record.png" alt="Dog Record" id="pet-record" />
|
||
<img class="record-needle" src="assets/images/needle.png" alt="Record Needle" />-->
|
||
<video id="video-record">
|
||
<source src="assets/video/song.mp4" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
|
||
<!--<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-text">Download to save so you don't lose your song and don’t forget to tag us @PetsatHomeUK with #PetLoveSongs so we can celebrate your love too.</div>
|
||
<a href="assets/video/song.mp4" download class="download-song-btn">Download your song</a>
|
||
<a href="javascript:void(0);" class="copy-btn">Copy URL</a>
|
||
</div>
|
||
|
||
<a href="javascript:void(0);" class="make-another-song-btn">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" />
|
||
</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');
|
||
const petRecord = document.getElementById('pet-record');
|
||
icon.addEventListener('click', () => {
|
||
if (icon.classList.contains('song-play')) {
|
||
icon.classList.remove('song-play');
|
||
icon.classList.add('song-pause');
|
||
petRecord.classList.remove('rotate');
|
||
} else {
|
||
icon.classList.remove('song-pause');
|
||
icon.classList.add('song-play');
|
||
petRecord.classList.add('rotate');
|
||
}
|
||
});*/
|
||
|
||
const video = document.getElementById('video-record');
|
||
const btn = document.getElementById('toggle-song-icon');
|
||
btn.addEventListener('click', () => {
|
||
if (video.paused) {
|
||
video.play();
|
||
btn.classList.remove('song-play');
|
||
btn.classList.add('song-pause');
|
||
} else {
|
||
video.pause();
|
||
btn.classList.remove('song-pause');
|
||
btn.classList.add('song-play');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|