-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlotus_greater_toronto_area.html
More file actions
450 lines (421 loc) · 35.9 KB
/
Copy pathlotus_greater_toronto_area.html
File metadata and controls
450 lines (421 loc) · 35.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GTAT - Greater Toronto Area Transit for LOTUS</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.hero-bg {
background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%);
}
.section-transition {
transition: all 0.3s ease;
}
.expandable-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
.expandable-content.expanded {
max-height: 2000px;
}
.rotate-180 {
transform: rotate(180deg);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<span class="text-2xl font-bold text-red-700">GTAT</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="nav-link text-gray-700 hover:text-red-700 transition" data-en="Home" data-fr="Accueil">Home</a>
<a href="#about" class="nav-link text-gray-700 hover:text-red-700 transition" data-en="About The Project" data-fr="À propos du projet">About The Project</a>
<a href="#map" class="nav-link text-gray-700 hover:text-red-700 transition" data-en="The Map & Vehicles" data-fr="La carte et les véhicules">The Map & Vehicles</a>
<a href="#roadmap" class="nav-link text-gray-700 hover:text-red-700 transition" data-en="Roadmap" data-fr="Feuille de route">Roadmap</a>
<a href="#community" class="nav-link text-gray-700 hover:text-red-700 transition" data-en="Community & Contact" data-fr="Communauté et contact">Community & Contact</a>
</div>
<button id="langSwitch" class="bg-red-700 text-white px-4 py-2 rounded-lg hover:bg-red-800 transition font-semibold">
🇨🇦 EN | FR
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-bg text-white py-20 px-4">
<div class="max-w-7xl mx-auto text-center">
<div class="mb-4">
<span class="inline-block bg-yellow-400 text-red-900 px-4 py-2 rounded-full font-bold text-sm">
<span class="lang-content" data-en="Early Development (Foundation Stage)" data-fr="Phase initiale de développement">Early Development (Foundation Stage)</span>
</span>
</div>
<h1 class="text-5xl md:text-6xl font-bold mb-6 lang-content" data-en="The Definitive Toronto Transit Experience for LOTUS Simulator" data-fr="L'expérience définitive du transport en commun à Toronto pour le simulateur LOTUS">
The Definitive Toronto Transit Experience for LOTUS Simulator
</h1>
<p class="text-xl md:text-2xl mb-8 lang-content" data-en="A community-driven, 1:1 scale recreation of the Greater Toronto Area's transit network. Authentic. Immersive. Canadian." data-fr="Une recréation communautaire à l'échelle 1:1 du réseau de transport du Grand Toronto. Authentique. Immersif. Canadien.">
A community-driven, 1:1 scale recreation of the Greater Toronto Area's transit network. Authentic. Immersive. Canadian.
</p>
<a href="#roadmap" class="inline-block bg-white text-red-700 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition lang-content" data-en="See Current Progress" data-fr="Voir la progression actuelle">
See Current Progress
</a>
</div>
</section>
<!-- Latest News -->
<section class="bg-white py-12 px-4">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-bold text-gray-800 mb-8 lang-content" data-en="Development Updates" data-fr="Dernières nouvelles">Development Updates</h2>
<!-- Update 1 -->
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-red-700 mb-6">
<div class="flex justify-between items-start">
<div class="flex-1">
<span class="text-sm text-gray-500 lang-content" data-en="Jan 5, 2026" data-fr="5 janv. 2026">Jan 5, 2026</span>
<h3 class="text-xl font-semibold text-gray-800 mt-2 mb-3 lang-content" data-en="Phase 1: Downtown Core Development Begins" data-fr="Phase 1 : Début du développement du cœur du centre-ville">
Phase 1: Downtown Core Development Begins
</h3>
<button class="expand-btn text-red-700 font-semibold hover:text-red-900 transition flex items-center" data-target="update1">
<span class="lang-content" data-en="Show More" data-fr="Afficher plus">Show More</span>
<svg class="w-5 h-5 ml-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
</div>
</div>
<div id="update1" class="expandable-content mt-4">
<div class="text-gray-700 space-y-3">
<p class="lang-content" data-en="We're focusing on the TTC Streetcar network, specifically Routes 509 (Harbourfront) and 510 (Spadina). These routes form the backbone of waterfront transit and will serve as the foundation for the entire GTAT project." data-fr="Nous nous concentrons sur le réseau de tramways de la TTC, plus précisément les lignes 509 (Harbourfront) et 510 (Spadina). Ces lignes forment l'épine dorsale du transport le long du secteur riverain et serviront de fondation pour l'ensemble du projet GTAT.">
We're focusing on the TTC Streetcar network, specifically Routes 509 (Harbourfront) and 510 (Spadina). These routes form the backbone of waterfront transit and will serve as the foundation for the entire GTAT project.
</p>
<div class="bg-white p-4 rounded border border-gray-200">
<p class="font-semibold text-gray-800 mb-2 lang-content" data-en="Technical Highlights:" data-fr="Points techniques importants :">Technical Highlights:</p>
<ul class="list-disc list-inside space-y-1 text-gray-700">
<li class="lang-content" data-en="Track Geometry: Built to TTC broad-gauge (1495 mm)" data-fr="Géométrie des voies : Écartement large TTC (1495 mm)">Track Geometry: Built to TTC broad-gauge (1495 mm)</li>
<li class="lang-content" data-en="Data-Driven: Using real TTC references and topographic data" data-fr="Basé sur des données réelles de la TTC">Data-Driven: Using real TTC references and topographic data</li>
<li class="lang-content" data-en="Custom stations: Union, Queens Quay, Exhibition Loop" data-fr="Stations personnalisées : Union, Queens Quay, Exhibition Loop">Custom stations: Union, Queens Quay, Exhibition Loop</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Update 2 -->
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-red-700 mb-6">
<div class="flex justify-between items-start">
<div class="flex-1">
<span class="text-sm text-gray-500 lang-content" data-en="Jan 5, 2026" data-fr="5 janv. 2026">Jan 5, 2026</span>
<h3 class="text-xl font-semibold text-gray-800 mt-2 mb-3 lang-content" data-en="TTC Flexity Outlook: Modeling Progress" data-fr="TTC Flexity Outlook : Progrès de la modélisation">
TTC Flexity Outlook: Modeling Progress
</h3>
<button class="expand-btn text-red-700 font-semibold hover:text-red-900 transition flex items-center" data-target="update2">
<span class="lang-content" data-en="Show More" data-fr="Afficher plus">Show More</span>
<svg class="w-5 h-5 ml-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
</div>
</div>
<div id="update2" class="expandable-content mt-4">
<div class="text-gray-700 space-y-3">
<p class="lang-content" data-en="The workhorse of downtown Toronto is coming to life in Blender. We're meticulously recreating the Flexity Outlook with accurate interior layouts and door configurations." data-fr="Le cheval de bataille du centre-ville de Toronto prend vie dans Blender. Nous recréons méticuleusement le Flexity Outlook avec des aménagements intérieurs précis et des configurations de portes conformes.">
The workhorse of downtown Toronto is coming to life in Blender. We're meticulously recreating the Flexity Outlook with accurate interior layouts and door configurations.
</p>
<div class="bg-white p-4 rounded border border-gray-200">
<p class="font-semibold text-gray-800 mb-2 lang-content" data-en="Current Focus:" data-fr="Focus actuel :">Current Focus:</p>
<ul class="list-disc list-inside space-y-1 text-gray-700">
<li class="lang-content" data-en="Exterior modeling with accurate dimensions" data-fr="Modélisation extérieure avec dimensions précises">Exterior modeling with accurate dimensions</li>
<li class="lang-content" data-en="Low-floor interior layout matching TTC specifications" data-fr="Aménagement intérieur à plancher bas conforme aux spécifications TTC">Low-floor interior layout matching TTC specifications</li>
<li class="lang-content" data-en="Realistic driving physics and motor sounds" data-fr="Physique de conduite réaliste et sons de moteur">Realistic driving physics and motor sounds</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Update 3 -->
<div class="bg-gray-50 p-6 rounded-lg border-l-4 border-red-700">
<div class="flex justify-between items-start">
<div class="flex-1">
<span class="text-sm text-gray-500 lang-content" data-en="Jan 5, 2026" data-fr="5 janv. 2026">Jan 5, 2026</span>
<h3 class="text-xl font-semibold text-gray-800 mt-2 mb-3 lang-content" data-en="Custom Passenger Information System (PIS)" data-fr="Système d'information passagers personnalisé (SIV)">
Custom Passenger Information System (PIS)
</h3>
<button class="expand-btn text-red-700 font-semibold hover:text-red-900 transition flex items-center" data-target="update3">
<span class="lang-content" data-en="Show More" data-fr="Afficher plus">Show More</span>
<svg class="w-5 h-5 ml-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
</div>
</div>
<div id="update3" class="expandable-content mt-4">
<div class="text-gray-700 space-y-3">
<p class="lang-content" data-en="We're developing a custom PIS system to replicate the real-world dynamic text and announcement patterns used by the TTC. This includes the iconic 'ding-dong' door chimes and automated stop announcements." data-fr="Nous développons un système SIV personnalisé pour reproduire les annonces et textes dynamiques utilisés par la TTC. Cela inclut les célèbres carillons de porte 'ding-dong' et les annonces automatiques d'arrêts.">
We're developing a custom PIS system to replicate the real-world dynamic text and announcement patterns used by the TTC. This includes the iconic 'ding-dong' door chimes and automated stop announcements.
</p>
<div class="bg-white p-4 rounded border border-gray-200">
<p class="font-semibold text-gray-800 mb-2 lang-content" data-en="Features in Testing:" data-fr="Fonctionnalités en test :">Features in Testing:</p>
<ul class="list-disc list-inside space-y-1 text-gray-700">
<li class="lang-content" data-en="Authentic TTC announcement voices" data-fr="Voix d'annonces TTC authentiques">Authentic TTC announcement voices</li>
<li class="lang-content" data-en="Dynamic route and destination displays" data-fr="Affichages dynamiques de lignes et destinations">Dynamic route and destination displays</li>
<li class="lang-content" data-en="Real door chime sounds and motor hums" data-fr="Sons réels de carillons de porte et de bourdonnements de moteur">Real door chime sounds and motor hums</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 px-4 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-gray-800 mb-8 lang-content" data-en="About The Project" data-fr="À propos du projet">About The Project</h2>
<div class="bg-white p-8 rounded-lg shadow-md mb-8">
<h3 class="text-2xl font-bold text-red-700 mb-4 lang-content" data-en="The Vision 🏙️" data-fr="La vision 🏙️">The Vision 🏙️</h3>
<p class="text-gray-700 text-lg leading-relaxed mb-4 lang-content" data-en="The Greater Toronto Area Transit project is a large-scale, high-fidelity recreation of the transit networks across Toronto and the GTA. Our focus is on 100% authenticity, preserving the unique character of Ontario's public transportation—from the hum of the Flexity motors to the specific 'ding-dong' of the door chimes." data-fr="Le projet Greater Toronto Area Transit est une recréation réaliste et à grande échelle du réseau de transport en commun de Toronto et de sa région (le Grand Toronto). Notre priorité est l'authenticité à 100%, la préservation du caractère unique du système de transport public de l'Ontario—du bourdonnement des moteurs Flexity au 'ding-dong' caractéristique des carillons de porte.">
The Greater Toronto Area Transit project is a large-scale, high-fidelity recreation of the transit networks across Toronto and the GTA. Our focus is on 100% authenticity, preserving the unique character of Ontario's public transportation—from the hum of the Flexity motors to the specific "ding-dong" of the door chimes.
</p>
<p class="text-gray-700 text-lg leading-relaxed lang-content" data-en="We aren't just building tracks; we are recreating the atmosphere of the city—the sounds, the specific architecture, and the unique operating challenges." data-fr="Nous ne construisons pas seulement des voies; nous recréons l'atmosphère de la ville : les sons, l'architecture spécifique et les défis opérationnels uniques.">
We aren't just building tracks; we are recreating the atmosphere of the city—the sounds, the specific architecture, and the unique operating challenges.
</p>
</div>
<div class="bg-white p-8 rounded-lg shadow-md">
<h3 class="text-2xl font-bold text-red-700 mb-4 lang-content" data-en="Our Commitment to Realism" data-fr="Notre engagement envers le réalisme">Our Commitment to Realism</h3>
<p class="text-gray-700 text-lg leading-relaxed lang-content" data-en="We use real topographic data, OpenStreetMap references, and on-site research. Key features include the unique TTC broad gauge (1495 mm), authentic stop spacing, and functional Passenger Information Systems (PIS)." data-fr="Nous utilisons des données topographiques réelles, des références OpenStreetMap et des recherches sur le terrain. Les caractéristiques clés incluent l'écartement large unique de la TTC (1495 mm), l'espacement authentique des arrêts et des systèmes d'information passagers (SIV) fonctionnels.">
We use real topographic data, OpenStreetMap references, and on-site research. Key features include the unique TTC broad gauge (1495 mm), authentic stop spacing, and functional Passenger Information Systems (PIS).
</p>
</div>
</div>
</section>
<!-- Map & Vehicles Section -->
<section id="map" class="py-16 px-4 bg-white">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-gray-800 mb-8 lang-content" data-en="The Map & Vehicles" data-fr="La carte et les véhicules">The Map & Vehicles</h2>
<div class="mb-12">
<h3 class="text-2xl font-bold text-red-700 mb-6 lang-content" data-en="Current Focus: Phase 1 – Downtown Core" data-fr="Objectif actuel : Phase 1 – Cœur du centre-ville">Current Focus: Phase 1 – Downtown Core</h3>
<p class="text-gray-700 text-lg mb-8 lang-content" data-en="We are currently concentrating on the TTC Streetcar network along the waterfront, building the foundation that will support the entire GTA transit ecosystem." data-fr="Nous nous concentrons actuellement sur le réseau de tramways TTC le long du secteur riverain, construisant les fondations qui soutiendront l'ensemble de l'écosystème de transport du Grand Toronto.">
We are currently concentrating on the TTC Streetcar network along the waterfront, building the foundation that will support the entire GTA transit ecosystem.
</p>
<div class="overflow-x-auto">
<table class="w-full bg-gray-50 rounded-lg overflow-hidden">
<thead class="bg-red-700 text-white">
<tr>
<th class="px-6 py-4 text-left lang-content" data-en="Route" data-fr="Ligne">Route</th>
<th class="px-6 py-4 text-left lang-content" data-en="Status" data-fr="Statut">Status</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-200">
<td class="px-6 py-4 font-semibold">509 Harbourfront</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-yellow-100 text-yellow-800">
<span class="lang-content" data-en="🟡 In Development" data-fr="🟡 En développement">🟡 In Development</span>
</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 font-semibold">510 Spadina</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-3 py-1 rounded-full bg-yellow-100 text-yellow-800">
<span class="lang-content" data-en="🟡 In Development" data-fr="🟡 En développement">🟡 In Development</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-gray-100 p-8 rounded-lg mb-8">
<h3 class="text-2xl font-bold text-red-700 mb-6 lang-content" data-en="The Fleet" data-fr="La flotte">The Fleet</h3>
<div class="bg-white p-6 rounded-lg shadow-md mb-4">
<h4 class="text-xl font-bold text-gray-800 mb-3">TTC Flexity Outlook (LFLRV)</h4>
<p class="text-gray-700 mb-3 lang-content" data-en="The workhorse of downtown Toronto. Currently being modelled in Blender with accurate interior layouts, door configurations, and realistic driving physics." data-fr="Le cheval de bataille du centre-ville de Toronto. Actuellement modélisé dans Blender avec des aménagements intérieurs précis, des configurations de portes et une physique de conduite réaliste.">
The workhorse of downtown Toronto. Currently being modelled in Blender with accurate interior layouts, door configurations, and realistic driving physics.
</p>
<span class="inline-block bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-semibold lang-content" data-en="In Active Development" data-fr="En développement actif">In Active Development</span>
</div>
<div class="bg-white p-6 rounded-lg shadow-md border-2 border-dashed border-gray-300">
<h4 class="text-xl font-bold text-gray-600 mb-3 lang-content" data-en="Future Fleet" data-fr="Flotte future">Future Fleet</h4>
<ul class="text-gray-600 space-y-2">
<li>🚌 Nova LFS / Orion VII <span class="lang-content" data-en="(Buses)" data-fr="(Autobus)">(Buses)</span></li>
<li>🚇 Toronto Rocket (TR) / T1 <span class="lang-content" data-en="(Subway trains)" data-fr="(Métros)">(Subway trains)</span></li>
<li>🚄 GO Transit Bi-Level Coaches</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Roadmap Section -->
<section id="roadmap" class="py-16 px-4 bg-gray-100">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-gray-800 mb-8 lang-content" data-en="Roadmap" data-fr="Feuille de route">Roadmap</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white p-8 rounded-lg shadow-md">
<h3 class="text-2xl font-bold text-red-700 mb-6 lang-content" data-en="Short Term" data-fr="Court terme">Short Term</h3>
<ul class="space-y-4">
<li class="flex items-start">
<span class="text-2xl mr-3">⚙️</span>
<span class="text-gray-700 lang-content" data-en="Finalizing track geometry for Union Station ↔ Exhibition Loop" data-fr="Finalisation de la géométrie des voies pour Gare Union ↔ Exhibition Loop">Finalizing track geometry for Union Station ↔ Exhibition Loop</span>
</li>
<li class="flex items-start">
<span class="text-2xl mr-3">⚙️</span>
<span class="text-gray-700 lang-content" data-en="TTC Flexity exterior modelling completion" data-fr="Achèvement de la modélisation extérieure du TTC Flexity">TTC Flexity exterior modelling completion</span>
</li>
<li class="flex items-start">
<span class="text-2xl mr-3">🕒</span>
<span class="text-gray-700 lang-content" data-en="Working TTC Announcements system with authentic voices" data-fr="Système d'annonces TTC fonctionnel avec voix authentiques">Working TTC Announcements system with authentic voices</span>
</li>
<li class="flex items-start">
<span class="text-2xl mr-3">🕒</span>
<span class="text-gray-700 lang-content" data-en="Custom-modelled stations with TTC-style signage" data-fr="Stations modélisées avec signalisation de style TTC">Custom-modelled stations with TTC-style signage</span>
</li>
</ul>
</div>
<div class="bg-white p-8 rounded-lg shadow-md">
<h3 class="text-2xl font-bold text-red-700 mb-6 lang-content" data-en="Long Term Vision (The Big Picture)" data-fr="Vision à long terme (Vue d'ensemble)">Long Term Vision (The Big Picture)</h3>
<ul class="space-y-4">
<li class="flex items-start">
<span class="text-2xl mr-3">🚊</span>
<span class="text-gray-700 lang-content" data-en="Full TTC Streetcar Network (501-512)" data-fr="Réseau complet de tramways TTC (501-512)">Full TTC Streetcar Network (501-512)</span>
</li>
<li class="flex items-start">
<span class="text-2xl mr-3">🚇</span>
<span class="text-gray-700 lang-content" data-en="TTC Subway Lines 1-4 with Toronto Rocket trains" data-fr="Lignes de métro TTC 1-4 avec trains Toronto Rocket">TTC Subway Lines 1-4 with Toronto Rocket trains</span>
</li>
<li class="flex items-start">
<span class="text-2xl mr-3">🚄</span>
<span class="text-gray-700 lang-content" data-en="GO Transit corridors and UP Express integration" data-fr="Corridors GO Transit et intégration UP Express">GO Transit corridors and UP Express integration</span>
</li>
<li class="flex items-start">
<span class="text-2xl mr-3">🚌</span>
<span class="text-gray-700 lang-content" data-en="Regional agencies: MiWay, Brampton Transit (Züm), YRT/Viva, Oakville, Burlington, DRT" data-fr="Agences régionales : MiWay, Brampton Transit (Züm), YRT/Viva, Oakville, Burlington, DRT">Regional agencies: MiWay, Brampton Transit (Züm), YRT/Viva, Oakville, Burlington, DRT</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Community Section -->
<section id="community" class="py-16 px-4 bg-white">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-bold text-gray-800 mb-8 lang-content" data-en="Community & Contact" data-fr="Communauté et contact">Community & Contact</h2>
<div class="bg-gray-100 p-8 rounded-lg mb-8">
<h3 class="text-2xl font-bold text-red-700 mb-4 lang-content" data-en="Get Involved 💬" data-fr="Impliquez-vous 💬">Get Involved 💬</h3>
<p class="text-gray-700 text-lg mb-6 lang-content" data-en="GTAT is currently a solo development effort by Timm (DevTimmOfTO), but the vision is too big for one person. This is a passion project built for the community, and we're actively looking for collaborators." data-fr="GTAT est actuellement un effort de développement solo par Timm (DevTimmOfTO), mais la vision est trop grande pour une seule personne. C'est un projet passion construit pour la communauté, et nous recherchons activement des collaborateurs.">
GTAT is currently a solo development effort by Timm (DevTimmOfTO), but the vision is too big for one person. This is a passion project built for the community, and we're actively looking for collaborators.
</p>
<h4 class="text-xl font-bold text-gray-800 mb-4 lang-content" data-en="We Need Help With:" data-fr="Nous avons besoin d'aide pour :">We Need Help With:</h4>
<div class="grid md:grid-cols-2 gap-4 mb-6">
<div class="flex items-center bg-white p-3 rounded-lg">
<span class="text-2xl mr-3">🎨</span>
<span class="text-gray-700 lang-content" data-en="3D Modelling (Blender) - Buildings & Infrastructure" data-fr="Modélisation 3D (Blender) - Bâtiments et infrastructure">3D Modelling (Blender) - Buildings & Infrastructure</span>
</div>
<div class="flex items-center bg-white p-3 rounded-lg">
<span class="text-2xl mr-3">💻</span>
<span class="text-gray-700 lang-content" data-en="LOTUS Scripting (Pascal) - Vehicles & Signals" data-fr="Programmation LOTUS (Pascal) - Véhicules et signaux">LOTUS Scripting (Pascal) - Vehicles & Signals</span>
</div>
<div class="flex items-center bg-white p-3 rounded-lg">
<span class="text-2xl mr-3">🔊</span>
<span class="text-gray-700 lang-content" data-en="Sound Design - Real TTC/GO recordings" data-fr="Design sonore - Enregistrements TTC/GO réels">Sound Design - Real TTC/GO recordings</span>
</div>
<div class="flex items-center bg-white p-3 rounded-lg">
<span class="text-2xl mr-3">🖼️</span>
<span class="text-gray-700 lang-content" data-en="Texture Artists - Realistic Toronto signage" data-fr="Artistes de textures - Signalisation Toronto réaliste">Texture Artists - Realistic Toronto signage</span>
</div>
</div>
<div class="bg-white p-6 rounded-lg border-l-4 border-red-700">
<h4 class="text-lg font-bold text-gray-800 mb-3 lang-content" data-en="Can You Help? We're Looking For:" data-fr="Pouvez-vous aider ? Nous recherchons :">Can You Help? We're Looking For:</h4>
<ul class="space-y-2 texts-gray-700">
<li>📷 <span class="lang-content" data-en="Reference photos of Toronto infrastructure and intersections" data-fr="Photos de référence de l'infrastructure de Toronto et des intersections">Reference photos of Toronto infrastructure and intersections</span></li>
<li>🎵 <span class="lang-content" data-en="TTC/GO sound recordings (motors, announcements, door chimes)" data-fr="Enregistrements sonores TTC/GO (moteurs, annonces, carillons)">TTC/GO sound recordings (motors, announcements, door chimes)</span></li>
<li>📐 <span class="lang-content" data-en="CAD data or technical drawings for rails and stops" data-fr="Données CAO ou dessins techniques pour rails et arrêts">CAD data or technical drawings for rails and stops</span></li>
<li>🗺️ <span class="lang-content" data-en="Local knowledge and operational details" data-fr="Connaissances locales et détails opérationnels">Local knowledge and operational details</span></li>
</ul>
</div>
</div>
<div class="bg-red-700 text-white p-8 rounded-lg">
<h3 class="text-2xl font-bold mb-4 lang-content" data-en="Contact" data-fr="Contact">Contact</h3>
<div class="space-y-3">
<p class="lang-content" data-en="📧 Email: -" data-fr="📧 Courriel: -">📧 Email: -</p>
<p>💬 Discord: <span class="lang-content" data-en="Coming Soon" data-fr="Bientôt disponible">Coming Soon</span></p>
<p>🔗 LOTUS Forum Thread: <a href="https://www.lotus-simulator.de/forum/index.php?thread/8670-greater-toronto-area-transit-transport-du-grand-toronto/">Click me</a></p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-6">
<p class="mb-3 lang-content" data-en="Greater Toronto Area Transit (GTAT) is a non-commercial, fan-made project for LOTUS Simulator." data-fr="Transport du Grand Toronto (GTAT) est un projet bénévole et non commercial pour LOTUS Simulator.">
Greater Toronto Area Transit (GTAT) is a non-commercial, fan-made project for LOTUS Simulator.
</p>
<p class="text-gray-400 mb-3 lang-content" data-en="Not affiliated with the Toronto Transit Commission, Metrolinx, GO Transit, or any transit agency. All rights, logos, and trademarks belong to their respective agencies." data-fr="Non affilié à la Commission de transport de Toronto, Metrolinx, GO Transit ou toute autre agence de transport. Tous les droits, logos et marques appartiennent à leurs agences respectives.">
Not affiliated with the Toronto Transit Commission, Metrolinx, GO Transit, or any transit agency. All rights, logos, and trademarks belong to their respective agencies.
</p>
<p class="text-gray-400 lang-content" data-en="This add-on is made purely for simulation, education, and community enjoyment." data-fr="Cette extension est conçue exclusivement à des fins de simulation, d'éducation et pour le plaisir de la communauté.">
This add-on is made purely for simulation, education, and community enjoyment.
</p>
</div>
<div class="text-center border-t border-gray-700 pt-6">
<p class="text-gray-400">© 2026 DevTimmOfTO. Made in/Fait au 🇩🇪 & 🇨🇦</p>
</div>
</div>
</footer>
<script>
let currentLang = 'en';
const langButton = document.getElementById('langSwitch');
function switchLanguage() {
currentLang = currentLang === 'en' ? 'fr' : 'en';
document.querySelectorAll('.lang-content').forEach(el => {
const text = el.getAttribute(`data-${currentLang}`);
if (text) {
if (el.tagName === 'A' || el.tagName === 'BUTTON' || el.tagName === 'SPAN') {
el.textContent = text;
} else {
el.textContent = text;
}
}
});
document.querySelectorAll('.nav-link').forEach(link => {
link.textContent = link.getAttribute(`data-${currentLang}`);
});
langButton.textContent = currentLang === 'en' ? '🇨🇦 EN | FR' : '🇨🇦 FR | EN';
}
langButton.addEventListener('click', switchLanguage);
// Expandable content functionality
document.querySelectorAll('.expand-btn').forEach(btn => {
btn.addEventListener('click', function() {
const targetId = this.getAttribute('data-target');
const content = document.getElementById(targetId);
const svg = this.querySelector('svg');
const textSpan = this.querySelector('span');
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
svg.classList.remove('rotate-180');
textSpan.textContent = currentLang === 'en' ? 'Show More' : 'Afficher plus';
textSpan.setAttribute('data-en', 'Show More');
textSpan.setAttribute('data-fr', 'Afficher plus');
} else {
content.classList.add('expanded');
svg.classList.add('rotate-180');
textSpan.textContent = currentLang === 'en' ? 'Show Less' : 'Afficher moins';
textSpan.setAttribute('data-en', 'Show Less');
textSpan.setAttribute('data-fr', 'Afficher moins');
}
});
});
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>