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 57 additions and 30 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 @@
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
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="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png" />
......@@ -618,15 +618,50 @@
<div class="tab-content" id="planTabsContent">
<!-- Master Plan Slider -->
<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-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()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
<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()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="flooropenForm()" />
</div>
......@@ -643,19 +678,19 @@
<div class="swiper masterplanSwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./assets/images/floor-plan.png" alt="floorplan" class="w-100 floor-img"
onclick="openForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="openForm()" />
<img src="./assets/images/master-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.png" alt="floorplan" class="w-100 floor-img"
onclick="openForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="openForm()" />
<img src="./assets/images/master-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.png" alt="floorplan" class="w-100 floor-img"
onclick="openForm()" />
<img src="./assets/images/plus.png" alt="floorplan" class="plus-icon" onclick="openForm()" />
<img src="./assets/images/master-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>
<!-- Swiper buttons for Master Plan -->
......@@ -1012,7 +1047,7 @@
</main>
<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">
<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>
</button>
......@@ -1138,8 +1173,9 @@
crossorigin="anonymous"></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="/script.js"></script>
......@@ -1245,9 +1281,6 @@
}
</script>
</body>
</html>
\ No newline at end of file
script.js
......@@ -4,14 +4,14 @@ document.addEventListener("DOMContentLoaded", () => {
counters.forEach((counter) => {
let startValue = 0;
const endValue = +counter.getAttribute("data-target");
const sign = counter.getAttribute("data-sign"); // Optional sign
const duration = 2000; // Total duration in ms
const sign = counter.getAttribute("data-sign");
const duration = 2000;
const increment = Math.ceil((endValue / duration) * 20);
const updateCounter = () => {
if (startValue < endValue) {
startValue += increment;
counter.innerText = Math.min(startValue, endValue); // Update counter
counter.innerText = Math.min(startValue, endValue);
setTimeout(updateCounter, 20);
} else {
counter.innerHTML = `${endValue}<span class="sign"> ${sign || ""}</span>`;
......@@ -213,8 +213,6 @@ var galleryslider = new Swiper('.gallery-slider', {
const email = document.getElementById("exampleInputEmail1").value.trim();
const phone = document.getElementById("phonenumber").value.trim();
const checkbox = document.getElementById("exampleCheck1").checked;
// Phone validation: Check for exactly 10 digits
const isValidPhone = /^[0-9]{10}$/.test(phone);
if (name && email && isValidPhone && checkbox) {
......@@ -229,13 +227,9 @@ var galleryslider = new Swiper('.gallery-slider', {
const name = document.getElementById("popup_name").value.trim();
const phone = document.getElementById("popup_mobile").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);
// Check if all fields are valid
if (name && email && isValidPhone) {
popupform.submit(); // Auto-submit the form
popupform.submit();
}
});
});
......
style.css
......@@ -473,14 +473,14 @@ footer {
background-color: var(--primary-color);
color: #fff;
border: none;
padding: 10px 15px;
padding: 5px 5px;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#backToTop:hover {
background-color: #0056b3;
background-color:#1a2f40;
}
/* ------------------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!