Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nowa strona kontaktowa

Browse Source
This commit is contained in:
Roman Pyrih
2025-04-10 12:36:11 +02:00
parent dc9d6f288a
commit d931260e2c
4 changed files with 1715 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
layout/style-css/kontakt-v4.css Normal file
View File

File diff suppressed because one or more lines are too long

1
layout/style-css/kontakt-v4.css.map Normal file
View File

File diff suppressed because one or more lines are too long

997
layout/style-scss/kontakt-v4.scss Normal file
View File

@@ -0,0 +1,997 @@
@import 'variables';
@import '_mixins';
html {
scroll-behavior: smooth;
scroll-padding-top: 105px;
}
strong {
font-weight: 700;
}
.main-page {
padding-top: 0px;
}
.breadcrumbs {
margin: 24px 0;
}
.box-0 {
._columns {
width: 100%;
max-width: 1270px;
margin: auto;
display: flex;
@include respond-below(md) {
flex-direction: column;
}
._left {
width: 40%;
min-width: 600px;
background: url('/upload/filemanager/images/kontakt/contact-left-bg-2.jpg')
no-repeat;
background-position: bottom right;
background-size: cover;
text-align: right;
color: #fff;
display: flex;
flex-direction: column;
@include respond-below(lg) {
// padding: 60px 30px;
min-width: 410px;
}
@include respond-below(md) {
width: 100%;
min-width: unset;
text-align: center;
// background: transparent;
color: #1d1d1e;
}
._left-wrapper {
padding: 60px 35px;
width: 100%;
background: rgba(#000, 0.9);
height: 100%;
align-content: center;
@include respond-above(md) {
max-width: 490px;
}
}
._socials {
margin-top: auto;
margin-bottom: 0;
display: flex;
gap: 10px;
justify-content: flex-end;
img {
height: 30px;
width: 30px;
}
@include respond-below(md) {
justify-content: center;
img {
filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
saturate(15%) hue-rotate(337deg) brightness(100%) contrast(107%);
}
}
}
h1,
._h1 {
color: $cWhite;
margin-bottom: 50px;
font-size: 25px;
font-weight: 400;
text-transform: uppercase;
}
h2 {
font-size: 20px;
font-weight: 600;
color: $cWhite;
margin-bottom: 0;
}
p {
color: $cWhite;
font-size: 16px;
margin-bottom: 0;
strong {
font-weight: 600;
}
a {
color: $cWhite;
font-size: 16px;
font-family: $font3;
}
}
._text {
margin-bottom: 20px;
&._text-2 {
margin-bottom: 50px;
}
}
._accounts {
// margin-top: 280px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: 'icon text' 'numbers numbers';
align-items: center;
gap: 20px 20px;
margin-bottom: 75px;
@include respond-below(md) {
margin-top: 50px;
margin-bottom: 50px;
grid-template-columns: 1fr;
grid-template-areas: 'icon' 'text' 'numbers';
}
._icon {
grid-area: icon;
// margin-bottom: 20px;
width: 100%;
max-width: 44px;
margin-left: auto;
@include respond-below(md) {
margin-right: auto;
// filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
// saturate(15%) hue-rotate(337deg) brightness(100%) contrast(107%);
}
}
._text {
color: $cWhite;
grid-area: text;
font-size: 16px;
font-weight: 600;
margin: 0;
@include respond-below(md) {
text-align: center;
}
}
._accounts_numbers {
color: $cWhite;
grid-area: numbers;
font-size: 16px;
font-weight: 300;
// @include respond-below(lg) {
// font-size: 17px;
// }
}
}
.direct-contact {
> a {
width: fit-content;
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
margin-left: auto;
@include respond-below(md) {
margin-right: auto;
}
}
.direct-contact__text {
p {
color: $cWhite;
font-size: 16px;
text-transform: uppercase;
strong {
font-weight: 700;
}
}
}
}
}
._right {
// width: 60%;
// @include respond-below(md) {
// width: 100%;
// }
._h1 {
color: #181c1d;
font-size: 32px;
font-family: $font3;
font-weight: 300;
padding: 40px 60px 0px 60px;
}
._map {
padding: 30px 60px 0 60px;
@include respond-below(md) {
padding: 60px 0;
}
}
.contact-form-box {
padding: 60px 30px 30px 30px;
background: #f5f5f5;
@include respond-below(md) {
padding: 30px;
}
}
// ._accounts_numbers {
// padding: 120px 60px 60px 60px;
// @include respond-below(md) {
// display: none;
// }
// }
.c-row {
&-1 {
margin-bottom: 40px;
p {
color: #1d1d1e;
font-size: 16px;
font-weight: 300;
font-family: $font3;
text-align: center;
margin-bottom: 0;
}
}
&-2 {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
input {
&[type='text'],
&[type='email'] {
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
}
&[type='radio'],
&[type='checkbox'] {
position: relative;
appearance: none;
width: 11px;
min-width: 11px;
height: 11px;
border-radius: 100%;
border: 1px solid #dfdfdf;
transition: all 250ms ease-in-out;
outline: none;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 100%;
background: #1d1d1e;
transform: translate(-50%, -50%);
visibility: hidden;
transition: all 250ms ease-in-out;
}
&:checked {
border-color: #1d1d1e;
&::before {
width: 6px;
height: 6px;
visibility: visible;
}
}
}
}
textarea {
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
min-height: 100px;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
resize: none;
}
select {
position: relative;
appearance: none;
padding: 13px 14px 11px 14px;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
outline: none;
}
.voivodeship__wrapper {
position: relative;
&::before {
content: '\f107';
font: normal normal normal 14px / 1 FontAwesome;
font-size: 14px;
text-rendering: auto;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 1;
}
}
._radios {
display: flex;
flex-direction: row;
column-gap: 35px;
justify-content: center;
}
._radio,
._checkbox {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
label {
color: #1d1d1e;
font-size: 12px;
font-family: $font3;
font-weight: 300;
line-height: 1;
padding-top: 2px;
margin-bottom: 0;
cursor: pointer;
}
}
._1_column {
display: flex;
flex-direction: row;
margin-bottom: 14px;
> * {
width: 100%;
}
}
._2_columns {
display: flex;
flex-direction: row;
column-gap: 26px;
margin-bottom: 14px;
@include respond-below(sm) {
flex-wrap: wrap;
row-gap: 14px;
}
> * {
width: 50%;
@include respond-below(sm) {
width: 100%;
}
}
}
._text {
color: #1d1d1e;
font-size: 16px;
font-weight: 300;
font-family: $font3;
margin-bottom: 14px;
}
._file {
padding: 29px;
margin: 0 0 14px 0;
border-radius: 20px;
width: 100%;
border: none;
background: #fff;
color: #3f3f3f;
font-size: 14px;
font-family: $font3;
line-height: 1;
font-weight: 300;
border: none;
.fileuploader-input {
width: fit-content;
margin: 0 auto;
.fileuploader-input-caption {
span {
padding-top: 3px;
display: inline-block;
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 300;
}
}
button.fileuploader-input-button {
background: #1d1d1e;
border-radius: 25px;
padding: 10px 36px;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
color: #fff;
font-family: $font3;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (max-width: 768px) {
flex-direction: column;
}
}
@media (max-width: 576px) {
}
}
.form_actions {
align-items: center;
@include respond-below(xs) {
flex-direction: column;
row-gap: 20px;
}
}
.g-recaptcha {
@include respond-above(xs) {
max-width: fit-content;
margin-left: auto;
}
@include respond-below(xs) {
display: flex;
justify-content: center;
}
}
button[type='submit'] {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 17px 20px 13px 38px;
margin-bottom: 5px;
background: #fff246;
border-radius: 6px;
color: #1d1d1e;
font-size: 13px;
font-family: 'URW Form', sans-serif;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
width: fit-content;
border: none;
outline: none;
cursor: pointer;
// &:active {
// background: #f0e875;
// }
img {
width: 18px;
padding-bottom: 3px;
}
@include respond-above(xs) {
margin-left: 20px;
}
}
}
}
}
}
}
.box-1 {
padding-top: 95px;
padding-bottom: 125px;
background: #2e2d2c;
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.25);
.contact-form {
display: flex;
flex-direction: row;
column-gap: 60px;
._left {
width: 100%;
max-width: 350px;
h1 {
color: #fff;
font-size: 50px;
font-family: $font3;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 64px;
padding-bottom: 31px;
border-bottom: 1px solid #fff;
}
.contact-form-tiles {
.tile {
&:not(:last-child) {
margin-bottom: 60px;
}
h2.tile-title {
color: #fff;
font-size: 24px;
font-weight: 700;
font-family: $font3;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 50px;
&._title_border {
padding-bottom: 25px;
margin-bottom: 30px;
margin-left: 45px;
border-bottom: 1px solid #fff;
}
}
.tile-data {
.c-row {
display: flex;
flex-direction: row;
column-gap: 20px;
&:not(:last-child) {
margin-bottom: 20px;
}
._icon {
img {
filter: brightness(0) saturate(100%) invert(79%) sepia(84%)
saturate(367%) hue-rotate(356deg) brightness(104%)
contrast(104%);
}
}
._text {
color: #fff;
font-size: 16px;
font-weight: 300;
font-family: $font3;
margin-bottom: 0;
a {
color: #fff;
font-size: 16px;
font-weight: 300;
font-family: $font3;
line-height: 1;
text-decoration: underline;
}
&._mails {
}
&._phones {
}
}
}
}
}
}
}
._right {
width: 100%;
#map {
outline: none;
}
}
}
}
.box-2 {
padding-top: 50px;
padding-bottom: 100px;
.tabs-box#tabs-box {
.tabs-box--head {
ul#tabs-box-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
gap: 20px;
flex-wrap: wrap;
li {
width: calc((100% / 4) - (20px - (20px / 4)));
@include respond-below(md) {
width: calc((100% / 2) - (20px - (20px / 2)));
}
@include respond-below(xs) {
width: 100%;
}
&.active {
a {
color: $cWhite;
background: #2e2d2c;
}
}
a {
display: block;
color: #1d1d1e;
font-family: $font3;
font-size: 16px;
letter-spacing: 2px;
line-height: 1;
text-transform: uppercase;
text-align: center;
padding: 13px 24px;
border: 1px solid #181c1d;
border-radius: 3px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
height: 100%;
align-content: center;
strong {
font-weight: 800;
}
}
}
}
}
.tabs-box--body {
section {
display: none;
margin-top: 50px;
.s-content {
&.s-style-1 {
display: grid;
grid-template-columns: 315px 1fr;
column-gap: 20px;
@include respond-below(sm) {
grid-template-columns: 1fr;
row-gap: 20px;
}
.s-left-col {
padding: 30px;
background: #f5f5f5;
border-radius: 5px;
.map-point-info {
p {
color: #181c1d;
font-size: 16px;
font-family: $font3;
line-height: 1.5;
}
.contact-btn {
color: #000;
font-size: 12px;
font-family: $font3;
font-weight: 500;
line-height: 1;
padding: 13px 30px;
border: 1px solid #bbbbbb;
border-radius: 5px;
text-align: center;
text-transform: uppercase;
display: block;
margin-top: 15px;
max-width: fit-content;
}
}
@include respond-below(sm) {
order: 2;
}
}
.s-right-col {
> div {
border-radius: 5px;
@include respond-below(sm) {
height: 350px !important;
}
}
@include respond-below(sm) {
order: 1;
}
}
}
&.s-style-2 {
.tad-cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 100px;
justify-content: center;
row-gap: 50px;
@include respond-below(md) {
column-gap: 50px;
}
.tab-card {
width: 100%;
max-width: 450px;
text-align: center;
@include respond-below(lg) {
max-width: 400px;
}
@include respond-below(md) {
max-width: 320px;
}
.tab-card--head {
margin-bottom: 30px;
p {
color: #1d1d1e;
font-size: 20px;
font-family: $font3;
font-weight: 500;
margin-bottom: 0;
strong {
font-weight: 700;
}
@include respond-below(md) {
font-size: 16px;
}
}
}
.tab-card--text {
margin-bottom: 30px;
p {
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 600;
margin-bottom: 0;
@include respond-below(md) {
font-size: 14px;
}
}
}
.tab-card-info {
border-radius: 15px;
border: 1px solid #181c1d;
padding: 27px 20px;
box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
text-align: center;
a {
display: block;
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 600;
@include respond-below(md) {
font-size: 14px;
}
}
}
}
}
}
&.s-style-3 {
.tad-cards {
display: flex;
flex-direction: row;
column-gap: 38px;
row-gap: 70px;
flex-wrap: wrap;
.tab-card {
text-align: center;
width: calc((100% / 3) - (38px - (38px / 3)));
display: flex;
flex-direction: column;
@include respond-below(md) {
width: calc((100% / 2) - (38px - (38px / 2)));
}
@include respond-below(xs) {
width: 100%;
}
.tab-card--head {
text-align: center;
flex-grow: 1;
align-content: flex-end;
p {
color: #1d1d1e;
font-size: 20px;
font-family: $font3;
font-weight: 700;
@include respond-below(md) {
font-size: 16px;
}
}
span {
color: #fff246;
}
}
.tab-card-info {
border-radius: 15px;
border: 1px solid #181c1d;
padding: 27px 20px;
box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
text-align: center;
a {
display: block;
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 600;
@include respond-below(md) {
font-size: 14px;
}
}
}
}
}
}
}
}
}
}
}
.box-3 {
background: #f5f5f5;
padding-top: 40px;
padding-bottom: 40px;
.tiles {
display: flex;
flex-direction: row;
gap: 38px;
flex-wrap: wrap;
.tile {
text-align: center;
width: calc((100% / 4) - (38px - (38px / 4)));
@include respond-below(md) {
width: calc((100% / 2) - (38px - (38px / 2)));
}
@include respond-below(xs) {
width: 100%;
}
h3 {
color: #1d1d1e;
font-size: 20px;
font-weight: 700;
margin-bottom: 22px;
@include respond-below(md) {
font-size: 18px;
}
}
.tile-text {
border-radius: 15px;
border: 1px solid #181c1d;
padding: 27px 20px;
box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
a {
color: #1d1d1e;
font-size: 16px;
font-family: $font3;
font-weight: 600;
@include respond-below(md) {
font-size: 14px;
}
}
}
}
}
}

716
templates_user/page-contact-v4.php Normal file
View File

@@ -0,0 +1,716 @@
<? \S::set_session('contact-form-token', bin2hex(random_bytes(32))); ?>
<?php
$google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
$partnerzy_handlowi_polska = [
[
'regions' => 'PODKARPACKIE, ŚWIĘTOKRZYSKIE, MAŁOPOLSKIE, LUBELSKIE, MAZOWIECKIE',
'position' => 'Doradca ds. Kluczowych Klientów',
'name' => 'Łukasz Cieślachowski',
'phones' => [
[
'label' => 'tel.',
'value' => '+48 602 374 711'
]
],
'emails' => [
[
'label' => 'e-mail:',
'value' => 'l.cieslachowski@vidok.com'
]
]
],
[
'regions' => 'OPOLSKIE, DOLNOŚLĄSKIE,<br/> ŚLĄSKIE, LUBUSKIE',
'position' => 'Doradca ds. Kluczowych Klientów',
'name' => 'Artur Wąsowski',
'phones' => [
[
'label' => 'tel.',
'value' => '+48 728 976 847'
]
],
'emails' => [
[
'label' => 'e-mail:',
'value' => 'a.wasowski@vidok.com'
]
]
],
];
$partnerzy_handlowi_export = [
[
'title' => 'NIEMCY <span>|</span> DE <br/> AUSTRIA <span>|</span> AU',
'phones' => [
[
'label' => 'tel.:',
'value' => '+48 880 914 179',
]
],
'emails' => [
[
'label' => 'e-mail:',
'value' => 'anfrage@vidok.com',
]
],
],
[
'title' => 'WIELKA BRYTANIA <span>|</span> UK',
'phones' => [
[
'label' => 'tel.:',
'value' => '+48 882 399 733',
]
],
'emails' => [
[
'label' => 'e-mail:',
'value' => 'enquiries@vidok.com',
]
],
],
[
'title' => 'IRLANDIA <span>|</span> IR <br/> USA <span>|</span> US <br/> KANADA <span>|</span> CA <br/> AUSTRALIA <span>|</span> AU <br/>',
'phones' => [
[
'label' => 'tel.:',
'value' => '+48 17 853 92 46',
]
],
'emails' => [
[
'label' => 'e-mail:',
'value' => 'sales@vidok.com',
]
],
],
[
'title' => 'FRANCJA <span>|</span> FR <br/> BELGIA <span>|</span> BE <br/> HISZPANIA <span>|</span> ES <br/> SZWAJCARIA <span>|</span> CH <br/> WĘGRY <span>|</span> HU',
'phones' => [
[
'label' => 'tel.:',
'value' => '+48 17 85 95 663',
]
],
'emails' => [
[
'label' => 'e-mail:',
'value' => 'contact@vidok.com',
]
],
],
[
'title' => 'WŁOCHY <span>|</span> IT',
'phones' => [
[
'label' => 'tel.:',
'value' => '+48 17 859 56 72',
]
],
'emails' => [
[
'label' => 'e-mail:',
'value' => 'ufficio@vidok.com',
]
]
],
[
'title' => 'SŁOWACJA <span>|</span> SK <br/> CZECHY <span>|</span> CZ',
'phones' => [
[
'label' => 'tel.:',
'value' => '+421 901 732 575',
]
],
'emails' => [
[
'label' => 'e-mail:',
'value' => 'vidok.sk@gmail.com',
]
],
],
];
?>
<div class="main-page">
<div class="container">
<div class="row">
<div class="col-12">
<div class="breadcrumbs">
<a href="/">Strona główna</a>
<span class="sep"><img src="/images/breadcrumbs-sep.svg"></span>
<span class="last">Kontakt</span>
</div>
</div>
</div>
</div>
<div class="box-0">
<div class="container">
<div class="_columns">
<div class="_left">
<div class="_left-wrapper">
<h1>Siedziba firmy</h1>
<div class="_text _text-1">
<h2>VIDOK SP. Z O. O.</h2>
<p><strong>36-054 Rudna Mała 75</strong></p>
</div>
<div class="_text _text-2">
<p>KRS Nr. 0000191980</p>
<p>REGON: 690379060</p>
<p>NIP: 8131086710</p>
<br>
<p><a href="tel:+48178595660">+48 17 859 56 60</a></p>
<p><a href="mailto:sekretariat@vidok.com">sekretariat@vidok.com</a></p>
<p>pon. - pt. 7:00 - 15:00</p>
</div>
<div class="_accounts">
<img src="/layout/images/icon-bank.svg" class="_icon">
<div class="_text _bold">
ING BANK ŚLĄSKI S.A.<br>
SWIFT INGBPLPW
</div>
<div class="_accounts_numbers">
PLN: PL 31 1050 1562 1000 0090 3034 4197<br>
EUR: PL 84 1050 1562 1000 0090 3034 4213
</div>
</div>
<div class="direct-contact">
<a href="#direct-contact">
<div class="direct-contact__text">
<p><strong>Skontaktuj się bezpośrednio</strong></p>
<p>z wybranym działem</p>
</div>
<div class="direct-contact__img">
<img src="/upload/filemanager/icon/arrow-icon.svg" alt="">
</div>
</a>
</div>
</div>
</div>
<div class="_right">
<div class="contact-form-box">
<div class="c-row c-row-1">
<p>Masz pytania dotyczące naszych produktów lub chcesz otrzymać wycenę?</p>
<p>Wypełnij poniższy formularz kontaktowy- nasz specjalista <strong>skontaktuje się z Tobą</strong><br/> i odpowie na wszystkie pytania.</p>
</div>
<div class="c-row c-row-2">
<form method="POST" action="" enctype="multipart/form-data" id="contact-form-new">
<input type="hidden" name="action" value="send-contact-form-new">
<input type="hidden" name="token" value="<?= \S::get_session('contact-form-token'); ?>">
<input type="hidden" name="website" value="">
<div class="_2_columns">
<input type="text" name="name" placeholder="Imię" required>
<input type="email" name="email" placeholder="Adres e-mail" required>
</div>
<div class="_2_columns">
<input type="text" name="phone" placeholder="Telefon" required>
<input type="text" name="postal_code" placeholder="Kod pocztowy" required>
</div>
<div class="_2_columns">
<div class="voivodeship__wrapper">
<select name="voivodeship" required>
<option value="" disabled selected>Województwa</option>
<option value="dolnoslaskie">dolnośląskie</option>
<option value="kujawsko-pomorskie">kujawsko-pomorskie</option>
<option value="lubelskie">lubelskie</option>
<option value="lubuskie">lubuskie</option>
<option value="lodzkie">łódzkie</option>
<option value="malopolskie">małopolskie</option>
<option value="mazowieckie">mazowieckie</option>
<option value="opolskie">opolskie</option>
<option value="podkarpackie">podkarpackie</option>
<option value="podlaskie">podlaskie</option>
<option value="pomorskie">pomorskie</option>
<option value="slaskie">śląskie</option>
<option value="swietokrzyskie">świętokrzyskie</option>
<option value="warminsko-mazurskie">warmińsko-mazurskie</option>
<option value="wielkopolskie">wielkopolskie</option>
<option value="zachodniopomorskie">zachodniopomorskie</option>
</select>
</div>
<div class="_radios">
<div class="_radio">
<input type="radio" id="client-private" name="client" value="Klient prywatny" required>
<label for="client-private">Klient prywatny</label>
</div>
<div class="_radio">
<input type="radio" id="client-business" name="client" value="Klient biznesowy" required>
<label for="client-business">Klient biznesowy</label>
</div>
</div>
</div>
<div class="_1_column">
<textarea name="message" placeholder="Jeżeli masz jakieś uwagi, wytyczne możesz wpisać je tutaj. Możesz także wpisać wymiary i rodzaje okien jakimi jesteś zainteresowany."></textarea>
</div>
<div class="_text">Chcesz przesłać nam wizualizacje, projekt lub inne materiały? Skorzystaj z pola poniżej i dodaj plik do wiadomości.</div>
<div class="_file fileuploader fileuploader-theme-default">
<input type="hidden" name="fileuploader-list-files" value="[]">
<input type="file" name="files[]" class="files" multiple="multiple">
<div class="fileuploader-items">
<ul class="fileuploader-items-list"></ul>
</div>
</div>
<div class="_1_column">
<div class="_checkbox">
<input type="checkbox" name="zgoda_1" id="zgoda_1">
<label for="zgoda_1">Wyrażam zgodę na przetwarzanie moich danych osobowych podanych przeze mnie powyżej w celu przygotowania stosownej oferty.</label>
</div>
</div>
<div class="_1_column">
<div class="_checkbox">
<input type="checkbox" name="zgoda_2" id="zgoda_2">
<label for="zgoda_2">Wyrażam zgodę na przetwarzanie moich danych osobowych podanych przeze mnie powyżej w celu otrzymywania materiałów reklamowych.</label>
</div>
</div>
<div class="_1_column form_actions">
<div class="g-recaptcha" data-sitekey="6LfaovglAAAAAAieLVC7i4xGkQA5ufXUbWLipSbp"></div>
<button type="submit">Wyślij<img src="/images/contact-icon-check.svg"></button>
</div>
</form>
</div>
</div>
<!-- <div class="_accounts_numbers">
EUR: PL 84 1050 1562 1000 0090 3034 4213<br>
PLN: PL 31 1050 1562 1000 0090 3034 4197
</div> -->
</div>
</div>
</div>
</div>
<div class="box-2">
<div class="container">
<div class="tabs-box" id="tabs-box">
<div class="tabs-box--head">
<ul id="tabs-box-nav">
<li>
<a href="#klienci-indywidualni">
klienci<br/>
<strong>indywidualni</strong>
</a>
</li>
<li>
<a href="#klienci-instytucjonalni">
klienci<br/>
<strong>instytucjonalni</strong>
</a>
</li>
<li>
<a href="#partnerzy-handlowi-polska">
partnerzy handlowi<br/>
<strong>polska</strong>
</a>
</li>
<li>
<a href="#partnerzy-handlowi-export">
partnerzy handlowi<br/>
<strong>export</strong>
</a>
</li>
</ul>
</div>
<div class="tabs-box--body">
<!-- klienci indywidualni -->
<section id="klienci-indywidualni">
<div class="s-content s-style-1">
<div class="s-left-col">
<div class="map-point-info"></div>
</div>
<div class="s-right-col">
<div id="map-klienci-indywidualni" style="width: 100%; height: 500px;"></div>
</div>
</div>
</section>
<!-- klienci instytucjonalni -->
<section id="klienci-instytucjonalni">
<div class="s-content s-style-1">
<div class="s-left-col">
<div class="map-point-info"></div>
</div>
<div class="s-right-col">
<div id="map-klienci-instytucjonalni" style="width: 100%; height: 500px;"></div>
</div>
</div>
</section>
<!-- partnerzy handlowi polska -->
<section id="partnerzy-handlowi-polska">
<div class="s-content s-style-2">
<div class="tad-cards">
<?php foreach ($partnerzy_handlowi_polska as $partner): ?>
<div class="tab-card">
<div class="tab-card--head">
<p><strong>WOJEWÓDZTWA</strong></p>
<p><?= $partner['regions'] ?></p>
</div>
<div class="tab-card--text">
<p><?= htmlspecialchars($partner['position']) ?></p>
<p><?= htmlspecialchars($partner['name']) ?></p>
</div>
<div class="tab-card-info">
<?php foreach ($partner['phones'] as $phone): ?>
<a href="tel:<?= htmlspecialchars($phone['value']) ?>">
<?= $phone['label'] ?> <?= htmlspecialchars($phone['value']) ?>
</a>
<?php endforeach; ?>
<?php foreach ($partner['emails'] as $email): ?>
<a href="mailto:<?= htmlspecialchars($email['value']) ?>">
<?= $email['label'] ?> <?= htmlspecialchars($email['value']) ?>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
<!-- partnerzy handlowi export -->
<section id="partnerzy-handlowi-export">
<div class="s-content s-style-3">
<div class="tad-cards">
<?php foreach ($partnerzy_handlowi_export as $partner): ?>
<div class="tab-card">
<div class="tab-card--head">
<p>
<strong><?= $partner['title'] ?></strong>
</p>
</div>
<div class="tab-card-info">
<?php foreach ($partner['phones'] as $phone): ?>
<a href="tel:<?= htmlspecialchars($phone['value']) ?>">
<?= $phone['label'] ?> <?= htmlspecialchars($phone['value']) ?>
</a>
<?php endforeach; ?>
<?php foreach ($partner['emails'] as $email): ?>
<a href="mailto:<?= htmlspecialchars($email['value']) ?>">
<?= $email['label'] ?> <?= htmlspecialchars($email['value']) ?>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="box-3" id="direct-contact">
<div class="container">
<div class="row">
<div class="col-12">
<div class="tiles">
<div class="tile tile-1">
<h3>LOGISTYKA</h3>
<div class="tile-text">
<a href="tel:+48178676402">+48 17 867 64 02</a>
<br/>
<a href="mailto:logistyka@vidok.com">logistyka@vidok.com</a>
</div>
</div>
<div class="tile tile-2">
<h3>KSIĘGOWOŚĆ</h3>
<div class="tile-text">
<a href="tel:+48178595676">+48 17 859 56 76</a>
<br/>
<a href="mailto:ksiegowosc@vidok.com">ksiegowosc@vidok.com</a>
</div>
</div>
<div class="tile tile-3">
<h3>MARKETING</h3>
<div class="tile-text">
<a href="tel:+48178595667">+48 17 859 56 67</a>
<br/>
<a href="mailto:logistyka@vidok.com">logistyka@vidok.com</a>
</div>
</div>
<div class="tile tile-4">
<h3>SERWIS</h3>
<div class="tile-text">
<a href="tel:+48178595682">+48 17 859 56 82</a>
<br/>
<a href="mailto:serwis@vidok.com">serwis@vidok.com</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link class="footer" href="/plugins/fileuploader/jquery.fileuploader.min.css" rel="stylesheet" type="text/css">
<link class="footer" href="/plugins/fileuploader/font/font-fileuploader.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_map_api; ?>&callback=initMap" async defer></script>
<script class="footer" type="text/javascript" src="/plugins/fileuploader/jquery.fileuploader.min.js"></script>
<script type="text/javascript">
$(function(){
$('body').on('click', '#tabs-box #tabs-box-nav li a', function(e){
e.preventDefault();
var tabName = $(this).attr('href').replace('#', '');
activateTab(tabName);
})
function activateTab(tabName) {
$('#tabs-box #tabs-box-nav li').removeClass('active');
$(`#tabs-box #tabs-box-nav li a[href="#${tabName}"]`).parent().addClass('active');
$('#tabs-box .tabs-box--body section').removeClass('active');
$(`#tabs-box .tabs-box--body section[id="${tabName}"]`).addClass('active');
$('#tabs-box .tabs-box--body section').slideUp();
$(`#tabs-box .tabs-box--body section[id="${tabName}"]`).slideDown();
}
initActiveTab();
function initActiveTab() {
let tabsItems = $('#tabs-box #tabs-box-nav');
let firstTab = tabsItems.find('li:first-child a').attr('href').replace('#', '');
activateTab(firstTab);
}
});
function initMap() {
const indywidualniLocations = [
{
id: 1,
name: "Salon Rzeszów",
position: { lat: 50.0411, lng: 21.9991 },
icon: "https://maps.google.com/mapfiles/ms/icons/red-dot.png",
description: `
<p>
Rudna Mała 75/k. Rzeszowa<br/>
36-054 Rudna Mała<br/>
gm. Głogów Małopolski
</p>
<a class="contact-btn" href="/rudna-mala-salon">więcej o salonie</a>
`
},
{
id: 2,
name: "Salon Kraków",
position: { lat: 50.0647, lng: 19.9450 },
icon: "https://maps.google.com/mapfiles/ms/icons/blue-dot.png"
}
];
const instytucjonalniLocations = [
{
id: 1,
name: "Salon Warszawa",
position: { lat: 52.2297, lng: 21.0122 }
},
{
id: 2,
name: "Salon Wrocław",
position: { lat: 51.1079, lng: 17.0385 }
}
];
const mapOptions = {
center: { lat: 50.0411, lng: 21.9991 },
zoom: 11.2,
styles: [{
elementType: "geometry",
stylers: [{
color: "#F4F4F4"
}]
},
{
elementType: "labels.text.stroke",
stylers: [{
color: "F4F4F4"
}]
},
{
elementType: "labels.text.fill",
stylers: [{
color: "#181C1D"
}]
},
// (motorway)
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{
color: "#BABABA"
}]
}, // Autostrady
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{
color: "#BABABA"
}]
}, // Kontur autostrady
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{
color: "#BABABA"
}]
}, // tekst
// (primary, secondary, local)
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
color: "#BABABA"
}]
}, // Główne drogi
{
featureType: "road.local",
elementType: "geometry",
stylers: [{
color: "#BABABA"
}]
}, // Ulice
{
featureType: "road",
elementType: "labels.text.fill",
stylers: [{
color: "#BABABA"
}]
}, // tekst
// Ukryj numery dróg (E40, A4, 92 itp.)
{
featureType: "road",
elementType: "labels.icon",
stylers: [{
visibility: "off"
}]
}, // Ukryj ikony dróg
{
featureType: "road",
elementType: "labels.text",
stylers: [{
visibility: "off"
}]
}, // Ukryj tekst dróg
{
featureType: "water",
elementType: "geometry",
stylers: [{
color: "#F4F4F4"
}]
}, // Woda
{
featureType: "landscape",
elementType: "geometry",
stylers: [{
color: "#F4F4F4"
}]
}
]
};
const mapKlienciIndywidualni = new google.maps.Map(document.getElementById("map-klienci-indywidualni"), mapOptions);
const mapKlienciInstytucjonalni = new google.maps.Map(document.getElementById("map-klienci-instytucjonalni"), mapOptions);
addMarkersToMap(mapKlienciIndywidualni, indywidualniLocations, '#klienci-indywidualni .map-point-info');
addMarkersToMap(mapKlienciInstytucjonalni, instytucjonalniLocations, '#klienci-instytucjonalni .map-point-info');
}
function addMarkersToMap(map, locations, infoContainerSelector) {
const bounds = new google.maps.LatLngBounds();
locations.forEach(location => {
const marker = new google.maps.Marker({
position: location.position,
map: map,
title: location.name,
icon: location.icon || undefined
});
marker.addListener("click", () => {
const container = document.querySelector(infoContainerSelector);
if (container) {
// container.innerHTML = `
// <h4>${location.name}</h4>
// <p><strong>Adres:</strong> ${location.address || 'brak danych'}</p>
// <p><strong>Telefon:</strong> ${location.phone || '-'}</p>
// <p><strong>Email:</strong> ${location.email || '-'}</p>
// `;
container.innerHTML = location.description || 'brak danych';
}
});
bounds.extend(location.position);
});
map.fitBounds(bounds);
}
$(document).ready(function() {
$('#contact-form-new input.files').fileuploader({
fileMaxSize: 10,
extensions: ['jpg', 'jpeg', 'png', 'pdf', 'text/plain', 'csv', 'xml', 'xls', 'xlsx', 'doc', 'dot', 'docx'],
addMore: true,
captions: {
button: function(e) {
return "Wybierz plik<img src='/images/contact-icon-file.svg'>";
},
feedback: function(e) {
return (
"PRZYCIĄGNIJ I UPUŚĆ LUB"
);
},
feedback2: function(e) {
return (
e.length +
" " +
(1 < e.length ? "pliki są wybrane" : "plik jest wybrany")
);
},
confirm: "Potwierdzenie",
cancel: "Anuluj",
name: "Nazwa",
type: "Typ pliku",
size: "Rozmiar pliku",
dimensions: "Wymiary",
duration: "Czas",
crop: "Utnij to",
rotate: "Koło",
sort: "Sortować",
open: "Otwierasz",
download: "Ściągnij",
remove: "Usunąć",
drop: "Umieść plik tutaj do przesłania",
paste: '<div class="fileuploader-pending-loader"></div> Wklej plik, kliknij tutaj, aby usunąć',
removeConfirmation: "Czy na pewno chcesz usunąć plik??",
errors: {
filesLimit: "Sam ${limit} pliki można przesyłać.",
filesType: "Sam ${extensions} pliki można przesyłać.",
fileSize: "${name} jest zbyt duży! Wybierz plik do ${fileMaxSize} MB.",
filesSizeAll: "Wybrane pliki są za duże! Wybierz plik do ${maxSize} MB.",
fileName: "Plik o tej samej nazwie ${name} jest już wybrany.",
remoteFile: "Pliki zdalne są niedozwolone.",
folderUpload: "Foldery są niedozwolone.",
}
}
});
});
</script>