Hugging Face's logo

Spaces:
garywelz
/
glmp
Running

App Files Community
garywelz commited on
Commit
fd6e122
·
verified ·
1 Parent(s): d439e60

Upload 29 files

Browse files
Files changed (2) hide show
  1. Yeast_Processes_as_Programs.html +208 -12
  2. yeast_top_10_processes.html +358 -27
Yeast_Processes_as_Programs.html CHANGED
@@ -4,19 +4,215 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Yeast Processes as Programs: Evidence for the Genome-as-Computer-Program Thesis</title>
7
- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js">
8
-
9
- </script><style>
10
- body { font-family: 'Georgia', 'Times New Roman', serif; /* Ensure proper rendering of Greek characters */
11
- h1, h2, h3, p, li, a {
12
- font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, \'Arial Unicode MS\', sans-serif;
13
- } line-height: 1.8; margin: 0; padding: 0; background: #f8f9fa; color: #2c3e50; } .container { max-width: 1200px; margin: 0 auto; background: white; box-shadow: 0 0 20px rgba(0,0,0,0.1); } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 3rem 2rem; text-align: center; } .header h1 { margin: 0; font-size: 3rem; font-weight: 300; margin-bottom: 1rem; } .header p { margin: 0; font-size: 1.4rem; opacity: 0.9; max-width: 800px; margin: 0 auto; } .content { padding: 3rem 2rem; } .intro { background: #e8f4fd; padding: 2rem; border-radius: 8px; margin-bottom: 3rem; border-left: 5px solid #007bff; font-size: 1.1rem; } .section { margin-bottom: 4rem; } .section h2 { color: #2c3e50; border-bottom: 3px solid #007bff; padding-bottom: 0.5rem; margin-bottom: 2rem; font-size: 2rem; } .process-showcase { margin: 3rem 0; padding: 2rem; border: 1px solid #dee2e6; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .process-showcase.featured { border: 3px solid #28a745; background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%); } .process-showcase h3 { color: #495057; margin-top: 0; margin-bottom: 1rem; font-size: 1.5rem; } .process-showcase.featured h3 { color: #28a745; font-size: 1.7rem; } .process-description { background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; border-left: 4px solid #007bff; } .process-description h4 { color: #007bff; margin-top: 0; margin-bottom: 1rem; } .mermaid-container { background: white; padding: 1rem; border-radius: 8px; margin: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow-x: auto; } .mermaid { font-family: Arial, sans-serif !important; /* Ensure proper rendering of Greek characters */
14
- h1, h2, h3, p, li, a {
15
- font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, \'Arial Unicode MS\', sans-serif;
16
- } font-size: 14px !important; } .mermaid .node rect, .mermaid .node circle, .mermaid .node ellipse, .mermaid .node polygon { stroke-width: 2px !important; } .mermaid .label { font-family: Arial, sans-serif !important; /* Ensure proper rendering of Greek characters */
 
17
  h1, h2, h3, p, li, a {
18
- font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, \'Arial Unicode MS\', sans-serif;
19
- } font-size: 14px !important; } .color-legend { background: #f8f9fa; padding: 2rem; border-radius: 8px; margin: 2rem 0; } .color-legend h4 { margin-top: 0; color: #495057; } .color-legend ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; } .color-legend li { padding: 0.5rem; border-radius: 4px; font-weight: 500; } .conclusion { background: #e8f5e8; padding: 2rem; border-radius: 8px; margin-top: 3rem; border-left: 5px solid #28a745; } .conclusion h2 { color: #28a745; margin-top: 0; } .footer { background: #343a40; color: white; text-align: center; padding: 2rem; margin-top: 3rem; } blockquote { border-left: 4px solid #007bff; padding-left: 1rem; margin: 2rem 0; font-style: italic; background: #f8f9fa; padding: 1rem; border-radius: 4px; font-size: 1.1rem; } .highlight-box { background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%); padding: 1.5rem; border-radius: 8px; border-left: 5px solid #ffc107; margin: 2rem 0; } .key-insight { background: #d1ecf1; padding: 1rem; border-radius: 6px; margin: 1rem 0; border-left: 4px solid #0dcaf0; } .key-insight strong { color: #0c63e4; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  </style></head>
21
  <body>
22
  <div class="container">
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Yeast Processes as Programs: Evidence for the Genome-as-Computer-Program Thesis</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
8
+ <style>
9
+ body {
10
+ font-family: 'Georgia', 'Times New Roman', serif;
11
+ line-height: 1.8;
12
+ margin: 0;
13
+ padding: 0;
14
+ background: #f8f9fa;
15
+ color: #2c3e50;
16
+ }
17
+
18
  h1, h2, h3, p, li, a {
19
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 'Arial Unicode MS', sans-serif;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1200px;
24
+ margin: 0 auto;
25
+ background: white;
26
+ box-shadow: 0 0 20px rgba(0,0,0,0.1);
27
+ }
28
+
29
+ .header {
30
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
31
+ color: white;
32
+ padding: 3rem 2rem;
33
+ text-align: center;
34
+ }
35
+
36
+ .header h1 {
37
+ margin: 0;
38
+ font-size: 3rem;
39
+ font-weight: 300;
40
+ margin-bottom: 1rem;
41
+ }
42
+
43
+ .header p {
44
+ margin: 0;
45
+ font-size: 1.4rem;
46
+ opacity: 0.9;
47
+ max-width: 800px;
48
+ margin: 0 auto;
49
+ }
50
+
51
+ .content {
52
+ padding: 3rem 2rem;
53
+ }
54
+
55
+ .intro {
56
+ background: #e8f4fd;
57
+ padding: 2rem;
58
+ border-radius: 8px;
59
+ margin-bottom: 3rem;
60
+ border-left: 5px solid #007bff;
61
+ font-size: 1.1rem;
62
+ }
63
+
64
+ .section {
65
+ margin-bottom: 4rem;
66
+ }
67
+
68
+ .section h2 {
69
+ color: #2c3e50;
70
+ border-bottom: 3px solid #007bff;
71
+ padding-bottom: 0.5rem;
72
+ margin-bottom: 2rem;
73
+ font-size: 2rem;
74
+ }
75
+
76
+ .process-showcase {
77
+ margin: 3rem 0;
78
+ padding: 2rem;
79
+ border: 1px solid #dee2e6;
80
+ border-radius: 12px;
81
+ background: #fff;
82
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
83
+ }
84
+
85
+ .process-showcase.featured {
86
+ border: 3px solid #28a745;
87
+ background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
88
+ }
89
+
90
+ .process-showcase h3 {
91
+ color: #495057;
92
+ margin-top: 0;
93
+ margin-bottom: 1rem;
94
+ font-size: 1.5rem;
95
+ }
96
+
97
+ .process-showcase.featured h3 {
98
+ color: #28a745;
99
+ font-size: 1.7rem;
100
+ }
101
+
102
+ .process-description {
103
+ background: #f8f9fa;
104
+ padding: 1.5rem;
105
+ border-radius: 8px;
106
+ margin-bottom: 1.5rem;
107
+ border-left: 4px solid #007bff;
108
+ }
109
+
110
+ .process-description h4 {
111
+ color: #007bff;
112
+ margin-top: 0;
113
+ margin-bottom: 1rem;
114
+ }
115
+
116
+ .mermaid-container {
117
+ background: white;
118
+ padding: 1rem;
119
+ border-radius: 8px;
120
+ margin: 1rem 0;
121
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
122
+ overflow-x: auto;
123
+ }
124
+
125
+ .mermaid {
126
+ font-family: Arial, sans-serif !important;
127
+ font-size: 14px !important;
128
+ }
129
+
130
+ .mermaid .node rect, .mermaid .node circle, .mermaid .node ellipse, .mermaid .node polygon {
131
+ stroke-width: 2px !important;
132
+ }
133
+
134
+ .mermaid .label {
135
+ font-family: Arial, sans-serif !important;
136
+ font-size: 14px !important;
137
+ }
138
+
139
+ .color-legend {
140
+ background: #f8f9fa;
141
+ padding: 2rem;
142
+ border-radius: 8px;
143
+ margin: 2rem 0;
144
+ }
145
+
146
+ .color-legend h4 {
147
+ margin-top: 0;
148
+ color: #495057;
149
+ }
150
+
151
+ .color-legend ul {
152
+ list-style: none;
153
+ padding: 0;
154
+ display: grid;
155
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
156
+ gap: 0.5rem;
157
+ }
158
+
159
+ .color-legend li {
160
+ padding: 0.5rem;
161
+ border-radius: 4px;
162
+ font-weight: 500;
163
+ }
164
+
165
+ .conclusion {
166
+ background: #e8f5e8;
167
+ padding: 2rem;
168
+ border-radius: 8px;
169
+ margin-top: 3rem;
170
+ border-left: 5px solid #28a745;
171
+ }
172
+
173
+ .conclusion h2 {
174
+ color: #28a745;
175
+ margin-top: 0;
176
+ }
177
+
178
+ .footer {
179
+ background: #343a40;
180
+ color: white;
181
+ text-align: center;
182
+ padding: 2rem;
183
+ margin-top: 3rem;
184
+ }
185
+
186
+ blockquote {
187
+ border-left: 4px solid #007bff;
188
+ padding-left: 1rem;
189
+ margin: 2rem 0;
190
+ font-style: italic;
191
+ background: #f8f9fa;
192
+ padding: 1rem;
193
+ border-radius: 4px;
194
+ font-size: 1.1rem;
195
+ }
196
+
197
+ .highlight-box {
198
+ background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
199
+ padding: 1.5rem;
200
+ border-radius: 8px;
201
+ border-left: 5px solid #ffc107;
202
+ margin: 2rem 0;
203
+ }
204
+
205
+ .key-insight {
206
+ background: #d1ecf1;
207
+ padding: 1rem;
208
+ border-radius: 6px;
209
+ margin: 1rem 0;
210
+ border-left: 4px solid #0dcaf0;
211
+ }
212
+
213
+ .key-insight strong {
214
+ color: #0c63e4;
215
+ }
216
  </style></head>
217
  <body>
218
  <div class="container">
yeast_top_10_processes.html CHANGED
@@ -4,19 +4,196 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Yeast Cellular Processes: Top 10 Foundational Processes</title>
7
- <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js">
8
-
9
- </script><style>
10
- body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Ensure proper rendering of Greek characters */
11
- h1, h2, h3, p, li, a {
12
- font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, \'Arial Unicode MS\', sans-serif;
13
- } line-height: 1.6; margin: 0; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #333; } .container { max-width: 1400px; margin: 0 auto; background: white; border-radius: 15px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); overflow: hidden; } .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; text-align: center; } .header h1 { font-size: 2.5em; margin: 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .header p { font-size: 1.2em; margin: 10px 0 0 0; opacity: 0.9; } .stats { display: flex; justify-content: space-around; background: rgba(255,255,255,0.1); padding: 20px; margin: 20px 0; border-radius: 10px; } .stat { text-align: center; } .stat-number { font-size: 2em; font-weight: bold; display: block; } .stat-label { font-size: 0.9em; opacity: 0.8; } .intro { background: #f8f9fa; padding: 30px; border-bottom: 1px solid #e9ecef; } .intro h2 { color: #495057; margin-bottom: 20px; font-size: 1.8em; } .intro p { color: #666; line-height: 1.6; margin-bottom: 15px; } .content { padding: 40px; } .process-section { margin-bottom: 60px; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; } .process-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; } .process-header h2 { margin: 0; font-size: 2em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .process-header p { margin: 10px 0 0 0; opacity: 0.9; font-size: 1.1em; } .process-content { padding: 30px; } .process-description { color: #666; margin-bottom: 30px; line-height: 1.6; font-size: 1.1em; } .mermaid { background: white; border-radius: 8px; padding: 20px; margin: 20px 0; box-shadow: 0 3px 10px rgba(0,0,0,0.1); font-family: Arial, sans-serif !important; /* Ensure proper rendering of Greek characters */
14
- h1, h2, h3, p, li, a {
15
- font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, \'Arial Unicode MS\', sans-serif;
16
- } font-size: 14px !important; } .mermaid .node rect, .mermaid .node circle, .mermaid .node ellipse, .mermaid .node polygon { stroke-width: 2px !important; } .mermaid .label { font-family: Arial, sans-serif !important; /* Ensure proper rendering of Greek characters */
 
17
  h1, h2, h3, p, li, a {
18
- font-family: \'Segoe UI\', Tahoma, Geneva, Verdana, \'Arial Unicode MS\', sans-serif;
19
- } font-size: 14px !important; } .color-legend { background: #f8f9fa; border-radius: 8px; padding: 20px; margin: 20px 0; border-left: 4px solid #667eea; } .color-legend h4 { margin: 0 0 15px 0; color: #495057; } .color-item { display: flex; align-items: center; margin: 8px 0; } .color-box { width: 20px; height: 20px; border-radius: 3px; margin-right: 10px; } .footer { background: #495057; color: white; text-align: center; padding: 30px; margin-top: 40px; } .footer p { margin: 0; opacity: 0.8; } @media (max-width: 768px) { .header h1 { font-size: 2em; } }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  </style></head>
21
  <body>
22
  <div class="container">
@@ -96,19 +273,118 @@
96
  1. Glycolysis
97
  </h><div class="process-description">
98
  The central metabolic pathway that converts glucose to pyruvate, producing ATP and NADH. This process is essential for energy production and serves as the foundation for both aerobic and anaerobic metabolism.
99
- </div><div class="mermaid">
100
- <div class="mermaid" id="glycolysis">
101
-
102
- </div>
103
- </div><h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  2. TORC1 Nutrient Sensing
105
  </h><div class="process-description">
106
  The Target of Rapamycin Complex 1 (TORC1) pathway that integrates nutrient availability with cellular growth and metabolism. This pathway is central to cellular decision-making about growth versus survival.
107
- </div><div class="mermaid">
108
- <div class="mermaid" id="torc1">
109
-
110
- </div>
111
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  </div>
113
  </div><!-- Stress Response
114
  -->
@@ -123,11 +399,66 @@
123
  3. Heat Shock Response
124
  </h><div class="process-description">
125
  The cellular response to elevated temperatures, involving the activation of heat shock transcription factors and the synthesis of molecular chaperones to protect proteins from denaturation.
126
- </div><div class="mermaid">
127
- <div class="mermaid" id="heat_shock">
128
-
129
- </div>
130
- </div><h3>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
131
  4. Autophagy Initiation
132
  </h><div class="process-description">
133
  The process of cellular self-digestion that is activated during nutrient limitation or stress conditions, allowing the cell to recycle cellular components for survival.
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Yeast Cellular Processes: Top 10 Foundational Processes</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
8
+ <style>
9
+ body {
10
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
11
+ line-height: 1.6;
12
+ margin: 0;
13
+ padding: 20px;
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ color: #333;
16
+ }
17
+
18
  h1, h2, h3, p, li, a {
19
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 'Arial Unicode MS', sans-serif;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1400px;
24
+ margin: 0 auto;
25
+ background: white;
26
+ border-radius: 15px;
27
+ box-shadow: 0 20px 40px rgba(0,0,0,0.1);
28
+ overflow: hidden;
29
+ }
30
+
31
+ .header {
32
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
33
+ color: white;
34
+ padding: 40px;
35
+ text-align: center;
36
+ }
37
+
38
+ .header h1 {
39
+ font-size: 2.5em;
40
+ margin: 0;
41
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
42
+ }
43
+
44
+ .header p {
45
+ font-size: 1.2em;
46
+ margin: 10px 0 0 0;
47
+ opacity: 0.9;
48
+ }
49
+
50
+ .stats {
51
+ display: flex;
52
+ justify-content: space-around;
53
+ background: rgba(255,255,255,0.1);
54
+ padding: 20px;
55
+ margin: 20px 0;
56
+ border-radius: 10px;
57
+ }
58
+
59
+ .stat {
60
+ text-align: center;
61
+ }
62
+
63
+ .stat-number {
64
+ font-size: 2em;
65
+ font-weight: bold;
66
+ display: block;
67
+ }
68
+
69
+ .stat-label {
70
+ font-size: 0.9em;
71
+ opacity: 0.8;
72
+ }
73
+
74
+ .intro {
75
+ background: #f8f9fa;
76
+ padding: 30px;
77
+ border-bottom: 1px solid #e9ecef;
78
+ }
79
+
80
+ .intro h2 {
81
+ color: #495057;
82
+ margin-bottom: 20px;
83
+ font-size: 1.8em;
84
+ }
85
+
86
+ .intro p {
87
+ color: #666;
88
+ line-height: 1.6;
89
+ margin-bottom: 15px;
90
+ }
91
+
92
+ .content {
93
+ padding: 40px;
94
+ }
95
+
96
+ .process-section {
97
+ margin-bottom: 60px;
98
+ background: white;
99
+ border-radius: 15px;
100
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
101
+ overflow: hidden;
102
+ }
103
+
104
+ .process-header {
105
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
106
+ color: white;
107
+ padding: 30px;
108
+ text-align: center;
109
+ }
110
+
111
+ .process-header h2 {
112
+ margin: 0;
113
+ font-size: 2em;
114
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
115
+ }
116
+
117
+ .process-header p {
118
+ margin: 10px 0 0 0;
119
+ opacity: 0.9;
120
+ font-size: 1.1em;
121
+ }
122
+
123
+ .process-content {
124
+ padding: 30px;
125
+ }
126
+
127
+ .process-description {
128
+ color: #666;
129
+ margin-bottom: 30px;
130
+ line-height: 1.6;
131
+ font-size: 1.1em;
132
+ }
133
+
134
+ .mermaid {
135
+ background: white;
136
+ border-radius: 8px;
137
+ padding: 20px;
138
+ margin: 20px 0;
139
+ box-shadow: 0 3px 10px rgba(0,0,0,0.1);
140
+ font-family: Arial, sans-serif !important;
141
+ font-size: 14px !important;
142
+ }
143
+
144
+ .mermaid .node rect, .mermaid .node circle, .mermaid .node ellipse, .mermaid .node polygon {
145
+ stroke-width: 2px !important;
146
+ }
147
+
148
+ .mermaid .label {
149
+ font-family: Arial, sans-serif !important;
150
+ font-size: 14px !important;
151
+ }
152
+
153
+ .color-legend {
154
+ background: #f8f9fa;
155
+ border-radius: 8px;
156
+ padding: 20px;
157
+ margin: 20px 0;
158
+ border-left: 4px solid #667eea;
159
+ }
160
+
161
+ .color-legend h4 {
162
+ margin: 0 0 15px 0;
163
+ color: #495057;
164
+ }
165
+
166
+ .color-item {
167
+ display: flex;
168
+ align-items: center;
169
+ margin: 8px 0;
170
+ }
171
+
172
+ .color-box {
173
+ width: 20px;
174
+ height: 20px;
175
+ border-radius: 3px;
176
+ margin-right: 10px;
177
+ }
178
+
179
+ .footer {
180
+ background: #495057;
181
+ color: white;
182
+ text-align: center;
183
+ padding: 30px;
184
+ margin-top: 40px;
185
+ }
186
+
187
+ .footer p {
188
+ margin: 0;
189
+ opacity: 0.8;
190
+ }
191
+
192
+ @media (max-width: 768px) {
193
+ .header h1 {
194
+ font-size: 2em;
195
+ }
196
+ }
197
  </style></head>
198
  <body>
199
  <div class="container">
 
273
  1. Glycolysis
274
  </h><div class="process-description">
275
  The central metabolic pathway that converts glucose to pyruvate, producing ATP and NADH. This process is essential for energy production and serves as the foundation for both aerobic and anaerobic metabolism.
276
+ </div> <div class="mermaid">
277
+ graph TD
278
+ %% Glycolysis Process
279
+ A[Glucose Input] --> B[Hexokinase]
280
+ B --> C[Glucose-6-Phosphate]
281
+ C --> D[Phosphoglucose Isomerase]
282
+ D --> E[Fructose-6-Phosphate]
283
+ E --> F[Phosphofructokinase]
284
+ F --> G[Fructose-1,6-Bisphosphate]
285
+ G --> H[Aldolase]
286
+ H --> I[Glyceraldehyde-3-Phosphate]
287
+ H --> J[Dihydroxyacetone Phosphate]
288
+ J --> K[Triose Phosphate Isomerase]
289
+ K --> I
290
+ I --> L[Glyceraldehyde-3-Phosphate Dehydrogenase]
291
+ L --> M[1,3-Bisphosphoglycerate]
292
+ M --> N[Phosphoglycerate Kinase]
293
+ N --> O[3-Phosphoglycerate]
294
+ O --> P[Phosphoglycerate Mutase]
295
+ P --> Q[2-Phosphoglycerate]
296
+ Q --> R[Enolase]
297
+ R --> S[Phosphoenolpyruvate]
298
+ S --> T[Pyruvate Kinase]
299
+ T --> U[Pyruvate Output]
300
+
301
+ %% Energy Production
302
+ N --> V[ATP Production]
303
+ L --> W[NADH Production]
304
+
305
+ %% Styling
306
+ style A fill:#ff6b6b,color:#fff
307
+ style U fill:#b197fc,color:#fff
308
+ style V fill:#b197fc,color:#fff
309
+ style W fill:#b197fc,color:#fff
310
+
311
+ style B fill:#ffd43b,color:#000
312
+ style D fill:#ffd43b,color:#000
313
+ style F fill:#ffd43b,color:#000
314
+ style H fill:#ffd43b,color:#000
315
+ style K fill:#ffd43b,color:#000
316
+ style L fill:#ffd43b,color:#000
317
+ style N fill:#ffd43b,color:#000
318
+ style P fill:#ffd43b,color:#000
319
+ style R fill:#ffd43b,color:#000
320
+ style T fill:#ffd43b,color:#000
321
+
322
+ style C fill:#74c0fc,color:#fff
323
+ style E fill:#74c0fc,color:#fff
324
+ style G fill:#74c0fc,color:#fff
325
+ style I fill:#74c0fc,color:#fff
326
+ style J fill:#74c0fc,color:#fff
327
+ style M fill:#74c0fc,color:#fff
328
+ style O fill:#74c0fc,color:#fff
329
+ style Q fill:#74c0fc,color:#fff
330
+ style S fill:#74c0fc,color:#fff<h3>
331
  2. TORC1 Nutrient Sensing
332
  </h><div class="process-description">
333
  The Target of Rapamycin Complex 1 (TORC1) pathway that integrates nutrient availability with cellular growth and metabolism. This pathway is central to cellular decision-making about growth versus survival.
334
+ </div> <div class="mermaid">
335
+ graph TD
336
+ %% TORC1 Nutrient Sensing
337
+ A[Nutrient Availability] --> B[TORC1 Complex]
338
+ C[Amino Acids] --> B
339
+ D[Glucose] --> B
340
+ E[Oxygen] --> B
341
+
342
+ B --> F{High Nutrients?}
343
+ F -->|Yes| G[Activate TORC1]
344
+ F -->|No| H[Inhibit TORC1]
345
+
346
+ G --> I[Phosphorylate S6K]
347
+ G --> J[Phosphorylate 4E-BP]
348
+ I --> K[Activate Protein Synthesis]
349
+ J --> L[Release eIF4E]
350
+ L --> K
351
+
352
+ H --> M[Activate Autophagy]
353
+ H --> N[Inhibit Protein Synthesis]
354
+
355
+ %% Feedback loops
356
+ K --> O[Protein Levels]
357
+ O --> P{Protein Sufficient?}
358
+ P -->|Yes| Q[Reduce Synthesis]
359
+ P -->|No| R[Continue Synthesis]
360
+
361
+ M --> S[Autophagy Products]
362
+ S --> T[Nutrient Recycling]
363
+ T --> B
364
+
365
+ %% Styling
366
+ style A fill:#ff6b6b,color:#fff
367
+ style C fill:#ff6b6b,color:#fff
368
+ style D fill:#ff6b6b,color:#fff
369
+ style E fill:#ff6b6b,color:#fff
370
+
371
+ style B fill:#ffd43b,color:#000
372
+ style I fill:#ffd43b,color:#000
373
+ style J fill:#ffd43b,color:#000
374
+ style L fill:#ffd43b,color:#000
375
+
376
+ style F fill:#74c0fc,color:#fff
377
+ style G fill:#51cf66,color:#fff
378
+ style H fill:#51cf66,color:#fff
379
+ style K fill:#51cf66,color:#fff
380
+ style M fill:#51cf66,color:#fff
381
+ style N fill:#51cf66,color:#fff
382
+ style P fill:#74c0fc,color:#fff
383
+ style Q fill:#51cf66,color:#fff
384
+ style R fill:#51cf66,color:#fff
385
+ style S fill:#74c0fc,color:#fff
386
+ style T fill:#74c0fc,color:#fff
387
+ style O fill:#b197fc,color:#fff
388
  </div>
389
  </div><!-- Stress Response
390
  -->
 
399
  3. Heat Shock Response
400
  </h><div class="process-description">
401
  The cellular response to elevated temperatures, involving the activation of heat shock transcription factors and the synthesis of molecular chaperones to protect proteins from denaturation.
402
+ </div> <div class="mermaid">
403
+ graph TD
404
+ %% Heat Shock Response
405
+ A[Heat Stress] --> B[HSF1 Activation]
406
+ C[Protein Misfolding] --> A
407
+
408
+ B --> D[HSF1 Trimerization]
409
+ D --> E[HSF1 Phosphorylation]
410
+ E --> F[HSF1 Nuclear Localization]
411
+ F --> G[HSF1 Binding to HSE]
412
+ G --> H[HSP Gene Transcription]
413
+ H --> I[HSP Protein Synthesis]
414
+ I --> J[Protein Refolding]
415
+ J --> K[Cell Survival]
416
+
417
+ %% Additional regulatory mechanisms
418
+ L[HSF1 Inhibitors] --> B
419
+ M[HSP90] --> E
420
+ N[HSP70] --> J
421
+ O[HSP60] --> J
422
+
423
+ %% Feedback regulation
424
+ J --> P[Protein Quality]
425
+ P --> Q{Proteins Refolded?}
426
+ Q -->|Yes| R[Reduce HSP Synthesis]
427
+ Q -->|No| S[Continue HSP Synthesis]
428
+
429
+ %% Stress resolution
430
+ K --> T[Temperature Normalization]
431
+ T --> U[HSF1 Deactivation]
432
+ U --> V[Return to Normal State]
433
+
434
+ %% Styling
435
+ style A fill:#ff6b6b,color:#fff
436
+ style C fill:#ff6b6b,color:#fff
437
+
438
+ style B fill:#ffd43b,color:#000
439
+ style D fill:#ffd43b,color:#000
440
+ style E fill:#ffd43b,color:#000
441
+ style F fill:#ffd43b,color:#000
442
+ style G fill:#ffd43b,color:#000
443
+ style H fill:#ffd43b,color:#000
444
+ style I fill:#ffd43b,color:#000
445
+ style L fill:#ffd43b,color:#000
446
+ style M fill:#ffd43b,color:#000
447
+ style N fill:#ffd43b,color:#000
448
+ style O fill:#ffd43b,color:#000
449
+
450
+ style J fill:#51cf66,color:#fff
451
+ style K fill:#51cf66,color:#fff
452
+ style R fill:#51cf66,color:#fff
453
+ style S fill:#51cf66,color:#fff
454
+ style U fill:#51cf66,color:#fff
455
+
456
+ style P fill:#74c0fc,color:#fff
457
+ style Q fill:#74c0fc,color:#fff
458
+ style T fill:#74c0fc,color:#fff
459
+ style V fill:#74c0fc,color:#fff
460
+
461
+ style K fill:#b197fc,color:#fff<h3>
462
  4. Autophagy Initiation
463
  </h><div class="process-description">
464
  The process of cellular self-digestion that is activated during nutrient limitation or stress conditions, allowing the cell to recycle cellular components for survival.