Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AMS2 GT3 Setup Advisor</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .setup-card { | |
| transition: all 0.2s ease; | |
| } | |
| .setup-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .slider-thumb::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| background: #3b82f6; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="mb-8 text-center"> | |
| <h1 class="text-4xl font-bold text-blue-800 mb-2">AMS2 GT3 Setup Advisor</h1> | |
| <p class="text-lg text-gray-600">Optimize your GT3 car for any track in Automobilista 2</p> | |
| </header> | |
| <!-- Setup Form --> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-4">Configure Your Setup</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Car Selection --> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">Select GT3 Car</label> | |
| <select id="car-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="mercedes">Mercedes-AMG GT3</option> | |
| <option value="porsche">Porsche 911 GT3 R</option> | |
| <option value="audi">Audi R8 LMS GT3</option> | |
| <option value="bmw">BMW M6 GT3</option> | |
| <option value="mclaren">McLaren 720S GT3</option> | |
| <option value="lamborghini">Lamborghini Huracán GT3</option> | |
| <option value="bentley">Bentley Continental GT3</option> | |
| </select> | |
| </div> | |
| <!-- Track Selection --> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">Select Track</label> | |
| <select id="track-select" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="interlagos">Autódromo José Carlos Pace (Interlagos)</option> | |
| <option value="spa">Circuit de Spa-Francorchamps</option> | |
| <option value="nurburgring">Nürburgring GP</option> | |
| <option value="monza">Autodromo Nazionale Monza</option> | |
| <option value="bathurst">Mount Panorama (Bathurst)</option> | |
| <option value="imola">Autodromo Enzo e Dino Ferrari (Imola)</option> | |
| <option value="catalunya">Circuit de Barcelona-Catalunya</option> | |
| <option value="silverstone">Silverstone Circuit</option> | |
| <option value="brands_hatch">Brands Hatch GP</option> | |
| <option value="donington">Donington Park GP</option> | |
| <option value="kyalami">Kyalami Grand Prix Circuit</option> | |
| <option value="laguna_seca">WeatherTech Raceway Laguna Seca</option> | |
| <option value="long_beach">Long Beach Street Circuit</option> | |
| <option value="oulton_park">Oulton Park International</option> | |
| <option value="snetterton">Snetterton 300 Circuit</option> | |
| <option value="suzuka">Suzuka International Racing Course</option> | |
| <option value="watkins_glen">Watkins Glen International</option> | |
| <option value="zandvoort">Circuit Zandvoort</option> | |
| <option value="zolder">Circuit Zolder</option> | |
| </select> | |
| </div> | |
| <!-- Driving Style --> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">Driving Style</label> | |
| <div class="flex items-center space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="style" value="aggressive" class="h-4 w-4 text-blue-600" checked> | |
| <span class="ml-2 text-gray-700">Aggressive</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="style" value="balanced" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Balanced</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="style" value="safe" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Safe</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Track Conditions --> | |
| <div> | |
| <label class="block text-gray-700 mb-2 font-medium">Track Conditions</label> | |
| <div class="flex items-center space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="conditions" value="dry" class="h-4 w-4 text-blue-600" checked> | |
| <span class="ml-2 text-gray-700">Dry</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="conditions" value="mixed" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Mixed</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="conditions" value="wet" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Wet</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="generate-btn" class="mt-6 w-full md:w-auto px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition duration-200 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-cogs"></i> | |
| <span>Generate Setup</span> | |
| </button> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results-section" class="hidden"> | |
| <!-- Car-Track Header --> | |
| <div class="bg-gradient-to-r from-blue-800 to-blue-600 rounded-xl shadow-lg p-6 mb-6 text-white"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div> | |
| <h2 id="car-track-header" class="text-2xl font-bold mb-1"></h2> | |
| <p id="track-description" class="opacity-90"></p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex items-center space-x-2"> | |
| <span id="conditions-badge" class="px-3 py-1 rounded-full text-sm font-medium"></span> | |
| <span id="style-badge" class="px-3 py-1 rounded-full text-sm font-medium"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs Navigation --> | |
| <div class="flex overflow-x-auto mb-6 border-b border-gray-200"> | |
| <button class="tab-btn active px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="setup">Setup Guide</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-blue-500" data-tab="driving">Driving Tips</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-blue-500" data-tab="troubleshooting">Troubleshooting</button> | |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-blue-500" data-tab="physics">AMS2 Physics</button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="tab-content active" id="setup-tab"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Suspension Card --> | |
| <div class="setup-card bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-car-side text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Suspension</h3> | |
| </div> | |
| <div id="suspension-content" class="space-y-3 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Aero Card --> | |
| <div class="setup-card bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-wind text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Aerodynamics</h3> | |
| </div> | |
| <div id="aero-content" class="space-y-3 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Tires Card --> | |
| <div class="setup-card bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-tire text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Tires</h3> | |
| </div> | |
| <div id="tires-content" class="space-y-3 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Differential Card --> | |
| <div class="setup-card bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Differential</h3> | |
| </div> | |
| <div id="diff-content" class="space-y-3 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Alignment Card --> | |
| <div class="setup-card bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-ruler-combined text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Alignment</h3> | |
| </div> | |
| <div id="alignment-content" class="space-y-3 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| <!-- Brakes Card --> | |
| <div class="setup-card bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-stopwatch text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Brakes</h3> | |
| </div> | |
| <div id="brakes-content" class="space-y-3 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Driving Tips Tab --> | |
| <div class="tab-content" id="driving-tab"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-steering-wheel text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Driving Tips</h3> | |
| </div> | |
| <div id="driving-content" class="space-y-4 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Troubleshooting Tab --> | |
| <div class="tab-content" id="troubleshooting-tab"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-tools text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Troubleshooting</h3> | |
| </div> | |
| <div id="troubleshooting-content" class="space-y-4 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Physics Tab --> | |
| <div class="tab-content" id="physics-tab"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-atom text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">AMS2 Physics Insights</h3> | |
| </div> | |
| <div id="physics-content" class="space-y-4 text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Setup data for different cars and tracks | |
| const setupData = { | |
| cars: { | |
| mercedes: { | |
| name: "Mercedes-AMG GT3", | |
| quirks: "Tends to understeer on corner entry but has excellent traction. Sensitive to rear ride height changes.", | |
| strengths: "Strong acceleration and top speed, good high-speed stability", | |
| weaknesses: "Can be tricky to rotate in slow corners" | |
| }, | |
| porsche: { | |
| name: "Porsche 911 GT3 R", | |
| quirks: "Rear-engine layout requires careful throttle application. Benefits from slightly higher rear ride height.", | |
| strengths: "Excellent braking and cornering, responsive to setup changes", | |
| weaknesses: "Can be unstable under braking if setup isn't balanced" | |
| }, | |
| audi: { | |
| name: "Audi R8 LMS GT3", | |
| quirks: "Likes a bit more front wing than other cars. Sensitive to tire pressures.", | |
| strengths: "Balanced handling, good in all conditions", | |
| weaknesses: "Not the fastest in a straight line" | |
| }, | |
| bmw: { | |
| name: "BMW M6 GT3", | |
| quirks: "Needs careful differential tuning to manage weight transfer.", | |
| strengths: "Stable under braking, good mid-corner speed", | |
| weaknesses: "Heavy, can be sluggish in direction changes" | |
| }, | |
| mclaren: { | |
| name: "McLaren 720S GT3", | |
| quirks: "Very sensitive to aero balance. Works best with slightly lower rear ride height.", | |
| strengths: "Excellent cornering and traction", | |
| weaknesses: "Braking stability can be tricky" | |
| }, | |
| lamborghini: { | |
| name: "Lamborghini Huracán GT3", | |
| quirks: "Likes a stiff rear suspension setup. Sensitive to camber changes.", | |
| strengths: "Great mechanical grip, responsive steering", | |
| weaknesses: "Can be twitchy at high speeds" | |
| }, | |
| bentley: { | |
| name: "Bentley Continental GT3", | |
| quirks: "Needs softer suspension settings than other GT3 cars.", | |
| strengths: "Stable platform, good in high-speed corners", | |
| weaknesses: "Not as nimble as lighter cars" | |
| } | |
| }, | |
| tracks: { | |
| interlagos: { | |
| name: "Autódromo José Carlos Pace (Interlagos)", | |
| description: "Technical circuit with elevation changes and tricky corners. Sector 1 rewards good rotation, while Sector 2 needs stability.", | |
| keyFeatures: "Elevation changes, bumpy surface, important to get turn-in right for Senna S" | |
| }, | |
| spa: { | |
| name: "Circuit de Spa-Francorchamps", | |
| description: "High-speed circuit with long straights and challenging corners. Eau Rouge/Raidillon requires perfect setup balance.", | |
| keyFeatures: "Long straights, high-speed corners, elevation changes" | |
| }, | |
| nurburgring: { | |
| name: "Nürburgring GP Circuit", | |
| description: "Technical circuit with a mix of high and low-speed corners. Good traction essential out of slow corners.", | |
| keyFeatures: "Varied corner speeds, important to get Schumacher S right" | |
| }, | |
| monza: { | |
| name: "Autodromo Nazionale Monza", | |
| description: "Ultra-high speed circuit with heavy braking zones. Low drag essential but need enough downforce for Parabolica.", | |
| keyFeatures: "Long straights, heavy braking, important to get Ascari right" | |
| }, | |
| bathurst: { | |
| name: "Mount Panorama (Bathurst)", | |
| description: "Challenging circuit with dramatic elevation changes. The Mountain section requires precise setup.", | |
| keyFeatures: "Dramatic elevation, blind crests, technical sections" | |
| }, | |
| imola: { | |
| name: "Autodromo Enzo e Dino Ferrari (Imola)", | |
| description: "Flowing circuit with medium-speed corners. Need good rotation for Variante Alta but stability for Rivazza.", | |
| keyFeatures: "Elevation changes, flowing corners, tricky chicanes" | |
| }, | |
| catalunya: { | |
| name: "Circuit de Barcelona-Catalunya", | |
| description: "Technical circuit testing all aspects of car performance. Sector 3 especially setup-sensitive.", | |
| keyFeatures: "Varied corners, important to get final chicane right" | |
| }, | |
| silverstone: { | |
| name: "Silverstone Circuit", | |
| description: "High-speed circuit with flowing corners. Requires good aero balance through Maggotts-Becketts complex.", | |
| keyFeatures: "Fast corners, important to carry speed through complex sections" | |
| }, | |
| brands_hatch: { | |
| name: "Brands Hatch GP", | |
| description: "Technical circuit with elevation changes and blind corners. Requires precise setup for Paddock Hill Bend.", | |
| keyFeatures: "Elevation changes, blind corners, technical sections" | |
| }, | |
| donington: { | |
| name: "Donington Park GP", | |
| description: "Flowing circuit with fast corners. Requires good aero balance through Craner Curves.", | |
| keyFeatures: "Fast corners, elevation changes, important to get Craner Curves right" | |
| }, | |
| kyalami: { | |
| name: "Kyalami Grand Prix Circuit", | |
| description: "Technical circuit with elevation changes and tricky corners. Requires good rotation through the Esses.", | |
| keyFeatures: "Elevation changes, technical sections, important to get Esses right" | |
| }, | |
| laguna_seca: { | |
| name: "WeatherTech Raceway Laguna Seca", | |
| description: "Technical circuit with dramatic elevation changes. Requires precise setup for the Corkscrew.", | |
| keyFeatures: "Dramatic elevation changes, blind corners, technical sections" | |
| }, | |
| long_beach: { | |
| name: "Long Beach Street Circuit", | |
| description: "Street circuit with tight corners and concrete walls. Requires good mechanical grip and rotation.", | |
| keyFeatures: "Tight corners, concrete walls, important to get turn-in right" | |
| }, | |
| oulton_park: { | |
| name: "Oulton Park International", | |
| description: "Technical circuit with elevation changes and blind corners. Requires precise setup for Island Bend.", | |
| keyFeatures: "Elevation changes, blind corners, technical sections" | |
| }, | |
| snetterton: { | |
| name: "Snetterton 300 Circuit", | |
| description: "Technical circuit with a mix of high and low-speed corners. Requires good traction out of slow corners.", | |
| keyFeatures: "Varied corner speeds, important to get traction out of slow corners" | |
| }, | |
| suzuka: { | |
| name: "Suzuka International Racing Course", | |
| description: "Technical circuit with flowing corners. Requires good aero balance through the Esses.", | |
| keyFeatures: "Flowing corners, important to carry speed through complex sections" | |
| }, | |
| watkins_glen: { | |
| name: "Watkins Glen International", | |
| description: "Technical circuit with elevation changes and tricky corners. Requires good rotation through the Esses.", | |
| keyFeatures: "Elevation changes, technical sections, important to get Esses right" | |
| }, | |
| zandvoort: { | |
| name: "Circuit Zandvoort", | |
| description: "Technical circuit with banked corners and elevation changes. Requires good aero balance through Tarzanbocht.", | |
| keyFeatures: "Banked corners, elevation changes, important to get turn-in right" | |
| }, | |
| zolder: { | |
| name: "Circuit Zolder", | |
| description: "Technical circuit with elevation changes and tricky corners. Requires precise setup for the Chicane.", | |
| keyFeatures: "Elevation changes, technical sections, important to get Chicane right" | |
| } | |
| }, | |
| setups: { | |
| // Base setups for each car-track combination | |
| mercedes: { | |
| interlagos: { | |
| suspension: { | |
| front: "Medium stiffness (6-7), slightly softer than rear", | |
| rear: "Firm (8-9) to help rotation", | |
| arbFront: "Medium (5-6)", | |
| arbRear: "Medium (5-6)", | |
| rideHeight: "Front: 55-60mm, Rear: 60-65mm (slightly higher at rear)" | |
| }, | |
| aero: { | |
| front: "3-4 (higher for aggressive style)", | |
| rear: "5-6 (balance for good rotation in Sector 1)", | |
| brakeDucts: "Medium (5-6)" | |
| }, | |
| tires: { | |
| pressure: "Front: 27.5psi, Rear: 27.0psi (AMS2 runs best slightly lower than other sims)", | |
| camber: "Front: -3.2°, Rear: -2.8°", | |
| toe: "Front: 0.10° out, Rear: 0.20° in" | |
| }, | |
| diff: { | |
| preload: "80-90Nm", | |
| power: "50-60%", | |
| coast: "30-40%" | |
| }, | |
| alignment: { | |
| caster: "7.0-7.5°", | |
| antiDive: "50-60%" | |
| }, | |
| brakes: { | |
| bias: "57-59% front", | |
| pressure: "85-90%" | |
| } | |
| }, | |
| spa: { | |
| suspension: { | |
| front: "Medium stiffness (6-7)", | |
| rear: "Medium (6-7)", | |
| arbFront: "Medium (5-6)", | |
| arbRear: "Medium (5-6)", | |
| rideHeight: "Front: 50-55mm, Rear: 55-60mm" | |
| }, | |
| aero: { | |
| front: "4-5 (higher for stability through Eau Rouge)", | |
| rear: "6-7 (balance for high-speed stability)", | |
| brakeDucts: "Medium (5-6)" | |
| }, | |
| tires: { | |
| pressure: "Front: 27.5psi, Rear: 27.0psi", | |
| camber: "Front: -3.0°, Rear: -2.6°", | |
| toe: "Front: 0.10° out, Rear: 0.20° in" | |
| }, | |
| diff: { | |
| preload: "70-80Nm", | |
| power: "45-55%", | |
| coast: "25-35%" | |
| }, | |
| alignment: { | |
| caster: "7.0-7.5°", | |
| antiDive: "50-60%" | |
| }, | |
| brakes: { | |
| bias: "56-58% front", | |
| pressure: "85-90%" | |
| } | |
| }, | |
| // Other track setups would follow same pattern | |
| }, | |
| // Other car setups would follow same pattern | |
| }, | |
| drivingTips: { | |
| mercedes: { | |
| interlagos: [ | |
| "Turn 1 (Senna S): Brake at 100m board, trail brake to rotate car, short shift to 3rd before apex", | |
| "Turn 3 (Curva do Sol): Carry speed with slight lift, aim for late apex", | |
| "Turn 4 (Descida do Lago): Important to get right for good run up hill", | |
| "Turn 10 (Pinheirinho): Brake early, rotate with trail braking, crucial for good exit", | |
| "Final corner: Use all the curb on exit for best lap time" | |
| ], | |
| spa: [ | |
| "Eau Rouge/Raidillon: Flat out in qualifying, slight lift in race (depending on fuel)", | |
| "Les Combes: Brake at 150m board, down to 3rd gear", | |
| "Pouhon: Carry speed through this double apex corner", | |
| "Blanchimont: Flat out but need good aero balance", | |
| "Bus Stop Chicane: Important to get right for good lap time" | |
| ], | |
| nurburgring: [ | |
| "Turn 1 (Castrol-S): Brake at 100m board, down to 3rd gear", | |
| "Turn 2 (Ford-Kurve): Important to get right for good run down to Dunlop-Kehre", | |
| "Schumacher S: Need good rotation through this complex", | |
| "Turn 10 (Bit-Kurve): Important to get right for good lap time", | |
| "Final corner: Use all the curb on exit for best lap time" | |
| ] | |
| } | |
| }, | |
| troubleshooting: { | |
| mercedes: { | |
| understeer: "Increase rear ride height 2-3mm or soften front ARB 1 click", | |
| oversteer: "Increase front wing 1 click or soften rear ARB 1 click", | |
| brakingInstability: "Move brake bias rearward 1-2% or increase rear ride height", | |
| tractionIssues: "Increase diff preload 10Nm or soften rear suspension 1 click" | |
| } | |
| }, | |
| physicsTips: { | |
| general: [ | |
| "AMS2 tires work best at slightly lower pressures than other sims (26-28psi optimal)", | |
| "Rake effect is more pronounced - small ride height changes make big differences", | |
| "Tire temps rise quickly - manage them through driving style in first laps", | |
| "Differential settings have more impact than in other sims - tune carefully", | |
| "Suspension damping is crucial for curbs and bumps" | |
| ], | |
| mercedes: [ | |
| "Responds well to slightly higher rear ride height than other cars", | |
| "Front tires can overheat quickly if too much steering input", | |
| "Works best with slightly softer front suspension than rear" | |
| ] | |
| } | |
| }; | |
| // DOM Elements | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const resultsSection = document.getElementById('results-section'); | |
| const carSelect = document.getElementById('car-select'); | |
| const trackSelect = document.getElementById('track-select'); | |
| const tabButtons = document.querySelectorAll('.tab-btn'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| // Event Listeners | |
| generateBtn.addEventListener('click', generateSetup); | |
| tabButtons.forEach(btn => { | |
| btn.addEventListener('click', () => switchTab(btn.dataset.tab)); | |
| }); | |
| // Functions | |
| function generateSetup() { | |
| const car = carSelect.value; | |
| const track = trackSelect.value; | |
| const style = document.querySelector('input[name="style"]:checked').value; | |
| const conditions = document.querySelector('input[name="conditions"]:checked').value; | |
| // Update header | |
| document.getElementById('car-track-header').textContent = | |
| `${setupData.cars[car].name} at ${setupData.tracks[track].name}`; | |
| document.getElementById('track-description').textContent = | |
| setupData.tracks[track].description; | |
| // Update badges | |
| const styleBadge = document.getElementById('style-badge'); | |
| styleBadge.textContent = style.charAt(0).toUpperCase() + style.slice(1); | |
| styleBadge.className = `px-3 py-1 rounded-full text-sm font-medium ${ | |
| style === 'aggressive' ? 'bg-red-100 text-red-800' : | |
| style === 'balanced' ? 'bg-yellow-100 text-yellow-800' : | |
| 'bg-green-100 text-green-800' | |
| }`; | |
| const conditionsBadge = document.getElementById('conditions-badge'); | |
| conditionsBadge.textContent = conditions.charAt(0).toUpperCase() + conditions.slice(1); | |
| conditionsBadge.className = `px-3 py-1 rounded-full text-sm font-medium ${ | |
| conditions === 'dry' ? 'bg-blue-100 text-blue-800' : | |
| conditions === 'mixed' ? 'bg-purple-100 text-purple-800' : | |
| 'bg-gray-100 text-gray-800' | |
| }`; | |
| // Generate setup content (simplified for example) | |
| // In a full implementation, this would pull from the setupData object | |
| document.getElementById('suspension-content').innerHTML = ` | |
| <p><strong>Springs:</strong> Front 6-7, Rear 8-9 (adjust ±1 for style)</p> | |
| <p><strong>ARB:</strong> Front 5, Rear 5 (stiffer for aggressive)</p> | |
| <p><strong>Ride Height:</strong> Front 55mm, Rear 60mm</p> | |
| <p><strong>Damping:</strong> Medium-fast bump, medium rebound</p> | |
| `; | |
| document.getElementById('aero-content').innerHTML = ` | |
| <p><strong>Front Wing:</strong> 3-4 (higher for more rotation)</p> | |
| <p><strong>Rear Wing:</strong> 5-6 (balance for sector 1)</p> | |
| <p><strong>Brake Ducts:</strong> 5-6 (higher if braking instability)</p> | |
| `; | |
| document.getElementById('tires-content').innerHTML = ` | |
| <p><strong>Pressures:</strong> Front 27.5psi, Rear 27.0psi</p> | |
| <p><strong>Camber:</strong> Front -3.2°, Rear -2.8°</p> | |
| <p><strong>Toe:</strong> Front 0.10° out, Rear 0.20° in</p> | |
| `; | |
| document.getElementById('diff-content').innerHTML = ` | |
| <p><strong>Preload:</strong> 80-90Nm</p> | |
| <p><strong>Power:</strong> 50-60%</p> | |
| <p><strong>Coast:</strong> 30-40%</p> | |
| `; | |
| document.getElementById('alignment-content').innerHTML = ` | |
| <p><strong>Caster:</strong> 7.0-7.5°</p> | |
| <p><strong>Anti-Dive/Squat:</strong> 50-60%</p> | |
| `; | |
| document.getElementById('brakes-content').innerHTML = ` | |
| <p><strong>Bias:</strong> 57-59% front</p> | |
| <p><strong>Pressure:</strong> 85-90%</p> | |
| `; | |
| document.getElementById('driving-content').innerHTML = ` | |
| <h4 class="font-semibold text-lg mb-2">Key Corners:</h4> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li><strong>Turn 1 (Senna S):</strong> Brake at 100m board, trail brake to rotate car</li> | |
| <li><strong>Turn 3 (Curva do Sol):</strong> Carry speed with slight lift</li> | |
| <li><strong>Turn 10 (Pinheirinho):</strong> Brake early, rotate with trail braking</li> | |
| </ul> | |
| <h4 class="font-semibold text-lg mt-4 mb-2">Gear Recommendations:</h4> | |
| <p>Use 3rd gear for most slow corners, short shift to manage traction</p> | |
| `; | |
| document.getElementById('troubleshooting-content').innerHTML = ` | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-semibold">Mid-corner understeer:</h4> | |
| <p>Increase rear ride height 2-3mm or soften front ARB 1 click</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Braking instability:</h4> | |
| <p>Move brake bias rearward 1-2% or increase rear ride height</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Poor traction on exit:</h4> | |
| <p>Increase diff preload 10Nm or soften rear suspension 1 click</p> | |
| </div> | |
| </div> | |
| `; | |
| document.getElementById('physics-content').innerHTML = ` | |
| <div class="space-y-4"> | |
| <div> | |
| <h4 class="font-semibold">AMS2-Specific Tips:</h4> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Tire pressures optimal at 26-28psi (lower than other sims)</li> | |
| <li>Rake effect is more pronounced - small changes make big differences</li> | |
| <li>Differential settings have more impact than in other sims</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Car-Specific Insights:</h4> | |
| <ul class="list-disc pl-5 space-y-2"> | |
| <li>Responds well to slightly higher rear ride height</li> | |
| <li>Front tires can overheat quickly with too much steering input</li> | |
| <li>Works best with slightly softer front suspension than rear</li> | |
| </ul> | |
| </div> | |
| </div> | |
| `; | |
| // Show results | |
| resultsSection.classList.remove('hidden'); | |
| } | |
| function switchTab(tabName) { | |
| // Update active tab button | |
| tabButtons.forEach(btn => { | |
| if (btn.dataset.tab === tabName) { | |
| btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600'); | |
| btn.classList.remove('text-gray-500'); | |
| } else { | |
| btn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600'); | |
| btn.classList.add('text-gray-500'); | |
| } | |
| }); | |
| // Update active tab content | |
| tabContents.forEach(content => { | |
| if (content.id === `${tabName}-tab`) { | |
| content.classList.add('active'); | |
| } else { | |
| content.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| </script> | |
| <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=DMS9015/ams2-setup-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |