Files
LOLv333/status/index.ouvert.html
T

61 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="../assets/favicon_open.svg" />
<!-- STYLE A IMPORTER EN 1ER -->
<link rel="stylesheet" href="/status/openStyle.css">
<link rel="stylesheet" href="../style/animation.css">
<title>Le LOL est Ouvert</title>
</head>
<body id="lolIsOpen">
<canvas data-cute-texture class="cute-texture"></canvas>
<main id="openContainer">
<section>
<p>Le LOL est actuellement</p>
<h3 id="lolStatus">ouvert !</h3>
</section>
</main>
<script type="x-shader/glsl+fragment">
// Some random values computed for each frame
uniform highp vec4 uRandom;
// Size (in logical pixel) of current CuteTexture canvas
uniform highp vec2 uCanvasSize;
// Number of seconds since canvas was initialized
uniform lowp float uTime;
// Coordinates of current pixel being computed from [0,0] (top left) to [1,1] (bottom right)
varying highp vec2 vTextureCoord;
void main() {
highp float waveSize = 10.0;
highp vec2 coords = (uCanvasSize.xy * vTextureCoord.xy) / waveSize;
highp float lum = abs(sin(coords.y-uTime)) + 0.631372549;
lowp float opacity = 0.5;
highp vec3 baseColor = vec3(
0.0,
lum,
0.0
);
highp vec3 rotatedColor = hue_rotate(baseColor, 13.12);
gl_FragColor = vec4(
rotatedColor.x*opacity,
rotatedColor.y*opacity,
rotatedColor.z*opacity,
opacity
);
}
</script>
<script type="module">
import {initCuteTexture} from "../js/cuteTexture.js"
initCuteTexture()
</script>
</body>
</html>