|
<!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> |
