Skip to content

sujata / sahu

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 9b0a3a95 by sujata
Options

glitch in slider resolved

1 parent 386dc2a6
Inline Side-by-side
Showing 23 changed files with 58 additions and 31 deletions
assets/images/floor-plan/20.webp deleted 100644 → 0
No preview for this file type
assets/images/floor-plan/21.webp deleted 100644 → 0
No preview for this file type
assets/images/floor-plan/3.webp 0 → 100644
No preview for this file type
assets/images/master-plan/1.webp 0 → 100644
No preview for this file type
index.php
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<!-- Bootstrap CSS --> <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" /> <link href="/style.css" rel="stylesheet" />
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png" />
...@@ -618,15 +618,50 @@ ...@@ -618,15 +618,50 @@
<div class="tab-content" id="planTabsContent"> <div class="tab-content" id="planTabsContent">
<!-- Master Plan Slider --> <!-- Master Plan Slider -->
<div class="tab-pane fade show active" id="masterplan" role="tabpanel"> <div class="tab-pane fade show active" id="masterplan" role="tabpanel">
<div class="swiper masterplanSwiper" <div class="swiper masterplanSwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img src="./assets/images/floor-plan.png" alt="floorplan" class="w-100 floor-img blurred" <img src="./assets/images/floor-plan/1.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
<div class="swiper-slide">
<img src="./assets/images/floor-plan/2.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
<div class="swiper-slide">
<img src="./assets/images/floor-plan/3.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
<div class="swiper-slide">
<img src="./assets/images/floor-plan/4.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
<div class="swiper-slide">
<img src="./assets/images/floor-plan/5.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" /> onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" /> <img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="./assets/images/floor-plan.png" alt="floorplan" class="w-100 floor-img blurred" <img src="./assets/images/floor-plan/6.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
<div class="swiper-slide">
<img src="./assets/images/floor-plan/7.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
<div class="swiper-slide">
<img src="./assets/images/floor-plan/8.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
<div class="swiper-slide">
<img src="./assets/images/floor-plan/9.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="flooropenForm()" /> onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" /> <img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div> </div>
...@@ -643,19 +678,19 @@ ...@@ -643,19 +678,19 @@
<div class="swiper masterplanSwiper"> <div class="swiper masterplanSwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img src="./assets/images/floor-plan.png" alt="floorplan" class="w-100 floor-img" <img src="./assets/images/master-plan/1.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="openForm()" /> onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="openForm()" /> <img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="./assets/images/floor-plan.png" alt="floorplan" class="w-100 floor-img" <img src="./assets/images/master-plan/1.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="openForm()" /> onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="openForm()" /> <img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="./assets/images/floor-plan.png" alt="floorplan" class="w-100 floor-img" <img src="./assets/images/master-plan/1.webp" alt="floorplan" class="w-100 floor-img blurred"
onclick="openForm()" /> onclick="flooropenForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="openForm()" /> <img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div> </div>
</div> </div>
<!-- Swiper buttons for Master Plan --> <!-- Swiper buttons for Master Plan -->
...@@ -1012,7 +1047,7 @@ ...@@ -1012,7 +1047,7 @@
</main> </main>
<button id="backToTop" class="btn btn-primary"><svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" <button id="backToTop" class="btn btn-primary"><svg width="30px" height="30px" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path d="M17 15L12 10L7 15" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> <path d="M17 15L12 10L7 15" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg> </svg>
</button> </button>
...@@ -1136,10 +1171,11 @@ ...@@ -1136,10 +1171,11 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="/script.js"></script>
...@@ -1245,9 +1281,6 @@ ...@@ -1245,9 +1281,6 @@
} }
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
script.js
...@@ -4,14 +4,14 @@ document.addEventListener("DOMContentLoaded", () => { ...@@ -4,14 +4,14 @@ document.addEventListener("DOMContentLoaded", () => {
counters.forEach((counter) => { counters.forEach((counter) => {
let startValue = 0; let startValue = 0;
const endValue = +counter.getAttribute("data-target"); const endValue = +counter.getAttribute("data-target");
const sign = counter.getAttribute("data-sign"); // Optional sign const sign = counter.getAttribute("data-sign");
const duration = 2000; // Total duration in ms const duration = 2000;
const increment = Math.ceil((endValue / duration) * 20); const increment = Math.ceil((endValue / duration) * 20);
const updateCounter = () => { const updateCounter = () => {
if (startValue < endValue) { if (startValue < endValue) {
startValue += increment; startValue += increment;
counter.innerText = Math.min(startValue, endValue); // Update counter counter.innerText = Math.min(startValue, endValue);
setTimeout(updateCounter, 20); setTimeout(updateCounter, 20);
} else { } else {
counter.innerHTML = `${endValue}<span class="sign"> ${sign || ""}</span>`; counter.innerHTML = `${endValue}<span class="sign"> ${sign || ""}</span>`;
...@@ -213,8 +213,6 @@ var galleryslider = new Swiper('.gallery-slider', { ...@@ -213,8 +213,6 @@ var galleryslider = new Swiper('.gallery-slider', {
const email = document.getElementById("exampleInputEmail1").value.trim(); const email = document.getElementById("exampleInputEmail1").value.trim();
const phone = document.getElementById("phonenumber").value.trim(); const phone = document.getElementById("phonenumber").value.trim();
const checkbox = document.getElementById("exampleCheck1").checked; const checkbox = document.getElementById("exampleCheck1").checked;
// Phone validation: Check for exactly 10 digits
const isValidPhone = /^[0-9]{10}$/.test(phone); const isValidPhone = /^[0-9]{10}$/.test(phone);
if (name && email && isValidPhone && checkbox) { if (name && email && isValidPhone && checkbox) {
...@@ -229,13 +227,9 @@ var galleryslider = new Swiper('.gallery-slider', { ...@@ -229,13 +227,9 @@ var galleryslider = new Swiper('.gallery-slider', {
const name = document.getElementById("popup_name").value.trim(); const name = document.getElementById("popup_name").value.trim();
const phone = document.getElementById("popup_mobile").value.trim(); const phone = document.getElementById("popup_mobile").value.trim();
const email = document.getElementById("popup_email").value.trim(); const email = document.getElementById("popup_email").value.trim();
// Phone number validation: Check for exactly 10 digits
const isValidPhone = /^[0-9]{10}$/.test(phone); const isValidPhone = /^[0-9]{10}$/.test(phone);
// Check if all fields are valid
if (name && email && isValidPhone) { if (name && email && isValidPhone) {
popupform.submit(); // Auto-submit the form popupform.submit();
} }
}); });
}); });
......
style.css
...@@ -473,14 +473,14 @@ footer { ...@@ -473,14 +473,14 @@ footer {
background-color: var(--primary-color); background-color: var(--primary-color);
color: #fff; color: #fff;
border: none; border: none;
padding: 10px 15px; padding: 5px 5px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} }
#backToTop:hover { #backToTop:hover {
background-color: #0056b3; background-color:#1a2f40;
} }
/* ------------------footer end----------------- */ /* ------------------footer end----------------- */
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!