target.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    if (!localStorage.getItem("cortexa-logged-in")) {
      window.location.href = "login.html";
    }
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cortexa - Target</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700&family=Google+Sans+Text:wght@400;500;600;700&family=Google+Sans+Mono:wght@400;500&family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap"
  >
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="app-shell">
    <aside class="side-rail" id="appNav" aria-label="Primary sidebar">
      <div class="brand-lockup">
        <p class="eyebrow">Study Agent</p>
        <h1 class="brand-wordmark">Cortexa</h1>
      </div>

      <nav class="rail-nav" aria-label="Primary">
        <a class="rail-link" href="index.html">Dashboard</a>
        <a class="rail-link" href="planner.html">Planner</a>
        <a class="rail-link" href="knowledge.html">Knowledge</a>
        <a class="rail-link" href="quiz.html">Quiz Lab</a>
        <a class="rail-link active" href="target.html">Target</a>
        <a class="rail-link" href="research.html">Research</a>
        <a class="rail-link" href="#" id="logoutBtn" style="color: #f28b82; margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); border-radius: 0; padding-top: 14px;">Sign Out</a>
      </nav>

      <div class="rail-summary">
        <p class="summary-label">Target Board</p>
        <strong id="targetSidebarState">Ready to generate</strong>
        <span>Grounded in your notes</span>
        <button class="ghost-button" id="generateTargetBtn" type="button">Generate Target</button>
      </div>
    </aside>

    <button class="nav-overlay" id="navOverlay" type="button" aria-label="Close menu"></button>

    <main class="workspace">
      <header class="top-bar">
        <button class="menu-toggle" id="menuToggle" type="button" aria-controls="appNav" aria-expanded="true" aria-label="Close menu">
          <span></span>
          <span></span>
          <span></span>
        </button>

        <label class="search-shell" for="briefPrompt">
          <span class="search-icon" aria-hidden="true">&#8981;</span>
          <input
            id="briefPrompt"
            type="text"
            placeholder="Type your study focus prompt..."
            aria-label="Target prompt"
          >
        </label>

        <div class="top-actions">
          <span class="status-pill" id="backendStatusPill">Target Board</span>
          <span class="status-pill status-live">AI Enabled</span>
          <div class="avatar" id="userAvatar" title="Google Account">G</div>
        </div>
      </header>

      <section class="page-header card">
        <div>
          <span class="eyebrow">Study board</span>
          <h2>Your daily study TARGET</h2>
          <p>Define, track, and conquer your customized daily learning objectives.</p>
        </div>
        <span class="tag tag-red" id="briefStatus">Not Generated</span>
      </section>

      <section class="page-grid">
        <article class="panel card panel-main">
          <div class="panel-header">
            <div>
              <span class="eyebrow">Daily Objective</span>
              <h3>Today's Target</h3>
            </div>
            <button class="primary-button" id="generateTargetBtnMain" type="button" style="padding: 8px 16px; font-size: 0.88rem; border-radius: 8px; font-weight: 600;">🎯 Generate Target</button>
          </div>

          <div class="target-board-card">
            <div class="target-quote-box">
              <span class="quote-icon">“</span>
              <p id="targetQuote" class="target-quote">Click "🎯 Generate Target" above to build your daily study target with Gemini AI.</p>
            </div>
            
            <div class="target-main-objective">
              <span class="target-badge">TODAY'S MISSION</span>
              <h4 id="targetTitle" class="target-title">Target Objective</h4>
            </div>

            <div class="target-actions-section">
              <h5>ACTION PLAN</h5>
              <ul class="target-checklist" id="targetChecklist">
                <li>
                  <label class="checklist-item">
                    <input type="checkbox">
                    <span>Generate a target using the sidebar button to see daily actions</span>
                  </label>
                </li>
              </ul>
            </div>

          </div>
        </article>

        <article class="panel card panel-side">
          <div class="panel-header">
            <div>
              <span class="eyebrow">Target logic</span>
              <h3>How targets are built</h3>
            </div>
          </div>
          <ul class="mini-list">
            <li>Synthesizes your study schedule and deadlines</li>
            <li>Selects high-signal topics from your uploaded notes</li>
            <li>Uses Gemini AI to generate motivational daily quotes</li>
            <li>Builds action plan items based on your guidance</li>
          </ul>
        </article>
      </section>
    </main>
  </div>

  <!-- Firebase Compat SDKs (loaded synchronously to avoid timing race conditions) -->
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth-compat.js"></script>
  <script src="firebase-init.js"></script>
  <script src="app.js"></script>
</body>
</html>