dashboard.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>DCHA STUDENT DASHBOARD</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root{
      --bg:#eef3f6;
      --card:#ffffff; 
      --muted:#98a0ad;
      --accent:#6c63ff;
      --gold:#d9b56a;
      --shadow: 0 6px 18px rgba(24,39,75,0.08);
      --soft-shadow: 0 10px 30px rgba(22,35,65,0.06);
      --radius:14px;
      --radius-sm:10px;
    }
    *{box-sizing:border-box}
    html,body{height:100%;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;color:#1f2a37;background:var(--bg);margin:0}

    /* Layout */
    .app{display:flex;min-height:100vh;padding:28px}

    /* Sidebar */
    .sidebar{width:260px;background:linear-gradient(180deg,#fffaf0,#fbf6f2);border-radius:16px;padding:26px;box-shadow:var(--soft-shadow);display:flex;flex-direction:column;gap:22px}
    .profile-blob{display:flex;align-items:center;gap:14px}
    .avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(180deg,#e6e9ef,#f7f8fb);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,0.06);}
    .avatar svg{opacity:.25}
    .welcome{background:linear-gradient(180deg,#fff,#fff);padding:12px;border-radius:12px;box-shadow:var(--shadow);}
    .welcome small{display:block;color:var(--muted);font-size:12px}
    .menu{margin-top:6px}
    .menu .item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;color:#6b5f4a;cursor:pointer}
    .menu .item.active{background:linear-gradient(90deg,#fff7ea,#fff9f4);box-shadow:inset 0 2px 6px rgba(0,0,0,0.02);}
    .menu .item svg{width:18px;height:18px;opacity:.9}

    /* Main content */
    .main{flex:1;margin-left:26px}
    .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
    .top-left{display:flex;align-items:center;gap:12px}
    .hamburger{width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer}
    .status-pill{display:flex;align-items:center;gap:8px;background:#fff;padding:8px 12px;border-radius:999px;box-shadow:var(--shadow)}
    .status-dot{width:10px;height:10px;border-radius:50%;background:#7ce08f;box-shadow:0 0 10px rgba(124,224,143,0.18)}

    .hero{background:linear-gradient(90deg,#5f65e6,#7c59c9);padding:28px;border-radius:10px;color:#fff;margin-bottom:18px;box-shadow:var(--soft-shadow)}
    .hero h1{margin:0;font-size:34px;font-weight:700}
    .hero p{margin:6px 0 0;color:rgba(255,255,255,0.9)}

        .menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
    }

    .menu .item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    text-decoration: none;      /* removes underline */
    color: #444;
    font-size: 14px;
    border-radius: 8px;
    transition: background 0.25s ease, color 0.25s ease;
    }

    .menu .item:hover {
    background: #f4eddc;        /* soft hover background */
    color: #000;
    }

    .menu .active {
    background: #e6d9b4;        /* highlight active item */
    color: #000;
    font-weight: 600;
    }


    /* Page cards row */
    .row{display:flex;gap:20px}
    .card{background:var(--card);border-radius:14px;padding:22px;box-shadow:var(--shadow);flex:1}
    .card.small{flex:0 0 330px}

    /* Profile card */
    .profile-card{display:flex;flex-direction:column;gap:14px}
    .profile-card .avatar-lg{width:110px;height:110px;border-radius:50%;background:linear-gradient(180deg,#f1f3f7,#ffffff);display:flex;align-items:center;justify-content:center;margin:auto;position:relative}
    .camera-btn{position:absolute;right:6px;bottom:6px;width:44px;height:44px;border-radius:12px;background:linear-gradient(180deg,#ffd96b,#ffd86b);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(213,166,74,0.25);cursor:pointer}
    .field{margin-top:8px}
    .label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
    .input{background:#fbfdff;border-radius:10px;padding:10px 12px;border:1px solid rgba(42,56,72,0.03);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6)}

    /* Application details card */
    .details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .detail-item{display:flex;flex-direction:column}
    .meta-icon{width:18px;height:18px;opacity:.9;margin-right:8px}

    /* status chip */
    .status-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:linear-gradient(90deg,#fff,#fff);box-shadow:var(--shadow);font-weight:600}
    .status-chip .icon{width:28px;height:28px;border-radius:999px;background:linear-gradient(180deg,#ffd96b,#f9d66a);display:flex;align-items:center;justify-content:center}

    .btn-link {
  display: inline-block;
  padding: 10px 18px;
  background-color: #2b3949;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}
.btn-link:hover {
  background-color: #1f2a36;
}

    /* small utilities */
    .muted{color:var(--muted)}
    .ghost-btn{background:#fff;border-radius:10px;padding:8px 10px;box-shadow:var(--shadow);cursor:pointer}

    /* responsiveness */
    @media (max-width:980px){
      .app{padding:18px}
      .sidebar{display:none}
      .row{flex-direction:column}
      .details-grid{grid-template-columns:1fr}
    }
  </style>
</head>
<body>
  <div class="app">
    <aside class="sidebar" aria-label="Main menu">
      <div class="profile-blob">
        <div class="avatar" aria-hidden="true">
          <!-- placeholder silhouette -->
          <img src="" alt="" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#9aa6b2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>
        </div>
        <div>
          <div class="welcome">
            <div style="font-size:11px;color:var(--muted);margin-top:4px">Tue Sep 23 2025</div>
          </div>
        </div>
      </div>

    <nav class="menu" aria-label="Sidebar menu">
        <a href="dashboard.html" class="item active">🏠 Dashboard</a>
        <a href="courses.html" class="item">📂 My Documents</a>
        <a href="projects.html" class="item">💻 Projects</a>
        <a href="grades.html" class="item">📊 Grades</a>
        <a href="exams.html" class="item">📝 Exam / Test</a>
        <a href="complain.html" class="item">⚙️ Settings / Support</a>
    </nav>
      <div style="margin-top:auto;font-size:12px;color:var(--muted);">&copy; FULAFIA</div>
    </aside>

    <main class="main">
      <div class="topbar">
        <div class="top-left">
          <div class="hamburger" title="Toggle menu">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b6b6b" stroke-width="1.6"><path d="M3 12h18M3 6h18M3 18h18" stroke-linecap="round"/></svg>
          </div>
        </div>
        <div style="display:flex;gap:12px;align-items:center">
          <div class="status-pill"><span class="status-dot" aria-hidden></span><div style="font-size:13px;font-weight:600;color:#2b3949">ONLINE</div></div>
          <div class="ghost-btn" title="Sign out">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d34b4b" stroke-width="1.8"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/></svg>
          </div>
        </div>
      </div>

      <section class="hero" aria-labelledby="welcome">
        <h1 id="welcome">Welcome back Robert!</h1>
        <p>Here’s your learning dashboard and progress update.</p>
      </section>

      <div style="margin-bottom:18px">
        <div class="status-chip"><div class="icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b450e" stroke-width="1.6"><path d="M12 2v6"/><path d="M6 8v8"/><path d="M18 8v8"/></svg></div>COURSE REGISTRATION COMPLETE<span style="font-weight:400;color:var(--muted);margin-left:10px">85% Attendance – Keep it up!</span></div>
      </div>

      <div class="row">
        <section class="card small profile-card" aria-labelledby="profile">
          <h3 style="margin:0;display:flex;align-items:center;gap:8px"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#caa23b" stroke-width="1.6"><circle cx="12" cy="12" r="10"/></svg> My Profile</h3>

          <div style="padding-top:6px">
            <div class="avatar-lg" aria-hidden>
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#9aa6b2" stroke-width="1.2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
              <div class="camera-btn" title="Upload photo">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b3b00" stroke-width="1.4"><rect x="3" y="6" width="18" height="14" rx="2"/><path d="M16 3h-2l-1-1h-4l-1 1H8"/></svg>
              </div>
            </div>

            <div class="field"><label class="label">Full Name</label><div class="input">ATOABOU Robert Ocran</div></div>
            <div class="field"><label class="label">Student ID</label><div class="input">DCH/ACADB033</div></div>
            <div class="field"><label class="label">Email Address</label><div class="input">heisrobert001@gmail.com</div></div>
            <div  class="field"><label class="label">Phone Number</label><div class="input">08104428694</div></div>
            <div class="field"><label class="label">Cohort/Batch</label><div class="input">Cohort 12 – 2025</div></div>
            <div class="field"><label class="label">Specialization</label><div class="input">Frontend Development</div></div>
          </div>
        </section>

        <section class="card" aria-labelledby="appdetails">
          <h3 id="appdetails" style="margin:0;display:flex;align-items:center;gap:10px"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#927e24" stroke-width="1.6"><path d="M12 2l3 6H9l3-6z"/></svg>Academic Details<br><small style="color:var(--muted);font-weight:600">DCHA</small></h3>

          <div style="height:14px"></div>

          <div class="details-grid">
            <div class="detail-item">
              <label class="label">Learning Mode</label>
              <div class="input">Physical</div>
            </div>

            <div class="detail-item">
              <label class="label">Year of Admission</label>
              <div class="input">2025/2026</div>
            </div>

            <div class="detail-item">
              <label class="label">Program Level</label>
              <div class="input">Certificate</div>
            </div>

            <div class="detail-item">
              <label class="label">Progress</label>
              <div class="input">57%</div>
            </div>

            <div class="detail-item">
              <label class="label">Department</label>
              <div class="input">Creative</div>
            </div>

            <div class="detail-item">
              <label class="label">Programme</label>
              <div class="input">Full-Stack Web Development</div>
            </div>
          </div>

        </section>
      </div>

    </main>
  </div>

  <script>
    // small interactions (menu toggle for demo)
    document.querySelector('.hamburger').addEventListener('click', ()=>{
      const sb = document.querySelector('.sidebar');
      if(sb.style.display === 'none') sb.style.display = '';
      else sb.style.display = 'none';
    });
    document.addEventListener('DOMContentLoaded', () => {
  // Handler will catch clicks on:
  //  - element with class .ghost-btn and title="Sign out"
  //  - <a class="ghost-btn"> (link styled as ghost-btn)
  //  - any element with attribute data-signout
  function handleSignOutClick(e) {
    const target = e.target.closest('.ghost-btn[title="Sign out"], a.ghost-btn, [data-signout]');
    if (!target) return;

    // Prevent navigation / default behaviour (capture phase ensures effectiveness)
    e.preventDefault();
    e.stopPropagation();

    // visual cue
    target.style.cursor = 'pointer';

    // Confirmation prompt
    const ok = confirm('Are you sure you want to sign out?');
    if (!ok) return;

    // Optional: clear session/local data if you want
    // sessionStorage.clear();
    // localStorage.removeItem('fulafia_dashboard_v1');

    // Redirect to login page
    window.location.href = 'indexlogin.html';
  }

  // Use capture so we intercept before any native link navigation
  document.body.addEventListener('click', handleSignOutClick, true);
});

</script>
</body>
</html>