Last active
January 26, 2026 14:14
-
-
Save hodgesmr/290c7b42883382b83bf4c8295e444463 to your computer and use it in GitHub Desktop.
maga_inc_tech_donors.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MAGA Inc. Tech Executive Contributors (2025)</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| min-height: 100vh; | |
| color: #e4e4e4; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| padding: 30px; | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 16px; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| h1 { | |
| font-size: 2.2rem; | |
| margin-bottom: 10px; | |
| background: linear-gradient(90deg, #ff6b6b, #feca57); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .subtitle { | |
| color: #888; | |
| font-size: 1rem; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .stat-card { | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 12px; | |
| padding: 20px; | |
| text-align: center; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px rgba(0,0,0,0.3); | |
| } | |
| .stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: #feca57; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| color: #888; | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 1fr 400px; | |
| gap: 20px; | |
| } | |
| @media (max-width: 1000px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .table-container { | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 16px; | |
| padding: 20px; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| overflow-x: auto; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .search-box { | |
| flex: 1; | |
| min-width: 200px; | |
| padding: 12px 16px; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| border-radius: 8px; | |
| background: rgba(0,0,0,0.3); | |
| color: #fff; | |
| font-size: 0.95rem; | |
| } | |
| .search-box::placeholder { | |
| color: #666; | |
| } | |
| .search-box:focus { | |
| outline: none; | |
| border-color: #feca57; | |
| } | |
| .sort-select { | |
| padding: 12px 16px; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| border-radius: 8px; | |
| background: rgba(0,0,0,0.3); | |
| color: #fff; | |
| font-size: 0.95rem; | |
| cursor: pointer; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, td { | |
| padding: 14px 12px; | |
| text-align: left; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| } | |
| th { | |
| color: #888; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| font-size: 0.75rem; | |
| letter-spacing: 1px; | |
| cursor: pointer; | |
| user-select: none; | |
| transition: color 0.2s; | |
| } | |
| th:hover { | |
| color: #feca57; | |
| } | |
| th.sorted { | |
| color: #feca57; | |
| } | |
| tr { | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| tr:hover { | |
| background: rgba(255,255,255,0.05); | |
| } | |
| tr.selected { | |
| background: rgba(254, 202, 87, 0.15); | |
| } | |
| .rank { | |
| color: #666; | |
| font-weight: 600; | |
| } | |
| .name { | |
| font-weight: 600; | |
| color: #fff; | |
| } | |
| .employer { | |
| color: #888; | |
| font-size: 0.9rem; | |
| } | |
| .amount { | |
| font-weight: 600; | |
| color: #4ade80; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .location { | |
| color: #666; | |
| font-size: 0.85rem; | |
| } | |
| .detail-panel { | |
| background: rgba(255,255,255,0.05); | |
| border-radius: 16px; | |
| padding: 25px; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| position: sticky; | |
| top: 20px; | |
| max-height: calc(100vh - 40px); | |
| overflow-y: auto; | |
| } | |
| .detail-panel h2 { | |
| font-size: 1.4rem; | |
| margin-bottom: 5px; | |
| color: #fff; | |
| } | |
| .detail-panel .title { | |
| color: #feca57; | |
| font-size: 0.95rem; | |
| margin-bottom: 15px; | |
| } | |
| .detail-section { | |
| margin-bottom: 20px; | |
| } | |
| .detail-section h3 { | |
| color: #888; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 8px; | |
| } | |
| .detail-amount { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: #4ade80; | |
| } | |
| .contribution-list { | |
| list-style: none; | |
| } | |
| .contribution-list li { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 8px 0; | |
| border-bottom: 1px solid rgba(255,255,255,0.05); | |
| font-size: 0.9rem; | |
| } | |
| .contribution-list .date { | |
| color: #888; | |
| } | |
| .contribution-list .cont-amount { | |
| color: #4ade80; | |
| font-weight: 500; | |
| } | |
| .wiki-section { | |
| background: rgba(0,0,0,0.2); | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-top: 15px; | |
| } | |
| .wiki-section p { | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| color: #bbb; | |
| margin-bottom: 10px; | |
| } | |
| .wiki-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: #60a5fa; | |
| text-decoration: none; | |
| font-size: 0.85rem; | |
| transition: color 0.2s; | |
| } | |
| .wiki-link:hover { | |
| color: #93c5fd; | |
| } | |
| .company-link { | |
| display: inline-block; | |
| margin-top: 8px; | |
| padding: 6px 12px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 6px; | |
| color: #feca57; | |
| text-decoration: none; | |
| font-size: 0.8rem; | |
| transition: background 0.2s; | |
| } | |
| .company-link:hover { | |
| background: rgba(255,255,255,0.15); | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 40px; | |
| color: #666; | |
| } | |
| .tag { | |
| display: inline-block; | |
| padding: 4px 10px; | |
| background: rgba(254, 202, 87, 0.2); | |
| color: #feca57; | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| margin-top: 10px; | |
| } | |
| .source-note { | |
| margin-top: 30px; | |
| padding: 20px; | |
| background: rgba(255,255,255,0.03); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| font-size: 0.85rem; | |
| color: #666; | |
| } | |
| .source-note a { | |
| color: #60a5fa; | |
| } | |
| .timeline-bar { | |
| height: 6px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 3px; | |
| margin-top: 15px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .timeline-marker { | |
| position: absolute; | |
| width: 8px; | |
| height: 8px; | |
| background: #4ade80; | |
| border-radius: 50%; | |
| top: -1px; | |
| transform: translateX(-50%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>MAGA Inc. Tech Executive Contributors</h1> | |
| <p class="subtitle">FEC Filings Analysis | January - December 2025</p> | |
| </header> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="totalAmount">$0</div> | |
| <div class="stat-label">Total from Tech Execs</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="numDonors">0</div> | |
| <div class="stat-label">Tech Contributors</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="avgAmount">$0</div> | |
| <div class="stat-label">Average Contribution</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value" id="topAmount">$0</div> | |
| <div class="stat-label">Largest Single Gift</div> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="table-container"> | |
| <div class="controls"> | |
| <input type="text" class="search-box" id="searchBox" placeholder="Search by name, employer, or location..."> | |
| <select class="sort-select" id="sortSelect"> | |
| <option value="amount-desc">Amount (High to Low)</option> | |
| <option value="amount-asc">Amount (Low to High)</option> | |
| <option value="name-asc">Name (A-Z)</option> | |
| <option value="name-desc">Name (Z-A)</option> | |
| <option value="date-desc">Most Recent First</option> | |
| <option value="date-asc">Earliest First</option> | |
| </select> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th style="width: 50px">#</th> | |
| <th>Contributor</th> | |
| <th>Employer</th> | |
| <th>Location</th> | |
| <th style="text-align: right">Total</th> | |
| </tr> | |
| </thead> | |
| <tbody id="tableBody"> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="detail-panel" id="detailPanel"> | |
| <div class="empty-state"> | |
| <p>Select a contributor to view details</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="source-note"> | |
| <strong>Data Sources:</strong> FEC Filings | |
| <a href="https://docquery.fec.gov/cgi-bin/forms/C00892471/1930534/" target="_blank">#1930534</a> (Jul-Dec 2025, Amended) and | |
| <a href="https://docquery.fec.gov/cgi-bin/forms/C00892471/1909741/" target="_blank">#1909741</a> (Jan-Jun 2025) for MAGA Inc. (C00892471). | |
| Biographical information from Wikipedia. Dashboard generated January 2026. | |
| </div> | |
| </div> | |
| <script> | |
| // Contributor data from FEC filings | |
| const contributors = [ | |
| { | |
| name: "Greg Brockman", | |
| total: 12500000, | |
| employer: "OpenAI", | |
| occupation: "President and Co-Founder", | |
| city: "San Francisco", | |
| state: "CA", | |
| contributions: [{ amount: 12500000, date: "2025-09-12" }], | |
| wiki: { | |
| summary: "Gregory Brockman is an American entrepreneur, investor, software engineer. He is co-founder and president of OpenAI. He began his career at Stripe in 2010, upon leaving MIT, and became CTO in 2013. He left Stripe in 2015 to co-found OpenAI, where he also served as CTO.", | |
| personUrl: "https://en.wikipedia.org/wiki/Greg_Brockman", | |
| companyUrl: "https://en.wikipedia.org/wiki/OpenAI", | |
| companyName: "OpenAI" | |
| }, | |
| tags: ["AI", "OpenAI Co-Founder"] | |
| }, | |
| { | |
| name: "Elon Musk", | |
| total: 5000000, | |
| employer: "SpaceX", | |
| occupation: "CEO", | |
| city: "Austin", | |
| state: "TX", | |
| contributions: [{ amount: 5000000, date: "2025-06-27" }], | |
| wiki: { | |
| summary: "Elon Reeve Musk is a businessman and entrepreneur known for his leadership of Tesla, SpaceX, Twitter, and xAI. Musk has been the wealthiest person in the world since 2021; as of January 2026, Forbes estimates his net worth to be around US$788 billion.", | |
| personUrl: "https://en.wikipedia.org/wiki/Elon_Musk", | |
| companyUrl: "https://en.wikipedia.org/wiki/SpaceX", | |
| companyName: "SpaceX" | |
| }, | |
| tags: ["Tesla", "SpaceX", "xAI"] | |
| }, | |
| { | |
| name: "Marc Andreessen", | |
| total: 3000000, | |
| employer: "a16z", | |
| occupation: "Co-Founder and Partner", | |
| city: "Los Altos", | |
| state: "CA", | |
| contributions: [ | |
| { amount: 500000, date: "2025-02-03" }, | |
| { amount: 2500000, date: "2025-03-31" } | |
| ], | |
| wiki: { | |
| summary: "Marc Lowell Andreessen is an American businessman, venture capitalist, and former software engineer. He is the co-author of Mosaic, the first web browser to display inline images; co-founder of Netscape; and co-founder and general partner of Silicon Valley venture capital firm Andreessen Horowitz. In 2024 he became an advisor to Donald Trump. Net worth estimated at $1.9 billion.", | |
| personUrl: "https://en.wikipedia.org/wiki/Marc_Andreessen", | |
| companyUrl: "https://en.wikipedia.org/wiki/Andreessen_Horowitz", | |
| companyName: "Andreessen Horowitz (a16z)" | |
| }, | |
| tags: ["Venture Capital", "Netscape Founder"], | |
| note: "Also contributed $30M through his LLC, Foris Dax, Inc." | |
| }, | |
| { | |
| name: "Ben Horowitz", | |
| total: 3000000, | |
| employer: "a16z", | |
| occupation: "Co-Founder and General Partner", | |
| city: "Las Vegas", | |
| state: "NV", | |
| contributions: [ | |
| { amount: 500000, date: "2025-02-04" }, | |
| { amount: 2500000, date: "2025-03-31" } | |
| ], | |
| wiki: { | |
| summary: "Benjamin Abraham Horowitz is an American businessman, investor, blogger, and author. He is a technology entrepreneur and co-founder of the venture capital firm Andreessen Horowitz along with Marc Andreessen. He previously co-founded Opsware, which Hewlett-Packard acquired in 2007. Author of 'The Hard Thing About Hard Things'.", | |
| personUrl: "https://en.wikipedia.org/wiki/Ben_Horowitz", | |
| companyUrl: "https://en.wikipedia.org/wiki/Andreessen_Horowitz", | |
| companyName: "Andreessen Horowitz (a16z)" | |
| }, | |
| tags: ["Venture Capital", "Author"] | |
| }, | |
| { | |
| name: "Tyler Winklevoss", | |
| total: 1030404.68, | |
| employer: "Winklevoss Capital", | |
| occupation: "Founder", | |
| city: "New York", | |
| state: "NY", | |
| contributions: [ | |
| { amount: 514272.13, date: "2025-01-17" }, | |
| { amount: 930.21, date: "2025-01-17" }, | |
| { amount: 930.21, date: "2025-01-17" }, | |
| { amount: 514272.13, date: "2025-01-17" } | |
| ], | |
| wiki: { | |
| summary: "Tyler Howard Winklevoss is an American investor, founder of Winklevoss Capital Management and Gemini cryptocurrency exchange, and former Olympic rower. In 2004, the Winklevoss brothers sued Mark Zuckerberg, claiming he stole their ConnectU idea to create Facebook, and received $65 million as settlement.", | |
| personUrl: "https://en.wikipedia.org/wiki/Tyler_Winklevoss", | |
| companyUrl: "https://en.wikipedia.org/wiki/Gemini_(cryptocurrency_exchange)", | |
| companyName: "Gemini Exchange" | |
| }, | |
| tags: ["Crypto", "Gemini", "Olympic Rower"], | |
| note: "Gemini Trust Company also contributed $4.4M as an organization" | |
| }, | |
| { | |
| name: "Antonio Gracias", | |
| total: 1000000, | |
| employer: "Valor Equity Partners", | |
| occupation: "CEO and CIO", | |
| city: "Miami", | |
| state: "FL", | |
| contributions: [{ amount: 1000000, date: "2025-01-13" }], | |
| wiki: { | |
| summary: "Antonio Gracias is an American billionaire businessman who founded Valor Equity Partners. He has been on the board of directors for several companies in which Valor has invested, including Tesla, Inc. and SpaceX.", | |
| personUrl: "https://en.wikipedia.org/wiki/Antonio_Gracias", | |
| companyUrl: null, | |
| companyName: "Valor Equity Partners" | |
| }, | |
| tags: ["Private Equity", "Tesla Board"] | |
| }, | |
| { | |
| name: "Cameron Winklevoss", | |
| total: 999960.08, | |
| employer: "Winklevoss Capital", | |
| occupation: "Founder", | |
| city: "New York", | |
| state: "NY", | |
| contributions: [ | |
| { amount: 499504.78, date: "2025-01-17" }, | |
| { amount: 475.26, date: "2025-01-17" }, | |
| { amount: 475.26, date: "2025-01-17" }, | |
| { amount: 499504.78, date: "2025-01-17" } | |
| ], | |
| wiki: { | |
| summary: "Cameron Winklevoss is an American investor and entrepreneur, twin brother of Tyler Winklevoss. Together they founded Gemini, a cryptocurrency exchange, and Winklevoss Capital. They competed in the men's pair rowing event at the 2008 Summer Olympics.", | |
| personUrl: "https://en.wikipedia.org/wiki/Cameron_Winklevoss", | |
| companyUrl: "https://en.wikipedia.org/wiki/Gemini_(cryptocurrency_exchange)", | |
| companyName: "Gemini Exchange" | |
| }, | |
| tags: ["Crypto", "Gemini", "Olympic Rower"] | |
| }, | |
| { | |
| name: "Michael Aquino", | |
| total: 1000000, | |
| employer: "Dynamic Medical Svcs", | |
| occupation: "Founder & CEO", | |
| city: "Las Vegas", | |
| state: "NV", | |
| contributions: [{ amount: 1000000, date: "2025-10-15" }], | |
| wiki: null, | |
| tags: ["Healthcare Tech"] | |
| }, | |
| { | |
| name: "Robert Book", | |
| total: 1500000, | |
| employer: "Book Capital Enterprises", | |
| occupation: "Chairman", | |
| city: "Fort Lauderdale", | |
| state: "FL", | |
| contributions: [ | |
| { amount: 1000000, date: "2025-06-27" }, | |
| { amount: 500000, date: "2025-10-22" } | |
| ], | |
| wiki: null, | |
| tags: ["Capital Management"] | |
| }, | |
| { | |
| name: "John Paulson", | |
| total: 250000, | |
| employer: "Paulson Capital Inc", | |
| occupation: "President", | |
| city: "Palm Beach", | |
| state: "FL", | |
| contributions: [{ amount: 250000, date: "2025-01-02" }], | |
| wiki: { | |
| summary: "John Alfred Paulson is an American billionaire hedge fund manager. He leads Paulson & Co., a New York-based investment management firm he founded in 1994. He has been called 'one of the most prominent names in high finance.'", | |
| personUrl: "https://en.wikipedia.org/wiki/John_Paulson", | |
| companyUrl: null, | |
| companyName: "Paulson & Co." | |
| }, | |
| tags: ["Hedge Fund", "Billionaire"] | |
| }, | |
| { | |
| name: "Joseph Craft", | |
| total: 250000, | |
| employer: "Alliance Resource Partners LP", | |
| occupation: "Executive", | |
| city: "Tulsa", | |
| state: "OK", | |
| contributions: [{ amount: 250000, date: "2025-01-15" }], | |
| wiki: null, | |
| tags: ["Energy"] | |
| }, | |
| { | |
| name: "Josh Lobel", | |
| total: 250000, | |
| employer: "M-Cor Capital LLC", | |
| occupation: "CEO", | |
| city: "Dallas", | |
| state: "TX", | |
| contributions: [{ amount: 250000, date: "2025-01-06" }], | |
| wiki: null, | |
| tags: ["Capital Management"] | |
| }, | |
| { | |
| name: "Pyahm Samani", | |
| total: 200000, | |
| employer: "Multicoin Capital", | |
| occupation: "Managing Partner", | |
| city: "Austin", | |
| state: "TX", | |
| contributions: [{ amount: 200000, date: "2025-01-07" }], | |
| wiki: null, | |
| tags: ["Crypto VC"] | |
| }, | |
| { | |
| name: "David Winn", | |
| total: 200000, | |
| employer: "FiveW Capital", | |
| occupation: "Manager", | |
| city: "Boca Raton", | |
| state: "FL", | |
| contributions: [{ amount: 200000, date: "2025-06-26" }], | |
| wiki: null, | |
| tags: ["Capital Management"] | |
| } | |
| ]; | |
| // Format currency | |
| function formatCurrency(amount) { | |
| return new Intl.NumberFormat('en-US', { | |
| style: 'currency', | |
| currency: 'USD', | |
| minimumFractionDigits: 0, | |
| maximumFractionDigits: 0 | |
| }).format(amount); | |
| } | |
| // Format date | |
| function formatDate(dateStr) { | |
| const date = new Date(dateStr); | |
| return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); | |
| } | |
| // Calculate stats | |
| function updateStats() { | |
| const total = contributors.reduce((sum, c) => sum + c.total, 0); | |
| const avg = total / contributors.length; | |
| const maxSingle = Math.max(...contributors.flatMap(c => c.contributions.map(x => x.amount))); | |
| document.getElementById('totalAmount').textContent = formatCurrency(total); | |
| document.getElementById('numDonors').textContent = contributors.length; | |
| document.getElementById('avgAmount').textContent = formatCurrency(avg); | |
| document.getElementById('topAmount').textContent = formatCurrency(maxSingle); | |
| } | |
| // Render table | |
| let selectedIndex = null; | |
| function renderTable(data) { | |
| const tbody = document.getElementById('tableBody'); | |
| tbody.innerHTML = ''; | |
| data.forEach((contributor, index) => { | |
| const tr = document.createElement('tr'); | |
| tr.className = selectedIndex === index ? 'selected' : ''; | |
| tr.onclick = () => selectContributor(index, data); | |
| tr.innerHTML = ` | |
| <td class="rank">${index + 1}</td> | |
| <td> | |
| <div class="name">${contributor.name}</div> | |
| </td> | |
| <td> | |
| <div class="employer">${contributor.employer}</div> | |
| <div class="location">${contributor.occupation}</div> | |
| </td> | |
| <td class="location">${contributor.city}, ${contributor.state}</td> | |
| <td class="amount">${formatCurrency(contributor.total)}</td> | |
| `; | |
| tbody.appendChild(tr); | |
| }); | |
| } | |
| // Select contributor and show details | |
| function selectContributor(index, data) { | |
| selectedIndex = index; | |
| const contributor = data[index]; | |
| const panel = document.getElementById('detailPanel'); | |
| // Calculate timeline positions (Jan 1 2025 to Dec 31 2025) | |
| const yearStart = new Date('2025-01-01').getTime(); | |
| const yearEnd = new Date('2025-12-31').getTime(); | |
| const yearRange = yearEnd - yearStart; | |
| const markers = contributor.contributions.map(c => { | |
| const date = new Date(c.date).getTime(); | |
| const position = ((date - yearStart) / yearRange) * 100; | |
| return `<div class="timeline-marker" style="left: ${position}%" title="${formatDate(c.date)}: ${formatCurrency(c.amount)}"></div>`; | |
| }).join(''); | |
| let wikiSection = ''; | |
| if (contributor.wiki) { | |
| wikiSection = ` | |
| <div class="wiki-section"> | |
| <p>${contributor.wiki.summary}</p> | |
| <a href="${contributor.wiki.personUrl}" target="_blank" class="wiki-link"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> | |
| <polyline points="15 3 21 3 21 9"></polyline> | |
| <line x1="10" y1="14" x2="21" y2="3"></line> | |
| </svg> | |
| Wikipedia | |
| </a> | |
| ${contributor.wiki.companyUrl ? ` | |
| <a href="${contributor.wiki.companyUrl}" target="_blank" class="company-link"> | |
| ${contributor.wiki.companyName} → | |
| </a> | |
| ` : ''} | |
| </div> | |
| `; | |
| } | |
| let noteSection = ''; | |
| if (contributor.note) { | |
| noteSection = `<p style="margin-top: 15px; padding: 10px; background: rgba(254,202,87,0.1); border-radius: 8px; font-size: 0.85rem; color: #feca57;">📌 ${contributor.note}</p>`; | |
| } | |
| panel.innerHTML = ` | |
| <h2>${contributor.name}</h2> | |
| <div class="title">${contributor.occupation} at ${contributor.employer}</div> | |
| <div class="detail-section"> | |
| <h3>Total Contributed</h3> | |
| <div class="detail-amount">${formatCurrency(contributor.total)}</div> | |
| </div> | |
| <div class="detail-section"> | |
| <h3>Location</h3> | |
| <p>${contributor.city}, ${contributor.state}</p> | |
| </div> | |
| <div class="detail-section"> | |
| <h3>Contribution Timeline (2025)</h3> | |
| <div class="timeline-bar"> | |
| ${markers} | |
| </div> | |
| <ul class="contribution-list"> | |
| ${contributor.contributions.map(c => ` | |
| <li> | |
| <span class="date">${formatDate(c.date)}</span> | |
| <span class="cont-amount">${formatCurrency(c.amount)}</span> | |
| </li> | |
| `).join('')} | |
| </ul> | |
| </div> | |
| ${contributor.tags ? ` | |
| <div class="detail-section"> | |
| ${contributor.tags.map(tag => `<span class="tag">${tag}</span>`).join(' ')} | |
| </div> | |
| ` : ''} | |
| ${wikiSection} | |
| ${noteSection} | |
| `; | |
| renderTable(data); | |
| } | |
| // Filter and sort | |
| function getFilteredAndSortedData() { | |
| const searchTerm = document.getElementById('searchBox').value.toLowerCase(); | |
| const sortValue = document.getElementById('sortSelect').value; | |
| let data = contributors.filter(c => | |
| c.name.toLowerCase().includes(searchTerm) || | |
| c.employer.toLowerCase().includes(searchTerm) || | |
| c.city.toLowerCase().includes(searchTerm) || | |
| c.state.toLowerCase().includes(searchTerm) | |
| ); | |
| switch (sortValue) { | |
| case 'amount-desc': | |
| data.sort((a, b) => b.total - a.total); | |
| break; | |
| case 'amount-asc': | |
| data.sort((a, b) => a.total - b.total); | |
| break; | |
| case 'name-asc': | |
| data.sort((a, b) => a.name.localeCompare(b.name)); | |
| break; | |
| case 'name-desc': | |
| data.sort((a, b) => b.name.localeCompare(a.name)); | |
| break; | |
| case 'date-desc': | |
| data.sort((a, b) => { | |
| const aDate = Math.max(...a.contributions.map(c => new Date(c.date).getTime())); | |
| const bDate = Math.max(...b.contributions.map(c => new Date(c.date).getTime())); | |
| return bDate - aDate; | |
| }); | |
| break; | |
| case 'date-asc': | |
| data.sort((a, b) => { | |
| const aDate = Math.min(...a.contributions.map(c => new Date(c.date).getTime())); | |
| const bDate = Math.min(...b.contributions.map(c => new Date(c.date).getTime())); | |
| return aDate - bDate; | |
| }); | |
| break; | |
| } | |
| return data; | |
| } | |
| // Initialize | |
| document.getElementById('searchBox').addEventListener('input', () => { | |
| selectedIndex = null; | |
| renderTable(getFilteredAndSortedData()); | |
| }); | |
| document.getElementById('sortSelect').addEventListener('change', () => { | |
| selectedIndex = null; | |
| renderTable(getFilteredAndSortedData()); | |
| }); | |
| updateStats(); | |
| renderTable(getFilteredAndSortedData()); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment