{"id":14701,"date":"2025-08-21T20:28:06","date_gmt":"2025-08-21T17:28:06","guid":{"rendered":"https:\/\/bakrykeys-com-316394.hostingersite.com\/?page_id=14701"},"modified":"2025-08-21T20:28:43","modified_gmt":"2025-08-21T17:28:43","slug":"%d9%85%d9%88%d9%84%d8%af-%d8%a7%d9%84%d9%87%d8%a7%d8%b4%d8%aa%d8%a7%d8%ac%d8%a7%d8%aa","status":"publish","type":"page","link":"https:\/\/bakrykeys.com\/en\/%d9%85%d9%88%d9%84%d8%af-%d8%a7%d9%84%d9%87%d8%a7%d8%b4%d8%aa%d8%a7%d8%ac%d8%a7%d8%aa\/","title":{"rendered":"\u0645\u0648\u0644\u062f \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"14701\" class=\"elementor elementor-14701\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"wd-negative-gap elementor-element elementor-element-a15b52d e-flex e-con-boxed e-con e-parent\" data-id=\"a15b52d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2403d5 elementor-widget elementor-widget-html\" data-id=\"c2403d5\" 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<!-- The dir and lang attributes will be set dynamically by JavaScript -->\r\n\r\n\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>Bakrykeys Hashtag Pro<\/title>\r\n\r\n  <!-- Google Font: Cairo -->\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700&amp;display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    \/* --- THEME VARIABLES --- *\/\r\n    :root {\r\n      \/* MODIFIED: Changed dark theme background to a black\/dark-gray gradient *\/\r\n      --bg-start-dark: #1a1a1a; --bg-end-dark: #000000;\r\n      --card-bg-dark: rgba(255,255,255,0.08); --card-border-dark: rgba(255,255,255,0.25);\r\n      --text-dark: #ffffff; --muted-dark: rgba(255,255,255,0.75);\r\n      --shadow-dark: 0 10px 30px rgba(0,0,0,0.25);\r\n\r\n      --bg-start-light: #f0f9ff; --bg-end-light: #f3e8ff;\r\n      --card-bg-light: #ffffff; --card-border-light: #e2e8f0;\r\n      --text-light: #1e293b; --muted-light: #64748b;\r\n      --shadow-light: 0 10px 25px rgba(0,0,0,0.1);\r\n\r\n      --accent: #22d3ee; --success: #34d399; --warning: #f59e0b;\r\n      --radius-2xl: 24px; --radius-xl: 16px; --radius-lg: 12px;\r\n      --radius-md: 10px; --ring: 0 0 0 3px rgba(34,211,238,0.35);\r\n    }\r\n\r\n    \/* --- THEME & LAYOUT --- *\/\r\n    body {\r\n      --bg-start: var(--bg-start-dark); --bg-end: var(--bg-end-dark); --card-bg: var(--card-bg-dark);\r\n      --card-border: var(--card-border-dark); --text: var(--text-dark); --muted: var(--muted-dark);\r\n      --shadow: var(--shadow-dark); --input-bg: rgba(0,0,0,0.25); --input-border: rgba(255,255,255,0.35);\r\n      --input-focus-bg: rgba(0,0,0,0.35); --btn-bg: rgba(255,255,255,0.08); --btn-hover-bg: rgba(255,255,255,0.14);\r\n      --chip-bg: rgba(255,255,255,0.06); --chip-hover-bg: rgba(255,255,255,0.12);\r\n      --kbd-bg: rgba(255,255,255,0.08); --footer-bg: linear-gradient(0deg, rgba(0,0,0,0.25), rgba(0,0,0,0));\r\n      --header-border: rgba(255,255,255,0.2);\r\n    }\r\n    body.light-theme {\r\n      --bg-start: var(--bg-start-light); --bg-end: var(--bg-end-light); --card-bg: var(--card-bg-light);\r\n      --card-border: var(--card-border-light); --text: var(--text-light); --muted: var(--muted-light);\r\n      --shadow: var(--shadow-light); --input-bg: #f1f5f9; --input-border: #cbd5e1;\r\n      --input-focus-bg: #e2e8f0; --btn-bg: #f8fafc; --btn-hover-bg: #f1f5f9;\r\n      --chip-bg: #f1f5f9; --chip-hover-bg: #e2e8f0; --kbd-bg: #e2e8f0;\r\n      --footer-bg: linear-gradient(0deg, rgba(0,0,0,0.03), rgba(0,0,0,0)); --header-border: #e2e8f0;\r\n    }\r\n    * { box-sizing: border-box; }\r\n    html { scroll-behavior: smooth; }\r\n    body {\r\n      margin: 0; font-family: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';\r\n      color: var(--text); background: linear-gradient(135deg, var(--bg-start), var(--bg-end));\r\n      display: grid; place-items: center; padding: 24px; min-height: 100vh;\r\n      transition: background .3s, color .3s;\r\n    }\r\n    .app {\r\n      width: min(980px, 100%); background: var(--card-bg); border: 1px solid var(--card-border);\r\n      border-radius: var(--radius-2xl); box-shadow: var(--shadow); backdrop-filter: blur(10px);\r\n      -webkit-backdrop-filter: blur(10px); overflow: hidden;\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      transform: translateY(10px);\r\n      transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s;\r\n    }\r\n    .app.visible {\r\n        opacity: 1;\r\n        visibility: visible;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    \/* --- Preloader Styles --- *\/\r\n    #preloader {\r\n      position: fixed;\r\n      inset: 0;\r\n      z-index: 9999;\r\n      display: grid;\r\n      place-items: center;\r\n      background: var(--bg-start-dark); \/* Use dark start color for preloader *\/\r\n      transition: opacity 0.5s ease, visibility 0.5s ease;\r\n    }\r\n    body.light-theme #preloader {\r\n        background: var(--bg-start-light);\r\n    }\r\n    .spinner {\r\n      width: 50px;\r\n      height: 50px;\r\n      border: 5px solid rgba(255, 255, 255, 0.2);\r\n      border-top-color: var(--accent);\r\n      border-radius: 50%;\r\n      animation: spin 1s linear infinite;\r\n    }\r\n    body.light-theme .spinner {\r\n        border-color: rgba(0,0,0,0.1);\r\n        border-top-color: var(--accent);\r\n    }\r\n    @keyframes spin {\r\n      to { transform: rotate(360deg); }\r\n    }\r\n\r\n\r\n    \/* --- HEADER & FOOTER --- *\/\r\n    header { padding: 28px 32px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }\r\n    .brand { display: flex; align-items: center; gap: 12px; }\r\n    .brand .logo {\r\n        width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;\r\n        background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,0.45), rgba(255,255,255,0.1));\r\n        border: 1px solid rgba(255,255,255,0.35); box-shadow: inset 0 0 30px rgba(255,255,255,0.15);\r\n    }\r\n    body.light-theme .brand .logo { background: var(--accent); border: none; box-shadow: none; }\r\n    .brand h1 { margin: 0; font-size: clamp(22px, 3vw, 28px); letter-spacing: 0.3px; font-family: 'Cairo', sans-serif; }\r\n    .brand h1 span { color: var(--accent); font-weight: 700; }\r\n    .subtitle { color: var(--muted); font-size: 14px; margin: 2px 0 0; font-family: 'Cairo', sans-serif; }\r\n    footer { padding: 14px 22px 20px; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid var(--header-border); background: var(--footer-bg); font-family: 'Cairo', sans-serif;}\r\n\r\n    \/* --- MAIN CONTENT & CARDS --- *\/\r\n    .container { padding: 10px 32px 28px; display: grid; grid-template-columns: 1fr; gap: 16px; }\r\n    .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 18px; }\r\n\r\n    \/* --- FORMS & BUTTONS --- *\/\r\n    .input-row { display: flex; flex-direction: column; gap: 12px; }\r\n    textarea {\r\n      width: 100%; min-height: 120px; padding: 14px; border-radius: var(--radius-lg);\r\n      border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text);\r\n      outline: none; transition: box-shadow .2s, border-color .2s, background .2s;\r\n      font-family: 'Cairo', sans-serif; font-size: 16px; resize: vertical;\r\n    }\r\n    \r\n    textarea::placeholder {\r\n        color: var(--muted);\r\n        opacity: 0.8;\r\n    }\r\n    textarea:focus { box-shadow: var(--ring); border-color: rgba(34,211,238,0.6); background: var(--input-focus-bg); }\r\n    .btn {\r\n      padding: 12px 16px; border-radius: var(--radius-lg); border: 1px solid var(--input-border);\r\n      background: var(--btn-bg); color: var(--text); cursor: pointer; display: inline-flex;\r\n      align-items: center; justify-content: center; gap: 10px; font-weight: 600;\r\n      transition: transform .1s ease, background .2s, border-color .2s; user-select: none; white-space: nowrap;\r\n      font-family: 'Cairo', sans-serif;\r\n    }\r\n    .btn:hover { background: var(--btn-hover-bg); }\r\n    .btn:active { transform: translateY(1px); }\r\n    .btn:disabled { opacity: 0.5; cursor: not-allowed; }\r\n\r\n    \/* --- Input Meta Styles --- *\/\r\n    .input-meta {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-top: 12px;\r\n        gap: 12px;\r\n    }\r\n    .char-counter {\r\n        font-size: 13px;\r\n        color: var(--muted);\r\n        font-family: 'Cairo', sans-serif;\r\n    }\r\n    .char-counter strong {\r\n        color: var(--text);\r\n        font-weight: 600;\r\n    }\r\n\r\n\r\n    \/* --- OPTIONS & SWITCH --- *\/\r\n    .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 14px; margin-top: 14px; }\r\n    .option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px dashed var(--input-border); background: var(--chip-bg); font-size: 14px; color: var(--muted); font-family: 'Cairo', sans-serif; }\r\n    .switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }\r\n    .switch input { display: none; }\r\n    .slider { position: absolute; inset: 0; border-radius: 999px; background: rgba(127,127,127,0.25); transition: background .25s; border: 1px solid var(--input-border); }\r\n    .slider::after { content: \"\"; position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: inset-inline-start .25s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }\r\n    .switch input:checked + .slider { background: rgba(34,211,238,0.5); border-color: rgba(34,211,238,0.8); }\r\n    .switch input:checked + .slider::after { inset-inline-start: 22px; }\r\n\r\n    \/* --- RESULTS & CHIPS --- *\/\r\n    .results-area { display: flex; flex-direction: column; gap: 8px; }\r\n    .result-row { display: flex; align-items: center; gap: 10px; background: var(--input-bg); padding: 8px; border-radius: var(--radius-lg); border: 1px solid var(--input-border); }\r\n    .result-row > span { flex-grow: 1; font-size: 18px; user-select: all; padding: 0 8px; font-family: 'Cairo', sans-serif; }\r\n    .card-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }\r\n    .card-header .title { font-size: 13px; color: var(--muted); margin: 0; display: flex; align-items: center; gap: 6px; font-family: 'Cairo', sans-serif; }\r\n    .variations, .history-chips { display: flex; flex-wrap: wrap; gap: 10px; }\r\n    .chip { padding: 10px 12px; border-radius: 999px; border: 1px solid var(--input-border); background: var(--chip-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; cursor: pointer; user-select: none; transition: background .15s; font-family: 'Cairo', sans-serif; }\r\n    .chip:hover { background: var(--chip-hover-bg); }\r\n\r\n    \/* --- Hashtag Counter Styles --- *\/\r\n    .title-with-count { display: flex; align-items: center; gap: 10px; }\r\n    .counter-chip {\r\n        background-color: var(--chip-bg);\r\n        color: var(--muted);\r\n        font-size: 12px;\r\n        font-weight: 600;\r\n        padding: 4px 10px;\r\n        border-radius: 999px;\r\n        border: 1px solid var(--input-border);\r\n        transition: background .15s, border-color .15s;\r\n    }\r\n\r\n    \/* --- UTILITIES --- *\/\r\n    .controls-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }\r\n    .tooltip { position: absolute; top: -34px; inset-inline-end: 0; background: rgba(17,17,17,0.9); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 6px 10px; border-radius: 10px; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s, transform .15s; z-index: 10; font-family: 'Cairo', sans-serif; }\r\n    body.light-theme .tooltip { background: #1e293b; border: none; }\r\n    .tooltip.show { opacity: 1; transform: translateY(0); }\r\n    .btn-sm { padding: 6px 10px; font-size: 12px; gap: 6px; }\r\n\r\n    \/* --- RESPONSIVE DESIGN --- *\/\r\n    @media (max-width: 768px) { .controls-row { justify-content: flex-start; } }\r\n    @media (max-width: 520px) {\r\n      body { padding: 16px; }\r\n      header { padding: 22px 18px 10px; }\r\n      .container { padding: 8px 18px 22px; }\r\n    }\r\n  <\/style>\r\n\r\n\r\n  <div id=\"preloader\">\r\n    <div class=\"spinner\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"app\" role=\"application\">\r\n    <header>\r\n      <div class=\"brand\">\r\n        <div class=\"logo\" aria-hidden=\"true\">\r\n          <svg width=\"22\" height=\"22\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n            <path d=\"M10 3L8 21M16 3L14 21M4 9H22M2 15H20\" stroke=\"#fff\" stroke-width=\"1.6\" stroke-linecap=\"round\"><\/path>\r\n          <\/svg>\r\n        <\/div>\r\n        <div>\r\n          <h1>bakrykeys <span>hashtag<\/span><\/h1>\r\n          <p class=\"subtitle\" data-lang=\"subtitle\">\u062d\u0648\u0651\u0644 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0625\u0644\u0649 \u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0641\u0648\u0631\u0627\u064b<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"controls-row\">\r\n        <button id=\"langToggle\" class=\"btn\" type=\"button\" data-lang-title=\"toggleLangTitle\">\r\n          <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\r\n            <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <path d=\"M2 12H22\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n            <path d=\"M12 2C14.5013 4.73835 15.9228 8.2827 16 12C15.9228 15.7173 14.5013 19.2617 12 22C9.49872 19.2617 8.07725 15.7173 8 12C8.07725 8.2827 9.49872 4.73835 12 2V2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\r\n          <\/svg>\r\n          <span id=\"langToggleText\">English<\/span>\r\n        <\/button>\r\n        <button id=\"themeToggle\" class=\"btn\" type=\"button\" data-lang-title=\"toggleThemeTitle\">\r\n          <svg id=\"themeIcon\" width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M12 18a6 6 0 100-12 6 6 0 000 12zM22 12h-2M4 12H2M12 4V2M12 22v-2M19.07 4.93l-1.41 1.41M6.34 17.66l-1.41 1.41M19.07 19.07l-1.41-1.41M6.34 6.34L4.93 4.93\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\r\n        <\/button>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <section class=\"container\">\r\n      <!-- Input Card -->\r\n      <div class=\"card\">\r\n        <div class=\"input-row\">\r\n          <textarea id=\"wordInput\" dir=\"auto\" data-lang-placeholder=\"inputPlaceholder\"><\/textarea>\r\n        <\/div>\r\n        <div class=\"input-meta\">\r\n            <span id=\"charCounter\" class=\"char-counter\"><\/span>\r\n            <button id=\"clearBtn\" class=\"btn\" type=\"button\">\r\n                <svg width=\"18\" height=\"18\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M3 14l7-7a2 2 0 012.83 0l5.17 5.17a2 2 0 010 2.83l-5 5A2 2 0 0112 21H7a2 2 0 01-1.41-.59l-2.6-2.6A2 2 0 013 16v-2z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\r\n                <span data-lang=\"clearBtn\">\u0645\u0633\u062d<\/span>\r\n            <\/button>\r\n        <\/div>\r\n        <!-- Options -->\r\n        <div class=\"options\"> \r\n          <label class=\"option\" for=\"lowerLatin\"><span class=\"switch\"><input type=\"checkbox\" id=\"lowerLatin\"><span class=\"slider\"><\/span><\/span><span data-lang=\"optLowercase\">\u0623\u062d\u0631\u0641 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0635\u063a\u064a\u0631\u0629 (lowercase)<\/span><\/label>\r\n          <label class=\"option\" for=\"underscores\"><span class=\"switch\"><input type=\"checkbox\" id=\"underscores\"><span class=\"slider\"><\/span><\/span><span data-lang=\"optUnderscores\">\u0627\u0633\u062a\u0628\u062f\u0627\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u0640 _<\/span><\/label>\r\n          <label class=\"option\" for=\"stripTashkeel\"><span class=\"switch\"><input type=\"checkbox\" id=\"stripTashkeel\"><span class=\"slider\"><\/span><\/span><span data-lang=\"optTashkeel\">\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062a\u0634\u0643\u064a\u0644 \u0645\u0646 \u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/span><\/label>\r\n          <label class=\"option\" for=\"cleanSymbols\"><span class=\"switch\"><input type=\"checkbox\" id=\"cleanSymbols\"><span class=\"slider\"><\/span><\/span><span data-lang=\"optSymbols\">\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0631\u0645\u0648\u0632 \u0627\u0644\u0632\u0627\u0626\u062f\u0629<\/span><\/label>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <!-- Results Card -->\r\n      <div class=\"card\" aria-live=\"polite\">\r\n          <div class=\"card-header\">\r\n              <div class=\"title-with-count\">\r\n                <p class=\"title\" data-lang=\"resultsTitle\">\u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0627\u0644\u0646\u0627\u062a\u062c\u0629<\/p>\r\n                <span id=\"hashtagCounter\" class=\"counter-chip\" data-lang-title=\"hashtagCountTitle\">0<\/span>\r\n              <\/div>\r\n              <button id=\"copyAllResultsBtn\" class=\"btn btn-sm\" type=\"button\" disabled>\r\n                  <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.4\"><\/rect><rect x=\"4\" y=\"4\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.4\"><\/rect><\/svg>\r\n                  <span data-lang=\"copyAllBtn\">\u0646\u0633\u062e \u0627\u0644\u0643\u0644<\/span>\r\n              <\/button>\r\n          <\/div>\r\n          <div style=\"position: relative;\">\r\n            <div id=\"copyTip\" class=\"tooltip\" data-lang=\"copySuccess\">\u062a\u0645 \u0627\u0644\u0646\u0633\u062e \u2705<\/div>\r\n            <div class=\"results-area\" id=\"resultsContainer\">\r\n              <span style=\"color: var(--muted)\" data-lang=\"resultsPlaceholder\"> \u0633\u062a\u0638\u0647\u0631 \u0647\u0646\u0627<\/span>\r\n            <\/div>\r\n          <\/div>\r\n      <\/div>\r\n\r\n      <!-- History Card -->\r\n      <div class=\"card\">\r\n        <div class=\"card-header\">\r\n          <p class=\"title\">\r\n            <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.4\"><\/circle><path d=\"M12 7v6l4 2\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\"><\/path><\/svg>\r\n            <span data-lang=\"historyTitle\">\u0622\u062e\u0631 5 \u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a<\/span>\r\n          <\/p>\r\n          <button id=\"clearHistoryBtn\" class=\"btn btn-sm\" type=\"button\">\r\n            <svg width=\"14\" height=\"14\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\"><path d=\"M3 6h18M5 6v14a2 2 0 002 2h10a2 2 0 002-2V6M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg>\r\n            <span data-lang=\"clearHistoryBtn\">\u0645\u0633\u062d<\/span>\r\n          <\/button>\r\n        <\/div>\r\n        <div class=\"history-chips\" id=\"historyChipsContainer\"><\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <footer id=\"footer-text\">\r\n      <!-- Content set by JS -->\r\n    <\/footer>\r\n  <\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    \/\/ --- DOM Elements ---\r\n    const $ = (sel) => document.querySelector(sel);\r\n    const el = {\r\n        html: document.documentElement,\r\n        body: document.body,\r\n        input: $('#wordInput'),\r\n        resultsContainer: $('#resultsContainer'),\r\n        copyTip: $('#copyTip'),\r\n        historyContainer: $('#historyChipsContainer'),\r\n        clearBtn: $('#clearBtn'),\r\n        copyAllResultsBtn: $('#copyAllResultsBtn'),\r\n        clearHistoryBtn: $('#clearHistoryBtn'),\r\n        themeToggle: $('#themeToggle'),\r\n        langToggle: $('#langToggle'),\r\n        langToggleText: $('#langToggleText'),\r\n        footer: $('#footer-text'),\r\n        hashtagCounter: $('#hashtagCounter'),\r\n        charCounter: $('#charCounter'),\r\n        preloader: $('#preloader'),\r\n        appContainer: $('.app'),\r\n        opt: {\r\n            lowerLatin: $('#lowerLatin'), underscores: $('#underscores'),\r\n            stripTashkeel: $('#stripTashkeel'), cleanSymbols: $('#cleanSymbols'),\r\n        }\r\n    };\r\n\r\n    \/\/ --- Translation Strings ---\r\n    const translations = {\r\n        ar: {\r\n            subtitle: \"\u062d\u0648\u0651\u0644 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0625\u0644\u0649 \u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0641\u0648\u0631\u0627\u064b\",\r\n            inputPlaceholder: \"\u0627\u0643\u062a\u0628 \u0643\u0644\u0645\u0629 \u0623\u0648 \u0623\u0643\u062b\u0631\u060c \u0643\u0644 \u0643\u0644\u0645\u0629 \u0641\u064a \u0633\u0637\u0631 \u062c\u062f\u064a\u062f \u0623\u0648 \u0627\u0641\u0635\u0644 \u0628\u064a\u0646\u0647\u0627 \u0628\u0641\u0627\u0635\u0644\u0629\",\r\n            clearBtn: \"\u0645\u0633\u062d\",\r\n            optLowercase: \"\u0623\u062d\u0631\u0641 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0635\u063a\u064a\u0631\u0629 (lowercase)\",\r\n            optUnderscores: \"\u0627\u0633\u062a\u0628\u062f\u0627\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u0640 _\",\r\n            optTashkeel: \"\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u062a\u0634\u0643\u064a\u0644 \u0645\u0646 \u0627\u0644\u0639\u0631\u0628\u064a\u0629\",\r\n            optSymbols: \"\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0631\u0645\u0648\u0632 \u0627\u0644\u0632\u0627\u0626\u062f\u0629\",\r\n            resultsTitle: \"\u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0627\u0644\u0646\u0627\u062a\u062c\u0629\",\r\n            copyAllBtn: \"\u0646\u0633\u062e \u0627\u0644\u0643\u0644\",\r\n            resultsPlaceholder: \"#\u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0633\u062a\u0638\u0647\u0631 \u0647\u0646\u0627\",\r\n            historyTitle: \"\u0622\u062e\u0631 5 \u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a\",\r\n            clearHistoryBtn: \"\u0645\u0633\u062d\",\r\n            copySuccess: \"\u062a\u0645 \u0627\u0644\u0646\u0633\u062e \u2705\",\r\n            copyBtn: \"\u0646\u0633\u062e\",\r\n            confirmClearHistory: \"\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646\u0643 \u062a\u0631\u064a\u062f \u0645\u0633\u062d \u0627\u0644\u0633\u062c\u0644\u061f\",\r\n            footer: \"\u0635\u0646\u0639 \u0628\u0643\u0644 \u0641\u062e\u0631 \u0628\u0623\u064a\u062f\u064a \u0645\u0635\u0631\u064a\u0629 &bull; \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0647\u0646\u062f\u0633 \u0645\u062d\u0645\u062f \u0628\u0643\u0631\u064a\",\r\n            toggleLangTitle: \"\u062a\u0628\u062f\u064a\u0644 \u0625\u0644\u0649 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629\",\r\n            toggleThemeTitle: \"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0645\u0638\u0647\u0631\",\r\n            hashtagCountTitle: \"\u0639\u062f\u062f \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a\",\r\n            charCounterLabel: \"\u0627\u0644\u0623\u062d\u0631\u0641\"\r\n        },\r\n        en: {\r\n            subtitle: \"Instantly turn words into professional hashtags\",\r\n            inputPlaceholder: \"Enter one or more words, each on a new line or separated by a comma\",\r\n            clearBtn: \"Clear\",\r\n            optLowercase: \"Automatic lowercase for English\",\r\n            optUnderscores: \"Replace spaces with _\",\r\n            optTashkeel: \"Remove Arabic diacritics\",\r\n            optSymbols: \"Remove extra symbols\",\r\n            resultsTitle: \"Generated Hashtags\",\r\n            copyAllBtn: \"Copy All\",\r\n            resultsPlaceholder: \"#Hashtags will appear here\",\r\n            historyTitle: \"Last 5 Hashtags\",\r\n            clearHistoryBtn: \"Clear\",\r\n            copySuccess: \"Copied \u2705\",\r\n            copyBtn: \"Copy\",\r\n            confirmClearHistory: \"Are you sure you want to clear the history?\",\r\n            footer: \"Proudly made in Egypt &bull; Developed by Eng. Mohamed Bakry\",\r\n            toggleLangTitle: \"Switch to Arabic\",\r\n            toggleThemeTitle: \"Toggle Theme\",\r\n            hashtagCountTitle: \"Hashtag Count\",\r\n            charCounterLabel: \"Characters\"\r\n        }\r\n    };\r\n\r\n    \/\/ --- Constants & State ---\r\n    const STORAGE_KEYS = {\r\n        HISTORY: 'bk_hashtag_history_v3', OPTIONS: 'bk_hashtag_options_v3',\r\n        THEME: 'bk_hashtag_theme_v1', LANGUAGE: 'bk_hashtag_lang_v1'\r\n    };\r\n    let currentLang = 'ar';\r\n    const moonIcon = `<path d=\"M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>`;\r\n    const sunIcon = `<path d=\"M12 18a6 6 0 100-12 6 6 0 000 12zM22 12h-2M4 12H2M12 4V2M12 22v-2M19.07 4.93l-1.41 1.41M6.34 17.66l-1.41 1.41M19.07 19.07l-1.41-1.41M6.34 6.34L4.93 4.93\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>`;\r\n\r\n    \/\/ --- Utility Functions ---\r\n    const arabicDiacritics = \/[\\u0610-\\u061A\\u064B-\\u065F\\u06D6-\\u06DC\\u06DF-\\u06E8\\u06EA-\\u06ED]\/g;\r\n    const stripTashkeel = (text) => text.replace(arabicDiacritics, '');\r\n    const normalizeInput = (text) => text.replace(\/[\\s\\t\\n\\r,]+\/g, ' ').trim();\r\n    const removeSymbols = (text) => text.replace(\/[^\\u0600-\\u06FF\\w\\s\\u0660-\\u0669_]\/g, '');\r\n    const toLowerLatin = (text) => text.toLowerCase();\r\n\r\n    \/\/ --- Core Logic ---\r\n    function processText(raw) {\r\n        let t = normalizeInput(raw);\r\n        if (el.opt.stripTashkeel.checked) t = stripTashkeel(t);\r\n        if (el.opt.cleanSymbols.checked) t = removeSymbols(t);\r\n        if (el.opt.lowerLatin.checked) t = toLowerLatin(t);\r\n        let base = el.opt.underscores.checked ? t.replace(\/\\s+\/g, '_') : t.replace(\/\\s+\/g, '');\r\n        return { base };\r\n    }\r\n\r\n    \/\/ --- UI Rendering ---\r\n    function renderResults(tags) {\r\n        el.hashtagCounter.textContent = tags.length;\r\n        \r\n        el.resultsContainer.innerHTML = '';\r\n        if (tags.length === 0) {\r\n            el.resultsContainer.innerHTML = `<span style=\"color: var(--muted)\" data-lang=\"resultsPlaceholder\">${translations[currentLang].resultsPlaceholder}`;\r\n            el.copyAllResultsBtn.disabled = true;\r\n            return;\r\n        }\r\n        tags.forEach(tag => {\r\n            const row = document.createElement('div');\r\n            row.className = 'result-row';\r\n            const text = document.createElement('span');\r\n            text.textContent = tag;\r\n            text.dir = 'auto';\r\n            const button = document.createElement('button');\r\n            button.className = 'btn btn-sm';\r\n            button.innerHTML = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><rect x=\"4\" y=\"4\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.4\"\/> <span data-lang=\"copyBtn\">${translations[currentLang].copyBtn}`;\r\n            button.onclick = () => copyToClipboard(tag);\r\n            row.appendChild(text);\r\n            row.appendChild(button);\r\n            el.resultsContainer.appendChild(row);\r\n        });\r\n        el.copyAllResultsBtn.disabled = false;\r\n    }\r\n\r\n    function renderHistory() {\r\n        const items = getFromStorage(STORAGE_KEYS.HISTORY, []);\r\n        el.historyContainer.innerHTML = '';\r\n        items.forEach(tag => {\r\n            const chip = document.createElement('div');\r\n            chip.className = 'chip';\r\n            chip.textContent = tag;\r\n            chip.title = `${translations[currentLang].copyBtn}: ${tag}`;\r\n            chip.addEventListener('click', () => copyToClipboard(tag));\r\n            el.historyContainer.appendChild(chip);\r\n        });\r\n        el.clearHistoryBtn.disabled = items.length === 0;\r\n    }\r\n\r\n    \/\/ --- Main Refresh Function ---\r\n    function refresh() {\r\n        const rawInput = el.input.value;\r\n        const keywords = rawInput.split(\/[\\n,]\/).map(k => k.trim()).filter(Boolean);\r\n        const generatedTags = keywords.map(keyword => {\r\n            const { base } = processText(keyword);\r\n            return base ? '#' + base : null;\r\n        }).filter(Boolean);\r\n\r\n        renderResults(generatedTags);\r\n        if (generatedTags.length > 0) {\r\n            updateHistory(generatedTags[0]);\r\n        }\r\n    }\r\n    \r\n    function updateCharCounter() {\r\n        const count = el.input.value.length;\r\n        el.charCounter.innerHTML = `${translations[currentLang].charCounterLabel}: <strong>${count}`;\r\n    }\r\n\r\n    \/\/ --- Language & Theme ---\r\n    function setLanguage(lang) {\r\n        currentLang = lang;\r\n        el.html.lang = lang;\r\n        el.html.dir = lang === 'ar' ? 'rtl' : 'ltr';\r\n        const langStrings = translations[lang];\r\n        document.querySelectorAll('[data-lang]').forEach(elem => {\r\n            const key = elem.getAttribute('data-lang');\r\n            if (langStrings[key]) {\r\n                elem.textContent = langStrings[key];\r\n            }\r\n        });\r\n        document.querySelectorAll('[data-lang-placeholder]').forEach(elem => {\r\n            const key = elem.getAttribute('data-lang-placeholder');\r\n            if (langStrings[key]) {\r\n                elem.placeholder = langStrings[key];\r\n            }\r\n        });\r\n        document.querySelectorAll('[data-lang-title]').forEach(elem => {\r\n            const key = elem.getAttribute('data-lang-title');\r\n            if (langStrings[key]) {\r\n                elem.title = langStrings[key];\r\n            }\r\n        });\r\n        el.footer.innerHTML = langStrings.footer;\r\n        el.langToggleText.textContent = lang === 'ar' ? 'English' : '\u0627\u0644\u0639\u0631\u0628\u064a\u0629';\r\n        saveToStorage(STORAGE_KEYS.LANGUAGE, lang);\r\n        renderHistory(); \r\n        updateCharCounter();\r\n    }\r\n\r\n    \/\/ --- Local Storage & State ---\r\n    const getFromStorage = (key, fallback) => { try { const i = localStorage.getItem(key); return i ? JSON.parse(i) : fallback; } catch (e) { return fallback; } };\r\n    const saveToStorage = (key, value) => localStorage.setItem(key, JSON.stringify(value));\r\n\r\n    function updateHistory(tag) {\r\n        if (!tag || tag === '#') return;\r\n        let items = getFromStorage(STORAGE_KEYS.HISTORY, []);\r\n        items = [tag, ...items.filter(x => x !== tag)];\r\n        if (items.length > 5) items.length = 5;\r\n        saveToStorage(STORAGE_KEYS.HISTORY, items);\r\n        renderHistory();\r\n    }\r\n    \r\n    function saveOptions() {\r\n        const state = { lowerLatin: el.opt.lowerLatin.checked, underscores: el.opt.underscores.checked, stripTashkeel: el.opt.stripTashkeel.checked, cleanSymbols: el.opt.cleanSymbols.checked };\r\n        saveToStorage(STORAGE_KEYS.OPTIONS, state);\r\n    }\r\n\r\n    function loadState() {\r\n        const savedOptions = getFromStorage(STORAGE_KEYS.OPTIONS, null);\r\n        if (savedOptions) {\r\n            Object.keys(savedOptions).forEach(key => { if(el.opt[key]) el.opt[key].checked = savedOptions[key]; });\r\n        } else { \r\n            el.opt.lowerLatin.checked = true; el.opt.underscores.checked = true;\r\n            el.opt.stripTashkeel.checked = true; el.opt.cleanSymbols.checked = true;\r\n        }\r\n        const savedTheme = localStorage.getItem(STORAGE_KEYS.THEME);\r\n        if (savedTheme === 'light') {\r\n            el.body.classList.add('light-theme');\r\n            $('#themeIcon').innerHTML = moonIcon;\r\n        } else {\r\n            $('#themeIcon').innerHTML = sunIcon;\r\n        }\r\n        const savedLang = getFromStorage(STORAGE_KEYS.LANGUAGE, 'ar');\r\n        setLanguage(savedLang);\r\n    }\r\n\r\n    \/\/ --- Actions & Event Handlers ---\r\n    function showTooltip() {\r\n        el.copyTip.classList.add('show');\r\n        setTimeout(() => el.copyTip.classList.remove('show'), 1200);\r\n    }\r\n\r\n    async function copyToClipboard(text) {\r\n        if (!text) return;\r\n        try { await navigator.clipboard.writeText(text); showTooltip(); } catch (e) {\r\n            const ta = document.createElement('textarea'); ta.value = text; document.body.appendChild(ta);\r\n            ta.select(); document.execCommand('copy'); document.body.removeChild(ta); showTooltip();\r\n        }\r\n    }\r\n\r\n    el.input.addEventListener('input', () => {\r\n        refresh();\r\n        updateCharCounter();\r\n    });\r\n\r\n    el.clearBtn.addEventListener('click', () => { \r\n        el.input.value = ''; \r\n        refresh(); \r\n        updateCharCounter();\r\n        el.input.focus(); \r\n    });\r\n\r\n    Object.values(el.opt).forEach(ctrl => ctrl.addEventListener('change', () => { saveOptions(); refresh(); }));\r\n\r\n    el.copyAllResultsBtn.addEventListener('click', () => {\r\n        const allTags = Array.from(document.querySelectorAll('.result-row > span')).map(span => span.textContent).join(' ');\r\n        copyToClipboard(allTags);\r\n    });\r\n\r\n    el.clearHistoryBtn.addEventListener('click', () => {\r\n        if (confirm(translations[currentLang].confirmClearHistory)) {\r\n            localStorage.removeItem(STORAGE_KEYS.HISTORY);\r\n            renderHistory();\r\n        }\r\n    });\r\n\r\n    el.themeToggle.addEventListener('click', () => {\r\n        el.body.classList.toggle('light-theme');\r\n        const isLight = el.body.classList.contains('light-theme');\r\n        localStorage.setItem(STORAGE_KEYS.THEME, isLight ? 'light' : 'dark');\r\n        $('#themeIcon').innerHTML = isLight ? moonIcon : sunIcon;\r\n    });\r\n\r\n    el.langToggle.addEventListener('click', () => {\r\n        const newLang = currentLang === 'ar' ? 'en' : 'ar';\r\n        setLanguage(newLang);\r\n    });\r\n\r\n    \/\/ --- Initialization ---\r\n    function initializeApp() {\r\n        loadState();\r\n        renderHistory();\r\n        refresh();\r\n        updateCharCounter();\r\n    }\r\n\r\n    \/\/ NEW: Delay logic\r\n    setTimeout(() => {\r\n        \/\/ Fade out preloader\r\n        el.preloader.style.opacity = '0';\r\n        el.preloader.style.visibility = 'hidden';\r\n        \r\n        \/\/ After preloader is hidden, show the app\r\n        el.preloader.addEventListener('transitionend', () => {\r\n            el.preloader.style.display = 'none';\r\n        });\r\n\r\n        \/\/ Initialize the main app logic\r\n        initializeApp();\r\n\r\n        \/\/ Fade in app\r\n        el.appContainer.classList.add('visible');\r\n        el.input.focus();\r\n\r\n    }, 3000); \/\/ 3-second delay\r\n});\r\n<\/script>\r\n\r\n\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div><div class=\"hashtag-wrapper\"><a href=\"https:\/\/bakrykeys.com\/?s=%D8%A7%D9%84%D9%87%D8%A7%D8%B4%D8%AA%D8%A7%D8%AC%D8%A7%D8%AA&#038;post_type=product\" class=\"custom-hashtag-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"\u0628\u062d\u062b \u0639\u0646: \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a\" aria-label=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u0646\u062a\u062c: \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a\" data-tag=\"\u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a\"><span class=\"hashtag-icon\">\ud83d\udd0d<\/span> \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Bakrykeys Hashtag Pro bakrykeys hashtag \u062d\u0648\u0651\u0644 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0625\u0644\u0649 \u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0641\u0648\u0631\u0627\u064b English \u0645\u0633\u062d \u0623\u062d\u0631\u0641 \u0625\u0646\u062c\u0644\u064a\u0632\u064a\u0629 \u0635\u063a\u064a\u0631\u0629 (lowercase) \u0627\u0633\u062a\u0628\u062f\u0627\u0644 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u0640<\/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-14701","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/pages\/14701","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=14701"}],"version-history":[{"count":4,"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/pages\/14701\/revisions"}],"predecessor-version":[{"id":14705,"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/pages\/14701\/revisions\/14705"}],"wp:attachment":[{"href":"https:\/\/bakrykeys.com\/en\/wp-json\/wp\/v2\/media?parent=14701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}