File Manager

✏️ Edit File: /home/u414903541/domains/royalblue-skunk-256500.hostingersite.com/public_html/contact.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us | Dr. Debayan Banerjee</title>

.contact-main-wrapper {
            padding: 50px 5%;
            display: flex;
            gap: 40px;
        }

/* MAP on LEFT */
        .contact-left {
            width: 50%;
        }

/* CONTACT INFO on RIGHT */
        .contact-right {
            width: 50%;
        }

.contact-card {
            background: #fff;
            padding: 25px;
            border-radius: 14px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        }

.contact-card h3 {
            margin-bottom: 15px;
        }

/* MAP SIZE */
        .contact-map iframe {
            width: 100%;
            height: 350px;
            border-radius: 14px;
        }

/* ICON COLORS */
        .contact-details p i {
            width: 40px;
            height: 40px;
            background: #2563eb20;
            border-radius: 8px;
            color: #2563eb;
            display: inline-flex;                                                                                                                       
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            font-size: 18px;
        }

.contact-details p {
            font-size: 16px;
            margin: 12px 0;
            display: flex;
            align-items: center;
            color: #1e293b;
            font-weight: 500;
        }

/* Appointment Full Width */
        .appointment-bottom {
            padding: 40px 5%;
            margin-top: 30px;
        }
        /* Make map and contact info same height */
.equal-height {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contact-left, 
.contact-right {
    display: flex;
}

.contact-map,
.contact-details {
    flex: 1;
    height: 100%;
}

/* Fix map iframe */
.contact-map iframe {
    height: 100% !important;
    min-height: 350px;
    border-radius: 14px;
}

.social-icons {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    margin-left: 40px;
}

.social-icons a {
    font-size: 24px;
    transition: 0.3s ease;
}

/* Brand Colors */
.social-icons .facebook i { color: #1877F2; }
.social-icons .instagram i { color: #E4405F; }
.social-icons .twitter i { color: #1DA1F2; }
.social-icons .linkedin i { color: #0A66C2; }

/* Hover Effect (slight lift) */
.social-icons a:hover i {
    transform: translateY(-3px);
}

@media (max-width: 768px) {
            .contact-main-wrapper {
                flex-direction: column;
            }
            .contact-left, .contact-right {
                width: 100%;
            }
        }

</style>
</head>

<div style="position: relative; width: 100%; height: 280px; background-image: url('https://images.unsplash.com/photo-1517457218844-42b0edc9167c?q=80&w=2940'); background-size: cover; background-position: center;">
        <div style="position: absolute; inset: 0; background: #0a3d62"></div>
        <div style="position: relative; text-align:center; top:50%; transform: translateY(-50%); color:#fff;">
            <h1 style="font-size: 40px; margin-bottom: 10px; text-shadow: 2px 2px 8px rgba(0,0,0,.5);">Contact Us</h1>
<nav aria-label="breadcrumb" style="margin-top: 10px;">
        <ol style="list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center;">
          <li><a href="index.html" style="color: #fff; text-decoration: none;">Home</a></li>
          <li><span style="color: #fff;">/</span></li>
          <li><a href="#" style="color: #fff; text-decoration: none;">Contact us</a></li>
        </ol>
      </nav>        </div>
    </div>

<section class="contact-main-wrapper">

<div class="contact-left">
            <div class="contact-card contact-map">
                <h3>Find Us</h3>
<iframe 
  width="100%" 
  height="350" 
  style="border:0; border-radius: 14px;"
  loading="lazy" 
  allowfullscreen 
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3686.13013696065!2d88.3598308151846!3d22.573885911381442!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1700000000000">
</iframe>

</div>
        </div>

<div class="contact-right">
           <div class="contact-card contact-details">
    <h3>Contact Information</h3>

<p><i class="fa-solid fa-phone"></i> 
916289518604</p>
    <p><i class="fa-solid fa-envelope"></i>   debayan.cmc@gmail.com</p>
    <p><i class="fa-solid fa-location-dot"></i>Kolkata, West Bengal ,India
</p>
    <p><i class="fa-solid fa-clock"></i> Mon–Sun, 24/7</p>

<div class="social-icons">
    <a href="https://www.facebook.com/100089687545535/about/" class="facebook"><i class="fab fa-facebook-f"></i></a>
    <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>
    <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
    <a href="https://www.facebook.com/100089687545535/about/" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
</div>

</div>

</section>

<section class="appointment-bottom">
        <div id="appointmentFormContainer"></div>
    </section>

document.getElementById("top").innerHTML = topHtml;
    document.getElementById("nav").innerHTML = navHtml;
    document.getElementById("footer").innerHTML = footerHtml;
    document.getElementById("appointmentFormContainer").innerHTML = appHtml;

setTimeout(() => {
        if (window.initNav) window.initNav();
    }, 100);

// ✅ WhatsApp form handler — NOW WORKS because form is loaded
    initWhatsAppForm();

}).catch(error => console.error(error));

function initWhatsAppForm() {
    const form = document.querySelector(".appointment-form-box");

if (!form) {
        console.log("Form not found, retrying…");
        return setTimeout(initWhatsAppForm, 200);
    }

console.log("WhatsApp Form Connected.");

form.addEventListener("submit", function (e) {
        e.preventDefault();

const data = {
            firstName: form.querySelector('input[placeholder="First Name"]').value.trim(),
            lastName: form.querySelector('input[placeholder="Last Name"]').value.trim(),
            email: form.querySelector('input[type="email"]').value.trim(),
            phone: form.querySelector('input[type="tel"]').value.trim(),
            gender: form.querySelector('select').value,
            date: form.querySelector('input[type="date"]').value,
            timeSlot: form.querySelector('input[name="time-slot"]:checked')?.value || "Not selected",
            message: form.querySelector("textarea").value.trim()
        };

const text =
            `*New Appointment Request*%0A%0A` +
            `*Name:* ${encodeURIComponent(data.firstName + " " + data.lastName)}%0A` +
            `*Email:* ${encodeURIComponent(data.email)}%0A` +
            `*Phone:* ${encodeURIComponent(data.phone)}%0A` +
            `*Gender:* ${encodeURIComponent(data.gender)}%0A` +
            `*Date:* ${encodeURIComponent(data.date)}%0A` +
            `*Time:* ${encodeURIComponent(data.timeSlot)}%0A` +
            `*Message:* ${encodeURIComponent(data.message)}`;

const whatsappNumber = "916289518604";
        window.open(`https://wa.me/${whatsappNumber}?text=${text}`, "_blank");
    });
}
</script>

</body>
</html>

Batal

⬅ Naik ke royalblue-skunk-256500.hostingersite.com 20 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁.git	dir	—	2025-12-20 07:33	📂 Buka
📁.vscode	dir	—	2025-12-20 07:33	📂 Buka
📁assets	dir	—	2025-12-10 15:40	📂 Buka
📁components	dir	—	2025-12-20 07:33	📂 Buka
📁images	dir	—	2025-12-20 07:33	📂 Buka
🌐about.html	html	20.3 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐appointment.html	html	3.1 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐blogging.html	html	11.4 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐contact.html	html	8.7 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🐘default.php	php	16 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐doc-says.html	html	11.7 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐index.html	html	1.6 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐team.html	html	4.2 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐videosection.html	html	7.5 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐viewblog1.html	html	9.1 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐viewblog2.html	html	9.2 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐viewblog3.html	html	8.9 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐viewblog4.html	html	9.6 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐viewblog5.html	html	8.7 KB	2025-12-20 07:33	✏️ Edit 👁️ View
🌐viewblog6.html	html	8.3 KB	2025-12-20 07:33	✏️ Edit 👁️ View