| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Precision Park - 3D Vehicle Parking Simulator</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary: #2c3e50; |
| --secondary: #3498db; |
| --accent: #e74c3c; |
| --light: #ecf0f1; |
| --dark: #1a252f; |
| --success: #2ecc71; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| |
| body { |
| background-color: var(--primary); |
| color: var(--light); |
| overflow-x: hidden; |
| } |
| |
| header { |
| background: linear-gradient(135deg, var(--primary), var(--dark)); |
| padding: 1.5rem; |
| text-align: center; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
| position: relative; |
| z-index: 10; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 1rem; |
| } |
| |
| .logo i { |
| font-size: 2.5rem; |
| color: var(--secondary); |
| } |
| |
| .logo h1 { |
| font-size: 2.2rem; |
| font-weight: 700; |
| background: linear-gradient(to right, var(--secondary), var(--light)); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .tagline { |
| font-size: 1.1rem; |
| margin-top: 0.5rem; |
| opacity: 0.9; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 2rem auto; |
| padding: 0 1.5rem; |
| } |
| |
| .game-preview { |
| position: relative; |
| height: 500px; |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80'); |
| background-size: cover; |
| background-position: center; |
| border-radius: 12px; |
| overflow: hidden; |
| box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); |
| margin-bottom: 3rem; |
| display: flex; |
| flex-direction: column; |
| justify-content: flex-end; |
| } |
| |
| .preview-content { |
| padding: 2rem; |
| background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); |
| } |
| |
| .preview-buttons { |
| display: flex; |
| gap: 1rem; |
| margin-top: 1.5rem; |
| } |
| |
| .btn { |
| padding: 0.8rem 1.5rem; |
| border-radius: 50px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .btn-primary { |
| background-color: var(--secondary); |
| color: white; |
| } |
| |
| .btn-secondary { |
| background-color: transparent; |
| color: var(--light); |
| border: 2px solid var(--light); |
| } |
| |
| .btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
| } |
| |
| .btn-primary:hover { |
| background-color: #2980b9; |
| } |
| |
| .btn-secondary:hover { |
| background-color: rgba(255, 255, 255, 0.1); |
| } |
| |
| section { |
| margin-bottom: 3rem; |
| } |
| |
| h2 { |
| font-size: 2rem; |
| margin-bottom: 1.5rem; |
| position: relative; |
| display: inline-block; |
| } |
| |
| h2::after { |
| content: ''; |
| position: absolute; |
| bottom: -8px; |
| left: 0; |
| width: 60px; |
| height: 4px; |
| background-color: var(--secondary); |
| border-radius: 2px; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .feature-card { |
| background-color: rgba(255, 255, 255, 0.05); |
| border-radius: 10px; |
| padding: 1.5rem; |
| transition: all 0.3s ease; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .feature-card:hover { |
| transform: translateY(-5px); |
| background-color: rgba(255, 255, 255, 0.1); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
| } |
| |
| .feature-icon { |
| font-size: 2rem; |
| margin-bottom: 1rem; |
| color: var(--secondary); |
| } |
| |
| .feature-card h3 { |
| margin-bottom: 0.8rem; |
| font-size: 1.3rem; |
| } |
| |
| .feature-card p { |
| opacity: 0.8; |
| line-height: 1.6; |
| } |
| |
| .vehicle-showcase { |
| display: flex; |
| overflow-x: auto; |
| gap: 1.5rem; |
| padding-bottom: 1rem; |
| scroll-snap-type: x mandatory; |
| } |
| |
| .vehicle-showcase::-webkit-scrollbar { |
| height: 8px; |
| } |
| |
| .vehicle-showcase::-webkit-scrollbar-track { |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 10px; |
| } |
| |
| .vehicle-showcase::-webkit-scrollbar-thumb { |
| background: var(--secondary); |
| border-radius: 10px; |
| } |
| |
| .vehicle-card { |
| min-width: 250px; |
| scroll-snap-align: start; |
| background-color: rgba(255, 255, 255, 0.05); |
| border-radius: 10px; |
| overflow: hidden; |
| transition: all 0.3s ease; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .vehicle-card:hover { |
| transform: scale(1.03); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
| } |
| |
| .vehicle-image { |
| height: 150px; |
| background-color: var(--dark); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 3rem; |
| color: rgba(255, 255, 255, 0.2); |
| } |
| |
| .vehicle-info { |
| padding: 1.2rem; |
| } |
| |
| .vehicle-info h3 { |
| margin-bottom: 0.5rem; |
| } |
| |
| .vehicle-type { |
| display: inline-block; |
| padding: 0.3rem 0.8rem; |
| background-color: var(--secondary); |
| border-radius: 50px; |
| font-size: 0.8rem; |
| margin-bottom: 0.8rem; |
| } |
| |
| .difficulty-meter { |
| display: flex; |
| gap: 0.3rem; |
| margin-top: 0.8rem; |
| } |
| |
| .meter-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background-color: rgba(255, 255, 255, 0.2); |
| } |
| |
| .meter-dot.active { |
| background-color: var(--accent); |
| } |
| |
| .environment-gallery { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .environment-card { |
| position: relative; |
| height: 200px; |
| border-radius: 10px; |
| overflow: hidden; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
| } |
| |
| .environment-image { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| transition: transform 0.5s ease; |
| } |
| |
| .environment-overlay { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); |
| padding: 1rem; |
| transform: translateY(100%); |
| transition: transform 0.3s ease; |
| } |
| |
| .environment-card:hover .environment-overlay { |
| transform: translateY(0); |
| } |
| |
| .environment-card:hover .environment-image { |
| transform: scale(1.1); |
| } |
| |
| .tech-specs { |
| background-color: rgba(0, 0, 0, 0.3); |
| border-radius: 10px; |
| padding: 2rem; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .spec-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 1.5rem; |
| margin-top: 1.5rem; |
| } |
| |
| .spec-item { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .spec-icon { |
| font-size: 1.5rem; |
| color: var(--secondary); |
| } |
| |
| .spec-info h4 { |
| margin-bottom: 0.3rem; |
| } |
| |
| .spec-info p { |
| opacity: 0.8; |
| font-size: 0.9rem; |
| } |
| |
| footer { |
| background-color: var(--dark); |
| padding: 3rem 1.5rem; |
| text-align: center; |
| margin-top: 3rem; |
| } |
| |
| .footer-content { |
| max-width: 800px; |
| margin: 0 auto; |
| } |
| |
| .social-links { |
| display: flex; |
| justify-content: center; |
| gap: 1.5rem; |
| margin: 1.5rem 0; |
| } |
| |
| .social-link { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background-color: rgba(255, 255, 255, 0.1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.3s ease; |
| } |
| |
| .social-link:hover { |
| background-color: var(--secondary); |
| transform: translateY(-3px); |
| } |
| |
| .copyright { |
| opacity: 0.7; |
| font-size: 0.9rem; |
| margin-top: 1.5rem; |
| } |
| |
| @media (max-width: 768px) { |
| .game-preview { |
| height: 400px; |
| } |
| |
| .preview-buttons { |
| flex-direction: column; |
| } |
| |
| .btn { |
| width: 100%; |
| justify-content: center; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <div class="logo"> |
| <i class="fas fa-car"></i> |
| <h1>Precision Park</h1> |
| </div> |
| <p class="tagline">The ultimate 3D vehicle parking simulation experience</p> |
| </header> |
| |
| <div class="container"> |
| <div class="game-preview"> |
| <div class="preview-content"> |
| <h2>Master the Art of Parking</h2> |
| <p>Experience the most realistic parking simulator with advanced physics, multiple camera angles, and challenging scenarios that will test your precision driving skills.</p> |
| <div class="preview-buttons"> |
| <button class="btn btn-primary"><i class="fas fa-play"></i> Watch Trailer</button> |
| <button class="btn btn-secondary"><i class="fas fa-download"></i> Download Demo</button> |
| </div> |
| </div> |
| </div> |
| |
| <section> |
| <h2>Gameplay Features</h2> |
| <div class="features-grid"> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-car-side"></i> |
| </div> |
| <h3>Realistic Physics</h3> |
| <p>Advanced physics engine that accurately simulates vehicle weight, suspension, and traction for an authentic driving experience.</p> |
| </div> |
| |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-camera"></i> |
| </div> |
| <h3>Multiple Camera Angles</h3> |
| <p>Switch between top-down, third-person, and first-person views to find the perfect perspective for each parking challenge.</p> |
| </div> |
| |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-sliders-h"></i> |
| </div> |
| <h3>Precision Controls</h3> |
| <p>Fine-tuned steering, acceleration, and braking controls that respond to subtle inputs for perfect parking maneuvers.</p> |
| </div> |
| |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-car-crash"></i> |
| </div> |
| <h3>Damage System</h3> |
| <p>Realistic vehicle damage that affects performance and appearance, encouraging careful driving.</p> |
| </div> |
| |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-cloud-sun-rain"></i> |
| </div> |
| <h3>Dynamic Weather</h3> |
| <p>Changing weather conditions that affect driving physics, from sunny days to rainy nights with slippery roads.</p> |
| </div> |
| |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <i class="fas fa-trophy"></i> |
| </div> |
| <h3>Progression System</h3> |
| <p>Unlock new vehicles, locations, and challenges as you improve your parking skills and complete objectives.</p> |
| </div> |
| </div> |
| </section> |
| |
| <section> |
| <h2>Vehicle Fleet</h2> |
| <div class="vehicle-showcase"> |
| <div class="vehicle-card"> |
| <div class="vehicle-image"> |
| <i class="fas fa-car"></i> |
| </div> |
| <div class="vehicle-info"> |
| <span class="vehicle-type">Compact</span> |
| <h3>Urban Zipp</h3> |
| <p>Perfect for tight city parking spots with excellent maneuverability.</p> |
| <div class="difficulty-meter"> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot"></div> |
| <div class="meter-dot"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="vehicle-card"> |
| <div class="vehicle-image"> |
| <i class="fas fa-truck-pickup"></i> |
| </div> |
| <div class="vehicle-info"> |
| <span class="vehicle-type">Truck</span> |
| <h3>Mountain Hauler</h3> |
| <p>Challenge yourself with this large vehicle's turning radius.</p> |
| <div class="difficulty-meter"> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot active"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="vehicle-card"> |
| <div class="vehicle-image"> |
| <i class="fas fa-truck"></i> |
| </div> |
| <div class="vehicle-info"> |
| <span class="vehicle-type">SUV</span> |
| <h3>Trail Explorer</h3> |
| <p>Higher vantage point but requires more space to maneuver.</p> |
| <div class="difficulty-meter"> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="vehicle-card"> |
| <div class="vehicle-image"> |
| <i class="fas fa-car-side"></i> |
| </div> |
| <div class="vehicle-info"> |
| <span class="vehicle-type">Luxury</span> |
| <h3>Elite Cruiser</h3> |
| <p>Premium handling with extra length that demands precision.</p> |
| <div class="difficulty-meter"> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="vehicle-card"> |
| <div class="vehicle-image"> |
| <i class="fas fa-bus"></i> |
| </div> |
| <div class="vehicle-info"> |
| <span class="vehicle-type">Special</span> |
| <h3>City Bus</h3> |
| <p>The ultimate parking challenge for true masters.</p> |
| <div class="difficulty-meter"> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot active"></div> |
| <div class="meter-dot active"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section> |
| <h2>Parking Environments</h2> |
| <div class="environment-gallery"> |
| <div class="environment-card"> |
| <img src="https://images.unsplash.com/photo-1605559421013-0be1c4df6bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Multi-story Parking" class="environment-image"> |
| <div class="environment-overlay"> |
| <h3>Multi-story Parking</h3> |
| <p>Tight spiral ramps and compact spaces challenge your spatial awareness.</p> |
| </div> |
| </div> |
| |
| <div class="environment-card"> |
| <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Shopping Mall" class="environment-image"> |
| <div class="environment-overlay"> |
| <h3>Shopping Mall</h3> |
| <p>Busy parking lots with distracted pedestrians and limited visibility.</p> |
| </div> |
| </div> |
| |
| <div class="environment-card"> |
| <img src="https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1169&q=80" alt="Airport Terminal" class="environment-image"> |
| <div class="environment-overlay"> |
| <h3>Airport Terminal</h3> |
| <p>Long vehicle lanes and strict time limits for passenger drop-offs.</p> |
| </div> |
| </div> |
| |
| <div class="environment-card"> |
| <img src="https://images.unsplash.com/photo-1631719979850-d8c8d338c0b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Street Parking" class="environment-image"> |
| <div class="environment-overlay"> |
| <h3>Street Parking</h3> |
| <p>Parallel parking challenges with busy traffic flowing behind you.</p> |
| </div> |
| </div> |
| |
| <div class="environment-card"> |
| <img src="https://images.unsplash.com/photo-1605559421013-0be1c4df6bc4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Underground Garage" class="environment-image"> |
| <div class="environment-overlay"> |
| <h3>Underground Garage</h3> |
| <p>Low ceilings and support columns create challenging blind spots.</p> |
| </div> |
| </div> |
| |
| <div class="environment-card"> |
| <img src="https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Residential Area" class="environment-image"> |
| <div class="environment-overlay"> |
| <h3>Residential Area</h3> |
| <p>Park between expensive cars with no margin for error.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section> |
| <h2>Technical Specifications</h2> |
| <div class="tech-specs"> |
| <p>Precision Park is designed to deliver smooth performance across all platforms while maintaining high-quality visuals and realistic physics.</p> |
| |
| <div class="spec-grid"> |
| <div class="spec-item"> |
| <div class="spec-icon"> |
| <i class="fas fa-desktop"></i> |
| </div> |
| <div class="spec-info"> |
| <h4>Platforms</h4> |
| <p>PC (Windows/Mac), PlayStation, Xbox, Mobile (iOS/Android)</p> |
| </div> |
| </div> |
| |
| <div class="spec-item"> |
| <div class="spec-icon"> |
| <i class="fas fa-microchip"></i> |
| </div> |
| <div class="spec-info"> |
| <h4>Engine</h4> |
| <p>Custom-built 3D engine with PhysX physics integration</p> |
| </div> |
| </div> |
| |
| <div class="spec-item"> |
| <div class="spec-icon"> |
| <i class="fas fa-tachometer-alt"></i> |
| </div> |
| <div class="spec-info"> |
| <h4>Performance</h4> |
| <p>60 FPS target on all platforms with dynamic resolution scaling</p> |
| </div> |
| </div> |
| |
| <div class="spec-item"> |
| <div class="spec-icon"> |
| <i class="fas fa-users"></i> |
| </div> |
| <div class="spec-info"> |
| <h4>Multiplayer</h4> |
| <p>Up to 8 players in cooperative and competitive modes</p> |
| </div> |
| </div> |
| |
| <div class="spec-item"> |
| <div class="spec-icon"> |
| <i class="fas fa-cloud"></i> |
| </div> |
| <div class="spec-info"> |
| <h4>Cloud Saves</h4> |
| <p>Cross-platform progression with cloud save synchronization</p> |
| </div> |
| </div> |
| |
| <div class="spec-item"> |
| <div class="spec-icon"> |
| <i class="fas fa-gamepad"></i> |
| </div> |
| <div class="spec-info"> |
| <h4>Controller Support</h4> |
| <p>Full support for gamepads, wheels, and custom input devices</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| |
| <footer> |
| <div class="footer-content"> |
| <div class="logo"> |
| <i class="fas fa-car"></i> |
| <h1>Precision Park</h1> |
| </div> |
| <p>The most realistic parking simulation experience across all platforms.</p> |
| |
| <div class="social-links"> |
| <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="social-link"><i class="fab fa-youtube"></i></a> |
| <a href="#" class="social-link"><i class="fab fa-discord"></i></a> |
| </div> |
| |
| <div class="preview-buttons"> |
| <button class="btn btn-primary"><i class="fas fa-shopping-cart"></i> Pre-order Now</button> |
| </div> |
| |
| <p class="copyright">© 2023 Precision Park Simulation Studios. All rights reserved.</p> |
| </div> |
| </footer> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const featureCards = document.querySelectorAll('.feature-card'); |
| featureCards.forEach(card => { |
| card.addEventListener('mouseenter', function() { |
| const icon = this.querySelector('.feature-icon i'); |
| icon.style.transform = 'scale(1.2)'; |
| icon.style.transition = 'transform 0.3s ease'; |
| }); |
| |
| card.addEventListener('mouseleave', function() { |
| const icon = this.querySelector('.feature-icon i'); |
| icon.style.transform = 'scale(1)'; |
| }); |
| }); |
| |
| |
| const buttons = document.querySelectorAll('.btn'); |
| buttons.forEach(button => { |
| button.addEventListener('click', function() { |
| this.style.transform = 'scale(0.95)'; |
| setTimeout(() => { |
| this.style.transform = 'scale(1)'; |
| }, 200); |
| |
| |
| alert('This would navigate to the selected feature in a full implementation.'); |
| }); |
| }); |
| |
| |
| const vehicleCards = document.querySelectorAll('.vehicle-card'); |
| vehicleCards.forEach(card => { |
| card.addEventListener('click', function() { |
| vehicleCards.forEach(c => c.style.border = '1px solid rgba(255, 255, 255, 0.1)'); |
| this.style.border = `2px solid ${getComputedStyle(document.documentElement).getPropertyValue('--secondary')}`; |
| }); |
| }); |
| }); |
| </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
| </html> |
