agnes/sillyblogz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add themes/dark.html

Browse source
This commit is contained in:
agnes 2026-10-19 09:06:16 +00:00
parent edbdfa5f6b
commit a1d289a43c
1 changed files with 216 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

216
themes/dark.html Normal file
View file

@ -0,0 +1,216 @@
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>SILLYBLOG | Dark Theme</title>
<style>
body {
background:#292627;
font-family: Arial;
font-weight: 500;
font-size: 1.4em;
letter-spacing: 0.1em;
}
h1 {
border:2px #cacfc8 solid;
background-size:contain;
color: #cacfc8;
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 solid #cacfc8;
width: 150px;
}
.main-box {
background: #2b2e2a;
color: #e3ebdf;
width: 50%;
height: auto;
margin: 0 auto;
padding: 4%;
padding-top: 1%;
line-height:160%;
border:6px #ded5d6 solid;
}
a {
color: #cacfc8;
}
@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:#292627;
font-family: Arial;
font-weight: 500;
font-size: 1.4em;
letter-spacing: 0.1em;
}
h1 {
border:2px #cacfc8 solid;
background-size:contain;
color: #cacfc8;
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 solid #cacfc8;
width: 150px;
}
.main-box {
background: #2b2e2a;
color: #e3ebdf;
width: 50%;
height: auto;
margin: 0 auto;
padding: 4%;
padding-top: 1%;
line-height:160%;
border:6px #ded5d6 solid;
}
a {
color: #cacfc8;
}
@media only screen and (max-width: 800px) {
.main-box {
width: auto;
height: auto;
}
}
</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 <a href="#">link</a> 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>