| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Image Editor</title>
|
| <style>
|
| body {
|
| font-family: 'Arial', sans-serif;
|
| margin: 0;
|
| padding: 20px;
|
| background-color: #f0f0f0;
|
| min-height: 100vh;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| }
|
|
|
| #controls {
|
| margin: 20px 0;
|
| padding: 15px;
|
| background: white;
|
| border-radius: 10px;
|
| box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
| display: flex;
|
| gap: 15px;
|
| flex-wrap: wrap;
|
| justify-content: center;
|
| }
|
|
|
| #controls input[type="file"] {
|
| margin-right: 10px;
|
| }
|
|
|
| select, button, input[type="checkbox"] {
|
| padding: 8px 12px;
|
| border: 1px solid #ddd;
|
| border-radius: 5px;
|
| font-size: 14px;
|
| }
|
|
|
| button {
|
| background: #4CAF50;
|
| color: white;
|
| border: none;
|
| cursor: pointer;
|
| transition: background 0.3s;
|
| }
|
|
|
| button:hover {
|
| background: #45a049;
|
| }
|
|
|
| #canvasContainer {
|
| max-width: 90vw;
|
| max-height: 70vh;
|
| margin: 20px auto;
|
| box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
| border-radius: 10px;
|
| overflow: hidden;
|
| }
|
|
|
| #canvas {
|
| display: block;
|
| max-width: 100%;
|
| max-height: 100%;
|
| }
|
|
|
| .switch {
|
| position: relative;
|
| display: inline-block;
|
| width: 60px;
|
| height: 34px;
|
| }
|
|
|
| .switch input {
|
| opacity: 0;
|
| width: 0;
|
| height: 0;
|
| }
|
|
|
| .slider {
|
| position: absolute;
|
| cursor: pointer;
|
| top: 0;
|
| left: 0;
|
| right: 0;
|
| bottom: 0;
|
| background-color: #ccc;
|
| transition: 0.4s;
|
| border-radius: 34px;
|
| }
|
|
|
| .slider:before {
|
| position: absolute;
|
| content: "";
|
| height: 26px;
|
| width: 26px;
|
| left: 4px;
|
| bottom: 4px;
|
| background-color: white;
|
| transition: 0.4s;
|
| border-radius: 50%;
|
| }
|
|
|
| input:checked + .slider {
|
| background-color: #2196F3;
|
| }
|
|
|
| input:checked + .slider:before {
|
| transform: translateX(26px);
|
| }
|
|
|
| @media (max-width: 768px) {
|
| #controls {
|
| flex-direction: column;
|
| align-items: center;
|
| }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div id="controls">
|
| <input type="file" id="imageUpload" accept="image/*">
|
| <label>Brush Size:</label>
|
| <select id="brushSize">
|
| <option value="5">Small</option>
|
| <option value="10">Medium</option>
|
| <option value="20">Large</option>
|
| </select>
|
| <label>Eraser Mode
|
| <label class="switch">
|
| <input type="checkbox" id="eraserMode">
|
| <span class="slider"></span>
|
| </label>
|
| </label>
|
| <a id="downloadBtn" download="binary_mask.png"><button>Download Image</button></a>
|
| <a href="/"><button type="button">Back</button></a>
|
| </div>
|
|
|
| <div id="canvasContainer">
|
| <canvas id="canvas"></canvas>
|
| </div>
|
| <script src="{{ url_for('static', filename='editor.js') }}"></script>
|
| </body>
|
| </html> |
