| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Embodied AI - Autonomous Vehicle Simulator</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| color: white; |
| } |
| |
| .header { |
| background: rgba(0, 0, 0, 0.3); |
| padding: 20px; |
| text-align: center; |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .header h1 { |
| font-size: 2.5rem; |
| margin-bottom: 10px; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); |
| } |
| |
| .header p { |
| font-size: 1.1rem; |
| opacity: 0.9; |
| } |
| |
| .main-container { |
| display: flex; |
| flex: 1; |
| gap: 20px; |
| padding: 20px; |
| max-width: 1400px; |
| margin: 0 auto; |
| width: 100%; |
| } |
| |
| .simulation-area { |
| flex: 1; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 15px; |
| padding: 20px; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| .canvas-container { |
| position: relative; |
| width: 100%; |
| height: 600px; |
| background: #1a1a2e; |
| border-radius: 10px; |
| overflow: hidden; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); |
| } |
| |
| #simulationCanvas { |
| width: 100%; |
| height: 100%; |
| display: block; |
| } |
| |
| .controls-panel { |
| width: 300px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 15px; |
| padding: 20px; |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| height: fit-content; |
| } |
| |
| .control-section { |
| margin-bottom: 25px; |
| } |
| |
| .control-section h3 { |
| font-size: 1.2rem; |
| margin-bottom: 15px; |
| color: #fff; |
| border-bottom: 2px solid rgba(255, 255, 255, 0.3); |
| padding-bottom: 8px; |
| } |
| |
| .control-group { |
| margin-bottom: 15px; |
| } |
| |
| .control-group label { |
| display: block; |
| margin-bottom: 5px; |
| font-weight: 500; |
| color: #e0e0e0; |
| } |
| |
| .control-group input, .control-group select { |
| width: 100%; |
| padding: 8px 12px; |
| border: none; |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.2); |
| color: white; |
| font-size: 14px; |
| } |
| |
| .control-group input::placeholder { |
| color: rgba(255, 255, 255, 0.6); |
| } |
| |
| .btn { |
| width: 100%; |
| padding: 12px; |
| border: none; |
| border-radius: 8px; |
| font-size: 16px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| margin-bottom: 10px; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(45deg, #4CAF50, #45a049); |
| color: white; |
| } |
| |
| .btn-secondary { |
| background: linear-gradient(45deg, #2196F3, #1976D2); |
| color: white; |
| } |
| |
| .btn-danger { |
| background: linear-gradient(45deg, #f44336, #d32f2f); |
| color: white; |
| } |
| |
| .btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); |
| } |
| |
| .stats { |
| background: rgba(0, 0, 0, 0.3); |
| padding: 15px; |
| border-radius: 8px; |
| margin-top: 15px; |
| } |
| |
| .stats h4 { |
| margin-bottom: 10px; |
| color: #fff; |
| } |
| |
| .stat-item { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 8px; |
| font-size: 14px; |
| } |
| |
| .stat-label { |
| color: #ccc; |
| } |
| |
| .stat-value { |
| color: #4CAF50; |
| font-weight: 600; |
| } |
| |
| .ai-info { |
| background: rgba(0, 0, 0, 0.3); |
| padding: 15px; |
| border-radius: 8px; |
| margin-top: 15px; |
| font-size: 13px; |
| line-height: 1.4; |
| } |
| |
| .legend { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 15px; |
| margin-top: 15px; |
| } |
| |
| .legend-item { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 12px; |
| } |
| |
| .legend-color { |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| } |
| |
| @media (max-width: 768px) { |
| .main-container { |
| flex-direction: column; |
| } |
| |
| .controls-panel { |
| width: 100%; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="header"> |
| <h1>🚗 Embodied AI Vehicle Simulator</h1> |
| <p>Interactive autonomous vehicle navigation with real-time AI decision making</p> |
| </div> |
|
|
| <div class="main-container"> |
| <div class="simulation-area"> |
| <div class="canvas-container"> |
| <canvas id="simulationCanvas"></canvas> |
| </div> |
| |
| <div class="legend"> |
| <div class="legend-item"> |
| <div class="legend-color" style="background: #4CAF50;"></div> |
| <span>Autonomous Vehicle</span> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background: #f44336;"></div> |
| <span>Obstacles</span> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background: #2196F3;"></div> |
| <span>Target Destinations</span> |
| </div> |
| <div class="legend-item"> |
| <div class="legend-color" style="background: #FFC107;"></div> |
| <span>Sensors (LiDAR)</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="controls-panel"> |
| <div class="control-section"> |
| <h3>🎮 Simulation Controls</h3> |
| <button class="btn btn-primary" id="startBtn">Start Simulation</button> |
| <button class="btn btn-secondary" id="pauseBtn">Pause</button> |
| <button class="btn btn-danger" id="resetBtn">Reset</button> |
| </div> |
|
|
| <div class="control-section"> |
| <h3>⚙️ Parameters</h3> |
| <div class="control-group"> |
| <label>Vehicle Speed</label> |
| <input type="range" id="speedSlider" min="0" max="5" value="2" step="0.5"> |
| <span id="speedValue">2.0</span> |
| </div> |
| <div class="control-group"> |
| <label>Sensor Range</label> |
| <input type="range" id="sensorRange" min="50" max="200" value="100" step="10"> |
| <span id="sensorValue">100</span> |
| </div> |
| <div class="control-group"> |
| <label>AI Behavior</label> |
| <select id="behaviorSelect"> |
| <option value="cautious">Cautious</option> |
| <option value="normal" selected>Normal</option> |
| <option value="aggressive">Aggressive</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="control-section"> |
| <h3>🏭 Environment</h3> |
| <button class="btn btn-secondary" id="addObstacleBtn">Add Obstacle</button> |
| <button class="btn btn-secondary" id="addTargetBtn">Add Target</button> |
| <button class="btn btn-danger" id="clearBtn">Clear All</button> |
| </div> |
|
|
| <div class="stats"> |
| <h4>📊 Real-time Stats</h4> |
| <div class="stat-item"> |
| <span class="stat-label">Distance Traveled:</span> |
| <span class="stat-value" id="distanceTraveled">0m</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-label">Targets Reached:</span> |
| <span class="stat-value" id="targetsReached">0</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-label">Obstacles Avoided:</span> |
| <span class="stat-value" id="obstaclesAvoided">0</span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-label">AI Decisions/sec:</span> |
| <span class="stat-value" id="decisionsPerSec">0</span> |
| </div> |
| </div> |
|
|
| <div class="ai-info"> |
| <h4>🧠 AI Decision Making</h4> |
| <p id="currentDecision">System initializing...</p> |
| <br> |
| <p><strong>Embodied AI Features:</strong></p> |
| <ul style="margin-left: 15px; margin-top: 5px;"> |
| <li>Real-time sensor processing</li> |
| <li>Dynamic path planning</li> |
| <li>Obstacle avoidance</li> |
| <li>Goal-oriented behavior</li> |
| <li>Environmental adaptation</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const canvas = document.getElementById('simulationCanvas'); |
| const ctx = canvas.getContext('2d'); |
| |
| |
| function resizeCanvas() { |
| const container = canvas.parentElement; |
| canvas.width = container.clientWidth; |
| canvas.height = container.clientHeight; |
| } |
| |
| resizeCanvas(); |
| window.addEventListener('resize', resizeCanvas); |
| |
| |
| let isRunning = false; |
| let animationId = null; |
| let lastTime = 0; |
| let decisionCount = 0; |
| let lastDecisionTime = 0; |
| |
| |
| class AutonomousVehicle { |
| constructor(x, y) { |
| this.x = x; |
| this.y = y; |
| this.vx = 0; |
| this.vy = 0; |
| this.angle = 0; |
| this.speed = 2; |
| this.maxSpeed = 5; |
| this.size = 15; |
| this.sensorRange = 100; |
| this.sensors = []; |
| this.path = []; |
| this.currentTarget = null; |
| this.distanceTraveled = 0; |
| this.lastX = x; |
| this.lastY = y; |
| this.behavior = 'normal'; |
| this.avoidanceVector = { x: 0, y: 0 }; |
| } |
| |
| updateSensors() { |
| this.sensors = []; |
| const numSensors = 8; |
| |
| for (let i = 0; i < numSensors; i++) { |
| const angle = (i / numSensors) * 2 * Math.PI; |
| const endX = this.x + Math.cos(angle) * this.sensorRange; |
| const endY = this.y + Math.sin(angle) * this.sensorRange; |
| |
| let distance = this.sensorRange; |
| |
| |
| for (let obstacle of obstacles) { |
| const dx = obstacle.x - this.x; |
| const dy = obstacle.y - this.y; |
| const distToObstacle = Math.sqrt(dx * dx + dy * dy); |
| |
| if (distToObstacle < distance && distToObstacle > 0) { |
| const angleToObstacle = Math.atan2(dy, dx); |
| const angleDiff = Math.abs(angle - angleToObstacle); |
| |
| if (angleDiff < 0.5 || angleDiff > 2 * Math.PI - 0.5) { |
| distance = Math.max(0, distToObstacle - obstacle.size); |
| } |
| } |
| } |
| |
| this.sensors.push({ |
| angle: angle, |
| distance: distance, |
| x: this.x + Math.cos(angle) * distance, |
| y: this.y + Math.sin(angle) * distance |
| }); |
| } |
| } |
| |
| makeDecision() { |
| decisionCount++; |
| |
| |
| let closestTarget = null; |
| let minDistance = Infinity; |
| |
| for (let target of targets) { |
| const dx = target.x - this.x; |
| const dy = target.y - this.y; |
| const distance = Math.sqrt(dx * dx + dy * dy); |
| |
| if (distance < minDistance) { |
| minDistance = distance; |
| closestTarget = target; |
| } |
| } |
| |
| this.currentTarget = closestTarget; |
| |
| |
| this.avoidanceVector = { x: 0, y: 0 }; |
| |
| for (let sensor of this.sensors) { |
| if (sensor.distance < this.sensorRange * 0.7) { |
| const avoidanceStrength = (this.sensorRange * 0.7 - sensor.distance) / (this.sensorRange * 0.7); |
| this.avoidanceVector.x -= Math.cos(sensor.angle) * avoidanceStrength; |
| this.avoidanceVector.y -= Math.sin(sensor.angle) * avoidanceStrength; |
| } |
| } |
| |
| |
| const avoidanceMag = Math.sqrt(this.avoidanceVector.x ** 2 + this.avoidanceVector.y ** 2); |
| if (avoidanceMag > 0) { |
| this.avoidanceVector.x /= avoidanceMag; |
| this.avoidanceVector.y /= avoidanceMag; |
| } |
| |
| |
| const decisionElement = document.getElementById('currentDecision'); |
| if (this.currentTarget) { |
| if (avoidanceMag > 0.1) { |
| decisionElement.textContent = `Avoiding obstacles while navigating to target (${Math.round(minDistance)}m away)`; |
| } else { |
| decisionElement.textContent = `Direct path to target (${Math.round(minDistance)}m away)`; |
| } |
| } else { |
| decisionElement.textContent = 'Searching for targets...'; |
| } |
| } |
| |
| update(deltaTime) { |
| this.updateSensors(); |
| this.makeDecision(); |
| |
| |
| let targetVector = { x: 0, y: 0 }; |
| if (this.currentTarget) { |
| const dx = this.currentTarget.x - this.x; |
| const dy = this.currentTarget.y - this.y; |
| const distance = Math.sqrt(dx * dx + dy * dy); |
| |
| if (distance > 0) { |
| targetVector.x = dx / distance; |
| targetVector.y = dy / distance; |
| } |
| |
| |
| if (distance < 20) { |
| const index = targets.indexOf(this.currentTarget); |
| if (index > -1) { |
| targets.splice(index, 1); |
| stats.targetsReached++; |
| document.getElementById('targetsReached').textContent = stats.targetsReached; |
| } |
| } |
| } |
| |
| |
| let finalVector = { x: 0, y: 0 }; |
| const behaviorSettings = { |
| cautious: { avoidance: 0.8, target: 0.2 }, |
| normal: { avoidance: 0.6, target: 0.4 }, |
| aggressive: { avoidance: 0.3, target: 0.7 } |
| }; |
| |
| const settings = behaviorSettings[this.behavior]; |
| finalVector.x = targetVector.x * settings.target + this.avoidanceVector.x * settings.avoidance; |
| finalVector.y = targetVector.y * settings.target + this.avoidanceVector.y * settings.avoidance; |
| |
| |
| const finalMag = Math.sqrt(finalVector.x ** 2 + finalVector.y ** 2); |
| if (finalMag > 0) { |
| finalVector.x /= finalMag; |
| finalVector.y /= finalMag; |
| } |
| |
| |
| this.vx = finalVector.x * this.speed; |
| this.vy = finalVector.y * this.speed; |
| |
| |
| this.x += this.vx * deltaTime; |
| this.y += this.vy * deltaTime; |
| |
| |
| this.x = Math.max(this.size, Math.min(canvas.width - this.size, this.x)); |
| this.y = Math.max(this.size, Math.min(canvas.height - this.size, this.y)); |
| |
| |
| if (this.vx !== 0 || this.vy !== 0) { |
| this.angle = Math.atan2(this.vy, this.vx); |
| } |
| |
| |
| const dx = this.x - this.lastX; |
| const dy = this.y - this.lastY; |
| this.distanceTraveled += Math.sqrt(dx * dx + dy * dy); |
| this.lastX = this.x; |
| this.lastY = this.y; |
| } |
| |
| draw() { |
| |
| ctx.strokeStyle = 'rgba(255, 193, 7, 0.3)'; |
| ctx.lineWidth = 1; |
| for (let sensor of this.sensors) { |
| ctx.beginPath(); |
| ctx.moveTo(this.x, this.y); |
| ctx.lineTo(sensor.x, sensor.y); |
| ctx.stroke(); |
| } |
| |
| |
| ctx.save(); |
| ctx.translate(this.x, this.y); |
| ctx.rotate(this.angle); |
| |
| |
| ctx.fillStyle = '#4CAF50'; |
| ctx.fillRect(-this.size, -this.size/2, this.size * 2, this.size); |
| |
| |
| ctx.fillStyle = '#fff'; |
| ctx.fillRect(this.size/2, -this.size/4, this.size/2, this.size/2); |
| |
| ctx.restore(); |
| |
| |
| if (this.path.length > 1) { |
| ctx.strokeStyle = 'rgba(76, 175, 80, 0.5)'; |
| ctx.lineWidth = 2; |
| ctx.beginPath(); |
| ctx.moveTo(this.path[0].x, this.path[0].y); |
| for (let i = 1; i < this.path.length; i++) { |
| ctx.lineTo(this.path[i].x, this.path[i].y); |
| } |
| ctx.stroke(); |
| } |
| } |
| } |
| |
| |
| class Obstacle { |
| constructor(x, y, size = 20) { |
| this.x = x; |
| this.y = y; |
| this.size = size; |
| } |
| |
| draw() { |
| ctx.fillStyle = '#f44336'; |
| ctx.beginPath(); |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); |
| ctx.fill(); |
| |
| |
| ctx.strokeStyle = '#fff'; |
| ctx.lineWidth = 2; |
| ctx.beginPath(); |
| ctx.moveTo(this.x - this.size/2, this.y - this.size/2); |
| ctx.lineTo(this.x + this.size/2, this.y + this.size/2); |
| ctx.moveTo(this.x + this.size/2, this.y - this.size/2); |
| ctx.lineTo(this.x - this.size/2, this.y + this.size/2); |
| ctx.stroke(); |
| } |
| } |
| |
| |
| class Target { |
| constructor(x, y) { |
| this.x = x; |
| this.y = y; |
| this.size = 15; |
| this.pulsePhase = Math.random() * Math.PI * 2; |
| } |
| |
| update(deltaTime) { |
| this.pulsePhase += deltaTime * 0.003; |
| } |
| |
| draw() { |
| const pulse = Math.sin(this.pulsePhase) * 0.3 + 1; |
| const size = this.size * pulse; |
| |
| ctx.fillStyle = '#2196F3'; |
| ctx.beginPath(); |
| ctx.arc(this.x, this.y, size, 0, Math.PI * 2); |
| ctx.fill(); |
| |
| |
| ctx.strokeStyle = '#fff'; |
| ctx.lineWidth = 2; |
| ctx.beginPath(); |
| ctx.arc(this.x, this.y, size * 0.7, 0, Math.PI * 2); |
| ctx.stroke(); |
| ctx.beginPath(); |
| ctx.arc(this.x, this.y, size * 0.4, 0, Math.PI * 2); |
| ctx.stroke(); |
| } |
| } |
| |
| |
| const vehicle = new AutonomousVehicle(100, 100); |
| const obstacles = []; |
| const targets = []; |
| |
| |
| const stats = { |
| distanceTraveled: 0, |
| targetsReached: 0, |
| obstaclesAvoided: 0, |
| decisionsPerSec: 0 |
| }; |
| |
| |
| function initializeEnvironment() { |
| obstacles.length = 0; |
| targets.length = 0; |
| |
| |
| obstacles.push(new Obstacle(300, 200, 25)); |
| obstacles.push(new Obstacle(500, 350, 30)); |
| obstacles.push(new Obstacle(200, 400, 20)); |
| obstacles.push(new Obstacle(600, 150, 35)); |
| |
| |
| targets.push(new Target(400, 100)); |
| targets.push(new Target(600, 400)); |
| targets.push(new Target(150, 300)); |
| } |
| |
| |
| document.getElementById('startBtn').addEventListener('click', () => { |
| isRunning = true; |
| animate(); |
| }); |
| |
| document.getElementById('pauseBtn').addEventListener('click', () => { |
| isRunning = false; |
| if (animationId) { |
| cancelAnimationFrame(animationId); |
| } |
| }); |
| |
| document.getElementById('resetBtn').addEventListener('click', () => { |
| isRunning = false; |
| if (animationId) { |
| cancelAnimationFrame(animationId); |
| } |
| |
| |
| vehicle.x = 100; |
| vehicle.y = 100; |
| vehicle.vx = 0; |
| vehicle.vy = 0; |
| vehicle.distanceTraveled = 0; |
| vehicle.path = []; |
| |
| |
| stats.targetsReached = 0; |
| stats.obstaclesAvoided = 0; |
| decisionCount = 0; |
| |
| |
| initializeEnvironment(); |
| |
| |
| updateStatsDisplay(); |
| }); |
| |
| document.getElementById('speedSlider').addEventListener('input', (e) => { |
| vehicle.speed = parseFloat(e.target.value); |
| document.getElementById('speedValue').textContent = vehicle.speed.toFixed(1); |
| }); |
| |
| document.getElementById('sensorRange').addEventListener('input', (e) => { |
| vehicle.sensorRange = parseInt(e.target.value); |
| document.getElementById('sensorValue').textContent = vehicle.sensorRange; |
| }); |
| |
| document.getElementById('behaviorSelect').addEventListener('change', (e) => { |
| vehicle.behavior = e.target.value; |
| }); |
| |
| document.getElementById('addObstacleBtn').addEventListener('click', () => { |
| const x = Math.random() * (canvas.width - 100) + 50; |
| const y = Math.random() * (canvas.height - 100) + 50; |
| const size = Math.random() * 20 + 15; |
| obstacles.push(new Obstacle(x, y, size)); |
| }); |
| |
| document.getElementById('addTargetBtn').addEventListener('click', () => { |
| const x = Math.random() * (canvas.width - 100) + 50; |
| const y = Math.random() * (canvas.height - 100) + 50; |
| targets.push(new Target(x, y)); |
| }); |
| |
| document.getElementById('clearBtn').addEventListener('click', () => { |
| obstacles.length = 0; |
| targets.length = 0; |
| }); |
| |
| |
| canvas.addEventListener('click', (e) => { |
| const rect = canvas.getBoundingClientRect(); |
| const x = e.clientX - rect.left; |
| const y = e.clientY - rect.top; |
| |
| if (e.shiftKey) { |
| obstacles.push(new Obstacle(x, y, 20)); |
| } else { |
| targets.push(new Target(x, y)); |
| } |
| }); |
| |
| |
| function updateStatsDisplay() { |
| document.getElementById('distanceTraveled').textContent = Math.round(vehicle.distanceTraveled) + 'm'; |
| document.getElementById('targetsReached').textContent = stats.targetsReached; |
| document.getElementById('obstaclesAvoided').textContent = stats.obstaclesAvoided; |
| document.getElementById('decisionsPerSec').textContent = stats.decisionsPerSec; |
| } |
| |
| |
| function animate(currentTime = 0) { |
| if (!isRunning) return; |
| |
| const deltaTime = currentTime - lastTime; |
| lastTime = currentTime; |
| |
| |
| if (currentTime - lastDecisionTime > 1000) { |
| stats.decisionsPerSec = Math.round((decisionCount / (currentTime - lastDecisionTime)) * 1000); |
| decisionCount = 0; |
| lastDecisionTime = currentTime; |
| } |
| |
| |
| ctx.fillStyle = '#1a1a2e'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| |
| |
| for (let target of targets) { |
| target.update(deltaTime); |
| target.draw(); |
| } |
| |
| |
| for (let obstacle of obstacles) { |
| obstacle.draw(); |
| } |
| |
| |
| vehicle.update(deltaTime); |
| vehicle.draw(); |
| |
| |
| updateStatsDisplay(); |
| |
| animationId = requestAnimationFrame(animate); |
| } |
| |
| |
| initializeEnvironment(); |
| animate(); |
| |
| |
| const instructions = document.createElement('div'); |
| instructions.style.cssText = ` |
| position: fixed; |
| top: 20px; |
| right: 20px; |
| background: rgba(0, 0, 0, 0.8); |
| color: white; |
| padding: 15px; |
| border-radius: 10px; |
| font-size: 12px; |
| max-width: 200px; |
| z-index: 1000; |
| `; |
| instructions.innerHTML = ` |
| <strong>Controls:</strong><br> |
| • Click to add targets<br> |
| • Shift+Click to add obstacles<br> |
| • Use panel controls for settings<br> |
| • Watch AI make real-time decisions! |
| `; |
| document.body.appendChild(instructions); |
| |
| |
| setTimeout(() => { |
| instructions.style.opacity = '0'; |
| instructions.style.transition = 'opacity 1s'; |
| setTimeout(() => instructions.remove(), 1000); |
| }, 5000); |
| </script> |
| </body> |
| </html> |
