Hugging Face's logo

Spaces:
johnfmarti
/
rail-net
Running

App Files Community
johnfmarti commited on
Commit
163869a
·
verified ·
1 Parent(s): 55ff550

The infographic is great. Can it be rearranged to make it wider and shorter in order to maximize placement on a single print page? - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +323 -230
index.html CHANGED
@@ -3,263 +3,356 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>North American Rail Network Infographic</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
11
-
12
  body {
13
  font-family: 'Roboto', sans-serif;
14
  -webkit-print-color-adjust: exact !important;
15
  print-color-adjust: exact !important;
16
  }
17
-
18
- .print-area {
19
- width: 8.5in;
20
- height: 11in;
21
- margin: 0 auto;
22
- padding: 0.5in;
23
- box-sizing: border-box;
24
- background-color: white;
25
  }
26
-
27
- @media print {
28
- body {
29
- background: none;
30
- }
31
- .no-print {
32
- display: none !important;
33
- }
34
- .print-area {
35
- width: 100%;
36
- height: 100%;
37
- margin: 0;
38
- padding: 0;
39
- box-shadow: none;
40
- }
41
- }
42
-
43
- .map-container {
44
- position: relative;
45
- width: 100%;
46
- height: 500px;
47
- background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/North_American_rail_network.svg/1200px-North_American_rail_network.svg.png');
48
- background-size: contain;
49
- background-repeat: no-repeat;
50
- background-position: center;
51
- }
52
-
53
- .railroad-key {
54
- border-left: 4px solid;
55
- padding-left: 8px;
56
- }
57
-
58
- .tooltip {
59
- position: absolute;
60
- background: white;
61
- border: 1px solid #ccc;
62
- padding: 5px 10px;
63
- border-radius: 4px;
64
- font-size: 12px;
65
- pointer-events: none;
66
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
67
- z-index: 100;
68
- max-width: 200px;
69
  }
 
 
 
 
 
 
 
 
70
  </style>
71
  </head>
72
- <body class="bg-gray-100">
73
- <div class="container mx-auto py-8">
74
- <div class="flex justify-center no-print mb-4">
75
- <button onclick="window.print()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center">
76
- <i class="fas fa-print mr-2"></i> Print Infographic
77
- </button>
78
- </div>
79
-
80
- <div class="print-area bg-white shadow-lg">
81
- <header class="mb-6 border-b-2 border-gray-200 pb-4">
82
- <h1 class="text-3xl font-bold text-center text-gray-800">North American Rail Network</h1>
83
- <p class="text-center text-gray-600 mt-2">Major Class I Railroads & Key Infrastructure</p>
84
- </header>
85
-
86
- <div class="flex flex-col md:flex-row gap-6">
87
- <div class="md:w-2/3">
88
- <div class="map-container" id="railMap">
89
- <!-- Interactive map elements will be added by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </div>
91
- <div class="text-xs text-gray-500 mt-2 text-right">
92
- Source: U.S. Department of Transportation, Federal Railroad Administration
 
 
 
 
 
 
 
 
93
  </div>
94
  </div>
95
-
96
- <div class="md:w-1/3">
97
- <div class="bg-gray-50 p-4 rounded-lg">
98
- <h3 class="font-bold text-lg mb-3 text-gray-800">Class I Railroads</h3>
99
-
100
- <div class="space-y-3">
101
- <div class="railroad-key border-bnsf">
102
- <h4 class="font-semibold">BNSF Railway</h4>
103
- <p class="text-sm text-gray-600">32,500 route miles, primarily west of Chicago</p>
104
- </div>
105
-
106
- <div class="railroad-key border-unionpacific">
107
- <h4 class="font-semibold">Union Pacific</h4>
108
- <p class="text-sm text-gray-600">32,100 route miles, western U.S.</p>
109
- </div>
110
-
111
- <div class="railroad-key border-csx">
112
- <h4 class="font-semibold">CSX Transportation</h4>
113
- <p class="text-sm text-gray-600">21,000 route miles, eastern U.S.</p>
114
- </div>
115
-
116
- <div class="railroad-key border-norfolksouthern">
117
- <h4 class="font-semibold">Norfolk Southern</h4>
118
- <p class="text-sm text-gray-600">19,500 route miles, eastern U.S.</p>
119
- </div>
120
-
121
- <div class="railroad-key border-canadiannational">
122
- <h4 class="font-semibold">Canadian National</h4>
123
- <p class="text-sm text-gray-600">20,000 route miles, Canada & mid-America</p>
124
- </div>
125
-
126
- <div class="railroad-key border-canadianpacific">
127
- <h4 class="font-semibold">Canadian Pacific Kansas City</h4>
128
- <p class="text-sm text-gray-600">20,000 route miles, transcontinental</p>
129
- </div>
130
-
131
- <div class="railroad-key border-kcs">
132
- <h4 class="font-semibold">Kansas City Southern</h4>
133
- <p class="text-sm text-gray-600">6,700 route miles, north-south corridor</p>
134
- </div>
135
  </div>
136
-
137
- <div class="mt-6">
138
- <h4 class="font-semibold text-gray-800 mb-2">Key Statistics</h4>
139
- <ul class="text-sm space-y-2">
140
- <li class="flex justify-between">
141
- <span>Total U.S. freight railroads:</span>
142
- <span class="font-medium">140,000 route miles</span>
143
- </li>
144
- <li class="flex justify-between">
145
- <span>Class I share:</span>
146
- <span class="font-medium">69% of mileage</span>
147
- </li>
148
- <li class="flex justify-between">
149
- <span>Freight tonnage:</span>
150
- <span class="font-medium">1.7 billion tons annually</span>
151
- </li>
152
- <li class="flex justify-between">
153
- <span>Economic impact:</span>
154
- <span class="font-medium">$219 billion GDP contribution</span>
155
- </li>
156
- </ul>
157
  </div>
158
  </div>
159
  </div>
160
- </div>
161
-
162
- <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
163
- <div class="bg-gray-50 p-4 rounded-lg">
164
- <h4 class="font-semibold text-gray-800 mb-2">Major Interchange Points</h4>
165
- <ul class="text-sm space-y-1 list-disc pl-5">
166
- <li>Chicago, IL (Busiest rail hub)</li>
167
- <li>Kansas City, MO</li>
168
- <li>Memphis, TN</li>
169
- <li>St. Louis, MO</li>
170
- <li>New Orleans, LA</li>
171
- <li>Laredo, TX (U.S.-Mexico gateway)</li>
172
- </ul>
 
 
 
 
173
  </div>
174
-
175
- <div class="bg-gray-50 p-4 rounded-lg">
176
- <h4 class="font-semibold text-gray-800 mb-2">Key Corridors</h4>
177
- <ul class="text-sm space-y-1 list-disc pl-5">
178
- <li>Transcontinental (LA to Chicago/NY)</li>
179
- <li>Mid-America (Dallas to Chicago)</li>
180
- <li>Eastern (Boston to Miami)</li>
181
- <li>Canada-U.S. (Montreal to Detroit)</li>
182
- <li>NAFTA (Mexico to Canada)</li>
183
- </ul>
 
 
 
 
 
 
 
184
  </div>
185
-
186
- <div class="bg-gray-50 p-4 rounded-lg">
187
- <h4 class="font-semibold text-gray-800 mb-2">Freight Types</h4>
188
- <ul class="text-sm space-y-1 list-disc pl-5">
189
- <li>Intermodal (40% of revenue)</li>
190
- <li>Chemicals (18%)</li>
191
- <li>Agriculture (16%)</li>
192
- <li>Coal (13%)</li>
193
- <li>Minerals (8%)</li>
194
- <li>Automotive (5%)</li>
195
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
196
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
197
  </div>
198
-
199
- <footer class="mt-8 pt-4 border-t border-gray-200 text-xs text-gray-500">
200
- <p><strong>Sources:</strong> Association of American Railroads (AAR), U.S. Surface Transportation Board, Transport Canada</p>
201
- <p class="mt-1"><strong>Data as of:</strong> 2023 | <strong>Design for print:</strong> Ensure "Background graphics" is enabled in print settings</p>
202
- </footer>
203
- </div>
204
  </div>
205
 
206
  <script>
 
207
  document.addEventListener('DOMContentLoaded', function() {
208
- // Add interactive elements to the map
209
- const map = document.getElementById('railMap');
210
- const tooltip = document.createElement('div');
211
- tooltip.className = 'tooltip hidden';
212
- map.appendChild(tooltip);
213
-
214
- // Key locations with coordinates (relative to map container)
215
- const locations = [
216
- { name: "Chicago, IL", x: 45, y: 30, desc: "Busiest rail hub in North America with 6 Class I railroads" },
217
- { name: "Kansas City, MO", x: 35, y: 40, desc: "Major interchange between eastern and western railroads" },
218
- { name: "Memphis, TN", x: 42, y: 55, desc: "Important south-central interchange point" },
219
- { name: "Laredo, TX", x: 30, y: 80, desc: "Primary rail gateway between U.S. and Mexico" },
220
- { name: "Vancouver, BC", x: 15, y: 15, desc: "Key Pacific Northwest port for intermodal traffic" },
221
- { name: "Montreal, QC", x: 60, y: 25, desc: "Major Canadian interchange with U.S. railroads" },
222
- { name: "New Orleans, LA", x: 40, y: 70, desc: "Critical port for agricultural exports" }
223
- ];
224
-
225
- // Add markers to the map
226
- locations.forEach(loc => {
227
- const marker = document.createElement('div');
228
- marker.className = 'absolute w-3 h-3 bg-red-600 rounded-full border-2 border-white cursor-pointer';
229
- marker.style.left = `${loc.x}%`;
230
- marker.style.top = `${loc.y}%`;
231
- marker.dataset.name = loc.name;
232
- marker.dataset.desc = loc.desc;
233
-
234
- marker.addEventListener('mouseover', function(e) {
235
- tooltip.innerHTML = `<strong>${this.dataset.name}</strong><br>${this.dataset.desc}`;
236
- tooltip.style.left = `${e.pageX - map.getBoundingClientRect().left + 10}px`;
237
- tooltip.style.top = `${e.pageY - map.getBoundingClientRect().top + 10}px`;
238
- tooltip.classList.remove('hidden');
239
- });
240
-
241
- marker.addEventListener('mouseout', function() {
242
- tooltip.classList.add('hidden');
243
- });
244
-
245
- map.appendChild(marker);
246
- });
247
-
248
- // Add railroad-specific colors to the key
249
- const colors = {
250
- 'border-bnsf': 'border-amber-500',
251
- 'border-unionpacific': 'border-yellow-600',
252
- 'border-csx': 'border-blue-600',
253
- 'border-norfolksouthern': 'border-gray-800',
254
- 'border-canadiannational': 'border-red-600',
255
- 'border-canadianpacific': 'border-red-800',
256
- 'border-kcs': 'border-green-600'
257
- };
258
-
259
- Object.entries(colors).forEach(([key, value]) => {
260
- const elements = document.querySelectorAll(`.${key}`);
261
- elements.forEach(el => el.classList.add(value));
262
- });
263
  });
264
  </script>
265
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=johnfmarti/rail-net" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>North American Class I Rail Carriers Infographic</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
 
11
  body {
12
  font-family: 'Roboto', sans-serif;
13
  -webkit-print-color-adjust: exact !important;
14
  print-color-adjust: exact !important;
15
  }
16
+ .print-section {
17
+ page-break-inside: avoid;
 
 
 
 
 
 
18
  }
19
+ @page {
20
+ size: auto;
21
+ margin: 0.5in;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
+ .railroad-color-1 { background-color: #FF6319; color: white; } /* Amtrak */
24
+ .railroad-color-2 { background-color: #003366; color: white; } /* BNSF */
25
+ .railroad-color-3 { background-color: #CE1126; color: white; } /* CN */
26
+ .railroad-color-4 { background-color: #FCCC09; color: black; } /* CPKC */
27
+ .railroad-color-5 { background-color: #6E6E6E; color: white; } /* CSX */
28
+ .railroad-color-6 { background-color: #0056A2; color: white; } /* KCS */
29
+ .railroad-color-7 { background-color: #E31937; color: white; } /* NS */
30
+ .railroad-color-8 { background-color: #FEDD00; color: black; } /* UP */
31
  </style>
32
  </head>
33
+ <body class="bg-gray-50 text-gray-800">
34
+ <div class="max-w-full px-8 mx-auto p-4 print:p-0">
35
+ <!-- Header -->
36
+ <header class="mb-6 print-section">
37
+ <h1 class="text-3xl font-bold text-center mb-3">North American Class I Rail Carriers</h1>
38
+ <p class="text-base text-center max-w-3xl mx-auto">
39
+ Comprehensive overview of the major freight railroads operating in the United States, Canada, and Mexico
40
+ </p>
41
+ <div class="mt-6 bg-blue-800 text-white p-4 rounded-lg">
42
+ <p class="text-center font-semibold">
43
+ <i class="fas fa-info-circle mr-2"></i> Class I railroads are defined as having annual operating revenues exceeding $505 million (2022 threshold)
44
+ </p>
45
+ </div>
46
+ </header>
47
+
48
+ <!-- Key Metrics Table -->
49
+ <section class="mb-12 print-section">
50
+ <h2 class="text-2xl font-bold mb-6 border-b-2 border-gray-300 pb-2">Key Metrics Comparison</h2>
51
+ <div class="overflow-x-auto">
52
+ <table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden">
53
+ <thead class="bg-gray-800 text-white text-sm">
54
+ <tr>
55
+ <th class="py-2 px-3 text-left">Railroad</th>
56
+ <th class="py-2 px-3 text-left">Route Miles</th>
57
+ <th class="py-2 px-3 text-left">Employees</th>
58
+ <th class="py-2 px-3 text-left">Revenue (2022)</th>
59
+ <th class="py-2 px-3 text-left">Freight Ton-Miles</th>
60
+ </tr>
61
+ </thead>
62
+ <tbody class="divide-y divide-gray-200 text-sm">
63
+ <tr class="hover:bg-gray-50">
64
+ <td class="py-2 px-3 font-semibold railroad-color-1">Amtrak</td>
65
+ <td class="py-2 px-3">21,400*</td>
66
+ <td class="py-2 px-3">18,000</td>
67
+ <td class="py-2 px-3">$2.8B</td>
68
+ <td class="py-2 px-3">N/A</td>
69
+ </tr>
70
+ <tr class="hover:bg-gray-50">
71
+ <td class="py-3 px-4 font-semibold railroad-color-2">BNSF Railway</td>
72
+ <td class="py-3 px-4">32,500</td>
73
+ <td class="py-3 px-4">35,000</td>
74
+ <td class="py-3 px-4">$25.9 billion</td>
75
+ <td class="py-3 px-4">905 billion</td>
76
+ </tr>
77
+ <tr class="hover:bg-gray-50">
78
+ <td class="py-3 px-4 font-semibold railroad-color-3">Canadian National</td>
79
+ <td class="py-3 px-4">19,500</td>
80
+ <td class="py-3 px-4">25,000</td>
81
+ <td class="py-3 px-4">$17.1 billion</td>
82
+ <td class="py-3 px-4">355 billion</td>
83
+ </tr>
84
+ <tr class="hover:bg-gray-50">
85
+ <td class="py-3 px-4 font-semibold railroad-color-4">CPKC Railway</td>
86
+ <td class="py-3 px-4">20,000</td>
87
+ <td class="py-3 px-4">20,000</td>
88
+ <td class="py-3 px-4">$10.6 billion</td>
89
+ <td class="py-3 px-4">280 billion</td>
90
+ </tr>
91
+ <tr class="hover:bg-gray-50">
92
+ <td class="py-3 px-4 font-semibold railroad-color-5">CSX Transportation</td>
93
+ <td class="py-3 px-4">20,000</td>
94
+ <td class="py-3 px-4">25,000</td>
95
+ <td class="py-3 px-4">$14.9 billion</td>
96
+ <td class="py-3 px-4">560 billion</td>
97
+ </tr>
98
+ <tr class="hover:bg-gray-50">
99
+ <td class="py-3 px-4 font-semibold railroad-color-6">Kansas City Southern</td>
100
+ <td class="py-3 px-4">6,700</td>
101
+ <td class="py-3 px-4">6,500</td>
102
+ <td class="py-3 px-4">$3.8 billion</td>
103
+ <td class="py-3 px-4">110 billion</td>
104
+ </tr>
105
+ <tr class="hover:bg-gray-50">
106
+ <td class="py-3 px-4 font-semibold railroad-color-7">Norfolk Southern</td>
107
+ <td class="py-3 px-4">19,500</td>
108
+ <td class="py-3 px-4">27,000</td>
109
+ <td class="py-3 px-4">$12.7 billion</td>
110
+ <td class="py-3 px-4">520 billion</td>
111
+ </tr>
112
+ <tr class="hover:bg-gray-50">
113
+ <td class="py-3 px-4 font-semibold railroad-color-8">Union Pacific</td>
114
+ <td class="py-3 px-4">32,100</td>
115
+ <td class="py-3 px-4">32,000</td>
116
+ <td class="py-3 px-4">$24.9 billion</td>
117
+ <td class="py-3 px-4">880 billion</td>
118
+ </tr>
119
+ </tbody>
120
+ </table>
121
+ </div>
122
+ <p class="text-sm text-gray-600 mt-2">*Amtrak operates primarily on tracks owned by other railroads</p>
123
+ </section>
124
+
125
+ <!-- Major Interchanges -->
126
+ <section class="mb-12 print-section">
127
+ <h2 class="text-2xl font-bold mb-6 border-b-2 border-gray-300 pb-2">Major Rail Interchange Points</h2>
128
+ <div class="grid grid-cols-2 gap-4">
129
+ <div class="bg-white p-4 rounded-lg shadow-md">
130
+ <h3 class="text-lg font-semibold mb-3 text-blue-800">United States</h3>
131
+ <ul class="space-y-1 text-sm">
132
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-1"></i> <strong>Chicago:</strong> Largest hub with all Class I railroads</li>
133
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>Kansas City, MO:</strong> Major interchange between UP, BNSF, KCS, and NS</li>
134
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>Memphis, TN:</strong> Key interchange between UP, BNSF, CN, and NS</li>
135
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>St. Louis, MO:</strong> Historic gateway between eastern and western railroads</li>
136
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>New Orleans, LA:</strong> Important interchange for Gulf Coast traffic</li>
137
+ </ul>
138
+ </div>
139
+ <div class="bg-white p-6 rounded-lg shadow-md">
140
+ <h3 class="text-xl font-semibold mb-4 text-red-800">Canada/Mexico</h3>
141
+ <ul class="space-y-2">
142
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>Vancouver, BC:</strong> Primary West Coast interchange between CN, CPKC, and BNSF</li>
143
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>Toronto, ON:</strong> Major CN and CPKC interchange</li>
144
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>Montreal, QC:</strong> Key interchange between CN and eastern US railroads</li>
145
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>Laredo, TX:</strong> Primary US-Mexico rail gateway</li>
146
+ <li><i class="fas fa-exchange-alt text-gray-500 mr-2"></i> <strong>Mexico City:</strong> Major hub for KCSM and Ferromex</li>
147
+ </ul>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Major Corridors -->
153
+ <section class="mb-12 print-section">
154
+ <h2 class="text-2xl font-bold mb-6 border-b-2 border-gray-300 pb-2">Primary Rail Transport Corridors</h2>
155
+ <div class="grid grid-cols-3 gap-4">
156
+ <div class="bg-white p-4 rounded-lg shadow-md">
157
+ <h3 class="text-lg font-semibold mb-3 railroad-color-2 p-2 rounded">Transcontinental</h3>
158
+ <ul class="space-y-1 text-sm">
159
+ <li><i class="fas fa-route text-gray-500 mr-1"></i> <strong>BNSF Northern:</strong> Chicago-Seattle</li>
160
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>UP Overland Route:</strong> Chicago - Oakland</li>
161
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>CN Transcontinental:</strong> Halifax - Chicago - New Orleans</li>
162
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>CPKC Main Line:</strong> Montreal - Vancouver</li>
163
+ </ul>
164
+ </div>
165
+ <div class="bg-white p-6 rounded-lg shadow-md">
166
+ <h3 class="text-xl font-semibold mb-4 railroad-color-5 p-2 rounded">Eastern</h3>
167
+ <ul class="space-y-2">
168
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>CSX I-95 Corridor:</strong> Miami - New York</li>
169
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>NS Crescent Corridor:</strong> New Orleans - New York</li>
170
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>Canadian Corridor:</strong> Toronto - Detroit - Chicago</li>
171
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>Amtrak Northeast Corridor:</strong> Boston - Washington DC</li>
172
+ </ul>
173
+ </div>
174
+ <div class="bg-white p-6 rounded-lg shadow-md">
175
+ <h3 class="text-xl font-semibold mb-4 railroad-color-6 p-2 rounded">North-South</h3>
176
+ <ul class="space-y-2">
177
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>KCS NAFTA Corridor:</strong> Kansas City - Laredo - Mexico City</li>
178
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>CN Illinois Central:</strong> Chicago - New Orleans</li>
179
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>UP/BNSF Gulf Coast:</strong> Houston - New Orleans</li>
180
+ <li><i class="fas fa-route text-gray-500 mr-2"></i> <strong>West Coast Corridor:</strong> Vancouver - Los Angeles</li>
181
+ </ul>
182
+ </div>
183
+ </div>
184
+ </section>
185
+
186
+ <!-- Railroad Details -->
187
+ <section class="print-section">
188
+ <h2 class="text-2xl font-bold mb-6 border-b-2 border-gray-300 pb-2">Railroad Profiles</h2>
189
+ <div class="space-y-6">
190
+ <!-- Amtrak -->
191
+ <div class="bg-white p-4 rounded-lg shadow-md print-section">
192
+ <div class="railroad-color-1 p-3 rounded-t-lg -m-4 mb-3">
193
+ <h3 class="text-lg font-bold">Amtrak</h3>
194
  </div>
195
+ <div class="grid grid-cols-2 gap-3 text-sm">
196
+ <div>
197
+ <p><strong>Primary Service Area:</strong> Contiguous United States with some routes to Canada</p>
198
+ <p><strong>Key Routes:</strong> Northeast Corridor, California Zephyr, Empire Builder</p>
199
+ <p><strong>Major Connections:</strong> All Class I railroads (operates on their tracks)</p>
200
+ </div>
201
+ <div>
202
+ <p><strong>Unique Fact:</strong> Only national intercity passenger rail provider in the US</p>
203
+ <p><strong>Freight Service:</strong> Limited express freight (Amtrak Express)</p>
204
+ </div>
205
  </div>
206
  </div>
207
+
208
+ <!-- BNSF -->
209
+ <div class="bg-white p-6 rounded-lg shadow-md print-section">
210
+ <div class="railroad-color-2 p-4 rounded-t-lg -m-6 mb-4">
211
+ <h3 class="text-xl font-bold">BNSF Railway (Burlington Northern Santa Fe)</h3>
212
+ </div>
213
+ <div class="grid md:grid-cols-2 gap-4">
214
+ <div>
215
+ <p><strong>Primary Service Area:</strong> Western two-thirds of the US</p>
216
+ <p><strong>Key Commodities:</strong> Coal, intermodal, agricultural products</p>
217
+ <p><strong>Major Connections:</strong> UP, CN, CPKC, KCS at multiple points</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
218
  </div>
219
+ <div>
220
+ <p><strong>Unique Fact:</strong> Largest freight railroad in North America by revenue</p>
221
+ <p><strong>Parent Company:</strong> Berkshire Hathaway</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
222
  </div>
223
  </div>
224
  </div>
225
+
226
+ <!-- CN -->
227
+ <div class="bg-white p-6 rounded-lg shadow-md print-section">
228
+ <div class="railroad-color-3 p-4 rounded-t-lg -m-6 mb-4">
229
+ <h3 class="text-xl font-bold">Canadian National Railway (CN)</h3>
230
+ </div>
231
+ <div class="grid md:grid-cols-2 gap-4">
232
+ <div>
233
+ <p><strong>Primary Service Area:</strong> Canada and central US to Gulf Coast</p>
234
+ <p><strong>Key Commodities:</strong> Forest products, grain, petroleum/chemicals</p>
235
+ <p><strong>Major Connections:</strong> All Class I railroads at multiple points</p>
236
+ </div>
237
+ <div>
238
+ <p><strong>Unique Fact:</strong> Only transcontinental railroad with access to three coasts</p>
239
+ <p><strong>International Reach:</strong> Operates in Canada and US with connections to Mexico</p>
240
+ </div>
241
+ </div>
242
  </div>
243
+
244
+ <!-- CPKC -->
245
+ <div class="bg-white p-6 rounded-lg shadow-md print-section">
246
+ <div class="railroad-color-4 p-4 rounded-t-lg -m-6 mb-4">
247
+ <h3 class="text-xl font-bold">CPKC Railway (Canadian Pacific Kansas City)</h3>
248
+ </div>
249
+ <div class="grid md:grid-cols-2 gap-4">
250
+ <div>
251
+ <p><strong>Primary Service Area:</strong> Canada, midwestern US, Mexico</p>
252
+ <p><strong>Key Commodities:</strong> Grain, intermodal, energy</p>
253
+ <p><strong>Major Connections:</strong> CN, BNSF, UP, NS, CSX</p>
254
+ </div>
255
+ <div>
256
+ <p><strong>Unique Fact:</strong> First single-line rail network connecting Canada, US, and Mexico</p>
257
+ <p><strong>Recent Merger:</strong> Formed in 2023 by merging CP and KCS</p>
258
+ </div>
259
+ </div>
260
  </div>
261
+
262
+ <!-- CSX -->
263
+ <div class="bg-white p-6 rounded-lg shadow-md print-section">
264
+ <div class="railroad-color-5 p-4 rounded-t-lg -m-6 mb-4">
265
+ <h3 class="text-xl font-bold">CSX Transportation</h3>
266
+ </div>
267
+ <div class="grid md:grid-cols-2 gap-4">
268
+ <div>
269
+ <p><strong>Primary Service Area:</strong> Eastern US</p>
270
+ <p><strong>Key Commodities:</strong> Coal, chemicals, intermodal</p>
271
+ <p><strong>Major Connections:</strong> NS, UP, CN, CPKC</p>
272
+ </div>
273
+ <div>
274
+ <p><strong>Unique Fact:</strong> Operates the longest continuous railroad tunnel in North America (Virginia)</p>
275
+ <p><strong>Historical Note:</strong> Formed from several historic railroads including Chessie System</p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- KCS -->
281
+ <div class="bg-white p-6 rounded-lg shadow-md print-section">
282
+ <div class="railroad-color-6 p-4 rounded-t-lg -m-6 mb-4">
283
+ <h3 class="text-xl font-bold">Kansas City Southern Railway (KCS)</h3>
284
+ </div>
285
+ <div class="grid md:grid-cols-2 gap-4">
286
+ <div>
287
+ <p><strong>Primary Service Area:</strong> Midwestern US and Mexico</p>
288
+ <p><strong>Key Commodities:</strong> Automotive, intermodal, industrial products</p>
289
+ <p><strong>Major Connections:</strong> UP, BNSF, CN, CPKC</p>
290
+ </div>
291
+ <div>
292
+ <p><strong>Unique Fact:</strong> Only NAFTA railroad prior to CPKC merger</p>
293
+ <p><strong>Status:</strong> Merged with CP in 2023 to form CPKC</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <!-- NS -->
299
+ <div class="bg-white p-6 rounded-lg shadow-md print-section">
300
+ <div class="railroad-color-7 p-4 rounded-t-lg -m-6 mb-4">
301
+ <h3 class="text-xl font-bold">Norfolk Southern Railway (NS)</h3>
302
+ </div>
303
+ <div class="grid md:grid-cols-2 gap-4">
304
+ <div>
305
+ <p><strong>Primary Service Area:</strong> Eastern US</p>
306
+ <p><strong>Key Commodities:</strong> Coal, automotive, intermodal</p>
307
+ <p><strong>Major Connections:</strong> CSX, UP, CN, CPKC</p>
308
+ </div>
309
+ <div>
310
+ <p><strong>Unique Fact:</strong> Operates extensive intermodal network with Heartland Corridor</p>
311
+ <p><strong>Historical Note:</strong> Formed from merger of Norfolk & Western and Southern Railway</p>
312
+ </div>
313
+ </div>
314
  </div>
315
+
316
+ <!-- UP -->
317
+ <div class="bg-white p-6 rounded-lg shadow-md print-section">
318
+ <div class="railroad-color-8 p-4 rounded-t-lg -m-6 mb-4">
319
+ <h3 class="text-xl font-bold">Union Pacific Railroad (UP)</h3>
320
+ </div>
321
+ <div class="grid md:grid-cols-2 gap-4">
322
+ <div>
323
+ <p><strong>Primary Service Area:</strong> Western two-thirds of the US</p>
324
+ <p><strong>Key Commodities:</strong> Intermodal, agricultural, industrial products</p>
325
+ <p><strong>Major Connections:</strong> BNSF, CN, CPKC, NS, CSX</p>
326
+ </div>
327
+ <div>
328
+ <p><strong>Unique Fact:</strong> Largest railroad by route mileage in the US</p>
329
+ <p><strong>Historical Note:</strong> Completed the first transcontinental railroad in 1869</p>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </section>
335
+
336
+ <!-- Footer -->
337
+ <footer class="mt-6 text-center text-xs text-gray-600 print-section">
338
+ <p>Sources: AAR, STB, company reports (2022-2023)</p>
339
+ <p class="mt-1">Note: Amtrak meets Class I revenue thresholds</p>
340
+ <div class="mt-3 pt-2 border-t border-gray-300">
341
+ <p>© 2023 North American Rail Industry Infographic</p>
342
  </div>
343
+ </footer>
 
 
 
 
 
344
  </div>
345
 
346
  <script>
347
+ // Print styling (will be used when printing)
348
  document.addEventListener('DOMContentLoaded', function() {
349
+ // Add print button for web view
350
+ const body = document.querySelector('body');
351
+ const printBtn = document.createElement('button');
352
+ printBtn.innerHTML = '<i class="fas fa-print mr-2"></i> Print Infographic';
353
+ printBtn.className = 'fixed bottom-4 right-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transition-colors duration-200 print:hidden';
354
+ printBtn.onclick = function() { window.print(); };
355
+ body.appendChild(printBtn);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
356
  });
357
  </script>
358
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=johnfmarti/rail-net" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>