FM / public

/home/u775757334/domains/civicwelllife.com/public_html/

/home/u775757334/domains/civicwelllife.com/public_html

Name	Size	Mode	Actions
admin/	-	0755	rm
civiclife/	-	0755	rm
css/	-	0755	rm
fonts/	-	0755	rm
function/	-	0755	rm
images/	-	0755	rm
include/	-	0755	rm
js/	-	0755	rm
management/	-	0755	rm
media/	-	0755	rm
razorpay/	-	0755	rm
seller/	-	0755	rm
vendor/	-	0755	rm
09.php	142	0644	edit dl rm
about-us.php	3025	0644	edit dl rm
account.php	7408	0644	edit dl rm
add-shipping.php	6073	0644	edit dl rm
affiliate-registration.php	4543	0644	edit dl rm
arrow.jpg	1546	0644	edit dl rm
blog-details.php	10838	0644	edit dl rm
blog-list.php	9268	0644	edit dl rm
blog.php	10062	0644	edit dl rm
booking-process.php	2149	0644	edit dl rm
booking-success.php	5541	0644	edit dl rm
category-details.php	7903	0644	edit dl rm
checkout.php	15505	0644	edit dl rm
civiclife (2).zip	151986360	0644	edit dl rm
config.php	9419	0644	edit dl rm
consultation-payment.php	12113	0644	edit dl rm
consultation.php	17921	0644	edit dl rm
contact-us.php	9742	0644	edit dl rm
cpage.css	14115	0644	edit dl rm
create-order.php	443	0644	edit dl rm
create_zoom_link.php	2832	0644	edit dl rm
default.php	16369	0644	edit dl rm
delivery-return.php	2923	0644	edit dl rm
dlogout.php	125	0644	edit dl rm
doctor-account.php	36857	0644	edit dl rm
doctor-appointments.php	10379	0644	edit dl rm
doctor-blog.php	8588	0644	edit dl rm
doctor-consultation.php	5467	0644	edit dl rm
doctor-profile.php	32002	0644	edit dl rm
doctor-registration.php	13189	0644	edit dl rm
doctors.php	10383	0644	edit dl rm
end_meeting.php	230	0644	edit dl rm
faq-list.php	7900	0644	edit dl rm
faq.php	6367	0644	edit dl rm
get_subcategory.php	437	0644	edit dl rm
health-test.php	31910	0644	edit dl rm
index.html	4133	0644	edit dl rm
index.php	3656	0644	edit dl rm
login.php	3842	0644	edit dl rm
media.zip	37481598	0644	edit dl rm
my-account.php	7397	0644	edit dl rm
order-details.php	6172	0644	edit dl rm
patient-login.php	7935	0644	edit dl rm
privacy-policy.php	2430	0644	edit dl rm
product-detail.php	32756	0644	edit dl rm
product-list.php	10761	0644	edit dl rm
return-and-refund.php	2398	0644	edit dl rm
review.php	12362	0644	edit dl rm
seller-registration.php	11374	0644	edit dl rm
send_review.php	765	0644	edit dl rm
start_meeting.php	194	0644	edit dl rm
sub-category.php	7839	0644	edit dl rm
terms-and-conditions.php	2681	0644	edit dl rm
testimonial-list.php	8787	0644	edit dl rm
testimonial.php	8060	0644	edit dl rm
timing-list.php	6068	0644	edit dl rm
timming.php	7571	0644	edit dl rm
vedio-list.php	7877	0644	edit dl rm
vedio.php	8579	0644	edit dl rm
vedios.php	8787	0644	edit dl rm

Edit: /home/u775757334/domains/civicwelllife.com/public_html/health-test.php (31910B)

<?php include 'config.php';
$questions = [];
$sqlQuestion = mysqli_query($conn, "SELECT * FROM tbl_question WHERE status='1' ORDER BY id ASC LIMIT 25");

if ($sqlQuestion && mysqli_num_rows($sqlQuestion) > 0) {
    while ($row = mysqli_fetch_assoc($sqlQuestion)) {
        $questions[] = [
            'id' => $row['id'],
            'question' => $row['question'],
            'option_a' => $row['option_a'],
            'option_b' => $row['option_b'],
            'option_c' => $row['option_c'],
            'option_d' => $row['option_d']
        ];
    }
}
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AYUSH Health Test | Civic WellLife</title>

.goog-te-banner-frame.skiptranslate,
        iframe.goog-te-banner-frame {
            display: none !important;
        }

body {
            top: 0px !important;
        }

/* Hide full translate block */
        .skiptranslate {
            display: none !important;
        }

.lang-btn {
            background: #f1f5f9;
            color: #0d6efd;
            border: 1px solid #e2e8f0;
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }

.lang-btn:hover {
            background: #0d6efd;
            color: #fff;
        }

.goog-te-banner-frame.skiptranslate,
        iframe.goog-te-banner-frame,
        body>.skiptranslate {
            display: none !important;
        }

body {
            top: 0px !important;
        }

.health-hero {
            position: relative;
            /* MUST for absolute button */
            background: linear-gradient(135deg, #1e6ee6, #1c4fd8);
            padding: 40px;
            border-radius: 20px;
            color: white;
        }

/* 🔥 Button Styling */
        .lang-btn {
            position: absolute;
            top: 20px;
            right: 20px;

background: rgba(255, 255, 255, 0.15);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.3);

padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;

backdrop-filter: blur(6px);
            transition: 0.3s;
        }

.lang-btn:hover {
            background: white;
            color: #1e6ee6;
        }

.lang-dropdown {
            position: absolute;
            top: 20px;
            right: 20px;

padding: 6px 12px;
            border-radius: 20px;
            border: none;

background: rgba(255, 255, 255, 0.2);
            color: #fff;
            backdrop-filter: blur(6px);

cursor: pointer;
            font-weight: 600;
        }

.lang-dropdown option {
            color: black;
        }

/* ================================== Google Transalte  ========================================== */
    </style>
    <link rel="stylesheet" href="function/health-test.css">
</head>

<select onchange="changeLanguage(this.value)" class="lang-dropdown" id="langSelect">
                    <option value="en">English</option>
                    <option value="hi">हिंदी</option>
                    <option value="mr">मराठी</option>
                    <option value="bn">বাংলা</option>
                    <option value="ta">தமிழ்</option>
                    <option value="te">తెలుగు</option>
                    <option value="gu">ગુજરાતી</option>
                </select>
                <h1>Civic WellLife AYUSH Health Test</h1>

<p>
                    25 quick questions ke through patient ka body constitution, digestion,
                    mental nature aur lifestyle tendency samajhne ke liye professional health assessment UI.
                </p>

<div class="health-badge-row">
                    <div class="health-mini-badge">25 Questions</div>
                    <div class="health-mini-badge">2 Minute Test</div>
                    <div class="health-mini-badge">Instant Result</div>
                    <div class="health-mini-badge">Doctor Friendly Output</div>
                </div>

</div>

<div class="health-card" id="patientFormCard">
                <h2 class="health-section-title">Start Health Assessment</h2>
                <p class="health-section-subtitle">
                    Patient ki basic details fill karo. Baad me isi data ke saath health report aur doctor dashboard view banega.
                </p>

<div class="health-grid">
                    <div class="col-4">
                        <label class="health-label">Patient Name</label>
                        <input type="text" class="health-input" id='name' placeholder="Enter patient full name">
                    </div>

<div class="col-4">
                        <label class="health-label">Gender</label>
                        <select class="health-select" id="gender">
                            <option>Select gender</option>
                            <option>Male</option>
                            <option>Female</option>
                            <option>Other</option>
                        </select>
                    </div>

<div class="col-4">
                        <label class="health-label">Mobile Number</label>
                        <input type="text" class="health-input" id="mobile" placeholder="Enter mobile number">
                    </div>

<div class="col-4">
                        <label class="health-label">Consultation Preference</label>
                        <select class="health-select" id="consultation">
                            <option>Select consultation type</option>
                            <option>Ayurveda Doctor</option>
                            <option>Homeopathy Doctor</option>
                            <option>Unani Doctor</option>
                            <option>Siddha Doctor</option>
                        </select>
                    </div>
                </div>

<div class="health-btn-row">
                    <button class="health-btn health-btn-primary" id="startTestBtn">Start Test</button>
                    <button class="health-btn health-btn-light" type="button">Average Completion: 2 Minutes</button>
                </div>
            </div>

<div class="health-card hidden-box" id="questionCard">
                <div class="health-progress-top">
                    <div class="health-progress-text" id="healthQuestionCounter">Question 1 / 25</div>
                    <div class="health-progress-note">A = Vata, B = Pitta, C = Kapha, D = Balanced</div>
                </div>

<h2 class="health-question-title" id="healthQuestionText">Loading question...</h2>

<div class="health-nav-actions">
                    <button class="health-btn health-btn-outline" type="button" id="prevQuestionBtn">Previous</button>
                    <button class="health-btn health-btn-primary" type="button" id="nextQuestionBtn">Next</button>
                </div>
            </div>
            
            <div class="result-card-v2 hidden-box" id="resultCard">

<div class="result-hero premium-result-hero">
                    <div class="result-hero-content">
                        <span class="result-overline">Your Profile</span>
                        <h2 id="resultMainTitle">Wellness Snapshot</h2>

<div class="result-badge-row">
                            <div class="health-result-badge" id="resultBadge">Vata-Pitta tendency</div>
                            <div class="result-tagline-pill" id="resultTagline">Moderate</div>
                        </div>

<p class="result-hero-text">
                            Yeh summary aapke lifestyle, mental aur digestive pattern ke basis par generate hui hai.
                        </p>
                    </div>

<div class="result-hero-side">
                        <div class="result-mini-stat">
                            <span>Body Type</span>
                            <strong id="bodyTypeTop">Vata-Pitta</strong>
                        </div>

<a href="doctors.php" class="health-btn health-btn-primary doctor-cta-btn" id="doctorPageBtn">
                            Consult Doctors
                        </a>
                    </div>
                </div>

<div class="dosha-analytics-grid">

<div class="health-panel result-panel dosha-bars-panel">
                        <div class="panel-head">
                            <div>
                                <h4>Constitution Analysis</h4>
                                <p>Your response pattern across all doshas</p>
                            </div>
                        </div>

<div class="dosha-row">
                                <div class="dosha-row-top">
                                    <div class="dosha-label-wrap">
                                        <span class="dosha-dot pitta"></span>
                                        <span class="dosha-name">Pitta</span>
                                    </div>
                                    <strong id="pittaPercentText">0%</strong>
                                </div>
                                <div class="dosha-progress">
                                    <span id="pittaBar"></span>
                                </div>
                            </div>

<div class="dosha-row">
                                <div class="dosha-row-top">
                                    <div class="dosha-label-wrap">
                                        <span class="dosha-dot kapha"></span>
                                        <span class="dosha-name">Kapha</span>
                                    </div>
                                    <strong id="kaphaPercentText">0%</strong>
                                </div>
                                <div class="dosha-progress">
                                    <span id="kaphaBar"></span>
                                </div>
                            </div>

<div class="dosha-row">
                                <div class="dosha-row-top">
                                    <div class="dosha-label-wrap">
                                        <span class="dosha-dot balanced"></span>
                                        <span class="dosha-name">Balanced</span>
                                    </div>
                                    <strong id="balancedPercentText">0%</strong>
                                </div>
                                <div class="dosha-progress">
                                    <span id="balancedBar"></span>
                                </div>
                            </div>

</div>
                    </div>

<div class="health-panel result-panel dosha-wheel-panel">
                        <div class="panel-head">
                            <div>
                                <h4>Dosha Graph</h4>
                                <p>Dominant constitution overview</p>
                            </div>
                        </div>

<div class="dosha-wheel-wrap">
                            <div class="dosha-wheel" id="doshaWheel">
                                <div class="dosha-wheel-inner">
                                    <span>Dominant</span>
                                    <strong id="doshaWheelTitle">Vata-Pitta</strong>
                                </div>
                            </div>
                        </div>

<div class="dosha-legend">
                            <div class="legend-item"><span class="dosha-dot vata"></span> Vata</div>
                            <div class="legend-item"><span class="dosha-dot pitta"></span> Pitta</div>
                            <div class="legend-item"><span class="dosha-dot kapha"></span> Kapha</div>
                            <div class="legend-item"><span class="dosha-dot balanced"></span> Balanced</div>
                        </div>
                    </div>

</div>

<div class="result-score-grid">

<div class="health-score-card result-score-card">
                        <div class="score-card-head">
                            <div class="score-icon">🍽️</div>
                            <h4>Digestive</h4>
                        </div>
                        <div class="health-score-number" id="digestiveScore">0</div>
                        <div class="score-progress"><span id="digestiveBar"></span></div>
                        <div class="health-score-status score-pill" id="digestiveStatus"></div>
                    </div>

<div class="health-score-card result-score-card">
                        <div class="score-card-head">
                            <div class="score-icon">🧠</div>
                            <h4>Mental</h4>
                        </div>
                        <div class="health-score-number" id="mentalScore">0</div>
                        <div class="score-progress"><span id="mentalBar"></span></div>
                        <div class="health-score-status score-pill" id="mentalStatus"></div>
                    </div>

<div class="health-score-card result-score-card">
                        <div class="score-card-head">
                            <div class="score-icon">🌿</div>
                            <h4>Lifestyle</h4>
                        </div>
                        <div class="health-score-number" id="lifestyleScore">0</div>
                        <div class="score-progress"><span id="lifestyleBar"></span></div>
                        <div class="health-score-status score-pill" id="lifestyleStatus"></div>
                    </div>

<div class="health-score-card result-score-card overall-card">
                        <div class="score-card-head">
                            <div class="score-icon">🎯</div>
                            <h4>Overall</h4>
                        </div>
                        <div class="health-score-number" id="overallScore">0</div>
                        <div class="score-progress"><span id="overallBar"></span></div>
                        <div class="health-score-status score-pill" id="overallStatus"></div>
                    </div>

</div>

<div class="health-bottom-grid result-bottom-grid">

<div class="health-panel result-panel">
                        <h4>Suggestions</h4>
                        <ul id="suggestionList" class="result-suggestion-list"></ul>
                    </div>

<div class="health-panel result-panel">
                        <h4>Patient Summary</h4>

<div class="health-data-row">
                            <span>Age / Gender</span>
                            <span id="ageGender"></span>
                        </div>

</div>

</div>
        </div>
    </main>
    <script>
        const startBtn = document.getElementById('startTestBtn');

const patientFormCard = document.getElementById('patientFormCard');
        const questionCard = document.getElementById('questionCard');
        const resultCard = document.getElementById('resultCard');

const prevQuestionBtn = document.getElementById('prevQuestionBtn');
        const nextQuestionBtn = document.getElementById('nextQuestionBtn');
        const healthQuestionCounter = document.getElementById('healthQuestionCounter');
        const healthProgressBar = document.getElementById('healthProgressBar');
        const healthQuestionText = document.getElementById('healthQuestionText');
        const healthOptionWrap = document.getElementById('healthOptionWrap');

const healthQuestions = <?= json_encode($questions, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?> || [];

let currentQuestionIndex = 0;
        let selectedAnswers = {};

// ================= START TEST =================
        startBtn.addEventListener('click', function() {

let name = document.getElementById('name').value.trim();
            let age = document.getElementById('age').value.trim();
            let gender = document.getElementById('gender').value;
            let city = document.getElementById('city').value.trim();
            let mobile = document.getElementById('mobile').value.trim();
            let consultation = document.getElementById('consultation').value;

if (!name || !age || !gender || !city || !mobile || !consultation) {
                alert('Please fill all details');
                return;
            }

fetch('function/ajax_function.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: `action=saveBooking&name=${name}&age=${age}&gender=${gender}&city=${city}&mobile=${mobile}&consultation=${consultation}`
                })
                .then(res => res.json())
                .then(data => {

if (data.status === 'success') {

window.booking_id = data.booking_id;

patientFormCard.classList.add('hidden-box');
                        questionCard.classList.remove('hidden-box');
                        renderQuestion();

} else {
                        alert('Error saving booking');
                    }

});

// ================= RENDER QUESTION =================
        function renderQuestion() {
            const question = healthQuestions[currentQuestionIndex];
            const totalQuestions = healthQuestions.length;

healthQuestionCounter.textContent = 'Question ' + (currentQuestionIndex + 1) + ' / ' + totalQuestions;
            healthProgressBar.style.width = (((currentQuestionIndex + 1) / totalQuestions) * 100) + '%';
            healthQuestionText.textContent = question.question;

const savedAnswer = selectedAnswers[question.id] || '';

healthOptionWrap.innerHTML = `
        ${['A', 'B', 'C', 'D'].map(opt => `
            <div class="health-option ${savedAnswer === opt ? 'active' : ''}" data-answer="${opt}">
                <div class="health-option-check">✓</div>
                <div class="health-option-badge">${opt}</div>
                <div class="health-option-desc">${question['option_' + opt.toLowerCase()]}</div>
            </div>
        `).join('')}
    `;

document.querySelectorAll('.health-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.health-option').forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    selectedAnswers[question.id] = this.getAttribute('data-answer');
                });
            });

prevQuestionBtn.style.visibility = currentQuestionIndex === 0 ? 'hidden' : 'visible';
            nextQuestionBtn.textContent = currentQuestionIndex === totalQuestions - 1 ? 'Submit Test' : 'Next';
        }

// ================= NAVIGATION =================
        prevQuestionBtn.addEventListener('click', function() {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                renderQuestion();
            }
        });

nextQuestionBtn.addEventListener('click', function() {

const question = healthQuestions[currentQuestionIndex];

if (!selectedAnswers[question.id]) {
                alert('Please select one option');
                return;
            }

if (currentQuestionIndex < healthQuestions.length - 1) {
                currentQuestionIndex++;
                renderQuestion();
            } else {
                submitTest();
            }

});

function fillResultUI(r) {

function getStatusData(score) {
                score = Number(score) || 0;

if (score >= 80) {
                    return {
                        text: "Good",
                        className: "status-good",
                        colorClass: "green"
                    };
                } else if (score >= 60) {
                    return {
                        text: "Moderate",
                        className: "status-moderate",
                        colorClass: "yellow"
                    };
                } else {
                    return {
                        text: "Needs Care",
                        className: "status-low",
                        colorClass: "red"
                    };
                }
            }

function animate(id, value) {
                let start = 0;
                let el = document.getElementById(id);
                value = Number(value) || 0;

if (!el) return;

el.innerText = 0;

let step = Math.max(1, Math.ceil(value / 30));

let interval = setInterval(() => {
                    start += step;
                    if (start >= value) {
                        start = value;
                        clearInterval(interval);
                    }
                    el.innerText = start;
                }, 20);
            }

function setText(id, value) {
                let el = document.getElementById(id);
                if (el) el.innerText = value;
            }

function setScoreCard(scoreId, statusId, barId, value) {
                let scoreEl = document.getElementById(scoreId);
                let statusEl = document.getElementById(statusId);
                let barEl = document.getElementById(barId);

if (!scoreEl || !statusEl || !barEl) return;

let status = getStatusData(value);

scoreEl.classList.remove("green", "yellow", "red");
                scoreEl.classList.add(status.colorClass);

statusEl.className = "health-score-status score-pill " + status.className;
                statusEl.innerText = status.text;

barEl.style.width = Math.max(0, Math.min(Number(value) || 0, 100)) + "%";

animate(scoreId, value);
            }

function setDoshaBar(textId, barId, value) {
                value = Math.max(0, Math.min(Number(value) || 0, 100));

let textEl = document.getElementById(textId);
                let barEl = document.getElementById(barId);

if (textEl) textEl.innerText = value + "%";
                if (barEl) barEl.style.width = value + "%";
            }

function setDoshaWheel(vata, pitta, kapha, balanced) {
                vata = Number(vata) || 0;
                pitta = Number(pitta) || 0;
                kapha = Number(kapha) || 0;
                balanced = Number(balanced) || 0;

const total = vata + pitta + kapha + balanced || 1;

const v = (vata / total) * 360;
                const p = (pitta / total) * 360;
                const k = (kapha / total) * 360;
                const b = (balanced / total) * 360;

const s1 = v;
                const s2 = v + p;
                const s3 = v + p + k;
                const s4 = v + p + k + b;

const wheel = document.getElementById("doshaWheel");
                if (!wheel) return;

wheel.style.setProperty(
                    "--wheel-bg",
                    `conic-gradient(
                #6366f1 0deg ${s1}deg,
                #f97316 ${s1}deg ${s2}deg,
                #10b981 ${s2}deg ${s3}deg,
                #06b6d4 ${s3}deg ${s4}deg
            )`
                );
            }

console.log("RESULT DATA =>", r);

const dominantConstitution = r.dominant_constitution || "Balanced";
            const primaryDosha = r.primary_dosha || "";
            const secondaryDosha = r.secondary_dosha || "";

// Top content
            setText("resultMainTitle", dominantConstitution + " Wellness Snapshot");

if (primaryDosha && secondaryDosha) {
                setText("resultBadge", primaryDosha + " - " + secondaryDosha + " tendency");
            } else {
                setText("resultBadge", dominantConstitution + " tendency");
            }

setText("bodyTypeTop", dominantConstitution);
            setText("doshaWheelTitle", dominantConstitution);

// Overall tagline
            let overallStatus = getStatusData(r.overall_score);
            let resultTagline = document.getElementById("resultTagline");
            if (resultTagline) {
                resultTagline.className = "result-tagline-pill " + overallStatus.className;
                resultTagline.innerText = overallStatus.text;
            }

// Score cards
            setScoreCard("digestiveScore", "digestiveStatus", "digestiveBar", r.digestive_score);
            setScoreCard("mentalScore", "mentalStatus", "mentalBar", r.mental_score);
            setScoreCard("lifestyleScore", "lifestyleStatus", "lifestyleBar", r.lifestyle_score);
            setScoreCard("overallScore", "overallStatus", "overallBar", r.overall_score);

// Dosha graph
            setDoshaBar("vataPercentText", "vataBar", r.vata_score);
            setDoshaBar("pittaPercentText", "pittaBar", r.pitta_score);
            setDoshaBar("kaphaPercentText", "kaphaBar", r.kapha_score);
            setDoshaBar("balancedPercentText", "balancedBar", r.balanced_score);

setDoshaWheel(r.vata_score, r.pitta_score, r.kapha_score, r.balanced_score);

// Patient summary
            setText("patientName", r.patient_name || "-");
            setText("ageGender", (r.age || "-") + " / " + (r.gender || "-"));
            setText("bodyType", dominantConstitution);

// Suggestions
            const suggestionList = document.getElementById("suggestionList");
            if (suggestionList) {
                suggestionList.innerHTML =
                    (r.suggestions && r.suggestions.length) ?
                    r.suggestions.map(s => `<li><span>${s}</span></li>`).join("") :
                    `<li><span>Stay hydrated, keep a balanced diet, and maintain a regular daily routine.</span></li>`;
            }

// Doctors page button
            const doctorPageBtn = document.getElementById("doctorPageBtn");
            if (doctorPageBtn) {
                doctorPageBtn.href =
                    "doctors.php?body_type=" + encodeURIComponent(dominantConstitution) +
                    "&score=" + encodeURIComponent(r.overall_score || 0);
            }
        }
    </script>
    <?php include 'include/footer-file.php' ?>
</body>

</html>

cmd: