Build a Decision Matrix Tool with AI

Build a single-page decision matrix tool as a static HTML/CSS/JS site. Use a dark background (#0a0a0f) with a centered layout (max-width 960px). The design should feel analytical, trustworthy, and easy to scan. At the top, show an editable decision title (click to edit, default "My Decision", large white text) and a subtitle prompt in gray ("What are you choosing between?"). Below it, add a brief instruction line: "Add your options as rows, criteria as columns. Weight each criterion by importance, then score each option." Create a dynamic table/grid that functions as the decision matrix: COLUMNS represent criteria. The first column is "Options" (row labels). Each subsequent column is a criterion. Start with 3 example criteria: "Cost", "Quality", "Ease of Use". Each column header is an editable text input (click to rename). Below each criterion name, show a weight slider (range 1-10, default 5) with the current value displayed. The slider should have a blue (#3b82f6) track. Add an "Add Criterion" button ("+") at the end of the header row that appends a new column with a default name "Criterion N". Each criterion header also has a small X button to remove that column (with confirmation). ROWS represent options. Start with 3 example rows: "Option A", "Option B", "Option C". The first cell in each row is an editable text input for the option name. Each subsequent cell contains a score input — use a set of 5 clickable circles (like a rating widget) or a number input (1-10 scale). When using circles, filled circles should be colored blue (#3b82f6) and empty ones dark gray (#2a2a3a). The last cell in each row shows the WEIGHTED TOTAL, calculated as: sum of (score * weight) for all criteria, displayed in bold white text with a colored background bar behind it that fills proportionally relative to the maximum possible score. Add an "Add Option" button ("+") below the last row. Each row also has a small X button to remove it. The weighted total calculation must update in real-time as the user changes any score or weight. Use this formula for each option: Total = SUM(score_i * weight_i) for all criteria i. Normalize the weights display so users see each weight as a percentage of total weight (e.g., if weights are 8, 5, 3, show "50%, 31%, 19%" below the sliders). Below the table, add a RESULTS section with two visualizations: 1. RANKING BAR CHART: A horizontal bar chart (built with CSS, no libraries) showing all options ranked from highest to lowest weighted total. Each bar is colored on a gradient from #ef4444 (lowest) to #22c55e (highest). The winning option's bar has a gold border (#f59e0b) and a small trophy icon. Show the exact score and percentage of max at the end of each bar. If two options tie, show a "TIE" badge on both. 2. CRITERIA BREAKDOWN: Below the bar chart, show a stacked bar for each option that breaks down how much each criterion contributed to its total score. Use a different shade for each criterion. Add a legend showing criterion names and their colors. This helps users understand WHY an option won, not just that it won. Add a toolbar above the table with: - "Reset Scores" — clears all scores but keeps options and criteria (with confirmation) - "Reset All" — clears everything back to the 3-example default (with confirmation) - "Export as Table" — copies a formatted markdown table to clipboard: | Option | Cost (8) | Quality (5) | Ease (3) | Total | |--------|----------|-------------|----------|-------| | Opt A | 7 | 9 | 6 | 119 | - "Save as Image" — captures the results section as a downloadable PNG using canvas rendering - "Share Link" — encodes the entire matrix state into a URL hash (#data=base64...) so the decision can be shared via link without any backend Save all state (options, criteria, weights, scores, decision title) to localStorage. The page should restore the exact state on reload. Add an "Export JSON" and "Import JSON" option in a small gear menu for backup. Include pre-built templates accessible via a dropdown: "Hiring Decision" (criteria: Experience, Culture Fit, Technical Skills, Salary Expectations), "Software Comparison" (criteria: Features, Price, Support, Integration, Scalability), "Apartment Hunting" (criteria: Rent, Location, Size, Condition, Amenities). Selecting a template replaces the current matrix. On mobile (under 768px), make the table horizontally scrollable with the first column (option names) sticky/fixed. The bar chart should stack vertically with full-width bars. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].