Uv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UV-Visible Spectrum Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
input[type="number"] {
padding: 8px;
width: 100px;
margin-bottom: 20px;
}
canvas {
border: 1px solid #000;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>UV-Visible Spectrum Tool</h2>
<label for="lambdaMax">Enter λ<sub>max</sub> (in nm):</label>
<input type="number" id="lambdaMax" min="200" max="800" placeholder="e.g., 400">
<button onclick="drawSpectrum()">Draw Spectrum</button>
<br>
<canvas id="spectrumCanvas" width="500" height="200"></canvas>
</div>
<script>
function drawSpectrum() {
const canvas = document.getElementById('spectrumCanvas');
const ctx = canvas.getContext('2d');
const lambdaMax = parseFloat(document.getElementById('lambdaMax').value);
if (isNaN(lambdaMax) || lambdaMax < 200 || lambdaMax > 800) {
alert('Please enter a valid λmax between 200 and 800 nm.');
return;
}
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw spectrum gradient
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'violet');
gradient.addColorStop(0.2, 'blue');
gradient.addColorStop(0.4, 'green');
gradient.addColorStop(0.6, 'yellow');
gradient.addColorStop(0.8, 'orange');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw λmax line
const xPos = ((lambdaMax - 200) / 600) * canvas.width;
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(xPos, 0);
ctx.lineTo(xPos, canvas.height);
ctx.stroke();
// Label λmax
ctx.fillStyle = 'black';
ctx.font = '14px Arial';
ctx.fillText(`λmax = ${lambdaMax} nm`, xPos + 5, 20);
}
</script>
</body>
</html>
Comments
Post a Comment