add-license-1
Guuq 5 years ago
parent cfe3ec2a90
commit a26ada0b3d

@ -1,14 +1,14 @@
#content { #content {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 94vh; height: 95vh;
top: 55px; top: 55px;
} }
#content div { #content div {
float: left; float: left;
} }
#codeContent { #codeContent {
height: 100%; height: 95vh;
width: 50%; width: 50%;
background-color: #222226; background-color: #222226;
} }
@ -47,3 +47,12 @@
height: 100%; height: 100%;
width: 50%; width: 50%;
} }
@media screen and (min-width:0px) and (max-width:1079px) {
#codeContent {
display: block!important;
width: 100%;
}
iframe {
width: 100%!important;
}
}

@ -17,14 +17,14 @@
<div id="content"> <div id="content">
<div id="codeContent"> <div id="codeContent">
<div> <div>
<button onclick="showCode('html')">HTML</button> <button onclick="showCode('html')" class="langButton" id="htmlButton">HTML</button>
<button onclick="showCode('css')">CSS</button> <button onclick="showCode('css')" class="langButton" id="cssButton">CSS</button>
<button onclick="showCode()">JS</button> <button onclick="showCode()" class="langButton" id="jsButton">JS</button>
<button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button> <button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button>
<button onclick="updateCode('run')" class="options">RUN</button> <button onclick="updateCode('run')" class="options">RUN</button>
<textarea class="input" id="htmlInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea> <textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
<textarea class="input" id="cssInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea> <textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
<textarea class="input" id="jsInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea> <textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
</div> </div>
</div> </div>
<iframe src="" frameborder="0" id="htmlOutput"></iframe> <iframe src="" frameborder="0" id="htmlOutput"></iframe>

@ -1,4 +1,5 @@
var d = document.getElementById.bind(document); var d = document.getElementById.bind(document);
var g = document.querySelector.bind(document);
var autoRunCheck = localStorage.getItem("autoRun") var autoRunCheck = localStorage.getItem("autoRun")
var setCodeHTML = localStorage.getItem("writtenCodeHTML") var setCodeHTML = localStorage.getItem("writtenCodeHTML")
var setCodeCSS = localStorage.getItem("writtenCodeCSS") var setCodeCSS = localStorage.getItem("writtenCodeCSS")
@ -30,16 +31,18 @@ function autoRun() {
} }
function showCode(lang) { function showCode(lang) {
d("cssInput").style = "display: none" $(".langButton").css("background-color", "#3b3c45")
d("jsInput").style = "display: none" $(".langInput").css("display", "none")
d("htmlInput").style = "display: none"
if (lang == "html") { if (lang == "html") {
d("htmlButton").style = "background-color: #27282e;"
d("htmlInput").style = "display: block" d("htmlInput").style = "display: block"
} }
else if (lang == "css") { else if (lang == "css") {
d("cssButton").style = "background-color: #27282e;"
d("cssInput").style = "display: block" d("cssInput").style = "display: block"
} }
else { else {
d("jsButton").style = "background-color: #27282e;"
d("jsInput").style = "display: block" d("jsInput").style = "display: block"
} }
} }
@ -48,15 +51,13 @@ function updateCode(source) {
var autoRunCheck = localStorage.getItem("autoRun") var autoRunCheck = localStorage.getItem("autoRun")
var code = "<style>" + d("cssInput").value + "</style>" + "<script>" + d("jsInput").value + "</script>" + d("htmlInput").value var code = "<style>" + d("cssInput").value + "</style>" + "<script>" + d("jsInput").value + "</script>" + d("htmlInput").value
if (source == "run" || autoRunCheck == "on") { if (source == "run" || autoRunCheck == "on") {
localStorage.setItem("writtenCodeHTML", d("htmlInput").value)
localStorage.setItem("writtenCodeCSS", d("cssInput").value)
localStorage.setItem("writtenCodeJS", d("jsInput").value)
d("htmlOutput").setAttribute('srcdoc', code) d("htmlOutput").setAttribute('srcdoc', code)
} }
localStorage.setItem("writtenCodeHTML", d("htmlInput").value)
localStorage.setItem("writtenCodeCSS", d("cssInput").value)
localStorage.setItem("writtenCodeJS", d("jsInput").value)
} }
emmet.require('textarea').setup({ emmet.require('textarea').setup({
pretty_break: true, // enable formatted line breaks (when inserting
// between opening and closing tag)
use_tab: true // expand abbreviations by Tab key use_tab: true // expand abbreviations by Tab key
}); });