<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-5KGFKS3TBT"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-5KGFKS3TBT');
</script>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎉</text></svg>">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ROBLOX GIFTZONE 2026</title>
<meta name="description" content="A polished reward-flow demo inspired by the MEORBX Booster Roblox-style page.">
<style>
:root {
--purple: #9333ea;
--purple-dark: #7623c5;
--emerald: #10b981;
--ink: #232527;
--muted: #6b7280;
--line: #e5e7eb;
--surface: #ffffff;
--page: #f3f4f6;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(circle at 15% 8%, rgba(147, 51, 234, .12), transparent 26rem),
radial-gradient(circle at 85% 15%, rgba(16, 185, 129, .10), transparent 24rem),
var(--page);
color: var(--ink);
font-family: Montserrat, Arial, Helvetica, sans-serif;
}
body.landing-active {
overflow: hidden;
background: radial-gradient(circle at center, #001c44 0%, #000b1a 100%);
}
button, input { font: inherit; }
button { cursor: pointer; border: 0; }
.hidden { display: none !important; }
#codex-browser-sidebar-comments-root {
display: none !important;
pointer-events: none !important;
}
.landing-screen {
position: fixed;
inset: 0;
z-index: 2147483500;
display: flex;
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
padding: 20px;
overflow: hidden;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 40%),
radial-gradient(circle at 70% 60%, rgba(255,255,255,.05), transparent 45%),
linear-gradient(135deg, #0a0f1f, #05070f);
backdrop-filter: blur(40px);
}
.landing-screen.is-hidden {
display: none;
}
#stars {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.landing-card {
position: relative;
z-index: 1;
width: min(420px, 95vw);
padding: 56px 24px 44px;
border-radius: 28px; /* MORE CURVED CORNERS */
background:
linear-gradient(180deg, #0b1020, #070a14),
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.04) 0px,
rgba(255,255,255,0.04) 1px,
transparent 1px,
transparent 20px
),
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.04) 0px,
rgba(255,255,255,0.04) 1px,
transparent 1px,
transparent 20px
);
text-align: center;
box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
}
.landing-logo {
width: 110px;
height: 110px;
margin: 0 auto 20px;
border: 4px solid #fff;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #2d56ff;
box-shadow:
0 0 10px rgba(0, 212, 255, 0.5),
0 0 25px rgba(0, 212, 255, 0.35),
0 0 45px rgba(147, 51, 234, 0.25),
0 0 70px rgba(0, 212, 255, 0.15);
animation: landingLogoPulse 3s ease-in-out infinite, neonPulse 2.2s ease-in-out infinite;
}
.landing-logo img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.landing-card h1 {
margin: 0 0 6px;
color: #e8eaf6;
font-family: Impact, fantasy;
font-size: 25px;
font-weight: 900;
letter-spacing: 0;
}
.landing-card .subtitle {
margin: 0 0 32px;
color: #27c93f;
font-size: 14px;
font-weight: 800;
}
.landing-actions {
display: flex;
flex-direction: column;
gap: 17px;
margin-top: 20px;
}
.landing-btn {
width: 100%;
max-width: 420px; /* 👈 makes them longer visually */
margin: 0 auto; /* 👈 centers them */
padding: 14px 28px; /* 👈 more left/right space */
border-radius: 999px;
color: #fff;
font-family: Impact, fantasy;
font-size: 18px; /* slightly smaller = cleaner */
letter-spacing: .5px;
transition: transform .2s ease, filter .2s ease;
display: block;
}
.landing-btn:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}
.landing-btn.cyan {
background: linear-gradient(90deg, #00c9f7, #00d4ff);
box-shadow: 0 6px 20px rgba(0, 212, 255, .3);
}
.landing-btn.red {
background: linear-gradient(90deg, #c72b2b, #e03535);
box-shadow: 0 6px 20px rgba(224, 53, 53, .3);
}
.landing-btn.green {
background: linear-gradient(90deg, #20a832, #27c93f);
box-shadow: 0 6px 20px rgba(39, 201, 63, .3);
}
.landing-card footer {
margin-top: 24px;
color: rgba(232, 234, 246, .62);
font-size: 12px;
font-weight: 800;
}
.landing-toast {
position: fixed;
left: 50%;
bottom: 32px;
z-index: 2147483600;
padding: 12px 24px;
border-radius: 999px;
background: #1e2535;
color: #fff;
opacity: 0;
transform: translateX(-50%) translateY(80px);
transition: opacity .3s ease, transform .3s ease;
font-weight: 800;
}
.landing-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.app {
width: min(100%, 460px);
margin: 0 auto;
padding: 24px 16px 36px;
}
.brand {
display: grid;
justify-items: center;
gap: 10px;
text-align: center;
margin-bottom: 18px;
}
.brand-mark {
position: relative;
width: 230px;
}
.brand-logo { width: 100%; display: block; }
.icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
}
.year {
position: absolute;
right: 3px;
top: 10px;
padding: 4px 9px;
border-radius: 999px;
background: #232527;
color: white;
font-size: 12px;
font-weight: 900;
}
h1 {
margin: 0;
color: var(--purple);
font-size: 30px;
font-weight: 900;
letter-spacing: 0;
}
.subhead {
margin: 0;
color: var(--muted);
font-size: 14px;
font-weight: 500;
}
.metrics {
position: relative;
overflow: hidden;
padding: 14px;
margin-bottom: 20px;
border: 2px solid rgba(255, 255, 255, .85);
border-radius: 16px;
background: rgba(255, 255, 255, .94);
box-shadow: 0 16px 32px rgba(35, 37, 39, .12);
}
.metrics::before {
content: "";
position: absolute;
inset: -50%;
background: radial-gradient(circle, rgba(16, 185, 129, .13), transparent 62%);
animation: spin 15s linear infinite;
}
.live {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.live span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: 999px;
background: rgba(239, 68, 68, .13);
color: #ef4444;
font-size: 10px;
font-weight: 900;
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ef4444;
animation: blink 1.5s infinite;
}
.metrics h2 {
position: relative;
z-index: 1;
margin: 0 0 12px;
text-align: center;
color: var(--muted);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .8px;
}
.metric-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.metric-card {
padding: 10px;
border: 2px solid rgba(16, 185, 129, .28);
border-radius: 10px;
background: linear-gradient(135deg, rgba(16, 185, 129, .10), rgba(96, 165, 250, .10));
text-align: center;
transition: transform .25s ease, box-shadow .25s ease;
animation: breathe 2s infinite;
}
.metric-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(16, 185, 129, .24);
}
.metric-card .icon {
width: 30px;
height: 30px;
}
.metric-value {
color: var(--emerald);
font-size: 18px;
font-weight: 900;
}
.metric-name {
color: var(--muted);
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .5px;
}
.panel {
padding: 22px;
margin-bottom: 18px;
border-radius: 8px;
background: var(--surface);
box-shadow: 0 18px 40px rgba(35, 37, 39, .16);
transition: transform .25s ease, opacity .25s ease;
}
.panel h2 {
margin: 0 0 20px;
color: var(--purple);
text-align: center;
font-size: 22px;
font-weight: 900;
}
.reward-grid, .amount-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.choice, .amount {
position: relative;
overflow: hidden;
min-height: 158px;
padding: 16px 10px;
border: 3px solid var(--line);
border-radius: 14px;
background: white;
text-align: center;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.choice:hover, .amount:hover {
transform: translateY(-7px);
box-shadow: 0 16px 30px rgba(35, 37, 39, .16);
}
.choice.picked, .amount.picked {
border-color: var(--purple);
background: rgba(147, 51, 234, .08);
}
.choice .icon {
width: 74px;
height: 74px;
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18));
}
.choice-title {
margin-top: 8px;
font-size: 22px;
font-weight: 900;
}
.choice-info {
margin: 4px 0 10px;
color: var(--muted);
font-size: 13px;
font-weight: 600;
}
.select-pill {
display: inline-flex;
min-width: 86px;
justify-content: center;
padding: 7px 14px;
border-radius: 6px;
background: var(--purple);
color: white;
font-size: 13px;
font-weight: 900;
}
.input-wrap {
position: relative;
margin-bottom: 16px;
}
.input-wrap span {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
}
input {
width: 100%;
min-height: 56px;
padding: 0 14px 0 42px;
border: 2px solid #d1d5db;
border-radius: 7px;
outline: 0;
background: #fff;
color: #111827;
font-size: 16px;
}
input:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(147, 51, 234, .35);
}
.primary-btn {
position: relative;
overflow: hidden;
width: 100%;
min-height: 56px;
border-radius: 7px;
background: var(--purple);
color: white;
font-weight: 900;
transition: transform .2s ease, background .2s ease;
}
.primary-btn:hover {
background: var(--purple-dark);
transform: scale(1.025);
}
.primary-btn::after, .choice::after {
content: "";
position: absolute;
inset: -60%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
transform: translateX(-80%) rotate(30deg);
animation: shine 3.6s infinite;
pointer-events: none;
}
.alert {
display: none;
margin-top: 14px;
padding: 12px;
border: 1px solid rgba(239, 68, 68, .30);
border-radius: 8px;
background: rgba(239, 68, 68, .10);
color: #ef4444;
font-size: 14px;
font-weight: 700;
}
.account {
display: none;
margin-top: 16px;
padding: 16px;
border: 1px solid rgba(147, 51, 234, .20);
border-radius: 16px;
background: rgba(147, 51, 234, .05);
}
.account.visible {
display: block;
animation: appear .25s ease-out;
}
.profile {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.avatar-wrap { position: relative; }
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid rgba(147, 51, 234, .28);
background: white;
}
.activity {
position: absolute;
right: 2px;
bottom: 5px;
width: 18px;
height: 18px;
border: 2px solid white;
border-radius: 50%;
background: var(--emerald);
box-shadow: 0 0 10px rgba(16, 185, 129, .65);
}
.profile h3 { margin: 0; font-size: 18px; }
.profile p { margin: 4px 0 0; color: var(--muted); }
.details {
padding: 12px;
border-radius: 12px;
background: rgba(0, 0, 0, .03);
}
.detail {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid rgba(0, 0, 0, .05);
font-size: 13px;
}
.detail:last-child { border-bottom: 0; }
.detail-label { flex: 1; color: var(--muted); font-weight: 700; }
.detail-value { font-weight: 900; }
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(16, 185, 129, .15);
color: var(--emerald);
font-size: 12px;
font-weight: 900;
}
.tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
animation: blink 2s infinite;
}
.amount {
min-height: 124px;
border-width: 2px;
opacity: 0;
transform: scale(.3);
animation: emerge .48s ease-out forwards;
}
.amount:nth-child(2) { animation-delay: .08s; }
.amount:nth-child(3) { animation-delay: .16s; }
.amount:nth-child(4) { animation-delay: .24s; }
.amount .icon {
width: 44px;
height: 44px;
vertical-align: middle;
}
.amount-number {
margin-top: 4px;
font-size: 22px;
font-weight: 900;
}
.available {
margin-top: 8px;
padding: 5px 8px;
border-radius: 4px;
background: var(--emerald);
color: white;
font-size: 11px;
font-weight: 900;
}
.showcase {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 18px;
margin-bottom: 18px;
border: 2px solid rgba(147, 51, 234, .30);
border-radius: 16px;
background: linear-gradient(135deg, rgba(147, 51, 234, .10), rgba(16, 185, 129, .10));
}
.showcase .icon {
width: 54px;
height: 54px;
animation: rewardBeat 1.5s infinite;
}
.reward-number {
color: var(--purple);
font-size: 40px;
font-weight: 900;
}
.reward-type {
color: var(--muted);
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
}
.progress-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
color: #374151;
font-size: 14px;
font-weight: 700;
}
.bar {
height: 20px;
margin-bottom: 14px;
overflow: hidden;
border-radius: 999px;
background: #e5e7eb;
}
.bar span {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--emerald);
transition: width .1s linear;
}
.logs {
max-height: 132px;
overflow: auto;
padding: 12px;
margin-bottom: 16px;
border: 1px solid var(--line);
border-radius: 7px;
background: #f9fafb;
color: #374151;
font-size: 14px;
line-height: 1.55;
}
.ready-icon {
display: grid;
place-items: center;
min-height: 70px;
margin-bottom: 14px;
animation: levitate 3s ease-in-out infinite;
}
.ready-icon .icon {
width: 68px;
height: 68px;
}
.info-box {
display: grid;
gap: 10px;
padding: 14px;
margin: 18px 0;
border-radius: 8px;
background: #f3f4f6;
color: #374151;
font-size: 14px;
font-weight: 600;
}
.success {
padding: 16px;
margin-bottom: 16px;
border: 1px solid #86efac;
border-radius: 8px;
background: #dcfce7;
color: #15803d;
text-align: center;
font-weight: 800;
}
.notice {
padding: 13px;
margin-bottom: 16px;
border: 1px solid #fde68a;
border-radius: 8px;
background: #fef3c7;
color: #a16207;
font-size: 14px;
font-weight: 700;
}
.footer {
color: var(--muted);
text-align: center;
font-size: 11px;
line-height: 1.45;
}
.item-app {
min-height: 100vh;
padding: 18px 14px 42px;
color: #e8fbff;
background:
radial-gradient(circle at 22% 18%, rgba(0, 212, 255, .22), transparent 22rem),
radial-gradient(circle at 80% 8%, rgba(147, 51, 234, .20), transparent 24rem),
linear-gradient(135deg, #061a2b, #07101f 58%, #030712);
font-family: Montserrat, Arial, sans-serif;
}
.item-app.brainrot-theme {
background:
radial-gradient(circle at 16% 16%, rgba(224, 53, 53, .20), transparent 24rem),
radial-gradient(circle at 84% 12%, rgba(147, 51, 234, .22), transparent 24rem),
linear-gradient(135deg, #180914, #0d1020 58%, #030712);
}
.item-shell {
width: min(1120px, 100%);
margin: 0 auto;
}
.item-hero {
display: grid;
justify-items: center;
gap: 12px;
padding: 12px 0 22px;
text-align: center;
}
.item-logo {
display: grid;
place-items: center;
width: 96px;
height: 96px;
border: 4px solid rgba(255, 255, 255, .92);
border-radius: 28px;
background: linear-gradient(135deg, #00d4ff, #27c93f);
box-shadow: 0 0 34px rgba(0, 212, 255, .28);
font-size: 48px;
animation: rewardBeat 1.7s infinite;
}
.brainrot-theme .item-logo {
background: linear-gradient(135deg, #e03535, #9333ea);
box-shadow: 0 0 34px rgba(224, 53, 53, .28);
}
.item-hero h1 {
margin: 0;
color: #fff;
font-size: clamp(30px, 6vw, 54px);
text-shadow: 0 0 18px rgba(0, 212, 255, .25);
}
.item-hero p {
margin: 0;
color: rgba(232, 251, 255, .74);
font-weight: 800;
}
.active-strip {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 6px auto 18px;
padding: 13px 18px;
border: 1px solid rgba(191, 233, 255, .18);
border-radius: 13px;
background: rgba(6, 26, 43, .82);
box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
font-weight: 900;
}
.active-strip strong {
color: #39ff14;
font-size: 21px;
text-shadow: 0 0 12px rgba(57, 255, 20, .38);
}
.select-line {
margin: 12px 0 22px;
text-align: center;
color: #fff;
font-size: 24px;
font-weight: 900;
}
.item-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.loot-card {
position: relative;
display: grid;
gap: 10px;
min-height: 172px;
padding: 14px 10px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .20);
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(232, 249, 255, .92));
color: #0f172a;
text-align: center;
box-shadow: 0 14px 28px rgba(0, 0, 0, .20);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.loot-card:hover {
transform: translateY(-6px) scale(1.02);
border-color: rgba(0, 212, 255, .65);
box-shadow: 0 20px 34px rgba(0, 0, 0, .28), 0 0 22px rgba(0, 212, 255, .16);
}
.brainrot-theme .loot-card:hover {
border-color: rgba(224, 53, 53, .60);
box-shadow: 0 20px 34px rgba(0, 0, 0, .28), 0 0 22px rgba(224, 53, 53, .16);
}
.loot-art {
display: grid;
place-items: center;
width: 86px;
height: 86px;
margin: 0 auto;
border-radius: 24px;
background: linear-gradient(135deg, rgba(0, 212, 255, .18), rgba(39, 201, 63, .16));
font-size: 44px;
}
.brainrot-theme .loot-art {
background: linear-gradient(135deg, rgba(224, 53, 53, .18), rgba(147, 51, 234, .16));
}
.loot-name {
display: grid;
place-items: center;
min-height: 42px;
font-size: 14px;
font-weight: 900;
line-height: 1.2;
}
.rarity {
justify-self: center;
padding: 5px 10px;
border-radius: 999px;
background: #111827;
color: #fff;
font-size: 10px;
font-weight: 900;
letter-spacing: .7px;
}
.item-modal {
position: fixed;
inset: 0;
z-index: 2147483600;
display: none;
place-items: center;
padding: 18px;
background: rgba(0, 0, 0, .72);
backdrop-filter: blur(8px);
}
.item-modal.visible {
display: grid;
}
.item-dialog {
width: min(430px, 100%);
padding: 24px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 20px;
background: linear-gradient(180deg, #111827, #060b16);
color: #fff;
text-align: center;
box-shadow: 0 28px 80px rgba(0, 0, 0, .5);
}
.modal-art {
display: grid;
place-items: center;
width: 98px;
height: 98px;
margin: 6px auto 14px;
border-radius: 28px;
background: rgba(255, 255, 255, .08);
font-size: 56px;
}
.item-dialog h2 {
margin: 0 0 8px;
font-size: 24px;
}
.item-dialog p {
color: rgba(255, 255, 255, .74);
font-weight: 700;
}
.item-dialog input {
margin: 14px 0;
padding-left: 16px;
border-color: rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .08);
color: #fff;
text-align: center;
}
.dialog-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 8px;
}
.small-btn {
min-height: 48px;
border-radius: 10px;
color: white;
font-weight: 900;
transition: transform .2s ease, filter .2s ease;
}
.small-btn:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
.small-btn.cancel {
background: #374151;
}
.small-btn.continue {
background: linear-gradient(90deg, #00c9f7, #27c93f);
}
.brainrot-theme .small-btn.continue {
background: linear-gradient(90deg, #e03535, #9333ea);
}
.loader-stack {
display: grid;
justify-items: center;
gap: 14px;
padding: 8px 0;
}
.loader-ring {
width: 64px;
height: 64px;
border: 6px solid rgba(255, 255, 255, .18);
border-top-color: #00d4ff;
border-radius: 50%;
animation: rotate-loader 700ms linear infinite;
}
.final-card {
display: grid;
gap: 12px;
justify-items: center;
}
.final-card .primary-btn {
margin-top: 8px;
}
.toast-wrap {
position: fixed;
z-index: 20;
top: 18px;
right: 18px;
width: min(350px, calc(100vw - 36px));
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
margin-bottom: 10px;
border-left: 4px solid var(--emerald);
border-radius: 12px;
background: white;
box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
animation: toastIn .45s ease-out, toastOut .45s ease-in 4.35s forwards;
}
.toast .avatar-icon {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--emerald);
}
.toast strong { display: block; font-size: 14px; }
.toast span { color: var(--muted); font-size: 12px; font-weight: 700; }
.pulse { animation: pulse 2s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .32; } }
@keyframes breathe { 50% { transform: scale(1.04); opacity: .92; } }
@keyframes shine { to { transform: translateX(80%) rotate(30deg); } }
@keyframes appear { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes emerge { 0% { opacity: 0; transform: scale(.3); } 55% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rewardBeat { 50% { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(147, 51, 234,
Converted to HTML with WordToHTML.net | Document Converter for Windows