refactor

2026-05-06 00:26:41 +00:00 · 2026-03-16 13:39:37 +05:30
parent ed3832e517
commit 46162c5cb5
3 changed files with 220 additions and 8 deletions
--- a/app/public/css/index.css
+++ b/app/public/css/index.css
@@ -579,4 +579,82 @@ body {
    background: white;
    padding-top: 6rem;
    padding-bottom: 6rem;
+}
+
+/* Premium exam styles */
+.premium-info {
+    background-color: #e8f4fd;
+    border: 1px solid #b8dff5;
+    color: #1a5490;
+    box-shadow: 0 2px 8px rgba(26, 84, 144, 0.08);
+}
+
+.premium-content-wrapper {
+    color: #1a5490;
+}
+
+.premium-intro {
+    color: #1a5490;
+    font-size: 1rem;
+    line-height: 1.5;
+    font-weight: 600;
+}
+
+.premium-meta-container {
+    border-top-color: rgba(26, 84, 144, 0.15) !important;
+}
+
+.premium-meta-container .exam-meta {
+    color: #0f3d6b;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+}
+
+.premium-meta-container .exam-meta svg {
+    fill: #0f3d6b;
+    flex-shrink: 0;
+}
+
+.premium-info .premium-features h6 {
+    color: #1a5490;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+    font-size: 0.95rem;
+}
+
+.premium-info .premium-features h6 i {
+    color: #3b82f6;
+}
+
+.premium-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+.premium-list li {
+    padding: 0.4rem 0;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    color: #1a5490;
+    font-weight: 500;
+}
+
+.premium-list li i {
+    color: #3b82f6;
+    font-size: 1rem;
+    flex-shrink: 0;
+}
+
+/* Premium badge in dropdown */
+select option[data-premium="true"] {
+    font-weight: 600;
+    color: #3b82f6;
+}
+
+/* Free badge in dropdown */
+select option[data-premium="false"] {
+    color: #28a745;
 } 
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -176,7 +176,7 @@

    <!-- Exam Selection Modal -->
    <div class="modal fade" id="examSelectionModal" tabindex="-1" aria-labelledby="examSelectionModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-dialog modal-dialog-centered" style="max-width: 650px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="examSelectionModalLabel">Select Your Exam</h5>
@@ -191,6 +191,8 @@
                                <option value="CKAD" selected>CKAD - Certified Kubernetes Application Developer</option>
                                <option value="CKA">CKA - Certified Kubernetes Administrator</option>
                                <option value="CKS">CKS - Certified Kubernetes Security Specialist</option>
+                                <option value="KCNA">KCNA - Kubernetes and Cloud Native Associate</option>
+                                <option value="KCSA">KCSA - Kubernetes and Cloud Native Security Associate</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
@@ -200,6 +202,38 @@
                                <option value="">Select an exam</option>
                            </select>
                        </div>
+                        <div class="alert alert-warning premium-info" id="premiumInfo" style="display: none;">
+                            <div class="premium-content-wrapper">
+                                <p class="premium-intro mb-3"><strong>Pass your certification on the first attempt with our proven exam preparation platform.</strong></p>
+                                
+                                <div class="premium-features mb-3">
+                                    <ul class="premium-list mb-0">
+                                        <li><i class="fas fa-check-circle me-2"></i>100+ Real Exam Scenarios - Practice What You'll Actually Face</li>
+                                        <li><i class="fas fa-check-circle me-2"></i>Instant AI Feedback - Learn From Every Mistake</li>
+                                        <li><i class="fas fa-check-circle me-2"></i>Expert Solutions - Master Best Practices</li>
+                                        <li><i class="fas fa-check-circle me-2"></i>Authentic Exam Experience - Timer & Scoring Included</li>
+                                        <li><i class="fas fa-check-circle me-2"></i>Start Immediately - Zero Setup or Installation</li>
+                                    </ul>
+                                </div>
+                                
+                                <div class="premium-meta-container pt-3 border-top">
+                                    <div class="d-flex justify-content-start align-items-center flex-wrap gap-3">
+                                        <div class="exam-meta">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-collection me-1" viewBox="0 0 16 16">
+                                                <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
+                                            </svg>
+                                            5 Complete Mock Exams
+                                        </div>
+                                        <div class="exam-meta">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-display me-1" viewBox="0 0 16 16">
+                                                <path d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z"/>
+                                            </svg>
+                                            Real K8s Cluster Environment
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                        <div class="mb-2">
                            <div class="alert alert-info" id="examDescription">
                                Select an exam to see its description.
--- a/app/public/js/index.js
+++ b/app/public/js/index.js
@@ -290,6 +290,30 @@ document.addEventListener('DOMContentLoaded', function() {
        }
    }
    
+    // Premium exam configuration
+    const premiumExams = {
+        'CKA': {
+            url: 'https://sailor.sh/certified-kubernetes-administrator-cka-certification-ready-mock-exam-bundle/',
+            name: 'CKA Premium Mock Exam Bundle'
+        },
+        'CKAD': {
+            url: 'https://sailor.sh/certified-kubernetes-application-developer-ckad-certification-ready-mock-exam-bundle/',
+            name: 'CKAD Premium Mock Exam Bundle'
+        },
+        'CKS': {
+            url: 'https://sailor.sh/certified-kubernetes-security-specialist-cks-certification-ready-mock-exam-bundle/',
+            name: 'CKS Premium Mock Exam Bundle'
+        },
+        'KCNA': {
+            url: 'https://sailor.sh/kubernetes-and-cloud-native-associate-kcna-certification-ready-mock-exam-bundle/',
+            name: 'KCNA Premium Mock Exam Bundle'
+        },
+        'KCSA': {
+            url: 'https://sailor.sh/kubernetes-and-cloud-native-security-associate-kcsa-certification-ready-mock-exam-bundle/',
+            name: 'KCSA Premium Mock Exam Bundle'
+        }
+    };
+    
    // Filter labs by category and populate the labs dropdown
    function filterLabsByCategory(category) {
        const filteredLabs = labs.filter(lab => lab.category === category);
@@ -297,19 +321,39 @@ document.addEventListener('DOMContentLoaded', function() {
        // Clear existing options
        examNameSelect.innerHTML = '<option value="">Select a lab</option>';
        
-        // Add filtered labs to the dropdown
+        let hasPremium = false;
+        
+        // Add premium exam option if available for this category
+        if (premiumExams[category]) {
+            const premiumOption = document.createElement('option');
+            premiumOption.value = `premium_${category}`;
+            premiumOption.textContent = `🏆 ${premiumExams[category].name}`;
+            premiumOption.setAttribute('data-premium', 'true');
+            premiumOption.setAttribute('data-url', premiumExams[category].url);
+            examNameSelect.appendChild(premiumOption);
+            hasPremium = true;
+        }
+        
+        // Add filtered labs to the dropdown with FREE badge
        filteredLabs.forEach(lab => {
            const option = document.createElement('option');
            option.value = lab.id;
-            option.textContent = lab.name;
+            option.textContent = `🆓 ${lab.name}`;
+            option.setAttribute('data-premium', 'false');
            examNameSelect.appendChild(option);
        });
        
        // Enable the lab name select
        examNameSelect.disabled = false;
        
-        // If there are labs in this category, select the first one
-        if (filteredLabs.length > 0) {
+        // Select premium exam by default if available, otherwise select first free lab
+        if (hasPremium) {
+            examNameSelect.value = `premium_${category}`;
+            // Trigger the change event to show premium description
+            const selectedOption = examNameSelect.options[examNameSelect.selectedIndex];
+            const premiumUrl = selectedOption.getAttribute('data-url');
+            showPremiumDescription(category, premiumUrl);
+        } else if (filteredLabs.length > 0) {
            examNameSelect.value = filteredLabs[0].id;
            updateLabDescription(filteredLabs[0]);
        } else {
@@ -320,6 +364,19 @@ document.addEventListener('DOMContentLoaded', function() {
    
    // Update the lab description when a lab is selected
    function updateLabDescription(lab) {
+        // Hide premium info for free labs
+        const premiumInfo = document.getElementById('premiumInfo');
+        const examDescription = document.getElementById('examDescription');
+        
+        if (premiumInfo) {
+            premiumInfo.style.display = 'none';
+        }
+        
+        // Show the exam description box for free labs
+        if (examDescription) {
+            examDescription.style.display = 'block';
+        }
+        
        // Create a nicely formatted description
        const difficultyText = lab.difficulty || 'Medium';
        const examTimeText = lab.examDurationInMinutes || lab.estimatedTime || '30';
@@ -360,23 +417,66 @@ document.addEventListener('DOMContentLoaded', function() {
        filterLabsByCategory(this.value);
    });
    
+    // Helper function to show premium description
+    function showPremiumDescription(category, premiumUrl) {
+        const premiumInfo = document.getElementById('premiumInfo');
+        const examDescription = document.getElementById('examDescription');
+        
+        // Hide the blue description box for premium exams
+        examDescription.style.display = 'none';
+        
+        premiumInfo.style.display = 'block';
+        selectedLab = { isPremium: true, url: premiumUrl, category: category };
+        startSelectedExamBtn.disabled = false;
+        startSelectedExamBtn.textContent = 'GET INSTANT ACCESS →';
+    }
+    
    // Event listener for the exam name select
    examNameSelect.addEventListener('change', function() {
+        const premiumInfo = document.getElementById('premiumInfo');
+        const examDescription = document.getElementById('examDescription');
+        
        if (this.value) {
-            const lab = labs.find(lab => lab.id === this.value);
-            if (lab) {
-                updateLabDescription(lab);
+            const selectedOption = this.options[this.selectedIndex];
+            const isPremium = selectedOption.getAttribute('data-premium') === 'true';
+            
+            if (isPremium) {
+                // Premium exam selected
+                const premiumUrl = selectedOption.getAttribute('data-url');
+                const category = examCategorySelect.value;
+                showPremiumDescription(category, premiumUrl);
+            } else {
+                // Free exam selected
+                const lab = labs.find(lab => lab.id === this.value);
+                if (lab) {
+                    updateLabDescription(lab);
+                    premiumInfo.style.display = 'none';
+                    examDescription.style.display = 'block';
+                    startSelectedExamBtn.textContent = 'START EXAM';
+                }
            }
        } else {
            examDescription.textContent = 'No lab selected.';
+            examDescription.style.display = 'block';
+            premiumInfo.style.display = 'none';
            selectedLab = null;
            startSelectedExamBtn.disabled = true;
+            startSelectedExamBtn.textContent = 'START EXAM';
        }
    });
    
    // Event listener for the start selected exam button
    startSelectedExamBtn.addEventListener('click', function() {
        if (selectedLab) {
+            // Check if it's a premium exam
+            if (selectedLab.isPremium) {
+                // Open premium exam URL in new tab
+                window.open(selectedLab.url, '_blank');
+                examSelectionModal.hide();
+                return;
+            }
+            
+            // Regular free exam flow
            examSelectionModal.hide();
            showLoadingOverlay(); // Show the loading overlay instead of pageLoader
            updateLoadingMessage('Starting lab environment...');