Spaces:
Running
Running
File size: 22,420 Bytes
7d6fdce 66a4121 05382ed 7d6fdce 2b39df6 05382ed 7d6fdce 9a1ca87 7d6fdce 77ae598 64029b7 44e1e80 16aae8f 64029b7 44e1e80 eaac639 44e1e80 a93473e 077e6ab 44e1e80 eaac639 44e1e80 50ef4ed 62c8901 44e1e80 eaac639 44e1e80 eaac639 44e1e80 eaac639 44e1e80 eaac639 44e1e80 eaac639 44e1e80 eaac639 44e1e80 eaac639 44e1e80 eaac639 44e1e80 77ae598 44e1e80 13fae48 44e1e80 66c64f0 f08b1c1 6a51ccf 66c64f0 f08b1c1 66c64f0 44e1e80 51dbae3 7d6fdce 44e1e80 7d6fdce eaac639 7d6fdce eaac639 7d6fdce |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MongoMaster Academy | MongoDB Courses</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<!-- Toast UI Calendar dependencies -->
<link rel="stylesheet" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css">
<link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css">
<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/course-card.js"></script>
<script src="components/calendar.js"></script>
<script src="components/dropdown.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-12">
<!-- Hero Section -->
<section class="mb-16 text-center">
<h1 class="text-5xl font-bold text-gray-800 mb-6">Master MongoDB with Expert-Led Training</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
Join our live, instructor-led courses and take your MongoDB skills to the next level. From beginners to advanced administrators, we've got you covered.
</p>
<div class="flex justify-center gap-4">
<a href="#upcoming-courses" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">
Browse in Calendar
</a>
<a href="#" class="border border-gray-300 hover:bg-gray-100 text-gray-700 px-6 py-3 rounded-lg font-medium transition-colors">
<span class="flex items-center gap-2">
<i data-feather="play-circle"></i> Watch Demo
</span>
</a>
</div>
</section>
<!-- Course Paths Section -->
<section id="LP" class="mb-20">
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Choose Your Learning Path</h2>
<div class="mb-12">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Foundational Courses</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-green-600">MDB100</h4>
<p class="text-gray-600">MongoDB Database and Security</p>
<select style="font-size:10pt" name="courses-mdb100" id="mdb100-select">
<option value="ca5d29d0-1924-44b2-bf0d-ee6eb2ed631f">US CST | 2025 Dec 08 | English (MDB100)</option>
<option value="56f03773-aa3f-4246-bc38-e0e50d9b67ec">SG SGT | 2025 Dec 08 | English (MDB100)</option>
<option value="915b651a-fd73-4b6c-8b20-f8a815c85006">UK GMT | 2025 Dec 08 | English (MDB100)</option>
</select>
<button id="enrol-mdb100" type="button" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors" onclick="location.href='https://learn.mongodb.com/courses/mdb100-mongodb-database-and-security?courseId='"+value> Enrol</button>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-green-600">MDB200</h4>
<p class="text-gray-600">MongoDB Optimization and Performance</p>
<select style="font-size:10pt" name="courses-mdb100" id="mdb100-select">
<option value="1d098b3b-229c-47c3-a22c-68dfd5f1ad2b">US CST | 2025 Dec 09 | English (MDB200)</option>
<option value="1df5cf37-e329-434f-a955-cd7866d40fbe">SG SGT | 2025 Dec 09 | English (MDB200)</option>
<option value="87d323f0-d3cc-4e20-966d-f27deea2e0c6">UK GMT | 2025 Dec 09 | English (MDB200)</option>
</select>
<button id="enrol-mdb200" type="button" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors" onclick="location.href='https://learn.mongodb.com/courses/mdb200-mongodb-optimization-and-performance?courseId='"+value> Enrol</button>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-green-600">MDB300</h4>
<p class="text-gray-600">MongoDB Production Readiness</p>
</div>
</div>
</div>
<div class="mb-12">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Role-Focused Courses</h3>
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-2">Developer and Data Architect</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-blue-600">DEV400</h4>
<p class="text-gray-600">MongoDB Developer Extension</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-blue-600">DEV500</h4>
<p class="text-gray-600">Data Modeling and Schema Design</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-blue-600">DS120</h4>
<p class="text-gray-600">MongoDB Atlas Data Lake</p>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-2">Developer Advanced</h4>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-purple-600">DA610</h4>
<p class="text-gray-600">MongoDB Adv. Queries</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-purple-600">DA620</h4>
<p class="text-gray-600">Languages Drivers Web Services</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-purple-600">DA630</h4>
<p class="text-gray-600">Distributed Systems and Transactions</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-purple-600">DA640</h4>
<p class="text-gray-600">MongoDB Application Optimization</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-purple-600">DA650</h4>
<p class="text-gray-600">Advanced Aggregation</p>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-2">AI Developer</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-indigo-600">DS110</h4>
<p class="text-gray-600">MongoDB Atlas Search & Vector Search</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-indigo-600">DA660</h4>
<p class="text-gray-600">AI Integration Patterns</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-indigo-600">DA670</h4>
<p class="text-gray-600">Vector Search Implementation</p>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-2">Atlas Admin / DevOps</h4>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-red-600">OFA400</h4>
<p class="text-gray-600">Atlas Admin</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-red-600">OFS400</h4>
<p class="text-gray-600">Ops Manager Admin</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-red-600">OA610</h4>
<p class="text-gray-600">Benchmarking and Capacity Planning</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-red-600">OA620</h4>
<p class="text-gray-600">Ops Manager Sizing Installation</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-red-600">OA640</h4>
<p class="text-gray-600">Atlas Security</p>
</div>
</div>
</div>
<div class="mb-6">
<h4 class="font-medium text-gray-700 mb-2">Database Admin / DevOps</h4>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-orange-600">OFS400</h4>
<p class="text-gray-600">Ops Manager Admin</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-orange-600">OFS500</h4>
<p class="text-gray-600">Ops Manager API</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-orange-600">OA610</h4>
<p class="text-gray-600">Benchmarking and Capacity Planning</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-orange-600">OA620</h4>
<p class="text-gray-600">Ops Manager Sizing Installation</p>
</div>
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-orange-600">OA630</h4>
<p class="text-gray-600">Self-Hosted Security</p>
</div>
</div>
</div>
<div>
<h4 class="font-medium text-gray-700 mb-2">Security - CSFLE</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow hover:shadow-md transition-shadow">
<h4 class="font-medium text-teal-600">DS130</h4>
<p class="text-gray-600">Client-Side Field Level Encryption</p>
</div>
</div>
</div>
</div>
</section>
<!-- Filters Section -->
<section id="Filters" class="mb-8 bg-white p-6 rounded-lg shadow">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Filter Courses</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Language</label>
<select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
<option value="">All Languages</option>
<option value="English">English</option>
<option value="French">French</option>
<option value="Italian">Italian</option>
<option value="Spanish">Spanish</option>
<option value="Mandarin">Mandarin</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Region</label>
<select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
<option value="">All Regions</option>
<option value="AMER">AMER</option>
<option value="EMEA">EMEA</option>
<option value="LATAM">LATAM</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Time Zone</label>
<select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
<option value="">All Time Zones</option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="MX">MX</option>
<option value="FR">FR</option>
<option value="SG">SG</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Course</label>
<select class="filter-select w-full rounded-md border-gray-300 shadow-sm focus:border-green-500 focus:ring-green-500">
<option value="">All Courses</option>
<option value="MDB100">MDB100</option>
<option value="MDB200">MDB200</option>
<option value="MDB300">MDB300</option>
<option value="DEV400">DEV400</option>
<option value="DEV500">DEV500</option>
<option value="DS120">DS120</option>
<option value="DS110">DS110</option>
<option value="DA610">DA610</option>
</select>
</div>
</div>
</section>
<!-- Calendar View Section -->
<section id="Calendar" class="mb-20">
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Course Calendar</h2>
<custom-calendar>
<div id="calendar" style="height: 800px"></div>
</custom-calendar>
<!-- Upcoming Dates Section -->
<div class="mt-8 bg-white rounded-lg shadow p-6">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Upcoming Course Dates</h3>
<div id="calendar" style="height: 800px"></div>
<!--<div class="space-y-4" id="upcoming-dates-list">
<!-- Dates will be populated by JavaScript -->
<!--</div>
</div>
</section>
<!-- Upcoming Courses Section -->
<section id="upcoming-courses" class="mb-20">
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Upcoming Courses</h2>
<!-- Month Selector -->
<div class="flex justify-center mb-8">
<div class="inline-flex rounded-md shadow-sm" role="group">
<button type="button" class="month-btn active px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 bg-gray-100 text-gray-700">
Current Month
</button>
<button type="button" class="month-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-300 hover:bg-gray-50 text-gray-700">
Next Month
</button>
<button type="button" class="month-btn px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-300 hover:bg-gray-50 text-gray-700">
Following Month
</button>
</div>
</div>
<!-- Month Sections -->
<div id="current-month" class="month-section">
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Current Month Courses</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="current-month-courses">
<!-- Courses will be loaded dynamically from MongoDB API -->
</div>
</div>
<div id="next-month" class="month-section hidden">
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Next Month Courses</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="next-month-courses">
<!-- Courses will be loaded dynamically from MongoDB API -->
</div>
</div>
<div id="following-month" class="month-section hidden">
<h3 class="text-2xl font-semibold text-gray-800 mb-6">Following Month Courses</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="following-month-courses">
<!-- Courses will be loaded dynamically from MongoDB API -->
</div>
</div>
</section>
<!-- Features Section -->
<section class="mb-20">
<h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">Why Learn With Us</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="users" class="text-green-600"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Expert Instructors</h3>
<p class="text-gray-600">Learn from MongoDB-certified instructors with real-world experience.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="clock" class="text-blue-600"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Flexible Scheduling</h3>
<p class="text-gray-600">Multiple time slots available to fit your schedule.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
<i data-feather="award" class="text-purple-600"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Certification</h3>
<p class="text-gray-600">Earn certificates to validate your MongoDB expertise.</p>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script>
feather.replace();
// Month selector functionality
document.querySelectorAll('.month-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.month-btn').forEach(b => b.classList.remove('active', 'bg-gray-100'));
btn.classList.add('active', 'bg-gray-100');
document.querySelectorAll('.month-section').forEach(section => {
section.classList.add('hidden');
});
const monthId = btn.textContent.trim().toLowerCase().replace(' ', '-');
document.getElementById(monthId).classList.remove('hidden');
});
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |