{"id":179328,"date":"2025-04-02T21:38:45","date_gmt":"2025-04-02T21:38:45","guid":{"rendered":"https:\/\/travel2egypt.org\/%e3%81%8a%e5%90%8d%e5%89%8d%e3%82%92%e3%83%92%e3%82%a8%e3%83%ad%e3%82%b0%e3%83%aa%e3%83%95%e3%81%a7\/"},"modified":"2025-04-03T01:07:17","modified_gmt":"2025-04-03T01:07:17","slug":"%e3%81%8a%e5%90%8d%e5%89%8d%e3%82%92%e3%83%92%e3%82%a8%e3%83%ad%e3%82%b0%e3%83%aa%e3%83%95%e3%81%a7","status":"publish","type":"page","link":"https:\/\/travel2egypt.org\/ja\/%e3%81%8a%e5%90%8d%e5%89%8d%e3%82%92%e3%83%92%e3%82%a8%e3%83%ad%e3%82%b0%e3%83%aa%e3%83%95%e3%81%a7\/","title":{"rendered":"\u304a\u540d\u524d\u3092\u30d2\u30a8\u30ed\u30b0\u30ea\u30d5\u3067"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Hieroglyphs Translator<\/title>\r\n <!-- Include Lucide Icons via CDN -->\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\/dist\/umd\/lucide.min.js\"><\/script>\r\n <style>\r\n \/* Basic Reset & Body Styles *\/\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Apply styles directly or scope if needed *\/\r\n \/* If adding to WordPress, consider scoping with a unique parent ID\/class *\/\r\n .hieroglyph-tool-body { \/* Using a specific class for scoping *\/\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n line-height: 1.6;\r\n background-color: #faf6f3; \/* Tailwind bg-[#faf6f3] *\/\r\n color: #333;\r\n display: flex; \/* Helps center content if needed *\/\r\n justify-content: center;\r\n padding: 2rem 1rem; \/* Approx py-12 px-4 *\/\r\n min-height: 100vh;\r\n }\r\n\r\n \/* Main Container *\/\r\n .hieroglyph-container {\r\n max-width: 600px; \/* Approx max-w-xl *\/\r\n width: 100%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem; \/* Tailwind gap-8 *\/\r\n }\r\n\r\n \/* Shared Card Styles *\/\r\n .hieroglyph-container .card { \/* Increased specificity *\/\r\n background-color: rgba(255, 255, 255, 0.9); \/* bg-white\/90 *\/\r\n backdrop-filter: blur(4px); \/* backdrop-blur-sm *\/\r\n border-radius: 1rem; \/* rounded-2xl *\/\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); \/* shadow-xl approximation *\/\r\n padding: 2rem; \/* p-8 *\/\r\n border: 1px solid rgba(0,0,0,0.05); \/* Add subtle border *\/\r\n }\r\n\r\n \/* Facts Carousel *\/\r\n .hieroglyph-container .facts-carousel { \/* Increased specificity *\/\r\n background-color: rgba(220, 131, 78, 0.1); \/* bg-[#dc834e]\/10 *\/\r\n backdrop-filter: blur(4px);\r\n border-radius: 1rem; \/* rounded-2xl *\/\r\n padding: 1rem; \/* p-4 *\/\r\n border: 1px solid rgba(220, 131, 78, 0.2); \/* border-[#dc834e]\/20 *\/\r\n }\r\n .hieroglyph-container .facts-carousel .fact-content {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem; \/* gap-2 *\/\r\n color: #dc834e;\r\n }\r\n .hieroglyph-container .facts-carousel .fact-text {\r\n font-size: 0.875rem; \/* text-sm *\/\r\n font-weight: 500; \/* font-medium *\/\r\n opacity: 0; \/* Start hidden for fade-in *\/\r\n transition: opacity 0.5s ease-in-out;\r\n }\r\n .hieroglyph-container .facts-carousel .fact-text.visible {\r\n opacity: 1;\r\n }\r\n\r\n \/* Input Form Card *\/\r\n .hieroglyph-container .input-card .header { \/* Increased specificity *\/\r\n margin-bottom: 2rem; \/* mb-8 *\/\r\n }\r\n .hieroglyph-container .input-card .title-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem; \/* gap-2 *\/\r\n margin-bottom: 1rem; \/* mb-4 *\/\r\n }\r\n .hieroglyph-container .input-card .title-container .icon {\r\n color: #dc834e;\r\n }\r\n .hieroglyph-container .input-card h1 {\r\n font-size: 1.875rem; \/* text-3xl *\/\r\n font-weight: 700; \/* font-bold *\/\r\n color: #111827; \/* text-gray-900 *\/\r\n }\r\n .hieroglyph-container .input-card .subtitle {\r\n color: #4b5563; \/* text-gray-600 *\/\r\n }\r\n .hieroglyph-container .input-card form label {\r\n display: block;\r\n font-size: 0.875rem; \/* text-sm *\/\r\n font-weight: 500; \/* font-medium *\/\r\n color: #374151; \/* text-gray-700 *\/\r\n margin-bottom: 0.5rem; \/* Tailwind space-y-4 implies margin *\/\r\n }\r\n\r\n \/* --- THE CRUCIAL FIX FOR INPUT TEXT VISIBILITY --- *\/\r\n .hieroglyph-container .input-card form input#name-input[type=\"text\"] { \/* High specificity selector *\/\r\n width: 100%;\r\n padding: 0.75rem 1rem !important;\r\n border: 1px solid #e5e7eb !important;\r\n border-radius: 0.75rem !important;\r\n transition: all 0.3s ease !important;\r\n margin-bottom: 1rem !important;\r\n font-size: 1rem !important;\r\n color: #000000 !important; \/* FORCE black text color *\/\r\n background-color: #ffffff !important; \/* FORCE white background *\/\r\n opacity: 1 !important; \/* Ensure not transparent *\/\r\n visibility: visible !important; \/* Ensure visible *\/\r\n -webkit-text-fill-color: #000000 !important; \/* Override WebKit defaults *\/\r\n }\r\n \/* --- END CRUCIAL FIX --- *\/\r\n\r\n .hieroglyph-container .input-card form input#name-input[type=\"text\"]:focus { \/* Apply !important to focus styles too *\/\r\n outline: none !important;\r\n border-color: transparent !important;\r\n box-shadow: 0 0 0 2px #dc834e !important;\r\n }\r\n .hieroglyph-container .input-card form button {\r\n width: 100%;\r\n background-color: #dc834e;\r\n color: white;\r\n padding: 0.75rem 1.5rem; \/* py-3 px-6 *\/\r\n border: none;\r\n border-radius: 0.75rem; \/* rounded-xl *\/\r\n cursor: pointer;\r\n transition: background-color 0.3s ease; \/* transition-colors *\/\r\n font-weight: 500; \/* font-medium *\/\r\n font-size: 1rem;\r\n }\r\n .hieroglyph-container .input-card form button:hover {\r\n background-color: #c0723e; \/* hover:bg-[#c0723e] *\/\r\n }\r\n\r\n \/* Output Section *\/\r\n .hieroglyph-container .output-section { \/* Increased specificity *\/\r\n display: none; \/* Hidden by default *\/\r\n }\r\n \/* Output card inherits .card styles via selector hierarchy *\/\r\n .hieroglyph-container .output-card .output-header {\r\n margin-bottom: 1.5rem; \/* mb-6 *\/\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem; \/* gap-2 *\/\r\n }\r\n .hieroglyph-container .output-card .output-header .icon {\r\n color: #dc834e;\r\n }\r\n .hieroglyph-container .output-card h2 {\r\n font-size: 1.5rem; \/* text-2xl *\/\r\n font-weight: 600; \/* font-semibold *\/\r\n color: #111827; \/* text-gray-900 *\/\r\n }\r\n\r\n \/* Cartouche *\/\r\n .hieroglyph-container .cartouche-container {\r\n display: flex;\r\n justify-content: center;\r\n margin-bottom: 2rem; \/* mb-8 *\/\r\n }\r\n .hieroglyph-container .cartouche {\r\n border: 2px solid #dc834e;\r\n border-radius: 1rem; \/* rounded-2xl *\/\r\n padding: 2rem 1rem; \/* py-8 px-4 *\/\r\n display: flex; \/* Use flex for vertical alignment *\/\r\n flex-direction: column; \/* Stack symbols vertically *\/\r\n align-items: center; \/* Center symbols horizontally *\/\r\n gap: 0.75rem; \/* gap-3 *\/\r\n min-height: 50px; \/* Ensure some height even when empty *\/\r\n }\r\n .hieroglyph-container .cartouche .hieroglyph-symbol {\r\n font-size: 2.25rem; \/* text-4xl *\/\r\n line-height: 1.2; \/* Adjust for tall glyphs *\/\r\n }\r\n\r\n \/* Promotional Message *\/\r\n .hieroglyph-container .promo-message {\r\n background-color: rgba(220, 131, 78, 0.1); \/* bg-[#dc834e]\/10 *\/\r\n border-radius: 0.75rem; \/* rounded-xl *\/\r\n padding: 1rem; \/* p-4 *\/\r\n margin-bottom: 2rem; \/* mb-8 *\/\r\n }\r\n .hieroglyph-container .promo-message .promo-title {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem; \/* gap-2 *\/\r\n color: #dc834e;\r\n margin-bottom: 0.5rem; \/* mb-2 *\/\r\n }\r\n .hieroglyph-container .promo-message .promo-title .icon {\r\n \/* Icon color is already set *\/\r\n }\r\n .hieroglyph-container .promo-message .promo-title p {\r\n font-weight: 500; \/* font-medium *\/\r\n }\r\n .hieroglyph-container .promo-message .promo-text {\r\n font-size: 0.875rem; \/* text-sm *\/\r\n color: #374151; \/* text-gray-700 *\/\r\n }\r\n\r\n \/* \u767a\u97f3\u30ac\u30a4\u30c9 *\/\r\n .hieroglyph-container .phonetic-guide h3 {\r\n font-size: 1.125rem; \/* text-lg *\/\r\n font-weight: 500; \/* font-medium *\/\r\n color: #111827; \/* text-gray-900 *\/\r\n margin-bottom: 1rem; \/* mb-4 *\/\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-scroll-container {\r\n max-height: 300px; \/* max-h-[300px] *\/\r\n overflow-y: auto;\r\n padding-right: 0.5rem; \/* pr-2 *\/\r\n \/* Custom Scrollbar *\/\r\n scrollbar-width: thin;\r\n scrollbar-color: #dc834e #faf6f3;\r\n min-height: 50px; \/* Ensure some height *\/\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-scroll-container::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-scroll-container::-webkit-scrollbar-track {\r\n background: #faf6f3;\r\n border-radius: 3px;\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-scroll-container::-webkit-scrollbar-thumb {\r\n background-color: #dc834e;\r\n border-radius: 3px;\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-item {\r\n background-color: #faf6f3; \/* bg-[#faf6f3] *\/\r\n padding: 0.75rem; \/* p-3 *\/\r\n border-radius: 0.5rem; \/* rounded-lg *\/\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem; \/* gap-4 *\/\r\n margin-bottom: 0.5rem; \/* space-y-2 *\/\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-item .symbol {\r\n font-size: 1.5rem; \/* text-2xl *\/\r\n min-width: 40px; \/* min-w-[40px] *\/\r\n text-align: center;\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-item .details {\r\n flex: 1;\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-item .meaning {\r\n font-size: 0.875rem; \/* text-sm *\/\r\n color: #4b5563; \/* text-gray-600 *\/\r\n }\r\n .hieroglyph-container .phonetic-guide .guide-item .pronunciation {\r\n font-size: 0.75rem; \/* text-xs *\/\r\n color: #dc834e;\r\n }\r\n\r\n \/* Lucide Icon Sizing *\/\r\n .hieroglyph-container .icon { \/* Increased specificity *\/\r\n display: inline-block; \/* Crucial for size *\/\r\n width: 1.25em; \/* Default size approx w-5 h-5 *\/\r\n height: 1.25em;\r\n stroke-width: 2;\r\n }\r\n .hieroglyph-container .icon.icon-lg { \/* Approx w-8 h-8 *\/\r\n width: 2em;\r\n height: 2em;\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<!-- Added class to body for potential scoping if needed -->\r\n<body class=\"hieroglyph-tool-body\">\r\n\r\n <!-- Main container for the tool -->\r\n <div class=\"hieroglyph-container\">\r\n <!-- Facts Carousel -->\r\n <div class=\"facts-carousel card\">\r\n <div class=\"fact-content\">\r\n <span data-lucide=\"sparkles\" class=\"icon\"><\/span>\r\n <p id=\"fact-text\" class=\"fact-text\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Input Card -->\r\n <div class=\"input-card card\">\r\n <div class=\"header\">\r\n <div class=\"title-container\">\r\n <span data-lucide=\"palmtree\" class=\"icon icon-lg\"><\/span>\r\n <h1>\u30d2\u30a8\u30ed\u30b0\u30ea\u30d5\u3067\u3042\u306a\u305f\u306e\u540d\u524d\u3092\u767a\u898b\u3057\u3088\u3046\r\n\r\n<\/h1>\r\n <\/div>\r\n <p class=\"subtitle\">\u65b0\u738b\u56fd\u6642\u4ee3\u306e\u53e4\u4ee3\u6587\u5b57\u3067\u3042\u306a\u305f\u306e\u540d\u524d\u3092\u66f8\u3044\u3066\u307f\u307e\u3057\u3087\u3046\u3002\r\n\r\n<\/p>\r\n <\/div>\r\n\r\n <form id=\"hieroglyph-form\">\r\n <div>\r\n <label for=\"name-input\"> \u540d\u524d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/label>\r\n <!-- The ID 'name-input' is used in the specific CSS rule -->\r\n <input\r\n type=\"text\"\r\n id=\"name-input\"\r\n placeholder=\"\u3053\u3053\u306b\u3042\u306a\u305f\u306e\u540d\u524d\u3092...\"\r\n required\r\n \/>\r\n <button type=\"submit\">\u7ffb\u8a33<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- Output Section (Hidden by Default) -->\r\n <div id=\"output-section\" class=\"output-section\">\r\n <div class=\"output-card card\">\r\n <div class=\"output-header\">\r\n <span data-lucide=\"scroll-text\" class=\"icon\"><\/span>\r\n <h2> \u3042\u306a\u305f\u306e\u738b\u5bb6\u306e\u30ab\u30eb\u30c8\u30a5\u30fc\u30b7\u30e5<\/h2>\r\n <\/div>\r\n\r\n <!-- Cartouche Display -->\r\n <div class=\"cartouche-container\">\r\n <div id=\"cartouche-display\" class=\"cartouche\">\r\n <!-- Hieroglyphs will be inserted here by JS -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Promotional Message -->\r\n <div class=\"promo-message\">\r\n <div class=\"promo-title\">\r\n <span data-lucide=\"gift\" class=\"icon\"><\/span>\r\n <p>\u7279\u5225\u30aa\u30d5\u30a1\u30fc\uff01\r\n<\/p>\r\n <\/div>\r\n <p class=\"promo-text\">\u3069\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u3054\u4e88\u7d04\u3044\u305f\u3060\u3044\u3066\u3082\u3001\u304a\u540d\u524d\u5165\u308a\u306eT\u30b7\u30e3\u30c4\u3092\u7121\u6599\u3067\u30d7\u30ec\u30bc\u30f3\u30c8\uff01\r\n\r\n<\/p>\r\n <\/div>\r\n\r\n <!-- \u767a\u97f3\u30ac\u30a4\u30c9-->\r\n <div class=\"phonetic-guide\">\r\n <h3>Phonetic Guide<\/h3>\r\n <div id=\"phonetic-guide-container\" class=\"guide-scroll-container\">\r\n <!-- Phonetic breakdown will be inserted here by JS -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script type=\"text\/javascript\">\r\n \/\/ Wait for the DOM to be fully loaded before running script\r\n document.addEventListener('DOMContentLoaded', () => {\r\n\r\n \/\/ --- Get References to HTML Elements ---\r\n const factTextElement = document.getElementById('fact-text');\r\n const hieroglyphForm = document.getElementById('hieroglyph-form');\r\n const nameInput = document.getElementById('name-input');\r\n const outputSection = document.getElementById('output-section');\r\n const cartoucheDisplay = document.getElementById('cartouche-display');\r\n const phoneticGuideContainer = document.getElementById('phonetic-guide-container');\r\n\r\n \/\/ --- Define Data ---\r\n const PHONETIC_MAP = { \/\/ Simplified mapping\r\n a: { symbol: \"\ud80c\udd3f\", meaning: \"Vulture (sound: ah)\", pronunciation: \"ah\" },\r\n b: { symbol: \"\ud80c\udcc0\", meaning: \"Leg (sound: b)\", pronunciation: \"b\" },\r\n c: { symbol: \"\ud80c\udfba\", meaning: \"Folded cloth (sound: k)\", pronunciation: \"k\" },\r\n d: { symbol: \"\ud80c\udca7\", meaning: \"Hand (sound: d)\", pronunciation: \"d\" },\r\n e: { symbol: \"\ud80c\uddcb\", meaning: \"Reed flower (sound: ee)\", pronunciation: \"ee\" },\r\n f: { symbol: \"\ud80c\udd91\", meaning: \"Horned viper (sound: f)\", pronunciation: \"f\" },\r\n g: { symbol: \"\ud80c\udfbc\", meaning: \"Stand (sound: g)\", pronunciation: \"g\" },\r\n h: { symbol: \"\ud80c\udf9b\", meaning: \"Twisted wick (sound: h)\", pronunciation: \"h\" },\r\n i: { symbol: \"\ud80c\uddcb\", meaning: \"Reed flower (sound: ee)\", pronunciation: \"ee\" },\r\n j: { symbol: \"\ud80c\udd93\", meaning: \"Cobra (sound: dj)\", pronunciation: \"dj\" },\r\n k: { symbol: \"\ud80c\udfa1\", meaning: \"Basket (sound: k)\", pronunciation: \"k\" },\r\n l: { symbol: \"\ud80c\udced\", meaning: \"Lion (sound: l)\", pronunciation: \"l\" },\r\n m: { symbol: \"\ud80c\udd53\", meaning: \"Owl (sound: m)\", pronunciation: \"m\" },\r\n n: { symbol: \"\ud80c\ude16\", meaning: \"Water (sound: n)\", pronunciation: \"n\" },\r\n o: { symbol: \"\ud80c\udd71\", meaning: \"Chick (sound: u)\", pronunciation: \"u\" },\r\n p: { symbol: \"\ud80c\udeaa\", meaning: \"Square (sound: p)\", pronunciation: \"p\" },\r\n q: { symbol: \"\ud80c\ude0e\", meaning: \"Corner (sound: q)\", pronunciation: \"q\" },\r\n r: { symbol: \"\ud80c\udc8b\", meaning: \"Mouth (sound: r)\", pronunciation: \"r\" },\r\n s: { symbol: \"\ud80c\udef4\", meaning: \"Door bolt (sound: s)\", pronunciation: \"s\" },\r\n t: { symbol: \"\ud80c\udfcf\", meaning: \"Loaf (sound: t)\", pronunciation: \"t\" },\r\n u: { symbol: \"\ud80c\udd71\", meaning: \"Chick (sound: u)\", pronunciation: \"u\" },\r\n v: { symbol: \"\ud80c\udd91\", meaning: \"Horned viper (sound: f)\", pronunciation: \"f\" },\r\n w: { symbol: \"\ud80c\udd71\", meaning: \"Chick (sound: w)\", pronunciation: \"w\" },\r\n x: { symbol: \"\ud80c\udfa1\ud80c\udef4\", meaning: \"Basket & Bolt (ks)\", pronunciation: \"ks\" },\r\n y: { symbol: \"\ud80c\uddcb\", meaning: \"Reed flower (sound: y)\", pronunciation: \"y\" },\r\n z: { symbol: \"\ud80c\ude83\", meaning: \"Bolt (sound: z)\", pronunciation: \"z\" }\r\n };\r\n\r\n const HIEROGLYPH_FACTS = [\r\n \"\u53e4\u4ee3\u30a8\u30b8\u30d7\u30c8\u3067\u306f\u30013000\u5e74\u4ee5\u4e0a\u306b\u308f\u305f\u308a\u30d2\u30a8\u30ed\u30b0\u30ea\u30d5\u304c\u4f7f\u7528\u3055\u308c\u307e\u3057\u305f\u3002! \ud83c\udffa\",\r\n \"\u6700\u5f8c\u306b\u77e5\u3089\u308c\u3066\u3044\u308b\u30d2\u30a8\u30ed\u30b0\u30ea\u30d5\u306e\u7891\u6587\u306f\u897f\u66a6394\u5e74\u306b\u4f5c\u3089\u308c\u307e\u3057\u305f\u3002 \u2728\",\r\n \"\u30d2\u30a8\u30ed\u30b0\u30ea\u30d5\u306f\u53f3\u304b\u3089\u5de6\u3001\u5de6\u304b\u3089\u53f3\u3001\u307e\u305f\u306f\u4e0a\u304b\u3089\u4e0b\u306b\u8aad\u307e\u308c\u307e\u3059\u3002 \ud83d\udcdc\",\r\n \"1,000\u4ee5\u4e0a\u306e\u7570\u306a\u308b\u30d2\u30a8\u30ed\u30b0\u30ea\u30d5\u6587\u5b57\u304c\u3042\u308a\u307e\u3059\u3002 \ud83c\udfa8\"\r\n ];\r\n\r\n \/\/ --- State Variables ---\r\n let currentFactIndex = 0;\r\n let factInterval;\r\n\r\n \/\/ --- Helper Functions ---\r\n const sanitizeInput = (input) => {\r\n \/\/ Convert to lowercase and remove anything not a-z\r\n return input.toLowerCase().replace(\/[^a-z]\/g, '');\r\n };\r\n\r\n const translateName = (input) => {\r\n const sanitized = sanitizeInput(input);\r\n \/\/ Map each valid character to its symbol, or return an empty string if no match\r\n return sanitized.split('').map(char => PHONETIC_MAP[char]?.symbol || '');\r\n };\r\n\r\n const getPhoneticBreakdown = (input) => {\r\n const sanitized = sanitizeInput(input);\r\n \/\/ Map each valid character to its phonetic data object and filter out any misses\r\n return sanitized.split('').map(char => PHONETIC_MAP[char]).filter(Boolean);\r\n };\r\n\r\n \/\/ --- Fact Carousel Logic ---\r\n function showNextFact() {\r\n if (!factTextElement) return; \/\/ Exit if element not found\r\n\r\n \/\/ Fade out current fact\r\n factTextElement.classList.remove('visible');\r\n\r\n \/\/ After fade out transition (500ms), update text and fade in\r\n setTimeout(() => {\r\n currentFactIndex = (currentFactIndex + 1) % HIEROGLYPH_FACTS.length; \/\/ Cycle through facts\r\n factTextElement.textContent = HIEROGLYPH_FACTS[currentFactIndex];\r\n factTextElement.classList.add('visible'); \/\/ Trigger fade-in\r\n }, 500); \/\/ Must match CSS transition duration\r\n }\r\n\r\n function startFactCarousel() {\r\n if (!factTextElement) return; \/\/ Exit if element not found\r\n\r\n \/\/ Show the first fact immediately\r\n factTextElement.textContent = HIEROGLYPH_FACTS[currentFactIndex];\r\n \/\/ Use a tiny delay to ensure the transition fires on initial load\r\n setTimeout(() => factTextElement.classList.add('visible'), 10);\r\n\r\n \/\/ Clear any previous interval timer\r\n if (factInterval) clearInterval(factInterval);\r\n \/\/ Set interval for changing facts (display time + transition time)\r\n factInterval = setInterval(showNextFact, 5500);\r\n }\r\n\r\n\r\n \/\/ --- Form Submission Handler ---\r\n hieroglyphForm.addEventListener('submit', (event) => {\r\n event.preventDefault(); \/\/ Stop the form from submitting the traditional way\r\n const name = nameInput.value.trim(); \/\/ Get and trim the input name\r\n\r\n \/\/ If name is empty, hide output and do nothing else\r\n if (!name) {\r\n outputSection.style.display = 'none';\r\n return;\r\n }\r\n\r\n \/\/ Translate the name and get phonetic details\r\n const hieroglyphs = translateName(name);\r\n const phoneticData = getPhoneticBreakdown(name);\r\n\r\n \/\/ Clear previous results from display areas\r\n cartoucheDisplay.innerHTML = '';\r\n phoneticGuideContainer.innerHTML = '';\r\n\r\n \/\/ Display Hieroglyphs in Cartouche\r\n \/\/ Check if the resulting array contains at least one valid symbol\r\n if (hieroglyphs.length > 0 && hieroglyphs.some(symbol => symbol !== '')) {\r\n hieroglyphs.forEach(symbol => {\r\n if (symbol) { \/\/ Only add if a symbol exists (not an empty string)\r\n const span = document.createElement('span');\r\n span.className = 'hieroglyph-symbol';\r\n span.textContent = symbol;\r\n cartoucheDisplay.appendChild(span);\r\n }\r\n });\r\n } else {\r\n \/\/ If no valid symbols found, show a message\r\n const messageNode = document.createTextNode('Could not translate name (only A-Z characters are supported).');\r\n cartoucheDisplay.appendChild(messageNode);\r\n }\r\n\r\n\r\n \/\/ Display Phonetic Guide\r\n if (phoneticData.length > 0) {\r\n phoneticData.forEach(charData => {\r\n const itemDiv = document.createElement('div');\r\n itemDiv.className = 'guide-item';\r\n \/\/ Use innerHTML to easily structure the guide item content\r\n itemDiv.innerHTML = `\r\n <div class=\"symbol\">${charData.symbol}<\/div>\r\n <div class=\"details\">\r\n <p class=\"meaning\">${charData.meaning}<\/p>\r\n <p class=\"pronunciation\">Pronunciation: ${charData.pronunciation}<\/p>\r\n <\/div>\r\n `;\r\n phoneticGuideContainer.appendChild(itemDiv);\r\n });\r\n } else {\r\n \/\/ If no phonetic data, show a message\r\n const messageNode = document.createTextNode('No phonetic information available for the entered characters.');\r\n phoneticGuideContainer.appendChild(messageNode);\r\n }\r\n\r\n \/\/ Make the output section visible\r\n outputSection.style.display = 'block';\r\n\r\n \/\/ Ensure any dynamically added Lucide icons are rendered\r\n \/\/ (Likely not needed here as icons are static, but good practice if content changes)\r\n if (typeof lucide !== 'undefined') {\r\n lucide.createIcons();\r\n }\r\n });\r\n\r\n \/\/ --- Initial Setup on Page Load ---\r\n startFactCarousel(); \/\/ Start the fact rotation\r\n\r\n \/\/ Initialize any static Lucide icons present in the HTML on load\r\n if (typeof lucide !== 'undefined') {\r\n lucide.createIcons();\r\n }\r\n\r\n }); \/\/ End DOMContentLoaded event listener\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e409935 elementor-widget elementor-widget-spacer\" data-id=\"e409935\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\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","protected":false},"excerpt":{"rendered":"<p>Hieroglyphs Translator \u30d2\u30a8\u30ed\u30b0\u30ea\u30d5\u3067\u3042\u306a\u305f\u306e\u540d\u524d\u3092\u767a\u898b\u3057\u3088\u3046 \u65b0\u738b\u56fd\u6642\u4ee3\u306e\u53e4\u4ee3\u6587\u5b57\u3067\u3042\u306a\u305f\u306e\u540d\u524d\u3092\u66f8\u3044\u3066\u307f\u307e\u3057\u3087\u3046\u3002 \u540d\u524d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044 \u7ffb\u8a33 \u3042\u306a\u305f\u306e\u738b\u5bb6\u306e\u30ab\u30eb\u30c8\u30a5\u30fc\u30b7\u30e5 \u7279\u5225\u30aa\u30d5\u30a1\u30fc\uff01 \u3069\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u3054\u4e88\u7d04\u3044\u305f\u3060\u3044\u3066\u3082\u3001\u304a\u540d\u524d\u5165\u308a\u306eT\u30b7\u30e3\u30c4\u3092\u7121\u6599\u3067\u30d7\u30ec\u30bc\u30f3\u30c8\uff01 Phonetic Guide<\/p>\n","protected":false},"author":1086,"featured_media":0,"parent":0,"menu_order":1262,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","rank_math_title":"","rank_math_description":""},"class_list":["post-179328","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/travel2egypt.org\/ja\/wp-json\/wp\/v2\/pages\/179328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/travel2egypt.org\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/travel2egypt.org\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/travel2egypt.org\/ja\/wp-json\/wp\/v2\/users\/1086"}],"replies":[{"embeddable":true,"href":"https:\/\/travel2egypt.org\/ja\/wp-json\/wp\/v2\/comments?post=179328"}],"version-history":[{"count":0,"href":"https:\/\/travel2egypt.org\/ja\/wp-json\/wp\/v2\/pages\/179328\/revisions"}],"wp:attachment":[{"href":"https:\/\/travel2egypt.org\/ja\/wp-json\/wp\/v2\/media?parent=179328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}