garywelz/programming_framework
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Mathematics Flowcharts - Programming Framework</title>7 <style>8 * { margin: 0; padding: 0; box-sizing: border-box; }9 body {10 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;11 line-height: 1.6;12 color: #333;13 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);14 min-height: 100vh;15 }16 .container {17 max-width: 1200px;18 margin: 0 auto;19 padding: 2rem;20 }21 .header {22 text-align: center;23 color: white;24 margin-bottom: 2rem;25 }26 .header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }27 .header p { opacity: 0.9; font-size: 1.1rem; }28 .main-content {29 background: white;30 border-radius: 15px;31 padding: 2rem;32 box-shadow: 0 10px 30px rgba(0,0,0,0.2);33 }34 .collection-info {35 margin-bottom: 2rem;36 padding: 1rem;37 background: #f8f9fa;38 border-radius: 8px;39 border-left: 4px solid #667eea;40 }41 .collection-info h2 { color: #667eea; font-size: 1.25rem; margin-bottom: 0.5rem; }42 .charts-grid {43 display: grid;44 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));45 gap: 1.5rem;46 }47 .chart-card {48 background: #fff;49 border: 1px solid #dee2e6;50 border-radius: 10px;51 padding: 1.25rem;52 cursor: pointer;53 transition: all 0.3s ease;54 box-shadow: 0 2px 8px rgba(0,0,0,0.06);55 }56 .chart-card:hover {57 transform: translateY(-4px);58 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.25);59 border-color: #667eea;60 }61 .chart-card .category {62 font-size: 0.75rem;63 color: #667eea;64 font-weight: 600;65 text-transform: uppercase;66 letter-spacing: 0.5px;67 margin-bottom: 0.5rem;68 }69 .chart-card h3 {70 font-size: 1.1rem;71 color: #333;72 margin-bottom: 0.5rem;73 line-height: 1.3;74 }75 .chart-card p {76 font-size: 0.9rem;77 color: #666;78 line-height: 1.4;79 }80 .chart-card .tags {81 margin-top: 0.75rem;82 display: flex;83 flex-wrap: wrap;84 gap: 0.35rem;85 }86 .chart-card .tag {87 font-size: 0.7rem;88 padding: 0.2rem 0.5rem;89 background: #e9ecef;90 border-radius: 4px;91 color: #495057;92 }93 /* Modal */94 .modal-overlay {95 display: none;96 position: fixed;97 inset: 0;98 background: rgba(0,0,0,0.6);99 z-index: 1000;100 align-items: center;101 justify-content: center;102 padding: 2rem;103 }104 .modal-overlay.active { display: flex; }105 .modal {106 background: white;107 border-radius: 12px;108 max-width: min(95vw, 1400px);109 width: 95vw;110 max-height: 90vh;111 overflow: hidden;112 display: flex;113 flex-direction: column;114 box-shadow: 0 25px 50px rgba(0,0,0,0.3);115 }116 .modal-header {117 padding: 1.25rem 1.5rem;118 border-bottom: 1px solid #dee2e6;119 flex-shrink: 0;120 }121 .modal-header h2 { font-size: 1.25rem; color: #333; }122 .modal-header .category { font-size: 0.85rem; color: #667eea; margin-top: 0.25rem; }123 .modal-tip { font-size: 0.8rem; color: #666; margin-top: 0.5rem; }124 .modal-body {125 padding: 1.5rem;126 overflow: auto;127 flex: 1;128 min-height: 0;129 }130 .mermaid-scroll-wrapper {131 overflow: auto;132 max-height: 70vh;133 padding: 1rem;134 background: #f9f9f9;135 border-radius: 8px;136 }137 .modal-body .mermaid {138 display: inline-block;139 min-width: min-content;140 }141 .modal-body .mermaid svg {142 max-width: none;143 display: block;144 }145 .modal-close {146 position: absolute;147 top: 1rem;148 right: 1rem;149 background: #dee2e6;150 border: none;151 width: 36px;152 height: 36px;153 border-radius: 50%;154 cursor: pointer;155 font-size: 1.25rem;156 line-height: 1;157 color: #495057;158 }159 .modal-close:hover { background: #667eea; color: white; }160 .modal-header { position: relative; }161 .nav-links {162 margin-top: 2rem;163 padding-top: 1.5rem;164 border-top: 1px solid #dee2e6;165 display: flex;166 flex-wrap: wrap;167 gap: 0.75rem;168 }169 .nav-link {170 color: #667eea;171 text-decoration: none;172 padding: 0.5rem 1rem;173 border: 1px solid #667eea;174 border-radius: 6px;175 font-size: 0.9rem;176 transition: all 0.2s;177 }178 .nav-link:hover { background: #667eea; color: white; }179 .loading { text-align: center; padding: 3rem; color: #666; }180 .error { color: #e74c3c; padding: 1rem; background: #fde8e8; border-radius: 8px; margin: 1rem 0; }181 </style>182 <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>183 <script type="application/json" id="charts-data-embedded">184 {"collection":{"name":"Mathematics Flowcharts","discipline":"mathematics","description":"Programming Framework flowcharts for mathematical processes, proofs, and constructions. Dependency graphs showing how axioms, postulates, and propositions relate.","version":"1.0","source":"Programming Framework methodology"},"charts":[{"id":"euclid-elements-i-1-5","title":"Euclid's Elements Book I — Propositions 1–5 Dependencies","description":"Dependency graph showing how the first five propositions of Euclid's Elements depend on postulates (P1–P3), common notions (CN1, CN3, CN4, CN5), and each other. Demonstrates the axiomatic structure of Euclidean geometry.","category":"Geometry","subcategory":"Euclidean Geometry","tags":["Euclid","Elements","axioms","postulates","propositions","geometry","foundations"],"mermaid":"graph TD\n %% ── Foundations ──────────────────────────────────────────\n P1[\"Post. 1\\nDraw a straight line\\nbetween two points\"]\n P2[\"Post. 2\\nExtend a straight line\\ncontinuously\"]\n P3[\"Post. 3\\nDraw a circle with given\\ncenter and radius\"]\n CN1[\"CN 1\\nThings equal to the same\\nthing are equal to each other\"]\n CN3[\"CN 3\\nIf equals subtracted from\\nequals, remainders are equal\"]\n CN4[\"CN 4\\nThings coinciding with\\none another are equal\"]\n CN5[\"CN 5\\nThe whole is greater\\nthan the part\"]\n\n %% ── Propositions ─────────────────────────────────────────\n Prop1[\"Prop. I.1\\nConstruct an equilateral\\ntriangle on a given line\"]\n Prop2[\"Prop. I.2\\nPlace a line segment equal\\nto a given segment at a point\"]\n Prop3[\"Prop. I.3\\nCut off from the greater of\\ntwo lines a segment equal to the less\"]\n Prop4[\"Prop. I.4\\nSAS Congruence:\\ntwo triangles with two equal sides\\nand included angle are congruent\"]\n Prop5[\"Prop. I.5\\nBase angles of an\\nisosceles triangle are equal\"]\n\n %% ── Dependencies ─────────────────────────────────────────\n P1 --> Prop1\n P3 --> Prop1\n\n Prop1 --> Prop2\n P1 --> Prop2\n P2 --> Prop2\n P3 --> Prop2\n\n Prop2 --> Prop3\n P3 --> Prop3\n\n CN4 --> Prop4\n CN5 --> Prop4\n\n Prop1 --> Prop5\n P1 --> Prop5\n P2 --> Prop5\n CN1 --> Prop5\n CN3 --> Prop5\n Prop4 --> Prop5\n\n %% ── Styling ──────────────────────────────────────────────\n classDef postulate fill:#e74c3c,color:#fff,stroke:#c0392b\n classDef commonnotion fill:#9b59b6,color:#fff,stroke:#8e44ad\n classDef proposition fill:#1abc9c,color:#fff,stroke:#16a085\n\n class P1,P2,P3 postulate\n class CN1,CN3,CN4,CN5 commonnotion\n class Prop1,Prop2,Prop3,Prop4,Prop5 proposition"}]}185 </script>186</head>187<body>188 <div class="container">189 <div class="header">190 <h1>📐 Mathematics Flowcharts</h1>191 <p>Programming Framework — Dependency graphs and computational logic</p>192 </div>193 <div class="main-content">194 <div id="collection-info" class="collection-info" style="display:none;"></div>195 <div id="charts-container" class="charts-grid"></div>196 <div id="loading" class="loading">Loading mathematics charts…</div>197 <div id="error" class="error" style="display:none;"></div>198 <div class="nav-links">199 <a href="mathematics_index.html" class="nav-link">← Mathematics Index</a>200 <a href="index.html" class="nav-link">← Programming Framework</a>201 </div>202 </div>203 </div>204 205 <div id="modal" class="modal-overlay">206 <div class="modal">207 <div class="modal-header">208 <button class="modal-close" onclick="closeModal()" aria-label="Close">×</button>209 <h2 id="modal-title"></h2>210 <div id="modal-category" class="category"></div>211 <p class="modal-tip">Scroll to see edges. Tip: Use Ctrl+Plus to zoom the page for easier reading.</p>212 </div>213 <div class="modal-body">214 <div class="mermaid-scroll-wrapper">215 <div id="modal-mermaid" class="mermaid"></div>216 </div>217 </div>218 </div>219 </div>220 221 <script>222 mermaid.initialize({223 startOnLoad: false,224 theme: 'default',225 flowchart: {226 useMaxWidth: false,227 htmlLabels: true,228 curve: 'linear',229 nodeSpacing: 50,230 rankSpacing: 50,231 padding: 20232 },233 themeVariables: {234 fontSize: '18px',235 fontFamily: 'Segoe UI, Arial, sans-serif'236 }237 });238 239 let chartsData = null;240 241 async function loadCharts() {242 try {243 try {244 const res = await fetch('mathematics_charts.json');245 if (res.ok) chartsData = await res.json();246 else throw new Error('Fetch failed');247 } catch (_) {248 chartsData = JSON.parse(document.getElementById('charts-data-embedded').textContent);249 }250 renderCollection();251 renderCharts();252 document.getElementById('loading').style.display = 'none';253 } catch (err) {254 document.getElementById('loading').style.display = 'none';255 document.getElementById('error').style.display = 'block';256 document.getElementById('error').textContent = 'Error loading charts: ' + err.message;257 }258 }259 260 function renderCollection() {261 const c = chartsData.collection;262 const el = document.getElementById('collection-info');263 el.style.display = 'block';264 el.innerHTML = `265 <h2>${c.name}</h2>266 <p>${c.description}</p>267 <p style="margin-top:0.5rem;font-size:0.9rem;color:#666">${chartsData.charts.length} chart(s) · ${c.source}</p>268 `;269 }270 271 function renderCharts() {272 const container = document.getElementById('charts-container');273 container.innerHTML = chartsData.charts.map(chart => `274 <div class="chart-card" data-id="${chart.id}">275 <div class="category">${chart.category}${chart.subcategory ? ' › ' + chart.subcategory : ''}</div>276 <h3>${chart.title}</h3>277 <p>${chart.description}</p>278 ${chart.tags && chart.tags.length ? `279 <div class="tags">${chart.tags.map(t => `<span class="tag">${t}</span>`).join('')}</div>280 ` : ''}281 </div>282 `).join('');283 284 container.querySelectorAll('.chart-card').forEach(card => {285 card.addEventListener('click', () => openChart(card.dataset.id));286 });287 }288 289 async function openChart(id) {290 const chart = chartsData.charts.find(c => c.id === id);291 if (!chart) return;292 293 document.getElementById('modal-title').textContent = chart.title;294 document.getElementById('modal-category').textContent = chart.category + (chart.subcategory ? ' › ' + chart.subcategory : '');295 296 const mermaidEl = document.getElementById('modal-mermaid');297 mermaidEl.innerHTML = '<p style="color:#666">Rendering…</p>';298 299 try {300 const { svg } = await mermaid.render('mermaid-' + chart.id + '-' + Date.now(), chart.mermaid);301 mermaidEl.innerHTML = svg;302 const svgEl = mermaidEl.querySelector('svg');303 if (svgEl) {304 const bbox = svgEl.getBBox();305 const scale = 1.6;306 const inner = document.createElement('div');307 inner.style.cssText = `width:${Math.ceil(bbox.width * scale)}px;height:${Math.ceil(bbox.height * scale)}px;flex-shrink:0;`;308 svgEl.style.cssText = 'transform:scale(' + scale + ');transform-origin:top left;display:block;';309 inner.appendChild(svgEl);310 mermaidEl.innerHTML = '';311 mermaidEl.appendChild(inner);312 }313 } catch (err) {314 mermaidEl.innerHTML = '<p class="error">Failed to render flowchart: ' + err.message + '</p>';315 }316 317 document.getElementById('modal').classList.add('active');318 }319 320 function closeModal() {321 document.getElementById('modal').classList.remove('active');322 }323 324 document.getElementById('modal').addEventListener('click', (e) => {325 if (e.target.id === 'modal') closeModal();326 });327 document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });328 329 loadCharts();330 </script>331</body>332</html>333