Oliver/pahvalentines
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #35 from DeepakasBTG/frontend

Browse source 
Result: Share box ui changes
This commit is contained in:
DeepakasBTG 2026-02-04 22:48:55 +05:30 • committed by GitHub
commit b4be24d045
3 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
assets/css/style.css
View file

@ -635,12 +635,18 @@ input[type="text"], input[type="email"], input[type="password"], select {
margin: 20px 0px;
}
.disabled-cta {
background: #FFA4B3 !important;
color: #D2323D !important;
pointer-events: none !important;
cursor: default !important;
}
.download-song-btn {
width: 90%;
background: #fff;
color: #D2323D;
background: #00AA28;
color: #fff;
border-radius: 5px;
border: 1px solid #fff;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
@ -658,10 +664,9 @@ input[type="text"], input[type="email"], input[type="password"], select {
.copy-btn {
width: 90%;
background: #D2323D;
background: #00AA28;
color: #fff;
border-radius: 5px;
border: 1px solid #fff;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
@ -671,12 +676,6 @@ input[type="text"], input[type="email"], input[type="password"], select {
text-decoration: none;
}
.copy-btn:hover, .copy-btn:focus {
color: #D2323D;
background: #fff;
border-color: #D2323D;
}
.share-text {
margin: 15px 15px 15px 15px;
}
@ -684,6 +683,13 @@ input[type="text"], input[type="email"], input[type="password"], select {
.share-subtext {
font-family: "TT Commons Pro Medium";
margin: 15px 10px 0px 10px;
font-size: 12px
}
.share-subtext1 {
font-family: "TT Commons Pro Medium";
margin: 10px 10px 0px 10px;
font-size: 14px
}
.make-another-song-btn {
@ -769,7 +775,7 @@ input[type="text"], input[type="email"], input[type="password"], select {
left: 1.5rem;
}
.banner1-cta:hover, .banner1-cta:focus, .banner2-cta:hover, .banner2-cta:focus {
.banner1-cta:hover, .banner1-cta:focus, .banner2-cta:hover, .banner2-cta:focus, .copy-btn:hover, .copy-btn:focus, .download-song-btn:hover, .download-song-btn:focus {
background: #00871E;
border-color: #00871E;
}

BIN
assets/images/default-record.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 298 KiB

After

Width:  |  Height:  |  Size: 326 KiB

13
result.php
View file

@ -24,7 +24,7 @@
<div class="record-container">
<img class="record-needle" src="./assets/images/needle.png" alt="Record Needle">
<img class="dog-record" src="./assets/images/blank-record.png" alt="Record" id="pet-record" />
<img class="dog-record" src="./assets/images/default-record.png" alt="Record" id="pet-record" />
</div>
<div class="song-lyrics">Woke up early, 6am sharp I was whining, <br/>playing my part.</div>
@ -35,12 +35,11 @@
<div class="share-container">
<div class="share-title">Get ready to share the love in <span id="timer">3:00</span></div>
<div class="share-text">When the buttons go green your Pet Love Song is ready to share</div>
<a href="javascript:void(0);" class="copy-btn">Copy URL</a>
<a href="assets/video/song.mp4" download class="download-song-btn">Download your song</a>
<div class="share-subtext hide-desktop">For <b>Download your song</b>, you’ll find your Pet Love Song in <br/>Files (on iPhones), or Downloads (on Android)</div>
<div class="share-subtext hide-mobile">For <b>Download your song</b>, you’ll find your Pet Love Song in Files (on iPhones), or Downloads (on Android)</div>
<div class="share-subtext"><b>And remember to tag us @PetsatHomeUK with #PetLoveSongs.</b></div>
<div class="share-text">When the buttons go green, your Pet Love Song is ready to share.</div>
<a href="javascript:void(0);" id="copy-btn" class="copy-btn disabled-cta">Copy URL</a>
<a href="javascript:void(0);" id="download-song-btn" class="download-song-btn disabled-cta" download>Download your song</a>
<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="javascript:void(0);" class="make-another-song-btn">Need another song?</a>