Kamu sedang dalam antrean
Ketika giliranmu tiba, kamu akan langsung diarahkan ke halaman pemilihan tiket.
Sekitar 0 orang di depan kamu
Pastikan kamu tidak meninggalkan halaman ini agar antrean tetap aman
2026-03-08 18:55
Diff
<!doctype html>
<html lang="id">
<head>
<!-- Basic Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Language" content="id" />
<!-- Site Info -->
<title>Clash of Champions Season 2: Final Chapter</title>
<meta name="author" content="Ruangguru Tech Team" />
<meta name="publisher" content="PT Ruang Raya Indonesia" />
<meta
name="description"
content="Beli tiket Ruangguru Clash of Champions Season 2: Final Chapter 2025! Nikmati keseruan bareng para finalis, mainkan game eksklusif, dan saksikan penentuan juara kompetisi yang paling ditunggu."
/>
<link rel="shortcut icon" href="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/favicon60x60-3.png" />
<link rel="canonical" href="https://www.ruangguru.com/event/clash-of-champions/final-chapter/7yjhgqjg728whgdkh12vjkhqhq881jhb/queue" />
<!-- SEO Meta Tags -->
<meta name="robots" content="noindex, nofollow" />
<meta name="google-site-verification" content="VJAn1g6wmtTZPpTXh-B4xoSFEkUi5jcV74xQSr6jnOM" />
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Clash of Champions Season 2: Final Chapter" />
<meta
property="og:description"
content="Beli tiket Ruangguru Clash of Champions Season 2: Final Chapter 2025! Nikmati keseruan bareng para finalis, mainkan game eksklusif, dan saksikan penentuan juara kompetisi yang paling ditunggu."
/>
<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 property="og:url" content="https://www.ruangguru.com/event/clash-of-champions/final-chapter/7yjhgqjg728whgdkh12vjkhqhq881jhb/queue" />
<!-- Twitter Meta Tags -->
<meta name="twitter:title" content="Clash of Champions Season 2: Final Chapter" />
<meta
name="twitter:description"
content="Beli tiket Ruangguru Clash of Champions Season 2: Final Chapter 2025! Nikmati keseruan bareng para finalis, mainkan game eksklusif, dan saksikan penentuan juara kompetisi yang paling ditunggu."
/>
<meta name="twitter:image" content="https://cdn-web-2.ruangguru.com/landing-pages/assets/hs/1%20New%20Icon/rg.png#keepProtocol" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<!-- Styles -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
.slider-wrapper {
display: flex;
justify-content: center;
min-height: 240px;
background-color: #191919;
overflow: hidden;
}
.slider-content {
width: 100%;
}
.slider-content .slick-dots.inner-dots {
bottom: 1rem;
}
.slider-content .slick-dotted.slick-slider {
margin-bottom: 0;
}
.slider-content .slick-dots li {
margin: 0;
}
.slider-content .slick-dots li button {
padding: 3px;
}
.slider-content .slick-dots li button:before {
font-size: 8px;
opacity: 1;
color: #b29e82;
}
.slider-content .slick-dots li.slick-active button:before {
opacity: 1;
color: #ed3737;
}
.slider-content .slick-arrow:before {
content: none !important;
}
.slider-content .slick-arrow {
z-index: 2;
top: 50% !important;
background-size: 100% 100% !important;
border-radius: 50% !important;
box-shadow: 0 12px 16px rgba(26, 29, 34, 0.12);
cursor: pointer !important;
height: 2rem !important;
width: 2rem !important;
}
.slider-content .slick-prev {
left: 0.625rem !important;
background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c99d671c-12a9-44ea-ae09-e8a4b233ac2d.svg) !important;
}
.slider-content .slick-next {
right: 0.625rem !important;
background-image: url(https://cdn-web-2.ruangguru.com/file-uploader/lp/c2f137c4-6388-43d0-b6c1-920585b36f3b.svg) !important;
}
@media (max-width: 320px) {
.slider-wrapper {
min-height: auto;
}
}
@media (min-width: 480px) {
.slider-content .slick-slider .slick-track {
display: flex;
gap: 1rem;
}
}
body {
margin: 0;
-ms-overflow-style: none;
height: 100%;
font-family: Inter, sans-serif;
background-color: #071c35;
background: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/cd519a1f-3f3a-43e0-89c4-19c71a159066.jpg'), #071c35;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
--container-width: 1200px;
}
html {
scrollbar-width: none;
}
a,
a:hover,
a:visited {
text-decoration: none !important;
color: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
span {
margin: 0;
}
.body-container {
float: none;
margin: auto;
min-height: 100vh;
max-width: var(--container-width, 1000px);
display: flex;
flex-direction: column;
}
.hero {
position: relative;
min-height: 330px;
overflow: hidden;
background: url('https://cdn-web-2.ruangguru.com/landing-pages/assets/0997c902-8098-468a-9397-4ddc064222f5.jpg');
background-size: 100% 100%;
background-position: center;
}
.hero-section {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1rem;
gap: 16rem;
}
.hero-logo {
width: auto;
height: 12rem;
}
.hero-bg {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: translate(-50%, 0);
z-index: -1;
}
.main-content {
flex: 1;
position: relative;
overflow: hidden;
background-color: #f1f3f4;
display: flex;
justify-content: center;
min-height: 280px;
height: 100%;
padding-block: 1.375rem;
padding-inline: 1.125rem;
color: #5e677b;
}
.main-content * {
z-index: 1;
}
.main-content .card {
color: #000000;
}
.main-content-bg {
display: none;
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 100%;
height: 130%;
z-index: 0;
}
.queue-content-wrapper {
max-width: 504px;
}
.card {
display: flex;
flex-direction: column;
background: #ffffff;
gap: 8px;
border-radius: 8px;
padding: 12px;
}
.alert-warning {
flex-direction: row;
border-radius: 8px;
border: 1px solid #f26d0f;
background: #fcc41b;
}
.progress-container {
position: relative;
border: 1px solid #3989cf;
background-color: #f5d6d6;
width: 100%;
height: 8px;
border-radius: 10px;
margin-top: 0.75rem;
}
.progress-bar {
position: relative;
background-color: #3989cf;
height: 100%;
border-radius: 10px;
transition: width 0.3s ease;
min-width: 32px;
}
.progress-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
}
.spinner {
width: 38px;
height: 38px;
border: 8px solid #bae3ef;
border-top: 8px solid #3cb6c1;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Start - Modal */
.modal {
display: none;
position: fixed;
align-items: center;
justify-content: center;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 2rem);
max-width: 500px;
border-radius: 0.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
}
.modal-body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 1rem;
gap: 1rem;
color: #000000;
}
.error-modal-illustration {
width: auto;
height: 148px;
}
.error-modal-button {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 700;
width: 100%;
padding: 1rem;
border: none;
color: #ffffff;
background: #f26d0f;
border-radius: 9999px;
transition: background 0.3s ease;
}
.error-modal-button:hover {
background: #f26d0f;
}
.error-modal-button:active {
background: #f26d0f;
}
/* End - Modal */
@media (max-width: 768px) {
.modal.responsive .modal-content {
top: auto;
left: 0;
bottom: 0;
transform: none;
width: 100%;
max-width: none;
border-radius: 1rem 1rem 0 0;
}
.modal.responsive {
align-items: flex-end;
}
.main-content-bg {
display: block;
}
}
@media (max-width: 767px) {
.hero {
min-height: 400px;
}
.hero-logo {
height: 8rem;
}
.hero-section {
gap: 8rem;
}
}
@media (min-width: 768px) {
.hero-bg {
height: auto;
min-height: 100%;
transform: translate(-50%, -4%);
}
}
/* Utility Classes for Layout */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.block {
display: block;
}
.flex {
display: flex;
}
.row-reverse {
flex-direction: row-reverse;
}
.stack {
display: flex;
flex-direction: column;
}
.hidden {
display: none !important;
}
.hstack {
display: flex;
flex-direction: row;
}
.w-full {
width: 100%;
}
.w-auto {
width: auto;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.align-center {
align-items: center;
}
.align-start {
align-items: flex-start;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.grid {
display: grid;
}
.grid-cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.gap-half {
gap: 0.25rem; /* 4px */
}
.gap-1 {
gap: 0.375rem; /* 6px */
}
.gap-2 {
gap: 0.625rem; /* 10px */
}
.gap-3 {
gap: 0.75rem; /* 12px */
}
.gap-4 {
gap: 1rem; /* 16px */
}
.gap-5 {
gap: 1.25rem; /* 20px */
}
.gap-6 {
gap: 1.5rem; /* 24px */
}
.gap-8 {
gap: 2rem; /* 32px */
}
.p-1 {
padding: 0.375rem; /* 6px */
}
.p-2 {
padding: 0.5rem; /* 8px */
}
.p-3 {
padding: 0.75rem; /* 12px */
}
.p-4 {
padding: 1rem; /* 16px */
}
.p-6 {
padding: 1.5rem; /* 24px */
}
.p-8 {
padding: 2rem; /* 32px */
}
.p-9 {
padding: 2.25rem; /* 36px */
}
.px-1 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-1 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-9 {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.text-center {
text-align: center;
}
.text-2xs {
font-size: 8px;
}
.text-xs {
font-size: 10px;
}
.text-sm {
font-size: 12px;
}
.text-md {
font-size: 14px;
}
.text-lg {
font-size: 16px;
}
.text-xl {
font-size: 18px;
}
.text-2xl {
font-size: 20px;
}
.text-3xl {
font-size: 24px;
}
.text-4xl {
font-size: 26px;
}
.text-white {
color: white;
}
.text-gray-200 {
color: #d9d9d9;
}
.text-gray-300 {
color: #959dac;
}
.text-gray-900 {
color: #2c313a;
}
.font-sans {
font-family: 'Space Grotesk', sans-serif;
}
.font-inter {
font-family: Inter, sans-serif;
}
.font-normal {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.font-italic {
font-style: italic;
}
.rotate-180 {
transform: rotate(180deg);
}
.radius-8 {
border-radius: 8px;
}
.radius-10 {
border-radius: 12px;
}
.radius-full {
border-radius: 9999px;
}
.w-32 {
width: 32px;
}
.h-32 {
height: 32px;
}
.bg-white {
background: #fff;
}
.cursor-pointer {
cursor: pointer;
}
/* Responsiveness */
/* Extra Small screens (min-width: 475px) */
@media (min-width: 475px) {
.xs\:flex {
display: flex;
}
.xs\:align-center {
align-items: center;
}
}
/* Small screens (min-width: 640px) */
/* @media (min-width: 640px) {
.sm\:p-9 {
padding: 2.25rem;
}
} */
/* Medium screens (min-width: 768px) */
@media (min-width: 768px) {
.md\:w-auto {
width: auto;
}
.md\:block {
display: block;
}
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:stack {
display: flex;
flex-direction: column;
}
.md\:gap-3 {
gap: 0.75rem; /* 12px */
}
.md\:gap-4 {
gap: 1rem; /* 16px */
}
.md\:gap-5 {
gap: 1.25rem; /* 20px */
}
.md\:p-9 {
padding: 2.25rem;
}
.md\:hstack {
display: flex;
flex-direction: row;
}
.md\:hidden {
display: none;
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.md\:text-xs {
font-size: 10px;
}
.md\:text-sm {
font-size: 12px;
}
.md\:text-md {
font-size: 14px;
}
.md\:text-lg {
font-size: 16px;
}
.md\:text-4xl {
font-size: 26px;
}
}
/* Large screens (min-width: 1024px) */
@media (min-width: 1024px) {
.lg\:p-9 {
padding: 2.25rem;
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, 1fr); /* 3 columns for desktops */
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, 1fr); /* 3 columns for desktops */
}
}
</style>
<!-- Third Party Scripts -->
<script src="https://unpkg.com/analytics@0.8.1/dist/analytics.min.js"></script>
<script src="https://unpkg.com/analytics-plugin-trackable/dist/analytics-plugin-trackable.min.js"></script>
<!-- Application Scripts -->
<script type="module" crossorigin src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/event/clash-of-champions/final-chapter/7yjhgqjg728whgdkh12vjkhqhq881jhb/queue/assets/index-DBI4hgwg.js"></script>
</head>
<body>
<div class="body-container">
<section class="slider-wrapper">
<div class="slider-content">
<div class="waiting-slide-slick"></div>
</div>
</section>
<!-- <section class="hero">
<img class="m-auto" src="" alt="" />
</section> -->
<section class="main-content">
<div class="queue-content-wrapper stack flex-1 gap-3">
<div class="stack gap-2">
<p class="text-lg font-bold">Kamu sedang dalam antrean</p>
<p class="text-sm">Ketika giliranmu tiba, kamu akan langsung diarahkan ke halaman pemilihan tiket.</p>
</div>
<div class="card gap-4">
<div class="stack gap-4">
<div id="progress-container" class="progress-container">
<div id="progress-bar" class="progress-bar">
<img src="https://cdn-web-2.ruangguru.com/landing-pages/assets/e23060fa-2b36-4425-a48d-74ffec3857aa.png?convert=webp" class="progress-icon" alt="" />
</div>
</div>
<p id="remaining-person-message" class="text-md font-medium">
Sekitar
<span id="remaining-person-count" style="color: #cd1924">0</span>
orang di depan kamu
</p>
</div>
<div class="card alert-warning align-start xs:align-center">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 2.5a2 2 0 0 0-1.74 1.01v.003L1.936 14.47a2.024 2.024 0 0 0 .732 2.756c.305.177.651.272 1.004.273h12.656a2.008 2.008 0 0 0 1.738-1.013 2.024 2.024 0 0 0-.002-2.016L11.74 3.513l-.002-.002A2.008 2.008 0 0 0 10 2.5Zm.863 6.058A.864.864 0 0 0 10 7.692a.864.864 0 0 0-.862.866v2.308c0 .477.386.865.862.865a.864.864 0 0 0 .863-.865V8.558Zm.287 5.192c0 .637-.515 1.154-1.15 1.154-.635 0-1.15-.517-1.15-1.154 0-.637.515-1.154 1.15-1.154.635 0 1.15.517 1.15 1.154Z"
fill="#1A202C"
/>
</svg>
</div>
<p class="text-sm font-medium">Pastikan kamu tidak meninggalkan halaman ini agar antrean tetap aman</p>
</div>
</div>
</div>
</section>
</div>
<div id="queue-processed-modal" class="modal">
<div class="modal-content">
<div class="modal-body">
<div class="stack gap-3">
<p class="text-2xl font-bold">Giliranmu telah tiba!</p>
<p class="text-sm">Terimakasih telah menunggu, kami akan membawamu ke halaman pemilihan tiket</p>
</div>
<div class="spinner"></div>
<p class="text-sm">
Masuk halaman pembelian tiket dalam:
<span id="ticket-redirect-countdown">5</span>
</p>
</div>
</div>
</div>
<div id="error-modal" class="modal responsive">
<div class="modal-content">
<div class="modal-body">
<img width="265" height="148" class="error-modal-illustration" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/c8793af5-1e49-4c78-9650-a70ac76706ab.png?convert=webp" />
<div class="stack gap-3">
<p class="text-lg font-bold">Ambil Antrean</p>
<p class="text-sm">Kamu belum mengambil antrean. Silakan ambil antrean terlebih dahulu untuk melanjutkan</p>
</div>
<button id="error-modal-button" class="error-modal-button">Ambil Antrean</button>
</div>
</div>
</div>
<div id="limit-modal" class="modal">
<div class="modal-content">
<div class="modal-body">
<img width="55%" src="https://cdn-web-2.ruangguru.com/landing-pages/assets/4e3353b2-ed92-4e54-abb0-da2609e56df9.png?convert=webp" loading="lazy" />
<p class="modalt-tile">Akun kamu sudah memiliki tiket aktif untuk akses online streaming</p>
<button id="close-modal-limit" class="error-modal-button">SAYA MENGERTI</button>
</div>
</div>
</div>
<!-- Third Party Scripts -->
<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>
</body>
</html>