Spaces:
Running
Running
| function enhanceSVGContent2(e){const t=(new DOMParser).parseFromString(e,"image/svg+xml"),n=t.createElementNS("http://www.w3.org/2000/svg","style");return n.textContent='\n /* Memory Block (free memory) */\n path[data-element-type="memory-block"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="memory-block"]:hover {\n fill: #a5d6a7 !important; /* slightly darker than original */\n transform: translate(0, -2px);\n }\n\n /* Memory Block (updated) */\n path[data-element-type="memory-block-updated"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="memory-block-updated"]:hover {\n fill: #81c784 !important;\n transform: scale(1.02) translate(0, -2px);\n }\n\n /* Stack Segment */\n path[data-element-type="stack"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="stack"]:hover {\n fill: #ffd54f !important;\n transform: translate(0, -2px);\n }\n\n /* Read Operation Arrow */\n path[data-element-type="read"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="read"]:hover {\n stroke: #1e88e5 !important;\n stroke-width: 4 !important;\n }\n\n /* Write Operation Arrow */\n path[data-element-type="write"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="write"]:hover {\n stroke: #d32f2f !important;\n stroke-width: 4 !important;\n }\n\n /* Cache Operation Arrow */\n path[data-element-type="cache"] {\n transition: all 0.3s;\n cursor: pointer;\n }\n path[data-element-type="cache"]:hover {\n stroke: #fbc02d !important;\n stroke-width: 4 !important;\n }\n ',t.documentElement.insertBefore(n,t.documentElement.firstChild),t.querySelectorAll('path[fill="#c8e6c9"]').forEach(((e,t)=>{e.setAttribute("data-element-id",`memory-block-${t}`),e.setAttribute("data-element-type","memory-block")})),t.querySelectorAll('path[fill="#a5d6a7"]').forEach(((e,t)=>{e.setAttribute("data-element-id",`memory-block-updated-${t}`),e.setAttribute("data-element-type","memory-block-updated")})),t.querySelectorAll('path[fill="#ffe082"]').forEach(((e,t)=>{e.setAttribute("data-element-id",`stack-${t}`),e.setAttribute("data-element-type","stack")})),Object.entries({"#42a5f5":"read","#ef5350":"write","#ffca28":"cache"}).forEach((([e,n])=>{t.querySelectorAll(`path[stroke="${e}"]`).forEach(((e,t)=>{e.setAttribute("data-element-id",`${n}-${t}`),e.setAttribute("data-element-type",n)}))})),t.documentElement.setAttribute("width","100%"),t.documentElement.setAttribute("height","100%"),t.documentElement.setAttribute("preserveAspectRatio","xMidYMid meet"),(new XMLSerializer).serializeToString(t)}async function loadSVG(e,t){try{console.log("Loading SVG from:",e);const n=await fetch(e);if(!n.ok)throw new Error(`HTTP error! Status: ${n.status}`);const r=enhanceSVGContent2(await n.text());document.getElementById(t).innerHTML=r}catch(e){console.error("Error loading SVG:",e),document.getElementById(t).innerHTML="<p>Error loading SVG.</p>"}}loadSVG("../assets/images/first_steps_memory_profile.svg","svg-first_steps_memory_profile");const svgContainer2=document.getElementById("svg-first_steps_memory_profile");svgContainer2.addEventListener("mouseover",(function(e){const t=e.target;if("path"===t.tagName.toLowerCase()&&t.hasAttribute("data-element-id")){const e=t.getAttribute("data-element-id"),n=t.getAttribute("data-element-type"),r={"memory-block":"Memory Block","memory-block-updated":"Memory Block (updated)",stack:"Stack Segment",read:"Memory Read",write:"Memory Write",cache:"Cache Operation"}[n]||n;document.getElementById("svg-first_steps_memory_profile-info").textContent=`Hovering over: ${r} (${e})`}})),svgContainer2.addEventListener("mouseout",(function(){document.getElementById("svg-first_steps_memory_profile-info").textContent="Hover over the elements to see their details"})); |