Skip to content

Commit

Permalink
added feedback block
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaxNadeev
MaxNadeev committed Mar 18, 2024
1 parent 7a9f668 commit 8b98434
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 35 deletions.
56 changes: 45 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<script src="scripts/ya.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<noscript><div><img src="https://mc.yandex.ru/watch/96480520" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<link rel="stylesheet" href="style.css?version=6">
<script src="scripts/script.js?version=4" defer></script>
<link rel="stylesheet" href="style.css?version=8">
<script src="scripts/script.js?version=5" defer></script>
<script src="./scripts/prices.js" defer></script>
<title>Сочисто! | Уборка квартир в Сочи</title>
<link rel="icon" href="img/favicon.jpg">
Expand All @@ -20,7 +20,7 @@
<img class="size-200" src="img/logo400-white.png">
</div>
<a href="tel:+79628817225">
<div id="phone" class="text-accent white-text">
<div id="phone-in-top" class="text-accent white-text">
8 (962) 881-72-25
</div>
</a>
Expand Down Expand Up @@ -50,7 +50,7 @@
<h1 class="text-accent white-text place5 fade-in-up">
Успейте использовать скидку 10% на первую уборку
</h1>
<p class="white-text place5 fade-in-up">
<p class="white-text place5 fade-in-up text">
Сделайте первый шаг к безупречной уборке.
Мы обеспечим бережную уборку вашего помещения и имущества.
</p>
Expand All @@ -70,6 +70,40 @@ <h1 class="text-accent white-text place5 fade-in-up">
</a>
</div>
</div>
<div id="contact">
<div class="container">
<h1 class="text-accent">Оставьте заявку</h1>
<div id="success" class="fade-in-up">
<div class="container">
<h2 class="centered text-accent">
Спасибо
</h2>
<p class="centered text">
Мы свяжемся с вами в самое ближайшее время для уточнения деталей и записи на уборку.
</p>
<div id="again" class="secondary button text-accent fade-in-up">
Сделать ещё одну заявку
</div>
</div>
</div>
<div id="hide-after-success">
<p class="text">
Вы сможете узнать всю необходимую информацию и забронировать время уборки.
</p>
<form id="clientForm">
<input class="text input" type="text" id="name" name="name" placeholder="Ваше имя" required>
<input class="text input" type="tel" id="phone" name="phone" placeholder="Ваш телефон" required>
<div class="after-list">
<div id="submit" class="cta button text-accent inner-container">
Перезвоните мне
</div>
</div>
</form>
</div>


</div>
</div>
<div id="services" class="container">
<h1 class="text-accent">Какую уборку желаете?</h1>
<div class="inner-container">
Expand Down Expand Up @@ -144,7 +178,7 @@ <h1 class="text-accent">Какую уборку желаете?</h1>
<div id="special" class="container bg1 white-text">
<div class="inner-container space-accent">
<h2 class="text-accent white-text">Если у Вас особый случай и его нет в списке</h2>
<p>
<p class="text">
При заключении долгосрочных договоров на уборку делаем <span class="text-accent">СКИДКИ</span>.
</p>
<a href="https://wa.me/+79628817225">
Expand Down Expand Up @@ -228,7 +262,7 @@ <h1 class="text-accent">Сколько стоит уборка?</h1>
</div>
<div id="closing" class="container">
<h1 class="text-accent">Оценим точнее по фото</h1>
<p>
<p class="text">
Отправьте нам фотографии и видео с загрязнениями, мы проведём первичную оценку и определим общий объем работ.
Однако, для окончательного подсчёта стоимости, времени и разработки плана действий,
нашему специалисту может понадобиться лично посмотреть и оценить состояние вашего помещения или загрязнения более детально.
Expand All @@ -250,7 +284,7 @@ <h1 class="text-accent">Оценим точнее по фото</h1>
<h1 class="text-accent">
Фотографии процесса
</h1>
<p>
<p class="text">
Здесь вы можете увидеть процесс в действии.
посмотрите своими глазами, как умелые руки наших клинеров,
превращают грязь и беспорядок в идеальный порядок.
Expand Down Expand Up @@ -278,22 +312,22 @@ <h1 class="text-accent">
</a>
<div class="flex-space">
<a href="https://instagram.com/elizabeth_permanent">
<div class="secondary button btn-icon">
<div class="button btn-icon">
<img class="icon size-20" src="img/instagram40.png">
</div>
</a>
<a href="https://vk.me/id854232476">
<div class="secondary button btn-icon">
<div class="button btn-icon">
<img class="icon size-20" src="img/vk36.png">
</div>
</a>
<a href="https://t.me/+79628817225">
<div class="secondary button btn-icon">
<div class="button btn-icon">
<img class="icon size-20" src="img/telegram40.png">
</div>
</a>
<a href="tel:+79628817225">
<div class="secondary button btn-icon">
<div class="button btn-icon">
<img class="icon size-20" src="img/phone40.png">
</div>
</a>
Expand Down
39 changes: 38 additions & 1 deletion scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,41 @@ function checkRadio(elementId) {
};
}
scrollToFilters();
}
}

document.getElementById('submit').addEventListener('click', function() {
const name = document.getElementById('name').value;
const phone = document.getElementById('phone').value;

if (name.trim() === '') {
console.log('Please fill out NAME!');
document.getElementById('name').style.border = '2px solid red'
return;
}
if (phone.trim() === '') {
console.log('Please fill out PHONE!');
document.getElementById('phone').style.border = '2px solid red'
return;
}
else {
console.log('Name:', name);
console.log('Phone:', phone);

document.getElementById('name').disabled = true;
document.getElementById('phone').disabled = true;

document.getElementById('name').value = '';
document.getElementById('phone').value = '';

document.getElementById('hide-after-success').style.display = 'none';
document.getElementById('success').style.display = 'block';
};
});

document.getElementById('again').addEventListener('click', function() {
console.log('again click');
document.getElementById('name').disabled = false;
document.getElementById('phone').disabled = false;
document.getElementById('hide-after-success').style.display = 'block';
document.getElementById('success').style.display = 'none';
})
80 changes: 57 additions & 23 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
--h1-padding: 50px 0;
--primary: #000;
--bg-option: #6666ff;
--bg-active: #421c75;
--success: #b2ff9e;
--detail-text: #555;
--adding: #777;
--standart-radius: 12px;
Expand Down Expand Up @@ -118,18 +120,30 @@ body{
object-fit: cover;
}

p{
.text{
line-height: 25px;
font-size: 19px;
font-family: "Roboto";
font-weight: 400;
}

p{
margin: 50px 0;
}

.centespace{
text-align: center;
.input{
width: calc(100% - 22px);
padding: 10px;
border: 1px solid var(--secondary-btn);
border-radius: 10px;
margin-top: var(--general-margin);
}

:focus::-webkit-input-placeholder {
color: transparent;
}


.logo{
display: flex;
justify-content: center;
Expand Down Expand Up @@ -212,7 +226,18 @@ a{
margin: 0 0 var(--general-margin);
padding: 16px 0;
border-radius: var(--standart-radius);
text-align: center;
text-align: center;
user-select: none;
}

.button:hover{
opacity: 0.9;
cursor: pointer;
}

.button:active{
background-color: var(--bg-active);
box-shadow: none;
}

.icon{
Expand Down Expand Up @@ -296,7 +321,7 @@ input[type="radio"]:checked + label{
flex-direction: column;
align-items: center;
justify-content: space-around;
min-width: 50%;
min-width: 50%;
}

.tile span{
Expand Down Expand Up @@ -382,18 +407,17 @@ small{

.photo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 5 columns for the first row */
grid-template-rows: auto auto; /* 2 rows */
gap: 10px; /* spacing between photos */
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
gap: 10px;
}

.photo {
width: 100%;
height: auto;
object-fit: cover; /* to ensure the image covers the entire area */
object-fit: cover;
}

/* Make the last photo take up 2 columns */
.photo:nth-child(11) {
grid-column: span 2;
}
Expand All @@ -406,6 +430,7 @@ small{
.btn-icon{
width: 50px;
height: 20px;
margin-bottom: 0px;
}

.infooter{
Expand All @@ -425,7 +450,7 @@ small{
}

.bubble-container svg {
background-color: #00000000;
background-color: #00000000;
margin: -136px 0 -42px;
width: 100%;
max-width: 720px;
Expand Down Expand Up @@ -462,7 +487,7 @@ circle{
}

.bubble {
animation: rise 4s infinite linear;
animation: rise 4s infinite linear;
-o-animation: rise 4s infinite linear;
-moz-animation: rise 4s infinite linear;
-webkit-animation: rise 4s infinite linear;
Expand All @@ -474,36 +499,45 @@ circle{
opacity: 0;
}

.centered{
text-align: center;
}

#success{
background-color: var(--success);
border-radius: 10px;
display: none;
}

@keyframes rise {
0% {
cy: 200;
0% {
cy: 200;
opacity: 1;
}
50% {
opacity: 1;
opacity: 1;
}
95% {
opacity: .5;
opacity: .5;
}
98% {
opacity: .1;
opacity: .1;
r: 20;
}
100% {
cy: 100;
cy: 100;
opacity: 0;
r: 50;
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
opacity: 1;
transform: translateY(0);
}
}

0 comments on commit 8b98434

Please sign in to comment.