<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="index.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>HTML 5 Canvas Mandelbrot Demo</h1> <h2>Programmed by Alexander Bass</h2> <hr> <p>Instructions: <br> Click any point on the image to move to there. <br> Adjust the zoom by using the zoom slider; Render by either clicking or pressing render button. <br> Adjust iterations slider and other settings to satisfaction </p> <canvas class="canvas" id="viewport" width="800" height="800"></canvas> <div class="subSection"> <h4>Zoom<h4> <span id="zoomer"></span> <input id="zoom" type="range" min="-10" max="1000" value="-10" class="slider"> </div> <input class="startButton" type="button" value="Render" onclick="render();" /> <div class="subSection"> <h4>Iterations<h4> <input id="iterations" type="range" min="5" max="3000" value="200" class="slider"> </div> <div class="subSection"> <div class="inline"> <h4>Color Mode</h4> <select name="Color Mode" id="mode"> <option value="1">Mode 1</option> <option value="2">Mode 2</option> </select> </div> <span class="spacer"></span> <div class="inline"> <h4>Fractal Type</h4> <select name="Fractal Type" id="type"> <option value="1">Mandelbrot</option> <option value="2">Burning Ship</option> </select> </div> </div> </div> </body> </html>