<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Websitero</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="splash.png" sizes="32x32" />
    <link rel="icon" href="splash.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="splash.png" />
    <meta name="msapplication-TileImage" content="splash.png" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet">
</head>
<body>
    <div id="top"></div>
    <div id="toolbar" class="toolbar">
        <div id="textOptions" style="display: none;">
            <select id="fontFamily">
                <option value="Poppins">Poppins</option>
                <option value="Arial">Arial</option>
                <option value="Times New Roman">Times New Roman</option>
                <option value="Courier New">Courier New</option>
                <option value="Georgia">Georgia</option>
                <option value="Verdana">Verdana</option>
                <option value="Comic Sans MS">Comic Sans MS</option>
                <!-- Add more font families as needed -->
            </select>
        <div id="fontSize" class="font-size-control">
            <button id="decreaseFontSize">-</button>
            <input type="number" id="fontSizeInput" value="16" min="1" />
            <button id="increaseFontSize">+</button>
        </div>
        <input type="color" id="fontColor" value="#000000">
        </div>

        <div id="shapeOptions" style="display: none;">
            <input type="color" id="shapeColor" class="color-picker" value="#000000">
        </div>
    </div>

    <div class="container">
        <div class="work-area" id="workArea">
        </div>
    </div>
<div id="generalContextMenu" class="context-menu">
    <ul>
        <li id="addText">Add Text</li>
        <li id="addCircle">Add Circle</li>
        <li id="addRectangle">Add Rectangle</li>
        <li id="addTriangle">Add Triangle</li>
    </ul>
</div>

    

    <script src="script.js"></script>
</body>

</html>
