mirror of
https://github.com/sailor-sh/CK-X.git
synced 2026-07-11 08:39:32 +00:00
243 lines
17 KiB
HTML
243 lines
17 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 | 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</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>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://github.com/nishanb/ck-x" target="_blank">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
|
|
</svg>
|
|
GitHub
|
|
</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">
|
|
<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="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="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/nishanb/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>
|
|
<!-- Buy Me a Coffee Widget -->
|
|
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="nishan.b" data-description="Support me on Buy me a coffee!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
|
|
|
|
<!-- Footer -->
|
|
<footer class="text-center py-4 mt-4">
|
|
<p>Made with <span style="color: #ff3366;">❤️</span> | <a href="https://ckx.nishann.com" target="_blank">ckx.nishann.com</a></p>
|
|
</footer>
|
|
</body>
|
|
</html> |