Downloading HTML Files - Base64

by Matheus Stein

HTML

<div class="container">

  <p class="title">
    Base64 HTML Downloader
  </p>

  <p class="label">
    File Name:
  </p>
  
  <input type="text" id="title" onChange="changedT()" onKeyUp="changedT()" onPaste="changedT()" value="index"/>

  <p class="label">
    Paste HTML here:
  </p>
  
  <textarea id="message" onChange="changed()" onKeyUp="changed()" onPaste="changed()"></textarea>

  <span onClick="alertDownload()">
    <a href="" download="index.html" id="button">Download</a>
  </span>

</div>

<span id="copy" class="copy">Download Started!</span>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700');
body {
  background: #20262e;
  font-family: 'Ubuntu Mono', monospace;
  color: #beccdd;
  font-size: 14px;
  margin: 0
}

.container {
  width: 400px;
  margin-left: calc( 50vw - 230px);
  margin-top: 60px;
  margin-bottom: 60px;
  background: #292f36;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.3);
}

.title {font-weight:bold}

textarea, input {
  width: 376px;
  border: 0;
  background: #494d54;
  resize: none;
  color: #beccdd;
  padding: 12px;
  border-radius: 4px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2)
}

textarea {min-height: 84px;}

#button {
  display: inline-block;
  padding: 12px 24px;
  background: #30cbff;
  border-radius: 2px;
  color: #20262e;
  font-weight: bold;
  margin-right: 8px;
  margin-top: 24px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration:none;
}

.copy {
  position: fixed;
  top: 16px;
  left: 16px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  transition: all 0.3s;
  opacity: 0;
}

.on {
  opacity: 1;
}

JavaScript

function changed() {
document.getElementById('button').href="data:application/octet-stream,"+encodeURIComponent(document.getElementById('message').value);
}

function changedT() {
document.getElementById('button').download=document.getElementById('title').value+".html";
}

function alertDownload() {
  document.getElementById('copy').className = "copy on";
  setTimeout(function() { 
    document.getElementById('copy').className = "copy";
  }, 3000);
}