Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>PDF Simulator</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <style> | |
| .pdf-page { | |
| position: relative; | |
| width: 800px; | |
| height: 1100px; | |
| margin: 20px auto; | |
| background-color: white; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.2); | |
| overflow: hidden; | |
| } | |
| .editable-box { | |
| position: absolute; | |
| border: 1px solid rgba(200,200,200,0.8); | |
| box-shadow: 0 0 5px rgba(200,200,255,0.5); | |
| min-width: 100px; | |
| min-height: 50px; | |
| resize: none; | |
| overflow: hidden; | |
| background-color: rgba(255,255,255,0.9); | |
| cursor: move; | |
| padding: 5px; | |
| } | |
| .editable-box:focus { | |
| outline: none; | |
| border: 1px solid rgba(0,100,255,0.5); | |
| } | |
| .add-box-btn { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| padding: 10px 20px; | |
| background: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| } | |
| .delete-box-btn { | |
| position: absolute; | |
| top: 5px; | |
| right: 5px; | |
| background: rgba(0,0,0,0.3); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| display: none; | |
| } | |
| .editable-box:hover .delete-box-btn { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <h1>PDF Simulator</h1> | |
| <p>Click anywhere on the page to add editable text boxes.</p> | |
| <p>Drag to move, resize with handles, and use buttons to add lines or delete.</p> | |
| </div> | |
| <div class="pdf-page" id="pdfPage"></div> | |
| <button class="add-box-btn" id="addBoxBtn">Add Text Box</button> | |
| <script> | |
| document.getElementById('addBoxBtn').addEventListener('click', addEditableBox); | |
| document.getElementById('pdfPage').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| addEditableBox(e.clientX - this.offsetLeft, e.clientY - this.offsetTop); | |
| } | |
| }); | |
| function addEditableBox(x = 50, y = 50) { | |
| const box = document.createElement('div'); | |
| box.className = 'editable-box'; | |
| box.contentEditable = true; | |
| box.style.left = x + 'px'; | |
| box.style.top = y + 'px'; | |
| const deleteBtn = document.createElement('button'); | |
| deleteBtn.className = 'delete-box-btn'; | |
| deleteBtn.innerHTML = '×'; | |
| deleteBtn.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| box.remove(); | |
| }); | |
| box.appendChild(deleteBtn); | |
| document.getElementById('pdfPage').appendChild(box); | |
| box.focus(); | |
| // Make draggable | |
| makeDraggable(box); | |
| } | |
| function makeDraggable(element) { | |
| let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; | |
| element.onmousedown = dragMouseDown; | |
| function dragMouseDown(e) { | |
| if (e.target.className.includes('add-line-btn') || | |
| e.target.className.includes('delete-box-btn')) return; | |
| e = e || window.event; | |
| e.preventDefault(); | |
| pos3 = e.clientX; | |
| pos4 = e.clientY; | |
| document.onmouseup = closeDragElement; | |
| document.onmousemove = elementDrag; | |
| } | |
| function elementDrag(e) { | |
| e = e || window.event; | |
| e.preventDefault(); | |
| pos1 = pos3 - e.clientX; | |
| pos2 = pos4 - e.clientY; | |
| pos3 = e.clientX; | |
| pos4 = e.clientY; | |
| element.style.top = (element.offsetTop - pos2) + "px"; | |
| element.style.left = (element.offsetLeft - pos1) + "px"; | |
| } | |
| function closeDragElement() { | |
| document.onmouseup = null; | |
| document.onmousemove = null; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |