<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Perspective Tools</title>
    <script defer src="main.js"></script>
</head>
<body>
    <h1>Perspective Tools Plugin</h1>
    <button id="createGridButton">Create VP</button>
    <button id="createHorizonButton">Create HOR</button>
    <div id="colorButtons">
        <h3>Change Grid Color:</h3>
        <button class="color-button" data-color="#ff0000">Red</button>
        <button class="color-button" data-color="#00ff00">Green</button>
        <button class="color-button" data-color="#0000ff">Blue</button>
        <button class="color-button" data-color="#ffff00">Yellow</button>
        <button class="color-button" data-color="#ff00ff">Magenta</button>
        <button class="color-button" data-color="#00ffff">Cyan</button>
        <button class="color-button" data-color="#000000">Black</button>
        <button class="color-button" data-color="#ffffff">White</button>
        <button class="color-button" data-color="#808080">Gray</button>
        <button class="color-button" data-color="#ffa500">Orange</button>
        <button class="color-button" data-color="#800080">Purple</button>
    </div>
</body>
</html>