83 lines
1.9 KiB
HTML
83 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<link rel=stylesheet href=tutorial.css>
|
|
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
}
|
|
#html-preview-left {
|
|
width: 50%;
|
|
margin: 8px;
|
|
}
|
|
#html-preview-right {
|
|
width: 50%;
|
|
margin: 8px 8px 8px 0;
|
|
padding: 8px;
|
|
background: white;
|
|
background: #f4f6f2;
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<textarea id=html-preview-left><h1>HTML Preview</h1>
|
|
|
|
<p>&#x2190; Any HTML from this box on the left is previewed here.</p>
|
|
|
|
<p>This includes all the <b>bold statements</b> that you might want to make, as
|
|
well as some <i>nuance</i> and also images.</p>
|
|
|
|
<figure>
|
|
<center>
|
|
<img src="images/CPC26-banner.png">
|
|
<figcaption>Just a random image, really.</figcaption>
|
|
</center>
|
|
</figure>
|
|
|
|
<p>If this file is at the root of the tutorial repository, then the
|
|
<code>tutorial.css</code> file is automatically included, for fancy boxes and
|
|
custom styling; and you can use images like</p>
|
|
|
|
<center>
|
|
<code>&lt;img src="images/chapter1/stuff.png"&gt;</code>.
|
|
</center>
|
|
|
|
<div class=correct>Bonne réponse !</div>
|
|
|
|
<p>Have fun with this tool! &#x1f604;</p></textarea>
|
|
|
|
<div id=html-preview-right>
|
|
<i>Write some HTML in the text area to preview it here!</i>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
const textarea = document.getElementById("html-preview-left");
|
|
const preview = document.getElementById("html-preview-right");
|
|
|
|
textarea.addEventListener("input", update_preview);
|
|
|
|
function update_preview(e) {
|
|
preview.innerHTML = e.target.value;
|
|
/* Scroll to bottom of preview div */
|
|
preview.scrollTop = preview.scrollHeight;
|
|
}
|
|
|
|
/* Initialization */
|
|
preview.innerHTML = textarea.value;
|
|
</script>
|
|
</html>
|