console #1
4
content/console.md
Normal file
4
content/console.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
+++
|
||||||
|
title = "Console"
|
||||||
|
template = "console.html"
|
||||||
|
+++
|
5
sass/console.scss
Normal file
5
sass/console.scss
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.console {
|
||||||
|
background: gray;
|
||||||
|
width: 80vw;
|
||||||
|
min-height: 20vh;
|
||||||
|
}
|
43
static/js/console.js
Normal file
43
static/js/console.js
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
const c = document.querySelector(".console")
|
||||||
|
const ps1 = "[fr@website ~]$ "
|
||||||
|
|
||||||
|
function write(key) {
|
||||||
|
console.log("KEY:", key)
|
||||||
|
switch(key) {
|
||||||
|
case "Enter":
|
||||||
|
c.innerHTML += "<br>"
|
||||||
|
c.innerHTML += ps1
|
||||||
|
return
|
||||||
|
case "000ctrll":
|
||||||
|
c.innerHTML = ""
|
||||||
|
c.innerHTML += ps1
|
||||||
|
return
|
||||||
|
default:
|
||||||
|
c.innerHTML += key
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function customCtrlShortcuts(plusKey) {
|
||||||
|
document.addEventListener("keydown", e => {
|
||||||
|
if(e.ctrlKey && e.key == plusKey) {
|
||||||
|
e.preventDefault()
|
||||||
|
write("000ctrl"+plusKey)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// On load init the terminal
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
write("000ctrll")
|
||||||
|
})
|
||||||
|
|
||||||
|
// Capture the keypress
|
||||||
|
window.addEventListener("keypress", e => {
|
||||||
|
console.log(e)
|
||||||
|
write(e.key)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Register custom ctrl shortcuts
|
||||||
|
customCtrlShortcuts("l") // ctrl + l
|
||||||
|
customCtrlShortcuts("c") // ctrl + c
|
||||||
|
|
11
templates/console.html
Normal file
11
templates/console.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block styles %}
|
||||||
|
<link rel="stylesheet" href="/console.css">
|
||||||
|
{% endblock styles %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<section class="console content">
|
||||||
|
</section>
|
||||||
|
<script src="/js/console.js" defer></script>
|
||||||
|
{% endblock content %}
|
Loading…
Reference in New Issue
Block a user