-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
62 lines (62 loc) · 2.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Pattern Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Interactive Pattern Designer</h1>
<div id="controls">
<label for="rows">Rows:</label>
<input type="number" id="rows" value="10" min="1">
<label for="cols">Columns:</label>
<input type="number" id="cols" value="15" min="1" max="180">
<label for="zoomFactor">Zoom:</label>
<input type="number" id="zoomFactor" value="10" min="1" max="100" step="1">
<button onclick="createGrid()">Create Grid</button>
<button onclick="clearGrid()">Clear Grid</button>
<div class="color-picker">
<label for="color0" class="color-label" id="label-color0">Color 0 <input type="color" id="color0" value="#ffffff"></label>
<label for="color1" class="color-label" id="label-color1">Color 1 <input type="color" id="color1" value="#ff0000"></label>
<label for="color2" class="color-label" id="label-color2">Color 2 <input type="color" id="color2" value="#00ff00"></label>
<label for="color3" class="color-label" id="label-color3">Color 3 <input type="color" id="color3" value="#0000ff"></label>
<label for="color4" class="color-label" id="label-color4">Color 4 <input type="color" id="color4" value="#ffff00"></label>
</div>
</div>
<div id="info-bar" class="banner banner-info">
<div id="hover-info">(Row, Col): None</div>
<div id="selected-color-info">Selected: None</div>
<div id="pattern-info">Pattern: Rows x Columns</div>
<div id="zoom-info">Zoom Factor: 1</div>
</div>
<div id="grid-container">
<div id="grid"></div>
</div>
<div id="output-controls">
<label for="output-format">Output Format:</label>
<select id="output-format">
<option value="matrix">Matrix</option>
<option value="rle">Run-Length Encoding</option>
<option value="json">JSON</option>
<option value="png">PNG Image</option>
</select>
<button onclick="renderOutput()">Render Output</button>
<button onclick="copyOutput()">Copy Output</button>
</div>
<div id="encodedOutput" class="banner banner-output"></div>
<div id="imageContainer" class="banner banner-output">
<canvas id="imageCanvas"></canvas>
</div>
<script src="js/utils.js"></script>
<script src="js/color.js"></script>
<script src="js/grid.js"></script>
<script>
window.onload = () => {
createGrid();
initColorPickers();
};
</script>
</body>
</html>