jsBake beta

Online html editor. Planned to be css, javascript too! :D

by transparent

HTML

<div id="tools"><span id="logo"><img src="http://fe.gd/1Ee"/></span>
    <button type="submit" id="run">RUN</button>
</div>
<div class="label bottom">
  <p>HTML</p>
<div id="html" contenteditable="false">
</div></div>

<div class="label bottom">
  <p>CSS</p>
<div id="css" contenteditable="false">
</div></div>

<div class="label bottom">
  <p>Javascript</p>
<div id="javascript" contenteditable="false">
</div></div>
    <div id="res">This is the result of your code.</div>

CSS

#res{
padding:10px;
border:5px solid #ABADB3;
margin:0px;
height:100px;
width:400px;    
}
#html{
padding:10px;
border:5px solid #ABADB3;
margin:0px;
height:100px;
width:400px;
max-width:400px;
border-bottom:none;
overflow:scroll;    
}
#css{
padding:10px;
border:5px solid #ABADB3;
margin:0px;
height:100px;
width:400px;
max-width:400px;
border-bottom:none;
overflow:scroll;    
}
#javascript{
padding:10px;
border:5px solid #ABADB3;
margin:0px;
height:100px;
width:400px;
max-width:400px;
border-bottom:none;  
overflow:scroll;    
}

#tools{
border:5px solid #ABADB3;
border-bottom:none;    
padding:10px;
height:30px;
width:400px;
background-color:#454;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#454), to(#326032));
  
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #326032, #454);
  
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #326032, #454);
  
  /* IE 10 */
  background: -ms-linear-gradient(top, #326032, #454);
  
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #326032, #454);
}
#tools{
border:5px solid #ABADB3;
border-bottom:none;    
padding:10px;
height:30px;
width:400px;
background-color:#454;
}

#tools{
border:5px solid #ABADB3;
border-bottom:none;    
padding:10px;
height:30px;
width:400px;
background-color:#454;
}
#html textarea{
    border: none;
    resize: none
}
#html textarea:focus{
      outline:0;
      outline:none;
    -moz-appearance:none;
}
#tools button#run{
    border: #161e16;
    padding:5px;
    border-style:solid;
    border-width:2px;
    background: url(http://fe.gd/1Ea) no-repeat 5% 35% #3a7c3a;
    padding-left: 25px;
    color:#D5FFD5;
    font-weight: bold;
}
span[class='sh_function']{
color:#ff0000;
}
/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
...

JavaScript

$(document).ready(function(){
$('#run').click(function() {
    scriptLines = '\<script\>'+$('#javascript').text()+'\<\/script\>';
    $('#res').html(scriptLines + $('#html').text());
});

$('#html').click(function() {
  $('#html').attr('contenteditable', 'true');
}); 
$('#html').focusout(function() {
  $('#html').attr('contenteditable', 'false');
});

$('#css').click(function() {
  $('#css').attr('contenteditable', 'true');
}); 
$('#css').focusout(function() {
  $('#css').attr('contenteditable', 'false');
});

$('#javascript').click(function() {
  $('#javascript').attr('contenteditable', 'true');
}); 
$('#javascript').focusout(function() {
  $('#javascript').attr('contenteditable', 'false');
});


$('#html').live('focus', function() {
  before = $(this).html();
}).live('blur keyup paste', function() { 
  if (before != $(this).html()) { $(this).trigger('change'); }
});
/*
///////////////////////////////////////////
THIS IS MY ATTEMPT AT A SYNTAX HIGHLIGHTER.
///////////////////////////////////////////
    
$('#html').live('change', function() {
str = $('#html').html();
re = new RegExp('function','i');
found = str.match(re);
console.log("found - " + found);
if(re.test(str) ==true){
    $('#html').html(str.replace(re, "<span id='sh_function'>function</span>"));
} else {
    $('#html').wrap("");    
}   
});
*/
});