<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Badr Diesel 5 Perfumes - 3D Luxury Scents</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
color: #333;
}
header {
background: #000;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
margin-top: 10px;
}
nav a {
color: #fff;
margin: 0 15px;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
#scene-container {
width: 100%;
height: 500px;
border: 2px solid #ccc;
margin: 20px 0;
}
.products {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.product {
width: 30%;
margin: 10px;
text-align: center;
}
.product img {
width: 100%;
max-width: 200px;
}
footer {
background: #000;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
@media (max-width: 768px) {
.products {
flex-direction: column;
}
.product {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<h1>Badr Diesel 5 Perfumes</h1>
<p>Luxury scents inspired by power and elegance.</p>
<nav>
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<div class="container">
<section id="home">
<h2>Welcome to Badr Diesel 5</h2>
<p>Experience the thrill of our premium perfumes in stunning 3D.
Interact with the bottle below!</p>
<div id="scene-container"></div>
</section>
<section id="products">
<h2>Our Perfumes</h2>
<div class="products">
<div class="product">
<img src="[Link]
alt="Perfume 1">
<h3>Diesel Essence</h3>
<p>$50</p>
</div>
<div class="product">
<img src="[Link]
alt="Perfume 2">
<h3>Badr Noir</h3>
<p>$60</p>
</div>
<div class="product">
<img src="[Link]
alt="Perfume 3">
<h3>5 Senses</h3>
<p>$70</p>
</div>
</div>
</section>
<section id="about">
<h2>About Us</h2>
<p>Badr Diesel 5 Perfumes blends the raw power of diesel engines with
sophisticated fragrances, creating scents that evoke adventure and luxury.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: info@[Link] | Phone: (123) 456-7890</p>
</section>
</div>
<footer>
<p>© 2023 Badr Diesel 5 Perfumes. All rights reserved.</p>
</footer>
<!-- [Link] and GLTF Loader -->
<script
src="[Link]
<script src="[Link]
[Link]"></script>
<script>
// Set up the scene
const scene = new [Link]();
const camera = new [Link](75, [Link] / 500,
0.1, 1000);
const renderer = new [Link]({ antialias: true });
[Link]([Link], 500);
[Link]('scene-
container').appendChild([Link]);
// Lighting
const ambientLight = new [Link](0xffffff, 0.5);
[Link](ambientLight);
const directionalLight = new [Link](0xffffff, 0.8);
[Link](1, 1, 1);
[Link](directionalLight);
// Load a simple GLTF model (perfume bottle - base64 encoded for demo)
const loader = new [Link]();
const gltfData = 'data:application/octet-stream;base64, ...'; //
Placeholder; replace with actual GLTF base64 or URL
[Link](
'[Link] /
/ Example model; replace with perfume bottle GLTF
function (gltf) {
const model = [Link];
[Link](0.5, 0.5, 0.5);
[Link](model);
},
undefined,
function (error) {
[Link]('An error happened', error);
}
);
[Link].z = 5;
// Mouse controls for rotation
let mouseX = 0, mouseY = 0;
[Link]('mousemove', (event) => {
mouseX = ([Link] / [Link]) * 2 - 1;
mouseY = -([Link] / [Link]) * 2 + 1;
});
// Animation loop
function animate() {
requestAnimationFrame(animate);
if ([Link] > 2) { // Assuming model is loaded
[Link][2].rotation.y += 0.01; // Auto-rotate
[Link][2].rotation.x = mouseY * 0.5;
[Link][2].rotation.y += mouseX * 0.5;
}
[Link](scene, camera);
}
animate();
// Handle window resize
[Link]('resize', () => {
[Link] = [Link] / 500;
[Link]();
[Link]([Link], 500);
});
</script>
</body>
</html>