{"id":179330,"date":"2025-04-02T21:38:45","date_gmt":"2025-04-02T21:38:45","guid":{"rendered":"https:\/\/travel2egypt.org\/tu-nombre-en-jeroglificos\/"},"modified":"2025-04-02T22:41:12","modified_gmt":"2025-04-02T22:41:12","slug":"tu-nombre-en-jeroglificos","status":"publish","type":"page","link":"https:\/\/travel2egypt.org\/es\/tu-nombre-en-jeroglificos\/","title":{"rendered":"Tu nombre en jerogl\u00edficos"},"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 \/* Gu\u00eda fon\u00e9tica *\/\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>Descubre tu nombre en jerogl\u00edficos<\/h1>\r\n <\/div>\r\n <p class=\"subtitle\">Vive la experiencia de ver tu nombre escrito en la antigua escritura del Reino Nuevo.<\/p>\r\n <\/div>\r\n\r\n <form id=\"hieroglyph-form\">\r\n <div>\r\n <label for=\"name-input\">Ingresa tu nombre<\/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=\"Tu nombre aqu\u00ed...\"\r\n required\r\n \/>\r\n <button type=\"submit\">Translate<\/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>Tu cartucho real<\/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>\u00a1Oferta especial!<\/p>\r\n <\/div>\r\n <p class=\"promo-text\">Recibe una camiseta gratuita con tu nombre al reservar cualquier servicio!<\/p>\r\n <\/div>\r\n\r\n <!-- Gu\u00eda fon\u00e9tica -->\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 \"Los jerogl\u00edficos se utilizaron durante m\u00e1s de 3.000 a\u00f1os en el antiguo Egipto! \ud83c\udffa\",\r\n \"La \u00faltima inscripci\u00f3n jerogl\u00edfica conocida se realiz\u00f3 en el a\u00f1o 394 d.C\u2728\",\r\n \"Los jerogl\u00edficos se pueden leer de derecha a izquierda, de izquierda a derecha o de arriba hacia abajo \ud83d\udcdc\",\r\n \"Existen m\u00e1s de 1,000 caracteres jerogl\u00edficos diferentes. \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 Descubre tu nombre en jerogl\u00edficos Vive la experiencia de ver tu nombre escrito en la antigua escritura del Reino Nuevo. Ingresa tu nombre Translate Tu cartucho real \u00a1Oferta especial! Recibe una camiseta gratuita con tu nombre al reservar cualquier servicio! 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-179330","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/travel2egypt.org\/es\/wp-json\/wp\/v2\/pages\/179330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/travel2egypt.org\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/travel2egypt.org\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/travel2egypt.org\/es\/wp-json\/wp\/v2\/users\/1086"}],"replies":[{"embeddable":true,"href":"https:\/\/travel2egypt.org\/es\/wp-json\/wp\/v2\/comments?post=179330"}],"version-history":[{"count":0,"href":"https:\/\/travel2egypt.org\/es\/wp-json\/wp\/v2\/pages\/179330\/revisions"}],"wp:attachment":[{"href":"https:\/\/travel2egypt.org\/es\/wp-json\/wp\/v2\/media?parent=179330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}