Skip to content

Instantly share code, notes, and snippets.

@yelizariev

yelizariev/!README.markdown

Last active July 23, 2026 07:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yelizariev/4f513b2904387a0716aa26d5baaf52ed to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yelizariev/4f513b2904387a0716aa26d5baaf52ed to your computer and use it in GitHub Desktop.
Download ZIP
book.mydream42.com
Raw
12monkeys.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ markdown.yaml.Title }}</title>
<link rel="icon" type="image/png" href="{{ markdown.yaml.Icon | default: 'https://jesus.lamourism.com/favicon.ico' }}"/>
<meta property="og:site_name" content="book.mydream42.com" />
<meta property="og:title" content="Listen to Me" />
<meta property="og:image" content="https://gist.github.com/user-attachments/assets/c64786b8-a32f-4dde-ab08-26cd9fad963a">
<meta property="og:image:type" content="image/png">
<script src="https://amsterdam.mydream42.com/yelizariev/0a92d9448b5ffa7e39929d7548056464/❌❌❌/qrcode.js"></script>
<style>
html, body { height: 100%; }
body{
margin:0;
overflow:hidden;
background:#000;
color:#fff;
cursor:pointer;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* Background canvas (shader) */
canvas{
width:100%;
height:auto;
user-select:none;
display:block;
}
/* Image overlay layer */
#overlay{
position:fixed;
inset:0;
pointer-events:none;
z-index:10;
}
.slide{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%) scale(0.05);
opacity:0;
transform-origin:50% 50%;
filter: drop-shadow(0 20px 60px rgba(0,0,0,0.45));
will-change: transform, opacity;
max-width: 80vw;
max-height: 80vh;
padding: 3px;
background-color: white;
}
.play{
animation: popInHold 9s ease-in-out forwards;
}
.slide img {
width: 100%;
height: auto;
max-height: 80vh;
object-fit: contain;
display: block;
}
@keyframes popInHold{
0% { opacity:0; transform: translate(-50%, -50%) scale(0.05); }
12% { opacity:0.95; transform: translate(-50%, -50%) scale(1.00); }
100% { opacity:0.95; transform: translate(-50%, -50%) scale(1.00); }
}
@media (prefers-reduced-motion: reduce){
.slide{ animation:none !important; opacity:1; transform: translate(-50%, -50%) scale(1) !important; }
}
</style>
</head>
<body>
<audio id="music" autoplay loop crossorigin="anonymous" style="display:none">
<source src="https://moses.lamourism.com/radio/mishary-rashid-alafasy-130-muslimcentral.com.mp3" type="audio/mpeg">
</audio>
<!-- Overlay where QR image appears -->
<div id="overlay" aria-label="Overlay"></div>
<!-- Shader -->
<script type="x-shader/x-fragment">#version 300 es
precision highp float;
out vec4 O;
uniform float time;
uniform vec2 resolution;
#define FC gl_FragCoord.xy
#define R resolution
#define T time
#define hue(a) (.6+.6*cos(6.3*(a)+vec3(0,83,21)))
float rnd(float a) {
vec2 p=fract(a*vec2(12.9898,78.233)); p+=dot(p,p*345.);
return fract(p.x*p.y);
}
vec3 pattern(vec2 uv) {
vec3 col=vec3(0);
for (float i=.0; i++<20.;) {
float a=rnd(i);
vec2 n=vec2(a,fract(a*34.56)), p=sin(n*(T+7.)+T*.5);
float d=dot(uv-p,uv-p);
col+=.00125/d*hue(dot(uv,uv)+i*.125+T);
}
return col;
}
void main(void) {
vec2 uv=(FC-.5*R)/min(R.x,R.y);
vec3 col=vec3(0);
float s=2.4,
a=atan(uv.x,uv.y),
b=length(uv);
uv=vec2(a*5./6.28318,.05/tan(b)+T);
uv=fract(uv)-.5;
col+=pattern(uv*s);
O=vec4(col,1);
}
</script>
<script>
window.onload = init;
function init() {
let renderer, canvas;
const dpr = Math.max(1, .5 * devicePixelRatio);
const resize = () => {
const { innerWidth: width, innerHeight: height } = window;
canvas.width = width * dpr;
canvas.height = height * dpr;
if (renderer) renderer.updateScale(dpr);
};
const source = document.querySelector("script[type='x-shader/x-fragment']").textContent;
canvas = document.createElement("canvas");
document.body.appendChild(canvas);
document.body.style.margin = "0";
document.body.style.touchAction = "none";
document.body.style.overflow = "hidden";
renderer = new Renderer(canvas, dpr);
renderer.setup();
renderer.init();
resize();
if (renderer.test(source) === null) renderer.updateShader(source);
window.onresize = resize;
const loop = (now) => {
renderer.render(now);
requestAnimationFrame(loop);
};
loop(0);
}
class Renderer {
#vertexSrc = "#version 300 es\nprecision highp float;\nin vec4 position;\nvoid main(){gl_Position=position;}";
#fragmtSrc = "#version 300 es\nprecision highp float;\nout vec4 O;\nuniform float time;\nuniform vec2 resolution;\nvoid main(){vec2 uv=gl_FragCoord.xy/resolution;O=vec4(uv,sin(time)*.5+.5,1);}";
#vertices = [-1, 1, -1, -1, 1, 1, 1, -1];
constructor(canvas, scale) {
this.canvas = canvas;
this.scale = scale;
this.gl = canvas.getContext("webgl2");
this.gl.viewport(0, 0, canvas.width * scale, canvas.height * scale);
this.shaderSource = this.#fragmtSrc;
}
updateScale(scale) {
this.scale = scale;
this.gl.viewport(0, 0, this.canvas.width * scale, this.canvas.height * scale);
}
compile(shader, source) {
const gl = this.gl;
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader));
}
}
test(source) {
let result = null;
const gl = this.gl;
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) result = gl.getShaderInfoLog(shader);
if (gl.getShaderParameter(shader, gl.DELETE_STATUS)) gl.deleteShader(shader);
return result;
}
reset() {
const { gl, program, vs, fs } = this;
if (!program || gl.getProgramParameter(program, gl.DELETE_STATUS)) return;
if (!gl.getShaderParameter(vs, gl.DELETE_STATUS)) { gl.detachShader(program, vs); gl.deleteShader(vs); }
if (!gl.getShaderParameter(fs, gl.DELETE_STATUS)) { gl.detachShader(program, fs); gl.deleteShader(fs); }
gl.deleteProgram(program);
}
updateShader(source) {
this.reset();
this.shaderSource = source;
this.setup();
this.init();
}
setup() {
const gl = this.gl;
this.vs = gl.createShader(gl.VERTEX_SHADER);
this.fs = gl.createShader(gl.FRAGMENT_SHADER);
this.compile(this.vs, this.#vertexSrc);
this.compile(this.fs, this.shaderSource);
this.program = gl.createProgram();
gl.attachShader(this.program, this.vs);
gl.attachShader(this.program, this.fs);
gl.linkProgram(this.program);
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(this.program));
}
}
init() {
const { gl, program } = this;
this.buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.#vertices), gl.STATIC_DRAW);
const position = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
program.resolution = gl.getUniformLocation(program, "resolution");
program.time = gl.getUniformLocation(program, "time");
}
render(now = 0) {
const { gl, program, buffer, canvas } = this;
if (!program || gl.getProgramParameter(program, gl.DELETE_STATUS)) return;
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.uniform2f(program.resolution, canvas.width, canvas.height);
gl.uniform1f(program.time, now * 1e-3);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
}
</script>
<script>
// 中文 ✨ 祈祷打印：按词数延迟输出
// ✨ FR : Impression “prière” avec temporisation proportionnelle
console.pray = function (text) {
const lines = String(text || "").split("\n");
let delay = 500;
lines.forEach((line) => {
const wc = line.trim() ? line.trim().split(/\s+/).length : 0;
setTimeout(() => console.log(line), delay);
delay += Math.max(1, wc) * 100;
});
};
function next() {
window.location.href = "{{ markdown.yaml.Next }}" + "?start=" + (window.location.hash.substring(1) || "new");
}
function showQR() {
const overlay = document.getElementById("overlay");
overlay.innerHTML = "";
const qr = document.createElement("div");
qr.className = "slide";
new QRCode(qr, {
text: "https://book.mydream42.com/" + window.location.hash,
width: 1000,
height: 1000,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.M // L/M/Q/H
});
setTimeout(function(){
qr.className = "slide play";
overlay.appendChild(qr);
}, 1000);
}
showQR();;
setTimeout(function(){
console.pray(`{{ markdown.RAW | replace: "`", "\`" }}`);
}, 2000);
const voiceURL =
"https://jesus.lamourism.com/voices/" +
window.location.hash.substring(1) +
".ogg";
function start() {
if (!window.location.hash) {
next();
return;
}
const audio = document.getElementById("music");
audio.onerror = () => {
next();
};
audio.pause();
audio.loop = false;
audio.src = voiceURL;
audio.currentTime = 0;
audio.onended = () => {
audio.onended = null;
next();
};
audio.play();
}
let happy = false;
document.addEventListener("click", function () {
if (happy)
return;
happy = true;
const audio = document.getElementById("music");
audio.play();
setTimeout(start, 5000);
}, { once: true });
(function (){
return;
window.addEventListener("error", e => {
alert(
`ERROR\n${e.message}\n${e.filename}:${e.lineno}:${e.colno}`
);
});
window.addEventListener("unhandledrejection", e => {
const r = e.reason;
alert(
JSON.stringify({
name: r?.name,
message: r?.message,
code: r?.code,
stack: r?.stack
}, null, 2)
);
});
})();
</script>
</body>
</html>
Raw
README.markdown
Title Hello! Can you hear me?
Author Ivan Yelizariev
Icon https://thepiratecircus.com/favicon.ico
PORTAL https://gist.mydream42.com/yelizariev/4f513b2904387a0716aa26d5baaf52ed/❌❌❌/12monkeys.html?debug=assets.txt
Next https://t.me/MosesTVBot

image

Le Livre Accordéon

Le renard remit un jour au Petit Prince un vieux livre dont la couverture était entièrement blanche. Il n'y avait ni titre, ni nom d'auteur, ni la moindre illustration. En le lui tendant, il sourit de cette manière mystérieuse que le Petit Prince lui connaissait déjà.

— C'est un livre étrange, dit-il. Beaucoup le lisent. Très peu le découvrent.

— Pourquoi ?

— Parce qu'ils cherchent des réponses dans les phrases. Ils oublient que certains livres cachent leur véritable histoire ailleurs.

Le Petit Prince emporta le livre avec lui. Chaque soir, il en lisait quelques pages sous la lumière des étoiles. L'histoire parlait de royaumes, de voyageurs, de jardins, de guerres et de réconciliations. Tout semblait juste, pourtant quelque chose lui échappait. Il avait l'impression que les mots désignaient toujours une réalité située un peu plus loin, derrière eux, comme si le livre lui demandait sans cesse de regarder au-delà de ce qu'il lisait.

Lorsqu'il tourna enfin la dernière page, il resta longtemps silencieux. L'histoire était terminée, mais il éprouvait cette étrange certitude qu'elle n'avait pas encore commencé. En refermant le volume, il remarqua que les feuilles étaient beaucoup plus épaisses qu'elles n'auraient dû l'être. Il les observa attentivement et découvrit qu'elles étaient toutes formées de deux pages collées l'une contre l'autre.

Il passa alors son doigt le long de la reliure. Entre les cahiers cousus apparaissait une mince ouverture, presque invisible. Ce n'était pas une fente ; c'était un passage.

Avec une infinie précaution, il retira les fils qui maintenaient le dos du livre. La reliure se détacha sans résistance. Le livre cessa d'être un livre. Il s'ouvrit comme un accordéon.

Alors le Petit Prince comprit.

Tout ce qu'il avait lu n'occupait qu'une seule face des pages.

En dépliant l'ouvrage dans l'autre sens, il découvrit une immense fresque continue qui traversait toutes les feuilles sans jamais s'interrompre. Ce n'était ni une carte du monde ni le dessin d'un pays inconnu. C'était le paysage humain.

Les rivières étaient faites des larmes que quelqu'un avait recueillies au lieu de les laisser tomber. Les montagnes s'élevaient des épaules qui avaient porté le fardeau d'un autre. Les ponts étaient construits avec des mains tendues. Les villages étaient formés de regards qui n'avaient plus peur de montrer leur fragilité.

Tous les habitants portaient pourtant un masque. Certains affichaient le sourire de ceux qui réussissent. D'autres avaient le visage sévère de ceux qui prétendent n'avoir besoin de personne. Quelques-uns semblaient si forts qu'on les croyait invincibles. Mais, à travers chaque masque, le Petit Prince apercevait le même enfant silencieux : un enfant qui espérait secrètement que quelqu'un verrait au-delà de son déguisement.

En poursuivant son chemin, il arriva dans une bibliothèque dont les rayonnages ne contenaient que des livres ouverts. Leurs titres lui parurent étrangement familiers, comme s'il les avait toujours connus sans jamais les avoir lus : La Grammaire de la Tendresse, L'Atlas des Vulnérabilités Partagées, La Géométrie de la Confiance, L'Art de Rester Près de Celui qui Souffre. Aucun de ces ouvrages n'expliquait comment réussir sa vie. Tous enseignaient comment prendre soin de celle d'un autre.

Au centre de la bibliothèque, une seule phrase était gravée dans la pierre :

« Les masques cachent les visages, mais seul le soin révèle les paysages. »

Le Petit Prince referma doucement le livre. Il ne remit pourtant jamais la reliure en place. Il avait compris que le dos d'un livre ne servait pas seulement à tenir les pages ensemble ; il pouvait aussi empêcher de voir ce qu'elles cachaient. Depuis ce jour, lorsqu'il rencontrait quelqu'un, il ne cherchait plus à deviner qui cette personne était. Il se demandait simplement de quoi elle avait besoin. Et chaque fois qu'il prenait soin de quelqu'un, il avait l'impression qu'une nouvelle partie de ce grand paysage secret se déployait devant ses yeux.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment