Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">
<title>MathXpert Grapher</title>
<style>
body, html {
margin: 0;
padding: 0;
border: none;
height: 100vh;
}
/* Set a global font-family rule for all text elements. Only Times New Roman actually works well. */
text {
font-family: 'Times New Roman', 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', 'TeX Gyre Termes Math';
}
/* Define a container div with absolute positioning */
#svgContainer {
position: relative;
z-index: 1;
}
#draggableTitle {
position: absolute;
cursor: move;
border: 1px solid black;
background-color: white; /* Changed from transparent to white */
padding: 5px;
color: black; /* Ensure text color is explicitly set */
top: 10px; /* Initial position */
left: 10px; /* Initial position */
z-index: 2; /* Ensure it's above other elements */
}
body {
background-color:none;
}
.button-container {
display: flex;
gap: 5px; /* Adjust the gap as needed */
align-items: center; /* Align items vertically in the center */
}
.button-container button {
height: 17px; /* Adjust the height as needed */
}
/* Style for the modal */
#hintModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
justify-content: center;
align-items: center;
}
/* Style for the modal content */
#modalContent {
background: rgb(200,200,255);
padding: 20px;
border-radius: 5px;
width: 50%;
height: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<html>
<body>
<div id="svgContainer">
<svg id="graphSVG" width="683" height="393" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="682" height="392" style="fill:none; stroke:rgb(255,255,0); stroke-width:1;"/>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 0.000000 196.000000 L 682.000000 196.000000 M 341.000000 392.000000 L 341.000000 0.000000 " />
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 0.000000 196.000000 L 0.000000 192.080000 M 0.000000 196.000000 L 0.000000 199.920000 M 0.000000 214.283359 M -4.992679 214.283359 " />
<text x = "-4" y="214" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">-2</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 170.500000 196.000000 L 170.500000 192.080000 M 170.500000 196.000000 L 170.500000 199.920000 M 170.500000 214.283359 M 165.507321 214.283359 " />
<text x = "165" y="214" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">-1</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 511.500000 196.000000 L 511.500000 192.080000 M 511.500000 196.000000 L 511.500000 199.920000 M 511.500000 214.283359 M 508.504392 214.283359 " />
<text x = "508" y="214" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">1</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 682.000000 196.000000 L 682.000000 192.080000 M 682.000000 196.000000 L 682.000000 199.920000 M 682.000000 214.283359 M 679.004392 214.283359 " />
<text x = "679" y="214" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">2</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 341.000000 318.500000 L 347.820000 318.500000 M 341.000000 318.500000 L 334.180000 318.500000 M 354.640000 324.484733 " />
<text x = "354" y="324" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">-5</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 341.000000 73.500000 L 347.820000 73.500000 M 341.000000 73.500000 L 334.180000 73.500000 M 354.640000 79.484733 " />
<text x = "354" y="79" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">5</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 333.810542 13.166412 " />
<text x = "333" y="13" style="font-style:roman;font-size:10pt;fill:rgb(255,255,0);"><tspan style="font-style:italic">y</tspan></text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 673.013177 209.166412 " />
<text x = "673" y="209" style="font-style:roman;font-size:10pt;fill:rgb(255,255,0);"><tspan style="font-style:italic">x</tspan></text>
<rect x="0" y="0" width="682" height="392" style="fill:none; stroke:rgb(255,255,0); stroke-width:1;"/>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 0.000000 196.000000 L 682.000000 196.000000 M 341.000000 392.000000 L 341.000000 0.000000 " />
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 0.000000 196.000000 L 0.000000 192.080000 M 0.000000 196.000000 L 0.000000 199.920000 M 0.000000 214.283359 M -4.992679 214.283359 " />
<text x = "-4" y="214" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">-2</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 170.500000 196.000000 L 170.500000 192.080000 M 170.500000 196.000000 L 170.500000 199.920000 M 170.500000 214.283359 M 165.507321 214.283359 " />
<text x = "165" y="214" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">-1</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 511.500000 196.000000 L 511.500000 192.080000 M 511.500000 196.000000 L 511.500000 199.920000 M 511.500000 214.283359 M 508.504392 214.283359 " />
<text x = "508" y="214" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">1</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 682.000000 196.000000 L 682.000000 192.080000 M 682.000000 196.000000 L 682.000000 199.920000 M 682.000000 214.283359 M 679.004392 214.283359 " />
<text x = "679" y="214" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">2</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 341.000000 318.500000 L 347.820000 318.500000 M 341.000000 318.500000 L 334.180000 318.500000 M 354.640000 324.484733 " />
<text x = "354" y="324" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">-5</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 341.000000 73.500000 L 347.820000 73.500000 M 341.000000 73.500000 L 334.180000 73.500000 M 354.640000 79.484733 " />
<text x = "354" y="79" style="font-style:roman;font-size:10pt;fill:rgb(0,255,0);">5</text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 333.810542 13.166412 " />
<text x = "333" y="13" style="font-style:roman;font-size:10pt;fill:rgb(255,255,0);"><tspan style="font-style:italic">y</tspan></text>
<path stroke="rgb(0,255,0)" fill="none" stroke-width="1" d = "M 673.013177 209.166412 " />
<text x = "673" y="209" style="font-style:roman;font-size:10pt;fill:rgb(255,255,0);"><tspan style="font-style:italic">x</tspan></text>
</svg>
</div>
<div id="draggableTitle" style="position: absolute; cursor: move; border: 1px solid black; background-color: transparent; padding: 5px;">
Lorem Ipsum
</div>
<script>
// Make the DIV element draggable:
dragElement(document.getElementById("draggableTitle"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id)) {
// If present, the header is where you move the DIV from:
document.getElementById(elmnt.id).onmousedown = dragMouseDown;
} else {
// Otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// Get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// Call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// Calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// Set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// Stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}
</script
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists