Add automotive innovation timeline HTML page
· 7 months ago
6cb958595b2ae4ec021698dd408bbd8d2aa8b9ab
Parent:
8e416b559
Introduces a comprehensive, interactive HTML timeline detailing key automotive innovations from 1908 to 2025. The page includes era-based filtering, search functionality, and detailed descriptions of major technological milestones in the automotive industry.
1 file changed +1152 −0
- automotive-innovation-timeline.html +1152 −0
Diff
--- /dev/null +++ b/automotive-innovation-timeline.html @@ -0,0 +1,1152 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Automotive Innovation Timeline: From Model T to Tesla (1908-2025)</title> + <meta name="description" content="Interactive timeline of automotive innovation spanning over a century, from the Ford Model T's flywheel magneto (1908) to Tesla's Full Self-Driving AI. Explore key breakthroughs in mechanical, safety, digital, and autonomous driving technology."> + <meta name="keywords" content="automotive history, car innovation timeline, Model T, Tesla, automobile technology, automotive engineering, self-driving cars, electric vehicles, automotive safety, ADAS, hybrid cars"> + <link rel="canonical" href="https://cheatsheets.davidveksler.com/automotive-innovation-timeline.html"> + + <!-- Open Graph Tags --> + <meta property="og:title" content="Automotive Innovation Timeline: From Model T to Tesla"> + <meta property="og:description" content="Interactive timeline of automotive innovation spanning over a century, from mechanical simplicity to software-driven autonomy."> + <meta property="og:type" content="website"> + <meta property="og:url" content="https://cheatsheets.davidveksler.com/automotive-innovation-timeline.html"> + <meta property="og:image" content="images/automotive-innovation-timeline.png"> + <meta property="og:image:alt" content="Timeline visualization showing automotive innovations from 1908 to 2025"> + + <!-- Twitter Card Tags --> + <meta name="twitter:card" content="summary_large_image"> + <meta name="twitter:title" content="Automotive Innovation Timeline: Model T to Tesla"> + <meta name="twitter:description" content="Interactive timeline of automotive innovation spanning over a century, from mechanical simplicity to software-driven autonomy."> + <meta name="twitter:image" content="images/automotive-innovation-timeline.png"> + <meta name="twitter:creator" content="@heroiclife"> + + <!-- JSON-LD Structured Data --> + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "TechArticle", + "headline": "Automotive Innovation Timeline: From Model T to Tesla (1908-2025)", + "description": "Comprehensive interactive timeline documenting over 100 years of automotive innovation, from the Ford Model T's mechanical simplicity to Tesla's AI-driven autonomous vehicles. Covers mechanical innovations, safety features, digital revolution, and the dawn of autonomy.", + "author": { + "@type": "Person", + "name": "David Veksler (AI Generated)" + }, + "publisher": { + "@type": "Organization", + "name": "David Veksler Cheatsheets" + }, + "datePublished": "2025-01-06", + "dateModified": "2025-01-06", + "keywords": "automotive history, car innovation, Model T, Tesla, automobile technology, automotive engineering, self-driving cars, electric vehicles, automotive safety, ADAS, hybrid cars, automotive timeline" + } + </script> + + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + + <style> + :root { + --era-mechanical: #8b4513; + --era-comfort: #2e8b57; + --era-digital: #4169e1; + --era-autonomy: #9370db; + --timeline-line: #dee2e6; + } + + body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + min-height: 100vh; + } + + .page-header { + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); + color: white; + padding: 2rem 0; + margin-bottom: 2rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + } + + .timeline-controls { + background: white; + padding: 1.5rem; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + margin-bottom: 2rem; + position: sticky; + top: 10px; + z-index: 100; + } + + .filter-btn { + margin: 0.25rem; + border-radius: 20px; + padding: 0.5rem 1rem; + transition: all 0.3s; + } + + .filter-btn.active { + transform: scale(1.05); + box-shadow: 0 4px 8px rgba(0,0,0,0.2); + } + + .timeline { + position: relative; + padding: 2rem 0; + } + + .timeline::before { + content: ''; + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 4px; + height: 100%; + background: var(--timeline-line); + } + + .timeline-item { + position: relative; + margin-bottom: 3rem; + opacity: 0; + animation: fadeInUp 0.6s forwards; + } + + @keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + + .timeline-item:nth-child(odd) .timeline-content { + margin-left: 0; + margin-right: calc(50% + 40px); + text-align: right; + } + + .timeline-item:nth-child(even) .timeline-content { + margin-left: calc(50% + 40px); + margin-right: 0; + } + + .timeline-marker { + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 24px; + height: 24px; + border-radius: 50%; + background: white; + border: 4px solid; + z-index: 10; + top: 0; + box-shadow: 0 0 0 4px rgba(255,255,255,0.3); + } + + .era-mechanical .timeline-marker { border-color: var(--era-mechanical); } + .era-comfort .timeline-marker { border-color: var(--era-comfort); } + .era-digital .timeline-marker { border-color: var(--era-digital); } + .era-autonomy .timeline-marker { border-color: var(--era-autonomy); } + + .timeline-content { + background: white; + padding: 1.5rem; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + transition: all 0.3s; + border-left: 4px solid; + } + + .timeline-content:hover { + transform: translateY(-4px); + box-shadow: 0 8px 12px rgba(0,0,0,0.15); + } + + .era-mechanical .timeline-content { border-left-color: var(--era-mechanical); } + .era-comfort .timeline-content { border-left-color: var(--era-comfort); } + .era-digital .timeline-content { border-left-color: var(--era-digital); } + .era-autonomy .timeline-content { border-left-color: var(--era-autonomy); } + + .timeline-year { + display: inline-block; + font-weight: bold; + font-size: 1.5rem; + color: white; + padding: 0.5rem 1rem; + border-radius: 20px; + margin-bottom: 0.75rem; + } + + .era-mechanical .timeline-year { background: var(--era-mechanical); } + .era-comfort .timeline-year { background: var(--era-comfort); } + .era-digital .timeline-year { background: var(--era-digital); } + .era-autonomy .timeline-year { background: var(--era-autonomy); } + + .timeline-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: #1a1a2e; + } + + .timeline-description { + color: #495057; + line-height: 1.6; + } + + .era-badge { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 15px; + font-size: 0.875rem; + font-weight: 500; + margin-top: 0.5rem; + } + + .era-section { + background: white; + padding: 2rem; + border-radius: 10px; + margin-bottom: 2rem; + box-shadow: 0 4px 6px rgba(0,0,0,0.1); + border-top: 5px solid; + } + + .legend { + background: white; + padding: 1.5rem; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + margin-bottom: 2rem; + } + + .legend-item { + display: inline-flex; + align-items: center; + margin-right: 2rem; + margin-bottom: 0.5rem; + } + + .legend-color { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 0.5rem; + } + + .search-highlight { + background-color: #fff3cd; + padding: 0.1rem 0.2rem; + border-radius: 3px; + } + + @media (max-width: 768px) { + .timeline::before { + left: 20px; + } + + .timeline-marker { + left: 20px; + } + + .timeline-item:nth-child(odd) .timeline-content, + .timeline-item:nth-child(even) .timeline-content { + margin-left: 60px; + margin-right: 0; + text-align: left; + } + } + + @media print { + body { + background: white; + } + + .timeline-controls, + .no-print { + display: none; + } + + .timeline-item { + page-break-inside: avoid; + } + + .timeline-content { + box-shadow: none; + border: 1px solid #dee2e6; + } + } + </style> +</head> +<body> + <div class="page-header"> + <div class="container"> + <h1 class="display-4 mb-2"> + <i class="bi bi-car-front-fill me-3"></i> + Automotive Innovation Timeline + </h1> + <p class="lead mb-0">From Spark to Silicon: A Century of Progress (Model T to Tesla)</p> + </div> + </div> + + <div class="container"> + <div class="timeline-controls no-print"> + <div class="row align-items-center"> + <div class="col-md-6 mb-3 mb-md-0"> + <input type="text" id="searchInput" class="form-control" placeholder="Search innovations..."> + </div> + <div class="col-md-6"> + <div class="d-flex flex-wrap justify-content-md-end"> + <button class="btn btn-sm filter-btn active" data-era="all" style="background: #6c757d; color: white;"> + All Eras + </button> + <button class="btn btn-sm filter-btn" data-era="mechanical" style="background: var(--era-mechanical); color: white;"> + Mechanical Age + </button> + <button class="btn btn-sm filter-btn" data-era="comfort" style="background: var(--era-comfort); color: white;"> + Comfort & Power + </button> + <button class="btn btn-sm filter-btn" data-era="digital" style="background: var(--era-digital); color: white;"> + Digital Revolution + </button> + <button class="btn btn-sm filter-btn" data-era="autonomy" style="background: var(--era-autonomy); color: white;"> + Autonomy + </button> + </div> + </div> + </div> + </div> + + <div class="legend"> + <h5 class="mb-3"><i class="bi bi-info-circle me-2"></i>Innovation Eras</h5> + <div class="d-flex flex-wrap"> + <div class="legend-item"> + <div class="legend-color" style="background: var(--era-mechanical);"></div> + <span>Mechanical Age (1900s-1940s)</span> + </div> + <div class="legend-item"> + <div class="legend-color" style="background: var(--era-comfort);"></div> + <span>Comfort & Power (1950s-1970s)</span> + </div> + <div class="legend-item"> + <div class="legend-color" style="background: var(--era-digital);"></div> + <span>Digital Revolution (1980s-2000s)</span> + </div> + <div class="legend-item"> + <div class="legend-color" style="background: var(--era-autonomy);"></div> + <span>Dawn of Autonomy (2010s-Present)</span> + </div> + </div> + </div> + + <div class="timeline" id="timeline"> + <!-- 1908: Flywheel Magneto --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1908"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1908</div> + <h3 class="timeline-title">Flywheel Magneto Ignition - Ford Model T</h3> + <p class="timeline-description"> + The Model T's engine featured an integrated low-voltage magneto built into the flywheel, generating alternating current for ignition. This innovation meant no battery was required to start the car - just a vigorous hand-crank. Developed by Edward "Spider" Huff, this simple and reliable system made the Model T highly dependable with fewer electrical components to fail. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1912: Electric Starter --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1912"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1912</div> + <h3 class="timeline-title">Electric Self-Starter - Cadillac Model 30</h3> + <p class="timeline-description"> + Cadillac introduced the first production electric self-starter, eliminating the arduous and dangerous task of hand cranking. With the push of a button, the starter motor cranked the engine. This tremendous convenience and safety feature was quickly adopted industry-wide. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1913: Assembly Line --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1913"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1913</div> + <h3 class="timeline-title">Moving Assembly Line - Ford</h3> + <p class="timeline-description"> + Henry Ford implemented the moving assembly line, dramatically reducing costs and production time. This manufacturing breakthrough brought car ownership within reach for millions of people, revolutionizing both the automotive industry and modern manufacturing. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1914: All-Steel Bodies --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1914"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1914</div> + <h3 class="timeline-title">All-Steel Car Bodies - Dodge Brothers</h3> + <p class="timeline-description"> + When many car bodies still relied on wood framing, Dodge Brothers pioneered the all-steel body for their 1914 touring car. Steel bodies made cars sturdier, more durable, and safer. By the late 1930s, most manufacturers had transitioned to predominantly steel construction. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1921: Hydraulic Brakes --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1921"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1921</div> + <h3 class="timeline-title">Four-Wheel Hydraulic Brakes - Duesenberg Model A</h3> + <p class="timeline-description"> + Duesenberg introduced four-wheel hydraulic brakes on the Model A - the first American production car with this feature. Unlike mechanical linkage brakes, hydraulics provided more uniform and powerful stopping force to each wheel. By the 1940s, even mass-market cars adopted this system, vastly improving safety. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1924: Safety Glass --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1924"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1924</div> + <h3 class="timeline-title">Laminated Safety Glass</h3> + <p class="timeline-description"> + Ford introduced laminated safety glass for windshields, which prevented shattering into dangerous shards during accidents. This innovation consisted of two layers of glass with a plastic interlayer, dramatically reducing injuries from broken glass and becoming standard safety equipment. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1928: Synchromesh Transmission --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1928"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1928</div> + <h3 class="timeline-title">Synchromesh Transmission - GM Cadillac</h3> + <p class="timeline-description"> + General Motors revolutionized manual gear shifting with the synchromesh gearbox on 1928 Cadillac models. This innovation used friction synchronizers to match gear speeds during shifts, allowing smooth gear changes without grinding. By the 1930s, these "clashless" gears eliminated the need for complex double-clutching techniques. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1932: Independent Front Suspension --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1932"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1932</div> + <h3 class="timeline-title">Independent Front Suspension</h3> + <p class="timeline-description"> + Independent front suspension, allowing each front wheel to move independently, dramatically improved ride quality and handling. GM's "Dubonnet" and "Knee-Action" systems were early implementations. By the 1950s, independent suspension became standard on most cars, replacing rigid axles. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1934: Front-Wheel Drive --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1934"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1934</div> + <h3 class="timeline-title">Front-Wheel Drive - Citroën Traction Avant</h3> + <p class="timeline-description"> + France's Citroën pioneered front-wheel drive in mass production with the Traction Avant. This layout improved traction, interior space efficiency, and handling characteristics, influencing automotive design for decades to come. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1936: Diesel Passenger Car --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1936"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1936</div> + <h3 class="timeline-title">First Diesel Passenger Car - Mercedes-Benz 260D</h3> + <p class="timeline-description"> + Mercedes-Benz introduced the 260D, the world's first diesel-powered passenger car. This innovation demonstrated diesel's efficiency advantages and laid groundwork for widespread diesel adoption in European vehicles. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1940: Automatic Transmission --> + <div class="timeline-item era-mechanical" data-era="mechanical" data-year="1940"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1940</div> + <h3 class="timeline-title">Automatic Transmission - Oldsmobile Hydra-Matic</h3> + <p class="timeline-description"> + The Oldsmobile Hydra-Matic was the world's first mass-produced fully automatic transmission. Drivers no longer needed to manually shift gears - the Hydra-Matic automatically changed through four forward speeds. This feature removed the clutch pedal and gear lever work, making driving far more approachable to a wider audience. + </p> + <span class="era-badge" style="background: rgba(139, 69, 19, 0.15); color: var(--era-mechanical);">Mechanical Era</span> + </div> + </div> + + <!-- 1946: Radial Tires --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1946"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1946</div> + <h3 class="timeline-title">Radial Tire - Michelin</h3> + <p class="timeline-description"> + Michelin introduced the radial tire, which featured improved durability, fuel efficiency, and handling compared to bias-ply tires. Radial tires gradually became the standard, revolutionizing tire technology and vehicle performance. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1940: Power Windows --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1940"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1940</div> + <h3 class="timeline-title">Power Windows - Packard 180</h3> + <p class="timeline-description"> + Packard introduced power windows on the 1940 Packard 180, using electric motors to raise and lower windows. Initially a luxury feature, power windows gradually trickled down to mainstream vehicles by the 1980s and are now standard even on economy cars. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1951: Power Steering --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1951"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1951</div> + <h3 class="timeline-title">Power Steering - Chrysler Imperial</h3> + <p class="timeline-description"> + Chrysler debuted "Hydraguide," the first commercially available power steering system. Using hydraulic assistance, the steering wheel became much easier to turn, reducing driver fatigue and allowing for quicker steering ratios. By the mid-1950s, power steering became a must-have feature. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1953: Air Conditioning --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1953"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1953</div> + <h3 class="timeline-title">Practical Air Conditioning - Chrysler Imperial & Packard</h3> + <p class="timeline-description"> + While Packard had experimented with AC in 1940, the 1953 model year saw air conditioning return as a viable factory option. By 1960, every major American automaker offered AC, and more than half of new cars had it by the late 1960s, fundamentally changing long-distance summer travel. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1955: Disc Brakes --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1955"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1955</div> + <h3 class="timeline-title">Front Disc Brakes - Citroën DS</h3> + <p class="timeline-description"> + After proving their superiority in racing (Jaguar C-Type in 1953), disc brakes came to production cars with the Citroën DS - the first mass-market car with front disc brakes. By the early 1970s, disc brakes were common on mainstream cars, greatly improving wet-weather braking and fade resistance. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1958: Cruise Control --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1958"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1958</div> + <h3 class="timeline-title">Cruise Control - Chrysler</h3> + <p class="timeline-description"> + Invented by blind engineer Ralph Teetor, cruise control debuted as "Auto-Pilot" on 1958 Chrysler models. This feature allowed drivers to set a desired highway speed, with the car electronically modulating the throttle. It reduced fatigue on long trips and foreshadowed electronic driver aids. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1959: Three-Point Seatbelt --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1959"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1959</div> + <h3 class="timeline-title">Three-Point Seatbelt - Volvo</h3> + <p class="timeline-description"> + Volvo engineer Nils Bohlin designed the three-point safety belt, securing both upper and lower body with one continuous belt. Volvo made the patent free to all manufacturers in the interest of public safety. This innovation is credited with saving over a million lives and remains the fundamental safety device in every car. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1960: Alternator --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1960"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1960</div> + <h3 class="timeline-title">Alternator - Chrysler Valiant</h3> + <p class="timeline-description"> + Chrysler was first to introduce an alternator in the 1960 Valiant, replacing generators to handle increased electrical loads as cars added more power-hungry features. It soon became standard industry-wide. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1962: Turbocharging --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1962"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1962</div> + <h3 class="timeline-title">Production Turbocharging - Oldsmobile Jetfire</h3> + <p class="timeline-description"> + The 1962 Oldsmobile Jetfire and Chevrolet Corvair Monza were early turbo-equipped cars. Turbochargers compress intake air to boost power without increasing engine size. Though early turbos had reliability challenges, by the late '70s (Porsche 911 Turbo), turbos proved they could deliver exotic-car performance. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1963: Intermittent Windshield Wipers --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1963"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1963</div> + <h3 class="timeline-title">Intermittent Windshield Wipers</h3> + <p class="timeline-description"> + Invented by Robert Kearns, intermittent windshield wipers allowed drivers to set variable delay between wipes for light rain. First offered by Ford in 1969, this simple innovation greatly improved visibility and driver comfort in varied weather conditions, becoming universal by the 1980s. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1966: Heated Seats --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1966"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1966</div> + <h3 class="timeline-title">Heated Seats - Cadillac</h3> + <p class="timeline-description"> + Cadillac introduced heated seats in 1966, using electric heating elements embedded in the seat cushions. This luxury comfort feature proved popular in cold climates and gradually spread to mainstream vehicles, becoming a common option by the 2000s. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1967: Electronic Fuel Injection --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1967"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1967</div> + <h3 class="timeline-title">Electronic Fuel Injection - Bosch D-Jetronic</h3> + <p class="timeline-description"> + Bosch's D-Jetronic, launched in 1967, was the first mass-market electronic fuel injection system. It appeared on the 1968 VW 1600 and later Mercedes and Volvo cars. Electronic fuel injection began replacing carburetors for precise fuel metering, improving emissions and drivability. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1975: Catalytic Converter --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1975"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1975</div> + <h3 class="timeline-title">Catalytic Converter Mandate - U.S. Clean Air Act</h3> + <p class="timeline-description"> + Starting with 1975 models, most gasoline cars in the U.S. were equipped with catalytic converters to meet stricter emissions regulations. This device converts harmful gases into less harmful emissions and required the switch to unleaded gasoline, marking a new era of emissions technology. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1978: Anti-Lock Brakes (ABS) --> + <div class="timeline-item era-comfort" data-era="comfort" data-year="1978"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1978</div> + <h3 class="timeline-title">Electronic ABS - Mercedes-Benz S-Class</h3> + <p class="timeline-description"> + Mercedes-Benz (with Bosch) offered the first modern electronic 4-wheel anti-lock braking system on the S-Class sedan. This computerized system sensed wheel slip and modulated brake pressure faster than any human could, allowing drivers to maintain steering control during emergency stops. + </p> + <span class="era-badge" style="background: rgba(46, 139, 87, 0.15); color: var(--era-comfort);">Comfort & Power Era</span> + </div> + </div> + + <!-- 1980s: OBD --> + <div class="timeline-item era-digital" data-era="digital" data-year="1980"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1980s</div> + <h3 class="timeline-title">On-Board Diagnostics (OBD)</h3> + <p class="timeline-description"> + In the early 1980s, basic OBD systems could illuminate a "Check Engine" light when something was amiss. By 1996, OBD-II became mandatory in the U.S., requiring standardized diagnostic ports and trouble codes. This revolutionized troubleshooting and paved the way for modern telematics. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 1983: Keyless Entry --> + <div class="timeline-item era-digital" data-era="digital" data-year="1983"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1983</div> + <h3 class="timeline-title">Keyless Entry - Renault Fuego</h3> + <p class="timeline-description"> + The 1983 Renault Fuego introduced infrared keyless entry, allowing drivers to unlock doors with a remote fob. This convenience feature evolved into modern key fobs with remote start, and eventually proximity keys that don't require removal from pockets. Now standard on most vehicles. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 1987: Traction Control --> + <div class="timeline-item era-digital" data-era="digital" data-year="1987"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1987</div> + <h3 class="timeline-title">Traction Control System - Mercedes-Benz & BMW</h3> + <p class="timeline-description"> + Building on ABS technology, traction control systems prevented wheel spin during acceleration by reducing engine power or applying brakes. First introduced by Mercedes-Benz and BMW in 1987, this safety feature became widespread in the 1990s, improving control in slippery conditions. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 1988: Airbags Standard --> + <div class="timeline-item era-digital" data-era="digital" data-year="1988"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1988</div> + <h3 class="timeline-title">Standard Driver Airbag - Chrysler</h3> + <p class="timeline-description"> + Chrysler became the first U.S. automaker to make driver-side airbags standard on several models. By the mid-1990s, dual front airbags were required in all new cars. Airbags instantaneously inflate in crashes to cushion impact, dramatically reducing fatalities alongside seatbelts. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 1990: GPS Navigation --> + <div class="timeline-item era-digital" data-era="digital" data-year="1990"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1990</div> + <h3 class="timeline-title">GPS Navigation - Mazda Eunos Cosmo</h3> + <p class="timeline-description"> + The Japanese-market Mazda Eunos Cosmo offered the world's first GPS-based car navigation system. These systems featured moving maps and turn-by-turn directions, fundamentally changing how drivers found destinations and heralding the connected, digital car era. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 1995: Electronic Stability Control --> + <div class="timeline-item era-digital" data-era="digital" data-year="1995"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1995</div> + <h3 class="timeline-title">Electronic Stability Control (ESC) - Mercedes-Benz & BMW</h3> + <p class="timeline-description"> + One of the most significant safety advancements since the seatbelt, ESC uses computer-controlled braking and engine power reduction to help drivers maintain control. If a car begins to skid, ESC automatically corrects by braking individual wheels. It became mandated in the U.S. and EU by the early 2010s. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 1997: Hybrid Electric Vehicle --> + <div class="timeline-item era-digital" data-era="digital" data-year="1997"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">1997</div> + <h3 class="timeline-title">Mass-Produced Hybrid - Toyota Prius</h3> + <p class="timeline-description"> + The Toyota Prius launched in Japan as the world's first mass-produced hybrid passenger car (worldwide in 2000). Combining an internal combustion engine with an electric motor/battery, it offered ~50 mpg with regenerative braking. By the late 2000s, every major automaker had hybrids in their lineup. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 2000: TPMS --> + <div class="timeline-item era-digital" data-era="digital" data-year="2000"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2000</div> + <h3 class="timeline-title">Tire Pressure Monitoring System (TPMS)</h3> + <p class="timeline-description"> + Tire Pressure Monitoring Systems used sensors to alert drivers to under-inflated tires, improving safety and fuel efficiency. Following the TREAD Act, TPMS became mandatory on all new vehicles in the U.S. by 2008, preventing accidents caused by tire failures. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 2000: Backup Camera --> + <div class="timeline-item era-digital" data-era="digital" data-year="2000"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2000</div> + <h3 class="timeline-title">Backup Camera - Nissan & Infiniti</h3> + <p class="timeline-description"> + The 2000 Infiniti Q45 was among the first production vehicles with a backup camera to help drivers see behind while reversing. This safety feature became increasingly popular and was mandated in the U.S. by 2018, significantly reducing backup accidents and injuries. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 2001: Push-Button Start --> + <div class="timeline-item era-digital" data-era="digital" data-year="2001"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2001</div> + <h3 class="timeline-title">Push-Button Start with Smart Key</h3> + <p class="timeline-description"> + Mercedes-Benz popularized keyless ignition with push-button start, allowing drivers to start the engine without inserting a key, as long as the key fob was nearby. This convenience feature has become standard on most modern vehicles, replacing traditional ignition keys. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 2003: Dual-Clutch Transmission --> + <div class="timeline-item era-digital" data-era="digital" data-year="2003"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2003</div> + <h3 class="timeline-title">Mainstream DCT - Volkswagen Golf R32 DSG</h3> + <p class="timeline-description"> + Dual-clutch transmissions, which originated in racing for lightning-fast gear changes, appeared on road cars with the 2003 VW Golf R32's DSG gearbox. This gave drivers automatic-like convenience with lightning-quick shifts, now common in performance cars. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 2003: Direct Injection --> + <div class="timeline-item era-digital" data-era="digital" data-year="2003"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2003</div> + <h3 class="timeline-title">Gasoline Direct Injection (GDI) - Mainstream</h3> + <p class="timeline-description"> + Direct injection technology, which sprays fuel directly into combustion chambers rather than intake ports, improved fuel efficiency and power. While Mercedes experimented with it earlier, GDI became mainstream in the 2000s, now standard on most modern engines for better performance and emissions. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 2004: Adaptive Headlights --> + <div class="timeline-item era-digital" data-era="digital" data-year="2004"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2004</div> + <h3 class="timeline-title">Adaptive Headlights - Multiple Manufacturers</h3> + <p class="timeline-description"> + Adaptive headlights pivot based on steering angle and vehicle speed, improving visibility around curves at night. Systems evolved to include automatic high-beam control and later LED matrix headlights that can selectively dim portions to avoid blinding other drivers. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 2004: Bluetooth Connectivity --> + <div class="timeline-item era-digital" data-era="digital" data-year="2004"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2004</div> + <h3 class="timeline-title">Bluetooth Standard - Acura TL</h3> + <p class="timeline-description"> + The 2004 Acura TL offered Bluetooth hands-free phone connectivity as a standard feature, pioneering in North America. Drivers could pair phones to talk via car speakers and microphone. By the late 2000s, Bluetooth stereo audio allowed wireless music playing as well. + </p> + <span class="era-badge" style="background: rgba(65, 105, 225, 0.15); color: var(--era-digital);">Digital Era</span> + </div> + </div> + + <!-- 2008: Tesla Roadster --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2008"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2008</div> + <h3 class="timeline-title">Modern Electric Sports Car - Tesla Roadster</h3> + <p class="timeline-description"> + The Tesla Roadster demonstrated that electric vehicles could be desirable, high-performance cars with over 200 miles of range. This landmark vehicle sparked the modern EV revolution, proving electric cars could compete with gasoline vehicles on performance while being practical for daily use. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2010: Nissan Leaf --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2010"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2010</div> + <h3 class="timeline-title">Mass-Market Electric Vehicle - Nissan Leaf</h3> + <p class="timeline-description"> + The Nissan Leaf was the first mass-market, purpose-built electric vehicle, making EVs accessible to average consumers. Its success demonstrated mainstream demand for electric vehicles and paved the way for the current wave of EV adoption across all manufacturers. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2012: Tesla Supercharger --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2012"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2012</div> + <h3 class="timeline-title">DC Fast Charging Network - Tesla Supercharger</h3> + <p class="timeline-description"> + Tesla launched the Supercharger network, providing DC fast charging that could add 200+ miles of range in 15-30 minutes. This infrastructure addressed "range anxiety" and made long-distance EV travel practical, becoming a competitive advantage and inspiring other charging networks. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2013: Blind Spot Monitoring --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2013"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2013</div> + <h3 class="timeline-title">Blind Spot Monitoring - Mainstream Adoption</h3> + <p class="timeline-description"> + Blind spot monitoring systems use radar or cameras to detect vehicles in adjacent lanes and alert drivers with visual or audible warnings. While introduced earlier on luxury cars, it became widespread in mainstream vehicles in the 2010s, significantly reducing lane-change accidents. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2014: 360-Degree Camera --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2014"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2014</div> + <h3 class="timeline-title">360-Degree Surround-View Camera Systems</h3> + <p class="timeline-description"> + Multiple cameras around the vehicle combine to create a bird's-eye view, making parking and maneuvering in tight spaces much easier. Initially a luxury feature, 360-degree camera systems have become increasingly common on mainstream vehicles, improving safety and convenience. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2014: Tesla Autopilot --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2014"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2014</div> + <h3 class="timeline-title">Tesla Autopilot Hardware - Model S</h3> + <p class="timeline-description"> + Tesla introduced "Autopilot" hardware on its Model S. By 2015, software enabled semi-autonomous highway driving (adaptive cruise + autosteering). Tesla aggressively iterated via over-the-air updates, pushing the envelope of Level 2 automation and spurring the entire industry to accelerate autonomous vehicle R&D. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- Mid-2010s: ADAS Suites --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2015"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">Mid-2010s</div> + <h3 class="timeline-title">Advanced Driver-Assistance Systems (ADAS)</h3> + <p class="timeline-description"> + By the 2010s, many cars could automatically park, warn of impending collisions and apply brakes (Automatic Emergency Braking), keep the car centered in lanes (Lane Keeping Assist), and adapt cruise control speed to traffic. These Level 2 automation features became standard even on mainstream vehicles (Toyota Safety Sense, Honda Sensing). + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- Mid-2010s: CarPlay/Android Auto --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2015"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">Mid-2010s</div> + <h3 class="timeline-title">Smartphone Integration - Apple CarPlay & Android Auto</h3> + <p class="timeline-description"> + Apple CarPlay and Android Auto allowed drivers to mirror their phone's apps to the car's dashboard screen. This integration made software ecosystems as important as hardware, enabling seamless access to navigation, music, messaging, and more. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2016: Digital Instrument Clusters --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2016"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2016</div> + <h3 class="timeline-title">Fully Digital Instrument Clusters - Mainstream</h3> + <p class="timeline-description"> + Replacing traditional analog gauges with customizable digital displays, fully digital instrument clusters became mainstream in the mid-2010s. These high-resolution screens can display navigation, entertainment, driver assistance information, and adapt based on driving mode, representing the digitization of the driver's primary interface. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2017: OTA Updates --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2017"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2017</div> + <h3 class="timeline-title">Over-the-Air (OTA) Updates - Tesla</h3> + <p class="timeline-description"> + Tesla sent an OTA update in 2017 that improved acceleration times on some models, demonstrating how cars can improve long after purchase. Now many automakers offer OTA updates for software features, performance improvements, and even adding new capabilities remotely. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2018: Heads-Up Display --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2018"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2018</div> + <h3 class="timeline-title">Augmented Reality Heads-Up Display</h3> + <p class="timeline-description"> + Advanced heads-up displays project navigation arrows, speed, and safety information directly onto the windshield in the driver's line of sight. Mercedes and other manufacturers introduced AR HUDs that overlay directional information on the actual road, minimizing distraction and improving safety. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2019: V2X Communication --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2019"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2019</div> + <h3 class="timeline-title">Vehicle-to-Everything (V2X) Communication</h3> + <p class="timeline-description"> + V2X technology allows vehicles to communicate with each other and infrastructure (traffic lights, road signs) to improve safety and traffic flow. Early implementations appeared in select models, with systems warning drivers of approaching emergency vehicles, hazards ahead, or optimal speeds for green lights. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2020s: Autonomous Trials --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2020"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">Early 2020s</div> + <h3 class="timeline-title">Driverless Taxis - Waymo & Cruise</h3> + <p class="timeline-description"> + Companies like Waymo (Google) and Cruise (GM) deployed fully autonomous vehicles for ride-hailing in limited regions. By the early 2020s, Waymo had driverless taxis with no safety driver operating, demonstrating that autonomous driving technology is rapidly maturing toward Level 4/5 autonomy. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + + <!-- 2025: Tesla FSD --> + <div class="timeline-item era-autonomy" data-era="autonomy" data-year="2025"> + <div class="timeline-marker"></div> + <div class="timeline-content"> + <div class="timeline-year">2025</div> + <h3 class="timeline-title">Tesla Full Self-Driving (Beta) - Most Advanced Consumer System</h3> + <p class="timeline-description"> + As of 2025, Tesla's Full Self-Driving (Beta) is the most advanced driver-assist package offered to consumers. It attempts to handle city street driving: navigating to destinations, stopping at lights and signs, making turns. Despite its name, FSD is still Level 2 automation requiring continuous driver supervision. Eight cameras feed a neural network AI powered by a supercomputer chip, trained on millions of miles of real-world data. + </p> + <span class="era-badge" style="background: rgba(147, 112, 219, 0.15); color: var(--era-autonomy);">Autonomy Era</span> + </div> + </div> + </div> + + <div class="alert alert-info mt-4"> + <h5><i class="bi bi-info-circle me-2"></i>Timeline Summary</h5> + <p class="mb-2">This comprehensive timeline chronicles over 100 years of automotive innovation across <strong>50+ major milestones</strong>, from the elegant simplicity of the Model T's magneto to the intricate neural networks of Tesla's AI.</p> + <p class="mb-0">Each advancement stands on the shoulders of previous innovations, demonstrating the continuum from purely mechanical ingenuity (hand-cranks, steel bodies, hydraulic brakes) to comfort and power (air conditioning, power steering, turbocharging) to digital revolution (ABS, airbags, GPS, hybrids) and finally to the dawn of autonomy (ADAS, electric vehicles, self-driving systems, OTA updates).</p> + </div> + + <footer class="text-center py-4 text-muted"> + <p class="mb-0">Interactive Automotive Innovation Timeline | <a href="https://cheatsheets.davidveksler.com" target="_blank" rel="noopener noreferrer">More Cheatsheets</a></p> + </footer> + </div> + + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> + <script> + // Filter functionality + const filterButtons = document.querySelectorAll('.filter-btn'); + const timelineItems = document.querySelectorAll('.timeline-item'); + + filterButtons.forEach(button => { + button.addEventListener('click', () => { + const era = button.dataset.era; + + // Update active button + filterButtons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + + // Filter items + timelineItems.forEach(item => { + if (era === 'all' || item.dataset.era === era) { + item.style.display = ''; + item.style.animation = 'fadeInUp 0.6s forwards'; + } else { + item.style.display = 'none'; + } + }); + }); + }); + + // Search functionality + const searchInput = document.getElementById('searchInput'); + + searchInput.addEventListener('input', (e) => { + const searchTerm = e.target.value.toLowerCase(); + + timelineItems.forEach(item => { + const text = item.textContent.toLowerCase(); + const matchesSearch = text.includes(searchTerm); + + if (matchesSearch || searchTerm === '') { + item.style.display = ''; + + // Highlight matching text + if (searchTerm !== '') { + highlightText(item, searchTerm); + } else { + removeHighlights(item); + } + } else { + item.style.display = 'none'; + } + }); + }); + + function highlightText(element, searchTerm) { + // Simple highlight - could be enhanced + const description = element.querySelector('.timeline-description'); + const title = element.querySelector('.timeline-title'); + + [description, title].forEach(el => { + if (el) { + const originalText = el.getAttribute('data-original') || el.textContent; + el.setAttribute('data-original', originalText); + + const regex = new RegExp(`(${searchTerm})`, 'gi'); + const highlightedText = originalText.replace(regex, '<span class="search-highlight">$1</span>'); + el.innerHTML = highlightedText; + } + }); + } + + function removeHighlights(element) { + const description = element.querySelector('.timeline-description'); + const title = element.querySelector('.timeline-title'); + + [description, title].forEach(el => { + if (el && el.getAttribute('data-original')) { + el.textContent = el.getAttribute('data-original'); + } + }); + } + + // Stagger animation on load + document.addEventListener('DOMContentLoaded', () => { + timelineItems.forEach((item, index) => { + item.style.animationDelay = `${index * 0.1}s`; + }); + }); + + // Save scroll position + window.addEventListener('beforeunload', () => { + localStorage.setItem('scrollPosition', window.scrollY); + }); + + window.addEventListener('load', () => { + const scrollPosition = localStorage.getItem('scrollPosition'); + if (scrollPosition) { + window.scrollTo(0, parseInt(scrollPosition)); + localStorage.removeItem('scrollPosition'); + } + }); + </script> +</body> +</html> \ No newline at end of file