\u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API – API Key Generator<\/title>\n <meta name=\"description\" content=\"\u0623\u062f\u0627\u0629 \u0645\u0633\u0627\u0639\u062f\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API \u0645\u0646 \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u062a\u0648\u064a\u062a\u0631\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645 \u0648\u0648\u0627\u062a\u0633\u0627\u0628\">\n <meta name=\"keywords\" content=\"API keys, \u0645\u0641\u0627\u062a\u064a\u062d API, \u0641\u064a\u0633\u0628\u0648\u0643, \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645, \u062a\u064a\u0643 \u062a\u0648\u0643, \u062a\u0648\u0643\u0646\">\n <meta name=\"author\" content=\"API Key Generator\">\n \n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebApplication\",\n \"name\": \"\u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API\",\n \"description\": \"\u0623\u062f\u0627\u0629 \u0645\u0633\u0627\u0639\u062f\u0629 \u062a\u0631\u0634\u062f\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API \u0645\u0646 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a\",\n \"applicationCategory\": \"DeveloperApplication\"\n }\n <\/script>\n \n <style>\n :root {\n --primary: #3b82f6;\n --primary-dark: #1e40af;\n --success: #10b981;\n --warning: #f59e0b;\n --danger: #ef4444;\n --dark: #1f2937;\n --light: #f9fafb;\n --border: #e5e7eb;\n --radius: 12px;\n --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n direction: rtl;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n\n .header {\n background: white;\n border-radius: var(--radius);\n padding: 2rem;\n text-align: center;\n margin-bottom: 2rem;\n box-shadow: var(--shadow);\n }\n\n .header h1 {\n color: var(--dark);\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n color: #6b7280;\n font-size: 1.1rem;\n }\n\n .platforms-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .platform-card {\n background: white;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .platform-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n }\n\n .platform-header {\n padding: 1.5rem;\n display: flex;\n align-items: center;\n gap: 1rem;\n border-bottom: 1px solid var(--border);\n }\n\n .platform-icon {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: bold;\n font-size: 1.5rem;\n }\n\n .platform-info h3 {\n font-size: 1.4rem;\n margin-bottom: 0.25rem;\n }\n\n .platform-info p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n .platform-steps {\n padding: 1.5rem;\n }\n\n .step {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n margin-bottom: 1.5rem;\n padding: 1rem;\n background: var(--light);\n border-radius: 8px;\n border-right: 4px solid var(--primary);\n }\n\n .step-number {\n background: var(--primary);\n color: white;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n flex-shrink: 0;\n }\n\n .step-content h4 {\n margin-bottom: 0.5rem;\n color: var(--dark);\n }\n\n .step-content p {\n color: #6b7280;\n line-height: 1.6;\n margin-bottom: 0.5rem;\n }\n\n .step-link {\n display: inline-block;\n background: var(--primary);\n color: white;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n text-decoration: none;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n transition: background 0.3s ease;\n }\n\n .step-link:hover {\n background: var(--primary-dark);\n }\n\n .api-keys-form {\n background: white;\n border-radius: var(--radius);\n padding: 2rem;\n box-shadow: var(--shadow);\n margin-bottom: 2rem;\n }\n\n .form-title {\n font-size: 1.5rem;\n margin-bottom: 1.5rem;\n color: var(--dark);\n text-align: center;\n }\n\n .keys-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-bottom: 1.5rem;\n }\n\n .form-group {\n margin-bottom: 1rem;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 600;\n color: var(--dark);\n }\n\n .form-group input {\n width: 100%;\n padding: 0.75rem;\n border: 2px solid var(--border);\n border-radius: 8px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n }\n\n .form-group input:focus {\n outline: none;\n border-color: var(--primary);\n }\n\n .save-btn {\n background: var(--success);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 8px;\n font-size: 1.1rem;\n cursor: pointer;\n width: 100%;\n transition: background 0.3s ease;\n }\n\n .save-btn:hover {\n background: #059669;\n }\n\n .saved-keys {\n background: white;\n border-radius: var(--radius);\n padding: 2rem;\n box-shadow: var(--shadow);\n }\n\n .keys-list {\n display: grid;\n gap: 1rem;\n }\n\n .key-item {\n padding: 1rem;\n background: var(--light);\n border-radius: 8px;\n border-right: 4px solid var(--success);\n }\n\n .key-platform {\n font-weight: bold;\n color: var(--dark);\n margin-bottom: 0.5rem;\n }\n\n .key-value {\n font-family: monospace;\n background: var(--dark);\n color: white;\n padding: 0.5rem;\n border-radius: 4px;\n word-break: break-all;\n }\n\n \/* Platform Colors *\/\n .facebook { background: #1877f2; }\n .instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }\n .tiktok { background: #000000; }\n .twitter { background: #1da1f2; }\n .linkedin { background: #0a66c2; }\n .telegram { background: #0088cc; }\n .whatsapp { background: #25d366; }\n\n @media (max-width: 768px) {\n .platforms-grid {\n grid-template-columns: 1fr;\n }\n \n .header h1 {\n font-size: 2rem;\n }\n \n .platform-header {\n flex-direction: column;\n text-align: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <header class=\"header\">\n <h1>\ud83d\udee0\ufe0f \u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API<\/h1>\n <p>\u0623\u062f\u0627\u0629 \u0645\u0633\u0627\u0639\u062f\u0629 \u062a\u0631\u0634\u062f\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API \u0645\u0646 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a<\/p>\n <\/header>\n\n \n <div class=\"platforms-grid\">\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon facebook\">\u0641<\/div>\n <div class=\"platform-info\">\n <h3>\u0641\u064a\u0633\u0628\u0648\u0643<\/h3>\n <p>Facebook Graph API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631<\/h4>\n <p>\u0627\u0630\u0647\u0628 \u0625\u0644\u0649 Facebook for Developers \u0648\u0623\u0646\u0634\u0626 \u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631 \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0644\u062f\u064a\u0643<\/p>\n <a href=\"https:\/\/developers.facebook.com\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0645\u0648\u0642\u0639<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642 \u062c\u062f\u064a\u062f<\/h4>\n <p>\u0623\u0646\u0634\u0626 \u062a\u0637\u0628\u064a\u0642 \u062c\u062f\u064a\u062f \u0648\u0627\u062e\u062a\u0631 \u0627\u0644\u0646\u0648\u0639 \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h4>\n <p>\u0627\u0646\u0633\u062e App ID \u0648 App Secret \u0645\u0646 \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon instagram\">\u0625<\/div>\n <div class=\"platform-info\">\n <h3>\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645<\/h3>\n <p>Instagram Graph API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u062d\u0633\u0627\u0628 \u0644\u0644\u0623\u0639\u0645\u0627\u0644<\/h4>\n <p>\u062a\u062d\u0648\u064a\u0644 \u062d\u0633\u0627\u0628 \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645 \u0625\u0644\u0649 \u062d\u0633\u0627\u0628 \u0623\u0639\u0645\u0627\u0644 \u0623\u0648 \u0645\u0628\u062f\u0639<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0631\u0628\u0637 \u0628\u062d\u0633\u0627\u0628 \u0641\u064a\u0633\u0628\u0648\u0643<\/h4>\n <p>\u0631\u0628\u0637 \u062d\u0633\u0627\u0628 \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645 \u0628\u0635\u0641\u062d\u0629 \u0641\u064a\u0633\u0628\u0648\u0643 \u0644\u0644\u0623\u0639\u0645\u0627\u0644<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u0643\u0646<\/h4>\n <p>\u0627\u0633\u062a\u062e\u062f\u0645 Facebook Graph API \u0644\u0644\u0648\u0635\u0648\u0644 \u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645<\/p>\n <a href=\"https:\/\/developers.facebook.com\/docs\/instagram-api\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u062f\u0644\u064a\u0644<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon tiktok\">\u062a<\/div>\n <div class=\"platform-info\">\n <h3>\u062a\u064a\u0643 \u062a\u0648\u0643<\/h3>\n <p>TikTok Business API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631<\/h4>\n <p>\u0633\u062c\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0625\u0644\u0649 TikTok for Developers<\/p>\n <a href=\"https:\/\/developers.tiktok.com\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0645\u0648\u0642\u0639<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062a\u0642\u062f\u064a\u0645 \u0644\u0644\u0648\u0635\u0648\u0644<\/h4>\n <p>\u0642\u062f\u0645 \u0637\u0644\u0628 \u0644\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 TikTok Business API<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h4>\n <p>\u0628\u0639\u062f \u0627\u0644\u0645\u0648\u0627\u0641\u0642\u0629\u060c \u0627\u062d\u0635\u0644 \u0639\u0644\u0649 Client Key \u0648 Client Secret<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon twitter\">\u062a<\/div>\n <div class=\"platform-info\">\n <h3>\u062a\u0648\u064a\u062a\u0631 (X)<\/h3>\n <p>Twitter API v2<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062a\u0642\u062f\u064a\u0645 \u0644\u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631<\/h4>\n <p>\u0642\u062f\u0645 \u0637\u0644\u0628 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631 \u0641\u064a Twitter<\/p>\n <a href=\"https:\/\/developer.twitter.com\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0645\u0648\u0642\u0639<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642<\/h4>\n <p>\u0623\u0646\u0634\u0626 \u062a\u0637\u0628\u064a\u0642 \u062c\u062f\u064a\u062f \u0641\u064a \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h4>\n <p>\u0627\u0646\u0633\u062e API Key \u0648 API Secret Key \u0648 Access Tokens<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon linkedin\">\u0644<\/div>\n <div class=\"platform-info\">\n <h3>\u0644\u064a\u0646\u0643\u062f\u0625\u0646<\/h3>\n <p>LinkedIn Marketing API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642<\/h4>\n <p>\u0627\u0630\u0647\u0628 \u0625\u0644\u0649 LinkedIn Developers \u0648\u0623\u0646\u0634\u0626 \u062a\u0637\u0628\u064a\u0642 \u062c\u062f\u064a\u062f<\/p>\n <a href=\"https:\/\/www.linkedin.com\/developers\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0645\u0648\u0642\u0639<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u062a\u0643\u0648\u064a\u0646 OAuth<\/h4>\n <p>\u0627\u0636\u063a\u0637 \u0625\u0639\u062f\u0627\u062f\u0627\u062a OAuth 2.0 \u0648\u0623\u0636\u0641 redirect URLs<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h4>\n <p>\u0627\u0646\u0633\u062e Client ID \u0648 Client Secret \u0645\u0646 \u0635\u0641\u062d\u0629 \u0627\u0644\u062a\u0648\u062b\u064a\u0642<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon telegram\">\u062a<\/div>\n <div class=\"platform-info\">\n <h3>\u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645<\/h3>\n <p>Telegram Bot API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062a\u062d\u062f\u062b \u0625\u0644\u0649 BotFather<\/h4>\n <p>\u0627\u0628\u062d\u062b \u0639\u0646 @BotFather \u0641\u064a \u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645 \u0648\u0627\u0628\u062f\u0623 \u0645\u062d\u0627\u062f\u062b\u0629<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u0628\u0648\u062a \u062c\u062f\u064a\u062f<\/h4>\n <p>\u0623\u0631\u0633\u0644 \u0627\u0644\u0623\u0645\u0631 \/newbot \u0648\u0627\u062a\u0628\u0639 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u0627\u062a<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u0643\u0646<\/h4>\n <p>\u0627\u0646\u0633\u062e token \u0627\u0644\u0628\u0648\u062a \u0627\u0644\u0630\u064a \u0633\u062a\u062d\u0635\u0644 \u0639\u0644\u064a\u0647 \u0645\u0646 BotFather<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon whatsapp\">\u0648<\/div>\n <div class=\"platform-info\">\n <h3>\u0648\u0627\u062a\u0633\u0627\u0628<\/h3>\n <p>WhatsApp Business API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 \u0623\u0639\u0645\u0627\u0644<\/h4>\n <p>\u062d\u0645\u0651\u0644 WhatsApp Business \u0648\u0623\u0646\u0634\u0626 \u062d\u0633\u0627\u0628 \u0623\u0639\u0645\u0627\u0644<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062a\u0633\u062c\u064a\u0644 \u0641\u064a Cloud API<\/h4>\n <p>\u0633\u062c\u0644 \u0641\u064a Facebook Business Suite \u0644\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 WhatsApp API<\/p>\n <a href=\"https:\/\/developers.facebook.com\/docs\/whatsapp\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u062f\u0644\u064a\u0644<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u0643\u0646<\/h4>\n <p>\u0627\u0646\u0633\u062e Permanent Access Token \u0645\u0646 \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"api-keys-form\">\n <h2 class=\"form-title\">\ud83d\udcbe \u062d\u0641\u0638 \u0645\u0641\u0627\u062a\u064a\u062d API \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643<\/h2>\n <form id=\"apiKeysForm\">\n <div class=\"keys-grid\">\n <div class=\"form-group\">\n <label for=\"facebook-app-id\">\u0641\u064a\u0633\u0628\u0648\u0643 App ID<\/label>\n <input type=\"text\" id=\"facebook-app-id\" placeholder=\"123456789012345\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"facebook-app-secret\">\u0641\u064a\u0633\u0628\u0648\u0643 App Secret<\/label>\n <input type=\"password\" id=\"facebook-app-secret\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"twitter-api-key\">\u062a\u0648\u064a\u062a\u0631 API Key<\/label>\n <input type=\"text\" id=\"twitter-api-key\" placeholder=\"ABC123def456...\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"twitter-api-secret\">\u062a\u0648\u064a\u062a\u0631 API Secret<\/label>\n <input type=\"password\" id=\"twitter-api-secret\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"instagram-access-token\">\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645 Access Token<\/label>\n <input type=\"password\" id=\"instagram-access-token\" placeholder=\"IG\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"tiktok-client-key\">\u062a\u064a\u0643 \u062a\u0648\u0643 Client Key<\/label>\n <input type=\"text\" id=\"tiktok-client-key\" placeholder=\"aw1234567890\u2022\u2022\u2022\u2022\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"telegram-bot-token\">\u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645 Bot Token<\/label>\n <input type=\"password\" id=\"telegram-bot-token\" placeholder=\"1234567890:ABCdefGHIjkl...\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"whatsapp-access-token\">\u0648\u0627\u062a\u0633\u0627\u0628 Access Token<\/label>\n <input type=\"password\" id=\"whatsapp-access-token\" placeholder=\"EAAG\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <\/div>\n <button type=\"submit\" class=\"save-btn\">\ud83d\udcbe \u062d\u0641\u0638 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/button>\n <\/form>\n <\/div>\n\n \n <div class=\"saved-keys\">\n <h2 class=\"form-title\">\ud83d\udd11 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629<\/h2>\n <div class=\"keys-list\" id=\"savedKeysList\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u0625\u062f\u0627\u0631\u0629 \u0645\u0641\u0627\u062a\u064a\u062d API\n class APIKeysManager {\n constructor() {\n this.keys = this.loadKeys();\n this.init();\n }\n\n init() {\n \/\/ \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629\n this.displaySavedKeys();\n \n \/\/ \u0625\u0639\u062f\u0627\u062f \u0645\u0633\u062a\u0645\u0639 \u0627\u0644\u0646\u0645\u0648\u0630\u062c\n document.getElementById('apiKeysForm').addEventListener('submit', (e) => {\n e.preventDefault();\n this.saveKeys();\n });\n }\n\n loadKeys() {\n const saved = localStorage.getItem('api_keys');\n return saved ? JSON.parse(saved) : {};\n }\n\n saveKeys() {\n \/\/ \u062c\u0645\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0646\u0645\u0648\u0630\u062c\n this.keys = {\n facebook: {\n appId: document.getElementById('facebook-app-id').value,\n appSecret: document.getElementById('facebook-app-secret').value\n },\n twitter: {\n apiKey: document.getElementById('twitter-api-key').value,\n apiSecret: document.getElementById('twitter-api-secret').value\n },\n instagram: {\n accessToken: document.getElementById('instagram-access-token').value\n },\n tiktok: {\n clientKey: document.getElementById('tiktok-client-key').value\n },\n telegram: {\n botToken: document.getElementById('telegram-bot-token').value\n },\n whatsapp: {\n accessToken: document.getElementById('whatsapp-access-token').value\n }\n };\n\n \/\/ \u062d\u0641\u0638 \u0641\u064a localStorage\n localStorage.setItem('api_keys', JSON.stringify(this.keys));\n \n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629\n this.displaySavedKeys();\n \n \/\/ \u0631\u0633\u0627\u0644\u0629 \u0646\u062c\u0627\u062d\n alert('\u2705 \u062a\u0645 \u062d\u0641\u0638 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0628\u0646\u062c\u0627\u062d!');\n }\n\n displaySavedKeys() {\n const container = document.getElementById('savedKeysList');\n container.innerHTML = '';\n\n if (Object.keys(this.keys).length === 0) {\n container.innerHTML = '<p style=\"text-align: center; color: #6b7280;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0641\u0627\u062a\u064a\u062d \u0645\u062d\u0641\u0648\u0638\u0629 \u0628\u0639\u062f<\/p>';\n return;\n }\n\n for (const [platform, keys] of Object.entries(this.keys)) {\n const keyItem = document.createElement('div');\n keyItem.className = 'key-item';\n \n let keyContent = '';\n for (const [keyName, keyValue] of Object.entries(keys)) {\n if (keyValue) {\n keyContent += `\n <div style=\"margin-bottom: 0.5rem;\">\n <strong>${this.getKeyDisplayName(keyName)}:<\/strong>\n <div class=\"key-value\">${this.maskSensitiveKey(keyName, keyValue)}<\/div>\n <\/div>\n `;\n }\n }\n\n if (keyContent) {\n keyItem.innerHTML = `\n <div class=\"key-platform\">${this.getPlatformName(platform)}<\/div>\n ${keyContent}\n `;\n container.appendChild(keyItem);\n }\n }\n }\n\n getPlatformName(platform) {\n const names = {\n facebook: '\u0641\u064a\u0633\u0628\u0648\u0643',\n twitter: '\u062a\u0648\u064a\u062a\u0631',\n instagram: '\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645',\n tiktok: '\u062a\u064a\u0643 \u062a\u0648\u0643',\n telegram: '\u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645',\n whatsapp: '\u0648\u0627\u062a\u0633\u0627\u0628'\n };\n return names[platform] || platform;\n }\n\n getKeyDisplayName(keyName) {\n const names = {\n appId: 'App ID',\n appSecret: 'App Secret',\n apiKey: 'API Key',\n apiSecret: 'API Secret',\n accessToken: 'Access Token',\n clientKey: 'Client Key',\n botToken: 'Bot Token'\n };\n return names[keyName] || keyName;\n }\n\n maskSensitiveKey(keyName, value) {\n \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u062d\u0633\u0627\u0633\u0629\n const sensitiveKeys = ['appSecret', 'apiSecret', 'accessToken', 'botToken'];\n if (sensitiveKeys.includes(keyName) && value) {\n return value.substring(0, 8) + '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' + value.substring(value.length - 8);\n }\n return value;\n }\n\n \/\/ \u062f\u0627\u0644\u0629 \u0644\u0627\u0633\u062a\u0631\u062c\u0627\u0639 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d (\u0644\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0641\u064a \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0623\u062e\u0631\u0649)\n getKeys() {\n return this.keys;\n }\n }\n\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062f\u064a\u0631 \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\n document.addEventListener('DOMContentLoaded', () => {\n window.apiKeysManager = new APIKeysManager();\n });\n\n \/\/ \u062f\u0627\u0644\u0629 \u0644\u0646\u0633\u062e \u0627\u0644\u0646\u0635\n function copyToClipboard(text) {\n navigator.clipboard.writeText(text).then(() => {\n alert('\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0646\u0635!');\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API – API Key Generator \ud83d\udee0\ufe0f \u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API \u0623\u062f\u0627\u0629 \u0645\u0633\u0627\u0639\u062f\u0629 \u062a\u0631\u0634\u062f\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 […]<\/p>\n","protected":false},"author":1,"featured_media":153,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-182","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":3,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/182\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/182\/revisions\/186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/media?parent=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":182,"date":"2025-11-11T22:52:58","date_gmt":"2025-11-11T22:52:58","guid":{"rendered":"https:\/\/iraqi-engineer.org\/?page_id=182"},"modified":"2025-11-11T23:10:15","modified_gmt":"2025-11-11T23:10:15","slug":"1112-2","status":"publish","type":"page","link":"https:\/\/iraqi-engineer.org\/index.php\/1112-2\/","title":{"rendered":"\u0646\u0645\u0648\u0630\u062c \u062a\u062c\u0631\u064a\u0628\u064a"},"content":{"rendered":"\n\n\n\n \n \n \u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API – API Key Generator<\/title>\n <meta name=\"description\" content=\"\u0623\u062f\u0627\u0629 \u0645\u0633\u0627\u0639\u062f\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API \u0645\u0646 \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645\u060c \u062a\u064a\u0643 \u062a\u0648\u0643\u060c \u062a\u0648\u064a\u062a\u0631\u060c \u0644\u064a\u0646\u0643\u062f\u0625\u0646\u060c \u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645 \u0648\u0648\u0627\u062a\u0633\u0627\u0628\">\n <meta name=\"keywords\" content=\"API keys, \u0645\u0641\u0627\u062a\u064a\u062d API, \u0641\u064a\u0633\u0628\u0648\u0643, \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645, \u062a\u064a\u0643 \u062a\u0648\u0643, \u062a\u0648\u0643\u0646\">\n <meta name=\"author\" content=\"API Key Generator\">\n \n \n <script type=\"application\/ld+json\">\n {\n \"@context\": \"https:\/\/schema.org\",\n \"@type\": \"WebApplication\",\n \"name\": \"\u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API\",\n \"description\": \"\u0623\u062f\u0627\u0629 \u0645\u0633\u0627\u0639\u062f\u0629 \u062a\u0631\u0634\u062f\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API \u0645\u0646 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a\",\n \"applicationCategory\": \"DeveloperApplication\"\n }\n <\/script>\n \n <style>\n :root {\n --primary: #3b82f6;\n --primary-dark: #1e40af;\n --success: #10b981;\n --warning: #f59e0b;\n --danger: #ef4444;\n --dark: #1f2937;\n --light: #f9fafb;\n --border: #e5e7eb;\n --radius: 12px;\n --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n direction: rtl;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n\n .header {\n background: white;\n border-radius: var(--radius);\n padding: 2rem;\n text-align: center;\n margin-bottom: 2rem;\n box-shadow: var(--shadow);\n }\n\n .header h1 {\n color: var(--dark);\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n color: #6b7280;\n font-size: 1.1rem;\n }\n\n .platforms-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .platform-card {\n background: white;\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n }\n\n .platform-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n }\n\n .platform-header {\n padding: 1.5rem;\n display: flex;\n align-items: center;\n gap: 1rem;\n border-bottom: 1px solid var(--border);\n }\n\n .platform-icon {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: bold;\n font-size: 1.5rem;\n }\n\n .platform-info h3 {\n font-size: 1.4rem;\n margin-bottom: 0.25rem;\n }\n\n .platform-info p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n .platform-steps {\n padding: 1.5rem;\n }\n\n .step {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n margin-bottom: 1.5rem;\n padding: 1rem;\n background: var(--light);\n border-radius: 8px;\n border-right: 4px solid var(--primary);\n }\n\n .step-number {\n background: var(--primary);\n color: white;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n flex-shrink: 0;\n }\n\n .step-content h4 {\n margin-bottom: 0.5rem;\n color: var(--dark);\n }\n\n .step-content p {\n color: #6b7280;\n line-height: 1.6;\n margin-bottom: 0.5rem;\n }\n\n .step-link {\n display: inline-block;\n background: var(--primary);\n color: white;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n text-decoration: none;\n font-size: 0.9rem;\n margin-top: 0.5rem;\n transition: background 0.3s ease;\n }\n\n .step-link:hover {\n background: var(--primary-dark);\n }\n\n .api-keys-form {\n background: white;\n border-radius: var(--radius);\n padding: 2rem;\n box-shadow: var(--shadow);\n margin-bottom: 2rem;\n }\n\n .form-title {\n font-size: 1.5rem;\n margin-bottom: 1.5rem;\n color: var(--dark);\n text-align: center;\n }\n\n .keys-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-bottom: 1.5rem;\n }\n\n .form-group {\n margin-bottom: 1rem;\n }\n\n .form-group label {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 600;\n color: var(--dark);\n }\n\n .form-group input {\n width: 100%;\n padding: 0.75rem;\n border: 2px solid var(--border);\n border-radius: 8px;\n font-size: 1rem;\n transition: border-color 0.3s ease;\n }\n\n .form-group input:focus {\n outline: none;\n border-color: var(--primary);\n }\n\n .save-btn {\n background: var(--success);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 8px;\n font-size: 1.1rem;\n cursor: pointer;\n width: 100%;\n transition: background 0.3s ease;\n }\n\n .save-btn:hover {\n background: #059669;\n }\n\n .saved-keys {\n background: white;\n border-radius: var(--radius);\n padding: 2rem;\n box-shadow: var(--shadow);\n }\n\n .keys-list {\n display: grid;\n gap: 1rem;\n }\n\n .key-item {\n padding: 1rem;\n background: var(--light);\n border-radius: 8px;\n border-right: 4px solid var(--success);\n }\n\n .key-platform {\n font-weight: bold;\n color: var(--dark);\n margin-bottom: 0.5rem;\n }\n\n .key-value {\n font-family: monospace;\n background: var(--dark);\n color: white;\n padding: 0.5rem;\n border-radius: 4px;\n word-break: break-all;\n }\n\n \/* Platform Colors *\/\n .facebook { background: #1877f2; }\n .instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }\n .tiktok { background: #000000; }\n .twitter { background: #1da1f2; }\n .linkedin { background: #0a66c2; }\n .telegram { background: #0088cc; }\n .whatsapp { background: #25d366; }\n\n @media (max-width: 768px) {\n .platforms-grid {\n grid-template-columns: 1fr;\n }\n \n .header h1 {\n font-size: 2rem;\n }\n \n .platform-header {\n flex-direction: column;\n text-align: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <header class=\"header\">\n <h1>\ud83d\udee0\ufe0f \u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API<\/h1>\n <p>\u0623\u062f\u0627\u0629 \u0645\u0633\u0627\u0639\u062f\u0629 \u062a\u0631\u0634\u062f\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API \u0645\u0646 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a<\/p>\n <\/header>\n\n \n <div class=\"platforms-grid\">\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon facebook\">\u0641<\/div>\n <div class=\"platform-info\">\n <h3>\u0641\u064a\u0633\u0628\u0648\u0643<\/h3>\n <p>Facebook Graph API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631<\/h4>\n <p>\u0627\u0630\u0647\u0628 \u0625\u0644\u0649 Facebook for Developers \u0648\u0623\u0646\u0634\u0626 \u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631 \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0644\u062f\u064a\u0643<\/p>\n <a href=\"https:\/\/developers.facebook.com\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0645\u0648\u0642\u0639<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642 \u062c\u062f\u064a\u062f<\/h4>\n <p>\u0623\u0646\u0634\u0626 \u062a\u0637\u0628\u064a\u0642 \u062c\u062f\u064a\u062f \u0648\u0627\u062e\u062a\u0631 \u0627\u0644\u0646\u0648\u0639 \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h4>\n <p>\u0627\u0646\u0633\u062e App ID \u0648 App Secret \u0645\u0646 \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon instagram\">\u0625<\/div>\n <div class=\"platform-info\">\n <h3>\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645<\/h3>\n <p>Instagram Graph API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u062a\u062d\u0648\u064a\u0644 \u0627\u0644\u062d\u0633\u0627\u0628 \u0644\u0644\u0623\u0639\u0645\u0627\u0644<\/h4>\n <p>\u062a\u062d\u0648\u064a\u0644 \u062d\u0633\u0627\u0628 \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645 \u0625\u0644\u0649 \u062d\u0633\u0627\u0628 \u0623\u0639\u0645\u0627\u0644 \u0623\u0648 \u0645\u0628\u062f\u0639<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0631\u0628\u0637 \u0628\u062d\u0633\u0627\u0628 \u0641\u064a\u0633\u0628\u0648\u0643<\/h4>\n <p>\u0631\u0628\u0637 \u062d\u0633\u0627\u0628 \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645 \u0628\u0635\u0641\u062d\u0629 \u0641\u064a\u0633\u0628\u0648\u0643 \u0644\u0644\u0623\u0639\u0645\u0627\u0644<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u0643\u0646<\/h4>\n <p>\u0627\u0633\u062a\u062e\u062f\u0645 Facebook Graph API \u0644\u0644\u0648\u0635\u0648\u0644 \u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645<\/p>\n <a href=\"https:\/\/developers.facebook.com\/docs\/instagram-api\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u062f\u0644\u064a\u0644<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon tiktok\">\u062a<\/div>\n <div class=\"platform-info\">\n <h3>\u062a\u064a\u0643 \u062a\u0648\u0643<\/h3>\n <p>TikTok Business API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631<\/h4>\n <p>\u0633\u062c\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u0625\u0644\u0649 TikTok for Developers<\/p>\n <a href=\"https:\/\/developers.tiktok.com\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0645\u0648\u0642\u0639<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062a\u0642\u062f\u064a\u0645 \u0644\u0644\u0648\u0635\u0648\u0644<\/h4>\n <p>\u0642\u062f\u0645 \u0637\u0644\u0628 \u0644\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 TikTok Business API<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h4>\n <p>\u0628\u0639\u062f \u0627\u0644\u0645\u0648\u0627\u0641\u0642\u0629\u060c \u0627\u062d\u0635\u0644 \u0639\u0644\u0649 Client Key \u0648 Client Secret<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon twitter\">\u062a<\/div>\n <div class=\"platform-info\">\n <h3>\u062a\u0648\u064a\u062a\u0631 (X)<\/h3>\n <p>Twitter API v2<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062a\u0642\u062f\u064a\u0645 \u0644\u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631<\/h4>\n <p>\u0642\u062f\u0645 \u0637\u0644\u0628 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062d\u0633\u0627\u0628 \u0645\u0637\u0648\u0631 \u0641\u064a Twitter<\/p>\n <a href=\"https:\/\/developer.twitter.com\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0645\u0648\u0642\u0639<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642<\/h4>\n <p>\u0623\u0646\u0634\u0626 \u062a\u0637\u0628\u064a\u0642 \u062c\u062f\u064a\u062f \u0641\u064a \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h4>\n <p>\u0627\u0646\u0633\u062e API Key \u0648 API Secret Key \u0648 Access Tokens<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon linkedin\">\u0644<\/div>\n <div class=\"platform-info\">\n <h3>\u0644\u064a\u0646\u0643\u062f\u0625\u0646<\/h3>\n <p>LinkedIn Marketing API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642<\/h4>\n <p>\u0627\u0630\u0647\u0628 \u0625\u0644\u0649 LinkedIn Developers \u0648\u0623\u0646\u0634\u0626 \u062a\u0637\u0628\u064a\u0642 \u062c\u062f\u064a\u062f<\/p>\n <a href=\"https:\/\/www.linkedin.com\/developers\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u0645\u0648\u0642\u0639<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u062a\u0643\u0648\u064a\u0646 OAuth<\/h4>\n <p>\u0627\u0636\u063a\u0637 \u0625\u0639\u062f\u0627\u062f\u0627\u062a OAuth 2.0 \u0648\u0623\u0636\u0641 redirect URLs<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/h4>\n <p>\u0627\u0646\u0633\u062e Client ID \u0648 Client Secret \u0645\u0646 \u0635\u0641\u062d\u0629 \u0627\u0644\u062a\u0648\u062b\u064a\u0642<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon telegram\">\u062a<\/div>\n <div class=\"platform-info\">\n <h3>\u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645<\/h3>\n <p>Telegram Bot API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062a\u062d\u062f\u062b \u0625\u0644\u0649 BotFather<\/h4>\n <p>\u0627\u0628\u062d\u062b \u0639\u0646 @BotFather \u0641\u064a \u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645 \u0648\u0627\u0628\u062f\u0623 \u0645\u062d\u0627\u062f\u062b\u0629<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u0628\u0648\u062a \u062c\u062f\u064a\u062f<\/h4>\n <p>\u0623\u0631\u0633\u0644 \u0627\u0644\u0623\u0645\u0631 \/newbot \u0648\u0627\u062a\u0628\u0639 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u0627\u062a<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u0643\u0646<\/h4>\n <p>\u0627\u0646\u0633\u062e token \u0627\u0644\u0628\u0648\u062a \u0627\u0644\u0630\u064a \u0633\u062a\u062d\u0635\u0644 \u0639\u0644\u064a\u0647 \u0645\u0646 BotFather<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"platform-card\">\n <div class=\"platform-header\">\n <div class=\"platform-icon whatsapp\">\u0648<\/div>\n <div class=\"platform-info\">\n <h3>\u0648\u0627\u062a\u0633\u0627\u0628<\/h3>\n <p>WhatsApp Business API<\/p>\n <\/div>\n <\/div>\n <div class=\"platform-steps\">\n <div class=\"step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h4>\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 \u0623\u0639\u0645\u0627\u0644<\/h4>\n <p>\u062d\u0645\u0651\u0644 WhatsApp Business \u0648\u0623\u0646\u0634\u0626 \u062d\u0633\u0627\u0628 \u0623\u0639\u0645\u0627\u0644<\/p>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062a\u0633\u062c\u064a\u0644 \u0641\u064a Cloud API<\/h4>\n <p>\u0633\u062c\u0644 \u0641\u064a Facebook Business Suite \u0644\u0644\u0648\u0635\u0648\u0644 \u0625\u0644\u0649 WhatsApp API<\/p>\n <a href=\"https:\/\/developers.facebook.com\/docs\/whatsapp\" target=\"_blank\" class=\"step-link\">\u0627\u0644\u0630\u0647\u0627\u0628 \u0644\u0644\u062f\u0644\u064a\u0644<\/a>\n <\/div>\n <\/div>\n <div class=\"step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h4>\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u062a\u0648\u0643\u0646<\/h4>\n <p>\u0627\u0646\u0633\u062e Permanent Access Token \u0645\u0646 \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062a\u0637\u0628\u064a\u0642<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"api-keys-form\">\n <h2 class=\"form-title\">\ud83d\udcbe \u062d\u0641\u0638 \u0645\u0641\u0627\u062a\u064a\u062d API \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643<\/h2>\n <form id=\"apiKeysForm\">\n <div class=\"keys-grid\">\n <div class=\"form-group\">\n <label for=\"facebook-app-id\">\u0641\u064a\u0633\u0628\u0648\u0643 App ID<\/label>\n <input type=\"text\" id=\"facebook-app-id\" placeholder=\"123456789012345\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"facebook-app-secret\">\u0641\u064a\u0633\u0628\u0648\u0643 App Secret<\/label>\n <input type=\"password\" id=\"facebook-app-secret\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"twitter-api-key\">\u062a\u0648\u064a\u062a\u0631 API Key<\/label>\n <input type=\"text\" id=\"twitter-api-key\" placeholder=\"ABC123def456...\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"twitter-api-secret\">\u062a\u0648\u064a\u062a\u0631 API Secret<\/label>\n <input type=\"password\" id=\"twitter-api-secret\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"instagram-access-token\">\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645 Access Token<\/label>\n <input type=\"password\" id=\"instagram-access-token\" placeholder=\"IG\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"tiktok-client-key\">\u062a\u064a\u0643 \u062a\u0648\u0643 Client Key<\/label>\n <input type=\"text\" id=\"tiktok-client-key\" placeholder=\"aw1234567890\u2022\u2022\u2022\u2022\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"telegram-bot-token\">\u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645 Bot Token<\/label>\n <input type=\"password\" id=\"telegram-bot-token\" placeholder=\"1234567890:ABCdefGHIjkl...\">\n <\/div>\n <div class=\"form-group\">\n <label for=\"whatsapp-access-token\">\u0648\u0627\u062a\u0633\u0627\u0628 Access Token<\/label>\n <input type=\"password\" id=\"whatsapp-access-token\" placeholder=\"EAAG\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n <\/div>\n <\/div>\n <button type=\"submit\" class=\"save-btn\">\ud83d\udcbe \u062d\u0641\u0638 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d<\/button>\n <\/form>\n <\/div>\n\n \n <div class=\"saved-keys\">\n <h2 class=\"form-title\">\ud83d\udd11 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629<\/h2>\n <div class=\"keys-list\" id=\"savedKeysList\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u0625\u062f\u0627\u0631\u0629 \u0645\u0641\u0627\u062a\u064a\u062d API\n class APIKeysManager {\n constructor() {\n this.keys = this.loadKeys();\n this.init();\n }\n\n init() {\n \/\/ \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629\n this.displaySavedKeys();\n \n \/\/ \u0625\u0639\u062f\u0627\u062f \u0645\u0633\u062a\u0645\u0639 \u0627\u0644\u0646\u0645\u0648\u0630\u062c\n document.getElementById('apiKeysForm').addEventListener('submit', (e) => {\n e.preventDefault();\n this.saveKeys();\n });\n }\n\n loadKeys() {\n const saved = localStorage.getItem('api_keys');\n return saved ? JSON.parse(saved) : {};\n }\n\n saveKeys() {\n \/\/ \u062c\u0645\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 \u0627\u0644\u0646\u0645\u0648\u0630\u062c\n this.keys = {\n facebook: {\n appId: document.getElementById('facebook-app-id').value,\n appSecret: document.getElementById('facebook-app-secret').value\n },\n twitter: {\n apiKey: document.getElementById('twitter-api-key').value,\n apiSecret: document.getElementById('twitter-api-secret').value\n },\n instagram: {\n accessToken: document.getElementById('instagram-access-token').value\n },\n tiktok: {\n clientKey: document.getElementById('tiktok-client-key').value\n },\n telegram: {\n botToken: document.getElementById('telegram-bot-token').value\n },\n whatsapp: {\n accessToken: document.getElementById('whatsapp-access-token').value\n }\n };\n\n \/\/ \u062d\u0641\u0638 \u0641\u064a localStorage\n localStorage.setItem('api_keys', JSON.stringify(this.keys));\n \n \/\/ \u0639\u0631\u0636 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u0645\u062d\u0641\u0648\u0638\u0629\n this.displaySavedKeys();\n \n \/\/ \u0631\u0633\u0627\u0644\u0629 \u0646\u062c\u0627\u062d\n alert('\u2705 \u062a\u0645 \u062d\u0641\u0638 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0628\u0646\u062c\u0627\u062d!');\n }\n\n displaySavedKeys() {\n const container = document.getElementById('savedKeysList');\n container.innerHTML = '';\n\n if (Object.keys(this.keys).length === 0) {\n container.innerHTML = '<p style=\"text-align: center; color: #6b7280;\">\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0641\u0627\u062a\u064a\u062d \u0645\u062d\u0641\u0648\u0638\u0629 \u0628\u0639\u062f<\/p>';\n return;\n }\n\n for (const [platform, keys] of Object.entries(this.keys)) {\n const keyItem = document.createElement('div');\n keyItem.className = 'key-item';\n \n let keyContent = '';\n for (const [keyName, keyValue] of Object.entries(keys)) {\n if (keyValue) {\n keyContent += `\n <div style=\"margin-bottom: 0.5rem;\">\n <strong>${this.getKeyDisplayName(keyName)}:<\/strong>\n <div class=\"key-value\">${this.maskSensitiveKey(keyName, keyValue)}<\/div>\n <\/div>\n `;\n }\n }\n\n if (keyContent) {\n keyItem.innerHTML = `\n <div class=\"key-platform\">${this.getPlatformName(platform)}<\/div>\n ${keyContent}\n `;\n container.appendChild(keyItem);\n }\n }\n }\n\n getPlatformName(platform) {\n const names = {\n facebook: '\u0641\u064a\u0633\u0628\u0648\u0643',\n twitter: '\u062a\u0648\u064a\u062a\u0631',\n instagram: '\u0625\u0646\u0633\u062a\u063a\u0631\u0627\u0645',\n tiktok: '\u062a\u064a\u0643 \u062a\u0648\u0643',\n telegram: '\u062a\u064a\u0644\u064a\u062c\u0631\u0627\u0645',\n whatsapp: '\u0648\u0627\u062a\u0633\u0627\u0628'\n };\n return names[platform] || platform;\n }\n\n getKeyDisplayName(keyName) {\n const names = {\n appId: 'App ID',\n appSecret: 'App Secret',\n apiKey: 'API Key',\n apiSecret: 'API Secret',\n accessToken: 'Access Token',\n clientKey: 'Client Key',\n botToken: 'Bot Token'\n };\n return names[keyName] || keyName;\n }\n\n maskSensitiveKey(keyName, value) {\n \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d \u0627\u0644\u062d\u0633\u0627\u0633\u0629\n const sensitiveKeys = ['appSecret', 'apiSecret', 'accessToken', 'botToken'];\n if (sensitiveKeys.includes(keyName) && value) {\n return value.substring(0, 8) + '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022' + value.substring(value.length - 8);\n }\n return value;\n }\n\n \/\/ \u062f\u0627\u0644\u0629 \u0644\u0627\u0633\u062a\u0631\u062c\u0627\u0639 \u0627\u0644\u0645\u0641\u0627\u062a\u064a\u062d (\u0644\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0641\u064a \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0623\u062e\u0631\u0649)\n getKeys() {\n return this.keys;\n }\n }\n\n \/\/ \u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062f\u064a\u0631 \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\n document.addEventListener('DOMContentLoaded', () => {\n window.apiKeysManager = new APIKeysManager();\n });\n\n \/\/ \u062f\u0627\u0644\u0629 \u0644\u0646\u0633\u062e \u0627\u0644\u0646\u0635\n function copyToClipboard(text) {\n navigator.clipboard.writeText(text).then(() => {\n alert('\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0646\u0635!');\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API – API Key Generator \ud83d\udee0\ufe0f \u0645\u0646\u0635\u0629 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0645\u0641\u0627\u062a\u064a\u062d API \u0623\u062f\u0627\u0629 \u0645\u0633\u0627\u0639\u062f\u0629 \u062a\u0631\u0634\u062f\u0643 \u062e\u0637\u0648\u0629 \u0628\u062e\u0637\u0648\u0629 […]<\/p>\n","protected":false},"author":1,"featured_media":153,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-182","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/comments?post=182"}],"version-history":[{"count":3,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/182\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/pages\/182\/revisions\/186"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/media\/153"}],"wp:attachment":[{"href":"https:\/\/iraqi-engineer.org\/index.php\/wp-json\/wp\/v2\/media?parent=182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}