Feat/block prices

* feat: clear after close popup * feat: open popup after 150ms * fix: header * feat: add section prices * feat: add background * feat: btn redirect
RezenkovD · Aug 14, 2023 · a7f2aff · a7f2aff
1 parent 95595d6
commit a7f2aff
Show file tree

Hide file tree

Showing 5 changed files with 549 additions and 25 deletions.
diff --git a/users/templates/base/base.html b/users/templates/base/base.html
@@ -15,7 +15,7 @@
 <body>
     <header>
         {% if user.is_authenticated %}
-        <div class="header-container" style="justify-content: space-evenly;">
+        <div class="header-container" style="justify-content: center;">
         {% else %}
         <div class="header-container">
         {% endif %}

diff --git a/vr_club_site/templates/site/index.html b/vr_club_site/templates/site/index.html
@@ -11,10 +11,13 @@
     <div class="ellipse-4"></div>
     <div class="ellipse-5"></div>
     <div class="ellipse-6"></div>
+    <div class="ellipse-7"></div>
+    <div class="ellipse-8"></div>
     {% include 'site/svg-objects/index-first-object.html' %}
     {% include 'site/svg-objects/index-second-object.html' %}
     {% include 'site/svg-objects/index-third-object.html' %}
     {% include 'site/svg-objects/index-fourth-object.html' %}
+    {% include 'site/svg-objects/index-fifth-object.html' %}
 </div>
 {% endblock %}
 {% block main %}
@@ -61,6 +64,59 @@
 <section class="section-rules-club">
     {% include 'site/rules.html' %}
 </section>
+<section class="section-prices">
+    <div class="price-for-hour">
+      <span>
+          <span class="span">Ціна</span>
+          <span class="span2"> за годину безцінних </span>
+          <span class="span3">емоцій</span>
+      </span>
+    </div>
+    <div class="price-day">
+        <div class="item">
+            <div class="when">
+                БУДНІ
+            </div>
+            <div class="price-details">
+                <div class="i-h-1">
+                    <div class="when-description">
+                        Година перемог над монстрами, тріумфів та незабутніх емоцій в світі віртуальної реальності.
+                    </div>
+                </div>
+                <div class="i-h-2">
+                    <div class="when-time">
+                        60 хвилин
+                    </div>
+                    <div class="how-many">
+                        200 грн
+                    </div>
+                </div>
+            </div>
+                <button class="btn-price" onclick="redirectToBooking()">Забронювати</button>
+        </div>
+        <div class="item">
+            <div class="when">
+                ВИХІДНІ
+            </div>
+            <div class="price-details">
+                <div class="i-h-1">
+                    <div class="when-description">
+                        Чудовий відпочинок для кожного, хто хоче перемагати та весело провести час!
+                    </div>
+                </div>
+                <div class="i-h-2">
+                    <div class="when-time">
+                        60 хвилин
+                    </div>
+                    <div class="how-many">
+                        250 грн
+                    </div>
+                </div>
+            </div>
+            <button class="btn-price" onclick="redirectToBooking()">Забронювати</button>
+        </div>
+    </div>
+</section>
 <section style="height: 514px;"></section>
 {% endblock %}
 {% block script %}

diff --git a/vr_club_site/templates/site/js/calendar.js b/vr_club_site/templates/site/js/calendar.js
@@ -122,7 +122,7 @@ document.addEventListener("DOMContentLoaded", function () {
     nextMonthBtn.addEventListener("click", nextMonth);
 });
 var popupScrollPosition;
-function openPopup(day, month, year) {
+async function openPopup(day, month, year) {
     popupScrollPosition = window.scrollY;
     const dateDiv = document.querySelector('.booking-date');
     const monthsNames = [
@@ -143,19 +143,7 @@ function openPopup(day, month, year) {
     dateDiv.textContent = `${parseInt(day, 10)} ${monthsNames[parseInt(month) - 1]} ${year}`;
 
     getAvailableSlots(`${year}-${parseInt(month, 10)}-${parseInt(day, 10)}`)
-    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
-    checkboxes.forEach(checkbox => {
-        checkbox.checked = false;
-    });
-    const inputElements = document.querySelectorAll('input[type="text"]');
-    inputElements.forEach(input => {
-        input.value = '';
-    });
-    const peopleCountInput = document.getElementById('id_people_count');
-    peopleCountInput.value = 1;
-    const totalCostSpan = document.getElementById('total_cost');
-    totalCostSpan.textContent = '0.00 грн';
-
+    await new Promise(resolve => setTimeout(resolve, 150));
     const dateInput = document.getElementById('id_date');
     dateInput.value = `${day}-${month}-${year}`;
 
@@ -173,6 +161,18 @@ function closePopup() {
     body.style.overflow = 'auto';
     window.scrollTo(0, popupScrollPosition);
     history.pushState(null, null, '');
+    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+    checkboxes.forEach(checkbox => {
+        checkbox.checked = false;
+    });
+    const inputElements = document.querySelectorAll('input[type="text"]');
+    inputElements.forEach(input => {
+        input.value = '';
+    });
+    const peopleCountInput = document.getElementById('id_people_count');
+    peopleCountInput.value = 1;
+    const totalCostSpan = document.getElementById('total_cost');
+    totalCostSpan.textContent = '0.00 грн';
 }
 
 window.addEventListener('popstate', function(event) {