BASIC CODE:-
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Realistic Indian Gas Stove Simulation</title>
<style>
body {
background: #1e1e1e; /* Dark Kitchen Slab styling */
background-image: radial-gradient(#2c2c2c 10%, transparent 10%),
radial-gradient(#2c2c2c 10%, transparent 10%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.kitchen-setup {
position: relative;
display: flex;
align-items: flex-end;
padding-bottom: 50px;
}
/* --- 1. THE LPG CYLINDER (RED) --- */
.cylinder-group {
position: relative;
width: 100px;
z-index: 1;
}
.cylinder-body {
width: 90px;
height: 160px;
background: radial-gradient(circle at 30% 30%, #ff4d4d, #c0392b, #922b21);
border-radius: 20px 20px 10px 10px;
position: relative;
box-shadow: inset -10px 0 15px rgba(0,0,0,0.3), 5px 5px 15px rgba(0,0,0,0.5);
}
/* Handles on top of cylinder */
.cylinder-handle {
width: 60px;
height: 35px;
border: 8px solid #c0392b;
border-bottom: none;
border-radius: 20px 20px 0 0;
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
z-index: 0;
}
.cylinder-neck {
width: 40px;
height: 15px;
background: #7f8c8d;
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.cylinder-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255,255,255,0.7);
font-weight: bold;
font-size: 14px;
text-align: center;
}
/* --- 2. THE PIPE (CONNECTING TUBE) --- */
.gas-pipe {
width: 120px;
height: 80px;
border-bottom: 12px solid #e67e22; /* Orange Rubber Pipe */
border-radius: 0 0 0 100%;
position: absolute;
left: 60px;
bottom: 30px;
z-index: 0;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}
/* --- 3. THE STOVE (STAINLESS STEEL) --- */
.stove-container {
margin-left: 20px;
position: relative;
}
.stove-body {
width: 280px;
height: 80px;
/* Metallic Steel Look */
background: linear-gradient(180deg, #bdc3c7, #ecf0f1 40%, #95a5a6);
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 2px 5px rgba(255,255,255,0.8);
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 5px solid #7f8c8d;
}
/* Stove Legs */
.leg {
width: 15px;
height: 15px;
background: #333;
position: absolute;
bottom: -15px;
}
.leg.left { left: 20px; }
.leg.right { right: 20px; }
/* The Burner Assembly */
.burner-plate {
width: 120px;
height: 15px;
background: #2c3e50;
position: absolute;
top: -15px;
border-radius: 5px;
display: flex;
justify-content: center;
}
.burner-head {
width: 60px;
height: 15px;
background: radial-gradient(circle, #f1c40f, #d35400); /* Brass look */
border-radius: 50% 50% 0 0;
position: absolute;
top: -10px;
border: 1px solid #a04000;
}
/* The Trivet (Stand for utensil) */
.trivet {
width: 90px;
height: 5px;
background: black;
position: absolute;
top: -18px;
border-radius: 2px;
}
.trivet.cross {
transform: rotate(90deg);
}
/* --- 4. THE KNOB (CONTROL) --- */
.control-panel {
position: absolute;
bottom: 15px;
}
.knob {
width: 40px;
height: 40px;
background: radial-gradient(circle, #333, #000);
border-radius: 50%;
border: 3px solid #7f8c8d;
cursor: pointer;
position: relative;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 5px rgba(0,0,0,0.5);
}
/* The white mark on the knob */
.knob::after {
content: '';
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 10px;
background: white;
border-radius: 2px;
}
.knob-label {
position: absolute;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
color: #333;
font-size: 10px;
font-weight: bold;
background: rgba(255,255,255,0.8);
padding: 2px 5px;
border-radius: 3px;
white-space: nowrap;
}
/* --- 5. THE REALISTIC FLAME --- */
.flame-container {
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
display: none; /* Hidden by default */
}
.flame-circle {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 50%;
/* Realistic Gas Blue Flame */
background: radial-gradient(ellipse at bottom, rgba(0,0,255,0.8) 0%, rgba(0,191,255,0.6) 40%, rgba(255,255,255,0.2) 70%, transparent 80%);
filter: blur(4px);
animation: flicker 0.1s infinite alternate;
opacity: 0.8;
}
.flame-inner {
position: absolute;
bottom: 5px;
left: 15px;
width: 30px;
height: 40px;
background: rgba(0, 0, 255, 0.9);
border-radius: 50% 50% 20% 20%;
filter: blur(2px);
animation: flicker 0.15s infinite alternate-reverse;
}
@keyframes flicker {
0% { transform: scale(1) translate(0, 0); opacity: 0.8; }
50% { transform: scale(1.05) translate(-1px, 0); opacity: 0.9; }
100% { transform: scale(0.95) translate(1px, 0); opacity: 0.7; }
}
/* JS State Classes */
.stove-on .knob {
transform: rotate(-90deg); /* Knob turns left */
}
.stove-on .flame-container {
display: block;
}
.hint {
position: absolute;
top: 20px;
color: white;
font-size: 18px;
background: rgba(0,0,0,0.7);
padding: 10px 20px;
border-radius: 50px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
</style>
</head>
<body>
<div class="hint">Click the Knob to Cook! 🔥</div>
<div class="kitchen-setup" id="kitchen">
<div class="cylinder-group">
<div class="cylinder-handle"></div>
<div class="cylinder-neck"></div>
<div class="cylinder-body">
<div class="cylinder-text">14.2 kg<br>NET WT.</div>
</div>
</div>
<div class="gas-pipe"></div>
<div class="stove-container">
<div class="stove-body">
<div class="burner-plate">
<div class="burner-head"></div>
<div class="trivet"></div>
<div class="trivet cross"></div>
<div class="flame-container">
<div class="flame-circle"></div>
<div class="flame-inner"></div>
</div>
</div>
<div class="leg left"></div>
<div class="leg right"></div>
<div class="control-panel">
<div class="knob" onclick="toggleGas()"></div>
<div class="knob-label">OFF / ON</div>
</div>
</div>
</div>
</div>
<script>
let isGasOn = false;
function toggleGas() {
const kitchen = document.getElementById('kitchen');
isGasOn = !isGasOn;
if (isGasOn) {
// Add class to activate animations
kitchen.classList.add('stove-on');
} else {
// Remove class to turn off
kitchen.classList.remove('stove-on');
}
}
</script>
</body>
</html>