nakome
4/4/2014 - 1:25 PM
Simple theme panel style beta.
Simple theme panel style beta.
body{
position:absolute;
margin:0;
padding:0;
line-height:1.5em;
height:100%;
min-height:900px;
}
/* = icons
----------------------*/
[data-icon]:before{
font-family:'FontAwesome';
font-size:normal;
font-style: normal;
font-weight: 200;
content:attr(data-icon);
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
figure{
margin:0;
}
img{
display:block;
width:100%;
}
/* = Theme Panel
----------------------*/
.panel{
position:absolute;
top:0;
left:-250px;
width:250px;
height:auto;
margin:0;
padding:0;
display:block;
font-family: 'Montserrat', sans-serif;
font-size:13px;
font-weight:400;
line-height:1.2em;
background:#181818;
color: #9E9E9E;
-webkit-border-radius:0 0 4px 0;
-moz-border-radius:0 0 4px 0;
border-radius:0 0 4px 0;
-webkit-box-shadow: -6px 0px 7px #353535;
-moz-box-shadow: -6px 0px 7px #353535;
box-shadow: -6px 0px 7px #353535;
-webkit-transition:left 0.5s ease;
-moz-transition:left 0.5s ease;
-o-transition:left 0.5s ease;
transition:left 0.5s ease;
}
.show_the_panel{
left:0 !important;
-webkit-transition:left 0.5s ease;
-moz-transition:left 0.5s ease;
-o-transition:left 0.5s ease;
transition:left 0.5s ease;
}
.showOrHide{
position:absolute;
top:0;
right:-30px;
background:#181818;
margin:0;
padding:5px;
display:inline-block;
text-decoration:none;
color:#999;
border:0;
-webkit-border-radius:0 0 4px 0;
-moz-border-radius:0 0 4px 0;
border-radius:0 0 4px 0;
font-size:21px;
font-family:monospace;
font-weight:bold;
}
.showOrHide:hover{
color:#118315;
}
.html{
float:right;
}
.show{
display:inline-block;
padding:5px 10px;
margin:5px;
text-decoration:none;
background:#111;
border:1px solid #222;
color:#808080;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
clear:both;
text-align:left;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.show:hover{
background: #f55;
border:1px solid #252525;
color:#fff;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.panel_inner{
display:block;
margin:5px;
padding:5px;
}
.info {
display: block;
text-align: left;
border-bottom: 1px solid #4482DF;
margin-top: 5px;
margin-bottom: 5px;
padding: 7px;
background: #0F0F0F;
color: #FFF !important;
text-decoration: none;
-webkit-transition:all 0.8s ease;
-moz-transition:all 0.8s ease;
-o-transition:all 0.8s ease;
transition:all 0.8s ease;
}
.info:hover{
background:#272727;
color: #FFF;
}
.info [data-icon]{
float:right;
}
.collapse {
background: #0D0D0E;
border: 1px solid #000;
display: none;
padding: 12px;
margin: 0;
overflow: hidden;
}
.collapse-in{
display:block !important;
}
.addHtml {
display: inline-block;
padding: 5px;
margin: 2px;
text-decoration: none;
background: -webkit-radial-gradient(top, ellipse, #333 0%, #000 100%);
background: radial-gradient(ellipse at top, #333 0%, #000 100%);
border: 1px solid #222;
color: #FFF;
border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:all 0.8s ease;
-moz-transition:all 0.8s ease;
-o-transition:all 0.8s ease;
transition:all 0.8s ease;
}
.addHtml:hover{
background: -webkit-radial-gradient(top, ellipse, #333 0%, #222 100%);
background: radial-gradient(ellipse at top, #333 0%, #222 100%);
border: 1px solid #222;
color: #fdfdfd;
-webkit-transition:all 0.8s ease;
-moz-transition:all 0.8s ease;
-o-transition:all 0.8s ease;
transition:all 0.8s ease;
}
.block{
display: block;
margin: 5px 0;
padding: 0;
width: 100%;
}
.inlineBlock{
display:inline-block;
margin:0;
padding:0;
width: 40%;
}
.pd{
text-align:left;
padding:0;
margin:0;
display:block;
width:100%;
}
input[type="range"]{
margin-top:10px;
margin-bottom:16px;
cursor:pointer;
-webkit-appearance: none !important;
background:#000;
width: 75%;
height:2px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
border: 5px double #000;
background:#444;
height:3px;
width:5px;
padding:3px;
border-radius:100%;
-webkit-border-radius:100%;
}
input[type="text"]{
background: #222;
padding: 5px;
border: none;
text-align:center;
}
input[type="text"]:hover{
cursor:pointer;
}
.custom-select select{
border: none;
padding: 5px;
background: #252525;
color: #FFF;
border-bottom: 1px solid #148CCD;
margin-bottom: 10px;
outline: 1px solid #252525;
-webkit-transition: all 0.8s ease;
transition: all 0.8s ease;
width: 100%;
}
.custom-select select:hover{
outline:1px solid #444;
cursor:pointer;
-webkit-transition:all 0.8s ease;
-moz-transition:all 0.8s ease;
-o-transition:all 0.8s ease;
transition:all 0.8s ease;
}
/* = Layout
----------------------*/
.wrapper{
margin-left:30px;
margin-right:30px;
padding:0;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.with_panel{
margin-left:290px !important;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.wrapper_inner{
width:90%;
margin:5px auto;
padding:30px;
display:block;
word-break:break-all;
}
.theCode{
position:fixed;
top:0;
left:-5000px;
right:0;
bottom:0;
width:100%;
height:100%;
background:#2C2C2C;
background:rgba(0, 0, 0, 0.96);
margin:0;
padding:0;
-webkit-transition:left 0.8s ease;
-moz-transition:left 0.8s ease;
-o-transition:left 0.8s ease;
transition:left 0.8s ease;
}
.show_the_code{
left:0;
-webkit-transition:left 0.8s ease;
-moz-transition:left 0.8s ease;
-o-transition:left 0.8s ease;
transition:left 0.8s ease;
}
.theCode .cl{
position:absolute;
top:10px;
right:10px;
text-decoration:none;
font-family:cursive;
font-size:30px;
color:#fff;
-webkit-transition:color 0.5s;
-moz-transition:color 0.5s;
-o-transition:color 0.5s;
transition:color 0.5s;
}
.theCode .cl:hover{
color:#ddd;
-webkit-transition:color 0.5s;
-moz-transition:color 0.5s;
-o-transition:color 0.5s;
transition:color 0.5s;
}
.theCode pre{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family:monospace;
font-size:13px;
font-weight:400;
line-height:1.2em;
white-space: pre-wrap;
word-wrap: break-word;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 35px;
display: block;
width: 60%;
background: #111;
color: #eee;
overflow: auto;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.time {
display: block;
width: 104.5%;
margin: 5px 0 -10px -10px;
padding: 5px;
background: #252525;
color: #46AED6;
text-align:center;
-webkit-border-radius:0 0 4px 0;
-moz-border-radius:0 0 4px 0;
border-radius:0 0 4px 0;
}var themePanel = (function() {
'use strict';
return {
qS:function(e){
//console.log('qS = ' + e);
return document.querySelector(e);
},
dataJs:function(d){
//console.log('data-js = ' + d);
return this.qS('[data-js="'+d+'"]');
},
dataOut:function(o){
//console.log('data-out = ' + o);
return this.qS('[data-out="'+o+'"]');
},
// Ready
readyForTheWar: function(){
this.setFn();
this.otherFunctions();
this.theCode('.theCode pre');
this.ajax();
this.setTmpl();
},
// Show or hide options
collapse:function(i){
var self = this;
this.dataJs('collapse-'+i).onclick = function(){
self.dataOut('collapse-'+i).classList.toggle('collapse-in');
};
},
// links and collapse loops
setFn: function(){
var self = this;
var arr = ['fontSize','headerfontSize',
'linkColor','linkHoverColor',
'headerColor','masterColor',
'backgroundColor','blockquoteColor'];
// loop array
for (var i = 0; i < arr.length; i++) {
self.getFn(arr[i],arr[i]+'Out');
}
// loop collapse
for (var j = 1; j < 5; j++) {
self.collapse(j);
}
},
// get Colors and show pre code
getFn:function(i,o){
var self = this;
this.dataJs(i).onchange = function(){
self.theCode('.theCode pre');
if(o === 'headerfontSizeOut' || o === 'fontSizeOut'){
self.dataOut(o).innerHTML = self.dataJs(i).value;
}else{
self.dataOut(o).style.color = self.dataJs(i).value;
}
};
},
// Show the code in pre tag
theCode: function(obj){
var self = this;
// e = enter key s = space key
var e = String.fromCharCode(13),
s = String.fromCharCode(32);
// var css
var font_size = this.dataJs('fontSize').value,
headerfont_size = this.dataJs('headerfontSize').value,
masterFont_family = this.dataJs('masterFontFamily').value,
headerFont_family = this.dataJs('headerFontFamily').value,
link_color = this.dataJs('linkColor').value,
linkHover_color = this.dataJs('linkHoverColor').value,
header_color = this.dataJs('headerColor').value,
master_color = this.dataJs('masterColor').value,
background_color = this.dataJs('backgroundColor').value,
blockquote_color = this.dataJs('blockquoteColor').value;
// Beauty css template
var css = 'body{'+e+
s + 'background:'+background_color+';'+e+
s + 'color:'+master_color+';'+e+
s + 'font-size:'+font_size+'px;'+e+
s + 'font-family:'+masterFont_family+';'+e+
'}'+e+
'a{color:'+link_color+';}'+e+
'a:hover{color:'+linkHover_color+';}'+e+e+
'h1,h2,h3,h4,h5,h6{'+e+
s + 'font-family:'+headerFont_family+';'+e+
s + 'color:'+header_color+';'+e+
'}'+e+
'h1{font-size:'+
parseInt(headerfont_size*1)+'px;}'+e+
'h2{font-size:'+
parseInt(headerfont_size*0.8)+'px;}'+e+
'h3{font-size:'+
parseInt(headerfont_size*0.7)+'px;}'+e+
'h4{font-size:'+
parseInt(headerfont_size*0.6)+'px;}'+e+
'h5{font-size:'+
parseInt(headerfont_size*0.5)+'px;}'+e+
'h6{font-size:'+
parseInt(headerfont_size*0.4)+'px;}'+e+
'blockquote{'+e+
s+'border-left:5px solid '+blockquote_color+';'+e+
s+'padding-left:15px;'+e+
'}';
// show code in pre tag
this.qS('#style').innerHTML = css;
},
otherFunctions:function(){
// vars
var self = this,
wrapper = self.qS('.wrapper'),
wrapper_inner = self.qS('.wrapper_inner'),
panel = self.qS('.panel'),
theCode = self.qS('.theCode'),
pre = self.qS('.theCode pre'),
style = self.qS('#style');
// Show or Hide panel
this.qS('.showOrHide').onclick = function(e){
e.preventDefault();
panel.classList.toggle('show_the_panel');
// toggle margin right
wrapper.classList.toggle('with_panel');
};
// Show css
this.qS('.css').onclick = function(e){
e.preventDefault();
theCode.classList.add('show_the_code');
pre.innerHTML = style.textContent;
document.body.style.overflow = 'hidden';
};
// Show htmls
this.qS('.html').onclick = function(e){
e.preventDefault();
theCode.classList.add('show_the_code');
pre.textContent = wrapper_inner.innerHTML;
document.body.style.overflow = 'hidden';
};
// Close css info
this.qS('.cl').onclick = function(e){
e.preventDefault();
theCode.classList.remove('show_the_code');
document.body.style.overflow = 'auto';
};
// Clear html data
this.dataJs('clear').onclick = function(e){
e.preventDefault();
wrapper_inner.innerHTML = '';
};
// Show Time
this.time();
var clock = setInterval(function () {
self.time();
}, 1000);
},
// Get time
time: function() {
var currentTime = new Date();
var currentHours = currentTime.getHours();
var currentMinutes = currentTime.getMinutes();
var currentSeconds = currentTime.getSeconds();
currentMinutes = (currentMinutes < 10 ? '0' : '') + currentMinutes;
currentSeconds = (currentSeconds < 10 ? '0' : '') + currentSeconds;
var timeOfDay = (currentHours > 12) ? 'AM' : 'PM';
currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
currentHours = (currentHours === 0) ? 12 : currentHours;
var currentTimeString = currentHours + ':' + currentMinutes + ':' + currentSeconds + ' ' + timeOfDay;
this.qS('.time').innerHTML = currentTimeString;
},
// get fonts of
ajax: function(){
var self = this,
data_file = 'http://codepen.io/nakome/pen/DnEvr.css',
hp = new XMLHttpRequest();
hp = new XMLHttpRequest();
hp.onreadystatechange = function(){
if (hp.readyState == 4 ){
// Javascript function JSON.parse to parse JSON data
var obj = JSON.parse(hp.responseText);
var html = '';
for (var i = 0; i < obj.length; i++) {
// template html
html += '<option value="'+
obj[i].value+'">'+
obj[i].title+'</option>';
}
var master = self.dataJs('masterFontFamily'),
headers = self.dataJs('headerFontFamily');
// append to select tag
master.innerHTML = html;
headers.innerHTML = html;
// Master font family onchange paste into pre code
master.onchange = function(){
self.theCode('.theCode pre');
};
// Master font family onchange paste into pre code
headers.onchange = function(){
self.theCode('.theCode pre');
};
}
};
hp.open("GET", data_file, true);
hp.send();
},
setTmpl:function(){
var self = this,arr = [
'h1','h2','h3','h4',
'h5','h6','p','p+',
'img','figure','ul',
'ol','blq','a','dl',
'nav','hr'];
// loop arr
for (var i = 0; i < arr.length; i++) {
self.getTmpl(arr[i]);
}
},
getTmpl: function(obj){
var self = this;
this.dataJs(obj).onclick = function(e){
e.preventDefault();
var wrapper_inner = self.qS('.wrapper_inner');
wrapper_inner.innerHTML += self.tmpl[obj];
};
},
tmpl:{
'h1':'<h1>This is a header h1</h1>',
'h2':'<h2>This is a header h2</h2>',
'h3':'<h3>This is a header h3</h3>',
'h4':'<h4>This is a header h4</h4>',
'h5':'<h5>This is a header h5</h5>',
'h6':'<h6>This is a header h6</h6>',
'p':'<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>',
'p+':'<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>',
'figure':'<figure><img src="http://lorempixel.com/400/200/"/><figcaption>Example image</figcaption></figure>',
'img':'<img src="http://lorempixel.com/400/200/"/>',
'ul':'<ul><li>Unordened list item</li><li>Unordened list item</li><li>Unordened list item</li><li>Unordened list item</li><li>Unordened list item</li><li>Unordened list item</li></ul>',
'ol':'<ol><li>Unordened list item</li><li>Unordened list item</li><li>Unordened list item</li><li>Unordened list item</li><li>Unordened list item</li><li>Unordened list item</li></ol>',
'blq':'<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem repellendus placeat ipsam esse nesciunt laudantium soluta est non eos nisi laboriosam alias praesentium adipisci nemo nihil cumque officiis omnis ut.</p></blockquote>',
'a':'<a href="#" title="example link">Example link</a>',
'dl':'<dl><dt>Definition list</dt><dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd><dt>Lorem ipsum dolor sit amet</dt><dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd </dl>',
'nav':'<nav><ul><li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li> <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li> <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li><li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li><li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li> </ul></nav>',
'hr':'<hr/>'
}
};
})();
// Start functions
themePanel.readyForTheWar();
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- font panel -->
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<style id="style"></style>
<!-- panel -->
<div id="panel" class="panel">
<!-- show css -->
<a href="#" class="show css">CSS
<span data-icon=""></span>
</a>
<!-- show html -->
<a href="#" class="show html">HTML
<span data-icon=""></span>
</a>
<!-- show or hide -->
<a href="#" class="showOrHide">
<span data-icon=""></span>
</a>
<!-- panel inner -->
<div class="panel_inner">
<form action="color_form" method="get" class="themepanel">
<a href="#" class="info" data-js="collapse-1">
Font Size
<span data-icon=""></span>
</a>
<!-- Font size body -->
<div class="collapse collapse-in" data-out="collapse-1">
<div class="pd">
<label class="block">Body</label>
<input class="inlineBlock"
type="range" min="1" max="30" value="13"
data-js="fontSize">
<span data-out="fontSizeOut">13</span>px
</div>
<!-- Font size header -->
<div class="pd">
<label class="block">Headers</label>
<input class="inlineBlock"
type="range" min="5" max="50" value="20"
data-js="headerfontSize">
<span data-out="headerfontSizeOut">20</span>px
</div>
</div>
<a href="#" class="info" data-js="collapse-2">
Font Family
<span data-icon=""></span>
</a>
<!-- Header font Family -->
<div class="collapse" data-out="collapse-2">
<div class="pd">
<span class="block"> Headers</span>
<label class="custom-select">
<select data-js="headerFontFamily"></select>
</label>
</div>
<!-- Master font Family -->
<div class="pd">
<span class="block">Body</span>
<label class="custom-select">
<select data-js="masterFontFamily"></select>
</label>
</div>
</div>
<a href="#" class="info" data-js="collapse-3">
Colors
<span data-icon=""></span>
</a>
<!-- Link color -->
<div class="collapse" data-out="collapse-3">
<p><small>
Note: Write color and press Enter
</small></p>
<div class="pd">
<label class="inlineBlock" data-out="linkColorOut">Link</label>
<input class="inlineBlock" type="text" data-js="linkColor" value="#31727d">
</div>
<!-- Link hover color -->
<div class="pd">
<label class="inlineBlock" data-out="linkHoverColorOut">Link:hover</label>
<input class="inlineBlock" type="text" data-js="linkHoverColor" value="#db8d24">
</div>
<!-- Headers color -->
<div class="pd">
<label class="inlineBlock" data-out="headerColorOut">Headers</label>
<input class="inlineBlock" type="text" data-js="headerColor" value="#ffffff">
</div>
<!-- Body color -->
<div class="pd">
<label class="inlineBlock" data-out="masterColorOut">Body</label>
<input class="inlineBlock" type="text" data-js="masterColor" value="#eaeaea">
</div>
<!-- Body background color -->
<div class="pd">
<label class="inlineBlock" data-out="backgroundColorOut">Background</label>
<input class="inlineBlock" type="text" data-js="backgroundColor" value="#1588cc">
</div>
<!-- blockquote color -->
<div class="pd">
<label class="inlineBlock" data-out="blockquoteColorOut">Blockquote</label>
<input class="inlineBlock" type="text" data-js="blockquoteColor" value="#fdfdfd">
</div>
</div>
<a href="#" class="info" data-js="collapse-4">
Add More Html
<span data-icon=""></span>
</a>
<!-- Font size body -->
<div class="collapse" data-out="collapse-4">
<div class="pd">
<a href="#" class="addHtml" data-js="h1">h1</a>
<a href="#" class="addHtml" data-js="h2">h2</a>
<a href="#" class="addHtml" data-js="h3">h3</a>
<a href="#" class="addHtml" data-js="h4">h4</a>
<a href="#" class="addHtml" data-js="h5">h5</a>
<a href="#" class="addHtml" data-js="h6">h6</a>
<a href="#" class="addHtml" data-js="p">p</a>
<a href="#" class="addHtml" data-js="p+">p+</a>
<a href="#" class="addHtml" data-js="img">img</a>
<a href="#" class="addHtml" data-js="ul">ul</a>
<a href="#" class="addHtml" data-js="ol">ol</a>
<a href="#" class="addHtml" data-js="blq">blq</a>
<a href="#" class="addHtml" data-js="a">a</a>
<a href="#" class="addHtml" data-js="dl">dl</a>
<a href="#" class="addHtml" data-js="nav">nav</a>
<a href="#" class="addHtml" data-js="hr">hr</a>
<a href="#" class="addHtml" data-js="figure">figure</a>
<a href="#" class="addHtml" data-js="clear">
<span data-icon=""></span>
</a>
</div>
</div>
</form>
<div class="time"></div>
</div><!-- / panel inner -->
</div><!-- / panel -->
<!-- Main content -->
<div class="wrapper">
<!-- Main content inner -->
<div class="wrapper_inner">
<small class="show"><b>Note: </b>
You can see here Font-family names
<a href="http://codepen.io/nakome/pen/DnEvr"> Go</a></small>
<h1>Theme panel lab</h1>
<p><strong>Use Add more Html section to add more data</strong></p>
</div><!-- / Main content inner -->
</div><!-- / Main content -->
<!-- The code lightbox -->
<div class="theCode">
<a href="#" class="cl">X</a>
<pre></pre>
</div><!-- / The code lightbox -->
Simple theme panel style beta.
Made with Javascript and css3 simple.
Update 05/04/2014 : Now get json data for fonts and get time. Separate in sections and add html section.
A Pen by Moncho Varela on CodePen.
Simple theme panel style beta.
Made with Javascript and css3 simple.
Update 05/04/2014 : Now get json data for fonts and get time. Separate in sections and add html section.
A Pen by Moncho Varela on CodePen.