index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="DecisionDeck is a structured decision-support tool that helps you compare options based on weighted criteria and explains the trade-offs behind your rankings.">
  <title>DecisionDeck — Structured Decision Support</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Skip link for keyboard accessibility -->
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <header class="app-header" role="banner">
    <div class="container header-content">
      <div class="brand">
        <span class="brand-badge" aria-hidden="true">DD</span>
        <h1 class="brand-title">DecisionDeck</h1>
      </div>
      <nav aria-label="Application navigation">
        <button type="button" id="nav-dashboard-btn" class="btn btn-secondary">My Decisions</button>
      </nav>
    </div>
  </header>

  <main id="main-content" class="container" tabindex="-1">
    <!-- View 1: Dashboard / Home -->
    <section id="view-dashboard" class="view" aria-labelledby="heading-dashboard">
      <div class="view-header">
        <div>
          <h2 id="heading-dashboard">My Decisions</h2>
          <p class="subtitle">Make decisions with structured clarity. Saved locally on this browser.</p>
        </div>
        <button type="button" id="start-new-decision-btn" class="btn btn-primary">+ New Decision</button>
      </div>

      <div class="device-storage-notice" role="note">
        <span class="notice-icon" aria-hidden="true">&#9432;</span>
        <p>Your decisions are stored securely on this browser and device only. No data is sent to external servers.</p>
      </div>

      <div id="dashboard-notice" class="success-banner hidden" role="status" aria-live="polite" tabindex="-1"></div>
      
      <div id="saved-decisions-container" class="saved-decisions-container">
        <!-- Rendered dynamically -->
        <p class="empty-state-text">No saved decisions yet. Click &ldquo;+ New Decision&rdquo; to get started.</p>
      </div>
    </section>

    <!-- View 2: Setup (Title, Options, Criteria, Weights) -->
    <section id="view-setup" class="view hidden" aria-labelledby="heading-setup">
      <div class="view-header">
        <div>
          <h2 id="heading-setup">Create a Decision</h2>
          <p class="subtitle">Define your decision, options to compare, and the criteria that matter to you.</p>
        </div>
      </div>

      <form id="decision-setup-form" novalidate>
        <!-- Accessible Error Summary Announcement Area -->
        <div id="setup-error-summary" class="error-summary hidden" role="alert" aria-live="polite" tabindex="-1">
          <h3 class="error-summary-title">Please correct the following before continuing:</h3>
          <ul id="setup-error-list" class="error-list"></ul>
        </div>

        <!-- Success/Ready Announcement Area for Phase 1 -->
        <div id="setup-success-banner" class="success-banner hidden" role="status" aria-live="polite" tabindex="-1">
          <h3 class="success-banner-title">Decision Setup Validated</h3>
          <p id="setup-success-message">Your decision title, options, and weighted criteria are properly configured and ready for scoring.</p>
        </div>

        <!-- Step 1: Decision Title -->
        <div class="form-card">
          <div class="form-group">
            <label for="decision-title" class="form-label">
              Decision Title <span class="required" aria-hidden="true">*</span>
            </label>
            <p class="form-hint" id="decision-title-hint">What decision are you trying to make? (e.g., &ldquo;Which hosting provider should I choose?&rdquo;)</p>
            <input 
              type="text" 
              id="decision-title" 
              name="decisionTitle" 
              class="form-control" 
              placeholder="e.g., Which hosting provider should I choose?" 
              aria-describedby="decision-title-hint"
              autocomplete="off"
            >
            <div id="decision-title-error" class="field-error hidden" role="alert"></div>
          </div>
        </div>

        <!-- Step 2: Options to Compare -->
        <div class="form-card">
          <div class="card-header">
            <div>
              <h3 class="card-title">Options to Compare</h3>
              <p class="card-subtitle">Add the specific alternatives you are considering (minimum 2).</p>
            </div>
            <button type="button" id="add-option-btn" class="btn btn-secondary btn-sm" aria-label="Add another option">+ Add Option</button>
          </div>
          
          <div id="options-list-container" class="dynamic-list" role="group" aria-label="Options list">
            <!-- Dynamic option rows rendered by JS -->
          </div>
          <div id="options-error" class="field-error hidden" role="alert"></div>
        </div>

        <!-- Step 3: Criteria & Importance -->
        <div class="form-card">
          <div class="card-header">
            <div>
              <h3 class="card-title">Comparison Criteria</h3>
              <p class="card-subtitle">Add the factors that matter to you and assign an importance rating from 1 (lowest) to 5 (highest).</p>
            </div>
            <button type="button" id="add-criterion-btn" class="btn btn-secondary btn-sm" aria-label="Add another criterion">+ Add Criterion</button>
          </div>

          <div id="criteria-list-container" class="dynamic-list" role="group" aria-label="Criteria list">
            <!-- Dynamic criteria rows rendered by JS -->
          </div>
          <div id="criteria-error" class="field-error hidden" role="alert"></div>
        </div>

        <!-- Action Controls -->
        <div class="form-actions">
          <button type="button" id="setup-cancel-btn" class="btn btn-secondary">Cancel</button>
          <button type="submit" id="setup-continue-btn" class="btn btn-primary">Validate &amp; Continue &rarr;</button>
        </div>
      </form>
    </section>

    <!-- View 3: Scoring Matrix -->
    <section id="view-score" class="view hidden" aria-labelledby="heading-score">
      <div class="view-header">
        <div>
          <h2 id="heading-score">Score Your Options</h2>
          <p class="subtitle" id="score-decision-title-subtitle">Evaluating options against your criteria.</p>
        </div>
        <div class="scoring-instructions-card">
          <span class="scale-badge">Scale: 1–10</span>
          <span class="scale-text"><strong>1 = Very Poor / Unfavorable</strong> &bull; <strong>5 = Average</strong> &bull; <strong>10 = Outstanding / Ideal</strong></span>
        </div>
      </div>

      <form id="scoring-form" novalidate>
        <!-- Accessible Error Summary Announcement Area -->
        <div id="score-error-summary" class="error-summary hidden" role="alert" aria-live="assertive" tabindex="-1">
          <h3 class="error-summary-title">Please provide all required scores:</h3>
          <ul id="score-error-list" class="error-list"></ul>
        </div>

        <!-- Success/Ready Announcement Area for Scoring -->
        <div id="score-success-banner" class="success-banner hidden" role="status" aria-live="polite" tabindex="-1">
          <h3 class="success-banner-title">All Scores Validated</h3>
          <p id="score-success-message">All options have valid scores for each criterion.</p>
        </div>

        <!-- Dynamic Scoring Matrix Container -->
        <div id="scoring-matrix-container" class="scoring-matrix-container">
          <!-- Rendered dynamically by criterion in app.js -->
        </div>

        <!-- Action Controls -->
        <div class="form-actions">
          <button type="button" id="score-back-btn" class="btn btn-secondary">&larr; Back to Setup</button>
          <button type="submit" id="score-continue-btn" class="btn btn-primary">Calculate &amp; View Results &rarr;</button>
        </div>
      </form>
    </section>

    <!-- View 4: Results & Explanation -->
    <section id="view-results" class="view hidden" aria-labelledby="heading-results">
      <div class="view-header">
        <div>
          <h2 id="heading-results">Decision Results</h2>
          <p class="subtitle" id="results-decision-title">Results for your decision</p>
        </div>
        <div class="results-top-actions">
          <button type="button" id="results-back-to-score-btn" class="btn btn-secondary btn-sm">&larr; Edit Scores</button>
          <button type="button" id="results-back-to-setup-btn" class="btn btn-secondary btn-sm">Edit Decision Setup</button>
          <button type="button" id="results-save-btn" class="btn btn-primary btn-sm">&#128190; Save Decision</button>
        </div>
      </div>

      <!-- Save Status Announcement Area -->
      <div id="results-save-banner" class="success-banner hidden" role="status" aria-live="polite" tabindex="-1">
        <h3 class="success-banner-title">Decision Saved Successfully</h3>
        <p id="results-save-message">This decision has been saved to your browser&rsquo;s local storage.</p>
      </div>

      <!-- Prominent Winner / Tie Hero Card -->
      <div id="results-hero-card" class="results-hero-card" tabindex="-1">
        <!-- Rendered dynamically -->
      </div>

      <!-- Natural-Language Explanation Card -->
      <div class="form-card explanation-card">
        <div class="card-header">
          <div>
            <h3 class="card-title">Why This Option Ranked Highest</h3>
            <p class="card-subtitle">Transparent analysis derived strictly from your priorities and scores.</p>
          </div>
        </div>
        <div id="results-explanation-content" class="explanation-content">
          <!-- Rendered dynamically -->
        </div>
      </div>

      <!-- Full Ranked Options Summary -->
      <div class="form-card">
        <div class="card-header">
          <div>
            <h3 class="card-title">Complete Options Ranking</h3>
            <p class="card-subtitle">Weighted total scores and match percentages based on your criteria weights.</p>
          </div>
        </div>
        <div id="results-ranking-list" class="ranking-list" role="list">
          <!-- Rendered dynamically -->
        </div>
      </div>

      <!-- Detailed Breakdown by Criterion -->
      <div class="form-card">
        <div class="card-header">
          <div>
            <h3 class="card-title">Performance Breakdown by Criterion</h3>
            <p class="card-subtitle">Detailed breakdown showing raw scores (1–10) and weighted score contributions (Score &times; Importance).</p>
          </div>
        </div>
        <div id="results-breakdown-container" class="table-responsive">
          <!-- Responsive comparison matrix rendered dynamically -->
        </div>
      </div>

      <!-- Action Navigation Bar -->
      <div class="form-actions">
        <button type="button" id="results-bottom-back-score-btn" class="btn btn-secondary">&larr; Adjust Scores</button>
        <button type="button" id="results-bottom-back-setup-btn" class="btn btn-secondary">Modify Options &amp; Criteria</button>
        <button type="button" id="results-bottom-save-btn" class="btn btn-primary">&#128190; Save Decision</button>
      </div>
    </section>
  </main>

  <footer class="app-footer">
    <div class="container footer-content">
      <p>DecisionDeck is a decision-support tool. It reflects your entered priorities, not objective truth.</p>
      <p class="footer-subtext">All data is stored locally in your browser.</p>
    </div>
  </footer>

  <!-- Accessible Delete Confirmation Dialog -->
  <dialog id="delete-confirm-dialog" class="modal-dialog" aria-labelledby="delete-dialog-title" aria-describedby="delete-dialog-desc">
    <div class="modal-content">
      <h3 id="delete-dialog-title" class="modal-title">Delete Saved Decision?</h3>
      <p id="delete-dialog-desc" class="modal-desc">Are you sure you want to delete <strong id="delete-decision-name">this decision</strong>? This action cannot be undone and will permanently remove it from this browser.</p>
      <div class="modal-actions">
        <button type="button" id="cancel-delete-btn" class="btn btn-secondary">Cancel</button>
        <button type="button" id="confirm-delete-btn" class="btn btn-danger">Delete Permanently</button>
      </div>
    </div>
  </dialog>

  <script src="app.js"></script>
</body>
</html>