lainlives
/
pictoclone


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern PictoChat</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 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 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="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>