concoction

��

mybb@mybb.ru (concoction) — Wed, 01 Oct 2025 17:34:23 +0300

[html]
<style>

#container {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.a-title { font-size: 26px;
position: absolute;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: conic-gradient(#ed0101, blue);
pointer-events: none;
mix-blend-mode: difference;
filter: drop-shadow(2px 4px 6px black);
margin-top: -10px;
}
.a-second-title {
position: absolute;
margin-top: 40px;
pointer-events: none;
-webkit-text-stroke: 1.3px white;
letter-spacing: 2px;
font-size: 25px;
font-weight: 900;
mix-blend-mode: color-dodge;
}

canvas {
width: 100%;
height: 100%;
}

</style>
<script>
'use strict';

const canvas = document.getElementsByTagName('canvas')[0];
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

let config = {
TEXTURE_DOWNSAMPLE: 1,
DENSITY_DISSIPATION: 0.98,
VELOCITY_DISSIPATION: 0.99,
PRESSURE_DISSIPATION: 0.8,
PRESSURE_ITERATIONS: 25,
CURL: 28,
SPLAT_RADIUS: 0.004 };

let pointers = [];
let splatStack = [];

const { gl, ext } = getWebGLContext(canvas);

function getWebGLContext(canvas) {
const params = { alpha: false, depth: false, stencil: false, antialias: false };

let gl = canvas.getContext('webgl2', params);
const isWebGL2 = !!gl;
if (!isWebGL2)
gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);

let halfFloat;
let supportLinearFiltering;
if (isWebGL2) {
gl.getExtension('EXT_color_buffer_float');
supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
} else {
halfFloat = gl.getExtension('OES_texture_half_float');
supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);

const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
let formatRGBA;
let formatRG;
let formatR;

if (isWebGL2)
{
formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
} else

{
formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
}

return {
gl,
ext: {
formatRGBA,
formatRG,
formatR,
halfFloatTexType,
supportLinearFiltering } };

}

function getSupportedFormat(gl, internalFormat, format, type)
{
if (!supportRenderTextureFormat(gl, internalFormat, format, type))
{
switch (internalFormat) {

case gl.R16F:
return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
case gl.RG16F:
return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
default:
return null;}

}

return {
internalFormat,
format };

}

function supportRenderTextureFormat(gl, internalFormat, format, type) {
let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);

let fbo = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status != gl.FRAMEBUFFER_COMPLETE)
return false;
return true;
}

function pointerPrototype() {
this.id = -1;
this.x = 0;
this.y = 0;
this.dx = 0;
this.dy = 0;
this.down = false;
this.moved = false;
this.color = [30, 0, 300];
}

pointers.push(new pointerPrototype());

class GLProgram {
constructor(vertexShader, fragmentShader) {
this.uniforms = {};
this.program = gl.createProgram();

gl.attachShader(this.program, vertexShader);
gl.attachShader(this.program, fragmentShader);
gl.linkProgram(this.program);

if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
throw gl.getProgramInfoLog(this.program);

const uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
for (let i = 0; i < uniformCount; i++) {
const uniformName = gl.getActiveUniform(this.program, i).name;
this.uniforms[uniformName] = gl.getUniformLocation(this.program, uniformName);
}
}

bind() {
gl.useProgram(this.program);
}}

function compileShader(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
throw gl.getShaderInfoLog(shader);

return shader;
};

const baseVertexShader = compileShader(gl.VERTEX_SHADER, `
precision highp float;
precision mediump sampler2D;

attribute vec2 aPosition;
varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform vec2 texelSize;

void main () {
vUv = aPosition * 0.5 + 0.5;
vL = vUv - vec2(texelSize.x, 0.0);
vR = vUv + vec2(texelSize.x, 0.0);
vT = vUv + vec2(0.0, texelSize.y);
vB = vUv - vec2(0.0, texelSize.y);
gl_Position = vec4(aPosition, 0.0, 1.0);
}
`);

const clearShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uTexture;
uniform float value;

void main () {
gl_FragColor = value * texture2D(uTexture, vUv);
}
`);

const displayShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uTexture;

void main () {
gl_FragColor = texture2D(uTexture, vUv);
}
`);

const splatShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uTarget;
uniform float aspectRatio;
uniform vec3 color;
uniform vec2 point;
uniform float radius;

void main () {
vec2 p = vUv - point.xy;
p.x *= aspectRatio;
vec3 splat = exp(-dot(p, p) / radius) * color;
vec3 base = texture2D(uTarget, vUv).xyz;
gl_FragColor = vec4(base + splat, 1.0);
}
`);

const advectionManualFilteringShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uVelocity;
uniform sampler2D uSource;
uniform vec2 texelSize;
uniform float dt;
uniform float dissipation;

vec4 bilerp (in sampler2D sam, in vec2 p) {
vec4 st;
st.xy = floor(p - 0.5) + 0.5;
st.zw = st.xy + 1.0;
vec4 uv = st * texelSize.xyxy;
vec4 a = texture2D(sam, uv.xy);
vec4 b = texture2D(sam, uv.zy);
vec4 c = texture2D(sam, uv.xw);
vec4 d = texture2D(sam, uv.zw);
vec2 f = p - st.xy;
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}

void main () {
vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;
gl_FragColor = dissipation * bilerp(uSource, coord);
gl_FragColor.a = 1.0;
}
`);

const advectionShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
uniform sampler2D uVelocity;
uniform sampler2D uSource;
uniform vec2 texelSize;
uniform float dt;
uniform float dissipation;

void main () {
vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
gl_FragColor = dissipation * texture2D(uSource, coord);
gl_FragColor.a = 1.0;
}
`);

const divergenceShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uVelocity;

vec2 sampleVelocity (in vec2 uv) {
vec2 multiplier = vec2(1.0, 1.0);
if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }
if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }
if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }
if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }
return multiplier * texture2D(uVelocity, uv).xy;
}

void main () {
float L = sampleVelocity(vL).x;
float R = sampleVelocity(vR).x;
float T = sampleVelocity(vT).y;
float B = sampleVelocity(vB).y;
float div = 0.5 * (R - L + T - B);
gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
}
`);

const curlShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uVelocity;

void main () {
float L = texture2D(uVelocity, vL).y;
float R = texture2D(uVelocity, vR).y;
float T = texture2D(uVelocity, vT).x;
float B = texture2D(uVelocity, vB).x;
float vorticity = R - L - T + B;
gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);
}
`);

const vorticityShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uVelocity;
uniform sampler2D uCurl;
uniform float curl;
uniform float dt;

void main () {
float T = texture2D(uCurl, vT).x;
float B = texture2D(uCurl, vB).x;
float C = texture2D(uCurl, vUv).x;
vec2 force = vec2(abs(T) - abs(B), 0.0);
force *= 1.0 / length(force + 0.00001) * curl * C;
vec2 vel = texture2D(uVelocity, vUv).xy;
gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
}
`);

const pressureShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uPressure;
uniform sampler2D uDivergence;

vec2 boundary (in vec2 uv) {
uv = min(max(uv, 0.0), 1.0);
return uv;
}

void main () {
float L = texture2D(uPressure, boundary(vL)).x;
float R = texture2D(uPressure, boundary(vR)).x;
float T = texture2D(uPressure, boundary(vT)).x;
float B = texture2D(uPressure, boundary(vB)).x;
float C = texture2D(uPressure, vUv).x;
float divergence = texture2D(uDivergence, vUv).x;
float pressure = (L + R + B + T - divergence) * 0.25;
gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
}
`);

const gradientSubtractShader = compileShader(gl.FRAGMENT_SHADER, `
precision highp float;
precision mediump sampler2D;

varying vec2 vUv;
varying vec2 vL;
varying vec2 vR;
varying vec2 vT;
varying vec2 vB;
uniform sampler2D uPressure;
uniform sampler2D uVelocity;

vec2 boundary (in vec2 uv) {
uv = min(max(uv, 0.0), 1.0);
return uv;
}

void main () {
float L = texture2D(uPressure, boundary(vL)).x;
float R = texture2D(uPressure, boundary(vR)).x;
float T = texture2D(uPressure, boundary(vT)).x;
float B = texture2D(uPressure, boundary(vB)).x;
vec2 velocity = texture2D(uVelocity, vUv).xy;
velocity.xy -= vec2(R - L, T - B);
gl_FragColor = vec4(velocity, 0.0, 1.0);
}
`);

let textureWidth;
let textureHeight;
let density;
let velocity;
let divergence;
let curl;
let pressure;
initFramebuffers();

const clearProgram = new GLProgram(baseVertexShader, clearShader);
const displayProgram = new GLProgram(baseVertexShader, displayShader);
const splatProgram = new GLProgram(baseVertexShader, splatShader);
const advectionProgram = new GLProgram(baseVertexShader, ext.supportLinearFiltering ? advectionShader : advectionManualFilteringShader);
const divergenceProgram = new GLProgram(baseVertexShader, divergenceShader);
const curlProgram = new GLProgram(baseVertexShader, curlShader);
const vorticityProgram = new GLProgram(baseVertexShader, vorticityShader);
const pressureProgram = new GLProgram(baseVertexShader, pressureShader);
const gradienSubtractProgram = new GLProgram(baseVertexShader, gradientSubtractShader);

function initFramebuffers() {
textureWidth = gl.drawingBufferWidth >> config.TEXTURE_DOWNSAMPLE;
textureHeight = gl.drawingBufferHeight >> config.TEXTURE_DOWNSAMPLE;

const texType = ext.halfFloatTexType;
const rgba = ext.formatRGBA;
const rg = ext.formatRG;
const r = ext.formatR;

density = createDoubleFBO(2, textureWidth, textureHeight, rgba.internalFormat, rgba.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
velocity = createDoubleFBO(0, textureWidth, textureHeight, rg.internalFormat, rg.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
divergence = createFBO(4, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
curl = createFBO(5, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
pressure = createDoubleFBO(6, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
}

function createFBO(texId, w, h, internalFormat, format, type, param) {
gl.activeTexture(gl.TEXTURE0 + texId);
let texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);

let fbo = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
gl.viewport(0, 0, w, h);
gl.clear(gl.COLOR_BUFFER_BIT);

return [texture, fbo, texId];
}

function createDoubleFBO(texId, w, h, internalFormat, format, type, param) {
let fbo1 = createFBO(texId, w, h, internalFormat, format, type, param);
let fbo2 = createFBO(texId + 1, w, h, internalFormat, format, type, param);

return {
get read() {
return fbo1;
},
get write() {
return fbo2;
},
swap() {
let temp = fbo1;
fbo1 = fbo2;
fbo2 = temp;
} };

}

const blit = (() => {
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(0);

return destination => {
gl.bindFramebuffer(gl.FRAMEBUFFER, destination);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
};
})();

let lastTime = Date.now();
multipleSplats(parseInt(Math.random() * 20) + 5);
update();

function update() {
resizeCanvas();

const dt = Math.min((Date.now() - lastTime) / 1000, 0.016);
lastTime = Date.now();

gl.viewport(0, 0, textureWidth, textureHeight);

if (splatStack.length > 0)
multipleSplats(splatStack.pop());

advectionProgram.bind();
gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
gl.uniform1i(advectionProgram.uniforms.uSource, velocity.read[2]);
gl.uniform1f(advectionProgram.uniforms.dt, dt);
gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
blit(velocity.write[1]);
velocity.swap();

gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
gl.uniform1i(advectionProgram.uniforms.uSource, density.read[2]);
gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
blit(density.write[1]);
density.swap();

for (let i = 0; i < pointers.length; i++) {
const pointer = pointers[i];
if (pointer.moved) {
splat(pointer.x, pointer.y, pointer.dx, pointer.dy, pointer.color);
pointer.moved = false;
}
}

curlProgram.bind();
gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read[2]);
blit(curl[1]);

vorticityProgram.bind();
gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read[2]);
gl.uniform1i(vorticityProgram.uniforms.uCurl, curl[2]);
gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
gl.uniform1f(vorticityProgram.uniforms.dt, dt);
blit(velocity.write[1]);
velocity.swap();

divergenceProgram.bind();
gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read[2]);
blit(divergence[1]);

clearProgram.bind();
let pressureTexId = pressure.read[2];
gl.activeTexture(gl.TEXTURE0 + pressureTexId);
gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
gl.uniform1i(clearProgram.uniforms.uTexture, pressureTexId);
gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE_DISSIPATION);
blit(pressure.write[1]);
pressure.swap();

pressureProgram.bind();
gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence[2]);
pressureTexId = pressure.read[2];
gl.uniform1i(pressureProgram.uniforms.uPressure, pressureTexId);
gl.activeTexture(gl.TEXTURE0 + pressureTexId);
for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
blit(pressure.write[1]);
pressure.swap();
}

gradienSubtractProgram.bind();
gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read[2]);
gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read[2]);
blit(velocity.write[1]);
velocity.swap();

gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
displayProgram.bind();
gl.uniform1i(displayProgram.uniforms.uTexture, density.read[2]);
blit(null);

requestAnimationFrame(update);
}

function splat(x, y, dx, dy, color) {
splatProgram.bind();
gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read[2]);
gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
gl.uniform2f(splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height);
gl.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);
gl.uniform1f(splatProgram.uniforms.radius, config.SPLAT_RADIUS);
blit(velocity.write[1]);
velocity.swap();

gl.uniform1i(splatProgram.uniforms.uTarget, density.read[2]);
gl.uniform3f(splatProgram.uniforms.color, color[0] * 0.3, color[1] * 0.3, color[2] * 0.3);
blit(density.write[1]);
density.swap();
}

function multipleSplats(amount) {
for (let i = 0; i < amount; i++) {
const color = [Math.random() * 10, Math.random() * 10, Math.random() * 10];
const x = canvas.width * Math.random();
const y = canvas.height * Math.random();
const dx = 1000 * (Math.random() - 0.5);
const dy = 1000 * (Math.random() - 0.5);
splat(x, y, dx, dy, color);
}
}

function resizeCanvas() {
if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
initFramebuffers();
}
}

canvas.addEventListener('mousemove', e => {
pointers[0].moved = pointers[0].down;
pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
pointers[0].dy = (e.offsetY - pointers[0].y) * 10.0;
pointers[0].x = e.offsetX;
pointers[0].y = e.offsetY;
});

canvas.addEventListener('touchmove', e => {
e.preventDefault();
const touches = e.targetTouches;
for (let i = 0; i < touches.length; i++) {
let pointer = pointers[i];
pointer.moved = pointer.down;
pointer.dx = (touches[i].pageX - pointer.x) * 10.0;
pointer.dy = (touches[i].pageY - pointer.y) * 10.0;
pointer.x = touches[i].pageX;
pointer.y = touches[i].pageY;
}
}, false);

canvas.addEventListener('mousemove', () => {
pointers[0].down = true;
pointers[0].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
});

canvas.addEventListener('touchstart', e => {
e.preventDefault();
const touches = e.targetTouches;
for (let i = 0; i < touches.length; i++) {
if (i >= pointers.length)
pointers.push(new pointerPrototype());

pointers[i].id = touches[i].identifier;
pointers[i].down = true;
pointers[i].x = touches[i].pageX;
pointers[i].y = touches[i].pageY;
pointers[i].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
}
});

window.addEventListener('mouseleave', () => {
pointers[0].down = false;
});

window.addEventListener('touchend', e => {
const touches = e.changedTouches;
for (let i = 0; i < touches.length; i++)
for (let j = 0; j < pointers.length; j++)
if (touches[i].identifier == pointers[j].id)
pointers[j].down = false;
});
</script>

<section id='container'>
<h41 class='a-title'>SAILOR MOON</h41>
<h42 class='a-second-title'>�� </h42>
<canvas></canvas>
</section>

[/html]

��

mybb@mybb.ru (concoction) — Tue, 30 Sep 2025 21:19:10 +0300

[html]<style>
body {
margin: 0;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: #000000;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.label {
font-size: 20px;
font-weight: 500;
color: #ffffff;
opacity: 0.85;
margin-bottom: 16px;
text-align: center;
transition: opacity 0.25s ease-out;
}

.glow-text {
position: relative;
font-size: 30px;
font-weight: 500;
letter-spacing: -0.015em;
color: #ffffff;
filter: brightness(1.1);
z-index: 1;
}

.glow-text::before {
content: attr(data-text);
position: absolute;
inset: 0;
background: linear-gradient(90deg, #00cfff, #a600ff, #ff006e, #ff8800);
filter: blur(20px) brightness(0.8);
opacity: 0.7;
border-radius: 100px;
z-index: -1;
pointer-events: none;
background-size: 200% 200%;
animation: gradientShift 12s ease-in-out infinite;
}

.glow-text::after {
content: attr(data-text);
position: absolute;
inset: 0;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
letter-spacing: inherit;
background: linear-gradient(90deg, #00cfff, #a600ff, #ff006e, #ff8800);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
mix-blend-mode: color-burn;
filter: blur(3px) brightness(1.3);
z-index: 0;
pointer-events: none;
background-size: 200% 200%;
animation: gradientShift 12s ease-in-out infinite;
}

@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

</style>
<div class="tilt-wrapper">
<div class="hero">
<div class="label">MacBook Pro</div>
<div class="glow-text" data-text="Built for Apple Intelligence.">
Built for Apple Intelligence.
</div>
</div>
</div>[/html]

��

mybb@mybb.ru (concoction) — Mon, 29 Sep 2025 19:19:14 +0300

[html]<style>
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap");

body {
--c-glass: #bbbbbc;
--c-light: #fff;
--c-dark: #000;

--c-content: #224;
--c-action: #0052f5;

--c-bg: #e8e8e9;

--glass-reflex-dark: 1;
--glass-reflex-light: 1;

--saturation: 150%;

font-size: 20px;
font-family: "DM Sans", sans-serif;
font-optical-sizing: auto;
background: var(--c-bg);
color: var(--c-content);

transition: background 400ms cubic-bezier(1, 0, 0.4, 1),
color 400ms cubic-bezier(1, 0, 0.4, 1);
}

body:has(input[value="dark"]:checked) {
--c-glass: #bbbbbc;
--c-light: #fff;
--c-dark: #000;

--c-content: #e1e1e1;
--c-action: #03d5ff;

--c-bg: #1b1b1d;

--glass-reflex-dark: 2;
--glass-reflex-light: 0.3;

--saturation: 150%;
}

body:has(input[value="dim"]:checked) {
--c-light: #99deff;
--c-dark: #20001b;
--c-glass: hsl(335 250% 74% / 1);

--c-content: #d5dbe2;
--c-action: #ff48a9;

--c-bg: #152433;

--glass-reflex-dark: 2;
--glass-reflex-light: 0.7;

--saturation: 200%;
}

.switcher {
position: fixed;
z-index: 1;
top: 40px;
left: 50%;
translate: -50%;
display: flex;
align-items: center;
gap: 8px;
width: 244px;
max-width: 244px;
height: 70px;
box-sizing: border-box;
padding: 8px 12px 10px;
margin: 0 auto;
border: none;
border-radius: 99em;
font-size: var(--fz);
background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
-webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
box-shadow: inset 0 0 0 1px
color-mix(
in srgb,
var(--c-light) calc(var(--glass-reflex-light) * 10%),
transparent
),
inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 90%), transparent),
inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 80%), transparent),
inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 60%), transparent),
inset -0.3px -1px 4px 0px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
transparent
),
inset -1.5px 2.5px 0px -2px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
transparent
),
inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
calc(var(--glass-reflex-dark) * 20%), transparent),
inset 2px -6.5px 1px -4px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
transparent
),
0px 1px 5px 0px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
transparent
),
0px 6px 16px 0px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
transparent
);
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

.switcher__legend {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}

.switcher__input {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}

.switcher__icon {
display: block;
width: 100%;
transition: scale 200ms cubic-bezier(0.5, 0, 0, 1);
}

.switcher__filter {
position: absolute;
width: 0;
height: 0;
z-index: -1;
}

.switcher__option {
--c: var(--c-content);
display: flex;
justify-content: center;
align-items: center;
padding: 0 16px;
width: 68px;
height: 100%;
box-sizing: border-box;
border-radius: 99em;
opacity: 1;
transition: all 160ms;
}

.switcher__option:hover {
--c: var(--c-action);
cursor: pointer;
}

.switcher__option:hover .switcher__icon {
scale: 1.2;
}

.switcher__option:has(input:checked) {
--c: var(--c-content);
cursor: auto;
}

.switcher__option:has(input:checked) .switcher__icon {
scale: 1;
}

.switcher::after {
content: "";
position: absolute;
left: 4px;
top: 4px;
display: block;
width: 84px;
height: calc(100% - 10px);
border-radius: 99em;
background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
z-index: -1;
box-shadow: inset 0 0 0 1px
color-mix(
in srgb,
var(--c-light) calc(var(--glass-reflex-light) * 10%),
transparent
),
inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 90%), transparent),
inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 80%), transparent),
inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light)
calc(var(--glass-reflex-light) * 60%), transparent),
inset -1px 2px 3px -1px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
transparent
),
inset 0px -4px 1px -2px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
transparent
),
0px 3px 6px 0px
color-mix(
in srgb,
var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
transparent
);
}

.switcher:has(input[c-option="1"]:checked)::after {
translate: 0 0;
transform-origin: right;
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
translate 400ms cubic-bezier(1, 0, 0.4, 1);
animation: scaleToggle 440ms ease;
}

.switcher:has(input[c-option="2"]:checked)::after {
translate: 76px 0;
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
translate 400ms cubic-bezier(1, 0, 0.4, 1);
animation: scaleToggle2 440ms ease;
}

.switcher[c-previous="1"]:has(input[c-option="2"]:checked)::after {
transform-origin: left;
}

.switcher[c-previous="3"]:has(input[c-option="2"]:checked)::after {
transform-origin: right;
}

.switcher:has(input[c-option="3"]:checked)::after {
translate: 152px 0;
transform-origin: left;
transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
translate 400ms cubic-bezier(1, 0, 0.4, 1);
animation: scaleToggle3 440ms ease;
}

@keyframes scaleToggle {
0% {
scale: 1 1;
}
50% {
scale: 1.1 1;
}
100% {
scale: 1 1;
}
}

@keyframes scaleToggle2 {
0% {
scale: 1 1;
}
50% {
scale: 1.2 1;
}
100% {
scale: 1 1;
}
}

@keyframes scaleToggle3 {
0% {
scale: 1 1;
}
50% {
scale: 1.1 1;
}
100% {
scale: 1 1;
}
}

/* //////////////////////////////////////////
/ Article Styles //////////////////////// */

.article {
display: flex;
flex-direction: column;
align-items: center;
padding: 5em 2em;
}

h1,
h2,
p,
blockquote {
width: 100%;
max-width: 600px;
box-sizing: border-box;
}

h1 {
font-size: 3em;
margin: 1.4em 0 0.6em;
}

h2 {
font-size: 2em;
margin: 1.4em 0 0.6em;
}

p {
line-height: 160%;
margin: 0 0 1em;
}

blockquote {
margin-left: 0;
margin-right: 0;
font-size: 2em;
padding-left: 1em;
border-left: 0.1em solid currentColor;
}

figure {
margin: 1em 0 2em;
display: flex;
flex-direction: column;
align-items: center;
}

figcaption {
max-width: 600px;
margin-top: 1em;
font-size: 0.8em;
color: color-mix(in srgb, var(--c-content) 60%, var(--c-bg));
}

a {
color: var(--c-action);
text-decoration-thickness: 0.05em;
text-underline-position: under;
text-decoration-color: color-mix(in srgb, currentColor, transparent 70%);
transition: color 160ms, text-decoration-color 160ms;
}

a:hover {
color: color-mix(in srgb, var(--c-action), var(--c-content) 40%);
text-decoration-color: color-mix(in srgb, currentColor, transparent 30%);
}

img {
display: block;
border-radius: 0.8em;
width: 100%;
max-width: 700px;
aspect-ratio: 5 / 3;
object-fit: cover;
}

.box {
padding: 1em 1.4em;
border-top: 4px solid color-mix(in srgb, var(--c-action) 50%, transparent);
border-radius: 0.8em;
background-color: color-mix(in srgb, var(--c-action) 8%, var(--c-bg));
transition: background 400ms cubic-bezier(1, 0, 0.4, 1);
}

</style>
<script>
const switcher = document.querySelector(".switcher");

const trackPrevious = (el) => {
const radios = el.querySelectorAll('input[type="radio"]');
let previousValue = null;

// init first select
const initiallyChecked = el.querySelector('input[type="radio"]:checked');
if (initiallyChecked) {
previousValue = initiallyChecked.getAttribute("c-option");
el.setAttribute("c-previous", previousValue);
}

radios.forEach((radio) => {
radio.addEventListener("change", () => {
if (radio.checked) {
el.setAttribute("c-previous", previousValue ?? "");
previousValue = radio.getAttribute("c-option");
}
});
});
};

trackPrevious(switcher);

</script>
<fieldset class="switcher">
<legend class="switcher__legend">Choose theme</legend>
<label class="switcher__option">
<input class="switcher__input" type="radio" name="theme" value="light" c-option="1" checked />
<svg class="switcher__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
<path fill="var(--c)" fill-rule="evenodd" d="M18 12a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" clip-rule="evenodd" />
<path fill="var(--c)" d="M17 6.038a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0v-3ZM24.244 7.742a1 1 0 1 1 1.618 1.176L24.1 11.345a1 1 0 1 1-1.618-1.176l1.763-2.427ZM29.104 13.379a1 1 0 0 1 .618 1.902l-2.854.927a1 1 0 1 1-.618-1.902l2.854-.927ZM29.722 20.795a1 1 0 0 1-.619 1.902l-2.853-.927a1 1 0 1 1 .618-1.902l2.854.927ZM25.862 27.159a1 1 0 0 1-1.618 1.175l-1.763-2.427a1 1 0 1 1 1.618-1.175l1.763 2.427ZM19 30.038a1 1 0 0 1-2 0v-3a1 1 0 1 1 2 0v3ZM11.755 28.334a1 1 0 0 1-1.618-1.175l1.764-2.427a1 1 0 1 1 1.618 1.175l-1.764 2.427ZM6.896 22.697a1 1 0 1 1-.618-1.902l2.853-.927a1 1 0 1 1 .618 1.902l-2.853.927ZM6.278 15.28a1 1 0 1 1 .618-1.901l2.853.927a1 1 0 1 1-.618 1.902l-2.853-.927ZM10.137 8.918a1 1 0 0 1 1.618-1.176l1.764 2.427a1 1 0 0 1-1.618 1.176l-1.764-2.427Z" />
</svg>
</label>
<label class="switcher__option">
<input class="switcher__input" type="radio" name="theme" value="dark" c-option="2" />
<svg class="switcher__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
<path fill="var(--c)" d="M12.5 8.473a10.968 10.968 0 0 1 8.785-.97 7.435 7.435 0 0 0-3.737 4.672l-.09.373A7.454 7.454 0 0 0 28.732 20.4a10.97 10.97 0 0 1-5.232 7.125l-.497.27c-5.014 2.566-11.175.916-14.234-3.813l-.295-.483C5.53 18.403 7.13 11.93 12.017 8.77l.483-.297Zm4.234.616a8.946 8.946 0 0 0-2.805.883l-.429.234A9 9 0 0 0 10.206 22.5l.241.395A9 9 0 0 0 22.5 25.794l.416-.255a8.94 8.94 0 0 0 2.167-1.99 9.433 9.433 0 0 1-2.782-.313c-5.043-1.352-8.036-6.535-6.686-11.578l.147-.491c.242-.745.573-1.44.972-2.078Z" />
</svg>
</label>
<label class="switcher__option">
<input class="switcher__input" type="radio" name="theme" value="dim" c-option="3" />
<svg class="switcher__icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
<path fill="var(--c)" d="M5 21a1 1 0 0 1 1-1h24a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1ZM12 25a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H13a1 1 0 0 1-1-1ZM15 29a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1ZM18 13a6 6 0 0 1 5.915 7h-2.041A4.005 4.005 0 0 0 18 15a4 4 0 0 0-3.874 5h-2.041A6 6 0 0 1 18 13ZM17 7.038a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0v-3ZM24.244 8.742a1 1 0 1 1 1.618 1.176L24.1 12.345a1 1 0 1 1-1.618-1.176l1.763-2.427ZM29.104 14.379a1 1 0 0 1 .618 1.902l-2.854.927a1 1 0 1 1-.618-1.902l2.854-.927ZM6.278 16.28a1 1 0 1 1 .618-1.901l2.853.927a1 1 0 1 1-.618 1.902l-2.853-.927ZM10.137 9.918a1 1 0 0 1 1.618-1.176l1.764 2.427a1 1 0 0 1-1.618 1.176l-1.764-2.427Z" />
</svg>
</label>

<div class="switcher__filter">
<svg>
<filter id="switcher" primitiveUnits="objectBoundingBox">
<feImage result="map" width="100%" height="100%" x="0" y="0" href="data:image/webp;base64,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" />

<article class="article">
<h1>Liquid glass</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui maxime optio quam debitis autem, maiores odio tenetur dicta aperiam aliquam, iusto nisi ipsum tempore dolore doloremque facere non culpa sint sequi ducimus corporis veritatis cumque corrupti sed. Ipsa dolor quod alias dicta dolores. Ducimus pariatur nostrum quo, impedit <a href="">facilis voluptatibus</a>! Non doloremque, facere neque dolorem animi earum odio placeat quae voluptatem nisi nihil deleniti voluptatibus harum magnam adipisci tenetur. Ab aliquid reprehenderit accusamus id quae velit quasi nostrum possimus ipsa vel. Voluptate nisi impedit placeat nemo neque asperiores iure saepe, eius eligendi odit quisquam delectus veniam autem, sequi laborum atque
</p>
<figure>
<img src="https://images.unsplash.com/photo-1706720094773-d91e070e4b90?q=80&w=2515&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Photo by Neeqolah Creative Works on Unsplash">
<figcaption>Photo by Neeqolah Creative Works on <a href="https://unsplash.com/photos/a-close-up-of-a-green-object-on-a-yellow-background-A2kyFEwh3zo">Unsplash</a></figcaption>
</figure>
<p>
Sit amet consectetur adipisicing elit. Quibusdam illum in voluptates omnis reprehenderit inventore perferendis dolores, architecto doloribus. Quam error qui nam quis! Dolorum, dolore saepe ipsam quae aliquam tenetur dolores dolor repellendus facere a quasi soluta voluptate provident earum cum. Nostrum consequuntur corporis quibusdam tempora amet, animi inventore dicta voluptas nisi placeat ut illum explicabo! Consequatur, accusamus. Labore quo perspiciatis quos est molestiae illo possimus deserunt sed amet maxime, dolorum praesentium nihil doloribus similique cumque eveniet qui vero eius magni reprehenderit aspernatur, et, quod voluptatum? Voluptatem, eveniet vel sunt nesciunt recusandae alias maiores optio labore, dolorum aut possimus iusto quia. Non quas excepturi ea, maxime mollitia fugit, animi alias ad repudiandae dolores facere molestiae id, nemo temporibus explicabo.
</p>
<blockquote>
Et aliquam libero deserunt maxime! Perspiciatis neque deserunt sequi deleniti!
</blockquote>
<p>
Recusandae doloribus, ullam inventore esse culpa cupiditate dignissimos qui ducimus possimus ipsum reprehenderit, suscipit debitis nihil sit. Animi eligendi sed molestiae. Repellat, est ut eos voluptates tempora quisquam corporis mollitia, excepturi commodi cum dolore asperiores eaque debitis fuga quidem! A laborum ab reiciendis saepe rerum iste. Nisi quos earum ex nulla neque <a href="">tempora explicabo reiciendis</a> vitae sapiente accusamus tempore consequatur nemo, placeat magni quasi corrupti nobis alias, rerum ipsam fuga quisquam tenetur repellendus! Sit laborum aut odit pariatur quos cupiditate iure maiores. Quis nemo dicta numquam autem debitis blanditiis, odio explicabo maxime officiis magni soluta dolor suscipit, quo nisi eaque deleniti dolorem aperiam deserunt. Animi dolor expedita consectetur deserunt, quae id ab.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi aperiam enim eos repellendus molestiae, ad ab maxime et, aut nam culpa eveniet. Eaque consequuntur laudantium ex dolore voluptas rem cumque, quos voluptatibus aut maxime. Animi enim odio ea porro molestiae laudantium ipsam nulla quia distinctio quod incidunt pariatur accusamus possimus laborum veritatis maxime, asperiores quasi!
</p>
<h2>
Doloremque nisi eius quis
</h2>
<p>Magnam quo voluptate vitae voluptatem expedita vel illum ut. Tempore, sed? Sunt distinctio minus dolore, consequuntur eos qui eveniet error rerum tempora, autem et quaerat, ea repellendus unde iure. Fuga ad tempore cupiditate animi iste, eius nam beatae, aliquid quae id iusto perspiciatis. Quos quis cum itaque facilis libero sequi quaerat ipsam hic blanditiis doloribus modi sapiente tempora ipsum fugiat similique cupiditate beatae provident eos natus doloremque alias, sed praesentium.
</p>
<figure>
<img src="https://images.unsplash.com/photo-1734606901283-489b25f7aa9b?q=80&w=2360&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Photo by Neeqolah Creative Works on Unsplash">
<figcaption>Photo by Irene Demetri on <a href="https://unsplash.com/photos/a-close-up-of-a-green-object-on-a-yellow-background-A2kyFEwh3zo">Unsplash</a></figcaption>
</figure>
<p>
Quod iste recusandae sed labore corporis ea provident debitis hic maxime placeat alias rem cumque animi explicabo laboriosam, dicta molestias? Corporis quibusdam, aliquam asperiores quo officia reiciendis nemo aspernatur similique voluptatibus in tempora? Laborum temporibus ipsa at exercitationem ullam labore tempore neque. Porro earum distinctio rem perferendis amet nihil maiores ab id cumque quae nesciunt, velit fugiat in aspernatur unde. Ut dolor eaque, vero quo sunt sed exercitationem cum accusamus, beatae, quasi rerum. Id eius dolorem nihil porro, voluptatem exercitationem tenetur impedit laudantium odit aliquam vel, facilis eos quasi voluptatibus optio. Ipsum voluptatum labore consequatur dolorum veritatis qui placeat magnam aut expedita. Error facere tempora ratione sapiente illo laudantium, ut nihil. Mollitia vitae, eveniet blanditiis corrupti at molestias aliquam ipsa esse optio temporibus dolorem, fugiat obcaecati culpa fuga numquam sapiente libero. Impedit maiores doloremque iusto autem temporibus! Quam cupiditate officiis possimus, ratione quasi nobis rem quidem quibusdam? Ut earum possimus expedita culpa nobis suscipit, non minima at dignissimos aut optio eum? Cumque?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi, aut commodi aliquid, blanditiis doloribus suscipit perferendis hic assumenda dolorum magnam enim. Error minima magnam modi aliquam quia at obcaecati sunt quas velit numquam, voluptatem inventore blanditiis necessitatibus harum possimus nostrum vel expedita quam dignissimos tenetur maxime provident aspernatur nam iste. At veritatis nemo quisquam, facilis numquam nostrum veniam perferendis repudiandae cum ipsa eos eius est doloremque excepturi delectus quidem repellat suscipit et tenetur vitae porro nisi iure? Ipsa facere at blanditiis nobis temporibus labore architecto nulla deleniti quod hic minus consequuntur, unde, quasi eius consequatur est! Laborum neque illo ab.
</p>
<blockquote>
Consequatur itaque sit amet consectetur adipisicing elit.
</blockquote>
<p>
Ab eveniet recusandae incidunt id cumque porro? Dignissimos nostrum iure possimus mollitia sed provident esse optio odio consequatur! Recusandae dicta ab atque? Eveniet molestias autem accusantium vero, tenetur placeat ratione voluptates nesciunt, adipisci ullam cum quae eius eaque quibusdam nihil dolorem! Ab eveniet recusandae incidunt id cumque porro? Sit tenetur quasi odit, facere dolore quae voluptatibus fugiat, quibusdam vitae labore dignissimos. Unde, maiores cumque dolore quas repellat vel adipisci harum incidunt consequatur ad!
</p>
<p>
Ipsum explicabo quod laborum non provident, consectetur sint unde hic dolor quisquam ullam nulla veniam! Sapiente impedit sint expedita officiis fugit est quia. Neque, ea aspernatur? Quod voluptas ab aliquid saepe id, eos suscipit, autem quae reiciendis omnis veritatis officiis culpa doloremque? Reiciendis ea modi quod ducimus culpa omnis aliquid non minus ipsam necessitatibus distinctio, aspernatur iure. Nihil cupiditate amet officiis eligendi nostrum harum labore porro optio obcaecati reiciendis blanditiis quae, perspiciatis voluptatibus suscipit enim.
</p>
<p class="box">
Perspiciatis sapiente eum velit inventore illum accusamus eos at esse mollitia debitis quae rem odit, ipsam nam. Voluptas beatae, velit voluptatum dolor obcaecati a nobis consequuntur quis id eaque! Sapiente nostrum rerum esse quo laborum excepturi explicabo, perspiciatis dicta corporis atque?
</p>
<h2>Quod voluptas aliquid id saepe</h2>
<p>
Et minima quas amet! Debitis commodi consectetur laborum fugit voluptatum qui distinctio, natus odit obcaecati. Voluptate suscipit consectetur, aspernatur ratione impedit minus facilis voluptatum tempora nesciunt pariatur ipsa provident qui distinctio ad quasi magnam exercitationem itaque. Recusandae maiores dolor saepe commodi a eligendi aut adipisci neque dolorem tempora perspiciatis odio asperiores quos iusto animi quia tempore, molestiae deleniti vel. Earum, atque? Ipsa reiciendis cum laborum fugiat doloremque asperiores, voluptatem exercitationem in sequi!
</p>
<p>
Dolor sit, amet consectetur adipisicing elit. Earum, amet ea quaerat, repellendus ipsum sunt blanditiis ab tempora doloribus quas voluptas magni ut perferendis unde dolor tenetur repudiandae, porro dolore et nisi eius. Eos, esse minus molestiae maiores praesentium dolorum dolor eaque repellendus laudantium provident adipisci alias inventore ratione distinctio libero facilis voluptas hic illum odio laboriosam quos minima officia natus. Maxime eveniet repellendus non iste exercitationem aliquam velit, corrupti ut, id provident reprehenderit accusamus nemo reiciendis fugiat saepe quas quasi ad tempora! Qui earum eligendi architecto delectus animi similique laborum dolorum, recusandae beatae voluptatibus! Maiores ad libero quibusdam temporibus, quis possimus perferendis corporis modi, culpa voluptatum maxime. Earum, rem.
</p>
<p>
Eos dolore dicta delectus dolorum porro fuga modi, perferendis natus ratione repellendus sit harum sint! Numquam quas facere quod doloribus enim omnis earum maxime perferendis ipsam magnam quos culpa, vitae, tenetur quisquam, unde quis maiores. Eos quos earum illo animi exercitationem nemo, at asperiores soluta similique aliquid cum quam quo corrupti accusantium iure praesentium. Omnis aliquam harum reiciendis necessitatibus temporibus expedita voluptate, dignissimos ratione dolorem perferendis ut aliquid magni nam nisi deserunt eum nulla excepturi quos sunt accusamus earum cupiditate minus. Expedita, corporis suscipit mollitia qui repellendus harum cumque id quis architecto quidem, aliquid vero dolores necessitatibus animi eos optio? Perspiciatis!
</p>
<p>
Maxime in officiis fugiat corporis cum doloremque atque, at architecto dicta quod inventore corrupti facilis repellendus pariatur possimus error! At aperiam aliquam fugiat eveniet sapiente soluta hic ab ipsam, corrupti temporibus tempore? Velit, sed quos mollitia deleniti fugiat tempora fuga reprehenderit neque tempore doloremque ducimus quasi? Sit facere porro esse vero accusantium praesentium odit. Quisquam sint nobis dolorum labore distinctio ducimus animi alias quod necessitatibus rem non error consectetur voluptate tempora libero facilis ratione voluptates expedita, unde a blanditiis odio. Nostrum sapiente dolor enim?
</p>
Made with love by <a href="//codepen.io/DedaloD">Den Dionigi | UX Designer</a>
</article>[/html]

��

mybb@mybb.ru (concoction) — Thu, 23 Jan 2025 04:59:06 +0300

[html]
<style>
/*=============================================== *
* Jcink.com Forum Hosting Stylesheet
* ==============================================
* #Version: 1.0.2
*=============================================== */

html { overflow-x: auto; }
form { display:inline; scroll-behavior: smooth;}

@font-face {
font-family: 'species';
src:
url('https://files.jcink.net/uploads/ghostsongs/fonts/species.ttf?n6hpnk') format('truetype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/species.woff?n6hpnk') format('woff'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/species.svg?n6hpnk#species') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

[class^="species-"], [class*=" species-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'species' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.species-aether:before {
content: "\e900";
}
.species-aertas:before {
content: "\e901";
}
.species-air:before {
content: "\e902";
}
.species-amarok:before {
content: "\e903";
}
.species-cantivox:before {
content: "\e904";
}
.species-celestial:before {
content: "\e905";
}
.species-chimera:before {
content: "\e906";
}
.species-cosmos:before {
content: "\e907";
}
.species-crystal:before {
content: "\e908";
}
.species-dragon:before {
content: "\e909";
}
.species-earth:before {
content: "\e90a";
}
.species-electricity:before {
content: "\e90b";
}
.species-energy:before {
content: "\e90c";
}
.species-fire:before {
content: "\e90d";
}
.species-gravity:before {
content: "\e90e";
}
.species-griffin:before {
content: "\e90f";
}
.species-ice:before {
content: "\e910";
}
.species-kitsune:before {
content: "\e911";
}
.species-light:before {
content: "\e912";
}
.species-magus:before {
content: "\e913";
}
.species-manticore:before {
content: "\e914";
}
.species-metal:before {
content: "\e915";
}
.species-naga:before {
content: "\e916";
}
.species-pegasus:before {
content: "\e917";
}
.species-phoenix:before {
content: "\e918";
}
.species-plasma:before {
content: "\e919";
}
.species-player:before {
content: "\e91a";
}
.species-shadow:before {
content: "\e91b";
}
.species-soluna:before {
content: "\e91c";
}
.species-sound:before {
content: "\e91d";
}
.species-space:before {
content: "\e91e";
}
.species-staff:before {
content: "\e91f";
}
.species-time:before {
content: "\e920";
}
.species-unicorn:before {
content: "\e921";
}
.species-vertifera:before {
content: "\e922";
}
.species-water:before {
content: "\e923";
}
/****************************************
Body Background & Text Style
*****************************************/
body {
font: 500 15px montserrat;
margin:0px;
padding:0px;
background: var(--bodybg);
scroll-behavior: smooth;
}

@font-face {
font-family: 'location';
src: url('https://files.jcink.net/uploads/ghostsongs/fonts/location.eot?i3fkkh');
src: url('https://files.jcink.net/uploads/ghostsongs/fonts/location.eot?i3fkkh#iefix') format('embedded-opentype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/location.ttf?i3fkkh') format('truetype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/location.woff?i3fkkh') format('woff'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/location.svg?i3fkkh#location') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="location-"], [class*=" location-"] {
font-family: 'location' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.location-au:before {
content: "\e900";
}
.location-imperatus:before {
content: "\e901";
}
.location-caelaevis:before {
content: "\e902";
}
.location-ingenium:before {
content: "\e903";
}
.location-lautitia:before {
content: "\e904";
}
.location-magelida:before {
content: "\e905";
}
.location-subcinctus:before {
content: "\e906";
}
.location-aquaedis:before {
content: "\e907";
}
.location-archarius:before {
content: "\e908";
}
@font-face {
font-family: 'weathericons';
src: url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.eot');
src: url('../font/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.woff2') format('woff2'), url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/font/weathericons-regular-webfont.svg#weather_iconsregular') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="wi-"]:before,[class*=" wi-"]:before {
font-family: "weathericons" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
[class^="wi-"],[class*=" wi-"]{display:inline-grid;}
@font-face {
font-family: 'groups';
src: url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.eot?mz4m9');
src: url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.eot?mz4m9#iefix') format('embedded-opentype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.ttf?mz4m9') format('truetype'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.woff?mz4m9') format('woff'),
url('https://files.jcink.net/uploads/ghostsongs/fonts/groups/groups.svg?mz4m9#groups') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'groups' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-aurora:before {
content: "\e900";
}
.icon-blizzard:before {
content: "\e901";
}
.icon-earthquake:before {
content: "\e902";
}
.icon-hurricane:before {
content: "\e903";
}
.icon-mirage:before {
content: "\e904";
}
.icon-supernova:before {
content: "\e905";
}
.icon-tsunami:before {
content: "\e906";
}
.icon-wildfire:before {
content: "\e907";
}

/****************************************
SCROLLBAR
*****************************************/
::-webkit-scrollbar {
width: 6px;
background-color: var(--border2);
}
::-webkit-scrollbar-thumb {
background-color: var(--boardbg);
}
::-webkit-scrollbar:horizontal {
height: 10px;
}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
border: 2px solid var(--boardbg);
}

@font-face {
font-family: 'ghost';
src: url(https://files.jcink.net/uploads2/skin02 … Dancer.ttf);
}

/****************************************
Colors
*****************************************/
:root {
--bodybg: #111;
--text1: #eee;
--text2: #222;
--text3: #565656;
--text4: #464756;
--wrapperbg: #222;
--innerwrapper2: #b6bdc5;
--border1: #333;
--border3: #fff;
--topgradient: linear-gradient(to bottom, #dde2e7, #c7cdd3);
--topevent: #d5dae1;
--meshbg: radial-gradient(at 15.752461322081576% 82.17243975903614%, #6594c3 0px, transparent 50%), radial-gradient(at 87.0604781997187% 11.69051204819277%, #4e5688 0px, transparent 50%), radial-gradient(at 82.9817158931083% 83.77886546184739%, #8f568e 0px, transparent 50%), radial-gradient(at 50.773558368495074% 29.96360441767068%, #7a4879 0px, transparent 50%), radial-gradient(at 14.627285513361462% 17.31300200803213%, #5d6598 0px, transparent 50%) #222222;
--main1: #764775;
--main2: #465176;
--main3: #24252d;
--cath1: #1f2027;
--boardbg: #24252d;
--border2: #3a3c49;
--border3: #373945;
--boardbg2: #1f2027;
--boardbg3: #292a33;
--subsf1: #292a33;
--rgb1: 118,71,117;
--rgb2: 70,81,118;
--rgb3: 36,37,45;
--sup: #454756;
}
[data-theme="light"] {
--bodybg: #d3d3d3;
--text1: #222;
--text3: #222;
--wrapperbg: #f1f1f1;
--innerwrapper2: #b6bdc5;
--border1: #ccc;
--border2: #fff;
--sitename: #f1f1f1;
--meshbg: radial-gradient(at 66.66666666666666% 37.7949297188755%, #997dd2 0px, transparent 50%), radial-gradient(at 13.220815752461323% 16.3089859437751%, #6b3f9b 0px, transparent 50%), radial-gradient(at 100% 77%, #af3867 0px, transparent 50%), radial-gradient(at 78% 98%, #bc2144 0px, transparent 50%), radial-gradient(at 90.57665260196906% 19.321034136546185%, #da6492 0px, transparent 50%), radial-gradient(at 21.80028129395218% 86.79091365461848%, #334e9a 0px, transparent 50%) #f1f1f1;
}
.theme-switch input {
display: none;
}

/* TSUNAMI */
GROUP10, .tsunami, #g10, .g10, #tsunami {
--main1: #a378dd;
--main2: #5da9cf;
--main3: #7fd5be;
--rgb1: 163,120,221;
--rgb2: 93,169,207;
--rgb3: 127,213,190;
--b1: #a378dd;
--b2: #8091d6;
--b3: #5da9cf;
--b4: #6ebfc7;
--b5: #7fd5be;
--s1: #a378dd;
--s2: #8c88d8;
--s3: #7499d4;
--s4: #5da9cf;
--s5: #68b8c9;
--s6: #74c6c4;
--s7: #7fd5be;
}

/* AURORA */
GROUP11, .aurora, #g11, .g11, #aurora {
--main1: #dc74bb;
--main2: #ad5ae1;
--main3: #6669e1;
--rgb1: 220,116,187;
--rgb2: 173,90,225;
--rgb3: 102,105,225;
--b1: #dc74bb;
--b2: #c567ce;
--b3: #ad5ae1;
--b4: #8a62e1;
--b5: #6669e1;
--s1: #dc74bb;
--s2: #cc6bc8;
--s3: #bd63d4;
--s4: #ad5ae1;
--s5: #955fe1;
--s6: #7e64e1;
--s7: #6669e1;
}

/* BLIZZARD */
GROUP9, .blizzard, #g9, .g9, #blizzard {
--main1: #84bcd8;
--main2: #617be4;
--main3: #9564ee;
--rgb1: 132,188,216;
--rgb2: 97,123,228;
--rgb3: 149,100,238;
--b1: #84bcd8;
--b2: #739cde;
--b3: #617be4;
--b4: #7b70e9;
--b5: #9564ee;
--s1: #84bcd8;
--s2: #78a6dc;
--s3: #6d91e0;
--s4: #617be4;
--s5: #7273e7;
--s6: #846ceb;
--s7: #9564ee;
}

/* HURRICANE */
GROUP7, .hurricane, #g7, .g7, #hurricane {
--main1: #f5b35f;
--main2: #d064b5;
--main3: #926bd1;
--rgb1: 245,179,95;
--rgb2: 208,100,181;
--rgb3: 146,107,209;
--b1: #f5b35f;
--b2: #e38c8a;
--b3: #d064b5;
--b4: #b168c3;
--b5: #926bd1;
--s1: #f5b35f;
--s2: #e9997c;
--s3: #dc7e98;
--s4: #d064b5;
--s5: #bb66be;
--s6: #a769c8;
--s7: #926bd1;
}

/* EARTHQUAKE */
GROUP8, .earthquake, #g8, .g8, #earthquake {
--main1: #6ccb6c;
--main2: #ebce69;
--main3: #e8945c;
--rgb1: 108,203,108;
--rgb2: 235,206,105;
--rgb3: 232,148,92;
--b1: #6ccb6c;
--b2: #accd6b;
--b3: #ebce69;
--b4: #eab163;
--b5: #e8945c;
--s1: #6ccb6c;
--s2: #96cc6b;
--s3: #c1cd6a;
--s4: #ebce69;
--s5: #eabb65;
--s6: #e9a760;
--s7: #e8945c;
}

/* WILDFIRE */
GROUP6, .wildfire, #g6, .g6, #wildfire {
--main1: #d95866;
--main2: #eca362;
--main3: #ecd466;
--rgb1: 217,88,102;
--rgb2: 236,163,98;
--rgb3: 236,212,102;
--b1: #d95866;
--b2: #e37e64;
--b3: #eca362;
--b4: #ecbc64;
--b5: #ecd466;
--s1: #d95866;
--s2: #df7165;
--s3: #e68a63;
--s4: #eca362;
--s5: #ecb363;
--s6: #ecc465;
--s7: #ecd466;
}

/* SUPERNOVA */
GROUP15, .supernova, #g15, .g15, #supernova {
--main1: #5fc1b4;
--main2: #9d62d9;
--main3: #ec6666;
--rgb1: 95,193,180;
--rgb2: 157,98,217;
--rgb3: 236,102,102;
--b1: #5fc1b4;
--b2: #7e92c7;
--b3: #9d62d9;
--b4: #c564a0;
--b5: #ec6666;
--s1: #5fc1b4;
--s2: #74a1c0;
--s3: #8882cd;
--s4: #9d62d9;
--s5: #b763b3;
--s6: #d2658c;
--s7: #ec6666;
}

/* MIRAGE */
GROUP17, .mirage, #g17, .g17, #mirage {
--main1: #dfd264;
--main2: #ea6c7a;
--main3: #10b4b4;
--rgb1: 223,210,100;
--rgb2: 234,108,122;
--rgb3: 16,180,180;
--b1: #dfd264;
--b2: #e59f6f;
--b3: #ea6c7a;
--b4: #7d9097;
--b5: #10b4b4;
--s1: #dfd264;
--s2: #e3b06b;
--s3: #e68e73;
--s4: #ea6c7a;
--s5: #a1848d;
--s6: #599ca1;
--s7: #10b4b4;
}

/****************************************
Board Base
*****************************************/

#wrapper {
margin: 20px auto auto auto;
width: calc(100vw - 75px);
height: calc(100vh - 75px);
background: var(--wrapperbg);
border-radius: 20px;
padding: 20px;
display: flex;
overflow: hidden;
justify-content: space-between;
box-shadow: 0 0 7px rgba(0,0,0,0.2);
}
.innerwrapper {
width: calc(100vw - 150px);
height: calc(100vh - 70px);
border-radius: 20px;
overflow: auto;
scroll-behavior: smooth;
background: url(https://c.l3n.co/i/nuyrQx.png), url(https://a.l3n.co/i/nuygAk.png), var(--meshbg) fixed;
}
.innerwrapper2 {
background: var(--innerwrapper2);
border-radius: 20px;
margin: 30px auto 30px auto;
width: 985px;
border: 1px solid var(--border3);
position: relative;
z-index: 4;
margin-top: 0px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/****************************************
Table Styles
*****************************************/
table, tr, td {
font: 500 15px montserrat;
color: #222;
}

.user-links {
height: calc(100vh - 70px);
width: 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
color: var(--text3);
}
.user-links2 {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
gap: 10px;
font-size: 25px;
margin-left: 15px;
}
.user-links2 a {
color: var(--dark1);
position: relative;
display: block;
}
.user-links2 msg {
position: absolute;
top: 0;
right: 10px;
font-size: 0;
background: red;
width: 8px;
height: 8px;
border-radius: 100%;
border: 4px solid var(--lightfe);
}
.user-links2 a:hover {
color: var(--dark1);
opacity: 0.7;
}
.user-links3 {
display: flex;
flex-direction: column;
align-items: center;
}
.user-name {
text-transform: uppercase;
font: 800 10px poppins;
letter-spacing: 1px;
width: 200px;
transform: rotate(90deg);
transform-origin: 145px -25px;
text-align: right;
}
.user-name a {
color: var(--dark1);
}
.user-links3 sub {
display: block;
margin-top: -5px;
}
.user-links3 .forminput {
border-radius: 3px;
padding: 2px;
border: 0px;
font: 800 9px poppins;
text-transform: uppercase;
letter-spacing: 1;
margin-top: 5px;
letter-spacing: 1px;
width: 20px;
}
.user-links3 img {
border-radius: 100%;
width: 50px;
height: 50px;
border: 4px solid var(--lightf);
margin-left: 10px;
}

#user-nav {
background: var(--bodybg);
padding: 10px;
position: sticky;
top: 0px;
color: var(--text1);
z-index: 99;
border-bottom: 1px solid var(--border3);
}
#user-nav a {
color: #eee;
border: 1px solid #eee;
background: linear-gradient(to right, var(--main1), var(--main2));
font: 600 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
}
#navstrip {
display: flex;
gap: 10px;
margin-left: -10px;
}

/****************************************
Link colors
*****************************************/
a {
text-decoration: none;
color: var(--text2);
}
a:hover {
color:var(--text3);
text-decoration: none;
}

/**********************************************
INPUT BUTTONS
***********************************************/
.button-large {
display: inline-block;
border: 1px solid var(--border2);
padding: 20px 20px 15px 20px;
margin-top: 10px;
background: linear-gradient(45deg, rgba(var(--rgb1),0.6),rgba(var(--rgb2),0.8));
text-transform: uppercase;
font: 20px abril fatface;
}
a .button-large {
color: var(--text1);
}
a .button-large:hover {
background: linear-gradient(45deg, rgba(var(--rgb1),1),rgba(var(--rgb2),0.8));
}
.button-large:nth-child(1) {
margin-right: 10px;
}

.button-small {
background: var(--main1);
font: 800 10px fira sans;
text-transform: uppercase;
color: var(--dark1)!important;
box-shadow: 0px;
padding: 10px;
}
.post-buttons-top {
margin-top: 3px;
}
.button-large.closed {
}

.forminput {
border: 1px solid var(--dark2);
background: var(--postrow);
color: var(--dark1)!important;
padding: 2px;
}
.textinput {
outline: 1px solid var(--light2);
border: 2px solid var(--light2);
font: 500 13px montserrat;
color: var(--text2)!important;
}
input[type=submit], input[type=button], input[type=reset] {
background: var(--main1)!important;
font: 800 10px fira sans!important;
text-transform: uppercase;
color: var(--dark1)!important;
box-shadow: 0px;
padding: 5px;
border: 0px;
margin: 5px;
vertical-align: middle;
}
.codebuttons, .radiobutton, .checkbox {
background: var(--main1);
border: 1px solid var(--light2);
color: var(--text2);
font-family: montserrat;
font-size: 12px;
padding: 2px;
vertical-align: middle;
}
#smilies-table {
background: var(--light3);
border: 1px solid var(--light2);
}
#topic-summary .pformstrip {
display: none;
}
#topic-summary .tableborder {
background: var(--light3);
}
.post1 {
border: 0px;
background: var(--light1);
color: var(--text1)!important;
}
.post2 {
border: 0px;
background: var(--light4);
color: var(--dark7)!important;
}
.pformright .forminput {
background: var(--light1);
border: 1px solid var(--light2);
var(--dark4)!important;
}
#post_as_selector .forminput {
background: var(--light3)!important;
border: 1px solid var(--light2)!important;
var(--text1)!important;
}
input.row1 {
background: var(--light3);
border: 1px solid var(--light2);
color: var(--dark1);
}
#posting-form input[type=submit], #posting-form input[type=button], #posting-form input[type=reset] {
font: 800 12px fira sans!important;
text-transform: uppercase;
border: 1px solid var(--light2);
box-shadow: 0px;
padding: 5px;
border: 0px;
margin: 5px;
vertical-align: middle;
letter-spacing: 1px;
}
#posting-form .pformstrip {
background: #222;
border-top: 1px solid var(--light2);
padding: 10px;
font: 800 9px fira sans;
text-transform: uppercase;
color: #eee;
}
#posting-form .textinput {
width: 100%;
background: var(--light3);
border: 10px solid var(--light3);
outline: 1px solid var(--light2);
color: var(--text1);
font: 500 14px montserrat;
}
.quick-edit textarea.textinput {
background: var(--light3);
font: 500 14px montserrat;
color: var(--text1)!important;
height: 400px!important;
border: 2px solid var(--light3);
outline: 1px solid var(--light2);
}
#posting-form {
font: 500 12px montserrat;
!important
}
#topic-settings-header .pformleft .topic-title {
font: 12px montserrat;
text-transform: uppercase;
}
#posting-form .forminput {
padding: 10px;
background: var(--light3);
var(--text1)!important;
}
#posting-form .pformleft {
background: var(--light4);
}
#posting-form .pformright {
background: var(--light4);
}
#code-buttons-header .pformstrip {
border-top: 0px;
}
#edit-by-line {
display: none;
}

.postlinksbar {
padding: 10px;
letter-spacing: 1px;
text-transform: uppercase;
font: 800 10px poppins;
border-bottom: 1px solid var(--border3);
position: relative;
z-index: 2;
}
.postlinksbar a {
color: var(--text2);
}

/*******************************
PAGINATION
*******************************/
.pagination .pagination_current, .pagination a {
display: inline-block;
text-align: center;
padding: 10px;
}
.pagination a, .pagination_page {
border: 1px solid var(--border1);
background: linear-gradient(45deg,rgba(var(--rgb1),0.4),rgba(var(--rgb2),0.4));
color: #222;
text-decoration:none;
font: 800 10px poppins;
width: 10px;
height: 10px;
color: #eee;
}
.pagination_pagetxt {
display: none;
}
.pagination a:hover {
width: 10px;
height: 10px;
text-decoration: none;
background: linear-gradient(45deg,rgba(var(--rgb1),0.8),rgba(var(--rgb2),0.8));
}
.pagination .pagination_current {
width: 10px;
height: 10px;
text-decoration:none;
font: 800 10px poppins;
background: linear-gradient(45deg,rgba(var(--rgb1),0.8),rgba(var(--rgb2),0.8));
color: #eee;
border: 1px solid var(--border1);
}
.pagination_first, .pagination_last {
display: inline-block;
width: 50px!important;
text-transform: uppercase;
}
.goto-firstunread {
text-transform: uppercase;
font: 800 10px poppins;
letter-spacing: 1px;
}

.maintitle {
background: var(--boardbg);
border-top: 1px solid var(--border3);
border-bottom: 1px solid var(--border3);
position: relative;
padding: 50px;
text-align: center;
display: flex;
flex-direction: column;
color: #eee;
text-transform: uppercase;
font: 50px abril fatface;
align-items: flex-end;
}
.topic-title-space {
display: none;
}
.topic-desc {
padding: 10px;
border: 1px solid var(--border1);
background: var(--boardbg2);
font: 600 10px poppins;
letter-spacing: 3px;
}

#post-view {

}

.post-top {
height: 200px;
background: var(--boardbg3);
position: relative;
display: flex;
border-bottom: 1px solid var(--border2);
}

.post-quote {
width: 200px;
border-right: 1px solid var(--border2);
background: linear-gradient(to bottom, rgba(var(--rgb1),0.2), rgba(var(--rgb2),0.2), rgba(var(--rgb3),0.2));
height: 120px;
padding: 60px 20px 20px 50px;
color: var(--text1);
}
.post-quote i {
display: block;
position: absolute;
font-size: 100px;
opacity: 0.2;
top: 0px;
left: 10px;
font-style: normal;
}
.post-quote div {
font: 800 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
text-align: justify;
height: 80px;
width: 150px;
overflow: hidden;
z-index: 2;
}
.post-icon {
position: absolute;
top: 50px;
left: 220px;
z-index: 3;
width: 80px;
height: 80px;
background-size: cover;
border: 10px solid var(--boardbg3);
}

.post-name {
position: relative;
isolation: isolate;
flex: 2;
background: var(--boardbg3);
height: 200px;
}
.post-name:after {
content: "";
z-index: -1;
background-image: url(https://64.media.tumblr.com/aa0af220576 … 55a027.gif);
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: cover;
filter: grayscale(100%);
opacity: 0.15;
mix-blend-mode: overlay;
background-position: 100% 30%;
}
.p-name {
margin-left: 60px;
margin-top: 5%;
text-align: center;
width: 450px;
poition: relative;
z-index: 3;
}
.p-name h12 {
margin: 0;
font-family: abril fatface;
text-transform: uppercase;
color: var(--text1);
font-size: 2em;
line-height: .9;
}
.p-name a {
color: var(--text1);
}
.post-infoo {
position: absolute;
top: 20px;
bottom: 20px;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.post-infoo div {
border: 1px solid var(--border2);
background: var(--boardbg2);
color: #eee;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
font: 800 10px poppins;
text-transform: uppercase;
gap: 20px;
letter-spacing: 1px;
}
.post-infoo i {
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(45deg, var(--main1), var(--main2), var(--main3));
font-size: 15px;
}

.post-middle {
display: flex;
justify-content: space-between;
}

.post-left {
background: var(--boardbg2);
width: 270px;
border-right: 1px solid var(--border2);
}
.post-date {
display: flex;
justify-content: space-between;
padding: 10px;
color: #eee;
background: var(--boardbg3);
border-bottom: 1px solid var(--border2);
}
.post-date a {
color: #eee;
font: 800 10px poppins;
letter-spacing: 1px;
text-transform: uppercase;
}
.post-count {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text1);
height: 70px;
padding-right: 20px;
padding-left: 20px;
font: 800 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(to right, rgba(var(--rgb1),0.2), rgba(var(--rgb2),0.2), rgba(var(--rgb3),0.2));
margin-bottom: 10px;
}
.post-count span {
width: 1px;
background: var(--text1);
height: 40%;
}

.mini-profile {
position: sticky;
top: 10px;
height: 450px;
width: 250px;
margin: auto;
border: 1px solid var(--border2);
margin-bottom: 10px;
}
.mini-av1 {
width: 250px;
height: 450px;
background-size: cover;
position: relative;
overflow: hidden;
transition: all .5s linear;
}
.mini-av2 {
width: 250px;
height: 450px;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.7);
transition: all .6s linear;
opacity: 0;
}
.mini-profile:hover .mini-av1 {
filter:grayscale(100%);
}
.mini-profile:hover .mini-av2 {
opacity: 1;
}
.mini-info {
position: absolute;
top: 40px;
left: 30px;
right: 30px;
bottom: 40px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.mini-info div {
border: 1px solid var(--border2);
background: var(--boardbg2);
color: #eee;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
font: 800 10px poppins;
text-transform: uppercase;
gap: 20px;
letter-spacing: 1px;
}
.mini-info i {
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(45deg, var(--main1), var(--main2), var(--main3));
font-size: 15px;
}
.mini-info article {
text-align: center;
}
.mini-info article span {
text-align: center;
display: block;
font: 30px abril fatface;
text-transform: uppercase;
color: #eee;
margin-top: -60px;
text-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.mini-info article i {
font-size: 90px;
}
.mini-info article a {
color: #eee;
}
.mini-info section {
overflow: auto;
height: 30px;
margin-top: 10px;
}
.mini-awards {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

.post-right {
background: linear-gradient(to bottom, rgba(var(--rgb1),0.2), rgba(var(--rgb2),0.2), rgba(var(--rgb3),0.2)),var(--boardbg);
width: 714px;
}

.post-buttons {
display: flex;
justify-content: space-between;
color: #eee;
background: var(--boardbg);
border-bottom: 1px solid var(--border2);
height: 35px;
align-items: center;
}
.p-buttons {
display: flex;
justify-content: space-between;
flex: 2;
align-items: center;
padding: 20px
}
.p-buttons a {
color: var(--text1);
font: 800 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
}
.p-buttons a:before {
content: "[ ";
color: var(--main1);
}
.p-buttons a:after {
content: " ]";
color: var(--main1);
}
.post-shipper {
background: linear-gradient(to right, rgba(var(--rgb1),0.2), rgba(var(--rgb2),0.2), rgba(var(--rgb3),0.2));
padding: 5px;
display: flex;
gap: 10px;
width: 100px;
justify-content: space-between;
align-items: center;
margin: 0;
height: 25px;
border-left: 1px solid var(--border2);
}
.post-shipper a {
color: var(--text1);
font: 800 10px poppins;
text-transform: uppercase;
letter-spacing: 1px;
}

.post-species {
background: var(--boardbg3);
border-bottom: 1px solid var(--border2);
box-sizing: border-box;
display: flex;
gap: 10px;
padding: 12px;
height: 73px;
}
.post-species i {
font-size: 40px;
text-align: center;
color: var(--text1);
}
.species-info {
display: flex;
position: relative;
justify-content: space-between;
width: 670px;
overflow: hidden;
align-items: center;
}
.post-species:hover .species-powers {
right: 0;
}
.post-species:hover .species-name {
left: -250px;
}
.species-name {
font: 25px abril fatface!important;
text-transform: uppercase;
width: 250px;
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right, var(--main1), var(--main2), var(--main3));
position: absolute;
left: 0;
transition: all 0.6s linear;
}
.species-name sup {
display: block;
font: 800 9px poppins;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text1);
margin-bottom: -5px;
}
.species-name sup:empty {
display: none;}
.species-powers {
display: flex;
justify-content: space-between;
gap: 10px;
position: absolute;
right: -680px;
width: 700px !important;
transition: all 0.6s linear;
align-items: center;
}
.species-powers span {
font: 800 9px poppins;
text-transform: uppercase;
color: var(--text1);
letter-spacing: 0.05em;
}
.species-powers b {
margin-right: 3px;
}
.species-powers span:nth-child(2) b {
color: var(--b1);
}
.species-powers span:nth-child(3) b {
color: var(--b2);
}
.species-powers span:nth-child(4) b {
color: var(--b3);
}
.species-powers span:nth-child(5) b {
color: var(--b4);
}
.species-powers span:nth-child(6) b {
color: var(--b5);
}
.species-powers i {
color: var(--text1);
font-size: 20px;
}

.the-post {
padding: 20px;
}

.post-bottom {
display: flex;
justify-content: space-between;
background: var(--boardbg3);
border-top: 1px solid var(--border2);
height: 160px;
}

.post-relationship {
border-right: 1px solid var(--border2);
width: 250px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
position: relative;
isolation: isolate;
}
.rel-av {
width: 55px;
height: 55px;
position: relative;
z-index: 2;
background-size: cover;
border: 10px solid var(--boardbg2);
}
.rel-status {
text-align: right;
flex: 2;
position: relative;
z-index: 2;
gap: 5px;
}
.rel-status span {
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, var(--main1), var(--main2), var(--main3));
font: 16px abril fatface;
text-transform: uppercase;
}
.rel-status sup {
display: block;
font: 800 9px poppins;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text1);
}
.rel-status sub {
display: block;
font: 800 8px poppins;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text4);
text-decoration: line-through;
}
.post-relationship i {
position: absolute;
right: 10px;
color: var(--boardbg2);
font-size: 150px;
}

.post-aesthetics {
background: var(--boardbg2);
flex: 2;
padding: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.post-aes-img {
width: 70px;
height: 70px;
border: 5px solid var(--border2);
background-size: cover;
}

.post-triggers {
width: 146px;
border-left: 1px solid var(--border2);
}
.post-triggers div {
border-bottom: 1px solid var(--border2);
padding: 7px;
text-align: center;
background: var(--boardbg);
}
.post-triggers div b {
color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right, var(--main1), var(--main2), var(--main3));
font: 18px abril fatface;
text-transform: uppercase;
}
.post-triggers section {
overflow: auto;
height: 90px;
font: 800 10px poppins;
letter-spacing: 1px;
word-break: break-all;
color: var(--text1);
margin: 15px;
text-transform: uppercase;
text-align: justify;
}
.post-triggers section b {
padding: 1px;
background: linear-gradient(
to right,
rgba(var(--rgb1), 0.5),
rgba(var(--rgb2), 0.5),
rgba(var(--rgb3), 0.5)
);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/ui.css" rel="stylesheet">
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/weathericons.css" rel="stylesheet">
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/honeybee.css" rel="stylesheet">
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/saturnicons.css" rel="stylesheet">
<link href="https://files.jcink.net/uploads/ghostsongs/fonts/cappuccicons.css" rel="stylesheet">
<script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>
</head>
<body>
<div id="wrapper">
<div class="innerwrapper">
<div class="innerwrapper2">

<div class="tableborder">

<div id="post-view" class="g15">

<div class="post-top">

<div class="post-quote"><i>❝</i> <div>but everything is clear in the rear-view mirror some wounds will always sting forever in full bloom. but everything is clear in the rear-view mirror some wounds will always sting forever in full bloom.</div></div><div class="post-icon" style="background-image: url(https://a.l3n.co/i/voYPjr.png);"></div>

<div class="post-name">
<div class="p-name"><a href=""><h12>mephistopheles boucher</h12></a></div>
<div class="post-infoo">
<div>he/they <i class="ph ph-user"></i></div>
<div>223 years old <i class="ph ph-cake"></i></div>
<div>archarius <i class="ph ph-map-pin"></i></div>
<div>mortician & coroner <i class="ph ph-storefront"></i></div>
</div>
</div>

</div>

<div class="post-middle">

<div class="post-left">
<div class="post-date"><i class="ph ph-calendar-heart"></i> <a onclick="link_to_post(1474); return false;" class="permalink">Nov 11 2024, 12:30 AM</a></div>
<div class="post-count"><section>1234 posts</section>
<span></span>
<section>1234 points</section>
</div>
<div class="mini-profile">
<div class="mini-av1" style="background-image: url(https://b.l3n.co/i/H7M7UT.png);"></div>
<div class="mini-av2">
<div class="mini-info">
<article><i class="icon-supernova"></i> <BR><span>supernova</span></article><BR>
<div>laura <i class="ph ph-identification-card"></i></div>
<div>she/they <i class="ph ph-user-focus"></i></div>
<div>est <i class="ph ph-clock"></i></div>
<div>contact <i class="ph ph-discord-logo"></i></div>
<div>yes to mature <i class="ph ph-champagne"></i></div>
<section><span class="mini-awards"><img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /> <img src="https://files.jcink.net/uploads/ghostsongs/awards/aquarius.png" /></span></section>
</div>
</div>
</div>
</div>

<div class="post-right">
<div class="post-buttons">
<div class="p-buttons"><a href="">quote</a> <a href="">edit</a> <a href="">full edit</a> <a href="">delete</a></div>
<div class="post-shipper"><a href="">shipper</a> <i class="ph ph-pen-nib"></i></div>
</div>
<div class="post-species">
<i class="species-cantivox"></i>
<div class="species-info">
<div class="species-name"><sup></sup>cantivox</div>
<div class="species-powers">
<i class="ph ph-arrow-fat-right"></i>
<span><b>i.</b> biokinesis</span>
<span><b>ii.</b> enhanced condition</span>
<span><b>iii.</b> death sense</span>
<span><b>iv.</b> mediumship</span>
<span><b>v.</b> zoolingualism</span>
</div>
</div>
</div>
<div class="the-post">
xx
</div>
</div>
</div>

<div class="post-bottom">
<div class="post-relationship">
<div class="rel-av" style="background-image: url(https://b.l3n.co/i/lW0k03.png);"></div>
<div class="rel-status"><sup>it's complicated with a</sup>
<span>wynden holloway <sub>testing a subline</sub></span>
</div>
<i class="ph ph-heartbeat"></i>
</div>
<div class="post-aesthetics">
<div class="post-aes-img" style="background-image: url(https://i.pinimg.com/564x/f4/d8/9c/f4d8 … 347ad0.jpg);"></div>
<div class="post-aes-img" style="background-image: url(https://i.pinimg.com/736x/ff/43/81/ff43 … 335c5f.jpg);"></div>
<div class="post-aes-img" style="background-image: url(https://i.pinimg.com/564x/d7/b7/24/d7b7 … a7e512.jpg);"></div>
<div class="post-aes-img" style="background-image: url(https://i.pinimg.com/564x/a9/a3/49/a9a3 … fd8d0f.jpg);"></div>
</div>
<div class="post-triggers"><div><b>please avoid</b></div> <section>needles/blood-drawing, graphic depictions of surgical procedures, <b>ooc pregnancy</b>, descriptions of childbirth, graphic animal abuse</section></div>
</div>

</div></div>

</div>
</div>

<div class="user-links">
<div class="user-links2">
<div class="ldmode"><label class="theme-switch" for="checkbox"> <input type="checkbox" id="checkbox" /> <i class="ph ph-lightbulb"></i></label> </div>

<a href="#" title="settings"><i class="ph ph-gear"></i></a>
<a href="#" title="inbox"><i class="ph ph-envelope"></i><msg>0</msg></a>
<a href="#" title="alerts"><i class="ph ph-bell"></i><msg>1</msg></a>
<a href="#" title="admins"><i class="ph ph-user"></i></a>
<a href="#" title="logout"><i class="ph ph-sign-out"></i></a>
</div>
<div class="user-links3">
<div class="user-name">
<a href="#">firstname lastname</a>
<sub><form action='/index.php?&act=Login&CODE=01&CookieDate=1' name='subswitch' method='POST'>
<input type='hidden' name='auth_key' value='149d15953033f38cb362253f77734a90'>
<input type='hidden' name='UserName' value='subacct'>
<input type='hidden' name='PassWord' value='subacct'>
<input type='hidden' name='referer' value='' />
<select class='forminput' name='sub_id' onchange='this.form.submit()'>
<option value='------------' selected='selected'>Switch Account</option>
<option value='201'>  » ALEXEI FAULKNER </option><option value='89'>  » ATHENADUS PRIATA </option><option value='190'>  » BARTHOLOMEW MARTIN </option><option value='125'>  » BEAUREGARD KINCAID </option><option value='146'>  » BENJAMIN PUGH </option>
</select>
</form></sub></div>
<img src="https://c.l3n.co/i/BAlpTk.png" /></div>
</div>
</div>
</body>
</html>
[/html]

��

mybb@mybb.ru (concoction) — Tue, 21 May 2024 05:28:15 +0300

[html]
<style>
:root {
--base-color: #453d32;
--second-color: #c9c5b9;
--third-color: #8d8387;
--site: #d2cbc32b;
--light: #fff;
}

.grid {
list-style: none;
margin-left: -40px;
}

.gc {
box-sizing: border-box;
display: inline-block;
margin-right: -.25em;
min-height: 1px;
padding-left: 40px;
vertical-align: top;
}

.gc--1-of-3 {
width: 33.33333%;
}

.gc--2-of-3 {
width: 66.66666%;
}

.naccs {
position: relative;
max-width: 900px;
margin: 100px auto 0;
}

.naccs .menu div {
padding: 15px 20px 15px 40px;
margin-bottom: 10px;
color: var(--base-color);
background: var(--second-color);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
cursor: pointer;
position: relative;
vertical-align: middle;
font-weight: 700;
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.naccs .menu div:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.naccs .menu div span.light {
height: 10px;
width: 10px;
position: absolute;
top: 24px;
left: 15px;
background-color: var(--base-color);
border-radius: 100%;
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.naccs .menu div.active span.light {
background-color: var(--third-color);
left: 0;
height: 100%;
width: 3px;
top: 0;
border-radius: 0;
}

.naccs .menu div.active {
color: var(--third-color);
padding: 15px 20px 15px 20px;
}

ul.nacc {
position: relative;
height: 0px;
list-style: none;
margin: 0;
padding: 0;
transition: .5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li {
opacity: 0;
transform: translateX(50px);
position: absolute;
list-style: none;
transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

ul.nacc li.active {
transition-delay: .3s;
z-index: 2;
opacity: 1;
transform: translateX(0px);
}

ul.nacc li p {
margin: 0;
}
</style>
<script>
// Acc
$(document).on("click", ".naccs .menu div", function() {
var numberIndex = $(this).index();

if (!$(this).is("active")) {
$(".naccs .menu div").removeClass("active");
$(".naccs ul li").removeClass("active");

$(this).addClass("active");
$(".naccs ul").find("li:eq(" + numberIndex + ")").addClass("active");

var listItemHeight = $(".naccs ul")
.find("li:eq(" + numberIndex + ")")
.innerHeight();
$(".naccs ul").height(listItemHeight + "px");
}
});

</script>

<body>
<div class="naccs">
<div class="grid">
<div class="gc gc--1-of-3">
<div class="menu">
<div class="active"><span class="light"></span><span>Beer</span></div>
<div><span class="light"></span><span>Wine</span></div>
<div><span class="light"></span><span>Lemonade</span></div>
</div>
</div>
<div class="gc gc--2-of-3">
<ul class="nacc">
<li class="active">
<div>
<p>Beer is the world's oldest[1][2][3] and most widely consumed[4] alcoholic drink; it is the third most popular drink overall, after water and tea.[5] The production of beer is called brewing, which involves the fermentation of sugars, mainly derived
from cereal grain starches�most commonly from malted barley, although wheat, maize (corn), and rice are widely used.[6] Most beer is flavoured with hops, which add bitterness and act as a natural preservative, though other flavourings such as
herbs or fruit may occasionally be included. The fermentation process causes a natural carbonation effect, although this is often removed during processing, and replaced with forced carbonation.[7] Some of humanity's earliest known writings refer
to the production and distribution of beer: the Code of Hammurabi included laws regulating beer and beer parlours,[8] and "The Hymn to Ninkasi", a prayer to the Mesopotamian goddess of beer, served as both a prayer and as a method of remembering
the recipe for beer in a culture with few literate people.[9][10]</p>
</div>
</li>
<li>
<div>
<p>A vine (Latin vīnea "grapevine", "vineyard", from vīnum "wine") in the narrowest sense is the grapevine (Vitis), but more generally it can refer to any plant with a growth habit of trailing or scandent (that is, climbing) stems, lianas or runners.
The word also can refer to such stems or runners themselves, for instance when used in wicker work.[1][2] In the United Kingdom, the term "vine" applies almost exclusively to the grapevine. The term "climber" is used for all climbing plants.[3]</p>
</div>
</li>
<li>
<div>
<p>Lemonade is any of various sweetened beverages found around the world, all characterized by lemon flavor. Most lemonade varieties can be separated into two distinct types: cloudy and clear; each is known simply as "lemonade" (or a cognate) in countries
where dominant.[1] Cloudy lemonade, generally found in North America and India, is a traditionally homemade drink made with lemon juice, water, and sweetener such as cane sugar or honey.[2] Found in the United Kingdom, Ireland, South Africa, Australia,
and New Zealand, clear lemonade is a lemon flavoured carbonated soft drink. Not to be confused with Sprite a lemon-lime flavored, soft drink.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>

[/html]

��

mybb@mybb.ru (concoction) — Thu, 18 Apr 2024 14:10:56 +0300

[html]
<style>

nav {
position: relative;
display: block;
background-color: #f6f9ff;
padding: 10px;
border-radius: 40px;
transform: scale(1.8);
overflow: hidden;
}

nav a {
position: relative;
text-decoration: none;
color: #53588b;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
line-height: 1;
text-align: center;
display: inline-block;
width: 100px;
padding: 10px;
box-sizing: border-box;
z-index: 2;
}

nav a b {
position: relative;
top: 40px;
transition: 0.3s ease top;
}

nav a i {
position: relative;
left: 25%;
transition: 0.3s ease left;
}

nav span {
position: absolute;
width: 100px;
background-color: #e5eeff;
top: 10px;
bottom: 10px;
left: 10px;
border-radius: 50px;
z-index: 1;
transition: 0.3s ease left;
}

nav a:hover b {
top: 0;
}

nav a:hover i {
left: 0;
}

nav a:nth-child(1):hover ~ span {
left: 10px;
}

nav a:nth-child(2):hover ~ span {
left: 114px;
}

nav a:nth-child(3):hover ~ span {
left: 218px;
}

#ytd-url {
display: block;
position: fixed;
right: 0;
bottom: 0;
padding: 10px 14px;
margin: 20px;
color: #fff;
font-family: Arial;
font-size: 14px;
text-decoration: none;
background-color: #53588b;
border-radius: 4px;
box-shadow: 0 10px 20px -5px rgba(83, 88, 139, 0.3);
z-index: 125;
}

</style>
<script>
</script>
<nav>
<a href="#">
<i class="fas fa-home"></i>
<b>home</b>
</a>
<a href="#">
<i class="far fa-credit-card"></i>
<b>cards</b>
</a>
<a href="#">
<i class="fas fa-award"></i>
<b>lifestyle</b>
</a>
<span></span>
</nav>

[/html]

��

mybb@mybb.ru (concoction) — Wed, 22 Feb 2023 12:33:52 +0300

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Loremipsumdolorsitamet,consecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimadminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariaturExcepteursintoccaecatcupidatatnonproidentsuntinculpaquiofficiadeseruntmollitanimidestlaborum."

�� , �� , �� , �� , �� , �� .

�� , �� . �� , �� .

�� , �� , �� , � �� : �... �� , �� ... �� , �� ...�

��, �� , �� . �� .

�� , �� , �� , �� , � �� , �� . ��, ��, �� , �� . �� .

word-wrap: break-word;
hyphens: auto;

��

mybb@mybb.ru (concoction) — Wed, 21 Dec 2022 09:27:11 +0300

[hideprofile][html]
<style>
.punbb {
margin-left: 0px !important; }
.clipped {
display:flex;
align-items:flex-end;
height:100%;
line-height:1.2;
overflow:hidden;
background: url("https://i.pinimg.com/564x/44/55/25/445525f88c146fb71ec496396eda7cb8.jpg") no-repeat #fff;
background-size: cover;
color: rgba(255,255,255,0.3);
font-size: 10em;
font-family: 'Playfair Display', serif;
/*-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
-webkit-filter: invert(100%) hue-rotate(0deg);

change hue-rotate to play with tint */
}
#title{
overflow:hidden;
color:#fff;
mix-blend-mode:difference;
padding:0px calc(15% - 20px);
}

.header {
height: 250px;
width: 100% - 10px;
overflow: hidden;
background: url("https://i.pinimg.com/564x/52/6b/e0/526be09a1233cc0f32fd28431566db3b.jpg") no-repeat #fff;
background-size: cover;
margin:20px 20px 0 20px;
border-radius:8px;
box-shadow:2px 3px 20px 0 rgba(0,0,0,0.3);
}
.container {
display: block;
width: 100%;
float: left;
max-width:800px;
}

content{
display:block;
padding:30px;
color:#000;
opacity:.8;
padding:30px 15%;
}
h21{
font-size: 1.1em;
font-family: 'Raleway', sans-serif;
font-weight:800;
letter-spacing:0.5pt;
}
hr{
margin:10px 0 10px 0;
width:30px;
height:6px;
background-color:#2980b9;
border:0;
text-align:left;
}
p{
font-size: .9em;
font-family: 'Raleway', sans-serif;
font-weight:300;
overflow:hidden;
}
</style>

<div class="container">
<div class="header">
<div class="clipped">
<h1 id="title">��</h1>
</div>
</div>
<content>
<h21>This is a subtitle</h21>
<hr>
<p>Since a previous update of Google Chrome, this effect is not working anymore like before. I used 'text-fill-color' together with 'background-clip'. Now I changed it to 'mix-blend-mode'. This is alot easier in my opinion. You can still find the "old" version commented out in the CSS.</p>
</content>
</div>

</div>

[/html]

��

mybb@mybb.ru (concoction) — Wed, 21 Dec 2022 08:14:16 +0300

<script language="JavaScript">

</script>

��

mybb@mybb.ru (concoction) — Tue, 20 Dec 2022 12:54:08 +0300

[html]
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
height: 100%;
}

@font-face {
font-family: "Blokk";
src: url(./BLOKKNeue-Regular.woff2);
}

p:first-of-type {
font-size: 2rem;
letter-spacing: -0.05em;
}

body {
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1.25rem;
color: #10002b;
-webkit-font-smoothing: antialiased;
}

.wrapper {
max-width: 600px;
margin: 0 auto;
}

#altBud {
position: fixed;
bottom: 0;
right: 1rem;
width: 140px;
height: 140px;
transition: transform 300ms ease;
transform-origin: 100% 100%;
transform: translateY(8px);
}

.content {
margin: 0 auto;
padding: 3rem 1.5rem;
height: 100%;
overflow-y: scroll;
}

p + p {
margin-top: 1.5rem;
}

img {
max-width: 100%;
margin: 3rem 0;
}

g,
ellipse {
transform-box: fill-box;
transform-origin: center;
}

#altBudHair line {
animation: hair 3000ms linear infinite;
transform-origin: 50% 50%;
}

#altBudHair line:nth-of-type(2) {
animation-delay: 250ms;
}

#altBudHair line:nth-of-type(2) {
animation: hair2 5000ms ease infinite;
animation-delay: 100ms;
}

@keyframes hair {
0% {
transform: rotate(-4deg);
}

50% {
transform: rotate(4deg);
}

100% {
transform: rotate(-4deg);
}
}

@keyframes hair2 {
0% {
transform: rotate(6deg);
}

50% {
transform: rotate(-6deg);
}

100% {
transform: rotate(6deg);
}
}

#altBudBody {
transition: fill 500ms ease;
}

#altBudTexture > * {
transition: fill 500ms ease;
}

@media (prefers-reduced-motion: reduce) {
#altBudHair > * {
animation: none !important;
}

* {
transition: none !important;
}
}

</style>
<script>
import intersectionObserver from "https://cdn.skypack.dev/intersection-observer@0.11.0";
const altBud = {
root: document.getElementById("altBud"),
eyeLeft: document.getElementById("altBudEyeLeft"),
eyeInnerLeft: document.getElementById("altBudEyeInnerLeft"),
eyeInnerRight: document.getElementById("altBudEyeInnerRight"),
eyeRight: document.getElementById("altBudEyeRight"),
mouth: document.getElementById("altBudMouth"),
arm: document.getElementById("altBudArm"),
body: document.getElementById("altBudBody"),
texture: document.getElementById("altBudTexture")
};
const prefersReducedMotion = window.matchMedia(
"(prefers-reduced-motion: reduce)"
).matches;
const allImages = document.querySelectorAll("img");

let activeWatchImg = null;

let isAngry = false;

for (const img of allImages) {
imgObserver.observe(img);
}

function rotateEye(target, eye) {
const targetBounds = target.getBoundingClientRect();
let { x: eyeX, y: eyeY } = eye.getBoundingClientRect();

const targetX = targetBounds.x + targetBounds.width / 2;
const targetY = targetBounds.y + targetBounds.height / 2;

const angle = Math.atan2(targetY - eyeY, targetX - eyeX) - Math.PI;

eye.style.transform = `rotate(${angle}rad)`;
}

function toggleAngry(angry) {
if (angry) {
altBud.eyeInnerLeft.setAttribute("cx", 36);
altBud.eyeInnerRight.setAttribute("cx", 64);
altBud.mouth.setAttribute("d", "M 44 87 A 5 4 0 0 1 56 87");

altBud.body.setAttribute("fill", "#e01e37");
const spots = altBud.texture.querySelectorAll("circle");

spots[0].setAttribute("fill", "#bd1f36");
spots[1].setAttribute("fill", "#c71f37");
spots[2].setAttribute("fill", "#85182a");
spots[3].setAttribute("fill", "#c71f37");

if (!prefersReducedMotion) {
altBud.root.style.transform = `rotate(-4deg) translateY(8px)`;
setTimeout(() => {
altBud.root.style.transform = `rotate(4deg) translateY(8px)`;
setTimeout(() => {
altBud.root.style.transform = `rotate(0deg) translateY(8px)`;
}, 125);
}, 125);
}
} else {
altBud.eyeInnerLeft.setAttribute("cx", 33);
altBud.eyeInnerRight.setAttribute("cx", 61);
altBud.mouth.setAttribute("d", "M 44 85 A 5 4 0 0 0 56 85");

altBud.body.setAttribute("fill", "#e0aaff");
const spots = altBud.texture.querySelectorAll("circle");

spots[0].setAttribute("fill", "#c77dff");
spots[1].setAttribute("fill", "#9d4edd");
spots[2].setAttribute("fill", "#c77dff");
spots[3].setAttribute("fill", "#9d4edd");
}
}

(function animLoop() {
if (activeWatchImg) {
rotateEye(activeWatchImg, altBud.eyeLeft);
rotateEye(activeWatchImg, altBud.eyeRight);

if (activeWatchImg.alt.length === 0 && !isAngry) {
toggleAngry(true);

isAngry = true;
} else {
if (activeWatchImg.alt.length !== 0 && isAngry) {
toggleAngry(false);

isAngry = false;
}
}
}

requestAnimationFrame(animLoop);
})();

</script>
<div class="content">
<div class="wrapper">
<p>
<strong>
altBud is a little character who feels sad when they see images without alt tags! They respect your motion preferences too.
</strong>
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi
aspernatur quis nam consequuntur iste doloremque blanditiis, ad quos
repellendus dolores, quae ab perspiciatis, totam non pariatur nobis illo
aperiam cumque. Perferendis nisi explicabo voluptate maxime, tempora
aliquam hic est minima. Cum sapiente fuga similique cupiditate veniam,
vel porro eaque voluptatibus corporis neque deserunt ex id explicabo
dolores in, corrupti repellendus dicta ut nulla beatae rerum perferendis
quo. Sunt, voluptas voluptatem!
</p>
<img src="https://images.unsplash.com/photo-1546238232-20216dec9f72?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2807&q=80" alt="A group of happy puppies" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi modi
sit maxime ducimus eum, laudantium voluptate nobis sed itaque corporis
fugiat ullam ipsa. Animi, quidem!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit
doloribus repellendus ipsa facilis velit temporibus. Reiciendis
voluptatum laboriosam aliquid possimus nihil eum molestias voluptatibus
sed ad porro dolor fuga excepturi, perferendis fugiat odio alias ab
explicabo nulla provident ratione corrupti voluptas! Quidem, consectetur
officiis necessitatibus reiciendis nesciunt saepe animi modi maiores
voluptates id perspiciatis at ipsum facere impedit voluptatem enim porro
excepturi atque sint rem eos blanditiis cumque quas quisquam. Quae eos
repellat at beatae esse porro qui molestias repellendus.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
adipisci alias autem id saepe amet excepturi, laborum perferendis, cum
suscipit ipsa pariatur maxime optio? Non a quas iure magni
reprehenderit. Architecto earum eius veritatis praesentium, facilis
iste! Eos repudiandae ipsam et, quas quibusdam nemo repellendus hic
delectus quisquam vel, sed corrupti necessitatibus accusantium adipisci
ad? Maiores nobis corporis ipsum. Repudiandae dolorem voluptate expedita
ipsum deserunt eveniet suscipit, odit eligendi exercitationem quod
itaque molestias ullam illum nobis, molestiae enim at hic.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt
repellendus tenetur numquam possimus unde neque praesentium aliquam.
Vero aspernatur nobis recusandae illo et quis totam vitae, accusantium
rerum a molestiae aliquid laboriosam debitis corporis neque in voluptas
necessitatibus doloribus? Laborum officiis sapiente quos quis libero
modi nostrum. Sunt officiis atque culpa neque reiciendis omnis
accusantium cumque ea voluptate! Aspernatur officia deserunt pariatur
nesciunt dignissimos id! Ducimus, pariatur provident magnam et amet
alias quia mollitia a earum id explicabo consectetur ut sapiente ipsam
dolor magni cupiditate quae architecto aliquam dignissimos. Aspernatur.
</p>
<img src="https://images.unsplash.com/photo-1531928351158-2f736078e0a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
unde temporibus iste. Voluptatem doloremque ipsum a beatae, dolorem est
saepe nesciunt ratione velit nostrum? Earum excepturi illum natus autem
temporibus ab maiores! Architecto ducimus dolore modi suscipit eveniet
facilis quia aperiam neque?
</p>

<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius, vel
soluta officia, possimus at repudiandae atque quidem maiores quae
tempora voluptatem! Cum, tempore ex. Perspiciatis harum blanditiis
adipisci atque dignissimos in facilis saepe, nam alias aperiam!
Similique ut ratione ducimus possimus voluptatum provident quos at error
culpa! Cum corrupti, accusamus, odit quasi odio ipsum quidem, quia id
unde quisquam fugiat?
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet
repellendus blanditiis nam praesentium inventore temporibus
reprehenderit iste ex aliquam ipsum! Voluptas enim laborum est facere
itaque corrupti voluptatum aspernatur, eum ex, aut quasi iste quisquam?
Vel quisquam rerum eius quia.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi
aspernatur quis nam consequuntur iste doloremque blanditiis, ad quos
repellendus dolores, quae ab perspiciatis, totam non pariatur nobis illo
aperiam cumque. Perferendis nisi explicabo voluptate maxime, tempora
aliquam hic est minima. Cum sapiente fuga similique cupiditate veniam,
vel porro eaque voluptatibus corporis neque deserunt ex id explicabo
dolores in, corrupti repellendus dicta ut nulla beatae rerum perferendis
quo. Sunt, voluptas voluptatem!
</p>
<img src="https://images.unsplash.com/photo-1568043210943-0e8aac4b9734?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" alt="A sleepy cat" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi modi
sit maxime ducimus eum, laudantium voluptate nobis sed itaque corporis
fugiat ullam ipsa. Animi, quidem!
</p>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit
doloribus repellendus ipsa facilis velit temporibus. Reiciendis
voluptatum laboriosam aliquid possimus nihil eum molestias voluptatibus
sed ad porro dolor fuga excepturi, perferendis fugiat odio alias ab
explicabo nulla provident ratione corrupti voluptas! Quidem, consectetur
officiis necessitatibus reiciendis nesciunt saepe animi modi maiores
voluptates id perspiciatis at ipsum facere impedit voluptatem enim porro
excepturi atque sint rem eos blanditiis cumque quas quisquam. Quae eos
repellat at beatae esse porro qui molestias repellendus.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit,
adipisci alias autem id saepe amet excepturi, laborum perferendis, cum
suscipit ipsa pariatur maxime optio? Non a quas iure magni
reprehenderit. Architecto earum eius veritatis praesentium, facilis
iste! Eos repudiandae ipsam et, quas quibusdam nemo repellendus hic
delectus quisquam vel, sed corrupti necessitatibus accusantium adipisci
ad? Maiores nobis corporis ipsum. Repudiandae dolorem voluptate expedita
ipsum deserunt eveniet suscipit, odit eligendi exercitationem quod
itaque molestias ullam illum nobis, molestiae enim at hic.
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt
repellendus tenetur numquam possimus unde neque praesentium aliquam.
Vero aspernatur nobis recusandae illo et quis totam vitae, accusantium
rerum a molestiae aliquid laboriosam debitis corporis neque in voluptas
necessitatibus doloribus? Laborum officiis sapiente quos quis libero
modi nostrum. Sunt officiis atque culpa neque reiciendis omnis
accusantium cumque ea voluptate! Aspernatur officia deserunt pariatur
nesciunt dignissimos id! Ducimus, pariatur provident magnam et amet
alias quia mollitia a earum id explicabo consectetur ut sapiente ipsam
dolor magni cupiditate quae architecto aliquam dignissimos. Aspernatur.
</p>
<img src="https://images.unsplash.com/photo-1545231160-9f9a3ed14696?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1567&q=80" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
unde temporibus iste. Voluptatem doloremque ipsum a beatae, dolorem est
saepe nesciunt ratione velit nostrum? Earum excepturi illum natus autem
temporibus ab maiores! Architecto ducimus dolore modi suscipit eveniet
facilis quia aperiam neque?
</p>

[/html]

Magazine �i� �i�

mybb@mybb.ru (concoction) — Wed, 03 Oct 2018 22:00:39 +0300

concoction

������ ���

������

������

�����

�������

����

����������

�������

����� ����� �� ������� �����

�������� ���������

Magazine �i� �i�

��

��

��

��

��

��

��

��

��

��