(Single code box) (Double code +Download)

HTML

<label>Type your text</label><div class="control">
<textarea cols="100" id="htmlText" readonly="" rows="10" style="background-color: #1b1b1b; color: white; height: auto; overflow: auto; resize: none; width: 55%;">  
 <!-- paste here  -->
 
</textarea><br />
<button id="htmlBtn" onclick="copyhtml()" style="background-color: #4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none;">Copy</button>

</div>
      
      
      
      
  <script>  
    function copyhtml() {
const text = document.querySelector("#htmlText");
const btnText = document.querySelector("#htmlBtn");

text.select();
document.execCommand("copy");
btnText.textContent = "Copied";
setTimeout(function(){
btnText.textContent = "Copy";
}, 5000);
    }
  
    </script>

HTML 2

<link href="style.css" rel="stylesheet"></link>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"></link>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;

}

.download-container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.download-btn{
  position: relative;
  background: #4285F4;
  color: #fff;
  width: 260px;
  padding: 18px 0;
  text-align: center;


  font-size: 1.3em;
  font-weight: 400;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
  transition: background 0.3s ease;
}

.download-btn:hover{
  background: #2874F3;
}

.download-btn i{
  margin-left: 5px;
}

.countdown{
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 20px;
}

.countdown span{
  color: #0693F6;
  font-size: 1.5em;
  font-weight: 800;
}

.pleaseWait-text{
  font-size: 1.1em;
  font-weight: 600;
  display: none;
}

.manualDownload-text{
  font-size: 1.1em;
  font-weight: 600;
  display: none;
}

.manualDownload-link{
  color: #0693F6;
  font-weight: 800;
  text-decoration: none;
}
      
</style>
<label>Type your text</label>
 <div class="control">
<textarea cols="100" id="htmlText" readonly="" rows="20" style="background-color: #1b1b1b; color: white; height: auto; overflow: auto; resize: none; width: 55%;">  
 <!-- paste here  -->
 
</textarea><br />
<button id="htmlBtn" onclick="copyhtml()" style="background-color: #4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none;">Copy</button>

</div>
<label>Type your text</label>
  
<div class="control">
<textarea cols="100" id="htmlText1" readonly="" rows="20" style="background-color: #1b1b1b; color: white; height: auto; overflow: auto; resize: none; width: 55%;">  
 <!-- paste here  -->
 
</textarea><br />


<button id="htmlBtn1" onclick="copyhtml1()" style="background-color: #4caf50; border: none; color: white; cursor: pointer; display: inline-block; font-size: 16px; margin: 4px 2px; padding: 10px 30px; text-align: center; text-decoration: none;">Copy</button>
</div>

    <div class="download-container">
      <a class="download-btn" href="#">Download Files <i class="fas fa-download"></i></a>
      <div class="countdown"></div>
      <div class="pleaseWait-text">Please wait..</div>
      <div class="manualDownload-text">
        If the download didn't start automatically, <a class="manualDownload-link" href="">click here.</a>
      </div>
    </div>

    <script type="text/javascript">
    const downloadBtn = document.querySelector(".download-btn");
    const countdown = document.querySelector(".countdown");
    const pleaseWaitText = document.querySelector(".pleaseWait-text");
    const manualDownloadText = document.querySelector(".manualDownload-text");
    const manualDownloadLink = document.querySelector(".manualDownload-link");
    var timeLeft = 10;

    downloadBtn.addEventListener("click", () => {
      downloadBtn.style.display = "none";
      countdown.innerHTML = "Download will begin automatically in <span>" + timeLeft + "</span> seconds."; //for quick start of countdown

      var downloadTimer = setInterval(function timeCount(){
        timeLeft -= 1;
        countdown.innerHTML = "Download will begin automatically in <span>" + timeLeft + "</span> seconds.";

        if(timeLeft <= 0){
          clearInterval(downloadTimer);
          pleaseWaitText.style.display = "block";
          let download_href = "https://drive.google.com/file/d/1AwiXRd_gpZfXU7moYwxqRhIs5UfsPYPv/view?usp=drivesdk"; //enter the downloadable file link URL here
          window.location.href = download_href;
          manualDownloadLink.href = download_href;

          setTimeout(() => {
            pleaseWaitText.style.display = "none";
            manualDownloadText.style.display = "block";
          }, 4000);
        }
      }, 1000);
    });
    
    function copyhtml() {
const text = document.querySelector("#htmlText");
const btnText = document.querySelector("#htmlBtn");

text.select();
document.execCommand("copy");
btnText.textContent = "Copied";
setTimeout(function(){
btnText.textContent = "Copy";
}, 5000);
}
    
    function copyhtml1() {
const text = document.querySelector("#htmlText1");
const btnText = document.querySelector("#htmlBtn1");

text.select();
document.execCommand("copy");
btnText.textContent = "Copied";
setTimeout(function(){
btnText.textContent = "Copy";
}, 5000);
}
    </script>