Embed

<div style="text-align:center; margin-top:30px; font-family:'Poppins',sans-serif;">
  <h2 id="welcome-text" style="color:#333; font-weight:600; margin-bottom:10px;">
    Loading your profile...
  </h2>

  <button id="logout-btn" 
  style="
    background: linear-gradient(90deg,#ff6ec4,#7873f5);
    border:none;
    color:white;
    font-weight:600;
    border-radius:6px;
    padding:8px 16px;
    cursor:pointer;
    font-size:14px;
  ">
  Logout
  </button>

  <p id="session-timer" style="color:#777; font-size:13px; margin-top:8px;">
    Session active for: <span id="timer">15:00</span> minutes
  </p>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const userId = localStorage.getItem("MTA_USER_ID");
  const welcome = document.getElementById("welcome-text");
  const logoutBtn = document.getElementById("logout-btn");
  const timerEl = document.getElementById("timer");

  // Display the user ID
  if (userId && welcome) {
    welcome.innerHTML = `Welcome back, <strong>${userId}</strong> 👋`;
  } else {
    welcome.innerHTML = "Welcome to Mind-Tech Academy Dashboard";
  }

  // Logout button function
  logoutBtn.addEventListener("click", () => {
    localStorage.removeItem("MTA_USER_ID");
    alert("You have been logged out.");
    window.location.href = "/login";
  });

  // 15-minute session timer (auto logout)
  let timeLeft = 15 * 60; // 15 minutes in seconds

  const timerInterval = setInterval(() => {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    timerEl.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
    timeLeft--;

    if (timeLeft < 0) {
      clearInterval(timerInterval);
      alert("Session expired. Please log in again.");
      localStorage.removeItem("MTA_USER_ID");
      window.location.href = "/login";
    }
  }, 1000);
});
</script>

<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>
    .mta-wrap{max-width:1180px;margin:0 auto;padding:40px 20px;box-sizing:border-box;}
    header.mta-top{display:flex;justify-content:space-between;align-items:center;
                   flex-wrap:wrap;gap:10px;margin-bottom:30px;}
    .mta-logo{font-weight:900;font-size:1.4rem;background:linear-gradient(90deg,#7873f5,#ff6ec4);
              -webkit-background-clip:text;-webkit-text-fill-color:transparent;}
    .mta-user{font-weight:600;color:#475569;font-size:.95rem;}

    .mta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
    .mta-card{background:rgba(255,255,255,.85);border-radius:16px;
              border:1px solid rgba(0,0,0,.06);
              box-shadow:0 6px 18px rgba(0,0,0,.06);
              padding:24px;backdrop-filter:blur(8px);
              transition:.25s;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;}
    .mta-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12);}
    .mta-card h3{margin:0 0 10px;font-size:1.2rem;font-weight:800;color:#1e293b;}
    .mta-card p{margin:0;font-size:.95rem;line-height:1.55;color:#475569;}
    .mta-progress{height:6px;background:#e2e8f0;border-radius:6px;overflow:hidden;margin-top:14px;}
    .mta-bar{height:6px;background:linear-gradient(90deg,#ff6ec4,#7873f5);width:0%;transition:width 1s ease;}

    .mta-foot{text-align:center;padding:40px 0 20px;font-size:.85rem;color:#94a3b8;}
    .logout-btn{background:#222;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer;font-weight:600;margin-top:40px;}
    @media(max-width:600px){.mta-card{padding:20px;}.mta-card h3{font-size:1.05rem;}}
  </style>

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

    <div class="mta-grid">
      <div class="mta-card" data-progress="15">
        <h3>Neuro-Behavioral Mastery</h3>
        <p>Rewire focus, habits & emotions for high-performance clarity.</p>
        <div class="mta-progress"><div class="mta-bar"></div></div>
      </div>
      <div class="mta-card" data-progress="30">
        <h3>AI Tools & Automation</h3>
        <p>Practical AI for business and creative automation workflows.</p>
        <div class="mta-progress"><div class="mta-bar"></div></div>
      </div>
      <div class="mta-card" data-progress="10">
        <h3>Digital Marketing 360°</h3>
        <p>Campaigns, analytics & branding for global audience growth.</p>
        <div class="mta-progress"><div class="mta-bar"></div></div>
      </div>
      <div class="mta-card" data-progress="5">
        <h3>Entrepreneurship Labs</h3>
        <p>Start-up design, funding and growth simulation sessions.</p>
        <div class="mta-progress"><div class="mta-bar"></div></div>
      </div>
      <div class="mta-card" data-progress="0">
        <h3>Relocation & Global Culture</h3>
        <p>International readiness — visa, living & career navigation.</p>
        <div class="mta-progress"><div class="mta-bar"></div></div>
      </div>
      <div class="mta-card" data-progress="0">
        <h3>Mind Mastery Trainer AI</h3>
        <p>Personal AI Coach for daily growth, reflection and alignment.</p>
        <div class="mta-progress"><div class="mta-bar"></div></div>
      </div>
    </div>

    <div style="text-align:center;">
      <button class="logout-btn" id="logoutBtn">Logout</button>
    </div>
  </div>

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

  <script>
    // Animate progress bars
    document.querySelectorAll('.mta-card').forEach(c=>{
      const p=c.dataset.progress||0;
      setTimeout(()=>{c.querySelector('.mta-bar').style.width=p+'%';},400);
    });

    // Load MTID
    const user=localStorage.getItem('MTA_USER_ID');
    if(user) document.getElementById('user-id').textContent='Welcome '+user;

    // Logout button
    document.getElementById('logoutBtn').onclick=()=>{
      localStorage.removeItem('MTA_USER_ID');
      window.location.href='/login';
    };
  </script>
</section>