{"id":13391,"date":"2025-04-05T09:45:07","date_gmt":"2025-04-05T07:45:07","guid":{"rendered":"https:\/\/bakrykeys-com-316394.hostingersite.com\/?page_id=13391"},"modified":"2025-04-06T05:42:55","modified_gmt":"2025-04-06T03:42:55","slug":"fb-profile","status":"publish","type":"page","link":"https:\/\/bakrykeys.com\/en\/fb-profile\/","title":{"rendered":"\u062a\u0635\u0645\u064a\u0645 \u0635\u0648\u0631\u0629 \u0627\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0644\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"13391\" class=\"elementor elementor-13391\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-452d9de e-con-full e-flex e-con e-parent\" data-id=\"452d9de\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-953cb27 elementor-widget elementor-widget-html\" data-id=\"953cb27\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n\r\n\r\n  <meta charset=\"UTF-8\">\r\n  <title>\u0628\u0643\u0631\u0649 \u0644\u062a\u0635\u0645\u064a\u0645 \u0635\u0648\u0631\u0629 \u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0627\u0644\u0641\u064a\u0633 \u0628\u0648\u0643<\/title>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;700&amp;display=swap\" rel=\"stylesheet\">\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.css\">\r\n  <style>\r\n    \/* --- CSS Variables for Dark Mode --- *\/\r\n    :root {\r\n      --bg-gradient-start: #2c1e31; \/* Dark purple *\/\r\n      --bg-gradient-end: #1a141d; \/* Darker purple\/black *\/\r\n      --page-frame-bg: #2d2d30; \/* Dark gray *\/\r\n      --page-frame-border: #bb86fc; \/* Light purple (Material Dark) *\/\r\n      --page-frame-shadow: rgba(187, 134, 252, 0.25); \/* Light purple shadow *\/\r\n      --text-color: #e0e0e0; \/* Light gray *\/\r\n      --heading-color: #e0e0e0;\r\n      --heading-bg: #3e3044; \/* Darker purple *\/\r\n      --subheading-bg: #332d35;\r\n      --subheading-border: #55495a;\r\n      --section-desc-bg: #332d35;\r\n      --section-desc-border: #55495a;\r\n      --section-desc-text: #b0b0b0; \/* Medium gray *\/\r\n      --upload-area-bg: #3e3044;\r\n      --button-primary-bg: #bb86fc; \/* Light purple *\/\r\n      --button-primary-text: #121212; \/* Black *\/\r\n      --button-primary-hover-bg: #d0a0ff; \/* Lighter purple *\/\r\n      --template-list-bg: #333; \/* Dark gray *\/\r\n      --template-list-border: #555;\r\n      --template-item-bg: #424242; \/* Medium dark gray *\/\r\n      --template-item-border: #666;\r\n      --template-item-selected-border: #bb86fc; \/* Light purple *\/\r\n      --template-item-selected-shadow: rgba(187, 134, 252, 0.5);\r\n      --template-label-color: #bb86fc; \/* Light purple *\/\r\n      --preview-bg: #424242;\r\n      --preview-border: #666;\r\n      --cropper-bg: #555;\r\n      --canvas-placeholder-bg: #555;\r\n      --canvas-placeholder-text: #999;\r\n      --alert-bg: #4e3434; \/* Dark red *\/\r\n      --alert-text: #ffcdd2; \/* Light pink *\/\r\n      --alert-border: #e57373; \/* Medium red *\/\r\n      --alert-button-bg: #c62828; \/* Dark red *\/\r\n      --alert-button-text: #fff;\r\n    }\r\n    \/* --- End CSS Variables --- *\/\r\n\r\n    body {\r\n      font-family: 'Cairo', sans-serif; \/* Default font for the page *\/\r\n      text-align: center;\r\n      background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));\r\n      padding: 20px;\r\n      color: var(--text-color);\r\n      \/* No transition needed as it's always dark *\/\r\n    }\r\n    .page-frame {\r\n      max-width: 900px;\r\n      margin: 20px auto;\r\n      background: var(--page-frame-bg);\r\n      border: 4px solid var(--page-frame-border);\r\n      border-radius: 20px;\r\n      padding: 20px;\r\n      box-shadow: 0 0 30px var(--page-frame-shadow);\r\n      \/* No transition needed *\/\r\n      position: relative;\r\n    }\r\n    \/* --- Theme Toggle Button CSS Removed --- *\/\r\n\r\n    h1 {\r\n      color: var(--heading-color);\r\n      background: var(--heading-bg);\r\n      padding: 10px 20px;\r\n      border-radius: 10px;\r\n      display: inline-block;\r\n      box-shadow: 0 2px 5px rgba(0,0,0,0.1);\r\n      \/* No transition needed *\/\r\n      font-family: 'Cairo', sans-serif; \/* Ensure Cairo font *\/\r\n    }\r\n    h3 {\r\n      background: var(--subheading-bg);\r\n      padding: 8px 16px;\r\n      border: 2px solid var(--subheading-border);\r\n      border-radius: 8px;\r\n      color: var(--heading-color); \/* Use heading color *\/\r\n      display: inline-block; \/* Default display *\/\r\n      box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n      margin-top: 10px;\r\n      margin-bottom: 15px;\r\n      \/* No transition needed *\/\r\n      font-family: 'Cairo', sans-serif; \/* Ensure Cairo font *\/\r\n    }\r\n    \/* Specific centering for headings that need it *\/\r\n    h3.centered-heading {\r\n        text-align: center;\r\n        display: block; \/* Make it take full width of parent *\/\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n    }\r\n    .container {\r\n      max-width: 600px; \/* Constrains width of elements inside *\/\r\n      margin: auto;\r\n    }\r\n    .section-description {\r\n        margin-top: 20px;\r\n        margin-bottom: 10px;\r\n        font-size: 15px;\r\n        color: var(--section-desc-text);\r\n        background: var(--section-desc-bg);\r\n        padding: 10px 15px;\r\n        border: 1px solid var(--section-desc-border);\r\n        border-radius: 8px;\r\n        display: inline-block;\r\n        \/* No transition needed *\/\r\n        font-family: 'Cairo', sans-serif; \/* Ensure Cairo font *\/\r\n    }\r\n    .upload-area {\r\n        background: var(--upload-area-bg);\r\n        padding: 20px;\r\n        border-radius: 12px;\r\n        box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n        margin: 10px auto 15px auto;\r\n        max-width: 400px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        \/* No transition needed *\/\r\n    }\r\n    .custom-file-upload {\r\n      display: inline-block;\r\n      padding: 10px 20px;\r\n      cursor: pointer;\r\n      background-color: var(--button-primary-bg);\r\n      color: var(--button-primary-text);\r\n      border-radius: 6px;\r\n      font-weight: bold;\r\n      transition: background-color 0.3s ease; \/* Keep hover transition *\/\r\n      text-align: center;\r\n      width: fit-content;\r\n      border: none; \/* Ensure no default border *\/\r\n      font-family: 'Cairo', sans-serif; \/* Ensure Cairo font *\/\r\n    }\r\n    .custom-file-upload:hover {\r\n      background-color: var(--button-primary-hover-bg);\r\n    }\r\n    input[type=\"file\"] {\r\n      display: none;\r\n    }\r\n    #cropper-container {\r\n        margin: 10px auto;\r\n        max-width: 400px;\r\n        height: 400px;\r\n        background-color: var(--cropper-bg);\r\n        border-radius: 10px;\r\n        overflow: hidden;\r\n        \/* No transition needed *\/\r\n    }\r\n    #image {\r\n        display: none;\r\n        max-width: 100%;\r\n    }\r\n\r\n    \/* --- Template List Section --- *\/\r\n    .template-section {\r\n        margin-top: 30px;\r\n        margin-bottom: 30px;\r\n    }\r\n    #template-list {\r\n      display: grid;\r\n      \/* Default: Auto-fit columns with min width *\/\r\n      grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));\r\n      gap: 15px;\r\n      margin: 10px 0;\r\n      justify-content: center;\r\n      background: var(--template-list-bg);\r\n      padding: 20px;\r\n      border: 2px solid var(--template-list-border);\r\n      border-radius: 12px;\r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.05);\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      \/* No transition needed *\/\r\n    }\r\n    .template-item {\r\n        text-align:center;\r\n        border: 1px solid var(--template-item-border);\r\n        padding: 8px;\r\n        border-radius: 10px;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n        background: var(--template-item-bg);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n        cursor: pointer;\r\n        transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease; \/* Keep some transitions *\/\r\n    }\r\n    .template-item:hover {\r\n        transform: scale(1.05);\r\n        box-shadow: 0 4px 10px rgba(0,0,0,0.15);\r\n    }\r\n    .template-item.selected {\r\n        border-color: var(--template-item-selected-border);\r\n        box-shadow: 0 0 10px var(--template-item-selected-shadow);\r\n    }\r\n    .template-item img.template {\r\n      border-radius: 8px;\r\n      width: 100%;\r\n      max-width: 80px; \/* Max width for the image itself *\/\r\n      height: 80px;\r\n      object-fit: cover;\r\n      background-color: var(--cropper-bg); \/* Use cropper bg for placeholder *\/\r\n      display: block;\r\n      \/* No transition needed *\/\r\n    }\r\n     .template-item .template-label {\r\n        margin-top: 8px;\r\n        font-size: 12px;\r\n        color: var(--template-label-color);\r\n        font-weight: bold;\r\n        white-space: nowrap;\r\n        \/* No transition needed *\/\r\n        font-family: 'Cairo', sans-serif; \/* Ensure Cairo font *\/\r\n       }\r\n    \/* --- End Template List Section --- *\/\r\n\r\n    #preview {\r\n      margin: 20px auto; \/* Centered within its container *\/\r\n      width: 100%;\r\n      max-width: 300px; \/* Max width for the preview itself *\/\r\n      height: auto;\r\n      aspect-ratio: 1 \/ 1;\r\n      background-color: var(--preview-bg);\r\n      border: 2px solid var(--preview-border);\r\n      border-radius: 10px;\r\n      overflow: hidden;\r\n      position: relative;\r\n      \/* No transition needed *\/\r\n    }\r\n    #canvas {\r\n      display: block;\r\n      width: 100% !important;\r\n      height: 100% !important;\r\n    }\r\n    \/* Placeholder text style on canvas *\/\r\n    #canvas[data-placeholder]::before {\r\n        content: attr(data-placeholder);\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        color: var(--canvas-placeholder-text);\r\n        font-family: 'Cairo', sans-serif; \/* Ensure Cairo font *\/\r\n        font-size: 16px;\r\n        \/* No transition needed *\/\r\n    }\r\n\r\n    button#saveButton {\r\n      font-family: 'Cairo', sans-serif; \/* Ensure Cairo font *\/\r\n      background-color: var(--button-primary-bg);\r\n      color: var(--button-primary-text);\r\n      padding: 14px 28px;\r\n      font-size: 18px;\r\n      border: none;\r\n      border-radius: 10px;\r\n      cursor: pointer;\r\n      font-weight: bold;\r\n      margin-top: 20px; \/* Spacing above the button *\/\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n      transition: background-color 0.3s ease, transform 0.2s ease; \/* Keep hover transitions *\/\r\n    }\r\n    button#saveButton:hover {\r\n      background-color: var(--button-primary-hover-bg);\r\n      transform: scale(1.05);\r\n    }\r\n    \/* Style for disabled buttons *\/\r\n    button:disabled, label.custom-file-upload[disabled] {\r\n        background-color: #555 !important; \/* Darker background *\/\r\n        color: #999 !important; \/* Lighter text *\/\r\n        cursor: not-allowed !important; \/* Indicate disabled state *\/\r\n        opacity: 0.6;\r\n    }\r\n\r\n\r\n    \/* --- Cropper CSS Modifications --- *\/\r\n    .cropper-view-box,\r\n    .cropper-face {\r\n      border-radius: 50%;\r\n      outline: inherit;\r\n      box-shadow: 0 0 0 1px var(--button-primary-bg); \/* Use theme color *\/\r\n    }\r\n    .cropper-dashed, .cropper-point, .cropper-line { display: none !important; }\r\n    .cropper-modal {\r\n        opacity: .7;\r\n        background-color: #000; \/* Keep overlay dark-ish *\/\r\n    }\r\n    \/* Ensure cropper background adapts *\/\r\n    .cropper-bg {\r\n        background-image: none; \/* Remove default grid *\/\r\n        background-color: var(--cropper-bg);\r\n        \/* No transition needed *\/\r\n    }\r\n    \/* --- End Cropper CSS Modifications --- *\/\r\n\r\n    \/* --- Styled Alert Box Theming --- *\/\r\n    #styled-alert-box {\r\n        background-color: var(--alert-bg);\r\n        color: var(--alert-text);\r\n        border: 1px solid var(--alert-border);\r\n        position: fixed;\r\n        top: 20px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        border-radius: 8px;\r\n        padding: 15px 20px;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n        z-index: 1000;\r\n        font-family: 'Cairo', sans-serif; \/* CORRECTED: Use Cairo font directly *\/\r\n        max-width: 90%;\r\n        text-align: right;\r\n        \/* No transition needed *\/\r\n    }\r\n    #styled-alert-box p {\r\n        margin: 0 0 10px 0;\r\n        color: var(--alert-text); \/* Ensure p tag inherits color *\/\r\n        \/* Font is inherited from #styled-alert-box *\/\r\n    }\r\n    #styled-alert-box button {\r\n        background-color: var(--alert-button-bg);\r\n        color: var(--alert-button-text);\r\n        border: none;\r\n        border-radius: 5px;\r\n        padding: 5px 10px;\r\n        cursor: pointer;\r\n        font-family: 'Cairo', sans-serif; \/* CORRECTED: Use Cairo font directly *\/\r\n        float: left;\r\n        transition: background-color 0.3s ease; \/* Keep hover transition *\/\r\n    }\r\n    \/* --- End Styled Alert Box Theming --- *\/\r\n\r\n    \/* Footer styling *\/\r\n    footer {\r\n        margin-top: 30px;\r\n        padding-top: 15px;\r\n        border-top: 1px solid var(--subheading-border);\r\n        font-size: 14px;\r\n        color: var(--section-desc-text);\r\n        font-family: 'Cairo', sans-serif; \/* Ensure Cairo font *\/\r\n    }\r\n\r\n\r\n    \/* Responsive adjustments *\/\r\n    @media (max-width: 768px) {\r\n        .page-frame { max-width: 95%; padding: 15px; }\r\n        .template-item img.template { max-width: 70px; height: 70px; }\r\n        \/* Adjust grid for smaller tablets if needed *\/\r\n        #template-list {\r\n             grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); \/* Slightly smaller min width *\/\r\n             gap: 10px;\r\n        }\r\n    }\r\n    @media (max-width: 600px) {\r\n      h1 { font-size: 1.5em; }\r\n      .custom-file-upload { width: 90%; padding: 12px; } \/* Adjusted button width *\/\r\n      button#saveButton { width: 90%; padding: 12px; } \/* Adjusted button width *\/\r\n      #cropper-container { height: 300px; }\r\n      #preview { max-width: 250px; }\r\n      .template-item img.template { max-width: 60px; height: 60px; }\r\n      .template-item .template-label { font-size: 11px; }\r\n       \/* Adjust grid for mobile - *** \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 \u0647\u0646\u0627 *** *\/\r\n       #template-list {\r\n            grid-template-columns: repeat(3, 1fr); \/* Force 3 columns *\/\r\n            gap: 10px;\r\n       }\r\n    }\r\n\r\n    \/* --- ADDED: Desktop Grid Layout --- *\/\r\n    @media (min-width: 992px) { \/* Apply only on screens 992px wide or larger *\/\r\n      #template-list {\r\n        grid-template-columns: repeat(6, 1fr); \/* Force 6 equal columns *\/\r\n      }\r\n    }\r\n    \/* --- End Desktop Grid Layout --- *\/\r\n\r\n  <\/style>\r\n\r\n\r\n  <div class=\"page-frame\">\r\n\r\n    <div class=\"container\">\r\n      <h1>\u0628\u0643\u0631\u0649 \u0644\u062a\u0635\u0645\u064a\u0645 \u0635\u0648\u0631\u0629 \u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0627\u0644\u0641\u064a\u0633 \u0628\u0648\u0643<\/h1>\r\n      <p class=\"section-description\">\ud83d\udccc <strong>\u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u0623\u0648\u0644\u0649:<\/strong> \u064a\u064f\u0631\u062c\u0649 \u0631\u0641\u0639 \u0635\u0648\u0631\u0629 \u0628\u062c\u0648\u062f\u0629 \u0639\u0627\u0644\u064a\u0629 \u0645\u0646 \u062c\u0647\u0627\u0632\u0643 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0632\u0631 \u0627\u0644\u062a\u0627\u0644\u064a.<\/p>\r\n      <div class=\"upload-area\">\r\n        <label for=\"upload\" class=\"custom-file-upload\">\ud83d\udcc1 \u0627\u062e\u062a\u0631 \u0635\u0648\u0631\u0629 \u0645\u0646 \u062c\u0647\u0627\u0632\u0643<\/label>\r\n      <\/div>\r\n      <input type=\"file\" id=\"upload\" accept=\"image\/*\">\r\n\r\n      <div id=\"cropper-container\">\r\n          <img id=\"image\">\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"template-section\">\r\n      <p class=\"section-description\" style=\"text-align: center; display: block; margin-left: auto; margin-right: auto;\">\ud83d\udccc <strong>\u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u062b\u0627\u0646\u064a\u0629:<\/strong> \u064a\u064f\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0642\u0627\u0644\u0628 \u0627\u0644\u0645\u0646\u0627\u0633\u0628 \u0645\u0646 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0623\u062f\u0646\u0627\u0647.<\/p>\r\n      <h3 class=\"centered-heading\">\u0627\u062e\u062a\u0631 \u0627\u0644\u0642\u0627\u0644\u0628<\/h3>\r\n      <div id=\"template-list\">\r\n          <\/div>\r\n    <\/div>\r\n\r\n    <h3 class=\"centered-heading\">\ud83d\uddbc\ufe0f <strong>\u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629:<\/strong><\/h3>\r\n\r\n    <div class=\"container\">\r\n      <div id=\"preview\">\r\n        <canvas id=\"canvas\" width=\"720\" height=\"720\"><\/canvas>\r\n      <\/div>\r\n      <button id=\"saveButton\" onclick=\"saveImage()\">\ud83d\udce5 \u0627\u062d\u0641\u0638 \u0627\u0644\u0635\u0648\u0631\u0629 \u0627\u0644\u0627\u0646 \u0628\u0639\u062f \u0627\u062a\u0645\u0627\u0645 \u0627\u0644\u062a\u0639\u062f\u064a\u0644<\/button>\r\n    <\/div>\r\n\r\n  <\/div> <footer>\u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629 \u00a9 \u0644\u0640 \u0645\u062d\u0645\u062f \u0628\u0643\u0631\u0649<\/footer>\r\n\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.js\"><\/script>\r\n  <script>\r\n    \/\/ --- Global Variables ---\r\n    let cropper;\r\n    const image = document.getElementById('image');\r\n    const uploadInput = document.getElementById('upload');\r\n    const cropperContainer = document.getElementById('cropper-container');\r\n    const previewCanvas = document.getElementById('canvas');\r\n    const previewCtx = previewCanvas.getContext('2d');\r\n    const templateListDiv = document.getElementById('template-list');\r\n    let selectedTemplateSrc = null;\r\n    let selectedTemplateElement = null;\r\n    let footerCheckInterval = null; \/\/ Variable to hold the interval ID\r\n\r\n    \/\/ --- Constants ---\r\n    const EXPECTED_FOOTER_TEXT = '\u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638\u0629 \u00a9 \u0644\u0640 \u0645\u062d\u0645\u062f \u0628\u0643\u0631\u0649'; \/\/ Define expected text\r\n\r\n    \/\/ --- Template Data ---\r\n    \/\/ *** \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0642\u0648\u0627\u0644\u0628  ***\r\n    const templates = [\r\n      { name: \"\u0642\u0631\u0635 \u0627\u0644\u0634\u0645\u0633\", imageUrl: \"https:\/\/i.postimg.cc\/VNDsF9w0\/image.png\" },\r\n      { name: \"\u0648\u0631\u062f \u0627\u0644\u0635\u0628\u0627\u062d\", imageUrl: \"https:\/\/i.postimg.cc\/vTRm1YM0\/uri-ifs-M-e2841e00-e34e-45de-9e2e-a942772c3e93.webp\" },\r\n      { name: \"\u063a\u0635\u0646 \u0627\u0644\u0632\u064a\u062a\u0648\u0646\", imageUrl: \"https:\/\/i.postimg.cc\/7L285g6y\/eaf1bedb-8191-4449-896a-19e3cbcf19dc.png\" },\r\n      { name: \"\u062a\u0635\u0645\u064a\u0645 \u0632\u0647\u0648\u0631\", imageUrl: \"https:\/\/i.postimg.cc\/zBRt6hWM\/image.png\" },\r\n      { name: \"\u0625\u0637\u0627\u0631 \u0630\u0647\u0628\u064a\", imageUrl: \"https:\/\/i.postimg.cc\/zBRt6hWM\/image.png\" },\r\n      { name: \"\u0625\u0637\u0627\u0631 \u0641\u0636\u064a\", imageUrl: \"https:\/\/i.postimg.cc\/zBRt6hWM\/image.png\" },\r\n      ];\r\n    \/\/ *** \u0646\u0647\u0627\u064a\u0629 \u0642\u0633\u0645 \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0642\u0648\u0627\u0644\u0628 ***\r\n\r\n    \/\/ --- Template Loading ---\r\n    function loadTemplates() {\r\n        templateListDiv.innerHTML = ''; \/\/ Clear existing templates\r\n        templates.forEach(templateData => {\r\n            const templateItem = document.createElement('div');\r\n            templateItem.classList.add('template-item');\r\n            templateItem.onclick = () => selectTemplate(templateItem, templateData.imageUrl);\r\n\r\n            const img = document.createElement('img');\r\n            img.classList.add('template');\r\n            img.src = templateData.imageUrl;\r\n            img.alt = templateData.name;\r\n            img.onerror = () => {\r\n                \/\/ Use dark mode colors for error placeholder\r\n                let bgColor = getComputedStyle(document.documentElement).getPropertyValue('--cropper-bg').substring(1);\r\n                let textColor = getComputedStyle(document.documentElement).getPropertyValue('--template-label-color').substring(1);\r\n                img.src = `https:\/\/placehold.co\/80x80\/${bgColor}\/${textColor}?text=Error`;\r\n                console.error(`Failed to load template image: ${templateData.imageUrl}`);\r\n            };\r\n\r\n            const label = document.createElement('div');\r\n            label.classList.add('template-label');\r\n            label.textContent = templateData.name;\r\n\r\n            templateItem.appendChild(img);\r\n            templateItem.appendChild(label);\r\n            templateListDiv.appendChild(templateItem);\r\n        });\r\n    }\r\n\r\n    \/\/ --- Cropper Initialization and Handling ---\r\n    uploadInput.addEventListener('change', function (e) {\r\n      const file = e.target.files[0];\r\n      if (!file || !file.type.startsWith('image\/')) {\r\n          showStyledAlert('\u064a\u0631\u062c\u0649 \u0627\u062e\u062a\u064a\u0627\u0631 \u0645\u0644\u0641 \u0635\u0648\u0631\u0629 \u0635\u0627\u0644\u062d.');\r\n          return;\r\n      }\r\n      const reader = new FileReader();\r\n      reader.onload = function (event) {\r\n        image.src = event.target.result;\r\n        image.style.display = 'block';\r\n        cropperContainer.style.display = 'block';\r\n\r\n        if (cropper) cropper.destroy();\r\n        clearPreview(); \/\/ Clear preview when new image is loaded\r\n        deselectTemplates(); \/\/ Deselect template when new image is uploaded\r\n\r\n        cropper = new Cropper(image, {\r\n          aspectRatio: 1, viewMode: 1, dragMode: 'move', autoCropArea: 0.95,\r\n          cropBoxResizable: false, cropBoxMovable: false, background: false,\r\n          guides: false, center: false, highlight: false, movable: true, zoomable: true,\r\n          ready() { console.log(\"Cropper ready\"); },\r\n          \/\/ Update preview immediately if a template is already selected\r\n          crop() { if (selectedTemplateSrc) renderPreview(); }\r\n        });\r\n      };\r\n      reader.onerror = () => showStyledAlert('\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u0644\u0641.');\r\n      reader.readAsDataURL(file);\r\n    });\r\n\r\n    \/\/ --- Template Selection ---\r\n    function deselectTemplates() {\r\n        if (selectedTemplateElement) {\r\n            selectedTemplateElement.classList.remove('selected');\r\n        }\r\n        selectedTemplateElement = null;\r\n        selectedTemplateSrc = null;\r\n        \/\/ Render only the cropped image without template\r\n        if (cropper && cropper.ready) {\r\n             renderPreview();\r\n        } else {\r\n            clearPreview();\r\n        }\r\n    }\r\n\r\n    function clearPreview() {\r\n        previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);\r\n        \/\/ Draw placeholder using dark mode theme variables\r\n        previewCtx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--canvas-placeholder-bg');\r\n        previewCtx.fillRect(0, 0, previewCanvas.width, previewCanvas.height);\r\n        previewCtx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--canvas-placeholder-text');\r\n        previewCtx.textAlign = 'center';\r\n        previewCtx.font = \"16px Cairo\"; \/\/ Ensure Cairo font for canvas placeholder\r\n        previewCtx.fillText('\u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629 \u0647\u0646\u0627', previewCanvas.width \/ 2, previewCanvas.height \/ 2);\r\n        previewCanvas.setAttribute('data-placeholder', '\u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629 \u0647\u0646\u0627');\r\n    }\r\n\r\n    function selectTemplate(element, templateUrl) {\r\n      if (!cropper) {\r\n          showStyledAlert(\"\u064a\u0631\u062c\u0649 \u0631\u0641\u0639 \u0635\u0648\u0631\u0629 \u0623\u0648\u0644\u0627\u064b \u0642\u0628\u0644 \u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0642\u0627\u0644\u0628.\");\r\n          return;\r\n      }\r\n      \/\/ Deselect previous template if any\r\n      if (selectedTemplateElement) {\r\n          selectedTemplateElement.classList.remove('selected');\r\n      }\r\n      \/\/ Select the new template\r\n      element.classList.add('selected');\r\n      selectedTemplateElement = element;\r\n      selectedTemplateSrc = templateUrl; \/\/ Store the selected template's image URL\r\n      renderPreview(); \/\/ Update the preview\r\n    }\r\n\r\n    \/\/ --- Rendering the Preview Canvas ---\r\n    function renderPreview() {\r\n        \/\/ Case 1: Cropper is not ready or no image is loaded\r\n        if (!cropper || !cropper.ready) {\r\n            clearPreview();\r\n            return;\r\n        }\r\n\r\n        const croppedCanvas = cropper.getCroppedCanvas({\r\n            width: previewCanvas.width, height: previewCanvas.height,\r\n            imageSmoothingEnabled: true, imageSmoothingQuality: 'high'\r\n        });\r\n\r\n        if (!croppedCanvas) {\r\n            showStyledAlert(\"\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0642\u0635 \u0627\u0644\u0635\u0648\u0631\u0629.\");\r\n            clearPreview();\r\n            return;\r\n        }\r\n\r\n        const loadImage = (src) => new Promise((resolve, reject) => {\r\n            const img = new Image();\r\n            img.onload = () => resolve(img);\r\n            img.onerror = (err) => {\r\n                console.error(`Error loading image: ${src}`, err);\r\n                reject(new Error(`Failed to load image: ${src.substring(0,100)}...`));\r\n            };\r\n            \/\/ Add crossOrigin attribute only if the source is not a data URL\r\n            if (!src.startsWith('data:')) {\r\n                img.crossOrigin = \"anonymous\";\r\n            }\r\n            img.src = src;\r\n        });\r\n\r\n        \/\/ Case 2: A template is selected\r\n        if (selectedTemplateSrc) {\r\n            Promise.all([ loadImage(croppedCanvas.toDataURL()), loadImage(selectedTemplateSrc) ])\r\n            .then(([userImage, templateImage]) => {\r\n                previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);\r\n                \/\/ Draw user image clipped in a circle\r\n                previewCtx.save();\r\n                previewCtx.beginPath();\r\n                previewCtx.arc(previewCanvas.width \/ 2, previewCanvas.height \/ 2, previewCanvas.width \/ 2, 0, Math.PI * 2);\r\n                previewCtx.closePath();\r\n                previewCtx.clip();\r\n                previewCtx.drawImage(userImage, 0, 0, previewCanvas.width, previewCanvas.height);\r\n                previewCtx.restore();\r\n                \/\/ Draw the template image over the user image\r\n                previewCtx.drawImage(templateImage, 0, 0, previewCanvas.width, previewCanvas.height);\r\n                previewCanvas.removeAttribute('data-placeholder'); \/\/ Remove placeholder text\r\n            })\r\n            .catch(error => {\r\n                console.error(\"Error loading images for preview:\", error);\r\n                showStyledAlert(\"\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0648\u0631\u0629 \u0623\u0648 \u0627\u0644\u0642\u0627\u0644\u0628 \u0644\u0644\u0645\u0639\u0627\u064a\u0646\u0629. \u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0631\u0627\u0628\u0637 \u0627\u0644\u0642\u0627\u0644\u0628 \u0635\u062d\u064a\u062d \u0648\u064a\u0639\u0645\u0644.\");\r\n                \/\/ Attempt to draw just the user image if template fails\r\n                try {\r\n                    const userImg = new Image();\r\n                    userImg.onload = () => {\r\n                        previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);\r\n                        previewCtx.save();\r\n                        previewCtx.beginPath();\r\n                        previewCtx.arc(previewCanvas.width \/ 2, previewCanvas.height \/ 2, previewCanvas.width \/ 2, 0, Math.PI * 2);\r\n                        previewCtx.closePath();\r\n                        previewCtx.clip();\r\n                        previewCtx.drawImage(userImg, 0, 0, previewCanvas.width, previewCanvas.height);\r\n                        previewCtx.restore();\r\n                        previewCanvas.removeAttribute('data-placeholder');\r\n                    }\r\n                    userImg.onerror = () => clearPreview(); \/\/ Fallback if user image also fails\r\n                    userImg.src = croppedCanvas.toDataURL();\r\n\r\n                } catch (drawError) {\r\n                    console.error(\"Error drawing fallback user image:\", drawError);\r\n                    clearPreview(); \/\/ Fallback to clearing if even user image fails\r\n                }\r\n            });\r\n        }\r\n        \/\/ Case 3: No template is selected, just show the cropped user image\r\n        else {\r\n             loadImage(croppedCanvas.toDataURL())\r\n             .then(userImage => {\r\n                previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);\r\n                previewCtx.save();\r\n                previewCtx.beginPath();\r\n                previewCtx.arc(previewCanvas.width \/ 2, previewCanvas.height \/ 2, previewCanvas.width \/ 2, 0, Math.PI * 2);\r\n                previewCtx.closePath();\r\n                previewCtx.clip();\r\n                previewCtx.drawImage(userImage, 0, 0, previewCanvas.width, previewCanvas.height);\r\n                previewCtx.restore();\r\n                previewCanvas.removeAttribute('data-placeholder');\r\n             })\r\n             .catch(error => {\r\n                 console.error(\"Error loading user image for preview:\", error);\r\n                 showStyledAlert(\"\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0648\u0631\u0629 \u0644\u0644\u0645\u0639\u0627\u064a\u0646\u0629.\");\r\n                 clearPreview();\r\n             });\r\n        }\r\n    }\r\n\r\n    \/\/ --- Saving the Image ---\r\n    function saveImage() {\r\n      const saveButton = document.getElementById('saveButton');\r\n      if (!cropper || saveButton.disabled) { \/\/ Check if cropper exists or button is disabled\r\n        showStyledAlert(\"\u064a\u0631\u062c\u0649 \u0631\u0641\u0639 \u0635\u0648\u0631\u0629 \u0623\u0648\u0644\u0627\u064b \u0648\u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0639\u062f\u0645 \u0627\u0644\u062a\u0644\u0627\u0639\u0628 \u0628\u0627\u0644\u0643\u0648\u062f.\");\r\n        return;\r\n      }\r\n      \/\/ Ensure the preview has been rendered recently\r\n      renderPreview();\r\n\r\n      \/\/ Use setTimeout to allow the canvas to update fully\r\n      setTimeout(() => {\r\n          try {\r\n               if (isPreviewBlank()) {\r\n                   showStyledAlert(\"\u0644\u0627 \u064a\u0645\u0643\u0646 \u062d\u0641\u0638 \u0635\u0648\u0631\u0629 \u0641\u0627\u0631\u063a\u0629. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0627\u0644\u0645\u0639\u0627\u064a\u0646\u0629 \u062a\u0638\u0647\u0631 \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d.\");\r\n                   return;\r\n               }\r\n               const dataURL = previewCanvas.toDataURL('image\/png');\r\n               const link = document.createElement('a');\r\n               link.download = 'profile-picture-bakry.png'; \/\/ Default filename\r\n               link.href = dataURL;\r\n               document.body.appendChild(link);\r\n               link.click();\r\n               document.body.removeChild(link);\r\n          } catch (e) {\r\n               console.error(\"Error saving image:\", e);\r\n               let message = \"\u062d\u062f\u062b \u062e\u0637\u0623 \u0623\u062b\u0646\u0627\u0621 \u0645\u062d\u0627\u0648\u0644\u0629 \u062d\u0641\u0638 \u0627\u0644\u0635\u0648\u0631\u0629.\";\r\n               if (e.name === 'SecurityError') {\r\n                    message += \" \u0642\u062f \u064a\u0643\u0648\u0646 \u0627\u0644\u0633\u0628\u0628 \u0645\u0634\u0643\u0644\u0629 \u0641\u064a \u0627\u0644\u0623\u0645\u0627\u0646 (CORS) \u0645\u0639 \u0631\u0627\u0628\u0637 \u0627\u0644\u0642\u0627\u0644\u0628 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645. \u062d\u0627\u0648\u0644 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629 \u064a\u0633\u0645\u062d \u0628\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0639\u0628\u0631 \u0627\u0644\u0646\u0637\u0627\u0642\u0627\u062a.\";\r\n               } else {\r\n                    message += \" \u0642\u062f \u062a\u0643\u0648\u0646 \u0627\u0644\u0635\u0648\u0631\u0629 \u0643\u0628\u064a\u0631\u0629 \u062c\u062f\u064b\u0627 \u0623\u0648 \u0647\u0646\u0627\u0643 \u0645\u0634\u0643\u0644\u0629 \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d.\";\r\n               }\r\n               showStyledAlert(message);\r\n          }\r\n      }, 150);\r\n    }\r\n\r\n    \/\/ Helper function to check if canvas is blank\r\n    function isPreviewBlank() {\r\n      const blank = document.createElement('canvas');\r\n      blank.width = previewCanvas.width;\r\n      blank.height = previewCanvas.height;\r\n      return previewCanvas.toDataURL() === blank.toDataURL();\r\n    }\r\n\r\n    \/\/ --- Styled Alert Box ---\r\n    function showStyledAlert(message) {\r\n        const existingAlert = document.getElementById('styled-alert-box');\r\n        if (existingAlert) existingAlert.remove(); \/\/ Remove any existing alert first\r\n\r\n        const alertBox = document.createElement('div');\r\n        alertBox.id = 'styled-alert-box';\r\n        const messageP = document.createElement('p');\r\n        const closeButton = document.createElement('button');\r\n\r\n        messageP.textContent = message;\r\n        closeButton.textContent = '\u0625\u063a\u0644\u0627\u0642';\r\n        closeButton.onclick = () => alertBox.remove();\r\n\r\n        alertBox.appendChild(messageP);\r\n        alertBox.appendChild(closeButton);\r\n        document.body.appendChild(alertBox);\r\n\r\n        \/\/ Auto-remove after 6 seconds\r\n        setTimeout(() => {\r\n            const currentAlert = document.getElementById('styled-alert-box');\r\n            if(currentAlert) {\r\n                currentAlert.remove();\r\n            }\r\n        } , 6000);\r\n    }\r\n\r\n    \/\/ --- Footer Integrity Check ---\r\n    function checkFooterIntegrity() {\r\n        const footerElement = document.querySelector('footer');\r\n        const uploadLabel = document.querySelector('.custom-file-upload');\r\n        const saveButton = document.getElementById('saveButton');\r\n\r\n        let isTampered = false;\r\n\r\n        if (!footerElement) {\r\n            console.error(\"Footer element not found!\");\r\n            isTampered = true;\r\n        } else if (footerElement.textContent.trim() !== EXPECTED_FOOTER_TEXT) {\r\n            console.error(\"Footer content has been modified!\");\r\n            isTampered = true;\r\n        }\r\n\r\n        if (isTampered) {\r\n            showStyledAlert(\" \u062a\u0645 \u062a\u0639\u062f\u064a\u0644 \u0627\u0648 \u0627\u0632\u0644\u0629 \u062d\u0642\u0648\u0642 \u0627\u0644\u0645\u0637\u0648\u0631 . \u0644\u0642\u062f \u062a\u0645 \u062a\u0639\u0637\u064a\u0644 \u0648\u0638\u0627\u0626\u0641 \u0627\u0644\u0635\u0641\u062d\u0629.\");\r\n            \/\/ Disable core functionality\r\n            if (uploadLabel) {\r\n                uploadLabel.setAttribute('disabled', 'true'); \/\/ Disable label visually\r\n                uploadLabel.style.pointerEvents = 'none'; \/\/ Prevent clicks\r\n            }\r\n            if (uploadInput) {\r\n                uploadInput.disabled = true;\r\n            }\r\n            if (saveButton) {\r\n                saveButton.disabled = true;\r\n            }\r\n            \/\/ Stop the check to prevent repeated alerts\r\n            if (footerCheckInterval) {\r\n                clearInterval(footerCheckInterval);\r\n            }\r\n        }\r\n    }\r\n\r\n    \/\/ --- Initial Setup ---\r\n    window.onload = () => {\r\n        \/\/ Apply dark mode styles by default (already done via CSS :root and body class)\r\n\r\n        \/\/ Initial setup\r\n        loadTemplates(); \/\/ Load templates on page load\r\n        clearPreview(); \/\/ Clear preview initially\r\n        cropperContainer.style.display = 'none';\r\n        image.style.display = 'none';\r\n\r\n        \/\/ Start periodic check for footer integrity after a short delay\r\n        setTimeout(() => {\r\n            footerCheckInterval = setInterval(checkFooterIntegrity, 3000); \/\/ Check every 3 seconds\r\n        }, 1000); \/\/ Start check 1 second after load\r\n\r\n    };\r\n\r\n    \/\/ Prevent right-click context menu\r\n    document.addEventListener('contextmenu', function(event) {\r\n      event.preventDefault();\r\n      showStyledAlert('\u0627\u0644\u0646\u0642\u0631 \u0628\u0632\u0631 \u0627\u0644\u0645\u0627\u0648\u0633 \u0627\u0644\u0623\u064a\u0645\u0646 \u063a\u064a\u0631 \u0645\u0633\u0645\u0648\u062d \u0628\u0647 \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062d\u0629.');\r\n    });\r\n\r\n    \/\/ Prevent developer tools shortcuts\r\n    document.addEventListener('keydown', function(event) {\r\n         \/\/ F12\r\n         if (event.key === 'F12' || event.keyCode === 123) {\r\n        event.preventDefault();\r\n        showStyledAlert('\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0637\u0648\u0631 (F12) \u0645\u0639\u0637\u0644\u0629 \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062d\u0629.');\r\n      }\r\n         \/\/ Ctrl+Shift+I\r\n         if (event.ctrlKey && event.shiftKey && (event.key === 'I' || event.key === 'i' || event.keyCode === 73)) {\r\n        event.preventDefault();\r\n        showStyledAlert('\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0645\u0637\u0648\u0631 \u0645\u0639\u0637\u0644\u0629 \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062d\u0629.');\r\n      }\r\n      \/\/ Ctrl+Shift+J\r\n      if (event.ctrlKey && event.shiftKey && (event.key === 'J' || event.key === 'j' || event.keyCode === 74)) {\r\n        event.preventDefault();\r\n        showStyledAlert('\u0648\u062d\u062f\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0645\u0639\u0637\u0644\u0629 \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062d\u0629.');\r\n      }\r\n      \/\/ Ctrl+Shift+C\r\n      if (event.ctrlKey && event.shiftKey && (event.key === 'C' || event.key === 'c' || event.keyCode === 67)) {\r\n        event.preventDefault();\r\n        showStyledAlert('\u0641\u062d\u0635 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0645\u0639\u0637\u0644 \u0641\u064a \u0647\u0630\u0647 \u0627\u0644\u0635\u0641\u062d\u0629.');\r\n      }\r\n      \/\/ Ctrl+U\r\n      if (event.ctrlKey && (event.key === 'U' || event.key === 'u' || event.keyCode === 85)) {\r\n        event.preventDefault();\r\n        showStyledAlert('\u0639\u0631\u0636 \u0645\u0635\u062f\u0631 \u0627\u0644\u0635\u0641\u062d\u0629 \u063a\u064a\u0631 \u0645\u0633\u0645\u0648\u062d \u0628\u0647.');\r\n      }\r\n    });\r\n\r\n  <\/script>\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0628\u0643\u0631\u0649 \u0644\u062a\u0635\u0645\u064a\u0645 \u0635\u0648\u0631\u0629 \u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0627\u0644\u0641\u064a\u0633 \u0628\u0648\u0643 \u0628\u0643\u0631\u0649 \u0644\u062a\u0635\u0645\u064a\u0645 \u0635\u0648\u0631\u0629 \u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0627\u0644\u0641\u064a\u0633 \u0628\u0648\u0643 \ud83d\udccc \u0627\u0644\u062e\u0637\u0648\u0629 \u0627\u0644\u0623\u0648\u0644\u0649: \u064a\u064f\u0631\u062c\u0649 \u0631\u0641\u0639 \u0635\u0648\u0631\u0629 \u0628\u062c\u0648\u062f\u0629 \u0639\u0627\u0644\u064a\u0629<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13391","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/pages\/13391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/comments?post=13391"}],"version-history":[{"count":34,"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/pages\/13391\/revisions"}],"predecessor-version":[{"id":13437,"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/pages\/13391\/revisions\/13437"}],"wp:attachment":[{"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/media?parent=13391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}