sillyblogz/themes/happy.html

<!DOCTYPE html>
<html>
  <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SILLYBLOG | Happy Theme</title>
    <style>

         body {
              background:#fbdcdc;
              font-family: Monospace;
              font-weight: 500;
              font-size: 1.4em;
              letter-spacing: 0.1em;
              background: url('https://64.media.tumblr.com/bb29194154e6a948acd6c2b3177ce276/7f57acdd74cd4b11-56/s75x75_c1/f72102ded7586ac1414d0ffd0c735178e581ecdd.gif');
            
              }
              
             
              h1 {
                border:2px red dashed;
                background-size:contain;
               color: red;
               font-size:20px;
               padding: 3%;
               text-align:center;
              }

             
              .info-box {
             
              background: white;
              color: #161c24;
              height: 100px;
              width: 50%;
              overflow-y: scroll;
              margin: 0 auto;
              
              padding: 1%;
              padding-left: 4%;
              padding-right: 4%;
              padding-top: 1%;
              line-height:115%;
              border: 8px groove red;
              
              
              }

              hr {
                border: 3px dashed red;
                width: 150px;
              }

            
            .main-box {
              background: white;
              color: #161c24;
              width: 50%;
           height: auto;
              margin: 0 auto;
            
             
              padding: 4%;
              padding-top: 1%;
              line-height:160%;
              border: 8px groove red;

              }

            a {
              color: red;
              
              }
              
              
            @media only screen and (max-width: 800px) {
              .main-box {
                width: auto;
                height: auto;
              
              }
              
            }

    </style>
    <script>
      
 
function giveOutput() {
  
  const post = document.getElementById("textarea2").value;
const title = document.getElementById("textarea1").value;

  const style = `<!DOCTYPE html>
<html>
  <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Blog</title>
    <style>

         body {
              background:#fbdcdc;
              font-family: Monospace;
              font-weight: 500;
              font-size: 1.4em;
              letter-spacing: 0.1em;
              background: url('https://64.media.tumblr.com/bb29194154e6a948acd6c2b3177ce276/7f57acdd74cd4b11-56/s75x75_c1/f72102ded7586ac1414d0ffd0c735178e581ecdd.gif');
            
              }
                     
            @media only screen and (max-width: 800px) {
              .main-box {
                width: auto;
                height: auto;
              
              }
              
            }

             
              h1 {
                border:2px red dashed;
                background-size:contain;
               color: red;
               font-size:20px;
               padding: 3%;
               text-align:center;
              }

             
              .info-box {
             
              background: white;
              color: #161c24;
              height: 100px;
              width: 50%;
              overflow-y: scroll;
              margin: 0 auto;
              
              padding: 1%;
              padding-left: 4%;
              padding-right: 4%;
              padding-top: 1%;
              line-height:115%;
              border: 8px groove red;
              
              
              }

              hr {
                border: 3px dashed red;
                width: 150px;
              }

            
            .main-box {
              background: white;
              color: #161c24;
              height: auto;
              width: 50%;
              overflow-y: scroll;
              margin: 0 auto;
            
             
              padding: 4%;
              padding-top: 1%;
              line-height:160%;
              border: 8px groove red;
              display: block;
              
              }

            a {
              color: red;
              
              }
              
              

    </style>
    
    

  </head>  <body> <div class="main-box">`

  const footer = `</div>

  </div>
  </body>
  
  

</html>
`

  const output = style + "\n" + "<h1>" + title + "</h1>" + "\n" + post + "\n" + footer;
  
  document.getElementById("outputbox").value = output;
}</script>
       

  </head>  <body><div class="main-box"> <h1>Sillyblog</h1>
  A really basic js blog generator. How it works:<br>
  <li>Enter your post title in the title box</li>
  <li>Enter your post content in the post content box</li>
  <li>Click generate HTML</li>
  <li>Copy paste html to web host of choice, you can add a link back to your main blog page or site at the top if you want<br></li>
<textarea id="textarea1" name="textarea1" rows="2" cols="80">Post Title</textarea>

<hr>

<textarea id="textarea2" name="textarea2" rows="30" cols="80">Post content, use raw HTML</textarea>

<button type="button" onclick="giveOutput()">Generate HTML</button>

<h2>Output:</h2>
<textarea id="outputbox" rows="30" cols="80" readonly></textarea>
</div>

  </div>
  </body>
  
  

</html>