From 62726f7225ccf8b0208460eea72b763c4855435b Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Thu, 19 Jan 2023 22:36:28 -0300
Subject: [PATCH] mejorar CSP

---
 502.html                                    |  14 +--
 aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html     | 117 ++++++--------------
 aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.css |  17 +++
 aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.js  |  48 ++++++++
 center.css                                  |   3 +
 drip.css                                    |   5 +
 index.md                                    |   2 +-
 timer.html                                  |  67 +++--------
 timer.html.css                              |  14 +++
 timer.html.js                               |  21 ++++
 10 files changed, 165 insertions(+), 143 deletions(-)
 create mode 100644 aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.css
 create mode 100644 aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.js
 create mode 100644 center.css
 create mode 100644 timer.html.css
 create mode 100644 timer.html.js

diff --git a/502.html b/502.html
index 8448264..55c01f3 100644
--- a/502.html
+++ b/502.html
@@ -1,11 +1,9 @@
-<!doctype html>
-<meta charset=utf-8>
-<meta name=viewport content="width=device-width, initial-scale=1.0">
-<link rel=stylesheet href=https://nulo.in/drip.css>
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="stylesheet" href="https://nulo.in/drip.css" />
+<link rel="stylesheet" href="https://nulo.in/center.css" />
 <title>502 me caí :(</title>
-<style>
-    body { margin: auto; }
-</style>
 
 <h1>Me caí :( mala puerta de enlace</h1>
-<img src=se-cayó.jpg alt="Estx servidorx caídx al lado de unx que no">
+<img src="se-cayó.jpg" alt="Estx servidorx caídx al lado de unx que no" />
diff --git a/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html b/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html
index 572f28d..90503ad 100644
--- a/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html
+++ b/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html
@@ -1,92 +1,43 @@
-<!doctype html>
-<meta charset=utf8>
-<meta name=viewport content='width=device-width, initial-scale=1.0'>
-<style>
-  body {
-    background: white;
-    color: #111;
-    font-family: sans-serif;
-  }
-
-  * {
-    margin: 0;
-    padding: 0;
-  }
-  html {
-    overflow: hidden;
-  }
-
-  #controls {
-    position: absolute;
-  }
-</style>
+<!DOCTYPE html>
+<meta charset="utf8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="stylesheet" href="aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.css" />
 <title>atr</title>
 
-<div id=controls>
-  <div class=coso>
-    <label for=rect-width>rect width</label>
-    <input name=rect-width id=rect-width type=range min=2 max=100>
+<div id="controls">
+  <div class="coso">
+    <label for="rect-width">rect width</label>
+    <input name="rect-width" id="rect-width" type="range" min="2" max="100" />
   </div>
-  <div class=coso>
-    <label for=rect-height>rect height</label>
-    <input name=rect-height id=rect-height type=range min=2 max=100>
+  <div class="coso">
+    <label for="rect-height">rect height</label>
+    <input name="rect-height" id="rect-height" type="range" min="2" max="100" />
   </div>
-  <div class=coso>
-    <label for=diff-x>diff x</label>
-    <input name=diff-x id=diff-x type=range min=-100 max=100 step=0.1 value=10>
+  <div class="coso">
+    <label for="diff-x">diff x</label>
+    <input
+      name="diff-x"
+      id="diff-x"
+      type="range"
+      min="-100"
+      max="100"
+      step="0.1"
+      value="10"
+    />
   </div>
-  <div class=coso>
-    <label for=diff-y>diff y</label>
-    <input name=diff-y id=diff-y type=range min=-100 max=100 step=0.1 value=10>
+  <div class="coso">
+    <label for="diff-y">diff y</label>
+    <input
+      name="diff-y"
+      id="diff-y"
+      type="range"
+      min="-100"
+      max="100"
+      step="0.1"
+      value="10"
+    />
   </div>
 </div>
 
 <canvas></canvas>
-<script>
-  const canvas = document.querySelector("canvas")
-  const ctx = canvas.getContext("2d", {
-    alpha: false,
-  })
-
-  function resizeCanvas () {
-    canvas.width = window.innerWidth
-    canvas.height = window.innerHeight
-  }
-  window.addEventListener("resize", resizeCanvas)
-  resizeCanvas()
-
-  function setupInput(inputId, setFunc) {
-    const input = document.getElementById(inputId)
-    input.addEventListener('input', event => {
-      setFunc(parseFloat(event.target.value))
-    })
-    setFunc(parseFloat(input.value))
-  }
-
-  let rect = { width: 50, height: 100 }
-  let diff = { x: 1, y: 1 }
-
-  setupInput('rect-width', val => rect.width = val)
-  setupInput('rect-height', val => rect.height = val)
-
-  setupInput('diff-x', val => diff.x = val)
-  setupInput('diff-y', val => diff.y = val)
-
-  function draw (time) {
-    const i = time / 10
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-    const actualDiff = { x: diff.x / rect.width, y: diff.y / rect.height }
-
-    for (let x = 0; x < canvas.width; x += rect.width) {
-      for (let y = 0; y < canvas.height; y += rect.height) {
-        ctx.fillStyle = `hsl(${i + x/rect.width*actualDiff.x + y/rect.height*actualDiff.y}, 100%, 50%)`
-        ctx.fillRect(x, y, rect.width, rect.height)
-      }
-    }
-
-    window.requestAnimationFrame(draw)
-  }
-  window.requestAnimationFrame(draw)
-</script>
+<script src="aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.js"></script>
diff --git a/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.css b/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.css
new file mode 100644
index 0000000..93cea67
--- /dev/null
+++ b/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.css
@@ -0,0 +1,17 @@
+body {
+  background: white;
+  color: #111;
+  font-family: sans-serif;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+html {
+  overflow: hidden;
+}
+
+#controls {
+  position: absolute;
+}
diff --git a/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.js b/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.js
new file mode 100644
index 0000000..fb8d975
--- /dev/null
+++ b/aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.js
@@ -0,0 +1,48 @@
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d", {
+  alpha: false,
+});
+
+function resizeCanvas() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+window.addEventListener("resize", resizeCanvas);
+resizeCanvas();
+
+function setupInput(inputId, setFunc) {
+  const input = document.getElementById(inputId);
+  input.addEventListener("input", (event) => {
+    setFunc(parseFloat(event.target.value));
+  });
+  setFunc(parseFloat(input.value));
+}
+
+let rect = { width: 50, height: 100 };
+let diff = { x: 1, y: 1 };
+
+setupInput("rect-width", (val) => (rect.width = val));
+setupInput("rect-height", (val) => (rect.height = val));
+
+setupInput("diff-x", (val) => (diff.x = val));
+setupInput("diff-y", (val) => (diff.y = val));
+
+function draw(time) {
+  const i = time / 10;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  const actualDiff = { x: diff.x / rect.width, y: diff.y / rect.height };
+
+  for (let x = 0; x < canvas.width; x += rect.width) {
+    for (let y = 0; y < canvas.height; y += rect.height) {
+      ctx.fillStyle = `hsl(${
+        i + (x / rect.width) * actualDiff.x + (y / rect.height) * actualDiff.y
+      }, 100%, 50%)`;
+      ctx.fillRect(x, y, rect.width, rect.height);
+    }
+  }
+
+  window.requestAnimationFrame(draw);
+}
+window.requestAnimationFrame(draw);
diff --git a/center.css b/center.css
new file mode 100644
index 0000000..99ffbb5
--- /dev/null
+++ b/center.css
@@ -0,0 +1,3 @@
+body {
+  margin: auto;
+}
diff --git a/drip.css b/drip.css
index 79a0181..7427b7b 100644
--- a/drip.css
+++ b/drip.css
@@ -117,3 +117,8 @@ a {
   text-align: right;
   font-size: 0.8rem;
 }
+
+.main-title {
+  style=color: red;
+  margin-top: 0;
+}
diff --git a/index.md b/index.md
index 3d80139..30b109d 100644
--- a/index.md
+++ b/index.md
@@ -1,4 +1,4 @@
-<h1 style=color:red;margin-top:0>nulo❥in</h1>
+<h1 class="main-title">nulo❥in</h1>
 
 >What's bizarre? I mean, we're all pretty bizarre.<br>Some of us are just better at hiding it, that's all.
 
diff --git a/timer.html b/timer.html
index 3eb078f..999476c 100644
--- a/timer.html
+++ b/timer.html
@@ -1,56 +1,21 @@
-<!doctype html>
-<meta charset=utf-8>
-<meta name=viewport content='width=device-width, initial-scale=1.0'>
-<link rel=stylesheet href=https://nulo.in/drip.css>
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="stylesheet" href="https://nulo.in/drip.css" />
+<link rel="stylesheet" href="timer.html.css" />
 <title>Timer de guita</title>
-<style>
-body {
-	display: flex;
-	min-height: 100vh;
-	justify-content: center;
-	align-items: center;
-	padding: 0;
-}
-main {
-	text-align: center;
-	padding: 0 1em;
-}
-input {
-	width: 5em;
-}
-</style>
 
 <main>
-	<h1>Guita: <span id="guita" data-guita="0">$ 0.00</span></h1>
-	<div>
-		<label for="por-hora">Guita por hora por persona:</label>
-		<input value="0" type="number" id="por-hora" />
-	</div>
-	<div>
-		<label for="personas">Cantidad de personas:</label>
-		<input value="1" type="number" id="personas" />
-	</div>
-	<button>Empezar</button>
+  <h1>Guita: <span id="guita" data-guita="0">$ 0.00</span></h1>
+  <div>
+    <label for="por-hora">Guita por hora por persona:</label>
+    <input value="0" type="number" id="por-hora" />
+  </div>
+  <div>
+    <label for="personas">Cantidad de personas:</label>
+    <input value="1" type="number" id="personas" />
+  </div>
+  <button>Empezar</button>
 </main>
 
-<script>
-const guitaEl = document.querySelector('#guita')
-const porHoraEl = document.querySelector('#por-hora')
-const personasEl = document.querySelector('#personas')
-const buttonEl = document.querySelector('button')
-
-let interval = null
-
-buttonEl.addEventListener('click', event => {
-	if (interval) {
-		clearInterval(interval)
-		buttonEl.textContent = 'Empezar'
-	} else {
-		interval = setInterval(() => {
-			guitaEl.dataset.guita = parseFloat(guitaEl.dataset.guita) + (porHoraEl.value / 60 / 60) * personasEl.value
-			guitaEl.textContent = `$ ${parseFloat(guitaEl.dataset.guita).toFixed(2)}`
-		}, 1000)
-		buttonEl.textContent = 'Parar'
-	}
-})
-</script>
+<script src="timer.html.js"></script>
diff --git a/timer.html.css b/timer.html.css
new file mode 100644
index 0000000..1bcb618
--- /dev/null
+++ b/timer.html.css
@@ -0,0 +1,14 @@
+body {
+  display: flex;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+main {
+  text-align: center;
+  padding: 0 1em;
+}
+input {
+  width: 5em;
+}
diff --git a/timer.html.js b/timer.html.js
new file mode 100644
index 0000000..ae20cdb
--- /dev/null
+++ b/timer.html.js
@@ -0,0 +1,21 @@
+const guitaEl = document.querySelector("#guita");
+const porHoraEl = document.querySelector("#por-hora");
+const personasEl = document.querySelector("#personas");
+const buttonEl = document.querySelector("button");
+
+let interval = null;
+
+buttonEl.addEventListener("click", (event) => {
+  if (interval) {
+    clearInterval(interval);
+    buttonEl.textContent = "Empezar";
+  } else {
+    interval = setInterval(() => {
+      guitaEl.dataset.guita =
+        parseFloat(guitaEl.dataset.guita) +
+        (porHoraEl.value / 60 / 60) * personasEl.value;
+      guitaEl.textContent = `$ ${parseFloat(guitaEl.dataset.guita).toFixed(2)}`;
+    }, 1000);
+    buttonEl.textContent = "Parar";
+  }
+});
