BASIC CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Republic Day: Mission Moon Ultimate Defense</title>
<style>
/* --- 1. CORE ATMOSPHERE --- */
body {
margin: 0;
overflow: hidden;
background: radial-gradient(circle at center bottom, #1a253a 0%, #000000 100%);
font-family: 'Segoe UI', sans-serif;
color: white;
}
canvas {
display: block;
position: absolute;
top: 0; left: 0;
}
#bgCanvas { z-index: 0; }
#smokeCanvas { z-index: 5; pointer-events: none; }
/* --- 2. THE EARTH --- */
.earth-container {
position: absolute;
top: 20%;
right: 30%;
width: 120px;
height: 120px;
z-index: 1;
animation: floatEarth 8s ease-in-out infinite alternate;
}
.earth {
width: 100%;
height: 100%;
border-radius: 50%;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Earth_Western_Hemisphere_transparent_background.png/1200px-Earth_Western_Hemisphere_transparent_background.png');
background-size: cover;
animation: rotateEarth 120s linear infinite;
}
/* --- 3. MOON SURFACE --- */
.moon-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30vh;
z-index: 2;
background: linear-gradient(to top, #050505, #1a1a1a 80%, transparent 100%);
}
/* --- 4. TEXT OVERLAY --- */
.text-overlay {
position: absolute;
top: 8%;
width: 100%;
text-align: center;
z-index: 20;
pointer-events: none;
}
h1 {
font-size: 60px;
margin: 0;
text-transform: uppercase;
letter-spacing: 5px;
background: linear-gradient(to right, #FF9933, #fff, #138808);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 30px rgba(255,255,255,0.2);
animation: zoomIn 2s ease-out;
}
h2 {
font-size: 1.2rem;
color: #88ccff;
letter-spacing: 8px;
font-weight: 300;
margin-top: 5px;
}
/* --- 5. FLAG & SOLDIER --- */
.scene-wrapper {
position: absolute;
bottom: 18vh;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
align-items: flex-end;
gap: 60px;
}
.flag-group {
position: relative;
width: 200px;
height: 300px;
}
.pole {
width: 6px;
height: 100%;
background: linear-gradient(90deg, #444, #aaa, #222);
position: absolute;
left: 0; bottom: 0;
border-radius: 4px;
}
.flag-cloth {
position: absolute;
top: 15px; left: 6px;
display: flex;
height: 120px;
}
.flag-slice {
width: 5px;
height: 100%;
background-image: linear-gradient(to bottom, #FF9933 33.3%, #FFFFFF 33.3%, #FFFFFF 66.6%, #138808 66.6%);
background-size: 100% 100%;
}
.chakra-overlay {
position: absolute;
top: 55px; left: 75px;
width: 35px; height: 35px;
border: 1.5px solid #000080;
border-radius: 50%;
z-index: 50;
}
.chakra-spoke {
position: absolute;
top: 50%; left: 50%;
width: 50%; height: 1px;
background: #000080;
transform-origin: 0 0;
}
.soldier {
width: 60px; height: 110px;
background: #080808;
clip-path: polygon(30% 0, 50% 0, 60% 10%, 60% 20%, 85% 25%, 100% 15%, 90% 30%, 70% 35%, 70% 100%, 20% 100%, 25% 40%, 10% 30%);
position: absolute; bottom: 0; left: -90px;
}
/* --- 6. VEHICLES --- */
.helicopter {
position: absolute;
top: 30%; left: -200px;
width: 120px; height: 50px;
z-index: 5;
animation: flyBy 18s linear infinite;
}
.heli-body {
width: 100%; height: 100%;
background: #0a0a0a;
clip-path: polygon(0 40%, 20% 40%, 30% 10%, 60% 10%, 70% 40%, 100% 50%, 30% 70%, 0 55%);
}
.heli-rotor {
position: absolute;
top: 0; left: 20%;
width: 100px; height: 3px;
background: rgba(150,150,150,0.5);
animation: rotorSpin 0.1s linear infinite;
}
/* --- ANIMATIONS --- */
@keyframes rotateEarth { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes floatEarth { from { transform: translateY(0); } to { transform: translateY(-15px); } }
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rotorSpin { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.1); } 100% { transform: scaleX(1); } }
@keyframes flyBy { 0% { left: -200px; } 100% { left: 110%; } }
</style>
</head>
<body>
<canvas id="bgCanvas"></canvas>
<canvas id="smokeCanvas"></canvas>
<div class="earth-container"><div class="earth"></div></div>
<div class="text-overlay">
<h1>Happy Republic Day</h1>
<h2>DEFENCE • SCIENCE • GLORY</h2>
</div>
<div class="helicopter">
<div class="heli-rotor"></div>
<div class="heli-body"></div>
</div>
<div class="tank-container">
<div class="tank-body"></div>
</div>
<div class="scene-wrapper">
<div class="soldier"></div>
<div class="flag-group">
<div class="pole"></div>
<div class="flag-cloth" id="flagCloth"></div>
<div class="chakra-overlay" id="chakra"></div>
</div>
<div class="lander"></div>
</div>
<div class="moon-container">
<canvas id="moonCanvas"></canvas>
</div>
<script>
const bgCanvas = document.getElementById('bgCanvas');
const bgCtx = bgCanvas.getContext('2d');
const smokeCanvas = document.getElementById('smokeCanvas');
const smokeCtx = smokeCanvas.getContext('2d');
const moonCanvas = document.getElementById('moonCanvas');
const moonCtx = moonCanvas.getContext('2d');
let width, height;
function resize() {
width = window.innerWidth;
height = window.innerHeight;
bgCanvas.width = width; bgCanvas.height = height;
smokeCanvas.width = width; smokeCanvas.height = height;
moonCanvas.width = width; moonCanvas.height = height * 0.3;
drawMoonSurface();
}
window.addEventListener('resize', resize);
function drawMoonSurface() {
const w = moonCanvas.width;
const h = moonCanvas.height;
moonCtx.clearRect(0,0,w,h);
const grad = moonCtx.createLinearGradient(0, 0, 0, h);
grad.addColorStop(0, '#111');
grad.addColorStop(1, '#000');
moonCtx.fillStyle = grad;
moonCtx.beginPath();
moonCtx.moveTo(0, h);
moonCtx.lineTo(0, h*0.2);
moonCtx.quadraticCurveTo(w/2, -20, w, h*0.2);
moonCtx.lineTo(w, h);
moonCtx.fill();
}
/* FLAG LOGIC */
const flagCloth = document.getElementById('flagCloth');
const chakra = document.getElementById('chakra');
for(let i=0; i<24; i++) {
const s = document.createElement('div');
s.className = 'chakra-spoke';
s.style.transform = `rotate(${i*15}deg)`;
chakra.appendChild(s);
}
const slices = [];
const sliceCount = 30;
for(let i=0; i<sliceCount; i++){
const d = document.createElement('div');
d.className = 'flag-slice';
d.style.width = '6px';
flagCloth.appendChild(d);
slices.push(d);
}
/* JETS & SMOKE (FIXED) */
let jets = [];
let particles = [];
class Jet {
constructor(){
this.x = -50;
this.y = 50 + Math.random() * (height * 0.3);
this.speed = 12;
this.colors = ['#FF9933', '#FFFFFF', '#138808'];
}
update(){
this.x += this.speed;
if(this.x < width + 100){
this.colors.forEach((c, i) => {
particles.push(new Smoke(this.x - 10, this.y + (i*8), c));
});
}
}
draw() {
bgCtx.fillStyle = '#aaa';
bgCtx.beginPath();
bgCtx.moveTo(this.x, this.y + 8);
bgCtx.lineTo(this.x - 30, this.y + 15);
bgCtx.lineTo(this.x - 25, this.y + 8);
bgCtx.lineTo(this.x - 30, this.y + 1);
bgCtx.fill();
}
}
class Smoke {
constructor(x, y, color){
this.x = x; this.y = y;
this.color = color;
this.size = 2; // FIXED: Small size
this.alpha = 0.8;
}
update(){
this.x -= 0.5;
this.size += 0.02; // FIXED: Very slow expansion
this.alpha -= 0.012; // Fades away
}
draw(){
smokeCtx.globalAlpha = this.alpha;
smokeCtx.fillStyle = this.color;
smokeCtx.beginPath();
smokeCtx.arc(this.x, this.y, this.size, 0, Math.PI*2);
smokeCtx.fill();
}
}
/* FIREWORKS */
let fireworks = [];
class Firework {
constructor(){
this.x = Math.random() * width;
this.y = height;
this.vy = -(Math.random()*4 + 7);
this.color = Math.random() > 0.6 ? '#FF9933' : (Math.random() > 0.3 ? '#FFF' : '#138808');
this.exploded = false;
this.particles = [];
}
update(){
if(!this.exploded){
this.y += this.vy;
this.vy *= 0.99;
if(this.vy > -0.5) this.explode();
} else {
this.particles.forEach((p, i) => {
p.x += p.vx; p.y += p.vy; p.vy += 0.05; p.alpha -= 0.015;
if(p.alpha <= 0) this.particles.splice(i, 1);
});
}
}
explode(){
this.exploded = true;
for(let i=0; i<30; i++){
const ang = Math.random()*Math.PI*2;
const spd = Math.random()*3;
this.particles.push({x:this.x, y:this.y, vx:Math.cos(ang)*spd, vy:Math.sin(ang)*spd, alpha:1});
}
}
draw(){
bgCtx.globalAlpha = 1;
if(!this.exploded){
bgCtx.fillStyle = this.color;
bgCtx.beginPath(); bgCtx.arc(this.x, this.y, 2, 0, 7); bgCtx.fill();
} else {
this.particles.forEach(p => {
bgCtx.globalAlpha = p.alpha;
bgCtx.fillStyle = this.color;
bgCtx.beginPath(); bgCtx.arc(p.x, p.y, 1.2, 0, 7); bgCtx.fill();
});
}
}
}
let time = 0;
let stars = [];
for(let i=0; i<150; i++) stars.push({x:Math.random()*2000, y:Math.random()*1000, s:Math.random()*1.5});
function loop(){
bgCtx.fillStyle = 'rgba(0,0,0,0.2)';
bgCtx.fillRect(0,0,width,height);
smokeCtx.clearRect(0,0,width,height);
bgCtx.fillStyle = "white";
stars.forEach(s => { bgCtx.beginPath(); bgCtx.arc(s.x, s.y, s.s, 0, 7); bgCtx.fill(); });
if(Math.random() < 0.01) jets.push(new Jet());
jets.forEach((j, i) => { j.update(); j.draw(); if(j.x > width+50) jets.splice(i,1); });
particles.forEach((p, i) => { p.update(); p.draw(); if(p.alpha <= 0) particles.splice(i,1); });
if(Math.random() < 0.02) fireworks.push(new Firework());
fireworks.forEach((f, i) => { f.update(); f.draw(); if(f.exploded && f.particles.length==0) fireworks.splice(i,1); });
time += 0.1;
slices.forEach((s, i) => {
s.style.transform = `translateY(${Math.sin(time + i*0.2) * (i*0.3)}px)`;
});
chakra.style.transform = `translateY(${Math.sin(time + 15*0.2) * 5}px) rotate(${time*10}deg)`;
requestAnimationFrame(loop);
}
resize();
loop();
</script>
</body>
</html>