Save
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
{"version":3,"sources":["custom.scss"],"names":[],"mappings":"AACE,wBACE,gBAAA,CACA,gBAAA,CAEA,2BACE,aAAA,CACA,cAAA,CAMJ,0BACE,aAAA,CACA,mBAAA,CAEA,6BACE,aAAA,CACA,cAAA,CAKN,YACE,YAAA,CACA,kBAAA,CACA,kBAAA,CACA,sBAAA,CACA,UAAA,CACA,cAAA,CACA,QAAA,CAEA,cACE,cAAA,CAKF,YACE,4BAAA,CAGF,iBACE,wBAAA,CACA,YAAA,CACA,UAAA,CAOE,4DACE,0DAAA,CAKF,uEACE,qBAAA,CAEA,0EACE,QAAA,CAGF,yEACE,QAAA,CAQR,uBACE,cAAA,CAEA,mCACE,mCAAA,CAKN,oBACE,gBAAA,CAGF,+BACE,eAAA,CAGE,4DACE,uBAAA,CAGF,8EACE,uBAAA","file":"custom.css","sourcesContent":["#home-page-seo {\r\n .wrapper {\r\n padding-top: 75px;\r\n padding-bottom: 0;\r\n\r\n h2 {\r\n margin-left: 0;\r\n max-width: 100%;\r\n }\r\n }\r\n}\r\n\r\n#garden-page-seo {\r\n .wrapper {\r\n padding-top: 0;\r\n padding-bottom: 75px;\r\n\r\n h2 {\r\n margin-left: 0;\r\n max-width: 100%;\r\n }\r\n }\r\n}\r\n\r\n.pagination {\r\n display: flex;\r\n align-items: center;\r\n margin: 25px 0 50px;\r\n justify-content: center;\r\n width: 100%;\r\n font-size: 16px;\r\n gap: 10px;\r\n\r\n a {\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n.c-select {\r\n p {\r\n margin-bottom: 5px !important;\r\n }\r\n\r\n select {\r\n border: 1px solid #88b14b;\r\n padding: 10px;\r\n width: 100%;\r\n }\r\n}\r\n\r\nbody.page-id-2598 {\r\n main {\r\n section#korzysci {\r\n .boxes.simple-cards {\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n }\r\n }\r\n\r\n section#garden-page-seo {\r\n .wrapper.wrapper--inner {\r\n flex-direction: column;\r\n\r\n h2 {\r\n margin: 0;\r\n }\r\n\r\n p {\r\n margin: 0;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n#calc-ch-1 {\r\n .slide-data {\r\n flex-wrap: wrap;\r\n\r\n .calc-texts {\r\n width: calc(100% - 200px) !important;\r\n }\r\n }\r\n}\r\n\r\n.checkboxes-confirm {\r\n padding: 5px 37px;\r\n}\r\n\r\n.swiper-wrapper.wrapper--inner {\r\n background: #000;\r\n\r\n .swiper-slide:first-child {\r\n h1 {\r\n flex: 0 0 35% !important;\r\n }\r\n\r\n .hero-slider-content {\r\n flex: 0 0 65% !important;\r\n }\r\n }\r\n}"]}
|
||||
{"version":3,"sources":["custom.scss"],"names":[],"mappings":"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","file":"custom.css"}
|
||||
@@ -1,101 +1,407 @@
|
||||
#home-page-seo {
|
||||
.wrapper {
|
||||
padding-top: 75px;
|
||||
padding-bottom: 0;
|
||||
.wrapper {
|
||||
padding-top: 75px;
|
||||
padding-bottom: 0;
|
||||
|
||||
h2 {
|
||||
margin-left: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin-left: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#garden-page-seo {
|
||||
.wrapper {
|
||||
padding-top: 0;
|
||||
padding-bottom: 75px;
|
||||
.wrapper {
|
||||
padding-top: 0;
|
||||
padding-bottom: 75px;
|
||||
|
||||
h2 {
|
||||
margin-left: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin-left: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 25px 0 50px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 25px 0 50px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
gap: 10px;
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.c-select {
|
||||
p {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
select {
|
||||
border: 1px solid #88b14b;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
select {
|
||||
border: 1px solid #88b14b;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body.page-id-2598 {
|
||||
main {
|
||||
section#korzysci {
|
||||
.boxes.simple-cards {
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
}
|
||||
main {
|
||||
section#korzysci {
|
||||
.boxes.simple-cards {
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
section#garden-page-seo {
|
||||
.wrapper.wrapper--inner {
|
||||
flex-direction: column;
|
||||
section#garden-page-seo {
|
||||
.wrapper.wrapper--inner {
|
||||
flex-direction: column;
|
||||
padding-bottom: 0;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#calc-ch-1 {
|
||||
.slide-data {
|
||||
flex-wrap: wrap;
|
||||
.slide-data {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.calc-texts {
|
||||
width: calc(100% - 200px) !important;
|
||||
}
|
||||
}
|
||||
.calc-texts {
|
||||
width: calc(100% - 200px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkboxes-confirm {
|
||||
padding: 5px 37px;
|
||||
padding: 5px 37px;
|
||||
}
|
||||
|
||||
.tabs_examples {
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&-nav {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
button {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
background: #f5f5f5;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 3px solid transparent;
|
||||
margin-bottom: -2px;
|
||||
|
||||
&:hover {
|
||||
background: #eee;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #fff;
|
||||
color: #88b14b;
|
||||
border-bottom-color: #88b14b;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-panel {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&-img {
|
||||
flex: 0 0 45%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-desc {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-datepicker {
|
||||
p {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.datepicker-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid #88b14b;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: #6d9338;
|
||||
box-shadow: 0 0 0 3px rgba(136, 177, 75, 0.12);
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
|
||||
&.placeholder {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-chevron {
|
||||
transition: transform 0.2s;
|
||||
|
||||
&.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-calendar {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||
padding: 16px;
|
||||
width: 310px;
|
||||
animation: dpFadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes dpFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
font-size: 20px;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition:
|
||||
background 0.2s,
|
||||
color 0.2s;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
background: #88b14b;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-weekdays {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-days {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.datepicker-day {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s,
|
||||
color 0.15s;
|
||||
|
||||
&.empty {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:not(.empty):not(.disabled):hover {
|
||||
background: rgba(136, 177, 75, 0.15);
|
||||
}
|
||||
|
||||
&.today {
|
||||
font-weight: 700;
|
||||
border: 2px solid #88b14b;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: #88b14b;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-wrapper.wrapper--inner {
|
||||
background: #000;
|
||||
background: #000;
|
||||
|
||||
.swiper-slide:first-child {
|
||||
h1 {
|
||||
flex: 0 0 35% !important;
|
||||
}
|
||||
.swiper-slide:first-child {
|
||||
h1 {
|
||||
flex: 0 0 35% !important;
|
||||
}
|
||||
|
||||
.hero-slider-content {
|
||||
flex: 0 0 65% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hero-slider-content {
|
||||
flex: 0 0 65% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section#price_tiles {
|
||||
> .wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
ol.price-tiles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 30px;
|
||||
row-gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li.price-tile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
flex-direction: row;
|
||||
gap: 30px;
|
||||
// width: calc(100% / 3);
|
||||
width: 80%;
|
||||
|
||||
padding: 40px 22px 30px;
|
||||
clip-path: polygon(
|
||||
0% 5%,
|
||||
5% 0%,
|
||||
100% 0%,
|
||||
100% 5%,
|
||||
100% 100%,
|
||||
0% 100%,
|
||||
0% 5%
|
||||
);
|
||||
background-color: #f7f5f5;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.price-tile--img {
|
||||
img {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
.price-tile--data {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -195,3 +195,13 @@ function my_theme_enqueue_styles() {
|
||||
|
||||
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 999 );
|
||||
|
||||
function js_enqueue_scripts() {
|
||||
wp_enqueue_script(
|
||||
'js-custom',
|
||||
get_template_directory_uri() . '/js/custom.js',
|
||||
array('jquery'),
|
||||
filemtime( get_template_directory() . '/js/custom.js' ),
|
||||
true
|
||||
);
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'js_enqueue_scripts' );
|
||||
|
||||
41
wp-content/themes/ostal_WP/js/custom.js
Normal file
41
wp-content/themes/ostal_WP/js/custom.js
Normal file
@@ -0,0 +1,41 @@
|
||||
jQuery(document).ready(function($){
|
||||
const ogrodyZimoweBox = $(`
|
||||
<section id="price_tiles" class="section-boxes-repeater">
|
||||
<div class="wrapper wrapper--inner">
|
||||
<ol class="price-tiles">
|
||||
<li class="price-tile">
|
||||
<div class="price-tile--img">
|
||||
<img src="/wp-content/uploads/2026/02/image-1.png" alt="">
|
||||
<\/div>
|
||||
<div class="price-tile--data">
|
||||
<h3>Ogród zimowy standard<\/h3>
|
||||
<p>z szybami Ug=1,1 na dachu i ścianach i z jednymi drzwiami tarasowymi uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m. bez osłon przeciwsłonecznych. (nadaje się w zacienione miejsca)<\/p>
|
||||
<\/div>
|
||||
<\/li>
|
||||
<li class="price-tile">
|
||||
<div class="price-tile--img">
|
||||
<img src="/wp-content/uploads/2026/02/image-2.png" alt="">
|
||||
<\/div>
|
||||
<div class="price-tile--data">
|
||||
<h3>Ogród zimowy Comfort<\/h3>
|
||||
<p>z szybami Ug=1,1 na dachu i ścianach i z dwoma drzwiami tarasowymi uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m + boczna ściana 3 kwatery 1 skrzydło PSK + osłona przeciwsłoneczna dachu, 2 osłony Veranda ster. Elektr.<\/p>
|
||||
<\/div>
|
||||
<\/li>
|
||||
<li class="price-tile">
|
||||
<div class="price-tile--img">
|
||||
<img src="/wp-content/uploads/2026/02/image-3.png" alt="">
|
||||
<\/div>
|
||||
<div class="price-tile--data">
|
||||
<h3>Ogród zimowy premium<\/h3>
|
||||
<p>z szybami energooszczędnymi Ug=0,5 na dachu i ścianach i z dwoma drzwiami tarasowymi. 1 szt. uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m + 1 szt. drzwi HS na bocznej ścianie 1 skrzydło + komplet osłon przeciwsłonecznych na dachu, 2 osłony Veranda ster. Elektr. z czujnikiem słońce wiatr + 1 szt. + osłony przeciwsłoneczne żaluzje C80 na bocznych ścianach ster. el. + okno HS w dachu przesuwane, sterowane ele. + oświetlenie punktowe LED z pilotem, Montaż na co drugiej krokwi.<\/p>
|
||||
<\/div>
|
||||
<\/li>
|
||||
<\/ol>
|
||||
<\/div>
|
||||
<\/section>
|
||||
`)
|
||||
|
||||
if ($('body').hasClass('page-id-802')) {
|
||||
$('#korzysci').before(ogrodyZimoweBox);
|
||||
}
|
||||
})
|
||||
@@ -112,6 +112,47 @@
|
||||
<p v-if="selected_option_1 === 0" class="budget-info" style="margin-top: 20px; font-size: 14px; color: #666; font-style: italic;">
|
||||
Orientacyjny budżet całorocznego ogrodu zimowego zwykle mieści się w przedziale 120 000 – 180 000 zł netto
|
||||
</p>
|
||||
|
||||
<div class="tabs_examples" v-if="selected_option_1 === 0">
|
||||
<h3>Przykłady cen ogrodu zimowego 4x5m</h3>
|
||||
<div class="tabs_examples-nav">
|
||||
<button :class="{ active: activeExampleTab === 'standard' }" @click="activeExampleTab = 'standard'">Standard</button>
|
||||
<button :class="{ active: activeExampleTab === 'comfort' }" @click="activeExampleTab = 'comfort'">Comfort</button>
|
||||
<button :class="{ active: activeExampleTab === 'premium' }" @click="activeExampleTab = 'premium'">Premium</button>
|
||||
</div>
|
||||
<div class="tabs_examples-content">
|
||||
<!-- Standard -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'standard'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-1.png" alt="Ogród zimowy Standard 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Standard</h4>
|
||||
<p>Ogród zimowy standard z szybami Ug=1,1 na dachu i ścianach i z jednymi drzwiami tarasowymi uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m. Bez osłon przeciwsłonecznych (nadaje się w zacienione miejsca).</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comfort -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'comfort'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-2.png" alt="Ogród zimowy Comfort 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Comfort</h4>
|
||||
<p>Ogród zimowy Comfort z szybami Ug=1,1 na dachu i ścianach i z dwoma drzwiami tarasowymi uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m + boczna ściana 3 kwatery 1 skrzydło PSK + osłona przeciwsłoneczna dachu, 2 osłony Veranda ster. elektr.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'premium'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-3.png" alt="Ogród zimowy Premium 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Premium</h4>
|
||||
<p>Ogród zimowy premium z szybami energooszczędnymi Ug=0,5 na dachu i ścianach i z dwoma drzwiami tarasowymi. 1 szt. uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m + 1 szt. drzwi HS na bocznej ścianie 1 skrzydło + komplet osłon przeciwsłonecznych na dachu, 2 osłony Veranda ster. elektr. z czujnikiem słońce wiatr + 1 szt. osłony przeciwsłoneczne żaluzje C80 na bocznych ścianach ster. el. + okno HS w dachu przesuwane, sterowane el. + oświetlenie punktowe LED z pilotem. Montaż na co drugiej krokwi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -256,23 +297,57 @@
|
||||
</ul>
|
||||
|
||||
<ul v-if="selected_option_1 === 0" class="calc-texts" style="margin-top: 20px;">
|
||||
<li class="c-select">
|
||||
<li class="c-datepicker">
|
||||
<p>Planowany termin montażu</p>
|
||||
<select v-model="configData.step_4.planned_date">
|
||||
<option value="">-- Wybierz --</option>
|
||||
<option value="3–6 miesięcy">3–6 miesięcy</option>
|
||||
<option value="6–12 miesięcy">6–12 miesięcy</option>
|
||||
<option value="później">później</option>
|
||||
</select>
|
||||
<div class="datepicker-wrapper">
|
||||
<div class="datepicker-input" @click="showDatepicker = !showDatepicker">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#88b14b" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</svg>
|
||||
<span :class="{ placeholder: !configData.step_4.planned_date }">
|
||||
{{ configData.step_4.planned_date || 'Wybierz datę' }}
|
||||
</span>
|
||||
<svg class="datepicker-chevron" :class="{ open: showDatepicker }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="datepicker-calendar" v-if="showDatepicker">
|
||||
<div class="datepicker-header">
|
||||
<button type="button" @click.stop="dpPrevMonth">‹</button>
|
||||
<span>{{ dpMonthName }} {{ dpYear }}</span>
|
||||
<button type="button" @click.stop="dpNextMonth">›</button>
|
||||
</div>
|
||||
<div class="datepicker-weekdays">
|
||||
<span>Pn</span><span>Wt</span><span>Śr</span><span>Cz</span><span>Pt</span><span>Sb</span><span>Nd</span>
|
||||
</div>
|
||||
<div class="datepicker-days">
|
||||
<span v-for="blank in dpFirstDayOffset" class="datepicker-day empty"></span>
|
||||
<span
|
||||
v-for="day in dpDaysInMonth"
|
||||
:key="day"
|
||||
class="datepicker-day"
|
||||
:class="{
|
||||
selected: dpIsSelected(day),
|
||||
disabled: dpIsDisabled(day),
|
||||
today: dpIsToday(day)
|
||||
}"
|
||||
@click.stop="dpSelectDay(day)"
|
||||
>{{ day }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="c-select">
|
||||
<p>Orientacyjny budżet</p>
|
||||
<select v-model="configData.step_4.budget_range">
|
||||
<option value="">-- Wybierz --</option>
|
||||
<option value="poniżej 100 000 zł">poniżej 100 000 zł</option>
|
||||
<option value="120 000 – 150 000 zł">120 000 – 150 000 zł</option>
|
||||
<option value="150 000 – 200 000 zł">150 000 – 200 000 zł</option>
|
||||
<option value="powyżej 200 000 zł">powyżej 200 000 zł</option>
|
||||
<option value="100.000 zł - 150.000 zł">100.000 zł - 150.000 zł</option>
|
||||
<option value="150.000 zł - 200.000 zł">150.000 zł - 200.000 zł</option>
|
||||
<option value="250.000 zł - 300.000 zł">250.000 zł - 300.000 zł</option>
|
||||
<option value="Pow. 300.000 zł">Pow. 300.000 zł</option>
|
||||
</select>
|
||||
</li>
|
||||
<li class="c-select">
|
||||
@@ -372,6 +447,10 @@
|
||||
selected_option_3: null,
|
||||
progressBar: 25,
|
||||
windowWidth: 0,
|
||||
activeExampleTab: 'standard',
|
||||
showDatepicker: false,
|
||||
dpMonth: new Date().getMonth(),
|
||||
dpYear: new Date().getFullYear(),
|
||||
|
||||
acfData: {
|
||||
acf: {}
|
||||
@@ -587,6 +666,36 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
dpPrevMonth() {
|
||||
if (this.dpMonth === 0) { this.dpMonth = 11; this.dpYear--; }
|
||||
else { this.dpMonth--; }
|
||||
},
|
||||
dpNextMonth() {
|
||||
if (this.dpMonth === 11) { this.dpMonth = 0; this.dpYear++; }
|
||||
else { this.dpMonth++; }
|
||||
},
|
||||
dpSelectDay(day) {
|
||||
if (this.dpIsDisabled(day)) return;
|
||||
const d = String(day).padStart(2, '0');
|
||||
const m = String(this.dpMonth + 1).padStart(2, '0');
|
||||
this.configData.step_4.planned_date = `${d}.${m}.${this.dpYear}`;
|
||||
this.showDatepicker = false;
|
||||
},
|
||||
dpIsSelected(day) {
|
||||
const d = String(day).padStart(2, '0');
|
||||
const m = String(this.dpMonth + 1).padStart(2, '0');
|
||||
return this.configData.step_4.planned_date === `${d}.${m}.${this.dpYear}`;
|
||||
},
|
||||
dpIsDisabled(day) {
|
||||
const date = new Date(this.dpYear, this.dpMonth, day);
|
||||
const today = new Date();
|
||||
today.setHours(0,0,0,0);
|
||||
return date < today;
|
||||
},
|
||||
dpIsToday(day) {
|
||||
const now = new Date();
|
||||
return day === now.getDate() && this.dpMonth === now.getMonth() && this.dpYear === now.getFullYear();
|
||||
},
|
||||
getWindowWidth() {
|
||||
this.windowWidth = window.innerWidth;
|
||||
},
|
||||
@@ -594,10 +703,26 @@
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.getWindowWidth);
|
||||
this.getWindowWidth();
|
||||
document.addEventListener('click', (e) => {
|
||||
if (this.showDatepicker && !e.target.closest('.datepicker-wrapper')) {
|
||||
this.showDatepicker = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
debug() {
|
||||
return this.configData
|
||||
},
|
||||
dpMonthName() {
|
||||
const names = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'];
|
||||
return names[this.dpMonth];
|
||||
},
|
||||
dpDaysInMonth() {
|
||||
return new Date(this.dpYear, this.dpMonth + 1, 0).getDate();
|
||||
},
|
||||
dpFirstDayOffset() {
|
||||
const d = new Date(this.dpYear, this.dpMonth, 1).getDay();
|
||||
return d === 0 ? 6 : d - 1;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -25,37 +25,29 @@ $gallery_2 = [
|
||||
];
|
||||
$benefits = [
|
||||
[
|
||||
'title' => 'Więcej powierzchni przez cały rok',
|
||||
'text' => 'Dodatkowe miejsce dla gości, klientów lub pracowników niezależnie od pogody.',
|
||||
'title' => '',
|
||||
'text' => 'Dodatkową powierzchnię użytkową przez cały rok.',
|
||||
],
|
||||
[
|
||||
'title' => 'Ochrona przed deszczem, wiatrem i chłodem',
|
||||
'text' => 'Stabilny komfort użytkowania dzięki izolowanej konstrukcji i szczelnym rozwiązaniom.',
|
||||
'title' => '',
|
||||
'text' => 'Ochronę przed deszczem, wiatrem i niską temperaturą oraz przed palącym letnim słońcem.',
|
||||
],
|
||||
[
|
||||
'title' => 'Rozwiązanie klasy premium',
|
||||
'text' => 'Systemy aluminiowe + szkło o bardzo dobrych parametrach (Ug = 1,1) oraz możliwość zastosowania markiz.',
|
||||
'title' => '',
|
||||
'text' => 'Estetyczne i trwałe rozwiązanie klasy premium.',
|
||||
],
|
||||
[
|
||||
'title' => 'Przewidywalny harmonogram i terminowość',
|
||||
'text' => 'Pracujemy na umowie, z ustalonym planem realizacji i rezerwacją terminu.',
|
||||
],
|
||||
[
|
||||
'title' => 'Estetyka i spójność z bryłą obiektu',
|
||||
'text' => 'Dopasowujemy projekt do elewacji i charakteru budynku.',
|
||||
],
|
||||
[
|
||||
'title' => 'Możliwość rozbudowy i doposażenia',
|
||||
'text' => 'Modułowe rozwiązania: przeszklenia stałe/przesuwne, różne typy dachów, osłony przeciwsłoneczne.',
|
||||
'title' => '',
|
||||
'text' => 'Przewidywalny harmonogram i jasne warunki współpracy.',
|
||||
]
|
||||
];
|
||||
|
||||
$collaboration = [
|
||||
'Analiza potrzeb i funkcji przestrzeni',
|
||||
'Koncepcja i dobór rozwiązań technicznych',
|
||||
'Oferta + harmonogram realizacji',
|
||||
'Umowa i zaliczka rezerwująca termin',
|
||||
'Produkcja i montaż',
|
||||
"Analiza potrzeb i funkcji przestrzeni",
|
||||
"Koncepcja i dobór rozwiązań technicznych",
|
||||
"Oferta i harmonogram realizacji",
|
||||
"Umowa i zaliczka rezerwująca termin",
|
||||
"Produkcja i montaż"
|
||||
];
|
||||
|
||||
?>
|
||||
@@ -64,12 +56,12 @@ $collaboration = [
|
||||
<span class="bg-filter"></span>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-heading heading--xl text-white">
|
||||
Ogrody zimowe dla firm
|
||||
Ogrody zimowe dla firm - całoroczne przestrzenie użytkowe
|
||||
</h1>
|
||||
<p class="hero-text text-white">
|
||||
Projektujemy i realizujemy całoroczne ogrody zimowe dla obiektów komercyjnych: restauracji, hoteli, biur i showroomów. Zyskujesz dodatkową przestrzeń użytkową przez cały rok, ochronę przed pogodą i przewidywalny harmonogram realizacji — w standardzie premium.
|
||||
Projektujemy i realizujemy całoroczne ogrody zimowe dla obiektów komercyjnych: restauracji, hoteli, biur, showroomów oraz inwestycji prywatnych.
|
||||
</p>
|
||||
<p class="hero-text text-white">Realizacje całorocznych ogrodów zimowych startują od ok. 120 000 zł netto.</p>
|
||||
<p class="hero-text text-white">Nasze konstrukcje pozwalają wydłużyć sezon użytkowania przestrzeni, zabezpieczyć ją przed warunkami atmosferycznymi i zwiększyć komfort klientów oraz pracowników — bez kosztów stałej rozbudowy budynku.</p>
|
||||
</div>
|
||||
<div class="hero-form">
|
||||
<?php echo do_shortcode('[contact-form-7 id="26e16e5" title="Formularz kontaktowy dla firm"]'); ?>
|
||||
@@ -79,8 +71,8 @@ $collaboration = [
|
||||
|
||||
<section id="korzysci" class="section-boxes-repeater ">
|
||||
<div class="wrapper wrapper--inner">
|
||||
<h2 class="section-heading heading--md">Korzyści dla obiektów komercyjnych</h2>
|
||||
<p class="section-description">Dlaczego firmy wybierają całoroczne ogrody zimowe?</p>
|
||||
<h2 class="section-heading heading--md">Co zyskuje firma?</h2>
|
||||
<!-- <p class="section-description">Dlaczego firmy wybierają całoroczne ogrody zimowe?</p> -->
|
||||
<div class="boxes simple-cards">
|
||||
<?php foreach ($benefits as $item) : ?>
|
||||
<div class="box-single ">
|
||||
@@ -89,7 +81,7 @@ $collaboration = [
|
||||
<img src="https://ostal.pl/wp-content/uploads/2023/10/Vector.png" alt="" class="img-auto">
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<h3 class="box-content__heading heading--sm"><?= $item['title'] ?></h3>
|
||||
<!-- <h3 class="box-content__heading heading--sm"><?= $item['title'] ?></h3> -->
|
||||
<p class="box-content__text text-bold"><?= $item['text'] ?></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,16 +94,15 @@ $collaboration = [
|
||||
<div class="wrapper wrapper--inner imageLeft">
|
||||
<div class="col col-text">
|
||||
<h2 class="section-heading heading heading--md textRight">
|
||||
Dla jakich branż?</h2>
|
||||
Sprawdzone systemy aluminiowe</h2>
|
||||
<div class="col-text-content">
|
||||
<p>Realizujemy rozwiązania dla:</p>
|
||||
<p>Pracujemy na <strong>izolowanych systemach aluminiowych</strong>, z szybami o bardzo dobrych parametrach cieplnych (Ug = 0,5), z możliwością zastosowania:</p>
|
||||
<p>
|
||||
- restauracji i kawiarni (zwiększenie liczby miejsc i komfortu gości),<br>
|
||||
- hoteli i pensjonatów (strefy śniadaniowe, lounge, przestrzenie premium),<br>
|
||||
- biur i showroomów (strefy spotkań, ekspozycji, relaksu),<br>
|
||||
- inwestycji komercyjnych i usług (poczekalnie, przestrzenie reprezentacyjne).
|
||||
- dachów jednospadowych i wielospadowych<br>
|
||||
- zintegrowanych markiz zewnętrznych, żaluzji fasadowych i osłon typu ZIIIP<br>
|
||||
- przeszkleń stałych, przesuwnych i składanych.
|
||||
</p>
|
||||
<p>Każdy projekt dobieramy do funkcji przestrzeni i oczekiwanego sposobu użytkowania.</p>
|
||||
<p>To rozwiązania stosowane również w nowoczesnych elewacjach i obiektach komercyjnych.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-image">
|
||||
@@ -124,43 +115,24 @@ $collaboration = [
|
||||
|
||||
<section class="two-cols bg-light">
|
||||
<div class="wrapper wrapper--inner imageLeft">
|
||||
<div class="col col-image">
|
||||
<div class="image-wrapper">
|
||||
<img src="https://ostal.pl/wp-content/uploads/2026/01/IMG_1341-scaled.jpg" alt="" class="img-auto section-image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-text">
|
||||
<h2 class="section-heading heading heading--md textRight">Sprawdzone systemy aluminiowe i komfort całoroczny</h2>
|
||||
<div class="col-text-content">
|
||||
<p>Pracujemy na izolowanych systemach aluminiowych oraz przeszkleniach o wysokich parametrach termicznych (Ug = 1,1). W zależności od potrzeb obiektu dobieramy konstrukcję dachu (jedno- lub wielospadową), rodzaj przeszkleń oraz osłony przeciwsłoneczne.</p>
|
||||
<p>Rozwiązanie projektowe — nie produkt “z półki” — dlatego każda realizacja jest indywidualna.</p>
|
||||
<p><strong>Realizacje całorocznych ogrodów zimowych rozpoczynają się od ok. 120 000 zł netto.</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="two-cols bg-light">
|
||||
<div class="wrapper wrapper--inner imageLeft">
|
||||
<div class="col col-text">
|
||||
<h2 class="section-heading heading heading--md textRight">
|
||||
Doświadczenie w realizacjach dla firm</h2>
|
||||
<div class="col-text-content">
|
||||
<p>Od lat realizujemy dla klientów biznesowych montaż żaluzji fasadowych i rolet zewnętrznych w obiektach komercyjnych. Ogrody zimowe są naturalnym rozszerzeniem tych systemów — opartym na tej samej technologii, standardach montażu i podejściu projektowym: porządek, terminowość, trwałość i serwis.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-image">
|
||||
<div class="image-wrapper">
|
||||
<img src="https://ostal.pl/wp-content/uploads/2026/01/199-f27gxxl.jpg" alt="" class="img-auto section-image">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col-text">
|
||||
<h2 class="section-heading heading heading--md textRight">Doświadczenie w realizacjach dla firm</h2>
|
||||
<div class="col-text-content">
|
||||
<p>Od lat realizujemy dla klientów biznesowych <strong>systemy aluminiowe</strong>, żaluzje fasadowe i rolety zewnętrzne w obiektach komercyjnych.</p>
|
||||
<p>Ogrody zimowe są naturalnym rozszerzeniem tych systemów — opartym na tej samej technologii, standardach montażu i podejściu projektowym.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="collaboration" class="section-boxes-repeater ">
|
||||
<div class="wrapper wrapper--inner">
|
||||
<h2 class="section-heading heading--md">Jak wygląda współpraca z firmą?</h2>
|
||||
<p class="section-description">Chcesz szybko sprawdzić, czy projekt ma sens w Twoim obiekcie? Zostaw kontakt — oddzwonimy i zadamy kilka pytań kwalifikujących.</p>
|
||||
<h2 class="section-heading heading--md">Jak wygląda współpraca?</h2>
|
||||
<div class="boxes simple-cards">
|
||||
<?php foreach ($collaboration as $item) : ?>
|
||||
<div class="box-single ">
|
||||
@@ -215,8 +187,8 @@ $collaboration = [
|
||||
<section id="garden-page-seo" class="two-cols-with-bg bg-dark" style="background-image: url('https://ostal.pl/wp-content/uploads/2021/05/hero-about.jpg');">
|
||||
<span class="bg-filter"></span>
|
||||
<div class="wrapper wrapper--inner">
|
||||
<h2>Porozmawiajmy o rozwiązaniu dla Twojej firmy</h2>
|
||||
<p>Powiedz, do czego ma służyć przestrzeń i w jakich miesiącach ma być użytkowana. Dobierzemy technologię, przygotujemy koncepcję i harmonogram.</p>
|
||||
<h2>Realizacje całorocznych ogrodów zimowych rozpoczynają się od ok. 120 000 zł netto.</h2>
|
||||
<!-- <p>Powiedz, do czego ma służyć przestrzeń i w jakich miesiącach ma być użytkowana. Dobierzemy technologię, przygotujemy koncepcję i harmonogram.</p> -->
|
||||
<a href="#hero_box" class="btn btn-primary">Umów rozmowę</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user