{"id":97632,"date":"2025-02-15T19:46:42","date_gmt":"2025-02-15T16:16:42","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/"},"modified":"2025-02-15T19:46:42","modified_gmt":"2025-02-15T16:16:42","slug":"%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u06cc\u06a9 \u0622\u0646\u0627\u0644\u0627\u06cc\u0632\u0631 \u0631\u0641\u062a\u0627\u0631 \u0645\u0627\u0644\u06cc \u0628\u0627 \u0642\u062f\u0631\u062a AI \u0628\u0627 NodeJS \u060c Python \u060c Sveltekit \u0648 Tailwindcs &#8211; \u0642\u0633\u0645\u062a 4"},"content":{"rendered":"<div data-article-id=\"2280870\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D9%85%D9%82%D8%AF%D9%85%D9%87\" >\u0645\u0642\u062f\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D8%B1%D9%85%D8%B2_%D9%85%D9%86%D8%A8%D8%B9\" >\u0631\u0645\u0632 \u0645\u0646\u0628\u0639<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D8%A2%D9%86%D8%A7%D9%84%D8%A7%DB%8C%D8%B2%D8%B1_%D9%88_%D9%85%D8%B4%D8%A7%D9%88%D8%B1_%D8%B1%D9%81%D8%AA%D8%A7%D8%B1_%D9%85%D8%A7%D9%84%DB%8C_%D8%A8%D8%A7_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%DA%A9%D9%87_%D8%AF%D8%B1_%D9%BE%D8%A7%DB%8C%D8%AA%D9%88%D9%86_AIOHTTP_%D9%88_TypeScript_%D9%86%D9%88%D8%B4%D8%AA%D9%87_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA_Expressjs_Sveltekit_%D8%A8%D8%A7_Svelte_5\" >\u0622\u0646\u0627\u0644\u0627\u06cc\u0632\u0631 \u0648 \u0645\u0634\u0627\u0648\u0631 \u0631\u0641\u062a\u0627\u0631 \u0645\u0627\u0644\u06cc \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u06a9\u0647 \u062f\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646 (AIOHTTP) \u0648 TypeScript \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a (Expressjs &#038; Sveltekit \u0628\u0627 Svelte 5)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C\" >\u0627\u062c\u0631\u0627\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%DA%A9%D9%86%D9%86%D8%AF%D9%87_WebSocket\" >\u0645\u0631\u062d\u0644\u0647: \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 WebSocket<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_sveltekit_%D8%A8%D8%A7_tailwindcss\" >\u0645\u0631\u062d\u0644\u0647 2: sveltekit \u0628\u0627 tailwindcss<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%A7%D9%87%D8%B1%D9%85_prefers-color-scheme_%D8%AF%D8%B1_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AA%D9%85\" >\u0645\u0631\u062d\u0644\u0647 3: \u0627\u0647\u0631\u0645 prefers-color-scheme \u062f\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#Step_4_Theme_switching_logic_with_icons\" >Step 4: Theme switching logic with icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_5_%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%DB%8C%D8%A7_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\" >\u0645\u0631\u062d\u0644\u0647 5: \u0635\u0641\u062d\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u0627 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#class%22mt-6_text-3xl_font-extrabold_text-gray-900_dark_text-white%22%3EWelcome_back\" >class=\"mt-6 text-3xl font-extrabold text-gray-900 dark:text-white\"&gt;Welcome back<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%db%8c%da%a9-%d8%a2%d9%86%d8%a7%d9%84%d8%a7%db%8c%d8%b2%d8%b1-%d8%b1%d9%81%d8%aa%d8%a7%d8%b1-%d9%85%d8%a7%d9%84%db%8c-%d8%a8%d8%a7-%d9%82%d8%af%d8%b1%d8%aa-ai-%d8%a8%d8%a7-nod\/#%D8%AF%DB%8C%DA%AF%D8%B1\" >\u062f\u06cc\u06af\u0631<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%AF%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0642\u062f\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<blockquote>\n<p>\u0642\u0633\u0645\u062a 5 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0633\u062a: https:\/\/johnowolabiidogun.dev\/blog\/asynchronous-server-building-and-rigorously-testing-a-websocket-and-http-server-3918df\/67b0ab3c7a900ac23e502c51<\/p>\n<\/blockquote>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u0627\u06cc\u0646 \u0633\u0631\u06cc\u0627\u0644 \u060c \u0645\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 WebSocket \u0633\u0631\u0648\u06cc\u0633 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0648 \u0633\u0627\u062e\u062a \u062c\u0644\u0648\u06cc \u0622\u0646 \u0631\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u06cc\u0646 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0648 \u062c\u0628\u0647\u0647 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0628\u0627\u0634\u062f \u0648 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u0631\u0633\u06cc \u060c \u0646\u062a\u0627\u06cc\u062c \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u0645.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632 \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0645\u0642\u0627\u0644\u0627\u062a \u0642\u0628\u0644\u06cc \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0631\u06cc \u0637\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f. \u0627\u06cc\u0646 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0632\u0645\u06cc\u0646\u0647 \u0648 \u0645\u062d\u06cc\u0637 \u0644\u0627\u0632\u0645 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%85%D8%B2_%D9%85%D9%86%D8%A8%D8%B9\"><\/span>\n<p>  \u0631\u0645\u0632 \u0645\u0646\u0628\u0639<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"ltag-github-readme-tag\">\n<div class=\"readme-overview\">\n<h3><span class=\"ez-toc-section\" id=\"%D8%A2%D9%86%D8%A7%D9%84%D8%A7%DB%8C%D8%B2%D8%B1_%D9%88_%D9%85%D8%B4%D8%A7%D9%88%D8%B1_%D8%B1%D9%81%D8%AA%D8%A7%D8%B1_%D9%85%D8%A7%D9%84%DB%8C_%D8%A8%D8%A7_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%DA%A9%D9%87_%D8%AF%D8%B1_%D9%BE%D8%A7%DB%8C%D8%AA%D9%88%D9%86_AIOHTTP_%D9%88_TypeScript_%D9%86%D9%88%D8%B4%D8%AA%D9%87_%D8%B4%D8%AF%D9%87_%D8%A7%D8%B3%D8%AA_Expressjs_Sveltekit_%D8%A8%D8%A7_Svelte_5\"><\/span>\n<p>      \u0622\u0646\u0627\u0644\u0627\u06cc\u0632\u0631 \u0648 \u0645\u0634\u0627\u0648\u0631 \u0631\u0641\u062a\u0627\u0631 \u0645\u0627\u0644\u06cc \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u06a9\u0647 \u062f\u0631 \u067e\u0627\u06cc\u062a\u0648\u0646 (AIOHTTP) \u0648 TypeScript \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a (Expressjs &#038; Sveltekit \u0628\u0627 Svelte 5)<br \/>\n    <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/p><\/div>\n<\/div>\n<p><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%DA%A9%D9%86%D9%86%D8%AF%D9%87_WebSocket\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647: \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 WebSocket<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0628\u0647 \u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0631\u0627\u06cc \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0627\u0644\u06cc \u0648 \u062e\u0644\u0627\u0635\u0647 \u0647\u0627 \u060c \u0645\u0627 \u0628\u0647 \u062c\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u0633\u0646\u062a\u06cc HTTP \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0637\u0631\u0627\u0648\u062a \u0645\u062f\u0627\u0648\u0645 \u062f\u0627\u0631\u0646\u062f \u060c \u0627\u0632 WebSockets \u060c \u06cc\u06a9 \u067e\u0631\u0648\u062a\u06a9\u0644 \u0627\u0631\u062a\u0628\u0627\u0637\u06cc \u062f\u0648 \u0637\u0631\u0641\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u062f\u0631 <code>TransactionWebSocketHandler<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u062a\u0635\u0627\u0644\u0627\u062a WebSocket \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">WebSocket<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">ws<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">TransactionService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">$services\/transaction.service.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">baseConfig<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">$config\/base.config.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">mongoose<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">mongoose<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">sendError<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">$utils\/error.utils.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">TransactionWebSocketHandler<\/span><span class=\"p\">(<\/span><span class=\"nx\">ws<\/span><span class=\"p\">:<\/span> <span class=\"nx\">WebSocket<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">message<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">actions<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">message<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nb\">Array<\/span><span class=\"p\">.<\/span><span class=\"nf\">isArray<\/span><span class=\"p\">(<\/span><span class=\"nx\">actions<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">sendError<\/span><span class=\"p\">(<\/span><span class=\"nx\">ws<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Invalid message format. Expected an array.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n        <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">actionObj<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">actions<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">actionObj<\/span><span class=\"p\">.<\/span><span class=\"nx\">action<\/span> <span class=\"o\">||<\/span> <span class=\"o\">!<\/span><span class=\"nx\">actionObj<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nf\">sendError<\/span><span class=\"p\">(<\/span>\n            <span class=\"nx\">ws<\/span><span class=\"p\">,<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">Invalid action format. Each action requires 'action' and 'userId'.<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"p\">);<\/span>\n          <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">action<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">actionObj<\/span><span class=\"p\">;<\/span>\n\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">mongoose<\/span><span class=\"p\">.<\/span><span class=\"nx\">Types<\/span><span class=\"p\">.<\/span><span class=\"nx\">ObjectId<\/span><span class=\"p\">.<\/span><span class=\"nf\">isValid<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nf\">sendError<\/span><span class=\"p\">(<\/span><span class=\"nx\">ws<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Invalid userId format.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n          <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n\n        <span class=\"k\">switch <\/span><span class=\"p\">(<\/span><span class=\"nx\">action<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"k\">case<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">analyze<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span>\n          <span class=\"k\">case<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">summary<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span>\n            <span class=\"k\">await<\/span> <span class=\"nf\">handleAction<\/span><span class=\"p\">(<\/span><span class=\"nx\">ws<\/span><span class=\"p\">,<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">mongoose<\/span><span class=\"p\">.<\/span><span class=\"nx\">Types<\/span><span class=\"p\">.<\/span><span class=\"nc\">ObjectId<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">),<\/span> <span class=\"nx\">action<\/span><span class=\"p\">);<\/span>\n            <span class=\"k\">break<\/span><span class=\"p\">;<\/span>\n          <span class=\"nl\">default<\/span><span class=\"p\">:<\/span>\n            <span class=\"nf\">sendError<\/span><span class=\"p\">(<\/span><span class=\"nx\">ws<\/span><span class=\"p\">,<\/span> <span class=\"s2\">`Unknown action: <\/span><span class=\"p\">${<\/span><span class=\"nx\">action<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">baseConfig<\/span><span class=\"p\">.<\/span><span class=\"nx\">logger<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span>\n        <span class=\"s2\">`Error processing message: <\/span><span class=\"p\">${<\/span>\n          <span class=\"nx\">error<\/span> <span class=\"k\">instanceof<\/span> <span class=\"nb\">Error<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">error<\/span>\n        <span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n      <span class=\"p\">);<\/span>\n      <span class=\"nf\">sendError<\/span><span class=\"p\">(<\/span>\n        <span class=\"nx\">ws<\/span><span class=\"p\">,<\/span>\n        <span class=\"s2\">`Failed to process message: <\/span><span class=\"p\">${<\/span>\n          <span class=\"nx\">error<\/span> <span class=\"k\">instanceof<\/span> <span class=\"nb\">Error<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">error<\/span>\n        <span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n      <span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">close<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">baseConfig<\/span><span class=\"p\">.<\/span><span class=\"nx\">logger<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Frontend WebSocket connection closed<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"nx\">ws<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">error<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">baseConfig<\/span><span class=\"p\">.<\/span><span class=\"nx\">logger<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"s2\">`WebSocket error: <\/span><span class=\"p\">${<\/span><span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">handleAction<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">frontendWs<\/span><span class=\"p\">:<\/span> <span class=\"nx\">WebSocket<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">userId<\/span><span class=\"p\">:<\/span> <span class=\"nx\">mongoose<\/span><span class=\"p\">.<\/span><span class=\"nx\">Types<\/span><span class=\"p\">.<\/span><span class=\"nx\">ObjectId<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">action<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span>\n<span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">transactions<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">TransactionService<\/span><span class=\"p\">.<\/span><span class=\"nf\">findTransactionsByUserId<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n      <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n      <span class=\"o\">-<\/span><span class=\"mi\">1<\/span>\n    <span class=\"p\">);<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">transactions<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">sendError<\/span><span class=\"p\">(<\/span>\n        <span class=\"nx\">frontendWs<\/span><span class=\"p\">,<\/span>\n        <span class=\"s2\">`No transactions found for userId: <\/span><span class=\"p\">${<\/span><span class=\"nx\">userId<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">action<\/span>\n      <span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">await<\/span> <span class=\"nx\">TransactionService<\/span><span class=\"p\">.<\/span><span class=\"nf\">connectToUtilityServer<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">action<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">transactions<\/span><span class=\"p\">.<\/span><span class=\"nx\">transactions<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">frontendWs<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">baseConfig<\/span><span class=\"p\">.<\/span><span class=\"nx\">logger<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span>\n      <span class=\"s2\">`Error handling action: <\/span><span class=\"p\">${<\/span><span class=\"nx\">error<\/span> <span class=\"k\">instanceof<\/span> <span class=\"nb\">Error<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">error<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n    <span class=\"p\">);<\/span>\n    <span class=\"nf\">sendError<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">frontendWs<\/span><span class=\"p\">,<\/span>\n      <span class=\"s2\">`Failed to handle action: <\/span><span class=\"p\">${<\/span>\n        <span class=\"nx\">error<\/span> <span class=\"k\">instanceof<\/span> <span class=\"nb\">Error<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">error<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">error<\/span>\n      <span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>ws<\/code> \u0645\u0627\u0698\u0648\u0644 (\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644\u06cc \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a) \u060c \u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u062a\u0635\u0627\u0644 WebSocket \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u060c \u0627\u062a\u0635\u0627\u0644 \u0646\u0632\u062f\u06cc\u06a9 \u0648 \u062e\u0637\u0627\u0647\u0627 \u060c \u062f\u0633\u062a\u06af\u06cc\u0631\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0645\u062d\u0636 \u062f\u0631\u06cc\u0627\u0641\u062a \u067e\u06cc\u0627\u0645 \u060c \u067e\u0627\u0633\u062e \u0628\u0647 \u062a\u0645\u0627\u0633 \u0628\u0631\u0627\u06cc <code>message<\/code> \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u062e\u0631\u0627\u062c \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a\u06cc \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 JSON \u060c \u0627\u0646\u062a\u0638\u0627\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0631\u0627 \u062f\u0627\u0631\u0646\u062f.<\/li>\n<li>\u0641\u0631\u0645\u062a \u0647\u0631 \u0639\u0645\u0644 \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f \u060c \u0648 \u0627\u0632 \u0622\u0646 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>action<\/code> \u0648\u062a <code>userId<\/code>\u0628\u0634\u0631<\/li>\n<li>\u062a\u0623\u06cc\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f <code>userId<\/code> \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u0647 \u06cc\u06a9 ObjectId \u0645\u0639\u062a\u0628\u0631 Mongoose \u0627\u0633\u062a.<\/li>\n<li>\u0627\u0632 a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>switch<\/code> \u062c\u0645\u0644\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0645\u062e\u062a\u0644\u0641 (<code>analyze<\/code> \u0648\u062a <code>summary<\/code>)) \u060c \u0648<\/li>\n<li>\u062a\u0645\u0627\u0633 <code>handleAction<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u0627\u06cc \u067e\u0631\u062f\u0627\u0632\u0634 \u0647\u0631 \u0639\u0645\u0644 \u0645\u0639\u062a\u0628\u0631.<\/li>\n<\/ul>\n<p>\u062f\u0631 <code>handleAction<\/code> \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062e\u0627\u0635 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0628\u0631\u0627\u06cc \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f <code>userId<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>TransactionService.findTransactionsByUserId<\/code> \u0631\u0648\u0634 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644\u06cc \u0645\u0648\u0631\u062f \u0628\u062d\u062b \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a\u0647 \u0627\u0633\u062a. \u0647\u0631\u06af\u0648\u0646\u0647 \u0645\u0639\u0627\u0645\u0644\u0627\u062a \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0634\u062f\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f <code>TransactionService.connectToUtilityServer<\/code> \u0631\u0648\u0634 \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0628\u0632\u0627\u0631 \u0628\u0631\u0627\u06cc \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u06cc\u0627 \u062e\u0644\u0627\u0635\u0647.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u062b\u0628\u062a \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"p\">...<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">WebSocketServer<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">ws<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">...<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">TransactionWebSocketHandler<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">$websockets\/transaction.websocket.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">...<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">startServer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"na\">server<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpServer<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">createServer<\/span><span class=\"p\">(<\/span><span class=\"nx\">app<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">wss<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">WebSocketServer<\/span><span class=\"p\">({<\/span> <span class=\"nx\">server<\/span><span class=\"p\">,<\/span> <span class=\"na\">path<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/ws<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ 5. Setup WebSocket handlers<\/span>\n    <span class=\"nx\">wss<\/span><span class=\"p\">.<\/span><span class=\"nf\">on<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">connection<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">ws<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nc\">TransactionWebSocketHandler<\/span><span class=\"p\">(<\/span><span class=\"nx\">ws<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ 6. Connect to MongoDB<\/span>\n    <span class=\"nx\">baseConfig<\/span><span class=\"p\">.<\/span><span class=\"nx\">logger<\/span><span class=\"p\">.<\/span><span class=\"nf\">info<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Connecting to MongoDB cluster...<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">db<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">connectToCluster<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"p\">...<\/span>\n  <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">baseConfig<\/span><span class=\"p\">.<\/span><span class=\"nx\">logger<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Error starting server:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nf\">exit<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<span class=\"nf\">startServer<\/span><span class=\"p\">();<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u060c \u0645\u0627 \u0633\u0631\u0648\u06cc\u0633 \u0628\u0627\u0637\u0646 \u0631\u0627 \u0646\u062a\u06cc\u062c\u0647 \u0645\u06cc \u06af\u06cc\u0631\u06cc\u0645. \u0627\u06a9\u0646\u0648\u0646 \u0648\u0642\u062a \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 Sveltekit \u0631\u0627 \u0628\u0627 Tailwindcss \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_sveltekit_%D8%A8%D8%A7_tailwindcss\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2: sveltekit \u0628\u0627 tailwindcss<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Sveltekit \u0628\u0627 Tailwindcss \u060c \u0645\u0627 \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0627\u0635\u0644\u0627\u062d\u0627\u062a \u0627\u0632 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0645\u0647\u0627\u062c\u0631\u062a \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0646\u0648\u0634\u062a\u0645 \u060c \u0628\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0631\u0633\u0645\u06cc Tailwindcss \u0645\u0631\u0627\u062c\u0639\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f Sveltekit \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 Svelte 5 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>sv<\/code> CLI:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>npx sv create interface <span class=\"c\"># modify the name as you please<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0632 \u0634\u0645\u0627 \u062e\u0648\u0627\u0633\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f <code>sv<\/code> \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0622\u0646 \u0644\u0647\u062c\u0647 \u06a9\u0646\u06cc\u062f. \u062a\u0639\u0627\u0645\u0644 \u0634\u0645\u0627 \u0628\u0627 CLI \u0628\u0627\u06cc\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0634\u06a9\u0644 \u0628\u0627\u0634\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>projects npx sv create interface\nNeed to <span class=\"nb\">install <\/span>the following packages:\nsv@0.6.18\nOk to proceed? <span class=\"o\">(<\/span>y<span class=\"o\">)<\/span> y\n\n\u250c  Welcome to the Svelte CLI! <span class=\"o\">(<\/span>v0.6.18<span class=\"o\">)<\/span>\n\u2502\n\u25c7  Which template would you like?\n\u2502  SvelteKit minimal\n\u2502\n\u25c7  Add <span class=\"nb\">type <\/span>checking with Typescript?\n\u2502  Yes, using Typescript syntax\n\u2502\n\u25c6  Project created\n\u2502\n\u25c7  What would you like to add to your project? <span class=\"o\">(<\/span>use arrow keys \/ space bar<span class=\"o\">)<\/span>\n\u2502  prettier, eslint, vitest, tailwindcss, sveltekit-adapter\n\u2502\n\u25c7  tailwindcss: Which plugins would you like to add?\n\u2502  typography, forms\n\u2502\n\u25c7  sveltekit-adapter: Which SvelteKit adapter would you like to use?\n\u2502  node\n\u2502\n\u25c7  Which package manager <span class=\"k\">do <\/span>you want to <span class=\"nb\">install <\/span>dependencies with?\n\u2502  npm\n\u2502\n\u25c6  Successfully setup add-ons\n\u2502\n\u25c6  Successfully installed dependencies\n\u2502\n\u25c7  Successfully formatted modified files\n\u2502\n\u25c7  Project next steps \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n\u2502                                                                          \u2502\n\u2502  1: <span class=\"nb\">cd <\/span>interface                                                         \u2502\n\u2502  2: git init <span class=\"o\">&amp;&amp;<\/span> git add <span class=\"nt\">-A<\/span> <span class=\"o\">&amp;&amp;<\/span> git commit <span class=\"nt\">-m<\/span> <span class=\"s2\">\"Initial commit\"<\/span> <span class=\"o\">(<\/span>optional<span class=\"o\">)<\/span>  \u2502\n\u2502  3: npm run dev <span class=\"nt\">--<\/span> <span class=\"nt\">--open<\/span>                                                \u2502\n\u2502                                                                          \u2502\n\u2502  To close the dev server, hit Ctrl-C                                     \u2502\n\u2502                                                                          \u2502\n\u2502  Stuck? Visit us at https:\/\/svelte.dev\/chat                              \u2502\n\u2502                                                                          \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\u2502\n\u2514  You<span class=\"s1\">'re all set!\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0635\u0648\u0631\u062a \u062a\u0645\u0627\u06cc\u0644 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0645\u0631\u0627\u062d\u0644 \u0631\u0627 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0647\u0631\u0633\u062a \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u062a\u0627\u0632\u0647 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0647 \u062f\u0644\u0627\u06cc\u0644\u06cc \u060c tailwindcss \u0646\u0635\u0628 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 <code>sv<\/code> \u0646\u0633\u062e\u0647 \u0628\u0648\u062f <code>3.4.17<\/code>\u0628\u0634\u0631 \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u062f\u0631 \u0632\u0645\u0627\u0646 \u0646\u0648\u0634\u062a\u0646 \u0627\u06cc\u0646 \u060c Tailwindcss \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u0646\u0633\u062e\u0647 \u0627\u0633\u062a <code>4.0.2<\/code>\u0628\u0634\u0631 \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u0628\u0627\u06cc\u062f \u0645\u0647\u0627\u062c\u0631\u062a \u06a9\u0646\u06cc\u0645. \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0645\u0631\u0627\u062d\u0644 \u0645\u0647\u0627\u062c\u0631\u062a \u060c \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>interface<span class=\"nv\">$ <\/span>npx @tailwindcss\/upgrade@next\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0631\u0627 \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>interface<span class=\"nv\">$ <\/span>npx @tailwindcss\/upgrade@next\nNeed to <span class=\"nb\">install <\/span>the following packages:\n@tailwindcss\/upgrade@4.0.2\nOk to proceed? <span class=\"o\">(<\/span>y<span class=\"o\">)<\/span> y\n\n\u2248 tailwindcss v4.0.2\n\nfatal: not a git repository <span class=\"o\">(<\/span>or any of the parent directories<span class=\"o\">)<\/span>: .git\n\u2502 Searching <span class=\"k\">for <\/span>CSS files <span class=\"k\">in <\/span>the current\n\u2502 directory and its subdirectories\u2026\n\n\u2502 \u21b3 Linked <span class=\"sb\">`<\/span>.\/tailwind.config.ts<span class=\"sb\">`<\/span> to\n\u2502   <span class=\"sb\">`<\/span>.\/src\/app.css<span class=\"sb\">`<\/span>\n\n\u2502 Migrating JavaScript configuration files\u2026\n\n\u2502 \u21b3 Migrated configuration file:\n\u2502   <span class=\"sb\">`<\/span>.\/tailwind.config.ts<span class=\"sb\">`<\/span>\n\n\u2502 Migrating templates\u2026\n\n\u2502 \u21b3 Migrated templates <span class=\"k\">for <\/span>configuration file:\n\u2502   <span class=\"sb\">`<\/span>.\/tailwind.config.ts<span class=\"sb\">`<\/span>\n\n\u2502 Migrating stylesheets\u2026\n\n\u2502 \u21b3 Migrated stylesheet: <span class=\"sb\">`<\/span>.\/src\/app.css<span class=\"sb\">`<\/span>\n\n\u2502 Migrating PostCSS configuration\u2026\n\n\u2502 \u21b3 Installed package: <span class=\"sb\">`<\/span>@tailwindcss\/postcss<span class=\"sb\">`<\/span>\n\n\u2502 \u21b3 Removed package: <span class=\"sb\">`<\/span>autoprefixer<span class=\"sb\">`<\/span>\n\n\u2502 \u21b3 Migrated PostCSS configuration:\n\u2502   <span class=\"sb\">`<\/span>.\/postcss.config.js<span class=\"sb\">`<\/span>\n\n\u2502 Updating dependencies\u2026\n\n\u2502 \u21b3 Updated package:\n\u2502   <span class=\"sb\">`<\/span>prettier-plugin-tailwindcss<span class=\"sb\">`<\/span>\n\n\u2502 \u21b3 Updated package: <span class=\"sb\">`<\/span>tailwindcss<span class=\"sb\">`<\/span>\n\nfatal: not a git repository <span class=\"o\">(<\/span>or any of the parent directories<span class=\"o\">)<\/span>: .git\n\u2502 No changes were made to your repository.\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062c\u0627\u062f\u0648\u06cc\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u0645\u06cc \u06a9\u0646\u062f <code>src\/app.css<\/code> \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"k\">@import<\/span> <span class=\"s1\">\"tailwindcss\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">@plugin<\/span> <span class=\"s2\">'@tailwindcss\/typography'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@plugin<\/span> <span class=\"s2\">'@tailwindcss\/forms'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c\">\/*\n  The default border color has changed to `currentColor` in Tailwind CSS v4,\n  so we've added these compatibility styles to make sure everything still\n  looks the same as it did with Tailwind CSS v3.\n\n  If we ever want to remove these styles, we need to add an explicit border\n  color utility to any element that depends on these defaults.\n*\/<\/span>\n<span class=\"k\">@layer<\/span> <span class=\"n\">base<\/span> <span class=\"p\">{<\/span>\n  <span class=\"o\">*,<\/span>\n  <span class=\"nd\">::after<\/span><span class=\"o\">,<\/span>\n  <span class=\"nd\">::before<\/span><span class=\"o\">,<\/span>\n  <span class=\"nd\">::backdrop<\/span><span class=\"o\">,<\/span>\n  <span class=\"nd\">::file-selector-button<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">border-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-gray-200<\/span><span class=\"p\">,<\/span> <span class=\"n\">currentColor<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><code>tailwind.config.ts<\/code>  \u062d\u0630\u0641 \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u0648 <code>postcss.config.js<\/code> \u0627\u0635\u0644\u0627\u062d \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u0645\u0627 \u0628\u0627\u06cc\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062c\u0632\u0626\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>src\/app.css<\/code> \u0648\u062a <code>vite.config.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"k\">@import<\/span> <span class=\"s1\">\"tailwindcss\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">@plugin<\/span> <span class=\"s2\">'@tailwindcss\/typography'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@plugin<\/span> <span class=\"s2\">'@tailwindcss\/forms'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">@custom-variant<\/span> <span class=\"n\">dark<\/span> <span class=\"p\">(<\/span><span class=\"err\">&amp;<\/span><span class=\"p\">:<\/span><span class=\"n\">where<\/span><span class=\"p\">(.<\/span><span class=\"n\">dark<\/span><span class=\"p\">,<\/span> <span class=\"p\">.<\/span><span class=\"n\">dark<\/span> <span class=\"err\">*<\/span><span class=\"p\">));<\/span>\n\n<span class=\"k\">@layer<\/span> <span class=\"n\">base<\/span> <span class=\"p\">{<\/span>\n  <span class=\"o\">*,<\/span>\n  <span class=\"nd\">::after<\/span><span class=\"o\">,<\/span>\n  <span class=\"nd\">::before<\/span><span class=\"o\">,<\/span>\n  <span class=\"nd\">::backdrop<\/span><span class=\"o\">,<\/span>\n  <span class=\"nd\">::file-selector-button<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">border-color<\/span><span class=\"p\">:<\/span> <span class=\"n\">var<\/span><span class=\"p\">(<\/span><span class=\"n\">--color-gray-200<\/span><span class=\"p\">,<\/span> <span class=\"n\">currentColor<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0628\u0647 \u062e\u0637 6 \u0627\u062d\u062a\u06cc\u0627\u062c \u062f\u0627\u0631\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u06a9\u0644\u0627\u0633\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 (\u0648 \u0628\u0639\u062f\u0627\u064b \u060c <code>prefers-color-scheme<\/code>) \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u067e\u0648\u06cc\u0627 \u0645\u0636\u0627\u0645\u06cc\u0646.<\/p>\n<p>\u0628\u0639\u062f\u06cc \u0627\u0633\u062a <code>vite.config.js<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">defineConfig<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">vitest\/config<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">sveltekit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@sveltejs\/kit\/vite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">tailwindcss<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@tailwindcss\/vite<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nf\">defineConfig<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">plugins<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nf\">tailwindcss<\/span><span class=\"p\">(),<\/span> <span class=\"nf\">sveltekit<\/span><span class=\"p\">()],<\/span>\n\n  <span class=\"na\">test<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">include<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">src\/**\/*.{test,spec}.{js,ts}<\/span><span class=\"dl\">\"<\/span><span class=\"p\">],<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0646\u062a\u06cc\u062c\u0647 \u0645\u06cc \u06af\u06cc\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%A7%D9%87%D8%B1%D9%85_prefers-color-scheme_%D8%AF%D8%B1_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AA%D9%85\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u0627\u0647\u0631\u0645 <code>prefers-color-scheme<\/code> \u062f\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627\u06cc \u0645\u062f\u0631\u0646 (OS) \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u0631\u0627 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u062f\u0631\u062c\u0647 \u06cc\u06a9 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0646\u062f \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u062e\u0648\u062f \u0628\u0631\u0627\u06cc \u0627\u062d\u062a\u0631\u0627\u0645 \u0628\u0647 \u0627\u0648\u0644\u0648\u06cc\u062a \u0645\u0648\u0636\u0648\u0639 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u062a\u0631\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f. CSS <code>prefers-color-scheme<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0631\u0633\u0627\u0646\u0647 \u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\"\/>\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"\/>\n    <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"language\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"en\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"c\"><!-- Theme --><\/span>\n    <span class=\"nt\"><meta\/>\n      <span class=\"na\">name=<\/span><span class=\"s\">\"theme-color\"<\/span>\n      <span class=\"na\">content=<\/span><span class=\"s\">\"#ffffff\"<\/span>\n      <span class=\"na\">media=<\/span><span class=\"s\">\"(prefers-color-scheme: light)\"<\/span>\n    <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><meta\/>\n      <span class=\"na\">name=<\/span><span class=\"s\">\"theme-color\"<\/span>\n      <span class=\"na\">content=<\/span><span class=\"s\">\"#111827\"<\/span>\n      <span class=\"na\">media=<\/span><span class=\"s\">\"(prefers-color-scheme: dark)\"<\/span>\n    <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"preconnect\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/fonts.googleapis.com\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"preconnect\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/fonts.gstatic.com\"<\/span> <span class=\"na\">crossorigin<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/>\n      <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/fonts.googleapis.com\/css2?family=Fira+Code:wght@300..700&amp;family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap\"<\/span>\n      <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span>\n    <span class=\"nt\">\/&gt;<\/span>\n    ... %sveltekit.head%\n    <span class=\"nt\"><script\/><\/span>\n      <span class=\"c1\">\/\/ Get user's explicit preference<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">userTheme<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">theme<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Get system preference<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">systemTheme<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nf\">matchMedia<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">(prefers-color-scheme: dark)<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Use user preference if set, otherwise follow system<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">theme<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">userTheme<\/span> <span class=\"o\">||<\/span> <span class=\"p\">(<\/span><span class=\"nx\">systemTheme<\/span><span class=\"p\">.<\/span><span class=\"nx\">matches<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">dark<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">light<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Apply theme<\/span>\n      <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">documentElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">dark<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">theme<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">dark<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Listen for system changes<\/span>\n      <span class=\"nx\">systemTheme<\/span><span class=\"p\">.<\/span><span class=\"nf\">addEventListener<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">change<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ Only follow system if user hasn't set preference<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">getItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">theme<\/span><span class=\"dl\">\"<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">documentElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">dark<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">matches<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"nt\"\/>\n  <span class=\"nt\"\/>\n  <span class=\"nt\">\n    <span class=\"na\">data-sveltekit-preload-data=<\/span><span class=\"s\">\"hover\"<\/span>\n    <span class=\"na\">class=<\/span><span class=\"s\">\"bg-white text-black dark:bg-gray-900 dark:text-white\"<\/span>\n  <span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"> <span class=\"na\">style=<\/span><span class=\"s\">\"display: contents\"<\/span><span class=\"nt\">&gt;<\/span>%sveltekit.body%<span class=\"nt\"\/><\/span>\n  <span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg>\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg>\n<\/div>\n<\/div>\n<\/div>\n\u0627\u06cc\u0646 \u06a9\u062f \u06a9\u0648\u062a\u0627\u0647 HTML \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f. \u0627\u0648\u0644 \u060c <code>theme-color<\/code> \u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u0645\u062a\u0627 UI \u0645\u0631\u0648\u0631\u06af\u0631 (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0646\u0648\u0627\u0631 \u0622\u062f\u0631\u0633) \u0631\u0627 \u062a\u0637\u0628\u06cc\u0642 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u0645\u0648\u0636\u0648\u0639 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. <code>prefers-color-scheme<\/code> \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0633\u0628\u06a9 \u0648 \u062a\u0627\u0631\u06cc\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0633\u067e\u0633 \u060c \u062f\u0631 <code>script<\/code>\u060c \u0645\u0627 \u0627\u0628\u062a\u062f\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0648\u0644\u0648\u06cc\u062a \u0645\u0648\u0636\u0648\u0639 \u0630\u062e\u06cc\u0631\u0647 \u0634\u062f\u0647 \u0631\u0627 \u062f\u0627\u0631\u062f <code>localStorage<\/code>\u0628\u0634\u0631 \u0627\u06af\u0631 \u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u0646\u0628\u0627\u0634\u062f \u060c \u062a\u0646\u0638\u06cc\u0645 \u062d\u0627\u0644\u062a \u062a\u0627\u0631\u06cc\u06a9 \u0633\u0637\u062d \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>window.matchMedia('(prefers-color-scheme: dark)')<\/code>\u0628\u0634\u0631 \u0633\u067e\u0633 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u0627 \u062d\u0630\u0641 \u0622\u0646 \u060c \u0645\u0648\u0636\u0648\u0639 \u0645\u0646\u0627\u0633\u0628 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>dark<\/code> \u06a9\u0644\u0627\u0633 \u0628\u0647 <code\/> element. This class is used to toggle CSS styles (e.g., using <code>dark:bg-gray-900<\/code> \u062f\u0631 <code\/> class). Finally, it listens for changes in the OS-level dark mode setting and updates the theme accordingly (but only if the user hasn&#8217;t explicitly set a preference). We also used the <code\/> element to set the background and text colors based on the presence of the dark class using Tailwind CSS classes.\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Theme_switching_logic_with_icons\"><\/span>\n  Step 4: Theme switching logic with icons\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\nBefore we proceed to creating the authentication\/login page, let&#8217;s make a simple <code>ThemeSwitcher.svelte<\/code> \u0645\u0624\u0644\u0641\u0647:\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><script><![CDATA[<span class=\"na\">lang=]]><\/script><\/span><span class=\"s\">\"ts\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"k\">import<\/span> <span class=\"nx\">Moon<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">$lib\/components\/icons\/Moon.svelte<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">import<\/span> <span class=\"nx\">Sun<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">$lib\/components\/icons\/Sun.svelte<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">let<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">props<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">$props<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"kd\">let<\/span> <span class=\"nx\">isDark<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">$state<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nf\">$effect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">isDark<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">documentElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">contains<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">dark<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"kd\">function<\/span> <span class=\"nf\">toggleTheme<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">isDark<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"nx\">isDark<\/span><span class=\"p\">;<\/span>\n    <span class=\"nx\">localStorage<\/span><span class=\"p\">.<\/span><span class=\"nf\">setItem<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">theme<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">isDark<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">dark<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">light<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nx\">documentElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">dark<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">isDark<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"><button> <span class=\"na\">onclick=<\/span><span class=\"s\">\"{toggleTheme}\"<\/span> <span class=\"err\">{...<\/span><span class=\"na\">props<\/span><span class=\"err\">}<\/span><span class=\"nt\">&gt;<\/span>\n  {#if isDark}\n  <span class=\"nt\"><sun> <span class=\"nt\">\/&gt;<\/span>\n  {:else}\n  <span class=\"nt\"><moon> <span class=\"nt\">\/&gt;<\/span>\n  {\/if}\n<span class=\"nt\"\/><\/moon><\/span><\/sun><\/span><\/button><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0645\u0644\u0627\u064b \u0627\u0632 Svelte 5 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u060c \u0645\u0627 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>$props()<\/code> RUNE \u0628\u0631\u0627\u06cc \u067e\u0630\u06cc\u0631\u0634 <strong>\u0647\u06cc\u0686<\/strong> \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u0646\u062a\u0642\u0644 \u0634\u062f\u0647 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u063a\u0631\u0641\u0647 \u0647\u0627 \u060c \u0648 \u0627\u067e\u0631\u0627\u062a\u0648\u0631 \u06af\u0633\u062a\u0631\u0634 \u0628\u0647 \u06af\u0633\u062a\u0631\u0634 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0648\u0627\u06a9\u0646\u0634\u06cc \u0631\u0627 \u0628\u0627 <code>$state<\/code> Rune \u060c \u0648 \u062f\u0631 \u0622\u0646 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f <code>$effect<\/code> \u0631\u0648\u0646 \u0648 \u062f\u0631 <code>toggleTheme<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f. \u062f\u0631 <code>$effect<\/code> Rune \u06cc\u06a9 \u0628\u0627\u0631 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u060c \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 <code>dark<\/code> \u06a9\u0644\u0627\u0633 \u062f\u0631 <code\/> element and updates the <code>isDark<\/code> \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u0627\u0633 \u0628\u06cc\u0627\u0646 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062d\u0627\u0644\u062a \u0627\u0648\u0644\u06cc\u0647 \u0645\u0624\u0644\u0641\u0647 \u0628\u0627 \u0645\u0648\u0636\u0648\u0639 \u0641\u0639\u0644\u06cc \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f. \u062f\u0631 \u0645\u0648\u0631\u062f <code>toggleTheme<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f <code>isDark<\/code> \u062d\u0627\u0644\u062a \u060c \u0645\u0648\u0636\u0648\u0639 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 (&#8220;\u062a\u0627\u0631\u06cc\u06a9&#8221; \u06cc\u0627 &#8220;\u0646\u0648\u0631&#8221;) \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>localStorage<\/code>\u060c \u0648 <code>dark<\/code> \u06a9\u0644\u0627\u0633 \u062f\u0631 <code\/> element. The <code><button\/><\/code> \u0639\u0646\u0635\u0631 \u062a\u0645\u0627\u0633 \u0645\u06cc \u06af\u06cc\u0631\u062f <code>toggleTheme<\/code> \u0631\u0648\u06cc \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0647\u0631\u06af\u0648\u0646\u0647 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u0628\u0647 \u062f\u06a9\u0645\u0647 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f. \u062f\u0627\u062e\u0644 \u062f\u06a9\u0645\u0647 \u060c <code>{#if isDark}...{:else}...{\/if}<\/code> \u0628\u0644\u0648\u06a9 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0634\u0631\u0648\u0637 \u06cc\u0627 <code>Sun<\/code> \u06cc\u0627 <code>Moon<\/code> \u0645\u0624\u0644\u0641\u0647 \u0628\u0631 \u0627\u0633\u0627\u0633 <code>isDark<\/code> \u062f\u0648\u0644\u062a<\/p>\n<p><span><b>\u062a\u0648\u062c\u0647:<\/b> \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u062e\u0648\u0627\u0635\u06cc \u062f\u0631 Svelte 5 \u0647\u0633\u062a\u0646\u062f<\/span><\/p>\n<p>\u062f\u0631 <code>on:<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u062f\u0631 SVELTE 4 \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0648\u0642\u0627\u06cc\u0639 \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 HTML \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c Svelte 5 \u0628\u0627 \u0637\u0628\u06cc\u0639\u06cc \u062a\u0631 \u0628\u0648\u062f\u0646 \u0628\u0627 HTML \u060c \u0622\u0646 \u0631\u0648\u0627\u06cc\u062a \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f \u060c \u06a9\u0647 \u0648\u0642\u0627\u06cc\u0639 \u0631\u0627 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u062e\u0648\u0627\u0635 \u0645\u06cc \u062f\u0627\u0646\u062f.\n<\/p>\n<p>\u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u062e\u0648\u0631\u0634\u06cc\u062f \u0648 \u0645\u0627\u0647 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc SVG \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc svelte \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><script><![CDATA[<span class=\"na\">lang=]]><\/script><\/span><span class=\"s\">\"ts\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">props<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">$props<\/span><span class=\"p\">();<\/span>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"><svg>\n  <span class=\"na\">class=<\/span><span class=\"s\">\"h-6 w-6 text-yellow-400\"<\/span>\n  <span class=\"na\">fill=<\/span><span class=\"s\">\"none\"<\/span>\n  <span class=\"na\">viewBox=<\/span><span class=\"s\">\"0 0 24 24\"<\/span>\n  <span class=\"na\">stroke=<\/span><span class=\"s\">\"currentColor\"<\/span>\n  <span class=\"err\">{...<\/span><span class=\"na\">props<\/span><span class=\"err\">}<\/span>\n<span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"><path>\n    <span class=\"na\">stroke-linecap=<\/span><span class=\"s\">\"round\"<\/span>\n    <span class=\"na\">stroke-linejoin=<\/span><span class=\"s\">\"round\"<\/span>\n    <span class=\"na\">stroke-width=<\/span><span class=\"s\">\"2\"<\/span>\n    <span class=\"na\">d=<\/span><span class=\"s\">\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"<\/span>\n  <span class=\"nt\">\/&gt;<\/span>\n<span class=\"nt\"\/><\/path><\/span><\/svg><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><script><![CDATA[<span class=\"na\">lang=]]><\/script><\/span><span class=\"s\">\"ts\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"kd\">let<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">props<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">$props<\/span><span class=\"p\">();<\/span>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"><svg>\n  <span class=\"na\">class=<\/span><span class=\"s\">\"h-6 w-6 text-gray-700 dark:text-gray-200\"<\/span>\n  <span class=\"na\">fill=<\/span><span class=\"s\">\"none\"<\/span>\n  <span class=\"na\">viewBox=<\/span><span class=\"s\">\"0 0 24 24\"<\/span>\n  <span class=\"na\">stroke=<\/span><span class=\"s\">\"currentColor\"<\/span>\n  <span class=\"err\">{...<\/span><span class=\"na\">props<\/span><span class=\"err\">}<\/span>\n<span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"><path>\n    <span class=\"na\">stroke-linecap=<\/span><span class=\"s\">\"round\"<\/span>\n    <span class=\"na\">stroke-linejoin=<\/span><span class=\"s\">\"round\"<\/span>\n    <span class=\"na\">stroke-width=<\/span><span class=\"s\">\"2\"<\/span>\n    <span class=\"na\">d=<\/span><span class=\"s\">\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"<\/span>\n  <span class=\"nt\">\/&gt;<\/span>\n<span class=\"nt\"\/><\/path><\/span><\/svg><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0631\u0648\u0634 \u0639\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc SVG \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0628\u06a9 \u0647\u0627 \u0631\u0627 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f \u060c \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0647\u0633\u062a\u0646\u062f \u0648 \u0622\u0646\u0647\u0627 \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_5_%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%DB%8C%D8%A7_%D9%88%D8%B1%D9%88%D8%AF_%D8%A8%D9%87_%D8%B3%DB%8C%D8%B3%D8%AA%D9%85\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 5: \u0635\u0641\u062d\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u06cc\u0627 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0686\u06af\u0648\u0646\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fobp778s6vhpjhnpzacaz.png\" alt=\"\u0635\u0641\u062d\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062a\u0627\u0631\u06cc\u06a9\" loading=\"lazy\" width=\"800\" height=\"646\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F578bimurkua4hzp9pqr1.png\" alt=\"\u0646\u0648\u0631 \u0635\u0641\u062d\u0647 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a\" loading=\"lazy\" width=\"800\" height=\"646\" title=\"\"><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><script><![CDATA[<span class=\"na\">lang=]]><\/script><\/span><span class=\"s\">\"ts\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">page<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$app\/state<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"nx\">AiNode<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/components\/icons\/AINode.svelte<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"nx\">Calculator<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/components\/icons\/Calculator.svelte<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"nx\">FinChart<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/components\/icons\/FinChart.svelte<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"nx\">GitHub<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/components\/icons\/GitHub.svelte<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"nx\">Google<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/components\/icons\/Google.svelte<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"nx\">Logo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/components\/logos\/Logo.svelte<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"nx\">ThemeSwitcher<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/components\/reusables\/ThemeSwitcher.svelte<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BASE_API_URI<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/utils\/contants<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">fade<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">svelte\/transition<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">next<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nx\">url<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchParams<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">next<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nt\"\/>\n\n<span class=\"nt\"><div>\n    <span class=\"na\">class=<\/span><span class=\"s\">\"relative min-h-screen bg-linear-to-br from-gray-100 to-gray-200 transition-colors duration-300 dark:from-gray-900 dark:to-gray-800\"<\/span>\n<span class=\"nt\">&gt;<\/span>\n    <span class=\"c\"><!-- Theme Toggle --><\/span>\n    <span class=\"nt\"><themeswitcher>\n        <span class=\"na\">class=<\/span><span class=\"s\">\"dark:ring-black-500\/50 absolute top-4 right-4 z-50 cursor-pointer rounded-full bg-white p-2 shadow-lg transition-all duration-300 hover:shadow-xl dark:bg-gray-700 dark:ring-2\"<\/span>\n    <span class=\"nt\">\/&gt;<\/span>\n\n    <span class=\"c\"><!-- Decorative background elements --><\/span>\n    <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"absolute inset-0 z-0 overflow-hidden\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"c\"><!-- AI Network Nodes --><\/span>\n        <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"floating-icons absolute top-10 left-10 opacity-20 dark:opacity-30\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><ainode> <span class=\"nt\">\/&gt;<\/span>\n        <span class=\"nt\"\/><\/ainode><\/span><\/div><\/span>\n        <span class=\"c\"><!-- Financial Chart --><\/span>\n        <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"floating-icons absolute right-20 bottom-32 opacity-20 dark:opacity-30\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><finchart> <span class=\"nt\">\/&gt;<\/span>\n        <span class=\"nt\"\/><\/finchart><\/span><\/p><\/span>\n        <span class=\"c\"><!-- Calculator Icon --><\/span>\n        <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"floating-icons absolute top-20 right-10 opacity-20 dark:opacity-30\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><calculator> <span class=\"nt\">\/&gt;<\/span>\n        <span class=\"nt\"\/><\/calculator><\/span><\/p><\/span>\n    <span class=\"nt\"\/><\/div><\/span>\n\n    <span class=\"c\"><!-- Main content --><\/span>\n    <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"relative z-10 flex min-h-screen items-center justify-center\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\"><div>\n            <span class=\"na\">in:fade=<\/span><span class=\"s\">{{<\/span> <span class=\"na\">duration:<\/span> <span class=\"err\">300<\/span> <span class=\"err\">}}<\/span>\n            <span class=\"na\">class=<\/span><span class=\"s\">\"w-full max-w-md space-y-8 rounded-xl bg-white\/80 p-8 shadow-lg backdrop-blur-xs transition-all duration-300 dark:bg-gray-800\/90 dark:shadow-gray-900\/30\"<\/span>\n        <span class=\"nt\">&gt;<\/span>\n            <span class=\"c\"><!-- Logo --><\/span>\n            <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"logo-container flex justify-center\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><logo> <span class=\"na\">isSmall=<\/span><span class=\"s\">{false}<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"h-12 w-auto\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n            <span class=\"nt\"\/><\/logo><\/span><\/p><\/span>\n            <span class=\"c\"><!-- Header --><\/span>\n            <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"text-center\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><h2><span class=\"ez-toc-section\" id=\"class%22mt-6_text-3xl_font-extrabold_text-gray-900_dark_text-white%22%3EWelcome_back\"><\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"mt-6 text-3xl font-extrabold text-gray-900 dark:text-white\"<\/span><span class=\"nt\">&gt;<\/span>Welcome back<span class=\"nt\"\/><span class=\"ez-toc-section-end\"><\/span><\/h2><\/span>\n                <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"mt-2 text-sm text-gray-600 dark:text-gray-400\"<\/span><span class=\"nt\">&gt;<\/span>\n                    Sign in to continue to your account\n                <span class=\"nt\"\/><\/p><\/span>\n                {#if page.url.searchParams.get('error')}\n                    <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"mt-2 text-sm text-red-500 dark:text-red-400\"<\/span><span class=\"nt\">&gt;<\/span>\n                        Log in failed. Please try again.\n                    <span class=\"nt\"\/><\/p><\/span>\n                {\/if}\n            <span class=\"nt\"\/><\/div><\/span>\n\n            <span class=\"c\"><!-- Social Login Buttons --><\/span>\n            <span class=\"nt\"\/>\n\n            <span class=\"c\"><!-- Divider --><\/span>\n            <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"mt-6\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"relative\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"absolute inset-0 flex items-center\"<\/span><span class=\"nt\">&gt;<\/span>\n                        <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"w-full border-t border-gray-300 dark:border-gray-600\"<\/span><span class=\"nt\">&gt;<\/span><\/p><\/span>\n                    <span class=\"nt\"\/><\/div><\/span>\n                    <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"relative flex justify-center text-sm\"<\/span><span class=\"nt\">&gt;<\/span>\n                        <span class=\"nt\"><span> <span class=\"na\">class=<\/span><span class=\"s\">\"bg-white px-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400\"<\/span><span class=\"nt\">&gt;<\/span>\n                            Policy Agreement\n                        <span class=\"nt\"\/><\/span>\n                    <span class=\"nt\"\/><\/span><\/p><\/span>\n                <span class=\"nt\"\/><\/div><\/span>\n            <span class=\"nt\"\/><\/div><\/span>\n            <span class=\"c\"><!-- Additional Info --><\/span>\n            <span class=\"nt\"\/>\n        <span class=\"nt\"\/><\/div><\/span>\n    <span class=\"nt\"\/><\/div><\/span>\n<span class=\"nt\"\/><\/themeswitcher><\/span><\/div><\/span>\n\n<span class=\"nt\"\/>\n    <span class=\"nc\">.floating-icons<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">animation<\/span><span class=\"p\">:<\/span> <span class=\"n\">float<\/span> <span class=\"m\">6s<\/span> <span class=\"n\">ease-in-out<\/span> <span class=\"n\">infinite<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.floating-icons<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"err\">2<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">animation-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">2s<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">.floating-icons<\/span><span class=\"nd\">:nth-child<\/span><span class=\"o\">(<\/span><span class=\"err\">3<\/span><span class=\"o\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nl\">animation-delay<\/span><span class=\"p\">:<\/span> <span class=\"m\">4s<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"k\">@keyframes<\/span> <span class=\"n\">float<\/span> <span class=\"p\">{<\/span>\n        <span class=\"err\">0<\/span><span class=\"o\">%<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0px<\/span><span class=\"p\">)<\/span> <span class=\"n\">rotate<\/span><span class=\"p\">(<\/span><span class=\"m\">0deg<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"err\">50<\/span><span class=\"o\">%<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">-20px<\/span><span class=\"p\">)<\/span> <span class=\"n\">rotate<\/span><span class=\"p\">(<\/span><span class=\"m\">360deg<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"err\">100<\/span><span class=\"o\">%<\/span> <span class=\"p\">{<\/span>\n            <span class=\"nl\">transform<\/span><span class=\"p\">:<\/span> <span class=\"n\">translateY<\/span><span class=\"p\">(<\/span><span class=\"m\">0px<\/span><span class=\"p\">)<\/span> <span class=\"n\">rotate<\/span><span class=\"p\">(<\/span><span class=\"m\">0deg<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"nt\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06af\u0631\u0686\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u0637\u0648\u0644\u0627\u0646\u06cc \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u060c \u062a\u0646\u0647\u0627 \u0628\u062e\u0634 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><script><![CDATA[<span class=\"na\">lang=]]><\/script><\/span><span class=\"s\">\"ts\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">page<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$app\/state<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">...<\/span>\n    <span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BASE_API_URI<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">$lib\/utils\/contants<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">...<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">next<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">page<\/span><span class=\"p\">.<\/span><span class=\"nx\">url<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchParams<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">next<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nt\"\/>\n...\n<span class=\"c\"><!-- Social Login Buttons --><\/span>\n<span class=\"nt\"\/>\n...\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646\u0647\u0627 \u0641\u0642\u0637 \u0647\u0633\u062a\u0646\u062f <code><a\/><\/code> \u0639\u0646\u0627\u0635\u0631\u06cc \u06a9\u0647 URL \u0622\u0646\u0647\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0646\u0642\u0627\u0637 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u067e\u06cc\u0648\u0646\u062f \u0645\u06cc \u06cc\u0627\u0628\u062f (\u0647\u0646\u0648\u0632 Google \u0627\u062c\u0631\u0627 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a). \u062f\u0631 <code>BASE_API_URI<\/code> \u0635\u0627\u062f\u0631 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 <code>src\/lib\/utils\/constants.ts<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">BASE_API_URI<\/span> <span class=\"o\">=<\/span> <span class=\"k\">import<\/span><span class=\"p\">.<\/span><span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">DEV<\/span>\n  <span class=\"p\">?<\/span> <span class=\"k\">import<\/span><span class=\"p\">.<\/span><span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">VITE_BASE_API_URI_DEV<\/span>\n  <span class=\"p\">:<\/span> <span class=\"k\">import<\/span><span class=\"p\">.<\/span><span class=\"nx\">meta<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">VITE_BASE_API_URI_PROD<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0647\u0645 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f <code>VITE_BASE_API_URI_DEV<\/code> \u06cc\u0627 <code>VITE_BASE_API_URI_PROD<\/code>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u06a9\u0647 \u0628\u0647 URL \u067e\u0627\u06cc\u0647 \u0633\u0631\u0648\u0631 \u0634\u0645\u0627 \u0627\u0634\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u060c \u0645\u0646 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u0645 <code>VITE_BASE_API_URI_DEV=http:\/\/localhost:3030\/api<\/code> \u062f\u0631 \u0627\u0644\u0641 <code>.env<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 Sveltekit \u0645\u0646.<\/p>\n<p><span><b>\u0646\u06a9\u062a\u0647:<\/b> \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f<\/span><\/p>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0627\u0639\u0632\u0627\u0645 \u0628\u0647 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062a\u0648\u0644\u06cc\u062f \u060c \u0645\u062a\u063a\u06cc\u0631 \u0645\u062d\u06cc\u0637 \u0631\u0627 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f <code>VITE_BASE_API_URI_PROD<\/code> \u0628\u0631\u0627\u06cc \u0627\u0634\u0627\u0631\u0647 \u0628\u0647 URL \u062a\u0648\u0644\u06cc\u062f \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0648\u062f \u060c \u0627\u0632 \u062c\u0645\u0644\u0647 <code>\/api<\/code> \u0645\u0633\u06cc\u0631 (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c <code>https:\/\/your-production-url.com\/api<\/code>). \u0628\u06cc\u0634\u062a\u0631 \u0633\u06cc\u0633\u062a\u0645 \u0639\u0627\u0645\u0644 \u0647\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0627\u06cc\u0646 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u0646\u062f.\n<\/p>\n<p>\u0628\u0627\u0632\u06af\u0634\u062a \u062f\u0631 \u0645\u0627 <code>+page.svelte<\/code>\u060c \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>next<\/code> \u0635\u0641\u062d\u0647 \u060c \u06a9\u0647 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633 \u0627\u0632 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0627\u06cc\u062f \u0647\u062f\u0627\u06cc\u062a \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0635\u0648\u0631\u062a \u0647\u0631 \u0645\u0633\u06cc\u0631 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u060c \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0634\u0627\u0645\u0644 \u0639\u0646\u0627\u0635\u0631 \u0628\u0635\u0631\u06cc \u0645\u0627\u0646\u0646\u062f \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u0634\u0646\u0627\u0648\u0631 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0646\u0645\u0627\u062f\u0647\u0627 &#8211;<code>AiNode<\/code> (\u0627\u062f\u063a\u0627\u0645 AI) \u060c <code>FinChart<\/code> (\u0627\u0645\u0648\u0631 \u0645\u0627\u0644\u06cc) \u060c \u0648 <code>Calculator<\/code> (\u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644) &#8211; \u0645\u0636\u0627\u0645\u06cc\u0646 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f. \u0633\u0628\u06a9 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062a\u0631\u062c\u0645\u0647 \u0639\u0645\u0648\u062f\u06cc \u0645\u062f\u0627\u0648\u0645 \u0627\u0632 <code>0px<\/code> \u0628\u0647 <code>-20px<\/code> \u0648 \u0628\u0647 \u0639\u0642\u0628 \u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u06cc\u06a9 \u0686\u0631\u062e\u0634 \u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0632 <code>0deg<\/code> \u0628\u0647 <code>360deg<\/code>\u0628\u0634\u0631 \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u0633\u062a\u06cc\u0645 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u0633\u0628\u06a9 \u0647\u0627\u06cc Tailwind \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0637\u0648\u0644\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f \u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0627 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0645\u0642\u0627\u0644\u0647 \u0628\u0639\u062f\u06cc \u0645\u0639\u0637\u0644 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u060c \u06a9\u0645\u06cc \u0627\u0645\u0646\u06cc\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u0634\u0648\u062f. \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0645\u0639\u062a\u0628\u0631 \u0646\u0628\u0627\u06cc\u062f \u0627\u0632 \u0622\u0646\u062c\u0627 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\u0647 \u0627\u0646\u062f \u060c \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0648\u0631\u0648\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f. \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u0647\u062f\u0641 \u060c \u0645\u0627 <code>+page.server.ts<\/code> \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u06cc \u06a9\u0647 \u0647\u062f\u0641 \u0622\u0646\u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u0633\u06cc\u0631 \u0647\u0631 \u06a9\u0627\u0631\u0628\u0631 \u0645\u0639\u062a\u0628\u0631 \u0627\u0632 \u0622\u0645\u062f\u0646 \u0628\u0647 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">redirect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@sveltejs\/kit<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"kd\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">PageServerLoad<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/$types<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">load<\/span><span class=\"p\">:<\/span> <span class=\"nx\">PageServerLoad<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">({<\/span> <span class=\"nx\">locals<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">locals<\/span><span class=\"p\">.<\/span><span class=\"nx\">user<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"nf\">redirect<\/span><span class=\"p\">(<\/span><span class=\"mi\">302<\/span><span class=\"p\">,<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/finanalyzer<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"k\">return<\/span> <span class=\"p\">{};<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0645\u0648\u0631\u062f \u0628\u0639\u062f\u06cc \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%DB%8C%DA%AF%D8%B1\"><\/span>\n<p>  \u062f\u06cc\u06af\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0632 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0644\u0630\u062a \u0628\u0631\u062f\u06cc\u062f\u061f \u0645\u0646 \u06cc\u06a9 \u0645\u0647\u0646\u062f\u0633 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u060c \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0641\u0646\u06cc \u0648 \u0645\u0647\u0646\u062f\u0633 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0641\u0646\u06cc \u0647\u0633\u062a\u0645 \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0641\u0639\u0627\u0644 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0641\u0631\u0635\u062a \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u060c \u0628\u0647 \u0648\u06cc\u0698\u0647 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0627\u0645\u0646\u06cc\u062a \u0648\u0628 \u060c \u0627\u0645\u0648\u0631 \u0645\u0627\u0644\u06cc \u060c \u0645\u0631\u0627\u0642\u0628\u062a \u0647\u0627\u06cc \u0628\u0647\u062f\u0627\u0634\u062a\u06cc \u0648 \u0622\u0645\u0648\u0632\u0634 \u0647\u0633\u062a\u0645. \u0627\u06af\u0631 \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u062a\u062e\u0635\u0635 \u0645\u0646 \u0628\u0627 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u062a\u06cc\u0645 \u0634\u0645\u0627 \u0647\u0645\u0627\u0647\u0646\u06af \u0627\u0633\u062a \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06af\u067e \u0628\u0632\u0646\u06cc\u0645! \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u0646 \u0631\u0627 \u062f\u0631 LinkedIn \u0648 X \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f. \u0645\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0627\u06cc\u0645\u06cc\u0644 \u062f\u0648\u0631 \u0647\u0633\u062a\u0645.<\/p>\n<p>\u0627\u06af\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0631\u0632\u0634 \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u06cc\u062f \u060c \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u06af\u0633\u062a\u0631\u0634 \u062f\u0627\u0646\u0634 \u060c \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0634\u0628\u06a9\u0647 \u062e\u0648\u062f \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0647 \u0642\u0633\u0645\u062a 5 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0633\u062a: https:\/\/johnowolabiidogun.dev\/blog\/asynchronous-server-building-and-rigorously-testing-a-websocket-and-http-server-3918df\/67b0ab3c7a900ac23e502c51 \u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 \u0627\u06cc\u0646 \u0633\u0631\u06cc\u0627\u0644 \u060c \u0645\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 WebSocket \u0633\u0631\u0648\u06cc\u0633 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0648 \u0633\u0627\u062e\u062a \u062c\u0644\u0648\u06cc \u0622\u0646 \u0631\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u06cc\u0646 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0648 \u062c\u0628\u0647\u0647 \u0627\u0645\u06a9\u0627\u0646 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":97633,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frmhy5ec8cjaxugo9mt7a.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-97632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/97632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=97632"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/97632\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/97633"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=97632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=97632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=97632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}