nakome
4/27/2014 - 5:47 PM

A Pen by Moncho Varela.

A Pen by Moncho Varela.

style.css
content_copyfile_download

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
/*  = scroll
----------------------------*/
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar {
  background:#ecf0f1;
}
::-webkit-scrollbar-thumb {
  background: #ddd;
}

/*  = body
----------------------------*/
html,body{
  position:relative;
  height:100%;
}
body{
  background:#fff; 
  background-size:cover;
  color:#777;
  overflow:auto;
  font-family: 'Oswald', 'sans-serif';
  font-weight: 400;
}
.wrapper{
  display: block;
  margin: 5px auto;
  width: 90%;
}
.btn{
  margin:5px;
  color: #FFF;
  display: inline-block;
  background:#3498db;
  border: 1px solid #2980b9;
  padding:0.5em 1em;
  text-align: center;
  text-decoration:none;
  outline: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: 'sans-serif';
  font-weight: 300;
  font-size: 18px;
  border-radius: 2px;
  transition:all 0.2s ease;
}
.btn:hover{
  border-color: #eee;
  background: #C0392B;
  color: #eee;
  transition:all 0.2s ease;
}

.pre {
  overflow: auto;
  width:100%;
  height:100px;
  margin: auto;
  margin-bottom:16px;
  display: block;
  border: 5px solid #eee;
  background:#fdfdfd;
  color:#2980b9;
  font-size:13px;
  font-family: cursive;
  font-weight: 300;
  word-break: break-all; 
  word-wrap: break-word;
  white-space: pre;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  white-space: pre\9; 
}

#tx{
  height: 200px;
}
script.js
content_copyfile_download
var showDemos = (function(){
  'use strict';
  return {
    run: function(){
      this.events();
    },
    _qS: function(el){
      return document.querySelector(el);
    },
    enc: function(el){
      return 'data:text/html;charset=utf-8,<body>' + encodeURIComponent(el.value);
    },
    dec: function(el){    
      return decodeURIComponent(
        el.value.replace('data:text/html;charset=utf-8,',''));
    },
    events: function(){
      
      var self = this,
          tx = this._qS('#tx'),
          p_uri = this._qS('#p_uri'),
          convert = this._qS('#c'),
          preview = this._qS('.preview') ;

      convert.addEventListener('click',function(){
        p_uri.innerHTML = self.enc(tx);
        preview.innerHTML = '<a href="'+self.enc(tx)+'" class="btn" target="blank">Preview</a>'+
        '- Or -'+'<a href="'+self.enc(tx)+'" class="btn" download>Download</a>';
      },false);

      tx.addEventListener('keydown',function(){
        p_uri.innerHTML = '';
      },false);
    }
  };
})();
showDemos.run();
index.html
content_copyfile_download
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

  
<div class="wrapper">
  <h1>Show Html demos with data uri</h1>
  <textarea id="tx" class="pre">
    <!-- demo -->
    <h1 class="title">Click Me</h1>
    <style type="text/css" rel="stylesheet">
      h1{
       color:blue;
      }
      .demo{
         color:orange;
         -webkit-animation:demo 1s infinite ease;
      }
      @-webkit-keyframes demo{
             50%{color:orange,font-size:28px;text-shadow:0 2px 3px black}
      }
    </style>
    <script type="text/javascript" rel="javascript">
      window.onload = function(){
      var h = document.querySelector('.title');
      h.onclick = function(){
         h.classList.add('demo');
      };};
    </script>
  
  </textarea>
  <a href="#" id="c" class="btn">Convert</a>
  <pre id="p_uri" class="pre"></pre>
  <span class="preview"></span>
</div>
Html-demos-with-data-uri.markdown
content_copyfile_download
  • Rendered
  • Source

Html demos with data uri

A Pen by Moncho Varela on CodePen.

License.