{"id":480537,"date":"2026-05-21T13:34:31","date_gmt":"2026-05-21T13:34:31","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=480537"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=480537","title":{"rendered":"\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043a\u0430\u043a \u043f\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u00bb: \u043a\u0430\u043a \u044f \u0432 \u043e\u0434\u0438\u043d\u043e\u0447\u043a\u0443 \u0441\u0434\u0435\u043b\u0430\u043b \u043f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u0438\u043d\u043e-\u0441\u0435\u0440\u0432\u0438\u0441\u0430 (\u0441 \u043a\u043e\u0434\u043e\u043c)"},"content":{"rendered":"
\n

\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b, \u043a\u0430\u043a\u043e\u0432\u043e \u0432 \u043e\u0434\u0438\u043d\u043e\u0447\u043a\u0443 \u0442\u0430\u0449\u0438\u0442\u044c \u0444\u0443\u043b\u043b\u0441\u0442\u0435\u043a-\u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u0440\u043e\u0441\u0441\u044f \u0434\u043e \u043a\u0438\u043d\u043e-\u0441\u043e\u0446\u0441\u0435\u0442\u0438. \u0412 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0441\u043f\u0440\u043e\u0441\u0438\u043b\u0438 \u043f\u0440\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u0438\u043a\u0443 \u2014 \u00ab\u043f\u043e\u043a\u0430\u0436\u0438 \u043a\u043e\u0434\u00bb, \u00ab\u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043b, \u0447\u0442\u043e \u043d\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u00bb. \u041b\u043e\u0433\u0438\u0447\u043d\u043e: \u0434\u0438\u0437\u0430\u0439\u043d \u2014 \u044d\u0442\u043e \u0442\u043e, \u043f\u043e \u0447\u0435\u043c\u0443 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0435\u0440\u0436\u0438\u0442\u0435 \u0432\u0442\u043e\u0440\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0443\u0436\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0438 \u0441 \u043a\u043e\u0434\u043e\u043c. \u0411\u0435\u0437 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u043c\u00bb, \u0438 \u043f\u0430\u0440\u0430 \u0431\u044d\u043a\u0435\u043d\u0434-\u0445\u0438\u0442\u0440\u043e\u0441\u0442\u0435\u0439 \u0432 \u0434\u043e\u0432\u0435\u0441\u043e\u043a.<\/p>\n

\u0421\u0440\u0430\u0437\u0443 \u0434\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440: \u044f \u043d\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440. \u0412\u0441\u0451 \u043d\u0430\u0436\u0438\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u00ab\u0441\u043c\u043e\u0442\u0440\u044e \u043d\u0430 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u044b (Letterboxd, Mubi, KinoPoisk HD) \u0438 \u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435\u00bb. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e \u0434\u043e\u0440\u043e\u0433\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u0430 \u043f\u0440\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u043f\u0440\u0438\u0451\u043c\u043e\u0432. \u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u044f\u0442\u044c.<\/p>\n

1. \u0410\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437 \u043f\u043e\u0441\u0442\u0435\u0440\u0430 \u0444\u0438\u043b\u044c\u043c\u0430 \u2014 \u0444\u0438\u0447\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0440\u043e\u0436\u0435 \u0432\u0441\u0435\u0433\u043e \u00ab\u043f\u0440\u043e\u0434\u0430\u0451\u0442\u00bb<\/strong><\/p>\n

\u0421\u0430\u043c\u043e\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u0420\u0430\u043d\u044c\u0448\u0435 \u0443 \u043c\u0435\u043d\u044f \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0431\u044b\u043b \u043e\u0434\u0438\u043d \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0444\u0438\u043e\u043b\u0435\u0442\u043e\u0432\u044b\u0439 \u0430\u043a\u0446\u0435\u043d\u0442 \u2014 \u0438 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u0434\u0451\u0448\u0435\u0432\u043e \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u0418\u0434\u0435\u044f: \u043f\u0443\u0441\u0442\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0444\u0438\u043b\u044c\u043c\u0430 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043c\u0438\u043d\u0430\u043d\u0442\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0435\u0440\u0430. \u0417\u0430\u0445\u043e\u0434\u0438\u0448\u044c \u043d\u0430 \u043c\u0440\u0430\u0447\u043d\u044b\u0439 \u043d\u0443\u0430\u0440 \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u0445\u043e\u0434\u0438\u0442 \u0432 \u0445\u043e\u043b\u043e\u0434\u043d\u044b\u0439 \u0441\u0438\u043d\u0438\u0439, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0448\u044c \u043a\u043e\u043c\u0435\u0434\u0438\u044e \u2014 \u0442\u0451\u043f\u043b\u044b\u0439 \u044f\u043d\u0442\u0430\u0440\u044c. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0442\u043e \u00ab\u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u043f\u043e\u0434 \u044d\u0442\u043e\u0442 \u0444\u0438\u043b\u044c\u043c\u00bb.<\/p>\n

\u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437 \u0432\u0441\u044f\u043a\u0438\u0445 ML, \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0447\u0435\u0440\u0435\u0437 canvas: \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u0441\u0442\u0435\u0440 \u0432 \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439 \u0431\u0443\u0444\u0435\u0440 32\u00d748, \u0443\u0441\u0440\u0435\u0434\u043d\u044f\u0435\u043c \u0446\u0432\u0435\u0442\u0430 (\u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u044f \u0447\u0451\u0440\u043d\u044b\u0435 \u0440\u0430\u043c\u043a\u0438 \u0438 \u0441\u0435\u0440\u043e\u0441\u0442\u044c), \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0432 HSL \u0438 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u00ab\u043d\u0430\u0441\u044b\u0449\u0430\u0435\u043c\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0441\u0442\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u043e \u0442\u0443\u0441\u043a\u043b\u044b\u0435. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u043b\u0430\u0434\u0451\u043c \u0432 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u2014 \u0438 \u0432\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0435\u0451.<\/p>\n

function applyPosterAccent(posterUrl: string) {  const img = new Image();  img.crossOrigin = \"anonymous\";  img.onload = () => {    const canvas = document.createElement(\"canvas\");    const w = (canvas.width = 32), h = (canvas.height = 48);    const ctx = canvas.getContext(\"2d\");    if (!ctx) return;    ctx.drawImage(img, 0, 0, w, h);    const { data } = ctx.getImageData(0, 0, w, h);    let r = 0, g = 0, b = 0, n = 0;    for (let i = 0; i < data.length; i += 4) {      const R = data[i], G = data[i + 1], B = data[i + 2];      const max = Math.max(R, G, B), min = Math.min(R, G, B);      if (max < 30 || min > 230) continue; \/\/ \u0447\u0451\u0440\u043d\u044b\u0435 \u0440\u0430\u043c\u043a\u0438 \/ \u0432\u044b\u0431\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438      if (max - min < 25) continue;          \/\/ \u0441\u0435\u0440\u043e\u0435 \u2014 \u0432 \u0430\u043a\u0446\u0435\u043d\u0442 \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f      r += R; g += G; b += B; n++;    }    if (!n) return;    const { h: hue, s, l } = rgbToHsl(r \/ n, g \/ n, b \/ n);    \/\/ \u043f\u043e\u0441\u0442\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u043e \u0442\u0443\u0441\u043a\u043b\u044b\u0435 \u2014 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u00ab\u0441\u043e\u0447\u043d\u044b\u043c\u00bb    const sat = Math.min(0.85, Math.max(0.45, s * 1.6 + 0.15));    const lit = Math.min(0.62, Math.max(0.52, l));    document.documentElement.style.setProperty(      \"--movie-accent\", `hsl(${hue | 0} ${(sat * 100) | 0}% ${(lit * 100) | 0}%)`    );    document.documentElement.style.setProperty(      \"--movie-accent-soft\", `hsl(${hue | 0} ${(sat * 100) | 0}% ${(lit * 100) | 0}% \/ .18)`    );  };  img.src = posterUrl;}<\/code>
<\/a><\/div><\/pre>\n
  const img = new Image();<\/code><\/p>\n
  img.crossOrigin = \"anonymous\";<\/code><\/p>\n
  img.onload = () => {<\/code><\/p>\n
    const canvas = document.createElement(\"canvas\");<\/code><\/p>\n
    const w = (canvas.width = 32), h = (canvas.height = 48);<\/code><\/p>\n
    const ctx = canvas.getContext(\"2d\");<\/code><\/p>\n
    if (!ctx) return;<\/code><\/p>\n
    ctx.drawImage(img, 0, 0, w, h);<\/code><\/p>\n
    const { data } = ctx.getImageData(0, 0, w, h);<\/code><\/p>\n
    let r = 0, g = 0, b = 0, n = 0;<\/code><\/p>\n
    for (let i = 0; i < data.length; i += 4) {<\/code><\/p>\n
      const R = data[i], G = data[i + 1], B = data[i + 2];<\/code><\/p>\n
      const max = Math.max(R, G, B), min = Math.min(R, G, B);<\/code><\/p>\n
      if (max < 30 || min > 230) continue; \/\/ \u0447\u0451\u0440\u043d\u044b\u0435 \u0440\u0430\u043c\u043a\u0438 \/ \u0432\u044b\u0431\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438<\/em><\/code><\/p>\n
      if (max - min < 25) continue;          \/\/ \u0441\u0435\u0440\u043e\u0435 \u2014 \u0432 \u0430\u043a\u0446\u0435\u043d\u0442 \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f<\/em><\/code><\/p>\n
      r += R; g += G; b += B; n++;<\/code><\/p>\n
    }<\/code><\/p>\n
    if (!n) return;<\/code><\/p>\n
    const { h: hue, s, l } = rgbToHsl(r \/ n, g \/ n, b \/ n);<\/code><\/p>\n
    \/\/ \u043f\u043e\u0441\u0442\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u043e \u0442\u0443\u0441\u043a\u043b\u044b\u0435 \u2014 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u00ab\u0441\u043e\u0447\u043d\u044b\u043c\u00bb<\/em><\/code><\/p>\n
    const sat = Math.min(0.85, Math.max(0.45, s * 1.6 + 0.15));<\/code><\/p>\n
    const lit = Math.min(0.62, Math.max(0.52, l));<\/code><\/p>\n
    <\/code>document.documentElement.style<\/code><\/a>.setProperty(<\/code><\/p>\n
      \"--movie-accent\", hsl(${hue | 0} ${(sat  100) | 0}% ${(lit <\/em> 100) | 0}%)<\/code><\/p>\n
    );<\/code><\/p>\n
    <\/code>document.documentElement.style<\/code><\/a>.setProperty(<\/code><\/p>\n
      \"--movie-accent-soft\", hsl(${hue | 0} ${(sat  100) | 0}% ${(lit <\/em> 100) | 0}% \/ .18)<\/code><\/p>\n
    );<\/code><\/p>\n
  };<\/code><\/p>\n
  img.src = posterUrl;<\/code><\/p>\n
}<\/code><\/p>\n
rgbToHsl<\/code>\u00a0\u2014 \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044f RGB\u2192HSL, \u043e\u043d\u0430 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0435 \u0432 \u0441\u0435\u0442\u0438. \u0412\u0430\u0436\u043d\u044b \u0434\u0432\u0430 \u043c\u043e\u043c\u0435\u043d\u0442\u0430: \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u00ab\u043c\u0443\u0441\u043e\u0440\u043d\u044b\u0445\u00bb \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 (\u0431\u0435\u0437 \u043d\u0435\u0451 \u043d\u0430 \u0447\u0451\u0440\u043d\u044b\u0445 \u043f\u043e\u0441\u0442\u0435\u0440\u0430\u0445 \u0430\u043a\u0446\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0433\u0440\u044f\u0437\u043d\u043e-\u0441\u0435\u0440\u044b\u043c) \u0438 \u0431\u0443\u0441\u0442 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438 (s * 1.6 + 0.15<\/code>) \u2014 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0444\u0438\u043b\u044c\u043c\u043e\u0432 \u0434\u0430\u0432\u0430\u043b\u0430 \u0431\u044b \u0431\u043b\u0451\u043a\u043b\u044b\u0439 \u0430\u043a\u0446\u0435\u043d\u0442.<\/p>\n
\u0421\u0442\u043e\u0438\u0442 \u044d\u0442\u043e \u043a\u043e\u043f\u0435\u0439\u043a\u0438 \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 (\u0434\u0430\u0443\u043d\u0441\u043a\u0435\u0439\u043b \u0434\u043e 32\u00d748 \u2014 \u044d\u0442\u043e \u043c\u0435\u043d\u044c\u0448\u0435 1500 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439), \u0430 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u0434\u0430\u0451\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u00ab\u043f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u043e\u0435\u00bb: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.<\/p>\n
2. Glassmorphism \u0447\u0435\u0440\u0435\u0437 \u043e\u0434\u043d\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0430 \u043d\u0435 100 \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432<\/strong><\/p>\n
\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0438\u0451\u043c \u2014 \u0441\u0442\u0435\u043a\u043b\u043e. \u041d\u043e \u043d\u0435 \u00ab\u043f\u0440\u0438\u043b\u0435\u043f\u0438\u043b blur \u0438 \u0437\u0430\u0431\u044b\u043b\u00bb, \u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u043e \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435\u00a0--movie-accent<\/code>. \u0422\u043e\u0433\u0434\u0430 \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434 \u0444\u0438\u043b\u044c\u043c, \u0438 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0446\u0435\u043b\u044c\u043d\u043e.<\/p>\n
.glass-card {  background: linear-gradient(180deg,      var(--movie-accent-soft, rgba(255,255,255,.06)),      rgba(255,255,255,.02));  backdrop-filter: blur(18px) saturate(1.2);  border: 1px solid rgba(255,255,255,.08);  border-radius: 18px;  box-shadow: 0 24px 60px -20px var(--movie-accent-soft);}<\/code>
<\/a><\/div><\/pre>\n
  background: linear-gradient(180deg,<\/code><\/p>\n
      var(--movie-accent-soft, rgba(255,255,255,.06)),<\/code><\/p>\n
      rgba(255,255,255,.02));<\/code><\/p>\n
  backdrop-filter: blur(18px) saturate(1.2);<\/code><\/p>\n
  border: 1px solid rgba(255,255,255,.08);<\/code><\/p>\n
  border-radius: 18px;<\/code><\/p>\n
  box-shadow: 0 24px 60px -20px var(--movie-accent-soft);<\/code><\/p>\n
}<\/code><\/p>\n
\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0443\u0440\u043e\u043a: \u043f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c = \u0435\u0434\u0438\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u0434\u043b\u044f \u0442\u0435\u043c\u044b. \u041a\u043e\u0433\u0434\u0430 \u0446\u0432\u0435\u0442\u0430 \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u044b \u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u0432\u0441\u0451 \u0440\u0430\u0441\u0441\u044b\u043f\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u00ab\u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435\u00bb \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0430\u043c\u043e\u0434\u0435\u043b\u044c\u043d\u043e. \u041a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c 5\u20136 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 (--bg<\/code>,\u00a0--glass<\/code>,\u00a0--accent<\/code>,\u00a0--accent-soft<\/code>,\u00a0--text<\/code>,\u00a0--dim<\/code>) \u2014 \u0432\u0441\u0451 \u0434\u044b\u0448\u0438\u0442 \u0432 \u0443\u043d\u0438\u0441\u043e\u043d, \u0438 \u0442\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443.<\/p>\n
\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0431\u043e\u043b\u044c \u0441 SSR: \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043d\u0430 \u0442\u0451\u043c\u043d\u043e\u043c \u0444\u043e\u043d\u0435 \u0434\u0430\u044e\u0442 \u043c\u0435\u0440\u0437\u043a\u0438\u0439 \u00ab\u043c\u0438\u0433\u0430\u044e\u0449\u0438\u0439\u00bb FOUC, \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u0435\u0434\u0443\u0442 \u043f\u043e\u0437\u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u041b\u0435\u0447\u0438\u0442\u0441\u044f \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u043c \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u044f\u043c\u043e \u0432\u00a0<head><\/code>\u00a0\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u2014 \u0442\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u0430\u0434\u0440 \u0443\u0436\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439.<\/p>\n
3. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u00ab\u043a\u0438\u043d\u043e\u043b\u0435\u043d\u0442\u0430\u00bb \u0441\u0432\u0435\u0440\u0445\u0443 \u2014 \u043c\u0435\u043b\u043e\u0447\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u00bb<\/strong><\/p>\n
\u041f\u043e\u0434 \u0448\u0430\u043f\u043a\u043e\u0439 \u0443 \u043c\u0435\u043d\u044f \u0435\u0434\u0435\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u0442\u0435\u0440\u043e\u0432 \u2014 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0434\u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433-\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438. \u0421\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u043e\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f (\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b + \u0441\u0442\u0440\u0435\u043b\u043a\u0438), \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441 UX, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442 \u00ab\u043b\u0435\u043d\u0442\u0443\u00bb \u043e\u0442 \u00ab\u0434\u0451\u0448\u0435\u0432\u043e \u043f\u0440\u0438\u0431\u0438\u0442\u043e\u0433\u043e \u0440\u044f\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a\u00bb: \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0433\u0430\u0441\u043d\u0443\u0442\u044c \u0432 \u043a\u0440\u0430\u0439\u043d\u0438\u0445 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n
const updateArrows = () => {  const el = stripRef.current;  if (!el) return;  setCanLeft(el.scrollLeft > 4);  setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);};\/\/ \u0432\u0435\u0448\u0430\u0435\u043c \u043d\u0430 el.addEventListener(\"scroll\", updateArrows, { passive: true })\/\/ + ResizeObserver, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0435\u0441\u0430\u0439\u0437\u0435<\/code>
<\/a><\/div><\/pre>\n
  const el = stripRef.current;<\/code><\/p>\n
  if (!el) return;<\/code><\/p>\n
  setCanLeft(el.scrollLeft > 4);<\/code><\/p>\n
  setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 4);<\/code><\/p>\n
};<\/code><\/p>\n
\/\/ \u0432\u0435\u0448\u0430\u0435\u043c \u043d\u0430 el.addEventListener(\"scroll\", updateArrows, { passive: true })<\/em><\/code><\/p>\n
\/\/ + ResizeObserver, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0435\u0441\u0430\u0439\u0437\u0435<\/em><\/code><\/p>\n
\u041f\u043b\u044e\u0441 \u043f\u0435\u0440\u0432\u044b\u0435 4 \u043f\u043e\u0441\u0442\u0435\u0440\u0430 \u0433\u0440\u0443\u0437\u0438\u043c\u00a0loading=\"eager\"<\/code>\u00a0(\u043e\u043d\u0438 \u0432\u044b\u0448\u0435 fold \u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 LCP), \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u2014\u00a0lazy<\/code>. \u0417\u0432\u0443\u0447\u0438\u0442 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043c\u0435\u043b\u043e\u0447\u0435\u0439 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u00ab\u0432\u0441\u0451 \u043f\u043b\u0430\u0432\u043d\u043e \u0438 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043e\u00bb.<\/p>\n
4. Web Push \u0431\u0435\u0437 Firebase \u2014 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c VAPID<\/strong><\/p>\n
\u0425\u0432\u0430\u0442\u0438\u0442 \u043f\u0440\u043e \u0444\u0440\u043e\u043d\u0442. \u041f\u0443\u0448-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c Web Push, \u0431\u0435\u0437 FCM \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u2014 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0432\u0435\u043d\u0434\u043e\u0440-\u043b\u043e\u043a\u0430 \u0440\u0430\u0434\u0438 \u043f\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c service worker \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f:<\/p>\n
const reg = await navigator.serviceWorker.register(\"\/sw.js\");const sub = await reg.pushManager.subscribe({  userVisibleOnly: true,  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY),});await fetch(\"\/api\/push\/subscribe\", {  method: \"POST\",  headers: { \"Content-Type\": \"application\/json\" },  body: JSON.stringify(sub),});<\/code>
<\/a><\/div><\/pre>\n
const sub = await reg.pushManager.subscribe({<\/code><\/p>\n
  userVisibleOnly: true,<\/code><\/p>\n
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY),<\/code><\/p>\n
});<\/code><\/p>\n
await fetch(\"\/api\/push\/subscribe\", {<\/code><\/p>\n
  method: \"POST\",<\/code><\/p>\n
  headers: { \"Content-Type\": \"application\/json\" },<\/code><\/p>\n
  body: JSON.stringify(sub),<\/code><\/p>\n
});<\/code><\/p>\n
\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 (endpoint<\/code>\u00a0+ \u043a\u043b\u044e\u0447\u0438\u00a0p256dh<\/code>\/auth<\/code>) \u0445\u0440\u0430\u043d\u044e \u0432 PostgreSQL, \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e. \u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043d\u0430 \u0431\u044d\u043a\u0435 (FastAPI) \u2014 \u0447\u0435\u0440\u0435\u0437\u00a0pywebpush<\/code>:<\/p>\n
from pywebpush import webpush, WebPushExceptiondef send_push(sub, title, body, url=\"\/\"):    try:        webpush(            subscription_info={                \"endpoint\": sub.endpoint,                \"keys\": {\"p256dh\": sub.p256dh, \"auth\": sub.auth},            },            data=json.dumps({\"title\": title, \"body\": body, \"url\": url}),            vapid_private_key=VAPID_PRIVATE,            vapid_claims={\"sub\": \"mailto:admin@example.com\"},            ttl=3600,        )    except WebPushException as e:        # 404\/410 = \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u043e\u0442\u0443\u0445\u043b\u0430 \u2192 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0438\u0437 \u0431\u0430\u0437\u044b, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043a\u043e\u043f\u0438\u043b\u0441\u044f \u043c\u0443\u0441\u043e\u0440        if e.response is not None and e.response.status_code in (404, 410):            delete_subscription(sub.id)<\/code>
<\/a><\/div><\/pre>\n
def send_push(sub, title, body, url=\"\/\"):<\/code><\/p>\n
    try:<\/code><\/p>\n
        webpush(<\/code><\/p>\n
            subscription_info={<\/code><\/p>\n
                \"endpoint\": sub.endpoint,<\/code><\/p>\n
                \"keys\": {\"p256dh\": sub.p256dh, \"auth\": sub.auth},<\/code><\/p>\n
            },<\/code><\/p>\n
            data=json.dumps({\"title\": title, \"body\": body, \"url\": url}),<\/code><\/p>\n
            vapid_private_key=VAPID_PRIVATE,<\/code><\/p>\n
            vapid_claims={\"sub\": \"<\/code>mailto:admin@example.com<\/code><\/a>\"},<\/code><\/p>\n
            ttl=3600,<\/code><\/p>\n
        )<\/code><\/p>\n
    except WebPushException as e:<\/code><\/p>\n
        # 404\/410 = \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u043e\u0442\u0443\u0445\u043b\u0430 \u2192 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0438\u0437 \u0431\u0430\u0437\u044b, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043a\u043e\u043f\u0438\u043b\u0441\u044f \u043c\u0443\u0441\u043e\u0440<\/em><\/code><\/p>\n
        if e.response is not None and e.response.status_code in (404, 410):<\/code><\/p>\n
            delete_subscription(<\/code>sub.id<\/code><\/a>)<\/code><\/p>\n
\u0413\u0440\u0430\u0431\u043b\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u043e\u0438\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0430\u043c \u043d\u0435\u0440\u0432\u044b: \u043d\u0430 iOS \u043f\u0443\u0448\u0438 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0441\u0430\u0439\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043a\u0430\u043a PWA (Safari 16.4+) \u2014 \u044d\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 Apple, \u043d\u0435 \u0432\u0430\u0448\u0435. \u0418 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0438\u0441\u0442\u0438\u0442\u0435 \u043c\u0451\u0440\u0442\u0432\u044b\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043f\u043e 404\/410, \u0438\u043d\u0430\u0447\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0441\u043f\u0443\u0445\u0430\u0435\u0442 \u00ab\u0444\u0430\u043d\u0442\u043e\u043c\u043d\u044b\u043c\u0438\u00bb \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438.<\/p>\n
5. \u041e\u0434\u0438\u043d \u0447\u0435\u0441\u0442\u043d\u044b\u0439 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0438\u0437 \u0433\u043e\u043b\u043e\u0441\u043e\u0432 \u0438 \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0439 (\u0438 \u0431\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u044d\u0442\u0438\u043c \u0437\u0430\u043a\u0440\u044b\u043b)<\/strong><\/p>\n
\u0411\u044d\u043a\u0435\u043d\u0434-\u0438\u0441\u0442\u043e\u0440\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0425\u0430\u0431\u0440 \u043b\u044e\u0431\u0438\u0442: \u00ab\u0431\u044b\u043b\u043e \u043a\u0440\u0438\u0432\u043e \u2014 \u0441\u0442\u0430\u043b\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u00bb. \u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0444\u0438\u043b\u044c\u043c \u2014 \u0437\u0432\u0451\u0437\u0434\u043d\u044b\u0439 \u0433\u043e\u043b\u043e\u0441 (\u00ab\u043e\u0446\u0435\u043d\u0438\u0442\u044c\u00bb) \u0438 \u043e\u0446\u0435\u043d\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d\u0438 \u0436\u0438\u043b\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044c\u043d\u043e: \u043e\u0434\u0438\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u0447\u0438\u0442\u0430\u043b \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0433\u043e\u043b\u043e\u0441\u043e\u0432, \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u0438\u0437 \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0439, \u0438 \u043e\u0431\u0430 \u043f\u0438\u0441\u0430\u043b\u0438 \u0432 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u043f\u043e\u043b\u0435. \u0418\u0442\u043e\u0433 \u2014 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0441\u043a\u0430\u043a\u0430\u043b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c. \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u00ab\u043d\u0435\u0440\u0430\u0437\u0431\u0435\u0440\u0438\u0445\u0430\u00bb.<\/p>\n
\u041f\u043e\u0447\u0438\u043d\u0438\u043b \u043e\u0434\u043d\u0438\u043c SQL \u2014 \u0435\u0434\u0438\u043d\u044b\u0439 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u043a\u0430\u043a \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u043f\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u0433\u0434\u0435 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0435\u0433\u043e \u0437\u0432\u0451\u0437\u0434\u043d\u044b\u0439 \u0433\u043e\u043b\u043e\u0441, \u0430 \u0435\u0441\u043b\u0438 \u0433\u043e\u043b\u043e\u0441\u0430 \u043d\u0435\u0442 \u2014 \u043e\u0446\u0435\u043d\u043a\u0430 \u0438\u0437 \u043e\u0434\u043e\u0431\u0440\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0438:<\/p>\n
WITH per_user AS (    SELECT user_id, rating FROM movie_votes WHERE movie_id = :mid    UNION ALL    SELECT user_id, rating FROM reviews      WHERE movie_id = :mid        AND status = 'approved'        AND user_id NOT IN (SELECT user_id FROM movie_votes WHERE movie_id = :mid))SELECT COALESCE(AVG(rating), 0), COUNT(*) FROM per_user;<\/code>
<\/a><\/div><\/pre>\n
    SELECT user_id, rating FROM movie_votes WHERE movie_id = :mid<\/code><\/p>\n
    UNION ALL<\/code><\/p>\n
    SELECT user_id, rating FROM reviews<\/code><\/p>\n
      WHERE movie_id = :mid<\/code><\/p>\n
        AND status = 'approved'<\/code><\/p>\n
        AND user_id NOT IN (SELECT user_id FROM movie_votes WHERE movie_id = :mid)<\/code><\/p>\n
)<\/code><\/p>\n
SELECT COALESCE(AVG(rating), 0), COUNT(*) FROM per_user;<\/code><\/p>\n
NOT IN (...\u0433\u043e\u043b\u043e\u0441\u0430...)<\/code>\u00a0\u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0434\u0435\u0434\u0443\u043f\u043b\u0438\u043a\u0430\u0446\u0438\u044f: \u043f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u044e \u2014 \u0443\u0447\u0442\u0451\u043c \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0433\u043e\u043b\u043e\u0441 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u0435\u0435. \u042d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u044f \u0437\u043e\u0432\u0443 \u0438\u0437 \u0432\u0441\u0435\u0445 \u043c\u0435\u0441\u0442, \u0433\u0434\u0435 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f (\u0433\u043e\u043b\u043e\u0441, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\/\u043f\u0440\u0430\u0432\u043a\u0430\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0438). \u041e\u0434\u0438\u043d \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u2014 \u0438 \u043f\u043e\u043b\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043b\u043e \u00ab\u0434\u044b\u0448\u0430\u0442\u044c\u00bb.<\/p>\n
\u0411\u043e\u043d\u0443\u0441: \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u043e\u0439 \u0433\u0435\u0439\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0443\u0431\u0438\u0432\u0430\u0435\u0442 SEO<\/strong><\/p>\n
\u0420\u0430\u0437 \u0443\u0436 \u043f\u0440\u043e \u043a\u0438\u043d\u043e \u2014 \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0431\u043b\u043e\u043a 18+ \u043d\u0430 \u00ab\u0432\u0437\u0440\u043e\u0441\u043b\u044b\u0445\u00bb \u0444\u0438\u043b\u044c\u043c\u0430\u0445. \u0422\u0443\u0442 \u043b\u0435\u0433\u043a\u043e \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0432 \u043d\u043e\u0433\u0443: \u0435\u0441\u043b\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0435\u0439\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043f\u0440\u044f\u0442\u0430\u0442\u044c \u043f\u043e\u0434 \u043d\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a \u0443\u0432\u0438\u0434\u0438\u0442 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0432\u044b\u043a\u0438\u043d\u0435\u0442 \u0435\u0451 \u0438\u0437 \u0438\u043d\u0434\u0435\u043a\u0441\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0433\u0435\u0439\u0442 \u0443 \u043c\u0435\u043d\u044f \u2014 \u0441\u0442\u0440\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043e\u0432\u0435\u0440\u043b\u0435\u0439 \u043f\u043e\u0432\u0435\u0440\u0445 \u0443\u0436\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430:<\/p>\n
\"use client\";export default function AgeGate({ ageRating, mpaa }: Props) {  const [confirmed, setConfirmed] = useState(false);  useEffect(() => {    setConfirmed(localStorage.getItem(\"vm_age18_ok\") === \"1\");  }, []);  if (!is18Plus(ageRating, mpaa) || confirmed) return null;  return <div className=\"age-overlay\">\/* \u2026 *\/<\/div>;}<\/code>
<\/a><\/div><\/pre>\n
export default function AgeGate({ ageRating, mpaa }: Props) {<\/code><\/p>\n
  const [confirmed, setConfirmed] = useState(false);<\/code><\/p>\n
  useEffect(() => {<\/code><\/p>\n
    setConfirmed(localStorage.getItem(\"vm_age18_ok\") === \"1\");<\/code><\/p>\n
  }, []);<\/code><\/p>\n
  if (!is18Plus(ageRating, mpaa) || confirmed) return null;<\/code><\/p>\n
  return <div className=\"age-overlay\">\/* \u2026 *\/<\/div>;<\/code><\/p>\n
}<\/code><\/p>\n
\u041f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u0440\u043e\u0431\u043e\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 HTML \u0441\u043e \u0432\u0441\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0444\u0438\u043b\u044c\u043c\u0430; \u0433\u0435\u0439\u0442\u0430 \u0432 \u044d\u0442\u043e\u0439 HTML \u043d\u0435\u0442 (\u043e\u043d \u0434\u043e\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u00a0localStorage<\/code>), \u0440\u0435\u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0432 \u0438\u00a0noindex<\/code>\u00a0\u0442\u043e\u0436\u0435 \u043d\u0435\u0442. \u0414\u043b\u044f \u0436\u0438\u0432\u043e\u0433\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u043a\u0440\u044b\u0442, \u0434\u043b\u044f \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u2014 \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0433\u0435\u0439\u0442\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u0412\u043e\u0437\u0440\u0430\u0441\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u043a \u0441\u043b\u043e\u0432\u0443, \u043f\u0440\u044f\u043c\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0438\u0437 \u00ab\u0448\u0442\u0440\u0430\u0444\u0430 \u0437\u0430 \u043d\u0430\u0432\u044f\u0437\u0447\u0438\u0432\u044b\u0435 \u0431\u0430\u043d\u043d\u0435\u0440\u044b\u00bb \u0443 Google.<\/p>\n
\u0427\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435<\/strong><\/p>\n
\u041f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u043e\u0434\u0438\u043d\u043e\u0447\u043a\u0443 \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e \u0431\u044e\u0434\u0436\u0435\u0442, \u0430 \u043f\u0440\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0438\u0441\u0446\u0438\u043f\u043b\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u0451\u043c\u043e\u0432: \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 (\u0446\u0432\u0435\u0442 \u0438\u0437 \u043f\u043e\u0441\u0442\u0435\u0440\u0430), \u0435\u0434\u0438\u043d\u0430\u044f \u0442\u0435\u043c\u0430 \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a \u043c\u0438\u043a\u0440\u043e-UX (\u0433\u0430\u0441\u043d\u0443\u0449\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043a\u0438, \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438), \u0438 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b\u0435 \u00ab\u0441\u043a\u0443\u0447\u043d\u044b\u0435\u00bb \u0431\u044d\u043a\u0435\u043d\u0434-\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0432\u043e\u0434\u044f\u0442. \u041d\u0438\u0447\u0435\u0433\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437 \u043f\u044f\u0442\u044c.<\/p>\n
\u0415\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0436\u0438\u0432\u044c\u0451\u043c, \u043d\u0430 \u0447\u0451\u043c \u0432\u0441\u0451 \u044d\u0442\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u0432 \u0431\u043e\u044e \u2014 \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0442\u043a\u0440\u044b\u0442: vibemuvik.ru<\/a>. \u041d\u0435 \u0437\u043e\u0432\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043f\u0440\u043e\u0441\u0442\u043e \u0435\u0441\u043b\u0438 \u043f\u043e \u0445\u043e\u0434\u0443 \u0441\u0442\u0430\u0442\u044c\u0438 \u0441\u0442\u0430\u043b\u043e \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e, \u043a\u0430\u043a \u00ab\u0446\u0432\u0435\u0442 \u0438\u0437 \u043f\u043e\u0441\u0442\u0435\u0440\u0430\u00bb \u0438 \u0441\u0442\u0435\u043a\u043b\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u2014 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0439\u0442\u0438 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043b\u044e\u0431\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u043c\u0430.<\/p>\n
\u0410 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e: \u043a\u0430\u043a\u0438\u043c\u0438 \u043f\u0440\u0438\u0451\u043c\u0430\u043c\u0438 \u0432\u044b \u00ab\u0443\u0434\u0435\u0448\u0435\u0432\u043b\u044f\u0435\u0442\u0435\u00bb \u0438\u043b\u0438, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u00ab\u0443\u0434\u043e\u0440\u043e\u0436\u0430\u0435\u0442\u0435\u00bb \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043c\u0430\u043b\u043e\u0439 \u043a\u0440\u043e\u0432\u044c\u044e? \u0418 \u0433\u0434\u0435, \u043f\u043e-\u0432\u0430\u0448\u0435\u043c\u0443, \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u00ab\u043f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u043e\u00bb \u0438 \u00ab\u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043d\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438\u00bb? \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e \u043e\u0442 \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u0436\u0435 \u0442\u0430\u0449\u0438\u0442 \u0444\u0440\u043e\u043d\u0442 \u0432 \u043e\u0434\u0438\u043d\u043e\u0447\u043a\u0443 \u2014 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0441\u0432\u043e\u0438\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u043a\u0430\u043c\u0438 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n
<\/figure>\n
\u0438 \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0430\u043b<\/p>\n
<\/figure>\n
\u0431\u044b\u043b\u043e<\/p>\n
<\/figure>\n
\u0438 \u0441\u0442\u0430\u043b\u043e<\/p>\n
<\/figure>\n<\/div>\n
\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1037818\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b, \u043a\u0430\u043a\u043e\u0432\u043e \u0432 \u043e\u0434\u0438\u043d\u043e\u0447\u043a\u0443 \u0442\u0430\u0449\u0438\u0442\u044c \u0444\u0443\u043b\u043b\u0441\u0442\u0435\u043a-\u043f\u0440\u043e\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u0440\u043e\u0441\u0441\u044f \u0434\u043e \u043a\u0438\u043d\u043e-\u0441\u043e\u0446\u0441\u0435\u0442\u0438. \u0412 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0441\u043f\u0440\u043e\u0441\u0438\u043b\u0438 \u043f\u0440\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u0438\u043a\u0443 \u2014 \u00ab\u043f\u043e\u043a\u0430\u0436\u0438 \u043a\u043e\u0434\u00bb, \u00ab\u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043b, \u0447\u0442\u043e \u043d\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u00bb. \u041b\u043e\u0433\u0438\u0447\u043d\u043e: \u0434\u0438\u0437\u0430\u0439\u043d \u2014 \u044d\u0442\u043e \u0442\u043e, \u043f\u043e \u0447\u0435\u043c\u0443 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0435\u0440\u0436\u0438\u0442\u0435 \u0432\u0442\u043e\u0440\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0443\u0436\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0438 \u0441 \u043a\u043e\u0434\u043e\u043c. \u0411\u0435\u0437 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u00ab\u0434\u043e\u0440\u043e\u0433\u0438\u043c\u00bb, \u0438 \u043f\u0430\u0440\u0430 \u0431\u044d\u043a\u0435\u043d\u0434-\u0445\u0438\u0442\u0440\u043e\u0441\u0442\u0435\u0439 \u0432 \u0434\u043e\u0432\u0435\u0441\u043e\u043a.\u0421\u0440\u0430\u0437\u0443 \u0434\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440: \u044f \u043d\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440. \u0412\u0441\u0451 \u043d\u0430\u0436\u0438\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u00ab\u0441\u043c\u043e\u0442\u0440\u044e \u043d\u0430 \u0440\u0435\u0444\u0435\u0440\u0435\u043d\u0441\u044b (Letterboxd, Mubi, KinoPoisk HD) \u0438 \u043f\u044b\u0442\u0430\u044e\u0441\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435\u00bb. \u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e \u0434\u043e\u0440\u043e\u0433\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u0430 \u043f\u0440\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u043f\u0440\u0438\u0451\u043c\u043e\u0432. \u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u044f\u0442\u044c.1. \u0410\u043a\u0446\u0435\u043d\u0442\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0438\u0437 \u043f\u043e\u0441\u0442\u0435\u0440\u0430 \u0444\u0438\u043b\u044c\u043c\u0430 \u2014 \u0444\u0438\u0447\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0440\u043e\u0436\u0435 \u0432\u0441\u0435\u0433\u043e \u00ab\u043f\u0440\u043e\u0434\u0430\u0451\u0442\u00bb\u0421\u0430\u043c\u043e\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u0420\u0430\u043d\u044c\u0448\u0435 \u0443 \u043c\u0435\u043d\u044f \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0431\u044b\u043b \u043e\u0434\u0438\u043d \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 \u0444\u0438\u043e\u043b\u0435\u0442\u043e\u0432\u044b\u0439 \u0430\u043a\u0446\u0435\u043d\u0442 \u2014 \u0438 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u0434\u0451\u0448\u0435\u0432\u043e \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u0418\u0434\u0435\u044f: \u043f\u0443\u0441\u0442\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0444\u0438\u043b\u044c\u043c\u0430 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u043c\u0438\u043d\u0430\u043d\u0442\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0435\u0440\u0430. \u0417\u0430\u0445\u043e\u0434\u0438\u0448\u044c \u043d\u0430 \u043c\u0440\u0430\u0447\u043d\u044b\u0439 \u043d\u0443\u0430\u0440 \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u0445\u043e\u0434\u0438\u0442 \u0432 \u0445\u043e\u043b\u043e\u0434\u043d\u044b\u0439 \u0441\u0438\u043d\u0438\u0439, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0448\u044c \u043a\u043e\u043c\u0435\u0434\u0438\u044e \u2014 \u0442\u0451\u043f\u043b\u044b\u0439 \u044f\u043d\u0442\u0430\u0440\u044c. \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0442\u043e \u00ab\u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u043f\u043e\u0434 \u044d\u0442\u043e\u0442 \u0444\u0438\u043b\u044c\u043c\u00bb.\u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0431\u0435\u0437 \u0432\u0441\u044f\u043a\u0438\u0445 ML, \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0447\u0435\u0440\u0435\u0437 canvas: \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e\u0441\u0442\u0435\u0440 \u0432 \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439 \u0431\u0443\u0444\u0435\u0440 32\u00d748, \u0443\u0441\u0440\u0435\u0434\u043d\u044f\u0435\u043c \u0446\u0432\u0435\u0442\u0430 (\u0432\u044b\u043a\u0438\u0434\u044b\u0432\u0430\u044f \u0447\u0451\u0440\u043d\u044b\u0435 \u0440\u0430\u043c\u043a\u0438 \u0438 \u0441\u0435\u0440\u043e\u0441\u0442\u044c), \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0432 HSL \u0438 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u00ab\u043d\u0430\u0441\u044b\u0449\u0430\u0435\u043c\u00bb, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0441\u0442\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u043e \u0442\u0443\u0441\u043a\u043b\u044b\u0435. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u043b\u0430\u0434\u0451\u043c \u0432 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u2014 \u0438 \u0432\u0435\u0441\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u043e\u0434\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0435\u0451.function applyPosterAccent(posterUrl: string) {  const img = new Image();  img.crossOrigin = «anonymous»;  img.onload = () => {    const canvas = document.createElement(«canvas»);    const w = (canvas.width = 32), h = (canvas.height = 48);    const ctx = canvas.getContext(«2d»);    if (!ctx) return;    ctx.drawImage(img, 0, 0, w, h);    const { data } = ctx.getImageData(0, 0, w, h);    let r = 0, g = 0, b = 0, n = 0;    for (let i = 0; i < data.length; i += 4) {      const R = data[i], G = data[i + 1], B = data[i + 2];      const max = Math.max(R, G, B), min = Math.min(R, G, B);      if (max < 30 || min > 230) continue; \/\/ \u0447\u0451\u0440\u043d\u044b\u0435 \u0440\u0430\u043c\u043a\u0438 \/ \u0432\u044b\u0431\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438      if (max — min < 25) continue;          \/\/ \u0441\u0435\u0440\u043e\u0435 \u2014 \u0432 \u0430\u043a\u0446\u0435\u043d\u0442 \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f      r += R; g += G; b += B; n++;    }    if (!n) return;    const { h: hue, s, l } = rgbToHsl(r \/ n, g \/ n, b \/ n);    \/\/ \u043f\u043e\u0441\u0442\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u043e \u0442\u0443\u0441\u043a\u043b\u044b\u0435 \u2014 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u00ab\u0441\u043e\u0447\u043d\u044b\u043c\u00bb    const sat = Math.min(0.85, Math.max(0.45, s * 1.6 + 0.15));    const lit = Math.min(0.62, Math.max(0.52, l));    document.documentElement.style.setProperty(      «—movie-accent», `hsl(${hue | 0} ${(sat * 100) | 0}% ${(lit * 100) | 0}%)`    );    document.documentElement.style.setProperty(      «—movie-accent-soft», `hsl(${hue | 0} ${(sat * 100) | 0}% ${(lit * 100) | 0}% \/ .18)`    );  };  img.src = posterUrl;}  const img = new Image();  img.crossOrigin = «anonymous»;  img.onload = () => {    const canvas = document.createElement(«canvas»);    const w = (canvas.width = 32), h = (canvas.height = 48);    const ctx = canvas.getContext(«2d»);    if (!ctx) return;    ctx.drawImage(img, 0, 0, w, h);    const { data } = ctx.getImageData(0, 0, w, h);    let r = 0, g = 0, b = 0, n = 0;    for (let i = 0; i < data.length; i += 4) {      const R = data[i], G = data[i + 1], B = data[i + 2];      const max = Math.max(R, G, B), min = Math.min(R, G, B);      if (max < 30 || min > 230) continue; \/\/ \u0447\u0451\u0440\u043d\u044b\u0435 \u0440\u0430\u043c\u043a\u0438 \/ \u0432\u044b\u0431\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0438      if (max — min < 25) continue;          \/\/ \u0441\u0435\u0440\u043e\u0435 \u2014 \u0432 \u0430\u043a\u0446\u0435\u043d\u0442 \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f      r += R; g += G; b += B; n++;    }    if (!n) return;    const { h: hue, s, l } = rgbToHsl(r \/ n, g \/ n, b \/ n);    \/\/ \u043f\u043e\u0441\u0442\u0435\u0440\u044b \u0447\u0430\u0441\u0442\u043e \u0442\u0443\u0441\u043a\u043b\u044b\u0435 \u2014 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u00ab\u0441\u043e\u0447\u043d\u044b\u043c\u00bb    const sat = Math.min(0.85, Math.max(0.45, s * 1.6 + 0.15));    const lit = Math.min(0.62, Math.max(0.52, l));    document.documentElement.style.setProperty(      «—movie-accent», hsl(${hue | 0} ${(sat  100) | 0}% ${(lit  100) | 0}%)    );    document.documentElement.style.setProperty(      «—movie-accent-soft», hsl(${hue | 0} ${(sat  100) | 0}% ${(lit  100) | 0}% \/ .18)    );  };  img.src = posterUrl;}rgbToHsl\u00a0\u2014 \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u044f RGB\u2192HSL, \u043e\u043d\u0430 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0435 \u0432 \u0441\u0435\u0442\u0438. \u0412\u0430\u0436\u043d\u044b \u0434\u0432\u0430 \u043c\u043e\u043c\u0435\u043d\u0442\u0430: \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044f \u00ab\u043c\u0443\u0441\u043e\u0440\u043d\u044b\u0445\u00bb \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 (\u0431\u0435\u0437 \u043d\u0435\u0451 \u043d\u0430 \u0447\u0451\u0440\u043d\u044b\u0445 \u043f\u043e\u0441\u0442\u0435\u0440\u0430\u0445 \u0430\u043a\u0446\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0433\u0440\u044f\u0437\u043d\u043e-\u0441\u0435\u0440\u044b\u043c) \u0438 \u0431\u0443\u0441\u0442 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438 (s * 1.6 + 0.15) \u2014 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0444\u0438\u043b\u044c\u043c\u043e\u0432 \u0434\u0430\u0432\u0430\u043b\u0430 \u0431\u044b \u0431\u043b\u0451\u043a\u043b\u044b\u0439 \u0430\u043a\u0446\u0435\u043d\u0442.\u0421\u0442\u043e\u0438\u0442 \u044d\u0442\u043e \u043a\u043e\u043f\u0435\u0439\u043a\u0438 \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 (\u0434\u0430\u0443\u043d\u0441\u043a\u0435\u0439\u043b \u0434\u043e 32\u00d748 \u2014 \u044d\u0442\u043e \u043c\u0435\u043d\u044c\u0448\u0435 1500 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439), \u0430 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u0434\u0430\u0451\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u00ab\u043f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u043e\u0435\u00bb: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442.2. Glassmorphism \u0447\u0435\u0440\u0435\u0437 \u043e\u0434\u043d\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0430 \u043d\u0435 100 \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432\u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0438\u0451\u043c \u2014 \u0441\u0442\u0435\u043a\u043b\u043e. \u041d\u043e \u043d\u0435 \u00ab\u043f\u0440\u0438\u043b\u0435\u043f\u0438\u043b blur \u0438 \u0437\u0430\u0431\u044b\u043b\u00bb, \u0430 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u043e \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435\u00a0—movie-accent. \u0422\u043e\u0433\u0434\u0430 \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0434 \u0444\u0438\u043b\u044c\u043c, \u0438 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0446\u0435\u043b\u044c\u043d\u043e..glass-card {  background: linear-gradient(180deg,      var(—movie-accent-soft, rgba(255,255,255,.06)),      rgba(255,255,255,.02));  backdrop-filter: blur(18px) saturate(1.2);  border: 1px solid rgba(255,255,255,.08);  border-radius: 18px;  box-shadow: 0 24px 60px -20px var(—movie-accent-soft);}  background: linear-gradient(180deg,      var(—movie-accent-soft, rgba(255,255,255,.06)),      rgba(255,255,255,.02));  backdrop-filter: blur(18px) saturate(1.2);  border: 1px solid rgba(255,255,255,.08);  border-radius: 18px;  box-shadow: 0 24px 60px -20px var(—movie-accent-soft);}\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0443\u0440\u043e\u043a: \u043f\u0440\u0435\u043c\u0438\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c = \u0435\u0434\u0438\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043f\u0440\u0430\u0432\u0434\u044b \u0434\u043b\u044f \u0442\u0435\u043c\u044b. \u041a\u043e\u0433\u0434\u0430 \u0446\u0432\u0435\u0442\u0430 \u0440\u0430\u0437\u0431\u0440\u043e\u0441\u0430\u043d\u044b \u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c, \u0432\u0441\u0451 \u0440\u0430\u0441\u0441\u044b\u043f\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u00ab\u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435\u00bb \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0430\u043c\u043e\u0434\u0435\u043b\u044c\u043d\u043e. \u041a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c 5\u20136 CSS-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 (—bg,\u00a0—glass,\u00a0—accent,\u00a0—accent-soft,\u00a0—text,\u00a0—dim) \u2014 \u0432\u0441\u0451 \u0434\u044b\u0448\u0438\u0442 \u0432 \u0443\u043d\u0438\u0441\u043e\u043d, \u0438 \u0442\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443.\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0431\u043e\u043b\u044c \u0441 SSR: \u0441\u0442\u0435\u043a\u043b\u044f\u043d\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u043d\u0430 \u0442\u0451\u043c\u043d\u043e\u043c \u0444\u043e\u043d\u0435 \u0434\u0430\u044e\u0442 \u043c\u0435\u0440\u0437\u043a\u0438\u0439 \u00ab\u043c\u0438\u0433\u0430\u044e\u0449\u0438\u0439\u00bb FOUC, \u0435\u0441\u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u0435\u0434\u0443\u0442 \u043f\u043e\u0437\u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u041b\u0435\u0447\u0438\u0442\u0441\u044f \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u043c \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u044f\u043c\u043e \u0432\u00a0<head>\u00a0\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u2014 \u0442\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u0430\u0434\u0440 \u0443\u0436\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439.3. \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u00ab\u043a\u0438\u043d\u043e\u043b\u0435\u043d\u0442\u0430\u00bb \u0441\u0432\u0435\u0440\u0445\u0443 \u2014 \u043c\u0435\u043b\u043e\u0447\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u00ab\u0434\u043e\u0440\u043e\u0433\u043e\u00bb\u041f\u043e\u0434 \u0448\u0430\u043f\u043a\u043e\u0439 \u0443 \u043c\u0435\u043d\u044f \u0435\u0434\u0435\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u0442\u0435\u0440\u043e\u0432 \u2014 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0434\u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433-\u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438. \u0421\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u043e\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f (\u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b + \u0441\u0442\u0440\u0435\u043b\u043a\u0438), \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441 UX, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442 \u00ab\u043b\u0435\u043d\u0442\u0443\u00bb \u043e\u0442 \u00ab\u0434\u0451\u0448\u0435\u0432\u043e \u043f\u0440\u0438\u0431\u0438\u0442\u043e\u0433\u043e \u0440\u044f\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a\u00bb: \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0433\u0430\u0441\u043d\u0443\u0442\u044c \u0432 \u043a\u0440\u0430\u0439\u043d\u0438\u0445 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445.const updateArrows = () => {  const el = stripRef.current;  if (!el) return;  setCanLeft(el.scrollLeft > 4);  setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth — 4);};\/\/ \u0432\u0435\u0448\u0430\u0435\u043c \u043d\u0430 el.addEventListener(«scroll», updateArrows, { passive: true })\/\/ + ResizeObserver, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0435\u0441\u0430\u0439\u0437\u0435  const el = stripRef.current;  if (!el) return;  setCanLeft(el.scrollLeft > 4);  setCanRight(el.scrollLeft + el.clientWidth < el.scrollWidth — 4);};\/\/ \u0432\u0435\u0448\u0430\u0435\u043c \u043d\u0430 el.addEventListener(«scroll», updateArrows, { passive: true })\/\/ + ResizeObserver, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0435\u0441\u0430\u0439\u0437\u0435\u041f\u043b\u044e\u0441 \u043f\u0435\u0440\u0432\u044b\u0435 4 \u043f\u043e\u0441\u0442\u0435\u0440\u0430 \u0433\u0440\u0443\u0437\u0438\u043c\u00a0loading=»eager»\u00a0(\u043e\u043d\u0438 \u0432\u044b\u0448\u0435 fold \u0438 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 LCP), \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u2014\u00a0lazy. \u0417\u0432\u0443\u0447\u0438\u0442 \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043c\u0435\u043b\u043e\u0447\u0435\u0439 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u00ab\u0432\u0441\u0451 \u043f\u043b\u0430\u0432\u043d\u043e \u0438 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043e\u00bb.4. Web Push \u0431\u0435\u0437 Firebase \u2014 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c VAPID\u0425\u0432\u0430\u0442\u0438\u0442 \u043f\u0440\u043e \u0444\u0440\u043e\u043d\u0442. \u041f\u0443\u0448-\u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c Web Push, \u0431\u0435\u0437 FCM \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u2014 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0432\u0435\u043d\u0434\u043e\u0440-\u043b\u043e\u043a\u0430 \u0440\u0430\u0434\u0438 \u043f\u0435\u0442-\u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c service worker \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f:const reg = await navigator.serviceWorker.register(«\/sw.js»);const sub = await reg.pushManager.subscribe({  userVisibleOnly: true,  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY),});await fetch(«\/api\/push\/subscribe», {  method: «POST»,  headers: { «Content-Type»: «application\/json» },  body: JSON.stringify(sub),});const sub = await reg.pushManager.subscribe({  userVisibleOnly: true,  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY),});await fetch(«\/api\/push\/subscribe», {  method: «POST»,  headers: { «Content-Type»: «application\/json» },  body: JSON.stringify(sub),});\u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 (endpoint\u00a0+ \u043a\u043b\u044e\u0447\u0438\u00a0p256dh\/auth) \u0445\u0440\u0430\u043d\u044e \u0432 PostgreSQL, \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e. \u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043d\u0430 \u0431\u044d\u043a\u0435 (FastAPI) \u2014 \u0447\u0435\u0440\u0435\u0437\u00a0pywebpush:from pywebpush import webpush, WebPushExceptiondef send_push(sub, title, body, url=»\/»):    try:        webpush(            subscription_info={                «endpoint»: sub.endpoint,                «keys»: {«p256dh»: sub.p256dh, «auth»: sub.auth},            },            data=json.dumps({«title»: title, «body»: body, «url»: url}),            vapid_private_key=VAPID_PRIVATE,            vapid_claims={«sub»: «mailto:admin@example.com»},            ttl=3600,        )    except WebPushException as e:        # 404\/410 = \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u043e\u0442\u0443\u0445\u043b\u0430 \u2192 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0438\u0437 \u0431\u0430\u0437\u044b, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043a\u043e\u043f\u0438\u043b\u0441\u044f \u043c\u0443\u0441\u043e\u0440        if e.response is not None and e.response.status_code in (404, 410):            delete_subscription(sub.id)def send_push(sub, title, body, url=»\/»):    try:        webpush(            subscription_info={                «endpoint»: sub.endpoint,                «keys»: {«p256dh»: sub.p256dh, «auth»: sub.auth},            },            data=json.dumps({«title»: title, «body»: body, «url»: url}),            vapid_private_key=VAPID_PRIVATE,            vapid_claims={«sub»: «mailto:admin@example.com»},            ttl=3600,        )    except WebPushException as e:        # 404\/410 = \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430 \u043f\u0440\u043e\u0442\u0443\u0445\u043b\u0430 \u2192 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u0438\u0437 \u0431\u0430\u0437\u044b, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043a\u043e\u043f\u0438\u043b\u0441\u044f \u043c\u0443\u0441\u043e\u0440        if e.response is not None and e.response.status_code in (404, 410):            delete_subscription(sub.id)\u0413\u0440\u0430\u0431\u043b\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0442\u043e\u0438\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0430\u043c \u043d\u0435\u0440\u0432\u044b: \u043d\u0430 iOS \u043f\u0443\u0448\u0438 \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0441\u0430\u0439\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u043a\u0430\u043a PWA (Safari 16.4+) \u2014 \u044d\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 Apple, \u043d\u0435 \u0432\u0430\u0448\u0435. \u0418 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0438\u0441\u0442\u0438\u0442\u0435 \u043c\u0451\u0440\u0442\u0432\u044b\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043f\u043e 404\/410, \u0438\u043d\u0430\u0447\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0441\u043f\u0443\u0445\u0430\u0435\u0442 \u00ab\u0444\u0430\u043d\u0442\u043e\u043c\u043d\u044b\u043c\u0438\u00bb \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438.5. \u041e\u0434\u0438\u043d \u0447\u0435\u0441\u0442\u043d\u044b\u0439 \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0438\u0437 \u0433\u043e\u043b\u043e\u0441\u043e\u0432 \u0438 \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0439 (\u0438 \u0431\u0430\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u044d\u0442\u0438\u043c \u0437\u0430\u043a\u0440\u044b\u043b)\u0411\u044d\u043a\u0435\u043d\u0434-\u0438\u0441\u0442\u043e\u0440\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0425\u0430\u0431\u0440 \u043b\u044e\u0431\u0438\u0442: \u00ab\u0431\u044b\u043b\u043e \u043a\u0440\u0438\u0432\u043e \u2014 \u0441\u0442\u0430\u043b\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u00bb. \u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0444\u0438\u043b\u044c\u043c \u2014 \u0437\u0432\u0451\u0437\u0434\u043d\u044b\u0439 \u0433\u043e\u043b\u043e\u0441 (\u00ab\u043e\u0446\u0435\u043d\u0438\u0442\u044c\u00bb) \u0438 \u043e\u0446\u0435\u043d\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043d\u0438 \u0436\u0438\u043b\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u044c\u043d\u043e: \u043e\u0434\u0438\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u0447\u0438\u0442\u0430\u043b \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0433\u043e\u043b\u043e\u0441\u043e\u0432, \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u0438\u0437 \u0440\u0435\u0446\u0435\u043d\u0437\u0438\u0439, \u0438 \u043e\u0431\u0430 \u043f\u0438\u0441\u0430\u043b\u0438 \u0432 \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435 \u043f\u043e\u043b\u0435. \u0418\u0442\u043e\u0433 \u2014…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-480537","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/480537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=480537"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/480537\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=480537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=480537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=480537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}