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

Result & Waiting: WIP on Record Spin & needle

Browse source
This commit is contained in:
Deepak Salunke 2026-02-04 16:41:30 +05:30
parent 2d9c6ca7a7
commit 53ae7e4247
3 changed files with 27 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
assets/css/style.css
View file

@ -367,16 +367,20 @@ input[type="text"], input[type="email"], input[type="password"], select {
.bottom-text { dominant-baseline: text-after-edge; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}
.record-container{
/*margin: auto;
.record-container {
/*margin: auto auto -200px auto;
display: block;
padding: 20px 0px;
text-align: center;
margin-bottom: -200px;*/
width: 100%;
max-width: 500px;
margin: 0px auto 20px;
max-width: 500px;*/
margin: auto;
display: block;
padding: 20px 0px;
text-align: center;
margin-bottom: -200px;
}
#video-record{
@ -518,7 +522,7 @@ input[type="text"], input[type="email"], input[type="password"], select {
line-height: 110.00000000000001%;
text-align: center;
color: #FFFAF5;
margin: 10px auto;
margin: 30px auto 10px auto;
width: 45%;
}
@ -553,6 +557,7 @@ input[type="text"], input[type="email"], input[type="password"], select {
border: 1px solid #fff;
max-width: 500px;
border-radius: 5px;
width: 80%;
}
.song-control {
@ -817,11 +822,11 @@ input[type="text"], input[type="email"], input[type="password"], select {
@media (min-width: 576px) and (max-width: 767.98px) {
.record-container{
/*margin: auto;
margin: auto;
display: block;
padding: 20px 0px;
text-align: center;
margin-bottom: -45%;*/
margin-bottom: -45%;
}
.dog-record {
@ -898,12 +903,12 @@ input[type="text"], input[type="email"], input[type="password"], select {
}
.record-container{
/*margin: auto;
margin: auto;
display: block;
padding: 20px 0px;
text-align: center;
margin-bottom: -45%;*/
margin: 20px auto 20px;
margin-bottom: -45%;
/*margin: 20px auto 20px;*/
}
.dog-record {
@ -999,12 +1004,12 @@ input[type="text"], input[type="email"], input[type="password"], select {
}
.record-container{
/*margin: auto;
margin: auto;
display: block;
padding: 20px 0px;
text-align: center;
margin-bottom: -45%;*/
margin: 20px auto 20px;
margin-bottom: -45%;
/*margin: 20px auto 20px;*/
}
.dog-record {
@ -1091,12 +1096,12 @@ input[type="text"], input[type="email"], input[type="password"], select {
}
.record-container{
/*margin: auto;
margin: auto;
display: block;
padding: 20px 0px;
text-align: center;
margin-bottom: -45%;*/
margin: 20px auto 20px;
margin-bottom: -45%;
/*margin: 20px auto 20px;*/
}
.dog-record {

3
result.php
View file

@ -23,7 +23,8 @@
<div class="title1">My Pet Love Song.</div>
<div class="record-container">
<img class="dog-record" src="assets/images/blank-record.png" alt="Record" />
<img class="dog-record rotate" src="./assets/images/blank-record.png" alt="Record" id="pet-record" />
<img class="record-needle" src="./assets/images/needle.png" alt="Record Needle">
</div>
<div class="song-lyrics">Woke up early, 6am sharp I was whining, <br/>playing my part.</div>

6
waiting.php
View file

@ -26,8 +26,8 @@
<div class="title">Your Pet Love Song <br/>will be ready in <span id="timer">30</span></div>
<div class="melody-record-container">
<img class="melody-record" src="./assets/images/blank-record.png"
alt="Melody Record" />
<img class="melody-record" src="./assets/images/blank-record.png" alt="Melody Record" />
<img class="record-needle" src="./assets/images/needle.png" alt="Record Needle">
<svg class="record-text-overlay" viewBox="0 0 100 100">
<path id="arc-top" d="M 38,50 A 12,12 0 0,1 62,50" fill="transparent" />
<path id="arc-bottom" d="M 62,50 A 12,12 0 0,1 38,50" fill="transparent" />
@ -291,7 +291,7 @@
if (count < 0) {
clearInterval(interval);
timerElement.textContent = "";
timerElement.textContent = "0";
}
}, intervalTime);
}