SysAdmin FileManager

✏️ Edit: index.html

👁️ View ✕ Cancel

<!DOCTYPE html>
<html lang="en" data-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eClass — Laravel Learning Management System (LMS)</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── eClass palette: deep maroon + pink/coral accents from product poster ── */
        :root {
            --surface: #1a0a14;
            --surface-2: #2a1322;
            --surface-3: #3a1d2e;
            --ink: #f3e7ec;
            --ink-strong: #ffffff;
            --muted: #c9a3b3;
            --border: #4a253a;
            --bg-gradient: linear-gradient(120deg, #1a0a14 0%, #3a1024 50%, #1a0a14 100%);
            --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.25);
            --shadow-card-hover: 0 30px 60px -12px rgba(233, 73, 109, .25);
            --code-bg: rgba(255, 255, 255, .05);
            --brand: 233, 73, 109;
            --brand-strong: 251, 113, 133;
            --accent: 244, 114, 182;
            --success: 52, 211, 153;
            --warning: 251, 191, 36;
            --danger: 248, 113, 113;
        }

body {
            font-family: 'Space Grotesk', system-ui, sans-serif;
            color: var(--ink);
            background: var(--bg-gradient);
            background-attachment: fixed;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

a { text-decoration: none; color: inherit; }

.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; height: 80px; display: flex; align-items: center; padding: 0 clamp(16px, 4vw, 48px); transition: all .4s; }
        .navbar.scrolled { background: rgba(26, 10, 20, .85); backdrop-filter: blur(20px); border-bottom-color: var(--border); }
        .navbar-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: space-between; }
        .logo { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-strong); }
        .logo-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--accent))); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; box-shadow: 0 6px 18px rgba(var(--brand), .35); }
        .nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 36px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
        .nav-links a:hover { color: rgb(var(--brand)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; border: none; cursor: pointer; transition: all .3s; white-space: nowrap; border-radius: 14px; }
        .btn-brand { background: rgb(var(--brand)); color: #fff; font-size: 13px; padding: 13px 28px; box-shadow: 0 8px 24px rgba(var(--brand), .25); }
        .btn-brand:hover { background: rgb(var(--brand-strong)); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(var(--brand), .35); }
        .btn-ghost { background: var(--code-bg); color: var(--ink); border: 1.5px solid var(--border); font-size: 13px; padding: 13px 28px; }
        .btn-ghost:hover { border-color: rgb(var(--brand)); background: rgba(var(--brand), .08); transform: translateY(-2px); }
        .btn-lg { padding: 16px 36px; font-size: 14px; border-radius: 16px; }
        .btn-sm { padding: 9px 20px; font-size: 11px; letter-spacing: 0.04em; }

.hero { position: relative; padding: 160px 24px 80px; text-align: center; overflow: hidden; }
        .hero-blur-1 { position: absolute; top: -10%; left: -10%; width: 40%; height: 60%; background: rgba(var(--brand), .15); filter: blur(120px); border-radius: 50%; pointer-events: none; }
        .hero-blur-2 { position: absolute; bottom: -10%; right: -10%; width: 40%; height: 50%; background: rgba(var(--accent), .12); filter: blur(120px); border-radius: 50%; pointer-events: none; }
        .hero-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
        .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 100px; border: 1px solid rgba(var(--brand), .25); background: rgba(var(--brand), .08); font-size: 12px; font-weight: 600; color: rgb(var(--brand-strong)); margin-bottom: 32px; }
        .badge svg { width: 16px; height: 16px; }
        .hero h1 { font-size: clamp(42px, 6vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; margin-bottom: 24px; color: var(--ink-strong); }
        .gradient-text { background: linear-gradient(135deg, rgb(var(--brand-strong)), rgb(var(--accent)), #fda4af, rgb(var(--brand-strong))); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; animation: shimmer 4s linear infinite; }
        @keyframes shimmer { to { background-position: 200% center; } }
        .hero-desc { font-size: clamp(16px, 1.8vw, 20px); color: var(--muted); max-width: 660px; margin: 0 auto 40px; line-height: 1.7; }
        .hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
        .trust-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px; margin-top: 48px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
        .trust-item { display: flex; align-items: center; gap: 8px; }
        .trust-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--brand), .12); display: flex; align-items: center; justify-content: center; }
        .trust-check svg { width: 10px; height: 10px; color: rgb(var(--brand-strong)); }

.stats-section { padding: 64px 24px; display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; }
        .stat-block { text-align: center; padding: 0 40px; }
        .stat-divider { width: 1px; height: 48px; background: var(--border); }
        .stat-value { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink-strong); }
        .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-top: 4px; }

.section { padding: 80px 24px; position: relative; }
        .container { max-width: 1100px; margin: 0 auto; }
        .section-head { text-align: center; margin-bottom: 64px; }
        .section-head h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; color: var(--ink-strong); }
        .section-head p { font-size: 18px; color: var(--muted); max-width: 620px; margin: 0 auto; line-height: 1.65; }

.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
        .demo-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 28px; transition: all .3s; }
        .demo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgb(var(--brand)); }
        .demo-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; color: var(--ink-strong); }
        .demo-card .creds { font-size: 14px; color: var(--muted); margin-bottom: 20px; line-height: 2; }
        .demo-card .creds b { color: var(--ink-strong); }
        .demo-card .btn-sm { width: 100%; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .f-card { position: relative; padding: 32px 28px; border-radius: 24px; border: 1px solid var(--border); background: var(--surface-2); transition: all .4s; overflow: hidden; }
        .f-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--accent))); border-radius: 24px 24px 0 0; opacity: 0; transition: opacity .4s; }
        .f-card:hover::before { opacity: 1; }
        .f-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: rgba(var(--brand), .35); }
        .f-icon { width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: rgba(var(--brand), .1); color: rgb(var(--brand-strong)); border: 1px solid rgba(var(--brand), .15); transition: transform .4s; }
        .f-card:hover .f-icon { transform: scale(1.1); }
        .f-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; color: var(--ink-strong); }
        .f-card p { font-size: 14px; color: var(--muted); line-height: 1.65; }
        .new-badge { display: inline-block; padding: 2px 8px; border-radius: 6px; background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--accent))); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; vertical-align: middle; margin-left: 8px; text-transform: uppercase; }

.role-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; flex-wrap: wrap; }
        .role-tab { padding: 10px 22px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; transition: all .25s; }
        .role-tab.active { background: rgb(var(--brand)); color: #fff; border-color: rgb(var(--brand)); box-shadow: 0 8px 20px rgba(var(--brand), .3); }
        .role-tab:hover:not(.active) { color: var(--ink-strong); border-color: rgb(var(--brand)); }
        .role-panel { display: none; }
        .role-panel.active { display: block; animation: fadeIn .4s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hiw-section { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
        .hiw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
        .hiw-step { text-align: center; }
        .hiw-icon-wrap { width: 96px; height: 96px; border-radius: 28px; background: var(--surface); border: 1px solid rgba(var(--brand), .2); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; position: relative; box-shadow: var(--shadow-card); transition: all .4s; }
        .hiw-step:hover .hiw-icon-wrap { transform: scale(1.06); border-color: rgba(var(--brand), .5); box-shadow: 0 20px 50px -12px rgba(var(--brand), .25); }
        .hiw-icon-wrap svg { width: 38px; height: 38px; color: rgb(var(--brand-strong)); }
        .hiw-num { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 12px; background: rgb(var(--brand)); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 3px solid var(--surface); box-shadow: 0 4px 12px rgba(var(--brand), .4); }
        .hiw-step h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; color: var(--ink-strong); }
        .hiw-step p { font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 220px; margin: 0 auto; }

.pay-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 22px 40px; text-align: center; font-weight: 800; color: var(--ink-strong); transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; justify-content: center; font-size: 16px; white-space: nowrap; box-shadow: var(--shadow-card); }
        .pay-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 30px 60px -12px rgba(var(--brand), .25); border-color: rgb(var(--brand)); }
        .pay-track { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); margin: 0 -24px; padding: 40px 0; }
        .pay-marquee { display: flex; gap: 20px; animation: scroll-x 80s linear infinite; width: max-content; }
        @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .pay-marquee:hover { animation-play-state: paused; }

.cta-section { position: relative; overflow: hidden; text-align: center; padding: 100px 24px; background: var(--surface); border-top: 1px solid var(--border); }
        .cta-blur { position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 800px; height: 300px; background: rgba(var(--brand), .12); filter: blur(120px); border-radius: 50%; pointer-events: none; }
        .cta-inner { position: relative; z-index: 2; }
        .cta-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(var(--brand), .25); background: rgba(var(--brand), .08); font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 28px; }
        .cta-section h2 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px; color: var(--ink-strong); }
        .cta-section p { color: var(--muted); font-size: 18px; max-width: 560px; margin: 0 auto 40px; line-height: 1.65; }
        .cta-sub { margin-top: 28px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); opacity: 0.65; }

.footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: 36px 24px; text-align: center; }
        .footer p { font-size: 12px; color: var(--muted); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
        .reveal.show { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } .reveal-delay-4 { transition-delay: .4s; } .reveal-delay-5 { transition-delay: .5s; }

@media (max-width: 1024px) { .features-grid, .demo-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 768px) { .nav-links { display: none; } .hero { padding: 130px 20px 60px; } .features-grid, .demo-grid { grid-template-columns: 1fr; } .hiw-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .stats-section { gap: 24px; } .stat-divider { display: none; } }
        @media (max-width: 480px) { .hiw-grid { grid-template-columns: 1fr; } }
    </style>
</head>

<body>

<nav class="navbar" id="navbar">
        <div class="navbar-inner">
            <a href="index.html" class="logo" title="eClass">
                <img src="https://eclass.mediacity.co.in/demo2/public/images/logo/footer_logo69bbd7d3dab92.png" alt="eClass" width="50%">
            </a>
            <div class="nav-links">
                <a href="#features">Features</a>
                <a href="#roles">Who It's For</a>
                <a href="#how-it-works">How It Works</a>
                <a href="#payments">Payments</a>
                <a href="#demo">Demo</a>
            </div>
            <div style="display: flex; gap: 10px; align-items: center;">
                <a href="https://eclass.mediacity.co.in/public/" target="_blank" class="btn btn-brand btn-sm">Live Preview</a>
                <a href="https://codecanyon.net/item/eclass-learning-management-system/25613271" target="_blank" class="btn btn-ghost btn-sm">Buy Now</a>
                <a href="https://codecanyon.net/cart/configure_before_adding/25613271?license=regular" target="_blank" class="btn btn-brand btn-sm">Quick Buy</a>
            </div>
        </div>
    </nav>

<section class="hero">
        <div class="hero-blur-1"></div>
        <div class="hero-blur-2"></div>
        <div class="hero-inner">
            <div class="badge reveal">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
                </svg>
                Updated with OpenAI — Laravel 10 LMS Platform
            </div>
            <h1 class="reveal reveal-delay-1">
                Empowering Learning,<br>
                <span class="gradient-text">Transforming</span> Futures.
            </h1>
            <p class="hero-desc reveal reveal-delay-2">
                eClass is a complete Laravel-based Learning Management System for selling courses, running live classes, and growing your online education brand. Built for instructors, institutes, and global course marketplaces.
            </p>
            <div class="hero-actions reveal reveal-delay-3">
                <a href="https://eclass.mediacity.co.in/public/" target="_blank" class="btn btn-brand btn-lg">
                    Live Preview
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
                <a href="#features" class="btn btn-ghost btn-lg">Explore Features</a>
                <a href="https://codecanyon.net/item/eclass-learning-management-system/25613271" target="_blank" class="btn btn-brand btn-lg" style="background: rgb(var(--accent)); box-shadow: 0 8px 24px rgba(var(--accent), .3);">Buy Now</a>
                <a href="https://codecanyon.net/cart/configure_before_adding/25613271?license=regular" target="_blank" class="btn btn-brand btn-lg">Quick Buy</a>
            </div>
        </div>
        <div class="trust-bar reveal reveal-delay-5">
            <div class="trust-item"><div class="trust-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m9 12 2 2 4-4"/></svg></div>AI Tool (OpenAI)</div>
            <div class="trust-item"><div class="trust-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m9 12 2 2 4-4"/></svg></div>Live Meetings</div>
            <div class="trust-item"><div class="trust-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m9 12 2 2 4-4"/></svg></div>20+ Payment Gateways</div>
            <div class="trust-item"><div class="trust-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m9 12 2 2 4-4"/></svg></div>PWA Ready</div>
            <div class="trust-item"><div class="trust-check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m9 12 2 2 4-4"/></svg></div>RTL &amp; Multilingual</div>
        </div>
    </section>

<div class="stats-section">
        <div class="stat-block reveal"><div class="stat-value">3</div><div class="stat-label">User Roles</div></div>
        <div class="stat-divider"></div>
        <div class="stat-block reveal reveal-delay-1"><div class="stat-value">4</div><div class="stat-label">Meeting Integrations</div></div>
        <div class="stat-divider"></div>
        <div class="stat-block reveal reveal-delay-2"><div class="stat-value">20+</div><div class="stat-label">Payment Gateways</div></div>
        <div class="stat-divider"></div>
        <div class="stat-block reveal reveal-delay-3"><div class="stat-value">8+</div><div class="stat-label">Video Sources</div></div>
        <div class="stat-divider"></div>
        <div class="stat-block reveal reveal-delay-4"><div class="stat-value">PHP 8.2</div><div class="stat-label">Laravel 10</div></div>
    </div>

<section class="section" id="demo" style="background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
        <div class="container">
            <div class="section-head reveal">
                <h2>Try the <span style="color:rgb(var(--brand-strong));">Live Demo</span></h2>
                <p>Three role logins to explore the complete eClass experience — admin control, instructor workflow, and student learning.</p>
            </div>
            <div class="demo-grid">
                <div class="demo-card reveal">
                    <h4>
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:rgb(var(--brand-strong))"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                        Admin
                    </h4>
                    <div class="creds"><b>Email:</b> admin@mediacity.co.in<br><b>Password:</b> 123456</div>
                    <a href="https://eclass.mediacity.co.in/public/login" target="_blank" class="btn btn-brand btn-sm">Login as Admin</a>
                </div>
                <div class="demo-card reveal reveal-delay-1">
                    <h4>
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:rgb(var(--accent))"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                        Instructor
                    </h4>
                    <div class="creds"><b>Email:</b> instructor@mediacity.co.in<br><b>Password:</b> 123456</div>
                    <a href="https://eclass.mediacity.co.in/public/login" target="_blank" class="btn btn-ghost btn-sm">Login as Instructor</a>
                </div>
                <div class="demo-card reveal reveal-delay-2">
                    <h4>
                        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:rgb(var(--brand-strong))"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                        Student
                    </h4>
                    <div class="creds"><b>Email:</b> user@mediacity.co.in<br><b>Password:</b> 123456</div>
                    <a href="https://eclass.mediacity.co.in/public/login" target="_blank" class="btn btn-ghost btn-sm">Login as Student</a>
                </div>
            </div>
            <p style="text-align:center; font-size:12px; color:var(--muted); margin-top:24px; opacity:.7;">Note: some features are disabled in the demo for security &mdash; this applies to the demo only.</p>
        </div>
    </section>

<section class="section" id="roles">
        <div class="container">
            <div class="section-head reveal">
                <h2>Built for Every <span style="color:rgb(var(--brand-strong));font-style:italic;">Role.</span></h2>
                <p>Students learn, instructors teach, admins run the business — eClass ships a tailored toolkit for each.</p>
            </div>

<div class="role-tabs reveal">
                <button class="role-tab active" data-role="students">For Students</button>
                <button class="role-tab" data-role="instructors">For Instructors</button>
                <button class="role-tab" data-role="admin">For Admin</button>
            </div>

<div class="role-panel active" data-role="students">
                <div class="features-grid">
                    <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></div><h3>Student Dashboard</h3><p>Course progress, certificates, leaderboard, wishlist, and a personalised learning hub.</p></div>
                    <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg></div><h3>Live Classes</h3><p>Join Zoom, Google Meet, Jitsi, and BigBlueButton sessions directly from the course.</p></div>
                    <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><h3>Video Resume Play</h3><p>Resume where you left off, with playback rate, loop, shuffle, and subtitle support.</p></div>
                    <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div><h3>Downloadable Resources</h3><p>Download PDFs, zips, videos, and images for offline study and revision.</p></div>
                    <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg></div><h3>Q&amp;A on Courses</h3><p>Ask the instructor, follow them, and join Course Reviews with likes / dislikes.</p></div>
                    <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div><h3>Quizzes &amp; Test Series</h3><p>Subjective + objective quizzes, previous papers, and certificate downloads on completion.</p></div>
                    <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg></div><h3>Gift Course / Buy Now</h3><p>Gift a course to a friend or buy instantly with the one-click Buy Now option.</p></div>
                    <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div><h3>Device Control</h3><p>Manage logged-in devices to keep your course content safe and personal.</p></div>
                    <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg></div><h3>Social Login</h3><p>Sign in with Google, Facebook, LinkedIn, Twitter, Amazon, or GitLab.</p></div>
                </div>
            </div>

<div class="role-panel" data-role="instructors">
                <div class="features-grid">
                    <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div><h3>Course Builder</h3><p>Create, edit, and reorder chapters with drag-and-drop. Drip-content scheduling included.</p></div>
                    <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div><h3>Instructor Payout</h3><p>Configurable payout structure with admin approval and earning reports.</p></div>
                    <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><polyline points="16 3 12 7 8 3"/></svg></div><h3>Become an Instructor</h3><p>Plan-based instructor onboarding via PayPal &amp; PayTM, with vacation mode.</p></div>
                    <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div><h3>Messaging &amp; Appointments</h3><p>Direct chat, course Q&amp;A, and appointment scheduling with students.</p></div>
                    <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div><h3>Assignment Manager</h3><p>Create, grade, and feedback on assignments inside the course flow.</p></div>
                    <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg></div><h3>Hide User Identity</h3><p>Option to anonymise students from instructor view for privacy-first institutes.</p></div>
                </div>
            </div>

<div class="role-panel" data-role="admin">
                <div class="features-grid">
                    <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></div><h3>Marketing Dashboard <span class="new-badge">AI</span></h3><p>Marketing dashboard with OpenAI tools, SEO directory, and Google Tag Manager support.</p></div>
                    <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg></div><h3>Ultimate Video Player</h3><p>MP4, HLS, m3u8, WebM, plus YouTube, Vimeo, S3, Google Drive, Dropbox &amp; Cloudinary.</p></div>
                    <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div><h3>Big Blue Button + Zoom</h3><p>Zoom, Google Meet, Jitsi, and BigBlueButton meeting integrations for live classes.</p></div>
                    <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div><h3>Mail Settings &amp; Twilio SMS</h3><p>SMTP + Twilio for enrollment confirmation SMS and OTP login.</p></div>
                    <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33"/></svg></div><h3>Coupon &amp; Wallet</h3><p>Wallet topup (Stripe / PayPal / PayTM), coupon manager, and flash deals.</p></div>
                    <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div><h3>2FA &amp; IP Block</h3><p>Google two-factor authentication, IP block list, screen capture disabled, right-click off.</p></div>
                    <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg></div><h3>Translator &amp; RTL</h3><p>Multilingual admin translator, RTL support, and Geo location detection.</p></div>
                    <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-2 14a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2L5 6"/></svg></div><h3>Bulk Import</h3><p>Bulk import for users, institutes, and jobs &mdash; cut down setup time at scale.</p></div>
                    <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div><h3>SEO + Sitemap</h3><p>Slug auto-generated, sitemap, Facebook Pixel, Google AdSense, and AdSense management.</p></div>
                </div>
            </div>
        </div>
    </section>

<section class="section" id="features" style="background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
        <div class="container">
            <div class="section-head reveal">
                <h2>Player &amp; Platform <span style="color:rgb(var(--brand-strong));font-style:italic;">Highlights.</span></h2>
                <p>The features that separate a serious LMS from a basic course catalogue.</p>
            </div>
            <div class="features-grid">
                <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg></div><h3>8+ Video Sources</h3><p>YouTube, Vimeo, AWS S3, Digital Ocean, Google Drive, Dropbox, Cloudinary &mdash; one unified player.</p></div>
                <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg></div><h3>Live Subtitles</h3><p>Subtitle file support (.srt &amp; .txt) with custom player subtitle rendering.</p></div>
                <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg></div><h3>Drip Content</h3><p>Schedule chapters and classes to unlock progressively over time.</p></div>
                <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></div><h3>Bundle Courses</h3><p>Sell bundles with Stripe subscription model and coupon support.</p></div>
                <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></div><h3>PWA Ready</h3><p>Progressive Web App with offline lazy-load, smooth transitions, and mobile-app feel.</p></div>
                <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></div><h3>OTP Login</h3><p>OTP login powered by Twilio + 2FA, plus right-click and inspect-element disabled.</p></div>
                <div class="f-card reveal"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div><h3>Affiliate / Referral</h3><p>Built-in referral commission system to grow word-of-mouth signups.</p></div>
                <div class="f-card reveal reveal-delay-1"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5"/></svg></div><h3>Course Certificate</h3><p>Auto-generated PDF certificates with custom branding on course completion.</p></div>
                <div class="f-card reveal reveal-delay-2"><div class="f-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h18v18H3z"/><path d="M3 9h18"/><path d="M9 21V9"/></svg></div><h3>Noticeboard</h3><p>Site-wide announcements + question bank to power your exams and prep work.</p></div>
            </div>
        </div>
    </section>

<section class="section hiw-section" id="how-it-works">
        <div class="container">
            <div class="section-head reveal">
                <h2>Launch Your Academy<br><span style="color:rgb(var(--brand-strong));font-style:italic;">In Four Steps.</span></h2>
                <p>From zip file to live courseware in minutes.</p>
            </div>
            <div class="hiw-grid">
                <div class="hiw-step reveal">
                    <div class="hiw-icon-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg><div class="hiw-num">1</div></div>
                    <h3>Upload Source</h3><p>Drop the eClass files onto your hosting via FTP or File Manager.</p>
                </div>
                <div class="hiw-step reveal reveal-delay-1">
                    <div class="hiw-icon-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg><div class="hiw-num">2</div></div>
                    <h3>Create Database</h3><p>Spin up a MySQL or MariaDB database from cPanel or Plesk.</p>
                </div>
                <div class="hiw-step reveal reveal-delay-2">
                    <div class="hiw-icon-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg><div class="hiw-num">3</div></div>
                    <h3>Run Installer</h3><p>Visit your domain &mdash; the web installer takes care of the rest.</p>
                </div>
                <div class="hiw-step reveal reveal-delay-3">
                    <div class="hiw-icon-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg><div class="hiw-num">4</div></div>
                    <h3>Publish Courses</h3><p>Add categories, instructors, plans &mdash; and start selling.</p>
                </div>
            </div>
        </div>
    </section>

<section class="cta-section">
        <div class="cta-blur"></div>
        <div class="cta-inner">
            <div class="cta-badge reveal">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/></svg>
                Top-Rated Education Product
            </div>
            <h2 class="reveal reveal-delay-1">Modernize Your <span class="gradient-text">Classroom.</span></h2>
            <p class="reveal reveal-delay-2">A complete LMS for online teaching, live classes, certifications, and global course sales &mdash; on Laravel 10.</p>
            <div class="reveal reveal-delay-3" style="display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;">
                <a href="https://eclass.mediacity.co.in/public/" target="_blank" class="btn btn-brand btn-lg">Live Preview
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
                </a>
                <a href="https://codecanyon.net/item/eclass-learning-management-system/25613271" target="_blank" class="btn btn-ghost btn-lg">Buy Now on CodeCanyon</a>
                <a href="https://codecanyon.net/cart/configure_before_adding/25613271?license=regular" target="_blank" class="btn btn-brand btn-lg">Quick Buy</a>
            </div>
            <div class="cta-sub reveal reveal-delay-4">PHP 8.2.4 &bull; Laravel 10 &bull; MySQL 5.7 / MariaDB 10.4</div>
        </div>
    </section>

<section class="section" id="payments" style="background: var(--surface-2); border-top: 1px solid var(--border);">
        <div class="container">
            <div class="section-head reveal">
                <h2>Accept Payments <span style="color:rgb(var(--brand-strong));">Worldwide.</span></h2>
                <p>Built-in support for 20+ global, regional, and local payment gateways.</p>
            </div>
            <div class="pay-track">
                <div class="pay-marquee">
                    <div class="pay-card">Stripe</div><div class="pay-card">PayPal</div><div class="pay-card">Paystack</div><div class="pay-card">Mollie</div><div class="pay-card">Skrill</div><div class="pay-card">Rave</div><div class="pay-card">Braintree</div><div class="pay-card">Payflexi</div><div class="pay-card">Razorpay</div><div class="pay-card">Instamojo</div><div class="pay-card">PayTM</div><div class="pay-card">PayU Money</div><div class="pay-card">Cashfree</div><div class="pay-card">Omise</div><div class="pay-card">SSLCommerze</div><div class="pay-card">AamarPay</div><div class="pay-card">Iyzico</div><div class="pay-card">PayHere</div><div class="pay-card">Bank Transfer</div>
                    <div class="pay-card">Stripe</div><div class="pay-card">PayPal</div><div class="pay-card">Paystack</div><div class="pay-card">Mollie</div><div class="pay-card">Skrill</div><div class="pay-card">Rave</div><div class="pay-card">Braintree</div><div class="pay-card">Payflexi</div><div class="pay-card">Razorpay</div><div class="pay-card">Instamojo</div><div class="pay-card">PayTM</div><div class="pay-card">PayU Money</div><div class="pay-card">Cashfree</div><div class="pay-card">Omise</div><div class="pay-card">SSLCommerze</div><div class="pay-card">AamarPay</div><div class="pay-card">Iyzico</div><div class="pay-card">PayHere</div><div class="pay-card">Bank Transfer</div>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <p>&copy; 2026 <a href="https://mediacity.co.in/" target="_blank" title="Media City">Media City | eClass Learning Management System | All Rights Reserved.</p>
    </footer>

// Role tabs
        document.querySelectorAll('.role-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                const role = tab.dataset.role;
                document.querySelectorAll('.role-tab').forEach(t => t.classList.toggle('active', t.dataset.role === role));
                document.querySelectorAll('.role-panel').forEach(p => p.classList.toggle('active', p.dataset.role === role));
            });
        });
    </script>
</body>
</html>

📁 SysAdmin FileManager

✏️ Edit: index.html

🗑️ Confirm Delete

📝 Rename