\u067e\u0648\u0631\u062a\u0641\u0648\u0644\u06cc\u0648 \u06a9\u06cc\u0627\u0646\u0627 | \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n \/\/ Custom color definitions and enabling dark mode\n tailwind.config = {\n darkMode: 'class', \/\/ Enable class-based dark mode\n theme: {\n extend: {\n fontFamily: {\n sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],\n mono: ['Courier New', 'monospace'],\n },\n colors: {\n 'pastel-pink': '#f7e9ef', \/\/ Original Body Background (Light)\n 'light-pink': '#fcdfe2',\n 'dark-pink': '#e1a6b2', \/\/ Primary Accent Color\n 'soft-gray': '#f5f5f5',\n 'text-dark': '#4a4a4a',\n \n \/\/ Dark Mode Colors\n 'dark-bg': '#1f2937', \n 'dark-card': '#374151', \n 'dark-soft-gray': '#4b5563', \n\n \/\/ Custom colors for BMI and Snake Game status\n 'bmi-normal': '#38bdf8', \/\/ Sky 400 - Blue\n 'bmi-warn': '#fbbf24', \u00a0 \/\/ Amber 400 - Yellow\n 'bmi-danger': '#f87171', \/\/ Red 400 - Light Red\n 'snake-bg': '#1f2937', \u00a0 \/\/ Dark Canvas Background\n 'snake-color': '#10b981',\/\/ Emerald 500 - Green\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Base styles *\/\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n background-color: #f7e9ef; \/* Light Mode Background *\/\n margin: 0;\n padding: 0;\n transition: background-color 0.3s ease, color 0.3s ease;\n }\n\n \/* Dark Mode styles applied via .dark class on body *\/\n body.dark {\n background-color: #1f2937; \/* Dark BG *\/\n color: #d1d5db; \/* Default text color in dark mode *\/\n }\n \n body.dark .text-text-dark {\n color: #d1d5db;\n }\n\n \/* --- Snake Game Custom Styles --- *\/\n #snakeCanvas {\n border: 2px solid #a1a1aa; \n background-color: #1f2937; \n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);\n display: block;\n margin: 0 auto;\n }\n \n \/* General button styling for the game controls *\/\n .game-button {\n transition: all 0.15s ease-in-out;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\n font-family: 'Courier New', monospace;\n }\n\n .game-button:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);\n }\n\n .game-button:active {\n transform: translateY(2px);\n box-shadow: none;\n }\n <\/style>\n<\/head>\n<body class=\"text-text-dark antialiased transition-all duration-300\">\n \n <div class=\"container mx-auto px-4 py-8 md:py-16\">\n\n \n <header class=\"text-center mb-16 relative\">\n \n <button id=\"darkModeToggle\" onclick=\"toggleDarkMode()\" \n class=\"absolute left-0 top-0 p-3 rounded-full bg-light-pink text-dark-pink \n hover:bg-dark-pink hover:text-white transition duration-200 \n dark:bg-dark-card dark:text-light-pink dark:hover:bg-light-pink dark:hover:text-dark-bg \n shadow-md focus:outline-none focus:ring-2 focus:ring-dark-pink\/50\">\n \n <svg id=\"sunIcon\" class=\"w-6 h-6 hidden\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"4\"\/><path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\"\/><\/svg>\n \n <svg id=\"moonIcon\" class=\"w-6 h-6\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3A7 7 0 0 0 21 12.79z\"\/><\/svg>\n <\/button>\n <h1 class=\"text-5xl md:text-6xl font-extrabold text-dark-pink drop-shadow-sm mb-2\">\u06a9\u06cc\u0627\u0646\u0627<\/h1>\n <p class=\"text-xl md:text-2xl font-light text-text-dark dark:text-gray-300\">\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f<\/p>\n <\/header>\n\n \n <section id=\"about\" class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12 dark:bg-gray-800 dark:text-gray-200\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-4\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646<\/h2>\n <p class=\"text-lg leading-relaxed mb-4\">\n \u0628\u0647 \u0632\u0648\u062f\u06cc \u0622\u067e\u062f\u06cc\u062a \u0645\u06cc\u0634\u0647!\n <\/p>\n <p class=\"text-lg leading-relaxed font-semibold\">\n <\/p>\n <\/section>\n\n \n <section id=\"skills\" class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12 dark:bg-gray-800 dark:text-gray-200\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627<\/h2>\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 text-center\">\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 16.5c-1.5 0-2.5-.9-3-2.1-.5-1.2-.5-2.7 0-3.9.5-1.2 1.5-2.1 3-2.1s2.5.9 3 2.1c.5 1.2.5 2.7 0 3.9-.5 1.2-1.5 2.1-3 2.1zm-4-8.4c1.5 0 2.5.9 3 2.1.5 1.2.5 2.7 0 3.9-.5 1.2-1.5 2.1-3 2.1s-2.5-.9-3-2.1c-.5-1.2-.5-2.7 0-3.9.5-1.2 1.5-2.1 3-2.1z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">\u067e\u0627\u06cc\u062a\u0648\u0646<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm0-4h-2V6h2v8z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">\u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h14v14H5zM6 16.5l1-4.5 5 1.5 5-1.5 1 4.5H6z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">HTML\/CSS<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-12h4v2h-4v-2zm0 4h4v2h-4v-2z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">C# (.NET)<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M20 18c1.1 0 1.99-.9 1.99-2L22 8c0-1.1-.9-2-2-2h-7.95c-.58 0-1.13.2-1.55.57L9.4 4.57c-.42-.37-.97-.57-1.55-.57H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16zm0-10l-2.02 2L20 12v4H4V6h4.84l1.45 1.45c.37.37.88.55 1.4.55H20z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 (MySQL)<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M22 17H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1zM22 7H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1zM22 12H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">\u0641\u062a\u0648\u0634\u0627\u067e<\/span>\n <\/div>\n \n <\/div>\n <\/section>\n\n \n <section id=\"projects\" class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12 dark:bg-gray-800 dark:text-gray-200\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/h2>\n \n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n \n \n <div class=\"bg-light-pink p-5 rounded-2xl shadow-inner border border-dark-pink\/30 dark:bg-gray-700 dark:border-gray-600\">\n <h3 class=\"text-2xl font-bold text-dark-pink text-center mb-4 dark:text-light-pink\">\u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 BMI<\/h3>\n \n <div class=\"space-y-4 mb-6\">\n \n <div>\n <label for=\"weight\" class=\"block text-sm font-medium text-text-dark mb-1 dark:text-gray-300\">\u0648\u0632\u0646 (\u06a9\u06cc\u0644\u0648\u06af\u0631\u0645)<\/label>\n <input type=\"number\" id=\"weight\" placeholder=\"\u0645\u062b\u0644\u0627: \u06f7\u06f5.\u06f5\" \n class=\"w-full p-3 border border-dark-pink rounded-lg focus:ring-dark-pink focus:border-dark-pink transition duration-150 shadow-sm text-right \n dark:bg-gray-800 dark:text-white dark:border-gray-600\" required>\n <\/div>\n \n \n <div>\n <label for=\"height\" class=\"block text-sm font-medium text-text-dark mb-1 dark:text-gray-300\">\u0642\u062f (\u0633\u0627\u0646\u062a\u06cc\u200c\u0645\u062a\u0631)<\/label>\n <input type=\"number\" id=\"height\" placeholder=\"\u0645\u062b\u0644\u0627: \u06f1\u06f7\u06f0\" \n class=\"w-full p-3 border border-dark-pink rounded-lg focus:ring-dark-pink focus:border-dark-pink transition duration-150 shadow-sm text-right \n dark:bg-gray-800 dark:text-white dark:border-gray-600\" required>\n <\/div>\n <\/div>\n\n \n <div id=\"error-message\" class=\"hidden bg-red-100 border-r-4 border-red-500 text-red-700 p-3 rounded-md mb-4 text-right dark:bg-red-900 dark:border-red-600 dark:text-red-300\" role=\"alert\">\n <p class=\"font-semibold\">\u062e\u0637\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc<\/p>\n <p id=\"error-text\" class=\"text-sm\"><\/p>\n <\/div>\n\n \n <button onclick=\"calculateBmi()\" class=\"w-full bg-dark-pink text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:bg-opacity-90 transition duration-300 transform hover:scale-[1.01] active:scale-[0.99]\">\n \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0646\n <\/button>\n\n \n <div id=\"bmi-result-section\" class=\"mt-8 pt-4 border-t border-dark-pink\/30 hidden dark:border-gray-600\">\n \n \n <div class=\"text-center mb-4 p-3 bg-soft-gray rounded-lg shadow-inner dark:bg-gray-600\">\n <p class=\"text-lg text-text-dark dark:text-gray-300\">BMI \u0634\u0645\u0627:<\/p>\n <p id=\"bmi-value\" class=\"text-5xl font-extrabold mt-1\">—<\/p>\n <\/div>\n \n \n <h4 class=\"text-xl font-bold text-center mb-3 dark:text-gray-200\">\u0648\u0636\u0639\u06cc\u062a \u0628\u062f\u0646\u06cc: <span id=\"category-span\">—<\/span><\/h4>\n \n \n <div class=\"bg-dark-pink\/10 border border-dark-pink\/20 p-4 rounded-xl text-right dark:bg-light-pink\/10 dark:border-light-pink\/20\">\n <p class=\"font-medium text-dark-pink mb-2 dark:text-light-pink\">\u062a\u062d\u0644\u06cc\u0644 \u062f\u0642\u06cc\u0642:<\/p>\n <p id=\"description-text\" class=\"text-gray-700 leading-relaxed text-sm dark:text-gray-300\">\n \u0648\u0632\u0646 \u0648 \u0642\u062f \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0648\u0636\u0639\u06cc\u062a \u0628\u062f\u0646\u06cc \u0634\u0645\u0627 \u0645\u0634\u062e\u0635 \u0634\u0648\u062f.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-light-pink p-5 rounded-2xl shadow-inner border border-dark-pink\/30 dark:bg-gray-700 dark:border-gray-600\">\n <h3 class=\"text-2xl font-bold text-dark-pink text-center mb-4 dark:text-light-pink\">\u0628\u0627\u0632\u06cc \u0645\u0627\u0631 (Snake)<\/h3>\n\n \n <div class=\"w-full flex flex-col items-center\">\n \n \n <div class=\"w-full flex justify-end items-center mb-3\">\n <div class=\"text-lg font-mono p-2 bg-text-dark\/80 text-white rounded-lg\">\n \u0627\u0645\u062a\u06cc\u0627\u0632: <span id=\"score\" class=\"font-extrabold text-snake-color\">0<\/span>\n <\/div>\n <\/div>\n\n \n <canvas id=\"snakeCanvas\" width=\"300\" height=\"300\"><\/canvas>\n\n \n <div id=\"game-message\" class=\"mt-4 p-3 w-full text-center text-sm font-semibold rounded-lg border bg-dark-pink\/10 text-dark-pink border-dark-pink dark:bg-light-pink\/10 dark:text-light-pink dark:border-light-pink\">\n \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u062d\u0631\u06a9\u062a\u060c \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a \u06cc\u0627 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f!\n <\/div>\n\n \n <div class=\"mt-6 w-full flex flex-col items-center\">\n <button id=\"resetButton\" onclick=\"resetGame()\" class=\"game-button w-full bg-bmi-danger text-white py-3 rounded-xl font-bold text-lg hover:bg-red-700 mb-4 hidden\">\n \u0634\u0631\u0648\u0639 \u0645\u062c\u062f\u062f\n <\/button>\n <div class=\"grid grid-cols-3 gap-2 w-48\">\n <div><\/div>\n <button onclick=\"changeDirection('up')\" class=\"game-button bg-text-dark text-white p-3 rounded-xl dark:bg-dark-soft-gray\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 mx-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5M5 12l7 -7 7 7\"\/><\/svg><\/button>\n <div><\/div>\n <button onclick=\"changeDirection('left')\" class=\"game-button bg-text-dark text-white p-3 rounded-xl dark:bg-dark-soft-gray\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 mx-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l-7 7 7 7\"\/><\/svg><\/button>\n <button onclick=\"togglePause()\" id=\"pauseButton\" class=\"game-button bg-dark-pink text-white p-3 rounded-xl text-sm font-bold dark:bg-light-pink dark:text-dark-bg\">\u0645\u06a9\u062b<\/button>\n <button onclick=\"changeDirection('right')\" class=\"game-button bg-text-dark text-white p-3 rounded-xl dark:bg-dark-soft-gray\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 mx-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l7 7 7 7\"\/><\/svg><\/button>\n <div><\/div>\n <button onclick=\"changeDirection('down')\" class=\"game-button bg-text-dark text-white p-3 rounded-xl dark:bg-dark-soft-gray\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 mx-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12l7 7 7 -7\"\/><\/svg><\/button>\n <div><\/div>\n <\/div>\n <p class=\"text-xs text-gray-500 mt-4 dark:text-gray-400\">\u0627\u0632 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a \u062f\u0631 \u06a9\u06cc\u0628\u0648\u0631\u062f \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n <\/section>\n\n \n <section id=\"contact\" class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl dark:bg-gray-800 dark:text-gray-200\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0646<\/h2>\n <p class=\"text-lg mb-4 text-center\">\n \u062e\u0648\u0634\u062d\u0627\u0644 \u0645\u06cc\u200c\u0634\u0645 \u0628\u0627 \u0645\u0646 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f.\n <\/p>\n <div class=\"flex flex-col items-center gap-4\">\n \n <a href=\"mailto:kiana.ablnws@gmail.com\" class=\"w-full max-w-sm text-center bg-dark-pink text-white py-3 rounded-xl font-bold text-lg hover:bg-opacity-90 transition-colors duration-200\">\n \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644\n <\/a>\n <a href=\"https:\/\/www.linkedin.com\/in\/kiana-abolfazlian-466882380\" class=\"w-full max-w-sm text-center bg-gray-200 text-text-dark py-3 rounded-xl font-bold text-lg hover:bg-gray-300 transition-colors duration-200 dark:bg-dark-card dark:text-white dark:hover:bg-gray-600\">\n \u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646\n <\/a>\n <\/div>\n <\/section>\n\n <\/div>\n\n \n <script>\n \n \/* =======================================================\n Dark Mode Toggle Logic\n =======================================================\n *\/\n const body = document.body;\n const moonIcon = document.getElementById('moonIcon');\n const sunIcon = document.getElementById('sunIcon');\n\n function updateIcon(isDark) {\n if (isDark) {\n moonIcon.classList.add('hidden');\n sunIcon.classList.remove('hidden');\n } else {\n moonIcon.classList.remove('hidden');\n sunIcon.classList.add('hidden');\n }\n }\n\n window.toggleDarkMode = function () {\n body.classList.toggle('dark');\n const isDark = body.classList.contains('dark');\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n updateIcon(isDark);\n };\n\n \/\/ Check local storage and system preference on load\n (function initializeTheme() {\n const savedTheme = localStorage.getItem('theme');\n \/\/ Check system preference only if no explicit saved theme is found\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; \n\n if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {\n body.classList.add('dark');\n updateIcon(true);\n } else {\n body.classList.remove('dark');\n updateIcon(false);\n }\n })();\n\n \/* =======================================================\n BMI Calculator Logic (\u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 BMI)\n =======================================================\n *\/\n\n const BMI_RANGES = [\n { max: 18.5, category: \"\u06a9\u0645\u0628\u0648\u062f \u0648\u0632\u0646\", color: 'bmi-warn', icon: '\u26a0\ufe0f', \n desc: \"\u0648\u0632\u0646 \u0634\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0646\u0633\u0628\u062a \u0628\u0647 \u0642\u062f\u062a\u0627\u0646 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0627\u0634\u062f. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0627 \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u062a\u063a\u0630\u06cc\u0647 \u06cc\u0627 \u067e\u0632\u0634\u06a9 \u0645\u0634\u0648\u0631\u062a \u06a9\u0646\u06cc\u062f.\" },\n { max: 25.0, category: \"\u0648\u0632\u0646 \u0646\u0631\u0645\u0627\u0644\", color: 'bmi-normal', icon: '\u2705', \n desc: \"\u062a\u0628\u0631\u06cc\u06a9! \u0648\u0632\u0646 \u0634\u0645\u0627 \u062f\u0631 \u0645\u062d\u062f\u0648\u062f\u0647 \u0633\u0627\u0644\u0645 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f. \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0645\u062a\u0639\u0627\u062f\u0644 \u0648 \u0648\u0631\u0632\u0634 \u0645\u0646\u0638\u0645 \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u062f.\" },\n { max: 30.0, category: \"\u0627\u0636\u0627\u0641\u0647 \u0648\u0632\u0646\", color: 'bmi-warn', icon: '\u2757\ufe0f', \n desc: \"\u0627\u06cc\u0646 \u0648\u0636\u0639\u06cc\u062a \u0646\u0634\u0627\u0646\u200c\u062f\u0647\u0646\u062f\u0647 \u062f\u0631\u0635\u062f \u0686\u0631\u0628\u06cc \u0628\u062f\u0646\u06cc \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0632 \u062d\u062f \u0633\u0627\u0644\u0645 \u0627\u0633\u062a. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0627 \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0648 \u0641\u0639\u0627\u0644\u06cc\u062a \u0628\u062f\u0646\u06cc\u060c \u06a9\u0645\u06cc \u0648\u0632\u0646 \u06a9\u0645 \u06a9\u0646\u06cc\u062f.\" },\n { max: Infinity, category: \"\u0686\u0627\u0642\u06cc\", color: 'bmi-danger', icon: '\u274c', \n desc: \"\u0627\u06cc\u0646 \u0633\u0637\u062d \u0627\u0632 \u0648\u0632\u0646 \u0627\u0636\u0627\u0641\u06cc\u060c \u062e\u0637\u0631\u0627\u062a \u0633\u0644\u0627\u0645\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0634\u062f\u06cc\u062f\u0627\u064b \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u0634\u0627\u0648\u0631\u0647 \u067e\u0632\u0634\u06a9\u06cc \u0648 \u062a\u063a\u0630\u06cc\u0647\u200c\u0627\u06cc \u0628\u0627\u0634\u06cc\u062f.\" },\n ];\n\n function displayError(message) {\n const errorBox = document.getElementById('error-message');\n const errorText = document.getElementById('error-text');\n \n if (message) {\n errorText.textContent = message;\n errorBox.classList.remove('hidden');\n document.getElementById('bmi-result-section').classList.add('hidden'); \n } else {\n errorBox.classList.add('hidden');\n }\n }\n\n function calculateBmi() {\n displayError(''); \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc\n\n const weightInput = document.getElementById('weight');\n const heightInput = document.getElementById('height');\n \n const weight_kg = parseFloat(weightInput.value);\n const height_cm = parseFloat(heightInput.value);\n\n \/\/ 1. \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc\n if (isNaN(weight_kg) || isNaN(height_cm) || weight_kg <= 0 || height_cm <= 0) {\n displayError(\"\u0644\u0637\u0641\u0627 \u0627\u0639\u062f\u0627\u062f \u0645\u062b\u0628\u062a \u0648 \u0645\u0639\u062a\u0628\u0631 \u0628\u0631\u0627\u06cc \u0648\u0632\u0646 \u0648 \u0642\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.\");\n return;\n }\n\n try {\n \/\/ 2. \u0645\u062d\u0627\u0633\u0628\u0647\n const height_m = height_cm \/ 100.0;\n const bmi = weight_kg \/ (height_m ** 2);\n const roundedBmi = bmi.toFixed(2);\n\n \/\/ 3. \u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc\n let result = null;\n for (const range of BMI_RANGES) {\n if (bmi < range.max) {\n result = range;\n break;\n }\n }\n\n \/\/ 4. \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc\n const resultSection = document.getElementById('bmi-result-section');\n const bmiValueElement = document.getElementById('bmi-value');\n const categorySpan = document.getElementById('category-span');\n const descriptionText = document.getElementById('description-text');\n \n \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u062f\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0642\u0628\u0644\u06cc\n categorySpan.className = '';\n bmiValueElement.className = 'text-5xl font-extrabold mt-1'; \n \n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\n bmiValueElement.textContent = roundedBmi;\n categorySpan.textContent = `${result.icon} ${result.category}`;\n descriptionText.textContent = result.desc;\n \n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc Tailwind \u0628\u0631 \u0627\u0633\u0627\u0633 \u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc\n categorySpan.classList.add('text-' + result.color);\n bmiValueElement.classList.add('text-' + result.color);\n \n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0628\u062e\u0634 \u0646\u062a\u0627\u06cc\u062c\n resultSection.classList.remove('hidden');\n\n } catch (e) {\n console.error(\"Calculation failed:\", e);\n displayError(\"\u06cc\u06a9 \u062e\u0637\u0627\u06cc \u063a\u06cc\u0631\u0645\u0646\u062a\u0638\u0631\u0647 \u062f\u0631 \u0645\u062d\u0627\u0633\u0628\u0647 BMI \u0631\u062e \u062f\u0627\u062f.\");\n }\n }\n\n \/* =======================================================\n Snake Game Logic (\u0628\u0627\u0632\u06cc \u0645\u0627\u0631)\n =======================================================\n *\/\n\n const canvas = document.getElementById('snakeCanvas');\n const ctx = canvas.getContext('2d');\n const scoreElement = document.getElementById('score');\n const messageElement = document.getElementById('game-message');\n const resetButton = document.getElementById('resetButton');\n const pauseButton = document.getElementById('pauseButton');\n\n \/\/ --- Game Constants ---\n const TILE_COUNT = 15; \/\/ Grid size (smaller for better fit)\n let TILE_SIZE; \n const GAME_SPEED = 120; \/\/ Time in milliseconds between game ticks\n\n \/\/ --- Game State Variables ---\n let snake = [];\n let food = {};\n let dx = 0; \n let dy = 0; \n let score = 0;\n let isRunning = false;\n let isPaused = false;\n let nextDirection = { dx: 1, dy: 0 }; \n let lastUpdateTime = 0;\n \n \/**\n * Initializes canvas size and game state.\n *\/\n function initializeSnakeGame() {\n \/\/ Set canvas size based on its container (e.g., 90% of max 300px)\n const container = document.querySelector('#snakeCanvas').parentElement;\n const size = Math.min(container.clientWidth - 10, 300); \/\/ 300 max width\n canvas.width = size;\n canvas.height = size;\n \n TILE_SIZE = canvas.width \/ TILE_COUNT;\n \n \/\/ Initial snake position (start in the middle-left)\n snake = [\n { x: 5, y: Math.floor(TILE_COUNT \/ 2) },\n { x: 4, y: Math.floor(TILE_COUNT \/ 2) },\n { x: 3, y: Math.floor(TILE_COUNT \/ 2) }\n ];\n dx = 1; \/\/ Start moving right\n dy = 0;\n score = 0;\n isRunning = false; \/\/ Starts paused until user input\n isPaused = false;\n nextDirection = { dx: 1, dy: 0 };\n scoreElement.textContent = score;\n resetButton.classList.add('hidden');\n pauseButton.classList.remove('hidden');\n pauseButton.textContent = \"\u0645\u06a9\u062b\";\n \n spawnFood();\n updateSnakeMessage(\"\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u062d\u0631\u06a9\u062a\u060c \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a \u06cc\u0627 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f!\", '#e1a6b2');\n draw();\n }\n\n \/**\n * Spawns food at a random unoccupied grid location.\n *\/\n function spawnFood() {\n let newFood;\n let occupied;\n\n do {\n newFood = {\n x: Math.floor(Math.random() * TILE_COUNT),\n y: Math.floor(Math.random() * TILE_COUNT)\n };\n occupied = snake.some(segment => segment.x === newFood.x && segment.y === newFood.y);\n } while (occupied);\n\n food = newFood;\n }\n\n \/**\n * Draws the game elements (board, snake, food).\n *\/\n function draw() {\n \/\/ 1. Draw Board (clears the canvas)\n ctx.fillStyle = tailwind.config.theme.extend.colors['snake-bg']; \n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ 2. Draw Food\n ctx.fillStyle = tailwind.config.theme.extend.colors['bmi-danger'];\n ctx.shadowColor = 'red';\n ctx.shadowBlur = 10;\n ctx.fillRect(food.x * TILE_SIZE, food.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n ctx.shadowBlur = 0; \n\n \/\/ 3. Draw Snake\n snake.forEach((segment, index) => {\n if (index === 0) {\n ctx.fillStyle = '#10b981'; \/\/ Brighter green for head (snake-color)\n ctx.strokeStyle = '#a7f3d0'; \n } else {\n ctx.fillStyle = '#059669'; \/\/ Darker green for body\n ctx.strokeStyle = '#34d399';\n }\n \n ctx.fillRect(segment.x * TILE_SIZE, segment.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n ctx.strokeRect(segment.x * TILE_SIZE, segment.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n });\n }\n\n \/**\n * Updates the position and checks for collisions.\n *\/\n function update() {\n if (!isRunning || isPaused) return;\n\n \/\/ Update direction only if it doesn't immediately reverse the snake\n if (nextDirection.dx !== -dx || nextDirection.dy !== -dy) {\n dx = nextDirection.dx;\n dy = nextDirection.dy;\n }\n\n \/\/ Create new head position\n const head = { x: snake[0].x + dx, y: snake[0].y + dy };\n\n \/\/ 1. Check for Wall Collision\n if (head.x < 0 || head.x >= TILE_COUNT || head.y < 0 || head.y >= TILE_COUNT) {\n gameOver(\"\u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u062f\u06cc\u0648\u0627\u0631!\");\n return;\n }\n\n \/\/ 2. Check for Self Collision\n if (snake.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y)) {\n gameOver(\"\u062e\u0648\u062f\u062e\u0648\u0631\u06cc!\");\n return;\n }\n\n \/\/ Add new head to the front\n snake.unshift(head);\n\n \/\/ 3. Check for Food Collision\n if (head.x === food.x && head.y === food.y) {\n score++;\n scoreElement.textContent = score;\n spawnFood();\n } else {\n \/\/ Remove the tail\n snake.pop();\n }\n }\n\n \/**\n * The main game loop function.\n *\/\n function gameLoop(timestamp) {\n if (!isRunning && !isPaused) {\n draw();\n requestAnimationFrame(gameLoop);\n return;\n }\n if (!isRunning && score > 0 && !isPaused) return; \/\/ Stop loop if game over\n\n const elapsed = timestamp - lastUpdateTime;\n\n if (elapsed > GAME_SPEED && !isPaused) {\n lastUpdateTime = timestamp;\n update();\n }\n\n draw();\n requestAnimationFrame(gameLoop);\n }\n\n \/**\n * Handles the Game Over state.\n * @param {string} reason - The reason for game over.\n *\/\n function gameOver(reason) {\n isRunning = false;\n updateSnakeMessage(`\u0628\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f! \u0627\u0645\u062a\u06cc\u0627\u0632 \u0646\u0647\u0627\u06cc\u06cc: ${score}. \u062f\u0644\u06cc\u0644: ${reason}`, '#dc2626');\n resetButton.classList.remove('hidden');\n pauseButton.classList.add('hidden');\n }\n \n \/**\n * Updates the instruction\/status message area.\n * @param {string} text - The message text.\n * @param {string} color - Hex color code.\n *\/\n function updateSnakeMessage(text, color) {\n messageElement.textContent = text;\n messageElement.style.backgroundColor = color + '20'; \/\/ 20% opacity\n messageElement.style.borderColor = color;\n messageElement.style.color = color;\n }\n\n\n \/**\n * Resets and starts a new game.\n *\/\n window.resetGame = function () {\n pauseButton.classList.remove('hidden');\n initializeSnakeGame();\n isRunning = true; \/\/ Start running immediately upon reset\n lastUpdateTime = performance.now(); \n requestAnimationFrame(gameLoop);\n }\n\n \/**\n * Toggles the paused state.\n *\/\n window.togglePause = function () {\n if (!isRunning && score > 0) return; \/\/ Prevent pause if game is over\n \n if (!isRunning) {\n \/\/ Start the game on first pause button click if not started\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n lastUpdateTime = performance.now();\n requestAnimationFrame(gameLoop);\n return;\n }\n \n isPaused = !isPaused;\n if (isPaused) {\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u0645\u062a\u0648\u0642\u0641 \u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u062f\u0627\u0645\u0647 \u062f\u0648\u0628\u0627\u0631\u0647 \u0645\u06a9\u062b \u0631\u0627 \u0628\u0632\u0646\u06cc\u062f.\", '#f59e0b');\n pauseButton.textContent = \"\u0627\u062f\u0627\u0645\u0647\";\n } else {\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a!\", '#10b981');\n pauseButton.textContent = \"\u0645\u06a9\u062b\";\n lastUpdateTime = performance.now(); \n requestAnimationFrame(gameLoop);\n }\n }\n\n \/**\n * Public function to change snake direction (used by on-screen buttons).\n * @param {string} direction - 'up', 'down', 'left', or 'right'.\n *\/\n window.changeDirection = function (direction) {\n if (!isRunning) {\n \/\/ If game is not running (first move), start it\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n lastUpdateTime = performance.now(); \n requestAnimationFrame(gameLoop);\n }\n if (isPaused) return;\n\n \/\/ Prevent immediate reverse direction\n switch (direction) {\n case 'up':\n if (dy === 0) nextDirection = { dx: 0, dy: -1 };\n break;\n case 'down':\n if (dy === 0) nextDirection = { dx: 0, dy: 1 };\n break;\n case 'left':\n if (dx === 0) nextDirection = { dx: -1, dy: 0 };\n break;\n case 'right':\n if (dx === 0) nextDirection = { dx: 1, dy: 0 };\n break;\n }\n }\n \n \/**\n * Keyboard event listener for changing direction\n *\/\n document.addEventListener('keydown', (e) => {\n const key = e.key;\n if (!isRunning) {\n \/\/ If game is not running (first move), start it when an arrow key is pressed\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n lastUpdateTime = performance.now();\n requestAnimationFrame(gameLoop);\n }\n }\n if (isPaused) return;\n\n \/\/ Prevent immediate reverse direction\n switch (key) {\n case 'ArrowUp':\n if (dy === 0) nextDirection = { dx: 0, dy: -1 };\n break;\n case 'ArrowDown':\n if (dy === 0) nextDirection = { dx: 0, dy: 1 };\n break;\n case 'ArrowLeft':\n if (dx === 0) nextDirection = { dx: -1, dy: 0 };\n break;\n case 'ArrowRight':\n if (dx === 0) nextDirection = { dx: 1, dy: 0 };\n break;\n }\n });\n \n \/\/ Final initialization call\n document.addEventListener('DOMContentLoaded', () => {\n initializeSnakeGame();\n window.requestAnimationFrame(gameLoop); \n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u067e\u0648\u0631\u062a\u0641\u0648\u0644\u06cc\u0648 \u06a9\u06cc\u0627\u0646\u0627 | \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f \u06a9\u06cc\u0627\u0646\u0627 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646 \u0628\u0647 \u0632\u0648\u062f\u06cc \u0622\u067e\u062f\u06cc\u062a \u0645\u06cc\u0634\u0647! \u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627 \u067e\u0627\u06cc\u062a\u0648\u0646 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a HTML\/CSS C# (.NET) \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 (MySQL) \u0641\u062a\u0648\u0634\u0627\u067e \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 BMI \u0648\u0632\u0646 (\u06a9\u06cc\u0644\u0648\u06af\u0631\u0645) \u0642\u062f (\u0633\u0627\u0646\u062a\u06cc\u200c\u0645\u062a\u0631) \u062e\u0637\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0646 BMI \u0634\u0645\u0627: — \u0648\u0636\u0639\u06cc\u062a \u0628\u062f\u0646\u06cc: — \u062a\u062d\u0644\u06cc\u0644 \u062f\u0642\u06cc\u0642: \u0648\u0632\u0646 \u0648 \u0642\u062f \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0648\u0636\u0639\u06cc\u062a \u0628\u062f\u0646\u06cc \u0634\u0645\u0627 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":9,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/62"}],"wp:attachment":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7,"date":"2025-08-14T19:27:26","date_gmt":"2025-08-14T15:57:26","guid":{"rendered":"https:\/\/kianaabln.ir\/?page_id=7"},"modified":"2025-10-07T17:39:47","modified_gmt":"2025-10-07T14:09:47","slug":"landing-page","status":"publish","type":"page","link":"https:\/\/kianaabln.ir\/","title":{"rendered":"Landing Page"},"content":{"rendered":"\n\n\n\n \n \n \u067e\u0648\u0631\u062a\u0641\u0648\u0644\u06cc\u0648 \u06a9\u06cc\u0627\u0646\u0627 | \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n \/\/ Custom color definitions and enabling dark mode\n tailwind.config = {\n darkMode: 'class', \/\/ Enable class-based dark mode\n theme: {\n extend: {\n fontFamily: {\n sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],\n mono: ['Courier New', 'monospace'],\n },\n colors: {\n 'pastel-pink': '#f7e9ef', \/\/ Original Body Background (Light)\n 'light-pink': '#fcdfe2',\n 'dark-pink': '#e1a6b2', \/\/ Primary Accent Color\n 'soft-gray': '#f5f5f5',\n 'text-dark': '#4a4a4a',\n \n \/\/ Dark Mode Colors\n 'dark-bg': '#1f2937', \n 'dark-card': '#374151', \n 'dark-soft-gray': '#4b5563', \n\n \/\/ Custom colors for BMI and Snake Game status\n 'bmi-normal': '#38bdf8', \/\/ Sky 400 - Blue\n 'bmi-warn': '#fbbf24', \u00a0 \/\/ Amber 400 - Yellow\n 'bmi-danger': '#f87171', \/\/ Red 400 - Light Red\n 'snake-bg': '#1f2937', \u00a0 \/\/ Dark Canvas Background\n 'snake-color': '#10b981',\/\/ Emerald 500 - Green\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Base styles *\/\n body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n background-color: #f7e9ef; \/* Light Mode Background *\/\n margin: 0;\n padding: 0;\n transition: background-color 0.3s ease, color 0.3s ease;\n }\n\n \/* Dark Mode styles applied via .dark class on body *\/\n body.dark {\n background-color: #1f2937; \/* Dark BG *\/\n color: #d1d5db; \/* Default text color in dark mode *\/\n }\n \n body.dark .text-text-dark {\n color: #d1d5db;\n }\n\n \/* --- Snake Game Custom Styles --- *\/\n #snakeCanvas {\n border: 2px solid #a1a1aa; \n background-color: #1f2937; \n box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);\n display: block;\n margin: 0 auto;\n }\n \n \/* General button styling for the game controls *\/\n .game-button {\n transition: all 0.15s ease-in-out;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);\n font-family: 'Courier New', monospace;\n }\n\n .game-button:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);\n }\n\n .game-button:active {\n transform: translateY(2px);\n box-shadow: none;\n }\n <\/style>\n<\/head>\n<body class=\"text-text-dark antialiased transition-all duration-300\">\n \n <div class=\"container mx-auto px-4 py-8 md:py-16\">\n\n \n <header class=\"text-center mb-16 relative\">\n \n <button id=\"darkModeToggle\" onclick=\"toggleDarkMode()\" \n class=\"absolute left-0 top-0 p-3 rounded-full bg-light-pink text-dark-pink \n hover:bg-dark-pink hover:text-white transition duration-200 \n dark:bg-dark-card dark:text-light-pink dark:hover:bg-light-pink dark:hover:text-dark-bg \n shadow-md focus:outline-none focus:ring-2 focus:ring-dark-pink\/50\">\n \n <svg id=\"sunIcon\" class=\"w-6 h-6 hidden\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"4\"\/><path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\"\/><\/svg>\n \n <svg id=\"moonIcon\" class=\"w-6 h-6\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3A7 7 0 0 0 21 12.79z\"\/><\/svg>\n <\/button>\n <h1 class=\"text-5xl md:text-6xl font-extrabold text-dark-pink drop-shadow-sm mb-2\">\u06a9\u06cc\u0627\u0646\u0627<\/h1>\n <p class=\"text-xl md:text-2xl font-light text-text-dark dark:text-gray-300\">\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f<\/p>\n <\/header>\n\n \n <section id=\"about\" class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12 dark:bg-gray-800 dark:text-gray-200\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-4\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646<\/h2>\n <p class=\"text-lg leading-relaxed mb-4\">\n \u0628\u0647 \u0632\u0648\u062f\u06cc \u0622\u067e\u062f\u06cc\u062a \u0645\u06cc\u0634\u0647!\n <\/p>\n <p class=\"text-lg leading-relaxed font-semibold\">\n <\/p>\n <\/section>\n\n \n <section id=\"skills\" class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12 dark:bg-gray-800 dark:text-gray-200\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627<\/h2>\n <div class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6 text-center\">\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm2 16.5c-1.5 0-2.5-.9-3-2.1-.5-1.2-.5-2.7 0-3.9.5-1.2 1.5-2.1 3-2.1s2.5.9 3 2.1c.5 1.2.5 2.7 0 3.9-.5 1.2-1.5 2.1-3 2.1zm-4-8.4c1.5 0 2.5.9 3 2.1.5 1.2.5 2.7 0 3.9-.5 1.2-1.5 2.1-3 2.1s-2.5-.9-3-2.1c-.5-1.2-.5-2.7 0-3.9.5-1.2 1.5-2.1 3-2.1z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">\u067e\u0627\u06cc\u062a\u0648\u0646<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 16h-2v-2h2v2zm0-4h-2V6h2v8z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">\u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h14v14H5zM6 16.5l1-4.5 5 1.5 5-1.5 1 4.5H6z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">HTML\/CSS<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-12h4v2h-4v-2zm0 4h4v2h-4v-2z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">C# (.NET)<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M20 18c1.1 0 1.99-.9 1.99-2L22 8c0-1.1-.9-2-2-2h-7.95c-.58 0-1.13.2-1.55.57L9.4 4.57c-.42-.37-.97-.57-1.55-.57H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16zm0-10l-2.02 2L20 12v4H4V6h4.84l1.45 1.45c.37.37.88.55 1.4.55H20z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 (MySQL)<\/span>\n <\/div>\n \n <div class=\"bg-soft-gray p-4 rounded-xl shadow-sm hover:shadow-md transform hover:-translate-y-1 transition-all duration-200 dark:bg-dark-soft-gray dark:text-white\">\n <div class=\"flex items-center justify-center mb-2\">\n \n <svg class=\"h-10 w-10 text-dark-pink\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M22 17H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1zM22 7H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1zM22 12H2c-.55 0-1 .45-1 1s.45 1 1 1h20c.55 0 1-.45 1-1s-.45-1-1-1z\"\/><\/svg>\n <\/div>\n <span class=\"text-lg font-medium\">\u0641\u062a\u0648\u0634\u0627\u067e<\/span>\n <\/div>\n \n <\/div>\n <\/section>\n\n \n <section id=\"projects\" class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl mb-12 dark:bg-gray-800 dark:text-gray-200\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/h2>\n \n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8\">\n \n \n <div class=\"bg-light-pink p-5 rounded-2xl shadow-inner border border-dark-pink\/30 dark:bg-gray-700 dark:border-gray-600\">\n <h3 class=\"text-2xl font-bold text-dark-pink text-center mb-4 dark:text-light-pink\">\u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 BMI<\/h3>\n \n <div class=\"space-y-4 mb-6\">\n \n <div>\n <label for=\"weight\" class=\"block text-sm font-medium text-text-dark mb-1 dark:text-gray-300\">\u0648\u0632\u0646 (\u06a9\u06cc\u0644\u0648\u06af\u0631\u0645)<\/label>\n <input type=\"number\" id=\"weight\" placeholder=\"\u0645\u062b\u0644\u0627: \u06f7\u06f5.\u06f5\" \n class=\"w-full p-3 border border-dark-pink rounded-lg focus:ring-dark-pink focus:border-dark-pink transition duration-150 shadow-sm text-right \n dark:bg-gray-800 dark:text-white dark:border-gray-600\" required>\n <\/div>\n \n \n <div>\n <label for=\"height\" class=\"block text-sm font-medium text-text-dark mb-1 dark:text-gray-300\">\u0642\u062f (\u0633\u0627\u0646\u062a\u06cc\u200c\u0645\u062a\u0631)<\/label>\n <input type=\"number\" id=\"height\" placeholder=\"\u0645\u062b\u0644\u0627: \u06f1\u06f7\u06f0\" \n class=\"w-full p-3 border border-dark-pink rounded-lg focus:ring-dark-pink focus:border-dark-pink transition duration-150 shadow-sm text-right \n dark:bg-gray-800 dark:text-white dark:border-gray-600\" required>\n <\/div>\n <\/div>\n\n \n <div id=\"error-message\" class=\"hidden bg-red-100 border-r-4 border-red-500 text-red-700 p-3 rounded-md mb-4 text-right dark:bg-red-900 dark:border-red-600 dark:text-red-300\" role=\"alert\">\n <p class=\"font-semibold\">\u062e\u0637\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc<\/p>\n <p id=\"error-text\" class=\"text-sm\"><\/p>\n <\/div>\n\n \n <button onclick=\"calculateBmi()\" class=\"w-full bg-dark-pink text-white py-3 rounded-xl font-bold text-lg shadow-lg hover:bg-opacity-90 transition duration-300 transform hover:scale-[1.01] active:scale-[0.99]\">\n \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0646\n <\/button>\n\n \n <div id=\"bmi-result-section\" class=\"mt-8 pt-4 border-t border-dark-pink\/30 hidden dark:border-gray-600\">\n \n \n <div class=\"text-center mb-4 p-3 bg-soft-gray rounded-lg shadow-inner dark:bg-gray-600\">\n <p class=\"text-lg text-text-dark dark:text-gray-300\">BMI \u0634\u0645\u0627:<\/p>\n <p id=\"bmi-value\" class=\"text-5xl font-extrabold mt-1\">—<\/p>\n <\/div>\n \n \n <h4 class=\"text-xl font-bold text-center mb-3 dark:text-gray-200\">\u0648\u0636\u0639\u06cc\u062a \u0628\u062f\u0646\u06cc: <span id=\"category-span\">—<\/span><\/h4>\n \n \n <div class=\"bg-dark-pink\/10 border border-dark-pink\/20 p-4 rounded-xl text-right dark:bg-light-pink\/10 dark:border-light-pink\/20\">\n <p class=\"font-medium text-dark-pink mb-2 dark:text-light-pink\">\u062a\u062d\u0644\u06cc\u0644 \u062f\u0642\u06cc\u0642:<\/p>\n <p id=\"description-text\" class=\"text-gray-700 leading-relaxed text-sm dark:text-gray-300\">\n \u0648\u0632\u0646 \u0648 \u0642\u062f \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0648\u0636\u0639\u06cc\u062a \u0628\u062f\u0646\u06cc \u0634\u0645\u0627 \u0645\u0634\u062e\u0635 \u0634\u0648\u062f.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-light-pink p-5 rounded-2xl shadow-inner border border-dark-pink\/30 dark:bg-gray-700 dark:border-gray-600\">\n <h3 class=\"text-2xl font-bold text-dark-pink text-center mb-4 dark:text-light-pink\">\u0628\u0627\u0632\u06cc \u0645\u0627\u0631 (Snake)<\/h3>\n\n \n <div class=\"w-full flex flex-col items-center\">\n \n \n <div class=\"w-full flex justify-end items-center mb-3\">\n <div class=\"text-lg font-mono p-2 bg-text-dark\/80 text-white rounded-lg\">\n \u0627\u0645\u062a\u06cc\u0627\u0632: <span id=\"score\" class=\"font-extrabold text-snake-color\">0<\/span>\n <\/div>\n <\/div>\n\n \n <canvas id=\"snakeCanvas\" width=\"300\" height=\"300\"><\/canvas>\n\n \n <div id=\"game-message\" class=\"mt-4 p-3 w-full text-center text-sm font-semibold rounded-lg border bg-dark-pink\/10 text-dark-pink border-dark-pink dark:bg-light-pink\/10 dark:text-light-pink dark:border-light-pink\">\n \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u062d\u0631\u06a9\u062a\u060c \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a \u06cc\u0627 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f!\n <\/div>\n\n \n <div class=\"mt-6 w-full flex flex-col items-center\">\n <button id=\"resetButton\" onclick=\"resetGame()\" class=\"game-button w-full bg-bmi-danger text-white py-3 rounded-xl font-bold text-lg hover:bg-red-700 mb-4 hidden\">\n \u0634\u0631\u0648\u0639 \u0645\u062c\u062f\u062f\n <\/button>\n <div class=\"grid grid-cols-3 gap-2 w-48\">\n <div><\/div>\n <button onclick=\"changeDirection('up')\" class=\"game-button bg-text-dark text-white p-3 rounded-xl dark:bg-dark-soft-gray\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 mx-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19V5M5 12l7 -7 7 7\"\/><\/svg><\/button>\n <div><\/div>\n <button onclick=\"changeDirection('left')\" class=\"game-button bg-text-dark text-white p-3 rounded-xl dark:bg-dark-soft-gray\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 mx-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l-7 7 7 7\"\/><\/svg><\/button>\n <button onclick=\"togglePause()\" id=\"pauseButton\" class=\"game-button bg-dark-pink text-white p-3 rounded-xl text-sm font-bold dark:bg-light-pink dark:text-dark-bg\">\u0645\u06a9\u062b<\/button>\n <button onclick=\"changeDirection('right')\" class=\"game-button bg-text-dark text-white p-3 rounded-xl dark:bg-dark-soft-gray\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 mx-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l7 7 7 7\"\/><\/svg><\/button>\n <div><\/div>\n <button onclick=\"changeDirection('down')\" class=\"game-button bg-text-dark text-white p-3 rounded-xl dark:bg-dark-soft-gray\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-6 h-6 mx-auto\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12l7 7 7 -7\"\/><\/svg><\/button>\n <div><\/div>\n <\/div>\n <p class=\"text-xs text-gray-500 mt-4 dark:text-gray-400\">\u0627\u0632 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a \u062f\u0631 \u06a9\u06cc\u0628\u0648\u0631\u062f \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <\/div>\n <\/section>\n\n \n <section id=\"contact\" class=\"bg-white p-6 md:p-10 rounded-3xl shadow-lg transition-all duration-300 hover:shadow-xl dark:bg-gray-800 dark:text-gray-200\">\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark-pink mb-6\">\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0646<\/h2>\n <p class=\"text-lg mb-4 text-center\">\n \u062e\u0648\u0634\u062d\u0627\u0644 \u0645\u06cc\u200c\u0634\u0645 \u0628\u0627 \u0645\u0646 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f.\n <\/p>\n <div class=\"flex flex-col items-center gap-4\">\n \n <a href=\"mailto:kiana.ablnws@gmail.com\" class=\"w-full max-w-sm text-center bg-dark-pink text-white py-3 rounded-xl font-bold text-lg hover:bg-opacity-90 transition-colors duration-200\">\n \u0627\u0631\u0633\u0627\u0644 \u0627\u06cc\u0645\u06cc\u0644\n <\/a>\n <a href=\"https:\/\/www.linkedin.com\/in\/kiana-abolfazlian-466882380\" class=\"w-full max-w-sm text-center bg-gray-200 text-text-dark py-3 rounded-xl font-bold text-lg hover:bg-gray-300 transition-colors duration-200 dark:bg-dark-card dark:text-white dark:hover:bg-gray-600\">\n \u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646\n <\/a>\n <\/div>\n <\/section>\n\n <\/div>\n\n \n <script>\n \n \/* =======================================================\n Dark Mode Toggle Logic\n =======================================================\n *\/\n const body = document.body;\n const moonIcon = document.getElementById('moonIcon');\n const sunIcon = document.getElementById('sunIcon');\n\n function updateIcon(isDark) {\n if (isDark) {\n moonIcon.classList.add('hidden');\n sunIcon.classList.remove('hidden');\n } else {\n moonIcon.classList.remove('hidden');\n sunIcon.classList.add('hidden');\n }\n }\n\n window.toggleDarkMode = function () {\n body.classList.toggle('dark');\n const isDark = body.classList.contains('dark');\n localStorage.setItem('theme', isDark ? 'dark' : 'light');\n updateIcon(isDark);\n };\n\n \/\/ Check local storage and system preference on load\n (function initializeTheme() {\n const savedTheme = localStorage.getItem('theme');\n \/\/ Check system preference only if no explicit saved theme is found\n const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; \n\n if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {\n body.classList.add('dark');\n updateIcon(true);\n } else {\n body.classList.remove('dark');\n updateIcon(false);\n }\n })();\n\n \/* =======================================================\n BMI Calculator Logic (\u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 BMI)\n =======================================================\n *\/\n\n const BMI_RANGES = [\n { max: 18.5, category: \"\u06a9\u0645\u0628\u0648\u062f \u0648\u0632\u0646\", color: 'bmi-warn', icon: '\u26a0\ufe0f', \n desc: \"\u0648\u0632\u0646 \u0634\u0645\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0646\u0633\u0628\u062a \u0628\u0647 \u0642\u062f\u062a\u0627\u0646 \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0627\u0634\u062f. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0627 \u06cc\u06a9 \u0645\u062a\u062e\u0635\u0635 \u062a\u063a\u0630\u06cc\u0647 \u06cc\u0627 \u067e\u0632\u0634\u06a9 \u0645\u0634\u0648\u0631\u062a \u06a9\u0646\u06cc\u062f.\" },\n { max: 25.0, category: \"\u0648\u0632\u0646 \u0646\u0631\u0645\u0627\u0644\", color: 'bmi-normal', icon: '\u2705', \n desc: \"\u062a\u0628\u0631\u06cc\u06a9! \u0648\u0632\u0646 \u0634\u0645\u0627 \u062f\u0631 \u0645\u062d\u062f\u0648\u062f\u0647 \u0633\u0627\u0644\u0645 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f. \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0645\u062a\u0639\u0627\u062f\u0644 \u0648 \u0648\u0631\u0632\u0634 \u0645\u0646\u0638\u0645 \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u062f.\" },\n { max: 30.0, category: \"\u0627\u0636\u0627\u0641\u0647 \u0648\u0632\u0646\", color: 'bmi-warn', icon: '\u2757\ufe0f', \n desc: \"\u0627\u06cc\u0646 \u0648\u0636\u0639\u06cc\u062a \u0646\u0634\u0627\u0646\u200c\u062f\u0647\u0646\u062f\u0647 \u062f\u0631\u0635\u062f \u0686\u0631\u0628\u06cc \u0628\u062f\u0646\u06cc \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0632 \u062d\u062f \u0633\u0627\u0644\u0645 \u0627\u0633\u062a. \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0627 \u0631\u0698\u06cc\u0645 \u063a\u0630\u0627\u06cc\u06cc \u0648 \u0641\u0639\u0627\u0644\u06cc\u062a \u0628\u062f\u0646\u06cc\u060c \u06a9\u0645\u06cc \u0648\u0632\u0646 \u06a9\u0645 \u06a9\u0646\u06cc\u062f.\" },\n { max: Infinity, category: \"\u0686\u0627\u0642\u06cc\", color: 'bmi-danger', icon: '\u274c', \n desc: \"\u0627\u06cc\u0646 \u0633\u0637\u062d \u0627\u0632 \u0648\u0632\u0646 \u0627\u0636\u0627\u0641\u06cc\u060c \u062e\u0637\u0631\u0627\u062a \u0633\u0644\u0627\u0645\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f. \u0634\u062f\u06cc\u062f\u0627\u064b \u062a\u0648\u0635\u06cc\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0645\u0634\u0627\u0648\u0631\u0647 \u067e\u0632\u0634\u06a9\u06cc \u0648 \u062a\u063a\u0630\u06cc\u0647\u200c\u0627\u06cc \u0628\u0627\u0634\u06cc\u062f.\" },\n ];\n\n function displayError(message) {\n const errorBox = document.getElementById('error-message');\n const errorText = document.getElementById('error-text');\n \n if (message) {\n errorText.textContent = message;\n errorBox.classList.remove('hidden');\n document.getElementById('bmi-result-section').classList.add('hidden'); \n } else {\n errorBox.classList.add('hidden');\n }\n }\n\n function calculateBmi() {\n displayError(''); \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u062e\u0637\u0627\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc\n\n const weightInput = document.getElementById('weight');\n const heightInput = document.getElementById('height');\n \n const weight_kg = parseFloat(weightInput.value);\n const height_cm = parseFloat(heightInput.value);\n\n \/\/ 1. \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc\n if (isNaN(weight_kg) || isNaN(height_cm) || weight_kg <= 0 || height_cm <= 0) {\n displayError(\"\u0644\u0637\u0641\u0627 \u0627\u0639\u062f\u0627\u062f \u0645\u062b\u0628\u062a \u0648 \u0645\u0639\u062a\u0628\u0631 \u0628\u0631\u0627\u06cc \u0648\u0632\u0646 \u0648 \u0642\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.\");\n return;\n }\n\n try {\n \/\/ 2. \u0645\u062d\u0627\u0633\u0628\u0647\n const height_m = height_cm \/ 100.0;\n const bmi = weight_kg \/ (height_m ** 2);\n const roundedBmi = bmi.toFixed(2);\n\n \/\/ 3. \u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc\n let result = null;\n for (const range of BMI_RANGES) {\n if (bmi < range.max) {\n result = range;\n break;\n }\n }\n\n \/\/ 4. \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc\n const resultSection = document.getElementById('bmi-result-section');\n const bmiValueElement = document.getElementById('bmi-value');\n const categorySpan = document.getElementById('category-span');\n const descriptionText = document.getElementById('description-text');\n \n \/\/ \u067e\u0627\u06a9 \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u06cc \u0631\u0646\u06af\u06cc \u062f\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0642\u0628\u0644\u06cc\n categorySpan.className = '';\n bmiValueElement.className = 'text-5xl font-extrabold mt-1'; \n \n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\n bmiValueElement.textContent = roundedBmi;\n categorySpan.textContent = `${result.icon} ${result.category}`;\n descriptionText.textContent = result.desc;\n \n \/\/ \u0627\u0639\u0645\u0627\u0644 \u0631\u0646\u06af\u200c\u0647\u0627\u06cc Tailwind \u0628\u0631 \u0627\u0633\u0627\u0633 \u0637\u0628\u0642\u0647\u200c\u0628\u0646\u062f\u06cc\n categorySpan.classList.add('text-' + result.color);\n bmiValueElement.classList.add('text-' + result.color);\n \n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0628\u062e\u0634 \u0646\u062a\u0627\u06cc\u062c\n resultSection.classList.remove('hidden');\n\n } catch (e) {\n console.error(\"Calculation failed:\", e);\n displayError(\"\u06cc\u06a9 \u062e\u0637\u0627\u06cc \u063a\u06cc\u0631\u0645\u0646\u062a\u0638\u0631\u0647 \u062f\u0631 \u0645\u062d\u0627\u0633\u0628\u0647 BMI \u0631\u062e \u062f\u0627\u062f.\");\n }\n }\n\n \/* =======================================================\n Snake Game Logic (\u0628\u0627\u0632\u06cc \u0645\u0627\u0631)\n =======================================================\n *\/\n\n const canvas = document.getElementById('snakeCanvas');\n const ctx = canvas.getContext('2d');\n const scoreElement = document.getElementById('score');\n const messageElement = document.getElementById('game-message');\n const resetButton = document.getElementById('resetButton');\n const pauseButton = document.getElementById('pauseButton');\n\n \/\/ --- Game Constants ---\n const TILE_COUNT = 15; \/\/ Grid size (smaller for better fit)\n let TILE_SIZE; \n const GAME_SPEED = 120; \/\/ Time in milliseconds between game ticks\n\n \/\/ --- Game State Variables ---\n let snake = [];\n let food = {};\n let dx = 0; \n let dy = 0; \n let score = 0;\n let isRunning = false;\n let isPaused = false;\n let nextDirection = { dx: 1, dy: 0 }; \n let lastUpdateTime = 0;\n \n \/**\n * Initializes canvas size and game state.\n *\/\n function initializeSnakeGame() {\n \/\/ Set canvas size based on its container (e.g., 90% of max 300px)\n const container = document.querySelector('#snakeCanvas').parentElement;\n const size = Math.min(container.clientWidth - 10, 300); \/\/ 300 max width\n canvas.width = size;\n canvas.height = size;\n \n TILE_SIZE = canvas.width \/ TILE_COUNT;\n \n \/\/ Initial snake position (start in the middle-left)\n snake = [\n { x: 5, y: Math.floor(TILE_COUNT \/ 2) },\n { x: 4, y: Math.floor(TILE_COUNT \/ 2) },\n { x: 3, y: Math.floor(TILE_COUNT \/ 2) }\n ];\n dx = 1; \/\/ Start moving right\n dy = 0;\n score = 0;\n isRunning = false; \/\/ Starts paused until user input\n isPaused = false;\n nextDirection = { dx: 1, dy: 0 };\n scoreElement.textContent = score;\n resetButton.classList.add('hidden');\n pauseButton.classList.remove('hidden');\n pauseButton.textContent = \"\u0645\u06a9\u062b\";\n \n spawnFood();\n updateSnakeMessage(\"\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u062d\u0631\u06a9\u062a\u060c \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u062c\u0647\u062a \u06cc\u0627 \u06a9\u0646\u062a\u0631\u0644\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f!\", '#e1a6b2');\n draw();\n }\n\n \/**\n * Spawns food at a random unoccupied grid location.\n *\/\n function spawnFood() {\n let newFood;\n let occupied;\n\n do {\n newFood = {\n x: Math.floor(Math.random() * TILE_COUNT),\n y: Math.floor(Math.random() * TILE_COUNT)\n };\n occupied = snake.some(segment => segment.x === newFood.x && segment.y === newFood.y);\n } while (occupied);\n\n food = newFood;\n }\n\n \/**\n * Draws the game elements (board, snake, food).\n *\/\n function draw() {\n \/\/ 1. Draw Board (clears the canvas)\n ctx.fillStyle = tailwind.config.theme.extend.colors['snake-bg']; \n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n \/\/ 2. Draw Food\n ctx.fillStyle = tailwind.config.theme.extend.colors['bmi-danger'];\n ctx.shadowColor = 'red';\n ctx.shadowBlur = 10;\n ctx.fillRect(food.x * TILE_SIZE, food.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n ctx.shadowBlur = 0; \n\n \/\/ 3. Draw Snake\n snake.forEach((segment, index) => {\n if (index === 0) {\n ctx.fillStyle = '#10b981'; \/\/ Brighter green for head (snake-color)\n ctx.strokeStyle = '#a7f3d0'; \n } else {\n ctx.fillStyle = '#059669'; \/\/ Darker green for body\n ctx.strokeStyle = '#34d399';\n }\n \n ctx.fillRect(segment.x * TILE_SIZE, segment.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n ctx.strokeRect(segment.x * TILE_SIZE, segment.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);\n });\n }\n\n \/**\n * Updates the position and checks for collisions.\n *\/\n function update() {\n if (!isRunning || isPaused) return;\n\n \/\/ Update direction only if it doesn't immediately reverse the snake\n if (nextDirection.dx !== -dx || nextDirection.dy !== -dy) {\n dx = nextDirection.dx;\n dy = nextDirection.dy;\n }\n\n \/\/ Create new head position\n const head = { x: snake[0].x + dx, y: snake[0].y + dy };\n\n \/\/ 1. Check for Wall Collision\n if (head.x < 0 || head.x >= TILE_COUNT || head.y < 0 || head.y >= TILE_COUNT) {\n gameOver(\"\u0628\u0631\u062e\u0648\u0631\u062f \u0628\u0627 \u062f\u06cc\u0648\u0627\u0631!\");\n return;\n }\n\n \/\/ 2. Check for Self Collision\n if (snake.some((segment, index) => index !== 0 && segment.x === head.x && segment.y === head.y)) {\n gameOver(\"\u062e\u0648\u062f\u062e\u0648\u0631\u06cc!\");\n return;\n }\n\n \/\/ Add new head to the front\n snake.unshift(head);\n\n \/\/ 3. Check for Food Collision\n if (head.x === food.x && head.y === food.y) {\n score++;\n scoreElement.textContent = score;\n spawnFood();\n } else {\n \/\/ Remove the tail\n snake.pop();\n }\n }\n\n \/**\n * The main game loop function.\n *\/\n function gameLoop(timestamp) {\n if (!isRunning && !isPaused) {\n draw();\n requestAnimationFrame(gameLoop);\n return;\n }\n if (!isRunning && score > 0 && !isPaused) return; \/\/ Stop loop if game over\n\n const elapsed = timestamp - lastUpdateTime;\n\n if (elapsed > GAME_SPEED && !isPaused) {\n lastUpdateTime = timestamp;\n update();\n }\n\n draw();\n requestAnimationFrame(gameLoop);\n }\n\n \/**\n * Handles the Game Over state.\n * @param {string} reason - The reason for game over.\n *\/\n function gameOver(reason) {\n isRunning = false;\n updateSnakeMessage(`\u0628\u0627\u0632\u06cc \u062a\u0645\u0627\u0645 \u0634\u062f! \u0627\u0645\u062a\u06cc\u0627\u0632 \u0646\u0647\u0627\u06cc\u06cc: ${score}. \u062f\u0644\u06cc\u0644: ${reason}`, '#dc2626');\n resetButton.classList.remove('hidden');\n pauseButton.classList.add('hidden');\n }\n \n \/**\n * Updates the instruction\/status message area.\n * @param {string} text - The message text.\n * @param {string} color - Hex color code.\n *\/\n function updateSnakeMessage(text, color) {\n messageElement.textContent = text;\n messageElement.style.backgroundColor = color + '20'; \/\/ 20% opacity\n messageElement.style.borderColor = color;\n messageElement.style.color = color;\n }\n\n\n \/**\n * Resets and starts a new game.\n *\/\n window.resetGame = function () {\n pauseButton.classList.remove('hidden');\n initializeSnakeGame();\n isRunning = true; \/\/ Start running immediately upon reset\n lastUpdateTime = performance.now(); \n requestAnimationFrame(gameLoop);\n }\n\n \/**\n * Toggles the paused state.\n *\/\n window.togglePause = function () {\n if (!isRunning && score > 0) return; \/\/ Prevent pause if game is over\n \n if (!isRunning) {\n \/\/ Start the game on first pause button click if not started\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n lastUpdateTime = performance.now();\n requestAnimationFrame(gameLoop);\n return;\n }\n \n isPaused = !isPaused;\n if (isPaused) {\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u0645\u062a\u0648\u0642\u0641 \u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u062f\u0627\u0645\u0647 \u062f\u0648\u0628\u0627\u0631\u0647 \u0645\u06a9\u062b \u0631\u0627 \u0628\u0632\u0646\u06cc\u062f.\", '#f59e0b');\n pauseButton.textContent = \"\u0627\u062f\u0627\u0645\u0647\";\n } else {\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a!\", '#10b981');\n pauseButton.textContent = \"\u0645\u06a9\u062b\";\n lastUpdateTime = performance.now(); \n requestAnimationFrame(gameLoop);\n }\n }\n\n \/**\n * Public function to change snake direction (used by on-screen buttons).\n * @param {string} direction - 'up', 'down', 'left', or 'right'.\n *\/\n window.changeDirection = function (direction) {\n if (!isRunning) {\n \/\/ If game is not running (first move), start it\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n lastUpdateTime = performance.now(); \n requestAnimationFrame(gameLoop);\n }\n if (isPaused) return;\n\n \/\/ Prevent immediate reverse direction\n switch (direction) {\n case 'up':\n if (dy === 0) nextDirection = { dx: 0, dy: -1 };\n break;\n case 'down':\n if (dy === 0) nextDirection = { dx: 0, dy: 1 };\n break;\n case 'left':\n if (dx === 0) nextDirection = { dx: -1, dy: 0 };\n break;\n case 'right':\n if (dx === 0) nextDirection = { dx: 1, dy: 0 };\n break;\n }\n }\n \n \/**\n * Keyboard event listener for changing direction\n *\/\n document.addEventListener('keydown', (e) => {\n const key = e.key;\n if (!isRunning) {\n \/\/ If game is not running (first move), start it when an arrow key is pressed\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {\n isRunning = true;\n updateSnakeMessage(\"\u0628\u0627\u0632\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627\u0633\u062a! \u0627\u0632 \u062d\u0631\u06a9\u062a \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f.\", '#10b981');\n lastUpdateTime = performance.now();\n requestAnimationFrame(gameLoop);\n }\n }\n if (isPaused) return;\n\n \/\/ Prevent immediate reverse direction\n switch (key) {\n case 'ArrowUp':\n if (dy === 0) nextDirection = { dx: 0, dy: -1 };\n break;\n case 'ArrowDown':\n if (dy === 0) nextDirection = { dx: 0, dy: 1 };\n break;\n case 'ArrowLeft':\n if (dx === 0) nextDirection = { dx: -1, dy: 0 };\n break;\n case 'ArrowRight':\n if (dx === 0) nextDirection = { dx: 1, dy: 0 };\n break;\n }\n });\n \n \/\/ Final initialization call\n document.addEventListener('DOMContentLoaded', () => {\n initializeSnakeGame();\n window.requestAnimationFrame(gameLoop); \n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u067e\u0648\u0631\u062a\u0641\u0648\u0644\u06cc\u0648 \u06a9\u06cc\u0627\u0646\u0627 | \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f \u06a9\u06cc\u0627\u0646\u0627 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646 \u0628\u0647 \u0632\u0648\u062f\u06cc \u0622\u067e\u062f\u06cc\u062a \u0645\u06cc\u0634\u0647! \u0645\u0647\u0627\u0631\u062a\u200c\u0647\u0627 \u067e\u0627\u06cc\u062a\u0648\u0646 \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a HTML\/CSS C# (.NET) \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 (MySQL) \u0641\u062a\u0648\u0634\u0627\u067e \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u0627\u0634\u06cc\u0646 \u062d\u0633\u0627\u0628 BMI \u0648\u0632\u0646 (\u06a9\u06cc\u0644\u0648\u06af\u0631\u0645) \u0642\u062f (\u0633\u0627\u0646\u062a\u06cc\u200c\u0645\u062a\u0631) \u062e\u0637\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0646 BMI \u0634\u0645\u0627: — \u0648\u0636\u0639\u06cc\u062a \u0628\u062f\u0646\u06cc: — \u062a\u062d\u0644\u06cc\u0644 \u062f\u0642\u06cc\u0642: \u0648\u0632\u0646 \u0648 \u0642\u062f \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0648\u0636\u0639\u06cc\u062a \u0628\u062f\u0646\u06cc \u0634\u0645\u0627 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":9,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/62"}],"wp:attachment":[{"href":"https:\/\/kianaabln.ir\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}