CodePen Embed - Codepen editor

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Desktop Codepen editor</title>
  <script src="https://kit.fontawesome.com/1144049f5f.js" crossorigin="anonymous"></script>
</head>

<body>
  <main>
    <header>
      <div class="codepenIcon">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <section class="authorAndTitle">
        <div style="display: flex; align-items: stretch">
          <input type="text" value="Untitled" />
          <div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <a class="authorHere">TidyCoder</a>
      </section>
      <section class="buttonsHere">
        <button><i class="fa-solid fa-heart"></i></button>
        <button>
          <div><i class="fa-solid fa-cloud"></i>save</div>
          <div class="openHere openIsHereNow"></div>
        </button>
        <button title="Pen Settings"><i class="fa-solid fa-gear fa-lg"></i>Settings</button>
        <button style="flex-direction: column; gap: 1px; justify-content: center;">
          <div style="height: 5px; width: 17px; display: flex; gap: 1px;">
            <div style="border-radius: 1px; flex-grow: 1; background: white;"></div>
            <div style="border-radius: 1px; flex-grow: 1; background: white;"></div>
            <div style="border-radius: 1px; flex-grow: 1; background: white;"></div>
          </div>
          <div style="border-radius: 1px; height: 11px; width: 17px; background: white;"></div>
        </button>
        <button>
          <div><i class="fa-solid fa-thumbtack"></i></div>
          <div class="openHere openIsHereNow"></div>
        </button>
        <img src="https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0&width=80&height=80" class="avatarHere" alt="" />
      </section>
    </header>
    <div class="codingHere">
      <div class="hereCodeHere">
        <div class="hereCodeHereZ">
          <div>
            <div class="htmlHere"></div>
            HTML
          </div>
          <section>
            <button><i class="fa-solid fa-gear fa-xs"></i></button>
            <button class="openHere"></button>
          </section>
        </div>
        <div class="textareaHere">
          <textarea class="numbersHereNow" cols="5" readonly></textarea>
          <textarea class="codeTextarea" id="htmlInput" nowrap="true"></textarea>
        </div>
      </div>
      <hr class="hrHereZ" />
      <div class="hereCodeHere">
        <div class="hereCodeHereZ">
          <div>
            <div class="cssHere">
              <div></div>
            </div>
            CSS
          </div>
          <section>
            <button><i class="fa-solid fa-gear fa-xs"></i></button>
            <button class="openHere"></button>
          </section>
        </div>
        <div class="textareaHere">
          <textarea class="numbersHereNow" cols="5" readonly></textarea>
          <textarea class="codeTextarea" id="cssInput"></textarea>
        </div>
      </div>
      <hr class="hrHereZ" />
      <div class="hereCodeHere">
        <div class="hereCodeHereZ">
          <div>
            <div class="jsHere"></div>
            JS
          </div>
          <section>
            <button><i class="fa-solid fa-gear fa-xs"></i></button>
            <button class="openHere"></button>
          </section>
        </div>
        <div class="textareaHere">
          <textarea class="numbersHereNow" cols="5" readonly></textarea>
          <textarea class="codeTextarea" id="jsInput"></textarea>
        </div>
      </div>
    </div>
    <hr class="hrHere" draggable="true" onfocus="this.style.background='red'" onblur="this.style.background='blue'" />
    <iframe class="previewHere"></iframe>
  </main>
</body>

</html>

html, body{
  padding: 0;
  margin: 0;
  font-family: Lato, sans-serif;
  background: black;
}
main{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #060606;
  padding: 11px;
  margin: 0;
  gap: 7px;
}
.buttonsHere{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.buttonsHere > *, .hereCodeHereZ button{
  cursor: pointer;
}
.buttonsHere > *{
  border-radius: 4px;
}
.avatarHere{
  height: 44px;
}
.buttonsHere button, .hereCodeHereZ button{
  position: relative;
  background: #444857;
  font-size: 15px;
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
}
.buttonsHere button{
  gap: 5px;
  padding: 10px 16px;
}
.codepenIcon{
  height: 36px;
  width: 36px;
  scale: 1.1;
  position: relative;
}
.codepenIcon div:nth-child(1), .codepenIcon div:nth-child(2){
  border: 4px solid white;
  border-radius: 2px;
  transform: translate(-50%, 0%) rotate3d(1, 0, 0, 45deg) rotate(45deg);
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
}
.codepenIcon div:nth-child(1){
  top: 0;
}
.codepenIcon div:nth-child(2){
  bottom: 0;
}
.codepenIcon div:nth-child(4), .codepenIcon div:nth-child(3), .codepenIcon div:nth-child(5), .codepenIcon div:nth-child(6){
  border-radius: 2px;
  width: 3px;
  height: 12px;
  background: white;
  position: absolute;
}
.codepenIcon div:nth-child(4), .codepenIcon div:nth-child(3){
  top: 12px;
}
.codepenIcon div:nth-child(3){
  right: 1px;
}
.codepenIcon div:nth-child(4){
  left: 1px;
}
.codepenIcon div:nth-child(5), .codepenIcon div:nth-child(6){
  left: 16px;
}
.codepenIcon div:nth-child(5){
  bottom: 3px;
}
.codepenIcon div:nth-child(6){
  top: 2px;
}
.authorHere{
  cursor: pointer;
  font-size: 14px;
  color: rgb(155, 157, 173);
}
.authorHere:hover{
  color: white;
}
.buttonsHere button:hover, .hereCodeHereZ button:hover{
  background: #5a5f73;
}
.buttonsHere button:nth-child(2) i{
  transform: rotateY(180deg);
  position: relative;
  bottom: 1px;
}
header input{
  all: unset;
  color: #eee;
  display: block;
  font-size: 17px;
}
.authorAndTitle{
  flex-grow: 1;
}
body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}
.codingHere{
  border-top: 1px solid #353535;
  background: #090909;
  flex-grow: 2;
  display: flex;
  flex-wrap: wrap;
  padding-left: 15px;
  min-height: max(25vh, 155px);
}
.previewHere{
  background: white;
  flex-grow: 1;
  min-height: max(25vh, 155px);
}
.hrHere{
  height: 15px;
  width: 100vw;
  border-right: none;
  border-left: none;
  border-top: 1px solid #353535;
  border-bottom: 1px solid #353535;
  background: #090909;
  cursor: row-resize;
}
.hrHereZ, .hrHere{
  margin: 0;
  padding: 0;
}
.hrHereZ{
  width: 15px;
  border-top: none;
  border-bottom: none;
  border-left: 1px solid #353535;
  border-right: 1px solid #353535;
  background: #090909;
  cursor: col-resize;
}
.hereCodeHere{
  display: flex;
  flex-grow: 1;
  color: #eee;
  flex-direction: column;
  max-height: max(25vh, 155px);
}
.hereCodeHereZ{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 9px;
  border-left: 1px solid #353535;
}
.hereCodeHereZ > div{
  display: flex;
  align-items: center;
  width: fit-content;
  background: #1d1e22;
  padding: 7px 11px;
  gap: 5px;
  border-top: 4px solid #34363e;
  color: #aaaebc;
  font-weight: 700;
  user-select: none;
}
.hereCodeHereZ > div > div{
  min-height: 15px;
  min-width: 15px;
  border-radius: 3px;
  margin: 0;
}
.htmlHere{
  background: #ff3c41;
  position: relative;
}
.htmlHere:before{
  content: "";
  display: block;
  height: 11px;
  width: 1px;
  background: #1d1e22;
  position: absolute;
  right: 50%;
  top: 2px;
  transform: rotate(31deg)
}
.jsHere{
  background: #fcd000;
  position: relative;
}
.jsHere:before{
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border: 2px solid #1d1e22;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}
.jsHere:after{
  content: "";
  display: block;
  width: 3px;
  height: 13px;
  background: #fcd000;
  position: absolute;
  top: 1px;
  left: 6px;
}
.cssHere{
  background: #0ebeff;
  position: relative;
}
.cssHere div{
  height: 9px;
  width: 1px;
  background: #1d1e22;
  position: absolute;
  top: 3px;
  left: 7px;
}
.cssHere:before, .cssHere:after{
  content: "";
  display: block;
  height: 7px;
  width: 1px;
  background: black;
  position: absolute;
  top: 4px;
  left: 7px;
  rotate: 45deg;
}
.cssHere:before{
  rotate: 55deg;
}
.cssHere:after{
  rotate: -55deg;
}
.openHere{
  min-width: 25px;
  min-height: 15px;
  position: relative;
}
.buttonsHere button:active, .hereCodeHereZ button:active{
  top: 1px;
}
.openHere:before, .openHere:after{
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 2px);
  width: 0;
  border: 1px solid #eee;
  border-radius: 1px;
  height: 5px;
  background: #eee;
}
.openHere:after{
  transform: rotate(45deg) translateY(-50%);
  left: 11px;
}
.openHere:before{
  transform: rotate(-45deg) translateY(-50%);
  left: 11px;
}
.hereCodeHereZ > section{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: min-content;
  padding: 2px;
  gap: 3px;
}
.hereCodeHereZ button{
  padding: 7px;
  border-radius: 2px;
}
.openIsHereNow{
  margin: 0;
  padding: 0;
  min-height: 17px;
  border-left: 1px solid black;
}
button:has(> .openIsHereNow){
  background: #00000000;
  padding: 0;
  align-items: stretch;
  gap: 0;
}
button:has(> .openIsHereNow):hover{
  background: #00000000;
  top: 0;
}
button:has(> .openIsHereNow) div:nth-child(1){
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: 4px 0 0 4px;
  position: relative;
  background: #444857;
}
button:has(> .openIsHereNow) div:nth-child(2){
  border-radius: 0 4px 4px 0;
}
button:has(> .openIsHereNow) div{
  position: relative;
  background: #444857;
}
button:has(> .openIsHereNow) div:hover{
  background: #5a5f73;
}
button:has(> .openIsHereNow) div:active{
  top: 1px;
}
.textareaHere{
  display: flex;
  background: #1d1e22;
  flex-grow: 1;
  border-left: 1px solid #353535;
}
.textareaHere > textarea{
  border: none;
  margin: 0;
  background: #1d1e22;
  resize: none;
  outline: none;
  font-size: 13px;
  margin: 5px;
}
.codeTextarea{
  flex-grow: 1;
  color: #eee;
}
.numbersHereNow{
  overflow: hidden;
  color: #414141;
}

let textareasHere = Array.from(document.querySelectorAll(".textareaHere > textarea"));
for(let i=0;i<textareasHere.length;i++){
  console.log(i);
  if(i!=0 && i%2==1){
    textareasHere[i].addEventListener("scroll", function(e){
      textareasHere[i-1].scrollTop = textareasHere[i].scrollTop;
      textareasHere[i-1].scrollLeft = textareasHere[i].scrollLeft;
    });
    textareasHere[i].addEventListener("input", function(e){
      textareasHere[i-1].textContent = "";
      const numberOfLinesHere = Math.max(textareasHere[i].value.split("\n").length, 1);
      for(let h = 0; h < numberOfLinesHere; h++){
        textareasHere[i-1].textContent += h.toString()+"\n";
      }
      textareasHere[i-1].setAttribute("cols", numberOfLinesHere.toString().length.toString());
    });
    const numberOfLinesHereZ = Math.max(textareasHere[i].value.split("\n").length, 1);
    for(let h = 0; h < numberOfLinesHereZ; h++){
      textareasHere[i-1].textContent += h.toString()+"\n";
    }
    textareasHere[i-1].setAttribute("cols", numberOfLinesHereZ.toString().length.toString());
  }
}


ancientzframe = document.getElementsByClassName("previewHere")[0];
function reloadContentPlease(){
  zframe = document.createElement("iframe");
  zframe.classList.add("previewHere");
  ancientzframe.replaceWith(zframe);
  
  parserHTMLHere = (new DOMParser()).parseFromString("<!DOCTYPE html><html><head></head><body></body></html>", "text/html")
  parserHTMLHere.body.innerHTML = (new DOMParser()).parseFromString(document.getElementById("htmlInput").value, "text/html").body.innerHTML;
  parserHTMLHere.head.innerHTML = (new DOMParser()).parseFromString(document.getElementById("htmlInput").value, "text/html").head.innerHTML;
  
  let styleHere = document.createElement("style");
  let styleIsHere = document.createTextNode(document.getElementById("cssInput").value);
  styleHere.appendChild(styleIsHere);
  parserHTMLHere.body.appendChild(styleHere);
  
  let scriptHere = document.createElement("script");
  let scriptIsHere = document.createTextNode(document.getElementById("jsInput").value);
  scriptHere.appendChild(scriptIsHere);
  parserHTMLHere.body.appendChild(scriptHere);
  zframe.innerHTML = parserHTMLHere.documentElement.outerHTML;
  zframe.srcdoc = parserHTMLHere.documentElement.outerHTML;
  ancientzframe = zframe;
}


document.getElementById("htmlInput").addEventListener("keyup", function(){
  reloadContentPlease()
});



document.getElementById("cssInput").addEventListener("keyup", function(){
  reloadContentPlease()
});


document.getElementById("jsInput").addEventListener("keyup", function(){
  reloadContentPlease()
});

This Pen is owned by TidyCoder on CodePen.

See more by @TidyCoder on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.