{"id":2833,"date":"2026-07-30T17:58:54","date_gmt":"2026-07-30T19:58:54","guid":{"rendered":"https:\/\/nea.codes\/?page_id=2833"},"modified":"2026-07-30T18:51:51","modified_gmt":"2026-07-30T20:51:51","slug":"arina-viktorina","status":"publish","type":"page","link":"https:\/\/nea.codes\/ru\/arina-viktorina\/","title":{"rendered":"Arina-Viktorina"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2833\" class=\"elementor elementor-2833\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-dce-background-image-url=\"https:\/\/nea.codes\/wp-content\/uploads\/2025\/01\/background-scaled.webp\" class=\"elementor-element elementor-element-81108c1 e-flex e-con-boxed e-con e-parent\" data-id=\"81108c1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48798e0 elementor-widget elementor-widget-html\" data-id=\"48798e0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ru\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>\u041f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 2000-\u0445 \u0438 \u041c\u0438\u0440\u043e\u0432\u044b\u0445 \u0425\u0438\u0442\u043e\u0432<\/title>\r\n  <style>\r\n    :root {\r\n      --bg-color: #0f111a;\r\n      --card-bg: #1a1d2d;\r\n      --card-hover: #23273c;\r\n      --active-card: #2a2f48;\r\n      --accent-blue: #3b82f6;\r\n      --accent-red: #ef4444;\r\n      --text-main: #f3f4f6;\r\n      --text-sub: #9ca3af;\r\n      --border-color: #2e344e;\r\n    }\r\n\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    html {\r\n      width: 100%;\r\n      min-height: 100vh;\r\n      background-color: var(--bg-color);\r\n      color: var(--text-main);\r\n      font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\r\n    }\r\n\r\n    .app-container {\r\n      max-width: 1200px;\r\n      margin: 0 auto;\r\n      padding: 24px 16px 100px;\r\n    }\r\n\r\n    .header-title {\r\n      font-size: 24px;\r\n      font-weight: 700;\r\n      margin-bottom: 20px;\r\n      color: var(--text-main);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n    }\r\n\r\n    .header-title span {\r\n      font-size: 14px;\r\n      font-weight: 400;\r\n      color: var(--text-sub);\r\n      background: var(--card-bg);\r\n      padding: 4px 12px;\r\n      border-radius: 20px;\r\n      border: 1px solid var(--border-color);\r\n    }\r\n\r\n    .player-container {\r\n      position: relative;\r\n      width: 100%;\r\n      padding-top: 56.25%;\r\n      background: #000;\r\n      border-radius: 12px;\r\n      overflow: hidden;\r\n      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);\r\n      border: 1px solid var(--border-color);\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .player-container iframe {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      border: 0;\r\n    }\r\n\r\n    .search-box {\r\n      margin-bottom: 20px;\r\n    }\r\n\r\n    .search-input {\r\n      width: 100%;\r\n      padding: 12px 16px;\r\n      border-radius: 8px;\r\n      border: 1px solid var(--border-color);\r\n      background-color: var(--card-bg);\r\n      color: var(--text-main);\r\n      font-size: 15px;\r\n      outline: none;\r\n      transition: border-color 0.2s;\r\n    }\r\n\r\n    .search-input:focus {\r\n      border-color: var(--accent-blue);\r\n    }\r\n\r\n    .track-list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 8px;\r\n    }\r\n\r\n    .track-item-wrapper {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 8px;\r\n    }\r\n\r\n    .track-card {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      padding: 12px 16px;\r\n      background-color: var(--card-bg);\r\n      border-radius: 8px;\r\n      border: 1px solid var(--border-color);\r\n      cursor: pointer;\r\n      transition: all 0.2s ease;\r\n      gap: 12px;\r\n    }\r\n\r\n    .track-card:hover {\r\n      background-color: var(--card-hover);\r\n      border-color: #3b4263;\r\n    }\r\n\r\n    .track-card.active {\r\n      background-color: var(--active-card);\r\n      border-color: var(--accent-blue);\r\n    }\r\n\r\n    .track-info {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 16px;\r\n      overflow: hidden;\r\n      flex: 1;\r\n      min-width: 0;\r\n    }\r\n\r\n    .track-num {\r\n      font-size: 14px;\r\n      font-weight: 600;\r\n      color: var(--accent-blue);\r\n      min-width: 28px;\r\n      height: 28px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      background: rgba(59, 130, 246, 0.1);\r\n      border-radius: 6px;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .track-names {\r\n      display: flex;\r\n      flex-direction: column;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n\r\n    .track-artist {\r\n      font-weight: 600;\r\n      font-size: 15px;\r\n      color: var(--text-main);\r\n    }\r\n\r\n    .track-title {\r\n      font-size: 14px;\r\n      color: var(--text-sub);\r\n    }\r\n\r\n    .track-actions {\r\n      display: flex;\r\n      gap: 8px;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .btn {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 6px;\r\n      padding: 6px 12px;\r\n      font-size: 13px;\r\n      font-weight: 500;\r\n      border-radius: 6px;\r\n      border: none;\r\n      cursor: pointer;\r\n      text-decoration: none;\r\n      transition: background-color 0.2s;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .btn-play {\r\n      background-color: var(--accent-blue);\r\n      color: #fff;\r\n    }\r\n\r\n    .btn-play:hover {\r\n      background-color: #2563eb;\r\n    }\r\n\r\n    .btn-yt {\r\n      background-color: var(--accent-red);\r\n      color: #fff;\r\n    }\r\n\r\n    .btn-yt:hover {\r\n      background-color: #dc2626;\r\n    }\r\n\r\n    \/* Floating search bar *\/\r\n    .floating-search {\r\n      position: fixed;\r\n      bottom: 16px;\r\n      left: 16px;\r\n      right: 16px;\r\n      z-index: 1000;\r\n      display: none;\r\n      background: var(--card-bg);\r\n      border: 1px solid var(--border-color);\r\n      border-radius: 8px;\r\n      padding: 8px;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n    }\r\n\r\n    .floating-search.visible {\r\n      display: block;\r\n    }\r\n\r\n    .floating-search .search-input {\r\n      padding: 10px 14px;\r\n      font-size: 14px;\r\n    }\r\n\r\n    \/* Mobile styles *\/\r\n    @media (max-width: 768px) {\r\n      .app-container {\r\n        padding: 16px 12px 100px;\r\n      }\r\n\r\n      .header-title {\r\n        font-size: 20px;\r\n      }\r\n\r\n      .track-card {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        gap: 12px;\r\n        padding: 12px;\r\n      }\r\n\r\n      .track-info {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        gap: 8px;\r\n      }\r\n\r\n      .track-num {\r\n        align-self: flex-start;\r\n      }\r\n\r\n      .track-artist {\r\n        font-size: 14px;\r\n      }\r\n\r\n      .track-title {\r\n        font-size: 13px;\r\n      }\r\n\r\n      .track-actions {\r\n        width: 100%;\r\n        flex-wrap: wrap;\r\n      }\r\n\r\n      .btn {\r\n        flex: 1;\r\n        min-width: 120px;\r\n        padding: 8px 12px;\r\n        font-size: 12px;\r\n      }\r\n\r\n      .player-container {\r\n        padding-top: 56.25%;\r\n        margin-bottom: 8px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .btn {\r\n        min-width: 100%;\r\n      }\r\n\r\n      .track-actions {\r\n        flex-direction: column;\r\n      }\r\n\r\n      .btn {\r\n        width: 100%;\r\n        justify-content: center;\r\n      }\r\n\r\n      .floating-search {\r\n        left: 8px;\r\n        right: 8px;\r\n        bottom: 8px;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <div class=\"app-container\">\r\n    <div class=\"header-title\">\r\n      \u041c\u0443\u0437\u044b\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u041f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 <span>52 \u0442\u0440\u0435\u043a\u0430<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"search-box\">\r\n      <input type=\"text\" id=\"search-input\" class=\"search-input\" placeholder=\"\u041f\u043e\u0438\u0441\u043a \u043f\u043e \u0430\u0440\u0442\u0438\u0441\u0442\u0443, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0438\u043b\u0438 \u043d\u043e\u043c\u0435\u0440\u0443 \u043f\u0435\u0441\u043d\u0438...\">\r\n    <\/div>\r\n\r\n    <div id=\"track-list\" class=\"track-list\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"floating-search\" id=\"floating-search\">\r\n    <input type=\"text\" id=\"floating-search-input\" class=\"search-input\" placeholder=\"\u041f\u043e\u0438\u0441\u043a...\">\r\n  <\/div>\r\n\r\n  <script>\r\n    const playlist = [\r\n      { id: 1, artist: \"\u0420\u0443\u043a\u0438 \u0412\u0432\u0435\u0440\u0445!\", title: \"\u041a\u0440\u043e\u0448\u043a\u0430\", videoId: \"tO91c8vbT7A\" },\r\n      { id: 2, artist: \"\u0418\u0432\u0430\u043d\u0443\u0448\u043a\u0438 International\", title: \"\u0422\u043e\u043f\u043e\u043b\u0438\u043d\u044b\u0439\", videoId: \"UUryvYF8tUs\" },\r\n      { id: 3, artist: \"\u0414\u0438\u0441\u043a\u043e\u0442\u0435\u043a\u0430 \u0410\u0432\u0430\u0440\u0438\u044f\", title: \"\u0415\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0448\u044c \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f\", videoId: \"AsMTTh5Z1j8\" },\r\n      { id: 4, artist: \"\u0417\u0432\u0435\u0440\u0438\", title: \"\u0414\u043e \u0441\u043a\u043e\u0440\u043e\u0439 \u0432\u0441\u0442\u0440\u0435\u0447\u0438\", videoId: \"DF6W1XD25Dc\" },\r\n      { id: 5, artist: \"\u0413\u0440\u0430\u0434\u0443\u0441\u044b\", title: \"\u0413\u043e\u043b\u0430\u044f\", videoId: \"fou72UMdG0k\" },\r\n      { id: 6, artist: \"\u0411\u0430\u043d\u0434'\u042d\u0440\u043e\u0441\", title: \"\u041a\u043e\u043b\u0430\u043c\u0431\u0438\u044f \u041f\u0438\u043a\u0447\u0435\u0440\u0437 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\", videoId: \"z2AmjZbEWgE\" },\r\n      { id: 7, artist: \"Quest Pistols\", title: \"\u0411\u0435\u043b\u0430\u044f \u0441\u0442\u0440\u0435\u043a\u043e\u0437\u0430 \u043b\u044e\u0431\u0432\u0438\", videoId: \"-JgfxZ62aHE\" },\r\n      { id: 8, artist: \"\u0421\u0435\u0440\u0433\u0435\u0439 \u041b\u0430\u0437\u0430\u0440\u0435\u0432\", title: \"\u0412 \u0441\u0430\u043c\u043e\u0435 \u0441\u0435\u0440\u0434\u0446\u0435\", videoId: \"mpGLqiv6r90\" },\r\n      { id: 9, artist: \"\u0412\u0418\u0410 \u0413\u0440\u0430\", title: \"\u0411\u0440\u0438\u043b\u043b\u0438\u0430\u043d\u0442\u044b\", videoId: \"95l1aOVzGnc\" },\r\n      { id: 10, artist: \"\u0412\u0438\u043d\u0442\u0430\u0436\", title: \"\u041f\u043b\u043e\u0445\u0430\u044f \u0434\u0435\u0432\u043e\u0447\u043a\u0430\", videoId: \"kCbxQpn4Yzo\" },\r\n      { id: 11, artist: \"Artik & Asti\", title: \"\u0413\u0440\u0443\u0441\u0442\u043d\u044b\u0439 \u0434\u044d\u043d\u0441\", videoId: \"XnrXCpHBor8\" },\r\n      { id: 12, artist: \"\u041c\u0430\u043aS\u0438\u043c\", title: \"\u0417\u043d\u0430\u0435\u0448\u044c \u043b\u0438 \u0442\u044b\", videoId: \"Q8WJz-DmPVg\" },\r\n      { id: 13, artist: \"\u0401\u043b\u043a\u0430\", title: \"\u041d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u0432\u043e\u0437\u0434\u0443\u0448\u043d\u043e\u043c \u0448\u0430\u0440\u0435\", videoId: \"zy5pKrUBUN4\" },\r\n      { id: 14, artist: \"A'Studio\", title: \"\u0423\u043b\u0435\u0442\u0430\u044e\", videoId: \"Q2RY38t9Dmc\" },\r\n      { id: 15, artist: \"\u041c\u0443\u043c\u0438\u0439 \u0422\u0440\u043e\u043b\u043b\u044c\", title: \"\u0412\u043b\u0430\u0434\u0438\u0432\u043e\u0441\u0442\u043e\u043a 2000\", videoId: \"nj5nuYYrZvg\" },\r\n      { id: 16, artist: \"\u0421\u043f\u043b\u0438\u043d\", title: \"\u0412\u044b\u0445\u043e\u0434\u0430 \u043d\u0435\u0442\", videoId: \"SDTD4pL0mLc\" },\r\n      { id: 17, artist: \"\u0411\u0438-2\", title: \"\u041f\u043e\u043b\u043a\u043e\u0432\u043d\u0438\u043a\u0443 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043f\u0438\u0448\u0435\u0442\", videoId: \"1u7WN2zBEDc\" },\r\n      { id: 18, artist: \"\u041b\u0435\u043d\u0438\u043d\u0433\u0440\u0430\u0434\", title: \"\u042d\u043a\u0441\u043f\u043e\u043d\u0430\u0442\", videoId: \"et281UHNoOU\" },\r\n      { id: 19, artist: \"\u041b\u0435\u043f\u0440\u0438\u043a\u043e\u043d\u0441\u044b\", title: \"\u0425\u0430\u043b\u0438-\u0433\u0430\u043b\u0438, \u043f\u0430\u0440\u0430\u0442\u0440\u0443\u043f\u0435\u0440\", videoId: \"rUd2diUWDyI\" },\r\n      { id: 20, artist: \"Hi-Fi\", title: \"\u0421\u0435\u0434\u044c\u043c\u043e\u0439 \u043b\u0435\u043f\u0435\u0441\u0442\u043e\u043a\", videoId: \"fZhz4TeszYM\" },\r\n      { id: 21, artist: \"\u041e\u0442\u043f\u0435\u0442\u044b\u0435 \u043c\u043e\u0448\u0435\u043d\u043d\u0438\u043a\u0438\", title: \"\u041b\u044e\u0431\u0438 \u043c\u0435\u043d\u044f, \u043b\u044e\u0431\u0438\", videoId: \"XOoNJPLlKjY\" },\r\n      { id: 22, artist: \"\u041a\u043e\u0440\u043d\u0438\", title: \"\u0422\u044b \u0443\u0437\u043d\u0430\u0435\u0448\u044c \u0435\u0451\", videoId: \"du-zWWpnZSw\" },\r\n      { id: 23, artist: \"Reflex\", title: \"\u0422\u0430\u043d\u0446\u044b\", videoId: \"rRL02nL90WU\" },\r\n      { id: 24, artist: \"\u0424\u0430\u0431\u0440\u0438\u043a\u0430\", title: \"\u041f\u0440\u043e \u043b\u044e\u0431\u043e\u0432\u044c\", videoId: \"SYVDWRzk4aM\" },\r\n      { id: 25, artist: \"\u0421\u0435\u0440\u0435\u0431\u0440\u043e\", title: \"\u041c\u0430\u043c\u0430 \u041b\u044e\u0431\u0430\", videoId: \"rFvV5_UnSeM\" },\r\n      { id: 26, artist: \"t.A.T.u.\", title: \"\u041d\u0430\u0441 \u043d\u0435 \u0434\u043e\u0433\u043e\u043d\u044f\u0442\", videoId: \"G8zVtSri7MM\" },\r\n      { id: 27, artist: \"\u041d\u044e\u0448\u0430\", title: \"\u0412\u043e\u044e \u043d\u0430 \u041b\u0443\u043d\u0443\", videoId: \"0ozt6NX8uh0\" },\r\n      { id: 28, artist: \"\u0415\u0433\u043e\u0440 \u041a\u0440\u0438\u0434\", title: \"\u0421\u0430\u043c\u0430\u044f \u0441\u0430\u043c\u0430\u044f\", videoId: \"bFHak21e230\" },\r\n      { id: 29, artist: \"\u0411\u0430\u0441\u0442\u0430\", title: \"\u0421\u0430\u043d\u0441\u0430\u0440\u0430\", videoId: \"aiCL0-U9WxI\" },\r\n      { id: 30, artist: \"\u0412\u0430\u043b\u0435\u0440\u0438\u0439 \u041c\u0435\u043b\u0430\u0434\u0437\u0435\", title: \"\u0421\u044d\u0440\u0430\", videoId: \"0bB5WZVUQaw\" },\r\n      { id: 31, artist: \"ABBA\", title: \"Gimme! Gimme! Gimme!\", videoId: \"XEjLoHdbVeE\" },\r\n      { id: 32, artist: \"Queen\", title: \"Don't Stop Me Now\", videoId: \"HgzGwKwLmgM\" },\r\n      { id: 33, artist: \"Michael Jackson\", title: \"Billie Jean\", videoId: \"Zi_XLOBDo_Y\" },\r\n      { id: 34, artist: \"Bon Jovi\", title: \"It's My Life\", videoId: \"vx2u5uUu3DE\" },\r\n      { id: 35, artist: \"Survivor\", title: \"Eye of the Tiger\", videoId: \"btPJPFnesV4\" },\r\n      { id: 36, artist: \"Modern Talking\", title: \"You're My Heart, You're My Soul\", videoId: \"4kHl4FoK1Ys\" },\r\n      { id: 37, artist: \"Red Hot Chili Peppers\", title: \"Californication\", videoId: \"YlUKcNNmywk\" },\r\n      { id: 38, artist: \"Linkin Park\", title: \"Numb\", videoId: \"kXYiU_JCYtU\" },\r\n      { id: 39, artist: \"Evanescence\", title: \"Bring Me to Life\", videoId: \"3YxaaGgTQYM\" },\r\n      { id: 40, artist: \"The Cranberries\", title: \"Zombie\", videoId: \"6Ejga4kJUts\" },\r\n      { id: 41, artist: \"Britney Spears\", title: \"Toxic\", videoId: \"LOZuxwVk7TU\" },\r\n      { id: 42, artist: \"Lady Gaga\", title: \"Poker Face\", videoId: \"bESGLojNYSo\" },\r\n      { id: 43, artist: \"Rihanna\", title: \"Umbrella\", videoId: \"CvBfHwUxHIk\" },\r\n      { id: 44, artist: \"Beyonc\u00e9\", title: \"Single Ladies\", videoId: \"4m1EFMoRFvY\" },\r\n      { id: 45, artist: \"Shakira\", title: \"Hips Don't Lie\", videoId: \"DUT5rEU6pqM\" },\r\n      { id: 46, artist: \"Black Eyed Peas\", title: \"I Gotta Feeling\", videoId: \"uSD4vsh1zDA\" },\r\n      { id: 47, artist: \"LMFAO\", title: \"Party Rock\", videoId: \"KQ6zr6kCPj8\" },\r\n      { id: 48, artist: \"Ed Sheeran\", title: \"Shape of You\", videoId: \"JGwWNGJdvx8\" },\r\n      { id: 49, artist: \"Adele\", title: \"Rolling in the Deep\", videoId: \"rYEDA3JcQqw\" },\r\n      { id: 50, artist: \"The Weeknd\", title: \"Blinding Lights\", videoId: \"4NRXx6U8ABQ\" },\r\n      { id: 51, artist: \"Imagine Dragons\", title: \"Believer\", videoId: \"7wtfhZwyrcc\" },\r\n      { id: 52, artist: \"PSY\", title: \"Gangnam Style\", videoId: \"9bZkp7q19f0\" }\r\n    ];\r\n\r\n    let currentTrackId = null;\r\n    const trackListContainer = document.getElementById(\"track-list\");\r\n    const searchInput = document.getElementById(\"search-input\");\r\n    const floatingSearch = document.getElementById(\"floating-search\");\r\n    const floatingSearchInput = document.getElementById(\"floating-search-input\");\r\n\r\n    function createPlayer(videoId) {\r\n      const playerContainer = document.createElement(\"div\");\r\n      playerContainer.className = \"player-container\";\r\n      playerContainer.innerHTML = `\r\n        <iframe \r\n          src=\"https:\/\/www.youtube-nocookie.com\/embed\/${videoId}?rel=0\" \r\n          title=\"\u041f\u043b\u0435\u0435\u0440\" \r\n          allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" \r\n          allowfullscreen>\r\n        <\/iframe>\r\n      `;\r\n      return playerContainer;\r\n    }\r\n\r\n    function loadTrack(videoId, trackId, cardElement) {\r\n      currentTrackId = trackId;\r\n      \r\n      const existingPlayer = document.querySelector('.player-container');\r\n      if (existingPlayer) {\r\n        existingPlayer.remove();\r\n      }\r\n      \r\n      if (cardElement) {\r\n        const player = createPlayer(videoId);\r\n        cardElement.parentNode.insertBefore(player, cardElement);\r\n      }\r\n      \r\n      renderTracks(searchInput.value);\r\n    }\r\n\r\n    function renderTracks(filterText = \"\") {\r\n      trackListContainer.innerHTML = \"\";\r\n      \r\n      const filtered = playlist.filter(track => \r\n        track.id.toString().includes(filterText) ||\r\n        track.artist.toLowerCase().includes(filterText.toLowerCase()) ||\r\n        track.title.toLowerCase().includes(filterText.toLowerCase())\r\n      );\r\n\r\n      filtered.forEach(track => {\r\n        const isActive = track.id === currentTrackId;\r\n        const card = document.createElement(\"div\");\r\n        card.className = `track-card ${isActive ? 'active' : ''}`;\r\n        \r\n        const wrapper = document.createElement(\"div\");\r\n        wrapper.className = \"track-item-wrapper\";\r\n        \r\n        if (isActive) {\r\n          const player = createPlayer(track.videoId);\r\n          wrapper.appendChild(player);\r\n        }\r\n        \r\n        card.onclick = () => loadTrack(track.videoId, track.id, card);\r\n\r\n        card.innerHTML = `\r\n          <div class=\"track-info\">\r\n            <div class=\"track-num\">${track.id}<\/div>\r\n            <div class=\"track-names\">\r\n              <span class=\"track-artist\">${track.artist}<\/span>\r\n              <span class=\"track-title\">${track.title}<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"track-actions\">\r\n            <button class=\"btn btn-play\">\u25b6 \u041f\u043b\u0435\u0435\u0440<\/button>\r\n            <a href=\"https:\/\/www.youtube.com\/watch?v=$track.videoId\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n              YouTube \u2197\r\n            <\/a>\r\n          <\/div>\r\n        `;\r\n\r\n        wrapper.appendChild(card);\r\n        trackListContainer.appendChild(wrapper);\r\n      });\r\n    }\r\n\r\n    function handleSearch(inputElement) {\r\n      renderTracks(inputElement.value);\r\n    }\r\n\r\n    searchInput.addEventListener(\"input\", () => handleSearch(searchInput));\r\n    floatingSearchInput.addEventListener(\"input\", () => handleSearch(floatingSearchInput));\r\n\r\n    \/\/ Show\/hide floating search on scroll\r\n    let lastScrollY = 0;\r\n    const headerHeight = 150;\r\n    \r\n    window.addEventListener('scroll', () => {\r\n      const scrollY = window.scrollY;\r\n      \r\n      if (scrollY > headerHeight) {\r\n        floatingSearch.classList.add('visible');\r\n      } else {\r\n        floatingSearch.classList.remove('visible');\r\n      }\r\n      \r\n      lastScrollY = scrollY;\r\n    });\r\n\r\n    renderTracks();\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u041f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 2000-\u0445 \u0438 \u041c\u0438\u0440\u043e\u0432\u044b\u0445 \u0425\u0438\u0442\u043e\u0432 \u041c\u0443\u0437\u044b\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u041f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 52 \u0442\u0440\u0435\u043a\u0430<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2833","page","type-page","status-publish"],"acf":[],"rankMath":{"parentDomain":"nea.codes","noFollowDomains":[],"noFollowExcludeDomains":[],"noFollowExternalLinks":false,"featuredImageNotice":"\u041f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 200 \u043d\u0430 200 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c Facebook \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0430\u0439\u0442\u044b \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439.","pluginReviewed":false,"postSettings":{"linkSuggestions":true,"useFocusKeyword":false},"frontEndScore":false,"postName":"arina-viktorina","permalinkFormat":"https:\/\/nea.codes\/ru\/%pagename%\/","showLockModifiedDate":true,"assessor":{"focusKeywordLink":"https:\/\/nea.codes\/wp-admin\/edit.php?focus_keyword=%focus_keyword%&post_type=%post_type%","hasTOCPlugin":true,"primaryTaxonomy":false,"serpData":{"title":"","description":"","focusKeywords":"","pillarContent":false,"canonicalUrl":"","breadcrumbTitle":"","advancedRobots":{"max-snippet":"-1","max-video-preview":"-1","max-image-preview":"large"},"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":"","facebookHasOverlay":false,"facebookImageOverlay":"","facebookAuthor":"","twitterCardType":"","twitterUseFacebook":true,"twitterTitle":"","twitterDescription":"","twitterImage":"","twitterImageID":"","twitterHasOverlay":false,"twitterImageOverlay":"","twitterPlayerUrl":"","twitterPlayerSize":"","twitterPlayerStream":"","twitterPlayerStreamCtype":"","twitterAppDescription":"","twitterAppIphoneName":"","twitterAppIphoneID":"","twitterAppIphoneUrl":"","twitterAppIpadName":"","twitterAppIpadID":"","twitterAppIpadUrl":"","twitterAppGoogleplayName":"","twitterAppGoogleplayID":"","twitterAppGoogleplayUrl":"","twitterAppCountry":"","robots":{"index":true},"twitterAuthor":"\u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f","primaryTerm":0,"authorName":"eugene.novikoff","titleTemplate":"%title% %sep% %sitename%","descriptionTemplate":"%excerpt%","showScoreFrontend":true,"lockModifiedDate":false},"powerWords":[],"diacritics":{"A":"[\\u0410\\u0430]","B":"[\\u0411\\u0431]","V":"[\\u0412\\u0432]","G":"[\\u0413\\u0433]","D":"[\\u0414\\u0434]","YE":"[\\u0415\\u0435]","YO":"[\\u0401\\u0451]","ZH":"[\\u0416\\u0436]","Z":"[\\u0417\\u0437]","EE":"[\\u0418\\u0438]","YI":"[\\u0419\\u0439]","K":"[\\u041A\\u043A]","L":"[\\u041B\\u043B]","M":"[\\u041C\\u043c]","P":"[\\u041F\\u043F]","T":"[\\u0422\\u0442]","U":"[\\u0423\\u0443]","F":"[\\u0424\\u0444]","H":"[\\u0425\\u0445]","TS":"[\\u0426\\u0446]","CH":"[\\u0427\\u0447]","SH":"[\\u0428\\u0448\\u0429\\u0449]","I":"[\\u042B\\u044B]","E":"[\\u042D\\u044D]","YU":"[\\u042E\\u044E]","YA":"[\\u042F\\u044F]","N":"[\\u041D\\u043D]"},"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasRedirection":false,"hasBreadcrumb":true},"homeUrl":"https:\/\/nea.codes\/ru","objectID":2833,"objectType":"post","locale":"ru","localeFull":"ru_RU","overlayImages":{"play":{"name":"Play \u0438\u043a\u043e\u043d\u043a\u0430","url":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","path":"\/home\/u646275238\/domains\/nea.codes\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-play.png","position":"middle_center"},"gif":{"name":"GIF \u0438\u043a\u043e\u043d\u043a\u0430","url":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","path":"\/home\/u646275238\/domains\/nea.codes\/public_html\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/icon-gif.png","position":"middle_center"}},"defautOgImage":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/social-placeholder.jpg","customPermalinks":true,"isUserRegistered":true,"autoSuggestKeywords":true,"connectSiteUrl":"https:\/\/rankmath.com\/auth?site=https%3A%2F%2Fnea.codes%2Fru&r=https%3A%2F%2Fnea.codes%2Fru%2Fwp-json%2Fwp%2Fv2%2Fpages%2F2833%3Fnonce%3D09ec807213&pro=1","maxTags":100,"trendsIcon":"<svg viewBox=\"0 0 610 610\"><path d=\"M18.85,446,174.32,290.48l58.08,58.08L76.93,504a14.54,14.54,0,0,1-20.55,0L18.83,466.48a14.54,14.54,0,0,1,0-20.55Z\" style=\"fill:#4285f4\"\/><path d=\"M242.65,242.66,377.59,377.6l-47.75,47.75a14.54,14.54,0,0,1-20.55,0L174.37,290.43l47.75-47.75A14.52,14.52,0,0,1,242.65,242.66Z\" style=\"fill:#ea4335\"\/><polygon points=\"319.53 319.53 479.26 159.8 537.34 217.88 377.61 377.62 319.53 319.53\" style=\"fill:#fabb05\"\/><path d=\"M594.26,262.73V118.61h0a16.94,16.94,0,0,0-16.94-16.94H433.2a16.94,16.94,0,0,0-12,28.92L565.34,274.71h0a16.94,16.94,0,0,0,28.92-12Z\" style=\"fill:#34a853\"\/><rect width=\"610\" height=\"610\" style=\"fill:none\"\/><\/svg>","showScore":true,"siteFavIcon":"https:\/\/nea.codes\/wp-content\/uploads\/2025\/01\/NEA-Favicon-512-150x150.png","canUser":{"general":false,"advanced":false,"snippet":false,"social":false,"analysis":false,"analytics":false,"content_ai":false},"isPro":true,"is_front_page":false,"trendsUpgradeLink":"https:\/\/rankmath.com\/pricing\/?utm_source=Plugin&utm_medium=CE%20General%20Tab%20Trends&utm_campaign=WP","trendsUpgradeLabel":"\u0410\u043f\u0433\u0440\u0435\u0439\u0434","trendsPreviewImage":"https:\/\/nea.codes\/wp-content\/plugins\/seo-by-rank-math\/assets\/admin\/img\/trends-preview.jpg","currentEditor":false,"homepageData":{"assessor":{"powerWords":[],"diacritics":true,"researchesTests":["contentHasTOC","contentHasShortParagraphs","contentHasAssets","keywordInTitle","keywordInMetaDescription","keywordInPermalink","keywordIn10Percent","keywordInContent","keywordInSubheadings","keywordInImageAlt","keywordDensity","keywordNotUsed","lengthContent","lengthPermalink","linksHasInternal","linksHasExternals","linksNotAllExternals","titleStartWithKeyword","titleSentiment","titleHasPowerWords","titleHasNumber","hasContentAI"],"hasBreadcrumb":true,"serpData":{"title":"%sitename% %page% %sep% %sitedesc%","description":"","titleTemplate":"%sitename% %page% %sep% %sitedesc%","descriptionTemplate":"","focusKeywords":"","breadcrumbTitle":"Home","robots":{"index":true},"advancedRobots":{"max-snippet":"-1","max-video-preview":"-1","max-image-preview":"large"},"facebookTitle":"","facebookDescription":"","facebookImage":"","facebookImageID":""}}},"isAnalyticsConnected":true,"tocTitle":"Table of Contents","tocExcludeHeadings":[],"listStyle":"ul"},"_links":{"self":[{"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/pages\/2833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/comments?post=2833"}],"version-history":[{"count":5,"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/pages\/2833\/revisions"}],"predecessor-version":[{"id":2855,"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/pages\/2833\/revisions\/2855"}],"wp:attachment":[{"href":"https:\/\/nea.codes\/ru\/wp-json\/wp\/v2\/media?parent=2833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}