This commit is contained in:
Roman Pyrih
2025-05-21 12:08:25 +02:00
parent f8fabea8b2
commit e906d7af4a
9 changed files with 662 additions and 11 deletions

4
.vscode/ftp-kr.json vendored
View File

@@ -1,7 +1,7 @@
{
"host": "server.hostline.pl",
"host": "host117523.hostido.net.pl",
"username": "www@grechuta.pagedev.pl",
"password": "baNvq3dWPAXZPj2yWvSE",
"password": "ULhrUuKNgbqdpFzCzFBh",
"remotePath": "/public_html/",
"protocol": "ftp",
"port": 0,

View File

@@ -63,8 +63,8 @@
"js": {
"custom.js": {
"type": "-",
"size": 5381,
"lmtime": 1747742173143.606,
"size": 7039,
"lmtime": 1747808489032.3413,
"modified": false
},
"hello-admin.asset.php": {
@@ -133,7 +133,253 @@
"lmtime": 0,
"modified": false
}
},
"styles": {
"custom.css": {
"type": "-",
"size": 61392,
"lmtime": 1747810026494.5015,
"modified": false
},
"custom.css.map": {
"type": "-",
"size": 18391,
"lmtime": 1747810026494.557,
"modified": false
},
"custom.scss": {
"type": "-",
"size": 47446,
"lmtime": 1747810026406.0269,
"modified": false
},
"home-page-old.css": {
"type": "-",
"size": 25650,
"lmtime": 0,
"modified": false
},
"home-page-old.css.map": {
"type": "-",
"size": 9071,
"lmtime": 0,
"modified": false
},
"home-page-old.scss": {
"type": "-",
"size": 20718,
"lmtime": 0,
"modified": false
}
}
},
"classic-editor.css": {
"type": "-",
"size": 629,
"lmtime": 0,
"modified": false
},
"classic-editor.min.css": {
"type": "-",
"size": 389,
"lmtime": 0,
"modified": false
},
"comments.php": {
"type": "-",
"size": 1635,
"lmtime": 0,
"modified": false
},
"customizer.css": {
"type": "-",
"size": 509,
"lmtime": 0,
"modified": false
},
"customizer.min.css": {
"type": "-",
"size": 405,
"lmtime": 0,
"modified": false
},
"editor.css": {
"type": "-",
"size": 318,
"lmtime": 0,
"modified": false
},
"editor.min.css": {
"type": "-",
"size": 259,
"lmtime": 0,
"modified": false
},
"footer.php": {
"type": "-",
"size": 616,
"lmtime": 0,
"modified": false
},
"functions.php": {
"type": "-",
"size": 8981,
"lmtime": 0,
"modified": false
},
"header-footer.css": {
"type": "-",
"size": 8706,
"lmtime": 0,
"modified": false
},
"header-footer.min.css": {
"type": "-",
"size": 7325,
"lmtime": 0,
"modified": false
},
"header.php": {
"type": "-",
"size": 1459,
"lmtime": 0,
"modified": false
},
"includes": {},
"index.php": {
"type": "-",
"size": 1000,
"lmtime": 0,
"modified": false
},
"page-1015.php": {
"type": "-",
"size": 6222,
"lmtime": 0,
"modified": false
},
"page-739.php": {
"type": "-",
"size": 896,
"lmtime": 0,
"modified": false
},
"page-846.php": {
"type": "-",
"size": 10684,
"lmtime": 1747808406963.25,
"modified": false
},
"page-9.php": {
"type": "-",
"size": 62783,
"lmtime": 0,
"modified": false
},
"plugins": {},
"readme.txt": {
"type": "-",
"size": 13153,
"lmtime": 0,
"modified": false
},
"screenshot.png": {
"type": "-",
"size": 110816,
"lmtime": 0,
"modified": false
},
"sidebar.php": {
"type": "-",
"size": 271,
"lmtime": 0,
"modified": false
},
"style.css": {
"type": "-",
"size": 11898,
"lmtime": 0,
"modified": false
},
"style.min.css": {
"type": "-",
"size": 5756,
"lmtime": 0,
"modified": false
},
"template-parts": {
"404.php": {
"type": "-",
"size": 611,
"lmtime": 0,
"modified": false
},
"archive.php": {
"type": "-",
"size": 1517,
"lmtime": 0,
"modified": false
},
"dynamic-footer.php": {
"type": "-",
"size": 2419,
"lmtime": 0,
"modified": false
},
"dynamic-header.php": {
"type": "-",
"size": 2773,
"lmtime": 0,
"modified": false
},
"footer.php": {
"type": "-",
"size": 582,
"lmtime": 0,
"modified": false
},
"frame-album-sections.php": {
"type": "-",
"size": 28467,
"lmtime": 0,
"modified": false
},
"frame-time-line.php": {
"type": "-",
"size": 15503,
"lmtime": 1747809385161.2688,
"modified": false
},
"header.php": {
"type": "-",
"size": 1155,
"lmtime": 0,
"modified": false
},
"search.php": {
"type": "-",
"size": 1741,
"lmtime": 0,
"modified": false
},
"single.php": {
"type": "-",
"size": 810,
"lmtime": 0,
"modified": false
}
},
"theme.css": {
"type": "-",
"size": 6510,
"lmtime": 0,
"modified": false
},
"theme.min.css": {
"type": "-",
"size": 5131,
"lmtime": 0,
"modified": false
}
}
}

View File

@@ -40,6 +40,42 @@ jQuery(function ($) {
'transform',
`translateX(${-scrollPosition}px)`
)
hideHelpingStep(1)
}
$('body').on('click', '.img-box-helping', function () {
hideHelpingStep(2)
})
$('body').on('click', '.song-handler-anim', function () {
hideHelpingStep(3)
})
shouldShowHelpingStep(1)
shouldShowHelpingStep(2)
shouldShowHelpingStep(3)
function shouldShowHelpingStep(stepNumber) {
const selector = `.helping .step-${stepNumber}`
const storageKey = `helpingStep${stepNumber}HiddenAt`
const lastHidden = localStorage.getItem(storageKey)
const now = Date.now()
if (lastHidden && now - parseInt(lastHidden) < 24 * 60 * 60 * 1000) {
$(selector).remove()
return false
}
return true
}
function hideHelpingStep(stepNumber) {
const selector = `.helping .step-${stepNumber}`
const storageKey = `helpingStep${stepNumber}HiddenAt`
const now = Date.now()
$(selector).remove()
localStorage.setItem(storageKey, now.toString())
}
// gsap.to("#frame-box-content, .piano", {
@@ -103,16 +139,19 @@ jQuery(function ($) {
jQuery(function ($) {
$('#frame-box nav #nav_foto').on('click', function () {
$('#frame-box #obrazy').hide()
$('#frame-box #foto').show()
$('#frame-box #plyty').hide()
$('#frame-box #biogram').hide()
})
$('#frame-box nav #nav_plyty').on('click', function () {
$('#frame-box #obrazy').hide()
$('#frame-box #foto').hide()
$('#frame-box #plyty').show()
$('#frame-box #biogram').hide()
})
$('#frame-box nav #nav_intro').on('click', function () {
$('#frame-box #obrazy').hide()
$('#frame-box #intro').show()
$('#frame-box #foto').hide()
$('#frame-box #plyty').hide()
@@ -120,19 +159,32 @@ jQuery(function ($) {
})
$('#frame-box #intro p').on('click', function () {
$('#frame-box #obrazy').hide()
$('#frame-box #intro').hide()
$('#frame-box #foto').hide()
$('#frame-box #plyty').show()
$('#frame-box #biogram').hide()
$('#frame-box nav#nav ul#nav_ul li').removeClass('active')
$('#frame-box nav#nav ul#nav_ul li#nav_plyty').addClass('active')
})
$('#frame-box nav #nav_biogram').on('click', function () {
$('#frame-box #obrazy').hide()
$('#frame-box #biogram').show()
$('#frame-box #intro').hide()
$('#frame-box #foto').hide()
$('#frame-box #plyty').hide()
})
$('#frame-box nav #nav_obrazy').on('click', function () {
$('#frame-box #obrazy').show()
$('#frame-box #biogram').hide()
$('#frame-box #intro').hide()
$('#frame-box #foto').hide()
$('#frame-box #plyty').hide()
})
$('#frame-box nav#nav ul#nav_ul li').on('click', function () {
$('#frame-box nav#nav ul#nav_ul li').removeClass('active')
$(this).addClass('active')
@@ -144,10 +196,9 @@ jQuery(function ($) {
$('.text-data', this).toggleClass('active')
})
})
jQuery(function ($) {
Fancybox.bind('[data-fancybox]', {
// Your custom options
// Інші параметри за потреби
})
})

View File

@@ -2172,4 +2172,139 @@ body.page-id-846 #content .page-content {
}
#biogram .swiper_biogram .swiper-pagination li.active {
color: #f3180c;
}
.helping .step-1 {
position: absolute;
bottom: 0;
left: 100%;
}
.helping .step-1 .step-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
}
.helping .step-1 .step-wrapper .step-icon {
width: 50px;
}
.helping .step-1 .step-wrapper .step-icon img {
width: 26px;
min-width: 26px;
height: 26px;
transform: rotate(285deg);
position: absolute;
bottom: 10px;
}
.helping .step-1 .step-wrapper .step-text {
padding: 10px;
min-width: 125px;
line-height: 1;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgb(0, 0, 0);
}
.helping .step-1 .step-wrapper .step-text span {
color: #000;
font-size: 12px;
font-family: "Arial", sans-serif;
font-weight: 700;
line-height: 1;
}
.helping .step-2 {
position: absolute;
bottom: 0;
right: 100%;
z-index: 1;
}
.helping .step-2 .step-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
}
.helping .step-2 .step-wrapper .step-icon {
width: 40px;
min-width: 40px;
}
.helping .step-2 .step-wrapper .step-icon img {
width: 26px;
min-width: 26px;
height: 26px;
transform: rotate(80deg);
position: absolute;
bottom: 10px;
}
.helping .step-2 .step-wrapper .step-text {
padding: 10px;
min-width: 140px;
line-height: 1;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgb(0, 0, 0);
}
.helping .step-2 .step-wrapper .step-text span {
color: #000;
font-size: 12px;
font-family: "Arial", sans-serif;
font-weight: 700;
line-height: 1;
}
.helping .step-3 {
position: absolute;
bottom: 0;
right: 100%;
z-index: 1;
}
.helping .step-3 .step-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
}
.helping .step-3 .step-wrapper .step-icon {
width: 25px;
min-width: 25px;
}
.helping .step-3 .step-wrapper .step-icon img {
width: 26px;
min-width: 26px;
height: 26px;
transform: rotate(80deg);
position: absolute;
bottom: 10px;
}
.helping .step-3 .step-wrapper .step-text {
padding: 10px;
min-width: 160px;
line-height: 1;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgb(0, 0, 0);
}
.helping .step-3 .step-wrapper .step-text span {
color: #000;
font-size: 12px;
font-weight: 700;
font-family: "Arial", sans-serif;
line-height: 1;
}
#obrazy .obrazy-wrapper {
overflow: auto;
max-height: 347px;
height: 347px;
}
#obrazy ul {
padding: 40px 30px;
margin: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
#obrazy ul li img {
width: 100%;
max-width: -moz-fit-content;
max-width: fit-content;
aspect-ratio: 16/9;
-o-object-fit: contain;
object-fit: contain;
}/*# sourceMappingURL=custom.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -2703,3 +2703,164 @@ body {
}
}
}
.helping {
.step {
&-1 {
position: absolute;
bottom: 0;
left: 100%;
.step-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
.step-icon {
width: 50px;
img {
width: 26px;
min-width: 26px;
height: 26px;
transform: rotate(285deg);
position: absolute;
bottom: 10px;
}
}
.step-text {
padding: 10px;
min-width: 125px;
line-height: 1;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
span {
color: #000;
font-size: 12px;
font-family: 'Arial', sans-serif;
font-weight: 700;
line-height: 1;
}
}
}
}
&-2 {
position: absolute;
bottom: 0;
right: 100%;
z-index: 1;
.step-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
.step-icon {
width: 40px;
min-width: 40px;
img {
width: 26px;
min-width: 26px;
height: 26px;
transform: rotate(80deg);
position: absolute;
bottom: 10px;
}
}
.step-text {
padding: 10px;
min-width: 140px;
line-height: 1;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
span {
color: #000;
font-size: 12px;
font-family: 'Arial', sans-serif;
font-weight: 700;
line-height: 1;
}
}
}
}
&-3 {
position: absolute;
bottom: 0;
right: 100%;
z-index: 1;
.step-wrapper {
display: flex;
flex-direction: row;
gap: 10px;
.step-icon {
width: 25px;
min-width: 25px;
img {
width: 26px;
min-width: 26px;
height: 26px;
transform: rotate(80deg);
position: absolute;
bottom: 10px;
}
}
.step-text {
padding: 10px;
min-width: 160px;
line-height: 1;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
span {
color: #000;
font-size: 12px;
font-weight: 700;
font-family: 'Arial', sans-serif;
line-height: 1;
}
}
}
}
}
}
#obrazy {
.obrazy-wrapper {
overflow: auto;
max-height: 347px;
height: 347px;
}
ul {
padding: 40px 30px;
margin: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
li {
img {
width: 100%;
max-width: fit-content;
aspect-ratio: 16/9;
object-fit: contain;
}
}
}
}

View File

@@ -25,7 +25,7 @@
<li id="nav_intro">
<img src="/wp-content/uploads/2024/07/intro-1.png" alt="">
</li>
<li id="nav_plyty">
<li id="nav_plyty" class="active">
<img src="/wp-content/uploads/2024/07/plyty-1.png" alt="">
</li>
<li id="nav_foto">
@@ -37,7 +37,7 @@
<li id="nav_biogram">
<img src="/wp-content/uploads/2024/07/biogram-1.png" alt="">
</li>
<li>
<li id="nav_obrazy">
<img src="/wp-content/uploads/2024/07/obrazy-1.png" alt="">
</li>
</ul>
@@ -49,6 +49,19 @@
<img class="song-hand" src="/wp-content/uploads/2024/04/342.png" alt="">
<img class="song-line-1" src="/wp-content/uploads/2024/04/346.png" alt="">
<img class="song-box" src="/wp-content/uploads/2024/04/1.png" alt="">
<div class="helping">
<div class="step step-3">
<div class="step-wrapper">
<div class="step-text">
<span>Kliknij w gramofon, aby włączyć lub wyłączyć muzyke</span>
</div>
<div class="step-icon">
<img src="/wp-content/uploads/2025/05/Hand-Pointer-Icon.svg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="intro" style="display: none;">
@@ -90,7 +103,10 @@
<?php foreach (get_field('biogram') as $item) : ?>
<div class="swiper-slide">
<div class="slide-img">
<img src="<?= $item['url']; ?>" alt="">
<a href="<?= esc_url($item['url']); ?>" data-fancybox>
<img src="<?= esc_url($item['url']); ?>" alt="">
</a>
<!-- <img src="<?= $item['url']; ?>" alt=""> -->
</div>
<div class="slide-text">
<p><?= $item['description']; ?></p>
@@ -109,6 +125,22 @@
<?php endif; ?>
</div>
<div id="obrazy" style="display: none;">
<?php if (get_field('obrazy')) : ?>
<div class="obrazy-wrapper">
<ul>
<?php foreach (get_field('obrazy') as $image) : ?>
<li>
<a href="<?php echo esc_url($image); ?>" data-fancybox>
<img src="<?php echo esc_url($image); ?>" alt="">
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
</div>
<div id="book">
<div class="book-actions">
<div class="book-contents" style="display: none;">

View File

@@ -32,11 +32,24 @@
<div class="img-box">
<div class="img-box img-box-helping">
<a href="<?= get_field("albums_arr")[0]['album_1_big']; ?>" data-fancybox>
<img class="album" src="<?= get_field("albums_arr")[0]['album_1']; ?>" alt="">
</a>
<img class="album-record" src="/wp-content/uploads/2024/04/record.png" alt="">
<div class="helping">
<div class="step step-2">
<div class="step-wrapper">
<div class="step-text">
<span>Kliknij w płyte, aby powiększyć okładke</span>
</div>
<div class="step-icon">
<img src="/wp-content/uploads/2025/05/Hand-Pointer-Icon.svg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>

View File

@@ -481,5 +481,18 @@
<img class="hand-finder-part-1" src="/wp-content/uploads/2024/04/2-1.png" alt="">
<img class="hand" src="/wp-content/uploads/2024/04/1-1.png" alt="">
<!-- <img src="/wp-content/uploads/2024/04/finger.png" alt=""> -->
<div class="helping">
<div class="step step-1">
<div class="step-wrapper">
<div class="step-icon">
<img src="/wp-content/uploads/2025/05/Hand-Pointer-Icon.svg" alt="">
</div>
<div class="step-text">
<span>Kliknij raczke i przesuwaj w prawo lub lewo aby nawigowac</span>
</div>
</div>
</div>
</div>
</div>
</div>