mirror of
https://github.com/sailor-sh/CK-X.git
synced 2026-05-24 01:12:49 +00:00
267 lines
19 KiB
HTML
267 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<title>CK-X Cloud | Kubernetes Certification Simulator</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="/css/index.css">
|
|
</head>
|
|
<body>
|
|
<!-- Loader -->
|
|
<div class="loader" id="pageLoader">
|
|
<div class="spinner-border text-light" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<div class="loader-message" id="loaderMessage">Lab is getting ready...</div>
|
|
</div>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">CK-X Cloud</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item me-3 view-results-btn-container" style="display: none;">
|
|
<a class="nav-link" href="#" id="viewPastResultsBtn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
|
|
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
|
|
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
|
|
</svg>
|
|
View Result
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section - Full Height -->
|
|
<section class="hero-section full-height d-flex align-items-center text-center position-relative">
|
|
<div class="container hero-content">
|
|
<h1 class="display-4 mb-4">Kubernetes Certification Exam Simulator</h1>
|
|
<p class="lead mb-5">Practice in a realistic environment that mirrors the actual CKA, CKAD, and other Kubernetes certification exams</p>
|
|
<a href="#" class="btn btn-light btn-lg start-exam-btn" id="startExamBtn">START EXAM</a>
|
|
</div>
|
|
|
|
<div class="scroll-indicator">
|
|
<p>SCROLL TO EXPLORE</p>
|
|
<i class="fas fa-chevron-down"></i>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features">
|
|
<div class="container">
|
|
<div class="features-wrapper">
|
|
<div class="features-header">
|
|
<h2 class="section-title">Key Features</h2>
|
|
<p class="section-subtitle">Everything you need to prepare for your Kubernetes certification exams</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="feature-card">
|
|
<div class="feature-icon-container">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M26 4H6C4.89543 4 4 4.89543 4 6V22C4 23.1046 4.89543 24 6 24H26C27.1046 24 28 23.1046 28 22V6C28 4.89543 27.1046 4 26 4Z" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M12 28H20" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M16 24V28" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M13 16L15 18L19 14" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h4>Real Exam Environment</h4>
|
|
<p>Practice in a simulated environment that closely resembles the actual Kubernetes certification exam interface.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="feature-card">
|
|
<div class="feature-icon-container">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16 4V6" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M7.51471 7.51472L8.92893 8.92894" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M4 16H6" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M7.51471 24.4853L8.92893 23.0711" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M16 26V28" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M24.4853 24.4853L23.0711 23.0711" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M26 16H28" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M24.4853 7.51472L23.0711 8.92894" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h4>Multiple Certification Support</h4>
|
|
<p>Practice for CKA, CKAD, and other Kubernetes certification exams with tailored scenarios for each exam type.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="feature-card">
|
|
<div class="feature-icon-container">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="16" cy="16" r="12" stroke="#4f46e5" stroke-width="2.5"/>
|
|
<path d="M16 10V16L20 20" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<h4>Timed Practice</h4>
|
|
<p>Prepare for the time pressure of the actual exams with our realistic timer functionality.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="feature-card">
|
|
<div class="feature-icon-container">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M6 16H26" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M6 8H26" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M6 24H26" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="10" cy="8" r="2" fill="#4f46e5"/>
|
|
<circle cx="22" cy="16" r="2" fill="#4f46e5"/>
|
|
<circle cx="14" cy="24" r="2" fill="#4f46e5"/>
|
|
</svg>
|
|
</div>
|
|
<h4>Detailed Scoring & Solutions</h4>
|
|
<p>Review your performance with comprehensive exam scores and access detailed solutions to enhance your learning.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="feature-card">
|
|
<div class="feature-icon-container">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M16 28C22.6274 28 28 22.6274 28 16C28 9.37258 22.6274 4 16 4C9.37258 4 4 9.37258 4 16C4 22.6274 9.37258 28 16 28Z" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M11 16L15 20L22 13" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h4>Realistic Kubernetes Cluster</h4>
|
|
<p>Practice on actual Kubernetes infrastructure that mimics the exam environment with pre-configured namespaces and resources.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="feature-card">
|
|
<div class="feature-icon-container">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M26 28V25C26 23.9391 25.5786 22.9217 24.8284 22.1716C24.0783 21.4214 23.0609 21 22 21H10C8.93913 21 7.92172 21.4214 7.17157 22.1716C6.42143 22.9217 6 23.9391 6 25V28" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M16 17C18.7614 17 21 14.7614 21 12C21 9.23858 18.7614 7 16 7C13.2386 7 11 9.23858 11 12C11 14.7614 13.2386 17 16 17Z" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h4>User-Focused Experience</h4>
|
|
<p>Enjoy a streamlined and accessible interface designed to help you focus on mastering Kubernetes concepts without distractions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Add loading overlay -->
|
|
<div class="loading-overlay" id="loadingOverlay">
|
|
<div class="loading-content">
|
|
<h2>Preparing Your Lab Environment</h2>
|
|
<div class="custom-progress-bar">
|
|
<div class="custom-progress" id="progressBar"></div>
|
|
</div>
|
|
<div class="loading-message" id="loadingMessage">Initializing environment...</div>
|
|
<div class="exam-info" id="examInfo"></div>
|
|
<hr>
|
|
<div class="text-muted text-center w-100" style="font-size: 0.8 rem;">
|
|
Lab environment setup may take 3-5 minutes. Please wait patiently. Once preparation is complete, you'll be automatically redirected to the exam interface.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Exam Selection Modal -->
|
|
<div class="modal fade" id="examSelectionModal" tabindex="-1" aria-labelledby="examSelectionModalLabel" aria-hidden="true">
|
|
<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>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="examSelectionForm">
|
|
<div class="mb-3">
|
|
<label for="examCategory" class="form-label">Certification Type</label>
|
|
<select class="form-select" id="examCategory" required>
|
|
<option value="">Select certification type</option>
|
|
<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>
|
|
<div class="mb-3">
|
|
<label for="examName" class="form-label">Exam</label>
|
|
<select class="form-select" id="examName" required disabled>
|
|
<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.
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer flex-column align-items-stretch py-1">
|
|
<div class="d-flex justify-content-end gap-2 mb-1">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CANCEL</button>
|
|
<button type="button" class="btn btn-primary" id="startSelectedExam" disabled>START EXAM</button>
|
|
</div>
|
|
<div class="text-muted text-center w-100" style="font-size: 0.65rem;">
|
|
By clicking on Start exam, you accept our <a href="https://github.com/sailor-sh/CK-X/blob/master/docs/PRIVACY_POLICY.md" target="_blank">Privacy Policy</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="/js/index.js"></script>
|
|
|
|
<!-- Footer -->
|
|
<footer class="text-center py-4 mt-4">
|
|
<p>Made with <span style="color: #ff3366;">❤️</span> | <a href="https://play.sailor.sh" target="_blank">sailor.sh</a></p>
|
|
</footer>
|
|
</body>
|
|
</html> |