test de grille pour un fond de pad

1 month ago · 0b0e327260
4 changed files with 212 additions and 0 deletions
--- a/pad-en-grille/cssVarCookies.css
+++ b/pad-en-grille/cssVarCookies.css
@ -0,0 +1,32 @@
+#cvfc p::before {content:":root{}"}
+
+#cvfc:hover p::before {content:":root{"}
+#cvfc:hover::after {content:"}"}
+
+#cvfc {
+    z-index:10000;
+    position:fixed;
+    bottom:10px;
+    left:10px;
+    background:whitesmoke;
+    border:1px solid black;
+    overflow:hidden;
+border-radius:5px;
+padding:10px;
+width:fit-content;
+
+line-height:auto;
+}
+#cvfc::after, #cvfc * {color:black !important;font-size:16px; box-sizing:border-box;margin:0;font-family:Unifont;}
+#cvfc tr {padding-left:2rem; display:flex;justify-content:space-between; gap:0px;width:inherit}
+#cvfc tr:nth-of-type(2n - 1) {background:white}
+#cvfc td {background:transparent;position:relative;width:inherit;height:18px !important; white-space:nowrap}
+#cvfc td:last-of-type{border-bottom:1px solid transparent; padding-left:10px}
+#cvfc textarea{padding:0;margin:0;resize:none; width:40ch;white-space:nowrap;
+border:none;background:none}
+#cvfc table {display:none; background:none}
+#cvfc:hover table {display:inherit}
+#cvfc tr:hover td:last-of-type {background:lightgray;border-bottom:1px solid black}
+#cvfc:hover {border-color:black; 
+    resize:horizontal;
+}
--- a/pad-en-grille/cssVarCookies.js
+++ b/pad-en-grille/cssVarCookies.js
@ -0,0 +1,42 @@
+function filterEntriesWithCSSVariables(obj) {
+    return Object.entries(obj).filter(([key, value]) => {
+        return typeof value === 'string' && value.startsWith('--');
+    });
+}
+const style = getComputedStyle(document.documentElement)
+const cssVars = filterEntriesWithCSSVariables(style).map((v) => v[1]);
+
+const container = document.createElement('section')
+container.innerHTML = '<p></p>'
+container.setAttribute('id','cvfc')
+document.body.appendChild(container)
+const table = document.createElement('table')
+container.appendChild(table)
+
+cssVars.reverse().forEach((cssVar) => {
+    let val = style.getPropertyValue(cssVar)
+    document.body.style.setProperty(cssVar,localStorage.getItem(cssVar) || val)
+
+    const tr = document.createElement('tr')
+
+    const key = document.createElement('td')
+    const value = document.createElement('td')
+
+    const value_textArea = document.createElement('textarea')
+    value_textArea.setAttribute('rows',1)
+    value_textArea.addEventListener("input", function(){
+        localStorage.setItem(cssVar, this.value);
+        document.body.style.setProperty(cssVar, this.value);    
+    });
+
+    value_textArea.innerHTML = localStorage.getItem(cssVar) || val
+    value.appendChild(value_textArea)
+
+    key.innerHTML = cssVar
+
+    tr.appendChild(key)
+    tr.appendChild(value)
+
+    table.appendChild(tr)
+})
+
--- a/pad-en-grille/index.html
+++ b/pad-en-grille/index.html
@ -0,0 +1,138 @@
+<!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>
--- a/unifont-15.1.05.otf
+++ b/unifont-15.1.05.otf