Compare commits
2 commits
8e0beb5d55
...
62726f7225
| Author | SHA1 | Date | |
|---|---|---|---|
| 62726f7225 | |||
| 1690bffc78 |
11 changed files with 168 additions and 143 deletions
14
502.html
14
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" />
|
||||
|
|
|
|||
3
Web.md
3
Web.md
|
|
@ -1 +1,4 @@
|
|||
## Seguridad
|
||||
|
||||
- [HSTS Preload](https://hstspreload.org/)
|
||||
- [Mozilla Observatory](https://observatory.mozilla.org/analyze/nulo.in)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
17
aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.css
Normal file
17
aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
body {
|
||||
background: white;
|
||||
color: #111;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#controls {
|
||||
position: absolute;
|
||||
}
|
||||
48
aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.js
Normal file
48
aaaaaaaaaaaaaaaaaaaaaaaaaaarainbow.html.js
Normal file
|
|
@ -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);
|
||||
3
center.css
Normal file
3
center.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
body {
|
||||
margin: auto;
|
||||
}
|
||||
5
drip.css
5
drip.css
|
|
@ -117,3 +117,8 @@ a {
|
|||
text-align: right;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
style=color: red;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
|
|||
2
index.md
2
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.
|
||||
|
||||
|
|
|
|||
67
timer.html
67
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>
|
||||
|
|
|
|||
14
timer.html.css
Normal file
14
timer.html.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
21
timer.html.js
Normal file
21
timer.html.js
Normal file
|
|
@ -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";
|
||||
}
|
||||
});
|
||||
Reference in a new issue