Yakin, mau tutup form ini? Kamu ga bisa maen game loh!!
2026-03-08 19:23
Diff
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="author" content="Ruangguru Tech Team" />
<meta name="publisher" content="PT Ruang Raya Indonesia" />
<meta name="description" content="Yuk nonton game show Indonesia Clash of Champions 2024 di aplikasi Ruangguru. Menangkan hadiahnya & klaim diskon belajar sekarang!" />
<title>Clash of Champions 2024: Jadwal, Episode & Sinopsis</title>
<link rel="shortcut icon" href="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/favicon60x60-3.png" />
<meta property="og:description" content="Yuk nonton game show Indonesia Clash of Champions 2024 di aplikasi Ruangguru. Menangkan hadiahnya & klaim diskon belajar sekarang!" />
<meta property="og:title" content="Clash of Champions 2024: Jadwal, Episode & Sinopsis" />
<meta name="twitter:description" content="Yuk nonton game show Indonesia Clash of Champions 2024 di aplikasi Ruangguru. Menangkan hadiahnya & klaim diskon belajar sekarang!" />
<meta name="twitter:title" content="Clash of Champions 2024: Jadwal, Episode & Sinopsis" />
<link rel="canonical" href="https://www.ruangguru.com/event/clash-of-champions" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="google-site-verification" content="VJAn1g6wmtTZPpTXh-B4xoSFEkUi5jcV74xQSr6jnOM" />
<meta property="og:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="350" />
<meta name="twitter:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta property="og:url" content="https://www.ruangguru.com/event/clash-of-champions" />
<meta name="twitter:card" content="summary_large_image" />
<meta http-equiv="Content-Language" content="id" />
<meta name="robots" content="index, follow" />
<link
rel="stylesheet"
href="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/live.skillacademy.com/hs-fs/hub/2828691/hub_generated/template_assets/90363693367/1667460957340/slick1.9.0-slick-theme.min.css"
/>
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/me.ruangguru.com/hs-fs/hub/2828691/hub_generated/module_assets/39227318886/1661845607410/module_39227318886_header-homepage-ruangguru-2021.min.css"
/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Nunito:wght@100;200;300;400;500;600;700&family=Source+Sans+Pro:wght@100;200;300;400;500;600;700&display=swap');
.page-center {
float: none !important;
margin: 0 auto !important;
width: 100% !important;
}
body {
margin: 0;
background: #000;
color: #fff;
-ms-overflow-style: none;
}
html {
scrollbar-width: none;
}
a,
a:hover,
a:visited {
text-decoration: none !important;
color: inherit;
}
.display-none {
display: none !important;
}
.cta {
border-radius: var(--size-radius-rad-full, 9999px);
background: var(--prop-action-primary-primary-default, #f26d0f);
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
border: 1px solid #f26d0f;
padding: 0.75rem 2.5rem;
display: flex;
justify-content: center;
}
.secondary-cta {
display: flex;
height: 44px;
padding: 0.3rem 2.5rem;
justify-content: center;
align-items: center;
border-radius: 9999px;
border: 1px solid var(--prop-action-secondary-secondary-default-border, #cfd3db);
background: var(--prop-action-secondary-secondary-default, #fff);
color: var(--color-text-text-invert, #fff);
text-align: center;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
cursor: pointer;
color: var(--color-text-text-ink, #2c313a);
}
.submit-game-form-loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<!-- modal -->
<style>
.modal-content {
background: transparent !important;
border: none !important;
border-radius: 1rem;
margin: auto;
padding: 0;
border-radius: 1rem;
transform: translateY(-50%);
}
.modal-overlay {
background: rgba(28, 32, 57, 0.8);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
transition: opacity 0.5s ease-out;
width: 100%;
z-index: 101;
}
.modal-content > * + * {
padding: 1rem;
max-height: 400px;
overflow: scroll;
margin-top: 0.75rem;
}
@media (min-width: 768px) {
.modal-content {
top: 50%;
width: fit-content;
}
}
@media (max-width: 767px) {
.modal-content {
border-radius: 1rem 1rem 0 0;
bottom: 0;
justify-content: center;
left: 0;
overflow-y: hidden;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 40%;
}
.container-content_form {
width: unset !important;
margin: auto;
padding: 16px;
}
.container-modal_form_content {
min-width: unset !important;
width: 100% !important;
}
}
</style>
<style>
.section-game {
position: relative;
}
.container-modal_form_content {
width: fit-content;
height: fit-content;
background: #fff;
margin: auto;
padding: 16px;
border-radius: 12px;
}
.modal-header {
margin-top: 2rem;
background: #003d40;
border: none;
}
.container-warning-form {
background: #003d40;
border: none;
padding: 16px;
}
.container-button-modal {
display: flex;
justify-content: space-between;
align-items: center;
}
.adaptox-pdf {
width: 100%;
height: 80vh;
border: none;
cursor: pointer;
overflow: auto;
-webkit-overflow-scrolling: touch; /* Untuk pengalaman scrolling yang lebih halus di perangkat iOS */
}
#adaptox-pdf-container {
width: 100%;
}
.image-button {
border: none;
background: none;
}
.container-game_play {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.fullscreen-button {
position: absolute;
bottom: 1.5rem;
right: 1rem;
}
.game-label {
color: var(--color-text-text-invert, #fff);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
margin: 0;
}
.wrapper-game_header {
display: flex;
align-items: center;
gap: 4px;
}
.game-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: #003d40;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 3000;
height: 70px;
}
.form-label {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 4px;
margin: 0;
}
.input-value {
overflow: hidden;
color: var(--color-text-text-subtle, #e8ecf4);
text-overflow: ellipsis;
white-space: nowrap;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin: 0;
}
.filter-input {
display: flex;
height: 56px;
padding: 12px;
align-items: center;
gap: 8px;
border-radius: 12px;
border: 1px solid #055155;
background: #033032;
justify-content: space-between;
cursor: pointer;
}
.container-content_form {
width: 528px;
margin: auto;
}
.wrapper-form_item {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 1rem;
}
.form-title {
overflow: hidden;
color: var(--color-text-text-ink, #2c313a);
text-overflow: ellipsis;
white-space: nowrap;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 30px; /* 150% */
letter-spacing: -0.1px;
margin: 0;
}
.modal-form-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
}
.input-options {
color: var(--color-text-text-ink, #2c313a);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin: 0;
padding: 8px 0 0;
cursor: pointer;
}
.input-options:hover {
font-weight: 700;
}
.container-modal_form_content {
min-width: 448px;
}
.close-icon {
cursor: pointer;
}
.form-option_list {
max-height: 180px;
overflow-y: auto;
}
.filter-wrapper {
position: relative;
padding-bottom: 0.5rem;
}
.filter-element {
position: absolute;
top: 0.6rem;
left: 0.7rem;
}
.form-filter-input {
width: 100%;
min-width: 0px;
outline: 0px;
position: relative;
appearance: none;
transition: all 0.2s ease 0s;
font-size: 16px;
padding-left: 40px;
padding-right: 1rem;
height: 46px;
border-radius: 12px;
border-width: 1px;
border-style: solid;
border-image: initial;
border-color: inherit;
background: inherit;
}
#submit-game-form {
width: 100%;
}
.cta.disabled {
border: 1px solid #f9cbab;
cursor: default;
background: #f9cbab;
}
.modal-copy-url .container-modal_content {
background: #065154;
padding: 16px;
border-radius: 16px;
width: 240px;
margin: auto;
}
.modal-copy-url .modal-header {
margin-top: 0;
padding: 0;
display: flex;
justify-content: flex-end;
background: none;
}
.copy-url-info {
margin: 0;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fade-out {
animation: fadeOut 3s forwards;
}
.game-desc-label {
color: #fff;
font-family: Inter;
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 16px;
margin: 0;
}
.another-adaptox a {
display: flex;
width: fit-content;
margin: auto;
}
.pdf-container {
position: relative;
}
.loader {
width: 100%;
top: 8rem;
display: flex;
justify-content: center;
position: absolute;
z-index: 3000;
color: #d1d1d1;
font-family: Inter;
}
@media (max-width: 767px) {
.container-game_play {
height: 80vh;
}
}
</style>
<script type="module" crossorigin src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/event/clash-of-champions/7Xuiia72hs/pdf/assets/index-MfnXyztl.js"></script>
</head>
<body>
<section class="section-game">
<div class="page-center">
<div class="game-header">
<div class="wrapper-game_header">
<a href="https://cta.ruangguru.com/lp-coc-back-button" target="_self">
<button class="image-button">
<img width="32" height="32" class="back-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/79837c77-55f0-4b81-bf92-b968cb01d120.svg" />
</button>
</a>
<div class="wrapper-header_labels">
<p class="game-label">Clash of Champions</p>
<p class="game-desc-label">Extreme Addition</p>
</div>
</div>
<button class="image-button">
<img width="32" height="32" class="share-button" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/f7779bdc-336f-46cc-8736-63aaf4261865.svg" />
</button>
</div>
<div class="container-game_play">
<div id="adaptox-pdf-container" class="pdf-container">
<iframe id="adaptox-pdf" class="adaptox-pdf" src="" loading="lazy"></iframe>
<div id="status-message" class="loader">Loading PDF...</div>
</div>
<button id="fullscreen-button" class="image-button fullscreen-button">
<img width="38" height="24" class="fullscreen-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/def44a07-ccb5-46b3-8b55-813b761aa20c.svg" />
</button>
</div>
</div>
</section>
<!-- MODAL -->
<div class="modal-overlay modal-form-grade display-none">
<div class="modal-content">
<div class="container-modal_form_content">
<div class="modal-form-header">
<p class="form-title">Jenjang kamu saat ini</p>
<img class="close-icon" width="24" height="24" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/23fc8e38-c945-4381-920d-953ba6bc9403.svg" />
</div>
<div class="grade-option_list">
<div class="grade-option input-options" data-value="SD">SD</div>
<div class="grade-option input-options" data-value="SMP">SMP</div>
<div class="grade-option input-options" data-value="Kelas 10 SMA">Kelas 10 SMA</div>
<div class="grade-option input-options" data-value="Kelas 11 SMA">Kelas 11 SMA</div>
<div class="grade-option input-options" data-value="Kelas 12 SMA">Kelas 12 SMA</div>
<div class="grade-option input-options" data-value="Mahasiswa/Umum">Mahasiswa/Umum</div>
</div>
</div>
</div>
</div>
<div class="modal-overlay modal-form-province display-none">
<div class="modal-content">
<div class="container-modal_form_content">
<div class="modal-form-header">
<p class="form-title">Provinsi sekolah kamu</p>
<img class="close-icon" width="24" height="24" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/23fc8e38-c945-4381-920d-953ba6bc9403.svg" />
</div>
<div class="filter-wrapper">
<div class="filter-element">
<img class="search-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/a3200637-5647-451a-9a91-173eece8c1b3.svg" alt="icon-search" />
</div>
<input id="province-filter-input" placeholder="Cari Provinsi Sekolahmu" class="form-filter-input" />
</div>
<div class="province-option_list form-option_list"></div>
</div>
</div>
</div>
<div class="modal-overlay modal-form-city display-none">
<div class="modal-content">
<div class="container-modal_form_content">
<div class="modal-form-header">
<p class="form-title">Kota/Kabupaten sekolah kamu</p>
<img class="close-icon" width="24" height="24" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/23fc8e38-c945-4381-920d-953ba6bc9403.svg" />
</div>
<div class="filter-wrapper">
<div class="filter-element">
<img class="search-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/a3200637-5647-451a-9a91-173eece8c1b3.svg" alt="icon-search" />
</div>
<input id="city-filter-input" placeholder="Cari kota/kabupaten sekolahmu" class="form-filter-input" />
</div>
<div class="city-option_list form-option_list"></div>
</div>
</div>
</div>
<div class="modal-overlay modal-form-school display-none">
<div class="modal-content">
<div class="container-modal_form_content">
<div class="modal-form-header">
<p class="form-title">Sekolah kamu saat ini</p>
<img class="close-icon" width="24" height="24" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/23fc8e38-c945-4381-920d-953ba6bc9403.svg" />
</div>
<div class="filter-wrapper">
<div class="filter-element">
<img class="search-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/a3200637-5647-451a-9a91-173eece8c1b3.svg" alt="icon-search" />
</div>
<input id="school-filter-input" placeholder="Cari sekolahmu saat ini.." class="form-filter-input" />
</div>
<div class="school-option_list form-option_list"></div>
<div class="school-option input-options" data-value="lainnya">Lainnya</div>
</div>
</div>
</div>
<div class="modal-overlay modal-form-quota display-none">
<div class="modal-content">
<div class="container-modal_form_content">
<div class="modal-form-header">
<p class="form-title">Kuota kamu saat ini</p>
<img class="close-icon" width="24" height="24" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/23fc8e38-c945-4381-920d-953ba6bc9403.svg" />
</div>
<div class="quota-option_list">
<div class="quota-option input-options" data-value="1-5 GB">1-5 GB</div>
<div class="quota-option input-options" data-value="5-10 GB">5-10 GB</div>
<div class="quota-option input-options" data-value="10-20 GB">10-20 GB</div>
<div class="quota-option input-options" data-value="20-50 GB">20-50 GB</div>
<div class="quota-option input-options" data-value="Unlimited">Unlimited</div>
</div>
</div>
</div>
</div>
<div class="modal-overlay modal-copy-url display-none">
<div class="modal-content">
<div class="container-modal_content">
<div class="modal-header">
<img width="24" height="24" class="close-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3ce34412-1967-4b26-a193-cc38212bc9eb.svg" />
</div>
<p class="copy-url-info">Link berhasil disalin!</p>
</div>
</div>
</div>
<div class="modal-overlay modal-form-warning display-none">
<div class="modal-content">
<div class="container-modal_content">
<div class="modal-header">
<img width="24" height="24" class="close-icon" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/3ce34412-1967-4b26-a193-cc38212bc9eb.svg" />
</div>
<div class="container-warning-form">
<p class="warning-label">Yakin, mau tutup form ini? Kamu ga bisa maen game loh!!</p>
<div class="container-button-modal">
<button class="secondary-cta undo-close-form">Batal</button>
<a href="https://me.ruangguru.com/clash-of-champions" target="_self">
<button class="cta">Yakin</button>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/me.ruangguru.com/hs-fs/hub/2828691/hub_generated/module_assets/39227318886/1661845605588/module_39227318886_header-homepage-ruangguru-2021.min.js"></script>
<script src="https://unpkg.com/analytics@0.8.1/dist/analytics.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/analytics-plugin-trackable/dist/analytics-plugin-trackable.min.js"></script>
<script type="text/javascript" defer>
/* Initialize analytics */
var Analytics = _analytics.init({
app: 'ruangguruLanding',
debug: false,
plugins: [analyticsTrackable()],
});
Analytics.ready(function () {
Analytics.page();
});
</script>
<!-- PACKAGE COC -->
</body>
</html>