HTMLify
for arshiyan
Views: 58 | Author: devwajahat
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Copy Text</title> <style> body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f9f9f9; } .container { background-color: white; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 20px; } .item-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; background-color: #f0f0f0; padding: 15px 20px; border-radius: 4px; border: 1px solid #ddd; } .text-box { font-family: monospace; font-size: 16px; } button { padding: 8px 16px; font-size: 14px; cursor: pointer; border: 1px solid #ccc; background-color: #fff; border-radius: 4px; transition: background-color 0.2s; min-width: 90px; } button:hover { background-color: #eaeaea; } </style> </head> <body> <div class="container"> <div class="item-row"> <span id="text1" class="text-box">ykxhs29020</span> <button id="btn1" onclick="copyText('text1', 'btn1')">Copy</button> </div> <div class="item-row"> <span id="text2" class="text-box">qwxtz97539</span> <button id="btn2" onclick="copyText('text2', 'btn2')">Copy</button> </div> </div> <script> function copyText(textId, btnId) { const textElement = document.getElementById(textId); const button = document.getElementById(btnId); navigator.clipboard.writeText(textElement.innerText).then(() => { button.innerText = "Copied!"; setTimeout(() => { button.innerText = "Copy"; }, 2000); }); } </script> </body> </html> |