You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

139 lines
3.1 KiB

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="cssVarCookies.js" defer></script>
<link rel="stylesheet" href="cssVarCookies.css">
</head>
<body>
<section>
<nav></nav>
<textarea id="pad" name="" cols="30" rows="100">
0042:
#####
# #
# #
# #
#####
# #
# #
# #
# #
#####
0043:
####
# #
# #
#
#
#
#
# #
# #
####
</textarea>
</section>
</body>
</html>
<style>
:root {
--dim:24px;
--largeur-1:2.0px;
--largeur-0:1px;
--couleur-A:lightgreen;
--couleur-B:lightgray;
}
#pad, nav{
font-size:var(--dim);
letter-spacing: calc(var(--dim) * .31);
line-height:var(--dim);
font-size-adjust:0.7;
font-family:Unifont
}
nav {padding-left:4px;position:sticky;top:0px;display:none}
#pad{border:none;height:100%;width:100%;background:none;
transform:translate(4px,-0px);
border-left:var(--largeur-1) solid var(--couleur-A);
border-top:var(--largeur-1) solid var(--couleur-A);
background-size: var(--dim) var(--dim);
/* background-image:
linear-gradient(to right, grey 1px, transparent 1px),
linear-gradient(to bottom, grey 1px, transparent 1px);
*/
background:
repeating-linear-gradient(90deg, transparent, transparent calc(var(--dim) * 8 - var(--largeur-1)), var(--couleur-A) calc(var(--dim) * 8 - var(--largeur-1)), var(--couleur-A) calc(var(--dim) * 8 )),
repeating-linear-gradient(90deg, transparent, transparent calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 )),
repeating-linear-gradient( 0deg, transparent, transparent calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dim) * 1 ))
;
background-position-y:-4.5px;
background-position-x:4.5px;
background-position-y:-.6px;
background-position-x:2px;
}
section {
margin-left:var(--dim);
margin-top:var(--dim);
width:calc(var(--dim) * 8 * 5)
/*
background-image: url("grid.png");
background-color: #cccccc;
height:100%;
*/
}
body {height:100%}
html {height:100vh}
.curseur {position:absolute;
width:var(--dim);
height:var(--dim);
border:1px solid black;
pointer-events:none;
}
@font-face {
font-family: Unifont;
src: url("../unifont-15.1.05.otf") format("opentype");
}
*{font-family:Unifont}
nav {width:100%;background:ivory;height:var(--dim)}
</style>
<script>
const nav = document.querySelector('nav')
for (let i = 0; i < 16; i ++){
nav.innerHTML += (i+1)%10
}
//const entete = document.createElement('nav')
//body.appendChild(entete)
const body = document.querySelector('body')
const textarea = document.querySelector('textarea')
const dim = 24;
let curseur = document.createElement('div')
body.appendChild(curseur)
curseur.classList.add('curseur')
textarea.addEventListener("mousemove", (e) => {
console.log(e)
let x = Math.ceil(e.clientX / dim) * dim - dim - 10
let y = Math.ceil(e.clientY / dim) * dim - dim + 6 + dim
curseur.style.left= `${x}px`
curseur.style.top= `${y}px`
});
</script>