Hugging Face's logo

Spaces:
garywelz
/
programming_framework
Running

App Files Community
garywelz commited on
Commit
228ea51
·
verified ·
1 Parent(s): df69724

Upload 23 files

Browse files
Files changed (4) hide show
  1. chemistry_index.html +170 -9
  2. computer_science_index.html +170 -9
  3. mathematics_index.html +170 -9
  4. physics_index.html +170 -9
chemistry_index.html CHANGED
@@ -4,7 +4,167 @@
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Chemistry - Programming Framework Analysis</title>
7
- <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
9
  <script>
10
  mermaid.initialize({
@@ -17,16 +177,17 @@
17
  nodeSpacing: 30,
18
  rankSpacing: 30,
19
  padding: 10
 
 
 
20
  }
21
  });
22
  </script>
23
  </head>
24
  <body>
25
  <div class="container">
26
- <header>
27
- <h1>⚗️ Chemistry - Programming Framework Analysis</h1>
28
- <p class="subtitle">Systematic visualization of chemical processes and reaction mechanisms</p>
29
- </header>
30
 
31
  <section class="overview">
32
  <h2>Chemistry Overview</h2>
@@ -140,8 +301,8 @@
140
  </div>
141
  </section>
142
 
143
- <section class="navigation">
144
- <h2>Navigation</h2>
145
  <div class="nav-links">
146
  <a href="index.html" class="nav-link">← Back to Programming Framework</a>
147
  <a href="mathematics_index.html" class="nav-link">Mathematics Processes</a>
@@ -151,7 +312,7 @@
151
  </div>
152
  </section>
153
 
154
- <footer>
155
  <p><strong>Generated using the Programming Framework methodology</strong></p>
156
  <p>Each flowchart preserves maximum detail through optimized Mermaid configuration</p>
157
  <div class="contact-info">
@@ -162,7 +323,7 @@
162
  <p>CUNY Graduate Center (New Media Lab)</p>
163
  <p>Email: gwelz@jjay.cuny.edu</p>
164
  </div>
165
- </footer>
166
  </div>
167
  </body>
168
  </html>
 
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Chemistry - Programming Framework Analysis</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Times New Roman', Times, serif, 'Arial Unicode MS';
10
+ margin: 0;
11
+ background: #ffffff;
12
+ color: #000000;
13
+ line-height: 1.6;
14
+ font-size: 12pt;
15
+ }
16
+ .container {
17
+ max-width: 1000px;
18
+ margin: 0 auto;
19
+ padding: 1.5rem;
20
+ }
21
+ h1, h2, h3 {
22
+ color: #000000;
23
+ margin-top: 1.5rem;
24
+ margin-bottom: 0.75rem;
25
+ }
26
+ h1 {
27
+ font-size: 18pt;
28
+ text-align: center;
29
+ }
30
+ h2 {
31
+ font-size: 16pt;
32
+ border-bottom: 2px solid #000;
33
+ padding-bottom: 0.5rem;
34
+ }
35
+ h3 {
36
+ font-size: 14pt;
37
+ }
38
+ p {
39
+ margin-bottom: 1rem;
40
+ text-align: justify;
41
+ }
42
+ .subtitle {
43
+ text-align: center;
44
+ font-style: italic;
45
+ color: #666;
46
+ margin-bottom: 2rem;
47
+ }
48
+ .overview {
49
+ margin: 2rem 0;
50
+ padding: 1.5rem;
51
+ background: #f8f9fa;
52
+ border-radius: 8px;
53
+ }
54
+ .color-legend {
55
+ margin: 2rem 0;
56
+ }
57
+ .color-grid {
58
+ display: flex;
59
+ flex-wrap: wrap;
60
+ gap: 1rem;
61
+ justify-content: center;
62
+ margin: 1rem 0;
63
+ }
64
+ .color-item {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 0.5rem;
68
+ padding: 0.5rem 1rem;
69
+ background: white;
70
+ border: 1px solid #ddd;
71
+ border-radius: 4px;
72
+ }
73
+ .color-box {
74
+ width: 20px;
75
+ height: 20px;
76
+ border-radius: 4px;
77
+ border: 1px solid #ccc;
78
+ }
79
+ .batch-navigation {
80
+ margin: 3rem 0;
81
+ }
82
+ .batch-category {
83
+ margin: 2rem 0;
84
+ padding: 1.5rem;
85
+ background: #f8f9fa;
86
+ border-radius: 8px;
87
+ }
88
+ .batch-links {
89
+ margin-top: 1rem;
90
+ }
91
+ .batch-link {
92
+ display: block;
93
+ padding: 1rem;
94
+ background: white;
95
+ border: 1px solid #ddd;
96
+ border-radius: 8px;
97
+ text-decoration: none;
98
+ color: #000;
99
+ transition: all 0.3s ease;
100
+ margin-bottom: 1rem;
101
+ }
102
+ .batch-link:hover {
103
+ background: #007bff;
104
+ color: white;
105
+ transform: translateY(-2px);
106
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
107
+ }
108
+ .batch-number {
109
+ display: block;
110
+ font-weight: bold;
111
+ color: #007bff;
112
+ }
113
+ .batch-link:hover .batch-number {
114
+ color: white;
115
+ }
116
+ .batch-title {
117
+ display: block;
118
+ font-size: 14pt;
119
+ margin: 0.5rem 0;
120
+ }
121
+ .batch-count {
122
+ display: block;
123
+ font-size: 10pt;
124
+ color: #666;
125
+ }
126
+ .batch-link:hover .batch-count {
127
+ color: #ccc;
128
+ }
129
+ .navigation {
130
+ margin: 3rem 0;
131
+ padding: 1rem;
132
+ background: #f8f9fa;
133
+ border-radius: 8px;
134
+ }
135
+ .nav-links {
136
+ display: flex;
137
+ flex-wrap: wrap;
138
+ gap: 1rem;
139
+ justify-content: center;
140
+ }
141
+ .nav-link {
142
+ color: #007bff;
143
+ text-decoration: none;
144
+ padding: 0.5rem 1rem;
145
+ border: 1px solid #007bff;
146
+ border-radius: 4px;
147
+ transition: all 0.3s ease;
148
+ }
149
+ .nav-link:hover {
150
+ background: #007bff;
151
+ color: white;
152
+ }
153
+ .footer {
154
+ margin-top: 3rem;
155
+ padding: 1rem;
156
+ background: #f8f9fa;
157
+ border-radius: 8px;
158
+ text-align: center;
159
+ }
160
+ .contact-info {
161
+ margin-top: 1rem;
162
+ }
163
+ .contact-info p {
164
+ margin: 0.25rem 0;
165
+ text-align: center;
166
+ }
167
+ </style>
168
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
169
  <script>
170
  mermaid.initialize({
 
177
  nodeSpacing: 30,
178
  rankSpacing: 30,
179
  padding: 10
180
+ },
181
+ themeVariables: {
182
+ fontFamily: 'Arial Unicode MS, Arial, sans-serif'
183
  }
184
  });
185
  </script>
186
  </head>
187
  <body>
188
  <div class="container">
189
+ <h1>Chemistry - Programming Framework Analysis</h1>
190
+ <p class="subtitle">Systematic visualization of chemical processes and reaction mechanisms</p>
 
 
191
 
192
  <section class="overview">
193
  <h2>Chemistry Overview</h2>
 
301
  </div>
302
  </section>
303
 
304
+ <div class="navigation">
305
+ <h3>Navigation</h3>
306
  <div class="nav-links">
307
  <a href="index.html" class="nav-link">← Back to Programming Framework</a>
308
  <a href="mathematics_index.html" class="nav-link">Mathematics Processes</a>
 
312
  </div>
313
  </section>
314
 
315
+ <div class="footer">
316
  <p><strong>Generated using the Programming Framework methodology</strong></p>
317
  <p>Each flowchart preserves maximum detail through optimized Mermaid configuration</p>
318
  <div class="contact-info">
 
323
  <p>CUNY Graduate Center (New Media Lab)</p>
324
  <p>Email: gwelz@jjay.cuny.edu</p>
325
  </div>
326
+ </div>
327
  </div>
328
  </body>
329
  </html>
computer_science_index.html CHANGED
@@ -4,7 +4,167 @@
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Computer Science - Programming Framework Analysis</title>
7
- <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
9
  <script>
10
  mermaid.initialize({
@@ -17,16 +177,17 @@
17
  nodeSpacing: 30,
18
  rankSpacing: 30,
19
  padding: 10
 
 
 
20
  }
21
  });
22
  </script>
23
  </head>
24
  <body>
25
  <div class="container">
26
- <header>
27
- <h1>💻 Computer Science - Programming Framework Analysis</h1>
28
- <p class="subtitle">Systematic visualization of algorithms and computational processes</p>
29
- </header>
30
 
31
  <section class="overview">
32
  <h2>Computer Science Overview</h2>
@@ -140,8 +301,8 @@
140
  </div>
141
  </section>
142
 
143
- <section class="navigation">
144
- <h2>Navigation</h2>
145
  <div class="nav-links">
146
  <a href="index.html" class="nav-link">← Back to Programming Framework</a>
147
  <a href="mathematics_index.html" class="nav-link">Mathematics Processes</a>
@@ -151,7 +312,7 @@
151
  </div>
152
  </section>
153
 
154
- <footer>
155
  <p><strong>Generated using the Programming Framework methodology</strong></p>
156
  <p>Each flowchart preserves maximum detail through optimized Mermaid configuration</p>
157
  <div class="contact-info">
@@ -162,7 +323,7 @@
162
  <p>CUNY Graduate Center (New Media Lab)</p>
163
  <p>Email: gwelz@jjay.cuny.edu</p>
164
  </div>
165
- </footer>
166
  </div>
167
  </body>
168
  </html>
 
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Computer Science - Programming Framework Analysis</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Times New Roman', Times, serif, 'Arial Unicode MS';
10
+ margin: 0;
11
+ background: #ffffff;
12
+ color: #000000;
13
+ line-height: 1.6;
14
+ font-size: 12pt;
15
+ }
16
+ .container {
17
+ max-width: 1000px;
18
+ margin: 0 auto;
19
+ padding: 1.5rem;
20
+ }
21
+ h1, h2, h3 {
22
+ color: #000000;
23
+ margin-top: 1.5rem;
24
+ margin-bottom: 0.75rem;
25
+ }
26
+ h1 {
27
+ font-size: 18pt;
28
+ text-align: center;
29
+ }
30
+ h2 {
31
+ font-size: 16pt;
32
+ border-bottom: 2px solid #000;
33
+ padding-bottom: 0.5rem;
34
+ }
35
+ h3 {
36
+ font-size: 14pt;
37
+ }
38
+ p {
39
+ margin-bottom: 1rem;
40
+ text-align: justify;
41
+ }
42
+ .subtitle {
43
+ text-align: center;
44
+ font-style: italic;
45
+ color: #666;
46
+ margin-bottom: 2rem;
47
+ }
48
+ .overview {
49
+ margin: 2rem 0;
50
+ padding: 1.5rem;
51
+ background: #f8f9fa;
52
+ border-radius: 8px;
53
+ }
54
+ .color-legend {
55
+ margin: 2rem 0;
56
+ }
57
+ .color-grid {
58
+ display: flex;
59
+ flex-wrap: wrap;
60
+ gap: 1rem;
61
+ justify-content: center;
62
+ margin: 1rem 0;
63
+ }
64
+ .color-item {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 0.5rem;
68
+ padding: 0.5rem 1rem;
69
+ background: white;
70
+ border: 1px solid #ddd;
71
+ border-radius: 4px;
72
+ }
73
+ .color-box {
74
+ width: 20px;
75
+ height: 20px;
76
+ border-radius: 4px;
77
+ border: 1px solid #ccc;
78
+ }
79
+ .batch-navigation {
80
+ margin: 3rem 0;
81
+ }
82
+ .batch-category {
83
+ margin: 2rem 0;
84
+ padding: 1.5rem;
85
+ background: #f8f9fa;
86
+ border-radius: 8px;
87
+ }
88
+ .batch-links {
89
+ margin-top: 1rem;
90
+ }
91
+ .batch-link {
92
+ display: block;
93
+ padding: 1rem;
94
+ background: white;
95
+ border: 1px solid #ddd;
96
+ border-radius: 8px;
97
+ text-decoration: none;
98
+ color: #000;
99
+ transition: all 0.3s ease;
100
+ margin-bottom: 1rem;
101
+ }
102
+ .batch-link:hover {
103
+ background: #007bff;
104
+ color: white;
105
+ transform: translateY(-2px);
106
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
107
+ }
108
+ .batch-number {
109
+ display: block;
110
+ font-weight: bold;
111
+ color: #007bff;
112
+ }
113
+ .batch-link:hover .batch-number {
114
+ color: white;
115
+ }
116
+ .batch-title {
117
+ display: block;
118
+ font-size: 14pt;
119
+ margin: 0.5rem 0;
120
+ }
121
+ .batch-count {
122
+ display: block;
123
+ font-size: 10pt;
124
+ color: #666;
125
+ }
126
+ .batch-link:hover .batch-count {
127
+ color: #ccc;
128
+ }
129
+ .navigation {
130
+ margin: 3rem 0;
131
+ padding: 1rem;
132
+ background: #f8f9fa;
133
+ border-radius: 8px;
134
+ }
135
+ .nav-links {
136
+ display: flex;
137
+ flex-wrap: wrap;
138
+ gap: 1rem;
139
+ justify-content: center;
140
+ }
141
+ .nav-link {
142
+ color: #007bff;
143
+ text-decoration: none;
144
+ padding: 0.5rem 1rem;
145
+ border: 1px solid #007bff;
146
+ border-radius: 4px;
147
+ transition: all 0.3s ease;
148
+ }
149
+ .nav-link:hover {
150
+ background: #007bff;
151
+ color: white;
152
+ }
153
+ .footer {
154
+ margin-top: 3rem;
155
+ padding: 1rem;
156
+ background: #f8f9fa;
157
+ border-radius: 8px;
158
+ text-align: center;
159
+ }
160
+ .contact-info {
161
+ margin-top: 1rem;
162
+ }
163
+ .contact-info p {
164
+ margin: 0.25rem 0;
165
+ text-align: center;
166
+ }
167
+ </style>
168
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
169
  <script>
170
  mermaid.initialize({
 
177
  nodeSpacing: 30,
178
  rankSpacing: 30,
179
  padding: 10
180
+ },
181
+ themeVariables: {
182
+ fontFamily: 'Arial Unicode MS, Arial, sans-serif'
183
  }
184
  });
185
  </script>
186
  </head>
187
  <body>
188
  <div class="container">
189
+ <h1>Computer Science - Programming Framework Analysis</h1>
190
+ <p class="subtitle">Systematic visualization of algorithms and computational processes</p>
 
 
191
 
192
  <section class="overview">
193
  <h2>Computer Science Overview</h2>
 
301
  </div>
302
  </section>
303
 
304
+ <div class="navigation">
305
+ <h3>Navigation</h3>
306
  <div class="nav-links">
307
  <a href="index.html" class="nav-link">← Back to Programming Framework</a>
308
  <a href="mathematics_index.html" class="nav-link">Mathematics Processes</a>
 
312
  </div>
313
  </section>
314
 
315
+ <div class="footer">
316
  <p><strong>Generated using the Programming Framework methodology</strong></p>
317
  <p>Each flowchart preserves maximum detail through optimized Mermaid configuration</p>
318
  <div class="contact-info">
 
323
  <p>CUNY Graduate Center (New Media Lab)</p>
324
  <p>Email: gwelz@jjay.cuny.edu</p>
325
  </div>
326
+ </div>
327
  </div>
328
  </body>
329
  </html>
mathematics_index.html CHANGED
@@ -4,7 +4,167 @@
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Mathematics - Programming Framework Analysis</title>
7
- <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
9
  <script>
10
  mermaid.initialize({
@@ -17,16 +177,17 @@
17
  nodeSpacing: 30,
18
  rankSpacing: 30,
19
  padding: 10
 
 
 
20
  }
21
  });
22
  </script>
23
  </head>
24
  <body>
25
  <div class="container">
26
- <header>
27
- <h1>📐 Mathematics - Programming Framework Analysis</h1>
28
- <p class="subtitle">Systematic visualization of mathematical processes and computational logic</p>
29
- </header>
30
 
31
  <section class="overview">
32
  <h2>Mathematics Overview</h2>
@@ -140,8 +301,8 @@
140
  </div>
141
  </section>
142
 
143
- <section class="navigation">
144
- <h2>Navigation</h2>
145
  <div class="nav-links">
146
  <a href="index.html" class="nav-link">← Back to Programming Framework</a>
147
  <a href="biology_processes.html" class="nav-link">Biology Processes</a>
@@ -151,7 +312,7 @@
151
  </div>
152
  </section>
153
 
154
- <footer>
155
  <p><strong>Generated using the Programming Framework methodology</strong></p>
156
  <p>Each flowchart preserves maximum detail through optimized Mermaid configuration</p>
157
  <div class="contact-info">
@@ -162,7 +323,7 @@
162
  <p>CUNY Graduate Center (New Media Lab)</p>
163
  <p>Email: gwelz@jjay.cuny.edu</p>
164
  </div>
165
- </footer>
166
  </div>
167
  </body>
168
  </html>
 
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Mathematics - Programming Framework Analysis</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Times New Roman', Times, serif, 'Arial Unicode MS';
10
+ margin: 0;
11
+ background: #ffffff;
12
+ color: #000000;
13
+ line-height: 1.6;
14
+ font-size: 12pt;
15
+ }
16
+ .container {
17
+ max-width: 1000px;
18
+ margin: 0 auto;
19
+ padding: 1.5rem;
20
+ }
21
+ h1, h2, h3 {
22
+ color: #000000;
23
+ margin-top: 1.5rem;
24
+ margin-bottom: 0.75rem;
25
+ }
26
+ h1 {
27
+ font-size: 18pt;
28
+ text-align: center;
29
+ }
30
+ h2 {
31
+ font-size: 16pt;
32
+ border-bottom: 2px solid #000;
33
+ padding-bottom: 0.5rem;
34
+ }
35
+ h3 {
36
+ font-size: 14pt;
37
+ }
38
+ p {
39
+ margin-bottom: 1rem;
40
+ text-align: justify;
41
+ }
42
+ .subtitle {
43
+ text-align: center;
44
+ font-style: italic;
45
+ color: #666;
46
+ margin-bottom: 2rem;
47
+ }
48
+ .overview {
49
+ margin: 2rem 0;
50
+ padding: 1.5rem;
51
+ background: #f8f9fa;
52
+ border-radius: 8px;
53
+ }
54
+ .color-legend {
55
+ margin: 2rem 0;
56
+ }
57
+ .color-grid {
58
+ display: flex;
59
+ flex-wrap: wrap;
60
+ gap: 1rem;
61
+ justify-content: center;
62
+ margin: 1rem 0;
63
+ }
64
+ .color-item {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 0.5rem;
68
+ padding: 0.5rem 1rem;
69
+ background: white;
70
+ border: 1px solid #ddd;
71
+ border-radius: 4px;
72
+ }
73
+ .color-box {
74
+ width: 20px;
75
+ height: 20px;
76
+ border-radius: 4px;
77
+ border: 1px solid #ccc;
78
+ }
79
+ .batch-navigation {
80
+ margin: 3rem 0;
81
+ }
82
+ .batch-category {
83
+ margin: 2rem 0;
84
+ padding: 1.5rem;
85
+ background: #f8f9fa;
86
+ border-radius: 8px;
87
+ }
88
+ .batch-links {
89
+ margin-top: 1rem;
90
+ }
91
+ .batch-link {
92
+ display: block;
93
+ padding: 1rem;
94
+ background: white;
95
+ border: 1px solid #ddd;
96
+ border-radius: 8px;
97
+ text-decoration: none;
98
+ color: #000;
99
+ transition: all 0.3s ease;
100
+ margin-bottom: 1rem;
101
+ }
102
+ .batch-link:hover {
103
+ background: #007bff;
104
+ color: white;
105
+ transform: translateY(-2px);
106
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
107
+ }
108
+ .batch-number {
109
+ display: block;
110
+ font-weight: bold;
111
+ color: #007bff;
112
+ }
113
+ .batch-link:hover .batch-number {
114
+ color: white;
115
+ }
116
+ .batch-title {
117
+ display: block;
118
+ font-size: 14pt;
119
+ margin: 0.5rem 0;
120
+ }
121
+ .batch-count {
122
+ display: block;
123
+ font-size: 10pt;
124
+ color: #666;
125
+ }
126
+ .batch-link:hover .batch-count {
127
+ color: #ccc;
128
+ }
129
+ .navigation {
130
+ margin: 3rem 0;
131
+ padding: 1rem;
132
+ background: #f8f9fa;
133
+ border-radius: 8px;
134
+ }
135
+ .nav-links {
136
+ display: flex;
137
+ flex-wrap: wrap;
138
+ gap: 1rem;
139
+ justify-content: center;
140
+ }
141
+ .nav-link {
142
+ color: #007bff;
143
+ text-decoration: none;
144
+ padding: 0.5rem 1rem;
145
+ border: 1px solid #007bff;
146
+ border-radius: 4px;
147
+ transition: all 0.3s ease;
148
+ }
149
+ .nav-link:hover {
150
+ background: #007bff;
151
+ color: white;
152
+ }
153
+ .footer {
154
+ margin-top: 3rem;
155
+ padding: 1rem;
156
+ background: #f8f9fa;
157
+ border-radius: 8px;
158
+ text-align: center;
159
+ }
160
+ .contact-info {
161
+ margin-top: 1rem;
162
+ }
163
+ .contact-info p {
164
+ margin: 0.25rem 0;
165
+ text-align: center;
166
+ }
167
+ </style>
168
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
169
  <script>
170
  mermaid.initialize({
 
177
  nodeSpacing: 30,
178
  rankSpacing: 30,
179
  padding: 10
180
+ },
181
+ themeVariables: {
182
+ fontFamily: 'Arial Unicode MS, Arial, sans-serif'
183
  }
184
  });
185
  </script>
186
  </head>
187
  <body>
188
  <div class="container">
189
+ <h1>Mathematics - Programming Framework Analysis</h1>
190
+ <p class="subtitle">Systematic visualization of mathematical processes and computational logic</p>
 
 
191
 
192
  <section class="overview">
193
  <h2>Mathematics Overview</h2>
 
301
  </div>
302
  </section>
303
 
304
+ <div class="navigation">
305
+ <h3>Navigation</h3>
306
  <div class="nav-links">
307
  <a href="index.html" class="nav-link">← Back to Programming Framework</a>
308
  <a href="biology_processes.html" class="nav-link">Biology Processes</a>
 
312
  </div>
313
  </section>
314
 
315
+ <div class="footer">
316
  <p><strong>Generated using the Programming Framework methodology</strong></p>
317
  <p>Each flowchart preserves maximum detail through optimized Mermaid configuration</p>
318
  <div class="contact-info">
 
323
  <p>CUNY Graduate Center (New Media Lab)</p>
324
  <p>Email: gwelz@jjay.cuny.edu</p>
325
  </div>
326
+ </div>
327
  </div>
328
  </body>
329
  </html>
physics_index.html CHANGED
@@ -4,7 +4,167 @@
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Physics - Programming Framework Analysis</title>
7
- <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
9
  <script>
10
  mermaid.initialize({
@@ -17,16 +177,17 @@
17
  nodeSpacing: 30,
18
  rankSpacing: 30,
19
  padding: 10
 
 
 
20
  }
21
  });
22
  </script>
23
  </head>
24
  <body>
25
  <div class="container">
26
- <header>
27
- <h1>⚛️ Physics - Programming Framework Analysis</h1>
28
- <p class="subtitle">Systematic visualization of physical processes and quantum phenomena</p>
29
- </header>
30
 
31
  <section class="overview">
32
  <h2>Physics Overview</h2>
@@ -140,8 +301,8 @@
140
  </div>
141
  </section>
142
 
143
- <section class="navigation">
144
- <h2>Navigation</h2>
145
  <div class="nav-links">
146
  <a href="index.html" class="nav-link">← Back to Programming Framework</a>
147
  <a href="mathematics_index.html" class="nav-link">Mathematics Processes</a>
@@ -151,7 +312,7 @@
151
  </div>
152
  </section>
153
 
154
- <footer>
155
  <p><strong>Generated using the Programming Framework methodology</strong></p>
156
  <p>Each flowchart preserves maximum detail through optimized Mermaid configuration</p>
157
  <div class="contact-info">
@@ -162,7 +323,7 @@
162
  <p>CUNY Graduate Center (New Media Lab)</p>
163
  <p>Email: gwelz@jjay.cuny.edu</p>
164
  </div>
165
- </footer>
166
  </div>
167
  </body>
168
  </html>
 
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Physics - Programming Framework Analysis</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Times New Roman', Times, serif, 'Arial Unicode MS';
10
+ margin: 0;
11
+ background: #ffffff;
12
+ color: #000000;
13
+ line-height: 1.6;
14
+ font-size: 12pt;
15
+ }
16
+ .container {
17
+ max-width: 1000px;
18
+ margin: 0 auto;
19
+ padding: 1.5rem;
20
+ }
21
+ h1, h2, h3 {
22
+ color: #000000;
23
+ margin-top: 1.5rem;
24
+ margin-bottom: 0.75rem;
25
+ }
26
+ h1 {
27
+ font-size: 18pt;
28
+ text-align: center;
29
+ }
30
+ h2 {
31
+ font-size: 16pt;
32
+ border-bottom: 2px solid #000;
33
+ padding-bottom: 0.5rem;
34
+ }
35
+ h3 {
36
+ font-size: 14pt;
37
+ }
38
+ p {
39
+ margin-bottom: 1rem;
40
+ text-align: justify;
41
+ }
42
+ .subtitle {
43
+ text-align: center;
44
+ font-style: italic;
45
+ color: #666;
46
+ margin-bottom: 2rem;
47
+ }
48
+ .overview {
49
+ margin: 2rem 0;
50
+ padding: 1.5rem;
51
+ background: #f8f9fa;
52
+ border-radius: 8px;
53
+ }
54
+ .color-legend {
55
+ margin: 2rem 0;
56
+ }
57
+ .color-grid {
58
+ display: flex;
59
+ flex-wrap: wrap;
60
+ gap: 1rem;
61
+ justify-content: center;
62
+ margin: 1rem 0;
63
+ }
64
+ .color-item {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 0.5rem;
68
+ padding: 0.5rem 1rem;
69
+ background: white;
70
+ border: 1px solid #ddd;
71
+ border-radius: 4px;
72
+ }
73
+ .color-box {
74
+ width: 20px;
75
+ height: 20px;
76
+ border-radius: 4px;
77
+ border: 1px solid #ccc;
78
+ }
79
+ .batch-navigation {
80
+ margin: 3rem 0;
81
+ }
82
+ .batch-category {
83
+ margin: 2rem 0;
84
+ padding: 1.5rem;
85
+ background: #f8f9fa;
86
+ border-radius: 8px;
87
+ }
88
+ .batch-links {
89
+ margin-top: 1rem;
90
+ }
91
+ .batch-link {
92
+ display: block;
93
+ padding: 1rem;
94
+ background: white;
95
+ border: 1px solid #ddd;
96
+ border-radius: 8px;
97
+ text-decoration: none;
98
+ color: #000;
99
+ transition: all 0.3s ease;
100
+ margin-bottom: 1rem;
101
+ }
102
+ .batch-link:hover {
103
+ background: #007bff;
104
+ color: white;
105
+ transform: translateY(-2px);
106
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
107
+ }
108
+ .batch-number {
109
+ display: block;
110
+ font-weight: bold;
111
+ color: #007bff;
112
+ }
113
+ .batch-link:hover .batch-number {
114
+ color: white;
115
+ }
116
+ .batch-title {
117
+ display: block;
118
+ font-size: 14pt;
119
+ margin: 0.5rem 0;
120
+ }
121
+ .batch-count {
122
+ display: block;
123
+ font-size: 10pt;
124
+ color: #666;
125
+ }
126
+ .batch-link:hover .batch-count {
127
+ color: #ccc;
128
+ }
129
+ .navigation {
130
+ margin: 3rem 0;
131
+ padding: 1rem;
132
+ background: #f8f9fa;
133
+ border-radius: 8px;
134
+ }
135
+ .nav-links {
136
+ display: flex;
137
+ flex-wrap: wrap;
138
+ gap: 1rem;
139
+ justify-content: center;
140
+ }
141
+ .nav-link {
142
+ color: #007bff;
143
+ text-decoration: none;
144
+ padding: 0.5rem 1rem;
145
+ border: 1px solid #007bff;
146
+ border-radius: 4px;
147
+ transition: all 0.3s ease;
148
+ }
149
+ .nav-link:hover {
150
+ background: #007bff;
151
+ color: white;
152
+ }
153
+ .footer {
154
+ margin-top: 3rem;
155
+ padding: 1rem;
156
+ background: #f8f9fa;
157
+ border-radius: 8px;
158
+ text-align: center;
159
+ }
160
+ .contact-info {
161
+ margin-top: 1rem;
162
+ }
163
+ .contact-info p {
164
+ margin: 0.25rem 0;
165
+ text-align: center;
166
+ }
167
+ </style>
168
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
169
  <script>
170
  mermaid.initialize({
 
177
  nodeSpacing: 30,
178
  rankSpacing: 30,
179
  padding: 10
180
+ },
181
+ themeVariables: {
182
+ fontFamily: 'Arial Unicode MS, Arial, sans-serif'
183
  }
184
  });
185
  </script>
186
  </head>
187
  <body>
188
  <div class="container">
189
+ <h1>Physics - Programming Framework Analysis</h1>
190
+ <p class="subtitle">Systematic visualization of physical processes and quantum phenomena</p>
 
 
191
 
192
  <section class="overview">
193
  <h2>Physics Overview</h2>
 
301
  </div>
302
  </section>
303
 
304
+ <div class="navigation">
305
+ <h3>Navigation</h3>
306
  <div class="nav-links">
307
  <a href="index.html" class="nav-link">← Back to Programming Framework</a>
308
  <a href="mathematics_index.html" class="nav-link">Mathematics Processes</a>
 
312
  </div>
313
  </section>
314
 
315
+ <div class="footer">
316
  <p><strong>Generated using the Programming Framework methodology</strong></p>
317
  <p>Each flowchart preserves maximum detail through optimized Mermaid configuration</p>
318
  <div class="contact-info">
 
323
  <p>CUNY Graduate Center (New Media Lab)</p>
324
  <p>Email: gwelz@jjay.cuny.edu</p>
325
  </div>
326
+ </div>
327
  </div>
328
  </body>
329
  </html>