Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Programming Framework - Systematic Analysis of Complex Systems</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .header { | |
| text-align: center; | |
| color: white; | |
| margin-bottom: 40px; | |
| } | |
| .header h1 { | |
| font-size: 3rem; | |
| margin-bottom: 10px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .header p { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| } | |
| .main-content { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 40px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.2); | |
| margin-bottom: 30px; | |
| } | |
| .overview { | |
| margin-bottom: 40px; | |
| } | |
| .overview h2 { | |
| color: #667eea; | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| border-bottom: 3px solid #667eea; | |
| padding-bottom: 10px; | |
| } | |
| .overview p { | |
| font-size: 1.1rem; | |
| margin-bottom: 15px; | |
| text-align: justify; | |
| } | |
| .color-system { | |
| margin-bottom: 40px; | |
| } | |
| .color-system h2 { | |
| color: #667eea; | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| border-bottom: 3px solid #667eea; | |
| padding-bottom: 10px; | |
| } | |
| .color-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .color-card { | |
| border-radius: 10px; | |
| padding: 20px; | |
| color: white; | |
| text-align: center; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| transition: transform 0.3s ease; | |
| } | |
| .color-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .color-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .color-card p { | |
| font-size: 1rem; | |
| opacity: 0.9; | |
| } | |
| .red { background: linear-gradient(135deg, #ff6b6b, #ee5a52); } | |
| .yellow { background: linear-gradient(135deg, #ffd43b, #fcc419); color: #333; } | |
| .green { background: linear-gradient(135deg, #51cf66, #40c057); } | |
| .blue { background: linear-gradient(135deg, #74c0fc, #4dabf7); } | |
| .violet { background: linear-gradient(135deg, #b197fc, #9775fa); } | |
| .resources { | |
| margin-bottom: 40px; | |
| } | |
| .resources h2 { | |
| color: #667eea; | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| border-bottom: 3px solid #667eea; | |
| padding-bottom: 10px; | |
| } | |
| .resource-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .resource-card { | |
| background: #f8f9fa; | |
| border-radius: 10px; | |
| padding: 25px; | |
| text-align: center; | |
| border: 2px solid #e9ecef; | |
| transition: all 0.3s ease; | |
| } | |
| .resource-card:hover { | |
| border-color: #667eea; | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.1); | |
| } | |
| .resource-card h3 { | |
| color: #667eea; | |
| margin-bottom: 10px; | |
| font-size: 1.3rem; | |
| } | |
| .resource-card p { | |
| margin-bottom: 15px; | |
| color: #666; | |
| } | |
| .resource-card a { | |
| display: inline-block; | |
| background: #667eea; | |
| color: white; | |
| padding: 10px 20px; | |
| text-decoration: none; | |
| border-radius: 25px; | |
| transition: background 0.3s ease; | |
| } | |
| .resource-card a:hover { | |
| background: #5a6fd8; | |
| } | |
| .footer { | |
| background: rgba(255,255,255,0.1); | |
| color: white; | |
| text-align: center; | |
| padding: 30px; | |
| border-radius: 15px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .footer h3 { | |
| margin-bottom: 15px; | |
| font-size: 1.5rem; | |
| } | |
| .footer p { | |
| margin-bottom: 5px; | |
| opacity: 0.9; | |
| } | |
| .footer a { | |
| color: #ffd43b; | |
| text-decoration: none; | |
| } | |
| .footer a:hover { | |
| text-decoration: underline; | |
| } | |
| @media (max-width: 768px) { | |
| .header h1 { | |
| font-size: 2rem; | |
| } | |
| .main-content { | |
| padding: 20px; | |
| } | |
| .color-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .resource-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>🎨 Programming Framework</h1> | |
| <p>Systematic Analysis of Complex Systems Across Disciplines</p> | |
| </div> | |
| <div class="main-content"> | |
| <div class="overview"> | |
| <h2>Project Overview</h2> | |
| <p>The Programming Framework is a systematic visualization methodology for analyzing complex systems across disciplines using Mermaid Markdown and a universal five-color code.</p> | |
| <p>Complex systems across biology, chemistry, and physics exhibit remarkable similarities in their organizational principles despite operating at vastly different scales and domains. Traditional analysis methods often remain siloed within specific disciplines, limiting our ability to identify common patterns and computational logic that govern system behavior.</p> | |
| <p>Here, we present the Programming Framework, a systematic methodology that translates complex system dynamics into standardized computational representations using Mermaid Markdown syntax and LLM processing.</p> | |
| </div> | |
| <div class="color-system"> | |
| <h2>Universal Color Coding System</h2> | |
| <p style="text-align: center; margin-bottom: 20px; font-size: 1.1rem;">The framework uses a standardized five-color system across all disciplines:</p> | |
| <div class="color-grid"> | |
| <div class="color-card red"> | |
| <h3>🔴 Red (#ff6b6b)</h3> | |
| <p><strong>Triggers & Inputs</strong><br> | |
| Environmental signals, reactants, input data, energy sources, axioms</p> | |
| </div> | |
| <div class="color-card yellow"> | |
| <h3>🟡 Yellow (#ffd43b)</h3> | |
| <p><strong>Structures & Objects</strong><br> | |
| Enzymes, catalysts, data structures, fields, theorems</p> | |
| </div> | |
| <div class="color-card green"> | |
| <h3>🟢 Green (#51cf66)</h3> | |
| <p><strong>Processing & Operations</strong><br> | |
| Metabolic reactions, chemical reactions, algorithms, quantum operations</p> | |
| </div> | |
| <div class="color-card blue"> | |
| <h3>🔵 Blue (#74c0fc)</h3> | |
| <p><strong>Intermediates & States</strong><br> | |
| Metabolites, intermediates, variables, states, measurement results</p> | |
| </div> | |
| <div class="color-card violet"> | |
| <h3>🟣 Violet (#b197fc)</h3> | |
| <p><strong>Products & Outputs</strong><br> | |
| Biomolecules, final products, program outputs, phenomena, proven results</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="resources"> | |
| <h2>Key Resources & Documentation</h2> | |
| <div class="resource-grid"> | |
| <div class="resource-card"> | |
| <h3>📚 Complete Documentation</h3> | |
| <p>Detailed methodology, implementation guidelines, and theoretical foundation</p> | |
| <a href="README.md">View README</a> | |
| </div> | |
| <div class="resource-card"> | |
| <h3>🧬 Biology Processes</h3> | |
| <p>Biological system analysis with GLMP integration and examples</p> | |
| <a href="biology_processes.html">Explore Biology</a> | |
| </div> | |
| <div class="resource-card"> | |
| <h3>⚗️ Chemistry Examples</h3> | |
| <p>Chemical reaction mechanisms and process visualizations</p> | |
| <a href="chemistry_examples.html">Explore Chemistry</a> | |
| </div> | |
| <div class="resource-card"> | |
| <h3>💻 Computer Science</h3> | |
| <p>Algorithm and computational process analysis</p> | |
| <a href="computer_science_processes.html">Explore CS</a> | |
| </div> | |
| <div class="resource-card"> | |
| <h3>⚛️ Physics Processes</h3> | |
| <p>Physical system dynamics and quantum processes</p> | |
| <a href="physics_processes.html">Explore Physics</a> | |
| </div> | |
| <div class="resource-card"> | |
| <h3>📐 Mathematics</h3> | |
| <p>Mathematical proof and calculation processes</p> | |
| <a href="mathematics_processes.html">Explore Math</a> | |
| </div> | |
| <div class="resource-card"> | |
| <h3>📖 Academic Article</h3> | |
| <p>Comprehensive framework documentation and methodology</p> | |
| <a href="programming_framework_article.html">Read Article</a> | |
| </div> | |
| <div class="resource-card"> | |
| <h3>🔬 GLMP Foundation</h3> | |
| <p>Original biological systems analysis project</p> | |
| <a href="https://huggingface.co/spaces/garywelz/glmp">Visit GLMP</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <h3>About the Author</h3> | |
| <p><strong>Gary Welz</strong></p> | |
| <p>Retired Faculty Member</p> | |
| <p>John Jay College, CUNY (Department of Mathematics and Computer Science)</p> | |
| <p>Borough of Manhattan Community College, CUNY</p> | |
| <p>CUNY Graduate Center (New Media Lab)</p> | |
| <p>Email: <a href="mailto:gwelz@jjay.cuny.edu">gwelz@jjay.cuny.edu</a></p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |