Upload 11 files

index.html

@@ -28,63 +28,121 @@
             <!-- Overview Tab -->
             <div class="tab-content active" id="overview">
                 <div class="card">
-                    <h2>Universal Color Coding</h2>
-                    <div class="resources-grid">
-                        <div class="resource">
-                            <h3>Red (#ff6b6b)</h3>
-                            <p>Triggers & Inputs</p>
-                            <p>Biology: Environmental signals · Chemistry: Reactant supply · CS: Input data · Physics: Energy input · Math: Axioms</p>
-                        </div>
-                        <div class="resource">
-                            <h3>Yellow (#ffd43b)</h3>
-                            <p>Structures & Objects</p>
-                            <p>Biology: Enzymes · Chemistry: Catalysts · CS: Data structures · Physics: Fields · Math: Theorems</p>
-                        </div>
-                        <div class="resource">
-                            <h3>Green (#51cf66)</h3>
-                            <p>Processing & Operations</p>
-                            <p>Biology: Reactions · Chemistry: Reactions · CS: Execution · Physics: Operations · Math: Deductions</p>
+                    <h2>Universal Color Coding System</h2>
+                    <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin: 1.5rem 0; border-left: 4px solid #007bff;">
+                        <div style="overflow-x: auto;">
+                            <table style="width: 100%; border-collapse: collapse; margin: 1rem 0; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                                <thead>
+                                    <tr style="background: #007bff; color: white;">
+                                        <th style="padding: 1rem; text-align: left; border: 1px solid #dee2e6; font-weight: 600;">Color Category</th>
+                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Biology</th>
+                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Chemistry</th>
+                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Computer Science</th>
+                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Physics</th>
+                                        <th style="padding: 1rem; text-align: center; border: 1px solid #dee2e6; font-weight: 600;">Mathematics</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr style="background: rgba(255, 107, 107, 0.1);">
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
+                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #ff6b6b; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
+                                            Red<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#ff6b6b)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Triggers & Inputs</span>
+                                        </td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Environmental signals<br>Nutrient availability<br>Stress conditions<br>Hormonal cues</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Reactant supply<br>Temperature<br>Pressure<br>Catalyst addition</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Input data<br>User commands<br>System parameters<br>External APIs</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Energy input<br>Force application<br>Field strength<br>Initial conditions</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Axioms<br>Given conditions<br>Initial values<br>Boundary conditions</td>
+                                    </tr>
+                                    <tr style="background: rgba(255, 212, 59, 0.1);">
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
+                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #ffd43b; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
+                                            Yellow<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#ffd43b)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Structures & Objects</span>
+                                        </td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Enzymes<br>Receptor proteins<br>Regulatory complexes<br>Structural proteins</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Catalysts<br>Reaction vessels<br>Separation media<br>Analytical instruments</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Data structures<br>Algorithms<br>Functions<br>Classes</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Fields<br>Particles<br>Waves<br>Measurement devices</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Theorems<br>Methods<br>Formulas<br>Logical frameworks</td>
+                                    </tr>
+                                    <tr style="background: rgba(81, 207, 102, 0.1);">
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
+                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #51cf66; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
+                                            Green<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#51cf66)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Processing & Operations</span>
+                                        </td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Metabolic reactions<br>Signal transduction<br>Gene expression<br>Protein synthesis</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Chemical reactions<br>Equilibrium shifts<br>Phase changes<br>Kinetic processes</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Algorithm execution<br>Data processing<br>Logical operations<br>Control flow</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Wave propagation<br>Quantum operations<br>Energy transfer<br>Force interactions</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Logical steps<br>Calculations<br>Proof construction<br>Deductive reasoning</td>
+                                    </tr>
+                                    <tr style="background: rgba(116, 192, 252, 0.1);">
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
+                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #74c0fc; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
+                                            Blue<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#74c0fc)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Intermediates & States</span>
+                                        </td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Metabolites<br>Signaling molecules<br>Protein complexes<br>Regulatory states</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Reaction intermediates<br>Transition states<br>Product mixtures<br>Process streams</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Variables<br>Memory states<br>Function calls<br>Data transformations</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Quantum states<br>Energy levels<br>Wave functions<br>Measurement results</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Intermediate results<br>Sub-proofs<br>Calculated values<br>Logical states</td>
+                                    </tr>
+                                    <tr style="background: rgba(177, 151, 252, 0.1);">
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; font-weight: 600; text-align: center;">
+                                            <span style="width: 20px; height: 20px; border-radius: 4px; background: #b197fc; border: 1px solid #333; display: inline-block; margin-bottom: 0.5rem;"></span><br>
+                                            Violet<br><span style="font-size: 0.8em; font-weight: normal; color: #666;">(#b197fc)</span><br><span style="font-size: 0.8em; font-weight: normal; color: #666;">Products & Outputs</span>
+                                        </td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Biomolecules<br>Cellular responses<br>Organismal behaviors<br>Population changes</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Final products<br>Reaction yields<br>Process outputs<br>Analytical results</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Program outputs<br>Computed results<br>System responses<br>User interfaces</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Measured quantities<br>Physical phenomena<br>Energy states<br>System behaviors</td>
+                                        <td style="padding: 1rem; border: 1px solid #dee2e6; text-align: center;">Proven theorems<br>Mathematical results<br>Logical conclusions<br>Computed solutions</td>
+                                    </tr>
+                                </tbody>
+                            </table>
                         </div>
-                        <div class="resource">
-                            <h3>Blue (#74c0fc)</h3>
-                            <p>Intermediates & States</p>
-                            <p>Biology: Metabolites · Chemistry: Intermediates · CS: Variables · Physics: States · Math: Intermediates</p>
-                        </div>
-                        <div class="resource">
-                            <h3>Violet (#b197fc)</h3>
-                            <p>Products & Outputs</p>
-                            <p>Biology: Biomolecules · Chemistry: Final products · CS: Program outputs · Physics: Phenomena · Math: Results</p>
+                        <div style="background: #fff3cd; padding: 1rem; border-radius: 6px; margin-top: 1rem; border-left: 4px solid #ffc107;">
+                            <p style="margin: 0; font-size: 0.9em;"><strong>Note:</strong> Yellow nodes use black text for optimal readability, while all other colors use white text.</p>
                         </div>
                     </div>
                 </div>
 
                 <div class="card">
-                    <h2>Mini Examples</h2>
-                    <div class="features">
-                        <div class="feature">
-                            <h3>Biology</h3>
-                            <div class="mermaid">graph TD; A[Glucose Input]-->B[Transport]; B-->C[Metabolism]; C-->D[ATP]; style A fill:#ff6b6b,color:#fff; style B fill:#ffd43b,color:#000; style C fill:#51cf66,color:#fff; style D fill:#b197fc,color:#fff;</div>
-                            <p><a href="programming_framework_article.html" target="_blank">Read article</a> · <a href="https://huggingface.co/spaces/garywelz/glmp" target="_blank">GLMP Space</a></p>
+                    <h2>Example: QuickSort Algorithm Process</h2>
+                    <p>This example demonstrates how the Programming Framework visualizes a computer science process using the universal color coding system:</p>
+                    <div class="mermaid">
+graph TD
+    A[Input Array] --> B[Choose Pivot]
+    B --> C[Partition Array]
+    C --> D[Recursive Sort Left]
+    C --> E[Recursive Sort Right]
+    D --> F[Merge Results]
+    E --> F
+    F --> G[Sorted Array]
+    
+    style A fill:#ff6b6b,color:#fff
+    style B fill:#ffd43b,color:#000
+    style C fill:#51cf66,color:#fff
+    style D fill:#74c0fc,color:#fff
+    style E fill:#74c0fc,color:#fff
+    style F fill:#51cf66,color:#fff
+    style G fill:#b197fc,color:#fff
+                    </div>
+                    <div style="display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: .5rem 1rem; margin: 1rem 0 0; font-size: 10pt; color: #333;">
+                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
+                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#ff6b6b;"></span>Input Data
                         </div>
-                        <div class="feature">
-                            <h3>Chemistry</h3>
-                            <div class="mermaid">graph TD; A[Reactants]-->B[Catalyst]; B-->C[Reaction]; C-->D[Products]; style A fill:#ff6b6b,color:#fff; style B fill:#ffd43b,color:#000; style C fill:#51cf66,color:#fff; style D fill:#b197fc,color:#fff;</div>
-                            <p><a href="chemistry_examples.html" target="_blank">Chemistry examples</a></p>
+                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
+                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#ffd43b;"></span>Algorithm Structure
                         </div>
-                        <div class="feature">
-                            <h3>Computer Science</h3>
-                            <div class="mermaid">graph TD; A[Input Array]-->B[Partition]; B-->C[Recurse]; C-->D[Sorted Output]; style A fill:#ff6b6b,color:#fff; style B fill:#51cf66,color:#fff; style C fill:#74c0fc,color:#fff; style D fill:#b197fc,color:#fff;</div>
-                            <p><a href="computer_science_processes.html" target="_blank">CS processes</a></p>
+                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
+                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#51cf66;"></span>Processing Operations
                         </div>
-                        <div class="feature">
-                            <h3>Physics</h3>
-                            <div class="mermaid">graph TD; A[Energy Input]-->B[State Prep]; B-->C[Evolution]; C-->D[Measurement]; style A fill:#ff6b6b,color:#fff; style B fill:#ffd43b,color:#000; style C fill:#51cf66,color:#fff; style D fill:#b197fc,color:#fff;</div>
-                            <p><a href="physics_processes.html" target="_blank">Physics processes</a></p>
+                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
+                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#74c0fc;"></span>Intermediate States
                         </div>
-                        <div class="feature">
-                            <h3>Mathematics</h3>
-                            <div class="mermaid">graph TD; A[Axioms]-->B[Deduction]; B-->C[Intermediate]; C-->D[Theorem]; style A fill:#ff6b6b,color:#fff; style B fill:#51cf66,color:#fff; style C fill:#74c0fc,color:#fff; style D fill:#b197fc,color:#fff;</div>
-                            <p><a href="mathematics_processes.html" target="_blank">Math processes</a></p>
+                        <div style="display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background:#fff;">
+                            <span style="width: 12px; height: 12px; border-radius: 2px; border:1px solid rgba(0,0,0,.15); background:#b197fc;"></span>Final Output
                         </div>
                     </div>
                 </div>
@@ -96,6 +154,7 @@
                     <h2>Explore Examples</h2>
                     <ul>
                         <li><a href="programming_framework_article.html" target="_blank">Full article with biology examples</a></li>
+                        <li><a href="biology_processes.html" target="_blank">Biology processes (GLMP examples)</a></li>
                         <li><a href="chemistry_examples.html" target="_blank">Chemistry examples</a></li>
                         <li><a href="computer_science_processes.html" target="_blank">Computer Science processes</a></li>
                         <li><a href="physics_processes.html" target="_blank">Physics processes</a></li>
@@ -120,6 +179,7 @@
                         <div class="resource">
                             <h3>Discipline Pages</h3>
                             <ul>
+                                <li><a href="biology_processes.html" target="_blank">Biology</a></li>
                                 <li><a href="chemistry_examples.html" target="_blank">Chemistry</a></li>
                                 <li><a href="computer_science_processes.html" target="_blank">Computer Science</a></li>
                                 <li><a href="physics_processes.html" target="_blank">Physics</a></li>