Add sillyblogz-defaultfile.html
This commit is contained in:
commit
f1761c24b4
1 changed files with 226 additions and 0 deletions
226
sillyblogz-defaultfile.html
Normal file
226
sillyblogz-defaultfile.html
Normal file
|
|
@ -0,0 +1,226 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>SILLYBLOG | Sillyblogz Main Theme</title>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
body {
|
||||||
|
background:#fbdcdc;
|
||||||
|
font-family: Arial;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.4em;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.main-box {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
border:2px black solid;
|
||||||
|
background-size:contain;
|
||||||
|
color: black;
|
||||||
|
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: black;
|
||||||
|
height: auto;
|
||||||
|
width: 50%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
|
||||||
|
padding: 4%;
|
||||||
|
padding-top: 1%;
|
||||||
|
line-height:160%;
|
||||||
|
border: 8px groove black;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: red;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</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: Arial;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.4em;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.main-box {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
border:2px black solid;
|
||||||
|
background-size:contain;
|
||||||
|
color: black;
|
||||||
|
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: black;
|
||||||
|
height: auto;
|
||||||
|
width: 50%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
|
||||||
|
padding: 4%;
|
||||||
|
padding-top: 1%;
|
||||||
|
line-height:160%;
|
||||||
|
border: 8px groove black;
|
||||||
|
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>
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue