<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Screenshot Annotation</title> <link rel="stylesheet" href="styles/annotator.css"> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #f5f5f5; } #annotation-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: #f5f5f5; } .canvas-container { flex: 1; position: relative; margin: 0; display: flex; flex-direction: column; background: #fff; } .annotation-toolbar { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #ddd; padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 20px; } .canvas-wrapper { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 20px; } .tool-group { display: flex; gap: 10px; align-items: center; } .tool-btn, .action-btn { background: none; border: 1px solid #ddd; border-radius: 4px; padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #666; } .tool-btn:hover, .action-btn:hover { background: #f0f0f0; } .tool-btn.active { background: #e3f2fd; border-color: #2196f3; color: #2196f3; } .color-group input[type="color"] { width: 40px; height: 40px; padding: 2px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; } .size-group input[type="range"] { width: 100px; } .size-group { display: flex; align-items: center; gap: 10px; } .action-group { display: flex; gap: 10px; } svg { width: 24px; height: 24px; } </style> </head> <body> <div id="annotation-container"> <div id="toolbar"> <button class="tool-btn" data-tool="brush" title="Draw"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z"/> </svg> </button> <button class="tool-btn" data-tool="text" title="Add Text"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M4 7v2h16V7H4z M4 11v2h16v-2H4z M4 15v2h16v-2H4z"/> </svg> </button> <button class="tool-btn" data-tool="arrow" title="Add Arrow"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M5 12h14 M19 12l-4-4 M19 12l-4 4"/> </svg> </button> <button class="tool-btn" data-tool="rectangle" title="Add Rectangle"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="4" y="4" width="16" height="16" rx="2"/> </svg> </button> <div class="tool-options"> <input type="color" id="color-picker" value="#FF0000"> <input type="range" id="stroke-width" min="1" max="20" value="3"> </div> <div class="spacer"></div> <button id="done-btn" class="action-btn">Done</button> <button id="cancel-btn" class="action-btn">Cancel</button> </div> <div id="canvas-container"> <canvas id="canvas"></canvas> </div> </div> <script src="js/annotation.js"></script> </body> </html>