Dan-Q/7-red-lines-claude-3.7-sonnet.html

## 7-red-lines-claude-3.7-sonnet.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seven Red Perpendicular Lines</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        canvas {
            display: block;
            margin: 20px 0;
        }
        .note {
            margin-top: 30px;
            font-style: italic;
            color: #666;
        }
    </style>
</head>
<body>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Create canvas element
            const canvas = document.createElement('canvas');
            canvas.width = 500;
            canvas.height = 500;
            canvas.style.border = '1px solid black';
            document.body.appendChild(canvas);

            // Get the drawing context
            const ctx = canvas.getContext('2d');

            // Add title and explanation
            const title = document.createElement('h1');
            title.textContent = 'Seven Red Lines (All Strictly Perpendicular)';
            document.body.insertBefore(title, canvas);

            const explanation = document.createElement('p');
            explanation.innerHTML = 'As requested: 7 red lines (some with green ink, some transparent), all perpendicular!<br>Hover over lines to see explanations.';
            document.body.insertBefore(explanation, canvas);

            // Define our "impossible" lines
            const lines = [
                {
                    x1: 100, y1: 100, x2: 400, y2: 100,
                    color: 'red',
                    dimension: '2D',
                    description: 'Red line in 2D space (X-axis)'
                },
                {
                    x1: 100, y1: 100, x2: 100, y2: 400,
                    color: 'red',
                    dimension: '2D',
                    description: 'Red line in 2D space (Y-axis)'
                },
                {
                    x1: 150, y1: 150, x2: 350, y2: 150,
                    color: 'green',
                    dimension: '3D',
                    description: 'Red line with green ink (Z-axis)'
                },
                {
                    x1: 150, y1: 200, x2: 350, y2: 200,
                    color: 'rgba(255,0,0,0.1)',
                    dimension: '4D',
                    description: 'Transparent red line (W-axis)'
                },
                {
                    x1: 200, y1: 250, x2: 400, y2: 250,
                    color: 'red',
                    dimension: '5D',
                    description: 'Red line in 5D space (V-axis)'
                },
                {
                    x1: 200, y1: 300, x2: 400, y2: 300,
                    color: 'green',
                    dimension: '6D',
                    description: 'Red line with green ink in 6D space (U-axis)'
                },
                {
                    x1: 250, y1: 350, x2: 450, y2: 350,
                    color: 'rgba(0,255,0,0.1)',
                    dimension: '7D',
                    description: 'Transparent red line with green ink (T-axis)'
                }
            ];

            // Draw the lines
            lines.forEach(line => {
                ctx.beginPath();
                ctx.moveTo(line.x1, line.y1);
                ctx.lineTo(line.x2, line.y2);
                ctx.strokeStyle = line.color;
                ctx.lineWidth = 3;
                ctx.stroke();

                // Add dimension label
                ctx.fillStyle = 'black';
                ctx.font = '12px Arial';
                ctx.fillText(line.dimension, (line.x1 + line.x2) / 2, line.y1 - 5);
            });

            // Add tooltip functionality
            const tooltip = document.createElement('div');
            tooltip.style.position = 'absolute';
            tooltip.style.padding = '5px';
            tooltip.style.background = 'rgba(0,0,0,0.7)';
            tooltip.style.color = 'white';
            tooltip.style.borderRadius = '5px';
            tooltip.style.display = 'none';
            document.body.appendChild(tooltip);

            canvas.addEventListener('mousemove', function(e) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                let found = false;

                lines.forEach(line => {
                    // Simple hit detection for horizontal lines
                    if (y >= line.y1 - 5 && y <= line.y1 + 5 && x >= line.x1 && x <= line.x2) {
                        tooltip.style.display = 'block';
                        tooltip.style.left = (e.clientX + 10) + 'px';
                        tooltip.style.top = (e.clientY + 10) + 'px';
                        tooltip.textContent = line.description;
                        found = true;
                    }
                });

                if (!found) {
                    tooltip.style.display = 'none';
                }
            });

            // Add a note about the joke
            const note = document.createElement('p');
            note.className = 'note';
            note.innerHTML = 'Note: This is based on the comedy sketch "The Expert (Short Comedy Sketch)" where a client asks for the impossible task of drawing seven red lines, all perpendicular to each other, some with green ink and some transparent.';
            document.body.appendChild(note);

            // Add a link to the original video
            const videoLink = document.createElement('p');
            videoLink.innerHTML = '<a href="https://www.youtube.com/watch?v=BKorP55Aqvg" target="_blank">Watch the original comedy sketch</a>';
            document.body.appendChild(videoLink);
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Seven Red Perpendicular Lines</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	}
	canvas {
	display: block;
	margin: 20px 0;
	}
	.note {
	margin-top: 30px;
	font-style: italic;
	color: #666;
	}
	</style>
	</head>
	<body>
	<script>
	document.addEventListener('DOMContentLoaded', function() {
	// Create canvas element
	const canvas = document.createElement('canvas');
	canvas.width = 500;
	canvas.height = 500;
	canvas.style.border = '1px solid black';
	document.body.appendChild(canvas);

	// Get the drawing context
	const ctx = canvas.getContext('2d');

	// Add title and explanation
	const title = document.createElement('h1');
	title.textContent = 'Seven Red Lines (All Strictly Perpendicular)';
	document.body.insertBefore(title, canvas);

	const explanation = document.createElement('p');
	explanation.innerHTML = 'As requested: 7 red lines (some with green ink, some transparent), all perpendicular!<br>Hover over lines to see explanations.';
	document.body.insertBefore(explanation, canvas);

	// Define our "impossible" lines
	const lines = [
	{
	x1: 100, y1: 100, x2: 400, y2: 100,
	color: 'red',
	dimension: '2D',
	description: 'Red line in 2D space (X-axis)'
	},
	{
	x1: 100, y1: 100, x2: 100, y2: 400,
	color: 'red',
	dimension: '2D',
	description: 'Red line in 2D space (Y-axis)'
	},
	{
	x1: 150, y1: 150, x2: 350, y2: 150,
	color: 'green',
	dimension: '3D',
	description: 'Red line with green ink (Z-axis)'
	},
	{
	x1: 150, y1: 200, x2: 350, y2: 200,
	color: 'rgba(255,0,0,0.1)',
	dimension: '4D',
	description: 'Transparent red line (W-axis)'
	},
	{
	x1: 200, y1: 250, x2: 400, y2: 250,
	color: 'red',
	dimension: '5D',
	description: 'Red line in 5D space (V-axis)'
	},
	{
	x1: 200, y1: 300, x2: 400, y2: 300,
	color: 'green',
	dimension: '6D',
	description: 'Red line with green ink in 6D space (U-axis)'
	},
	{
	x1: 250, y1: 350, x2: 450, y2: 350,
	color: 'rgba(0,255,0,0.1)',
	dimension: '7D',
	description: 'Transparent red line with green ink (T-axis)'
	}
	];

	// Draw the lines
	lines.forEach(line => {
	ctx.beginPath();
	ctx.moveTo(line.x1, line.y1);
	ctx.lineTo(line.x2, line.y2);
	ctx.strokeStyle = line.color;
	ctx.lineWidth = 3;
	ctx.stroke();

	// Add dimension label
	ctx.fillStyle = 'black';
	ctx.font = '12px Arial';
	ctx.fillText(line.dimension, (line.x1 + line.x2) / 2, line.y1 - 5);
	});

	// Add tooltip functionality
	const tooltip = document.createElement('div');
	tooltip.style.position = 'absolute';
	tooltip.style.padding = '5px';
	tooltip.style.background = 'rgba(0,0,0,0.7)';
	tooltip.style.color = 'white';
	tooltip.style.borderRadius = '5px';
	tooltip.style.display = 'none';
	document.body.appendChild(tooltip);

	canvas.addEventListener('mousemove', function(e) {
	const rect = canvas.getBoundingClientRect();
	const x = e.clientX - rect.left;
	const y = e.clientY - rect.top;

	let found = false;

	lines.forEach(line => {
	// Simple hit detection for horizontal lines
	if (y >= line.y1 - 5 && y <= line.y1 + 5 && x >= line.x1 && x <= line.x2) {
	tooltip.style.display = 'block';
	tooltip.style.left = (e.clientX + 10) + 'px';
	tooltip.style.top = (e.clientY + 10) + 'px';
	tooltip.textContent = line.description;
	found = true;
	}
	});

	if (!found) {
	tooltip.style.display = 'none';
	}
	});

	// Add a note about the joke
	const note = document.createElement('p');
	note.className = 'note';
	note.innerHTML = 'Note: This is based on the comedy sketch "The Expert (Short Comedy Sketch)" where a client asks for the impossible task of drawing seven red lines, all perpendicular to each other, some with green ink and some transparent.';
	document.body.appendChild(note);

	// Add a link to the original video
	const videoLink = document.createElement('p');
	videoLink.innerHTML = '<a href="https://www.youtube.com/watch?v=BKorP55Aqvg" target="_blank">Watch the original comedy sketch</a>';
	document.body.appendChild(videoLink);
	});
	</script>
	</body>
	</html>