RUNIXX LOGO
);
}
function GrainOverlay() {
return (
);
}
function GridLines() {
return (
);
}
function CornerMark({ position }) {
const styles = {
tl: { top: 24, left: 24 },
tr: { top: 24, right: 24, transform: "scaleX(-1)" },
bl: { bottom: 24, left: 24, transform: "scaleY(-1)" },
br: { bottom: 24, right: 24, transform: "scale(-1)" },
};
return (
);
}
const css = `
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Editorial+New:ital@0;1&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #000;
color: #fff;
font-family: 'DM Mono', monospace;
min-height: 100vh;
overflow-x: hidden;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scanline {
from { transform: translateY(-100%); }
to { transform: translateY(100vh); }
}
@keyframes pulse-ring {
0% { transform: scale(0.95); opacity: 1; }
100% { transform: scale(1.4); opacity: 0; }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes borderPulse {
0%, 100% { border-color: rgba(216,255,0,0.3); }
50% { border-color: rgba(216,255,0,0.7); }
}
.fade-up { animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards; }
.fade-up-2 { animation: fadeUp 0.7s 0.12s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }
.fade-up-3 { animation: fadeUp 0.7s 0.24s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }
.fade-up-4 { animation: fadeUp 0.7s 0.36s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }
.fade-up-5 { animation: fadeUp 0.7s 0.48s cubic-bezier(0.16,1,0.3,1) forwards; opacity: 0; }
.cert-card {
animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}
.cert-row {
animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
opacity: 0;
}
.cert-row:nth-child(1) { animation-delay: 0.2s; }
.cert-row:nth-child(2) { animation-delay: 0.3s; }
.cert-row:nth-child(3) { animation-delay: 0.4s; }
.cert-row:nth-child(4) { animation-delay: 0.5s; }
.cert-row:nth-child(5) { animation-delay: 0.6s; }
.cert-row:nth-child(6) { animation-delay: 0.7s; }
input[type="text"] {
background: transparent;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-family: 'DM Mono', monospace;
font-size: 16px;
letter-spacing: 0.1em;
outline: none;
padding: 16px 0;
transition: border-color 0.3s ease;
width: 100%;
}
input[type="text"]:focus {
border-bottom-color: #D8FF00;
}
input[type="text"]::placeholder {
color: rgba(255,255,255,0.2);
letter-spacing: 0.1em;
}
.verify-btn {
background: #D8FF00;
border: none;
color: #000;
cursor: pointer;
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: 0.2em;
padding: 18px 48px;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.verify-btn::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
background-size: 200% auto;
opacity: 0;
transition: opacity 0.3s;
}
.verify-btn:hover::after {
opacity: 1;
animation: shimmer 0.8s linear;
}
.verify-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 32px rgba(216,255,0,0.25);
}
.verify-btn:active { transform: scale(0.98) translateY(0); }
.verify-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
`;
export default function App() {
const [certId, setCertId] = useState("");
const [result, setResult] = useState(null); // null | cert | "not-found" | "invalid"
const [loading, setLoading] = useState(false);
const [view, setView] = useState("input"); // "input" | "result"
const styleRef = useRef(null);
useEffect(() => {
const style = document.createElement("style");
style.textContent = css;
document.head.appendChild(style);
styleRef.current = style;
return () => style.remove();
}, []);
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const id = params.get("id");
if (id) {
setCertId(id);
handleVerify(id);
}
}, []);
function isValidFormat(id) {
return /^RX-\d{4}-\d{4}$/.test(id.trim().toUpperCase());
}
function handleVerify(id) {
const query = (id || certId).trim().toUpperCase();
if (!query) return;
setLoading(true);
setView("result");
setTimeout(() => {
if (!isValidFormat(query)) {
setResult("invalid");
} else if (CERTIFICATES[query]) {
setResult(CERTIFICATES[query]);
} else {
setResult("not-found");
}
setLoading(false);
}, 1200);
}
function handleReset() {
setResult(null);
setCertId("");
setView("input");
setLoading(false);
}
return (
{view === "input" && (
)}
{view === "result" && !loading && result && result !== "not-found" && result !== "invalid" && (
VERIFICATION SYSTEM
RETAIL SUMMIT 2026
{/* Main */}
{/* Eyebrow */}
VERIFY
{/* Subheadline */}
)}
{view === "result" && loading && (
CERTIFICATE VERIFICATION
{/* Headline */}
VERIFY
CERTIFICATE
{/* Subheadline */}
Runixx Retail Summit — 2026
{/* Input area */}
setCertId(e.target.value)}
placeholder="RX-2026-0001"
onKeyDown={e => e.key === "Enter" && handleVerify()}
/>
Format: RX-YYYY-XXXX
VERIFYING CERTIFICATE
{/* Status header */}
VERIFIED
CERTIFICATE
{/* Certificate card */}
CERTIFICATE
AUTHENTIC
{/* Accent line */}
);
}
function NotFoundCard({ onBack, certId }) {
return (
CERTIFICATE
);
}
function InvalidCard({ onBack, certId }) {
return (
INVALID
);
}
{/* Watermark */}
{/* Fields */}
{[
{ label: "RECIPIENT NAME", value: cert.name },
{ label: "AWARD CATEGORY", value: cert.category },
{ label: "REGION", value: cert.region },
{ label: "CERTIFICATE ID", value: cert.id },
{ label: "ISSUE DATE", value: cert.issued },
{ label: "ISSUING AUTHORITY", value: "Runixx Info Tech Pvt. Ltd." },
].map((field, i) => (
RX26
{/* Award name */}
AWARDED FOR
{cert.award}
{field.label}
{field.value}
))}
{/* Verification seal */}
VERIFICATION STATUS
This certificate is authentic and has been issued by Runixx Info Tech Pvt. Ltd.
NOT FOUND
CERTIFICATE
NOT FOUND
{certId.toUpperCase()}
This certificate ID does not exist in the
Runixx verification database.
If you believe this is an error, contact
Runixx Info Tech Pvt. Ltd.
Runixx Info Tech Pvt. Ltd.
INVALID FORMAT
INVALID
CERTIFICATE ID
{certId.toUpperCase() || "—"}
The certificate number you entered does not match
the required format.
EXPECTED FORMAT: RX-2026-0001
Issued by Runixx Info Tech Pvt. Ltd.
All certificates follow the RX-YYYY-XXXX format.
All certificates follow the RX-YYYY-XXXX format.
Quick shop
- Choosing a selection results in a full page refresh.
- Opens in a new window.