Lookey Expanded

by Victor

HTML

<div class="content">
    <h1>Lookey is simple.</h1>
    <p>It's only looking to do one thing, show you a quick view of things you will probably want know.</p>
    
    <div>
        <img src="http://hhhhold.com/100" alt=""/>
        <p>This is not meant to replace any tools. It's meant to serve when your quickly framing things, when your showing things to clients and when you just want to know the most basic things. Without having to open dev tools!</p>
    </div>
</div>

CSS

.content {
    height:1000px;
    background: #3E4651;
    color:white;
    padding:10px;
    margin:0;
}
.content h1 {
    font-size:60px;
    font-weight:bolder;
    text-transform: uppercase;
}

JavaScript

//make the element 
var lookey = '<div id="lookey"><div class="lookey-title"><span class="fontawesome-eye-open"></span></div><span class="lookey-windowAttr"> Window <div><label><span class="fontawesome-resize-horizontal"></span></label><p id="windowWidth"></p><label><span class="fontawesome-resize-vertical"></span></label><p id="windowHeight"></p></div></span><span class="lookey-bodyAttr"> Body <div><label><span class="fontawesome-resize-horizontal"></span></label><p id="bodyWidth"></p><label><span class="fontawesome-resize-vertical"></span></label><p id="bodyHeight"></p></div></span><span class="lookey-scrollAttr"> Scroll <div><label><span class="fontawesome-download"></span></label><p id="scrollAmnt"></p></div></span><span class="lookey-scriptsAttr"><div><a href="#">Scripts <span class="fontawesome-dashboard"></span></a></div><div class="scriptsPanel"><span class="scriptsCloseButton fontawesome-double-angle-down"></span></div></span></div>';
$('body').append(lookey);
//set styles brute style
var allStyles = '@import url(http://weloveiconfonts.com/api/?family=fontawesome);[class*=fontawesome-]:before{font-family:FontAwesome,sans-serif;padding:0 3px}*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#lookey{width:100%;background:#e3e3e3;padding:3px;position:fixed;bottom:0;left:0;border-top:1px solid #999;box-shadow:inset 1px 1px 0 white,inset 0 -1px 0 #d3d3d3}.lookey-title{color:#999;text-shadow:1px 1px 0 #fff}#lookey div{display:inline-block;height:30px;line-height:30px;padding:0 4px}#lookey div p{display:inline}.lookey-bodyAttr,.lookey-scriptsAttr,.lookey-scrollAttr,.lookey-windowAttr{background:#fff;color:#333!important;display:inline-block;padding:0 4px;border-radius:7px;border:1px solid #999;box-shadow:1px 1px 0 #fff}.scriptsPanel{position:fixed;padding:5px;bottom:0;left:0;width:100%;height:auto!important;background:#222;border-radius:10px 10px 0 0;line-height:1;display:none;min-height:40px}.scriptsPanel...