API tools faq
paste
MizunoBrasil

Gerador de link

MizunoBrasil
Oct 21st, 2023
163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 2.34 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.   <head>
  3.     <title>Gerador de Link</title>
  4.     <style>
  5.       body {
  6.         font-family: Arial, sans-serif;
  7.         text-align: center;
  8.       }
  9.  
  10.       h1 {
  11.         margin-top: 50px;
  12.         font-size: 36px;
  13.         color: #333;
  14.       }
  15.  
  16.       form {
  17.         margin-top: 50px;
  18.         text-align: left;
  19.         width: 500px;
  20.         margin-left: auto;
  21.         margin-right: auto;
  22.       }
  23.  
  24.       label, input, textarea, button {
  25.         display: block;
  26.         margin: 10px auto;
  27.         width: 100%;
  28.       }
  29.  
  30.       label {
  31.         font-size: 18px;
  32.       }
  33.  
  34.       input[type="text"], textarea {
  35.         padding: 10px;
  36.         font-size: 16px;
  37.         border-radius: 5px;
  38.         border: 1px solid #ccc;
  39.       }
  40.  
  41.       textarea {
  42.         height: 150px;
  43.         resize: none;
  44.       }
  45.  
  46.       button {
  47.         padding: 10px 20px;
  48.         background-color: #333;
  49.         color: #fff;
  50.         border-radius: 5px;
  51.         border: none;
  52.         font-size: 18px;
  53.         cursor: pointer;
  54.       }
  55.  
  56.       #message {
  57.         margin-top: 20px;
  58.         font-size: 18px;
  59.         color: #333;
  60.       }
  61.     </style>
  62.   </head>
  63.   <body>
  64.     <h1>Gerador de Link</h1>
  65.     <form>
  66.       <label for="inputURL">Insira a URL do arquivo ou site:</label>
  67.       <input type="text" id="inputURL" name="inputURL">
  68.       <br><br>
  69.       <textarea id="downloadLink" rows="5" cols="50"></textarea>
  70.     </form>
  71.     <button id="copyButton">Copiar link</button>
  72.     <div id="message" style="display: none;">Copiado!</div>
  73.     <script>
  74.       const inputURL = document.querySelector("#inputURL");
  75.       const downloadLink = document.querySelector("#downloadLink");
  76.       const copyButton = document.querySelector("#copyButton");
  77.       const message = document.querySelector("#message");
  78.  
  79.       inputURL.addEventListener("input", function() {
  80.         downloadLink.value = `<a href="${inputURL.value}" target="_blank">Clique aqui para acessar o link</a>`;
  81.       });
  82.  
  83.       copyButton.addEventListener("click", function() {
  84.         const textarea = document.querySelector("#downloadLink");
  85.         textarea.select();
  86.         document.execCommand("copy");
  87.         message.style.display = "inline-block";
  88.         setTimeout(function() {
  89.           message.style.display = "none";
  90.         }, 1000);
  91.       });
  92.     </script>
  93.   </body>
  94. </html>
  95.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!