lainlives
/
pictoclone


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div id="user-message-form">
            <div id="toolbar">
                <button class="active-tool" id="pencil">
                    <img src="resources/icons/pencil_icon.png" alt="pencil">
                </button>
                <button id="eraser">
                    <img src="resources/icons/eraser_icon.png" alt="eraser">
                </button>
                <div class="toolbar-divider"></div>
                <button id="small">
                    <img src="resources/icons/small_icon.png" alt="small">
                </button>
                <button class="active-tool" id="medium">
                    <img src="resources/icons/medium_icon.png" alt="medium">
                </button>
                <div class="toolbar-divider"></div>
                <div class="palette-container">
                    <button id="extend-canvas-btn" title="Extend Canvas Height" style="width: 40px; height: 40px; font-size: 20px;">↕</button>
                    <button id="palette-toggle" title="Colors" style="width: 40px; height: 40px; font-size: 20px;">🎨</button>
                    <div id="color-palette">
                        <button class="swatch active-swatch" style="background-color: #000000;" data-color="#000000"></button>
                        <button class="swatch" style="background-color: #ffffff;" data-color="#ffffff"></button>
                        <button class="swatch" style="background-color: #ff0000;" data-color="#ff0000"></button>
                        <button class="swatch" style="background-color: #ff8800;" data-color="#ff8800"></button>
                        <button class="swatch" style="background-color: #ffff00;" data-color="#ffff00"></button>
                        <button class="swatch" style="background-color: #00ff00;" data-color="#00ff00"></button>
                        <button class="swatch" style="background-color: #0000ff;" data-color="#0000ff"></button>
                        <button class="swatch" style="background-color: #8800ff;" data-color="#8800ff"></button>
                        <div class="swatch-picker-container">
                            <input type="color" id="user-color-picker" title="Custom color" value="#4f46e5">
                            <button id="random-color-btn" title="Randomize Color" style="width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 14px; margin-left: 5px; background: transparent; border: 1px solid var(--panel-border); cursor: pointer; display: flex; align-items: center; justify-content: center;">🎲</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-main">
                <div class="message-box" id="user-message-box">
                    <div class="message-header">
                        <span class="username">Player</span>
                    </div>
                    <div class="canvas">
                        <span class="message-text"></span>
                        <canvas width="856" height="312"></canvas>
                    </div>
                </div>
                <div id="form-button-row">
                    <button id="theme-btn" title="Toggle Light/Dark Theme">☀</button>
                    <button id="download-btn" title="Download Image Archive">💾</button>
                    <button id="expand-btn">expand ⤢</button>
                    <button id="clear">clear</button>
                    <button id="copy">copy</button>
                    <button id="send">send</button>
                </div>
            </div>
        </div>
        <div id="chat-log">
            <!-- Messages will appear here -->
            <div class="system-message-box">
                Welcome to {INSERT TITLE}
            </div>
        </div>
    </div>

    <script src="js/canvas.js"></script>
    <script src="js/service.js"></script>
    <script src="js/text.js"></script>
    <script src="js/user_colors.js"></script>
</body>
</html>