148 lines
3.4 KiB
HTML
148 lines
3.4 KiB
HTML
<!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;
|
|
--dimY: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) * .29);
|
|
line-height:var(--dimY);
|
|
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);
|
|
|
|
/* placer le fond dans un pseudo élément pour le déplacer individuellement du pad */
|
|
|
|
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(--dimY) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dimY) * 1 - var(--largeur-0)), var(--couleur-B) calc(var(--dimY) * 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(--dimY);
|
|
border:var(--largeur-0) solid var(--couleur-A);
|
|
box-sizing:border-box;
|
|
background:var(--couleur-B);
|
|
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>
|