Embed

<section id="mta-dashboard"
  style="font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
         background:#fff;min-height:100vh;color:#0f172a;margin:0;">
  <style>
    .wrap{max-width:1180px;margin:0 auto;padding:40px 20px;box-sizing:border-box;}
    header.top{display:flex;justify-content:space-between;align-items:center;
               gap:10px;flex-wrap:wrap;margin-bottom:26px;}
    .logo{font-weight:900;font-size:1.5rem;
          background:linear-gradient(90deg,#7873f5,#ff6ec4);
          -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
    .user{font-weight:600;color:#475569;font-size:.95rem;}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
    .card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;
          box-shadow:0 6px 18px rgba(0,0,0,.06);
          padding:20px;display:flex;flex-direction:column;gap:10px;}
    .title{margin:0;font-size:1.12rem;font-weight:800;color:#1e293b;}
    .desc{margin:0;color:#475569;line-height:1.55;font-size:.96rem;}
    .row{display:flex;align-items:center;justify-content:space-between;
         gap:10px;flex-wrap:wrap;}
    .pill{font-weight:700;color:#64748b;}
    .start{margin-top:2px;padding:8px 14px;
           background:linear-gradient(90deg,#ff6ec4,#7873f5);
           border:none;border-radius:10px;color:#fff;cursor:pointer;font-weight:700;}
    .locked{margin-top:2px;padding:8px 14px;background:#e2e8f0;border:none;
            border-radius:10px;color:#64748b;font-weight:700;cursor:not-allowed;}
    .bar{height:6px;background:#e2e8f0;border-radius:999px;overflow:hidden;}
    .bar>i{display:block;height:6px;width:0;
           background:linear-gradient(90deg,#ff6ec4,#7873f5);transition:width .6s;}
    .footer{color:#94a3b8;text-align:center;padding:36px 0 18px;font-size:.85rem;}
    .logout{background:#111827;color:#fff;padding:8px 16px;border:none;
            border-radius:8px;font-weight:700;cursor:pointer;}
    #session-timer{color:#6b7280;font-size:13px;margin-top:6px;text-align:center;}
  </style>

  <div class="wrap">
    <header class="top">
      <div class="logo">Mind-Tech Academy</div>
      <div class="user" id="user-id">Welcome</div>
    </header>

    <div class="grid" id="modulesGrid"></div>

    <div style="text-align:center;margin-top:28px">
      <button class="logout" id="logoutBtn">Logout</button>
      <p id="session-timer">Session active for: <span id="timer">15:00</span> minutes</p>
    </div>
  </div>

  <footer class="footer">© 2025 Mind-Tech Academy · All Rights Reserved</footer>

  <script>
  (function(){
    const TRAINER_PATH = "/ai-trainer"; // your existing Trainer page
    const MODULES = [
      { id:"neuro", name:"Neuro-Behavioral Mastery",
        desc:"Rewire focus, habits & emotions for high-performance clarity.", weeks:2 },
      { id:"ai", name:"AI Tools & Automation",
        desc:"Practical AI for business and creative workflows.", weeks:2 },
      { id:"mkt", name:"Digital Marketing 360°",
        desc:"Campaigns, analytics & branding for global audience growth.", weeks:2 },
      { id:"ent", name:"Entrepreneurship Labs",
        desc:"Start-up design, funding and growth simulation sessions.", weeks:2 },
      { id:"cult", name:"Relocation & Global Culture",
        desc:"International readiness — visa, living & career navigation.", weeks:2 },
      { id:"mind", name:"Mind Mastery Trainer AI",
        desc:"Personal AI coach for daily growth and alignment.", weeks:2 }
    ];

    // ===== user info =====
    const mtid = localStorage.getItem("MTA_USER_ID");
    document.getElementById("user-id").textContent =
      mtid ? ("Welcome " + mtid) : "Welcome Student";

    // ===== helpers =====
    const done = id => localStorage.getItem("MTA_DONE:"+id)==="true";
    const progress = id => Number(localStorage.getItem("MTA_PROGRESS:"+id)||0);
    const unlocked = i => i===0 || done(MODULES[i-1].id);

    // ===== render =====
    const grid=document.getElementById("modulesGrid");
    grid.innerHTML="";
    MODULES.forEach((m,i)=>{
      const card=document.createElement("article");card.className="card";
      card.innerHTML=`<h3 class="title">${m.name}</h3>
                      <p class="desc">${m.desc}</p>`;
      const row=document.createElement("div");row.className="row";
      row.innerHTML=`<div class="pill">${m.weeks} weeks</div>`;
      const btn=document.createElement("button");
      if(unlocked(i)){
        btn.className="start";btn.textContent="Start Module";
        btn.onclick=()=>{
          localStorage.setItem("MTA_CURRENT_MODULE",m.id);
          window.location.href=`${TRAINER_PATH}?module=${encodeURIComponent(m.id)}`;
        };
      } else {
        btn.className="locked";btn.textContent="Locked";
        btn.title="Complete previous module to unlock.";
      }
      row.appendChild(btn);card.appendChild(row);
      const bar=document.createElement("div");bar.className="bar";
      const fill=document.createElement("i");fill.style.width=progress(m.id)+"%";
      bar.appendChild(fill);card.appendChild(bar);
      grid.appendChild(card);
    });

    // ===== logout & timer =====
    const logout=document.getElementById("logoutBtn"),
          timerEl=document.getElementById("timer");
    logout.onclick=()=>{
      localStorage.removeItem("MTA_USER_ID");
      alert("You have been logged out.");
      window.location.href="/login";
    };
    let left=15*60;
    const t=setInterval(()=>{
      const m=Math.floor(left/60),s=left%60;
      timerEl.textContent=`${m}:${s<10?"0"+s:s}`;
      if(--left<0){
        clearInterval(t);
        alert("Session expired. Please log in again.");
        localStorage.removeItem("MTA_USER_ID");
        window.location.href="/login";
      }
    },1000);
  })();
  </script>
</section>