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;
}
/* 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';
}
/* the following container with horizontal flow will hold the Toolbar and the svgContainer, so the svgContainer will come to the right of the Toolbar */
.container {
display: flex;
align-items: center;
position:relative;
top = 0;
left = 0;
}
/* Define a container div with absolute positioning so it comes to the right of the Toolbar */
#svgContainer {
position:absolute;
left: 60px;
top:0px;
z-index: 1;
text-shadow: none;
}
#draggableTitle0 {
position: absolute;
cursor: move;
border: none;
background-color: transparent;
text-shadow: none;
padding: 5px;
color: yellow;
top: 10px; /* Initial position */
left: 10px; /* Initial position */
z-index: 2; /* Ensure it's above other elements */
}
#draggableTitle1 {
position: absolute;
cursor: move;
border: none;
background-color: transparent;
text-shadow: none;
padding: 5px;
color: yellow;
top: 10px; /* Initial position */
left: 50px; /* Initial position */
z-index: 2; /* Ensure it's above other elements */
}
body {
background-color:none;
}
.toolbar {
display: flex;
flex: 0 0 60px;
flex-direction: column; /* Make the contents flow vertically */
gap: 5px; /* Adjust the gap as needed */
align-items: center; /* Align items horizontally in the center */
}
.toolbar 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 class="container">
<div class="toolbar" style="display: flex; flex-direction: column;align-items: center;">
<form method="post" action="/Demos/ProblemLibraryDemo/GraphDoc.php" style="display: flex; flex-direction: column;align-items: center;">
<input type="image" name="draw" src="draw89.bmp" Alt="Draw" width="60" height="36">
<input type="image" name="parameterplus" src="" alt="Parameter +" width="60" height="20">
<input type="image" name="parameterminus" src="" alt="Parameter -" width="60" height="20">
<input type="image" name="parameterchange" src="" alt="New param" width="60" height="20">
<input type="image" name="horizontalzoomout" src="" alt="VZoom Out" width="60" height="20">
<input type="image" name="verticalzoomout" src="" alt="HZoom Out" width="60" height="20">
<input type="image" name="horizontalzoomin" src="" alt="VZoom In" width="60" height="20">
<input type="image" name="verticalzoomin" src="" alt="HZoom In" width="60" height="20">
<input type="image" name="pointslope" src="" alt="Point-Slope" width="60" height="20">
</form>
</div>
<div id="svgContainer">
<svg id="graphSVG" width="715" height="398" top = "0px"; xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="654" height="198" style="stroke:rgb(255,255,0); fill:rgb(255,235,190);"/>
<path stroke="rgb(255,255,0)" fill="none" stroke-width="1" d = "" />
<path stroke="rgb(255,255,0)" fill="none" stroke-width="1" d = "" />
<path stroke="rgb(150,220,150)" fill="none" stroke-width="1" d = "M 319.8 198.9 L 319.8 0.8 M 312.6 198.9 L 312.6 0.8 M 305.4 198.9 L 305.4 0.8 M 298.2 198.9 L 298.2 0.8 M 283.9 198.9 L 283.9 0.8 M 276.7 198.9 L 276.7 0.8 M 269.5 198.9 L 269.5 0.8 M 262.3 198.9 L 262.3 0.8 M 247.9 198.9 L 247.9 0.8 M 240.7 198.9 L 240.7 0.8 M 233.5 198.9 L 233.5 0.8 M 226.4 198.9 L 226.4 0.8 M 212.0 198.9 L 212.0 0.8 M 204.8 198.9 L 204.8 0.8 M 197.6 198.9 L 197.6 0.8 M 190.4 198.9 L 190.4 0.8 M 176.0 198.9 L 176.0 0.8 M 168.8 198.9 L 168.8 0.8 M 161.7 198.9 L 161.7 0.8 M 154.5 198.9 L 154.5 0.8 M 140.1 198.9 L 140.1 0.8 M 132.9 198.9 L 132.9 0.8 M 125.7 198.9 L 125.7 0.8 M 118.5 198.9 L 118.5 0.8 M 104.1 198.9 L 104.1 0.8 M 97.0 198.9 L 97.0 0.8 M 89.8 198.9 L 89.8 0.8 M 82.6 198.9 L 82.6 0.8 M 68.2 198.9 L 68.2 0.8 M 61.0 198.9 L 61.0 0.8 M 53.8 198.9 L 53.8 0.8 M 46.6 198.9 L 46.6 0.8 M 32.3 198.9 L 32.3 0.8 M 25.1 198.9 L 25.1 0.8 M 17.9 198.9 L 17.9 0.8 M 10.7 198.9 L 10.7 0.8 M 334.2 198.9 L 334.2 0.8 M 341.4 198.9 L 341.4 0.8 M 348.6 198.9 L 348.6 0.8 M 355.8 198.9 L 355.8 0.8 M 370.1 198.9 L 370.1 0.8 M 377.3 198.9 L 377.3 0.8 M 384.5 198.9 L 384.5 0.8 M 391.7 198.9 L 391.7 0.8 M 406.1 198.9 L 406.1 0.8 M 413.3 198.9 L 413.3 0.8 M 420.5 198.9 L 420.5 0.8 M 427.6 198.9 L 427.6 0.8 M 442.0 198.9 L 442.0 0.8 M 449.2 198.9 L 449.2 0.8 M 456.4 198.9 L 456.4 0.8 M 463.6 198.9 L 463.6 0.8 M 478.0 198.9 L 478.0 0.8 M 485.2 198.9 L 485.2 0.8 M 492.3 198.9 L 492.3 0.8 M 499.5 198.9 L 499.5 0.8 M 513.9 198.9 L 513.9 0.8 M 521.1 198.9 L 521.1 0.8 M 528.3 198.9 L 528.3 0.8 M 535.5 198.9 L 535.5 0.8 M 549.9 198.9 L 549.9 0.8 M 557.0 198.9 L 557.0 0.8 M 564.2 198.9 L 564.2 0.8 M 571.4 198.9 L 571.4 0.8 M 585.8 198.9 L 585.8 0.8 M 593.0 198.9 L 593.0 0.8 M 600.2 198.9 L 600.2 0.8 M 607.4 198.9 L 607.4 0.8 M 621.7 198.9 L 621.7 0.8 M 628.9 198.9 L 628.9 0.8 M 636.1 198.9 L 636.1 0.8 M 643.3 198.9 L 643.3 0.8 M 0.0 107.0 L 654.0 107.0 M 0.0 114.2 L 654.0 114.2 M 0.0 121.3 L 654.0 121.3 M 0.0 128.5 L 654.0 128.5 M 0.0 142.8 L 654.0 142.8 M 0.0 150.0 L 654.0 150.0 M 0.0 157.2 L 654.0 157.2 M 0.0 164.3 L 654.0 164.3 M 0.0 178.6 L 654.0 178.6 M 0.0 185.8 L 654.0 185.8 M 0.0 193.0 L 654.0 193.0 M 0.0 92.7 L 654.0 92.7 M 0.0 85.5 L 654.0 85.5 M 0.0 78.4 L 654.0 78.4 M 0.0 71.2 L 654.0 71.2 M 0.0 56.9 L 654.0 56.9 M 0.0 49.7 L 654.0 49.7 M 0.0 42.5 L 654.0 42.5 M 0.0 35.4 L 654.0 35.4 M 0.0 21.0 L 654.0 21.0 M 0.0 13.9 L 654.0 13.9 M 0.0 6.7 L 654.0 6.7 " />
<path stroke="rgb(150,220,150)" fill="none" stroke-width="1" d = "" />
<path stroke="rgb(120,120,120)" fill="none" stroke-width="1" d = "M 291.1 198.9 L 291.1 0.8 M 255.1 198.9 L 255.1 0.8 M 219.2 198.9 L 219.2 0.8 M 183.2 198.9 L 183.2 0.8 M 147.3 198.9 L 147.3 0.8 M 111.3 198.9 L 111.3 0.8 M 75.4 198.9 L 75.4 0.8 M 39.4 198.9 L 39.4 0.8 M 3.5 198.9 L 3.5 0.8 M 362.9 198.9 L 362.9 0.8 M 398.9 198.9 L 398.9 0.8 M 434.8 198.9 L 434.8 0.8 M 470.8 198.9 L 470.8 0.8 M 506.7 198.9 L 506.7 0.8 M 542.7 198.9 L 542.7 0.8 M 578.6 198.9 L 578.6 0.8 M 614.6 198.9 L 614.6 0.8 M 650.5 198.9 L 650.5 0.8 M 0.0 135.7 L 654.0 135.7 M 0.0 171.5 L 654.0 171.5 M 0.0 64.0 L 654.0 64.0 M 0.0 28.2 L 654.0 28.2 " />
<path stroke="rgb(120,120,120)" fill="none" stroke-width="3" d = "" />
<rect x="0" y="0" width="654" height="198" style="fill:none; stroke:rgb(255,255,0); stroke-width:1;"/>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 0.0 99.8 L 654.0 99.8 M 327.0 198.9 L 327.0 0.8 " />
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 147.0 99.8 L 147.0 95.9 M 147.0 99.8 L 147.0 103.8 M 147.0 118.1 M 142.0 118.1 " />
<text x = "142" y="117" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);">-1</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 507.0 99.8 L 507.0 95.9 M 507.0 99.8 L 507.0 103.8 M 507.0 118.1 M 504.0 118.1 " />
<text x = "504" y="117" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);">1</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 327.0 189.9 L 333.5 189.9 M 327.0 189.9 L 320.5 189.9 M 340.1 195.9 " />
<text x = "340" y="195" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);">-10</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 327.0 9.8 L 333.5 9.8 M 327.0 9.8 L 320.5 9.8 M 340.1 15.8 " />
<text x = "340" y="14" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);">10</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 319.8 13.9 " />
<text x = "319" y="13" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);"><tspan style="font-style:italic">y</tspan></text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 645.0 113.0 " />
<text x = "645" y="112" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);"><tspan style="font-style:italic">x</tspan></text>
<path stroke="rgb(255,0,0)" fill="none" stroke-width="3" d = "M 0.0 107.2 L 3.3 107.0 L 6.5 106.9 L 9.8 106.7 L 13.1 106.5 L 16.3 106.4 L 19.6 106.2 L 22.9 106.1 L 26.2 105.9 L 29.4 105.7 L 32.7 105.6 L 36.0 105.4 L 39.2 105.2 L 42.5 105.1 L 45.8 104.9 L 49.0 104.7 L 52.3 104.6 L 55.6 104.4 L 58.9 104.3 L 62.1 104.1 L 65.4 103.9 L 68.7 103.8 L 71.9 103.6 L 75.2 103.4 L 78.5 103.3 L 81.7 103.1 L 85.0 102.9 L 88.3 102.8 L 91.6 102.6 L 94.8 102.5 L 98.1 102.3 L 101.4 102.1 L 104.6 102.0 L 107.9 101.8 L 111.2 101.6 L 114.4 101.5 L 117.7 101.3 L 121.0 101.1 L 124.3 101.0 L 127.5 100.8 L 130.8 100.7 L 134.1 100.5 L 137.3 100.3 L 140.6 100.2 L 143.9 100.0 L 147.1 99.8 L 150.4 99.7 L 153.7 99.5 L 157.0 99.3 L 160.2 99.2 L 163.5 99.0 L 166.8 98.9 L 170.0 98.7 L 173.3 98.5 L 176.6 98.4 L 179.8 98.2 L 183.1 98.0 L 186.4 97.9 L 189.7 97.7 L 192.9 97.5 L 196.2 97.4 L 199.5 97.2 L 202.7 97.1 L 206.0 96.9 L 209.3 96.7 L 212.5 96.6 L 215.8 96.4 L 219.1 96.2 L 222.4 96.1 L 225.6 95.9 L 228.9 95.7 L 232.2 95.6 L 235.4 95.4 L 238.7 95.3 L 242.0 95.1 L 245.2 94.9 L 248.5 94.8 L 251.8 94.6 L 255.1 94.4 L 258.3 94.3 L 261.6 94.1 L 264.9 93.9 L 268.1 93.8 L 271.4 93.6 L 274.7 93.5 L 277.9 93.3 L 281.2 93.1 L 284.5 93.0 L 287.8 92.8 L 291.0 92.6 L 294.3 92.5 L 297.6 92.3 L 300.8 92.1 L 304.1 92.0 L 307.4 91.8 L 310.6 91.7 L 313.9 91.5 L 317.2 91.3 L 320.5 91.2 L 323.7 91.0 L 327.0 90.8 L 330.3 90.7 L 333.5 90.5 L 336.8 90.4 L 340.1 90.2 L 343.3 90.0 L 346.6 89.9 L 349.9 89.7 L 353.2 89.5 L 356.4 89.4 L 359.7 89.2 L 363.0 89.0 L 366.2 88.9 L 369.5 88.7 L 372.8 88.6 L 376.0 88.4 L 379.3 88.2 L 382.6 88.1 L 385.9 87.9 L 389.1 87.7 L 392.4 87.6 L 395.7 87.4 L 398.9 87.2 L 402.2 87.1 L 405.5 86.9 L 408.7 86.8 L 412.0 86.6 L 415.3 86.4 L 418.6 86.3 L 421.8 86.1 L 425.1 85.9 L 428.4 85.8 L 431.6 85.6 L 434.9 85.4 L 438.2 85.3 L 441.4 85.1 L 444.7 85.0 L 448.0 84.8 L 451.3 84.6 L 454.5 84.5 L 457.8 84.3 L 461.1 84.1 L 464.3 84.0 L 467.6 83.8 L 470.9 83.6 L 474.1 83.5 L 477.4 83.3 L 480.7 83.2 L 484.0 83.0 L 487.2 82.8 L 490.5 82.7 L 493.8 82.5 L 497.0 82.3 L 500.3 82.2 L 503.6 82.0 L 506.8 81.8 L 510.1 81.7 L 513.4 81.5 L 516.7 81.4 L 519.9 81.2 L 523.2 81.0 L 526.5 80.9 L 529.7 80.7 L 533.0 80.5 L 536.3 80.4 L 539.5 80.2 L 542.8 80.0 L 546.1 79.9 L 549.4 79.7 L 552.6 79.6 L 555.9 79.4 L 559.2 79.2 L 562.4 79.1 L 565.7 78.9 L 569.0 78.7 L 572.2 78.6 L 575.5 78.4 L 578.8 78.2 L 582.1 78.1 L 585.3 77.9 L 588.6 77.8 L 591.9 77.6 L 595.1 77.4 L 598.4 77.3 L 601.7 77.1 L 604.9 76.9 L 608.2 76.8 L 611.5 76.6 L 614.8 76.4 L 618.0 76.3 L 621.3 76.1 L 624.6 76.0 L 627.8 75.8 L 631.1 75.6 L 634.4 75.5 L 637.6 75.3 L 640.9 75.1 L 644.2 75.0 L 647.5 74.8 L 650.7 74.6 L 654.0 74.5 L 657.3 74.3 " />
<svg id="title0" class = "title" width="075" height="30" style="position:absolute;left: 457; top: 98;" viewBox = " 0 0 75 30" xmlns="http://www.w3.org/2000/svg">
<text x = "8" y="19" style="font-style:italic;font-size:12pt;fill:rgb(255,0,0);">y </text>
<text x = "20" y="20" style="font-style:roman;font-size:12pt;fill:rgb(255,0,0);">= </text>
<text x = "32" y="19" style="font-style:italic;font-size:12pt;fill:rgb(255,0,0);">x </text>
<text x = "46" y="19" style="font-style:roman;font-size:12pt;fill:rgb(255,0,0);">+ </text>
<text x = "60" y="19" style="font-style:roman;font-size:12pt;fill:rgb(255,0,0);">1 </text>
</svg>
<path stroke="rgb(255,255,0)" fill="none" stroke-width="1" d = "" />
<path stroke="rgb(255,255,0)" fill="none" stroke-width="1" d = "" />
<path stroke="rgb(150,220,150)" fill="none" stroke-width="1" d = "M 319.8 396.2 L 319.8 198.1 M 312.6 396.2 L 312.6 198.1 M 305.4 396.2 L 305.4 198.1 M 298.2 396.2 L 298.2 198.1 M 283.9 396.2 L 283.9 198.1 M 276.7 396.2 L 276.7 198.1 M 269.5 396.2 L 269.5 198.1 M 262.3 396.2 L 262.3 198.1 M 247.9 396.2 L 247.9 198.1 M 240.7 396.2 L 240.7 198.1 M 233.5 396.2 L 233.5 198.1 M 226.4 396.2 L 226.4 198.1 M 212.0 396.2 L 212.0 198.1 M 204.8 396.2 L 204.8 198.1 M 197.6 396.2 L 197.6 198.1 M 190.4 396.2 L 190.4 198.1 M 176.0 396.2 L 176.0 198.1 M 168.8 396.2 L 168.8 198.1 M 161.7 396.2 L 161.7 198.1 M 154.5 396.2 L 154.5 198.1 M 140.1 396.2 L 140.1 198.1 M 132.9 396.2 L 132.9 198.1 M 125.7 396.2 L 125.7 198.1 M 118.5 396.2 L 118.5 198.1 M 104.1 396.2 L 104.1 198.1 M 97.0 396.2 L 97.0 198.1 M 89.8 396.2 L 89.8 198.1 M 82.6 396.2 L 82.6 198.1 M 68.2 396.2 L 68.2 198.1 M 61.0 396.2 L 61.0 198.1 M 53.8 396.2 L 53.8 198.1 M 46.6 396.2 L 46.6 198.1 M 32.3 396.2 L 32.3 198.1 M 25.1 396.2 L 25.1 198.1 M 17.9 396.2 L 17.9 198.1 M 10.7 396.2 L 10.7 198.1 M 334.2 396.2 L 334.2 198.1 M 341.4 396.2 L 341.4 198.1 M 348.6 396.2 L 348.6 198.1 M 355.8 396.2 L 355.8 198.1 M 370.1 396.2 L 370.1 198.1 M 377.3 396.2 L 377.3 198.1 M 384.5 396.2 L 384.5 198.1 M 391.7 396.2 L 391.7 198.1 M 406.1 396.2 L 406.1 198.1 M 413.3 396.2 L 413.3 198.1 M 420.5 396.2 L 420.5 198.1 M 427.6 396.2 L 427.6 198.1 M 442.0 396.2 L 442.0 198.1 M 449.2 396.2 L 449.2 198.1 M 456.4 396.2 L 456.4 198.1 M 463.6 396.2 L 463.6 198.1 M 478.0 396.2 L 478.0 198.1 M 485.2 396.2 L 485.2 198.1 M 492.3 396.2 L 492.3 198.1 M 499.5 396.2 L 499.5 198.1 M 513.9 396.2 L 513.9 198.1 M 521.1 396.2 L 521.1 198.1 M 528.3 396.2 L 528.3 198.1 M 535.5 396.2 L 535.5 198.1 M 549.9 396.2 L 549.9 198.1 M 557.0 396.2 L 557.0 198.1 M 564.2 396.2 L 564.2 198.1 M 571.4 396.2 L 571.4 198.1 M 585.8 396.2 L 585.8 198.1 M 593.0 396.2 L 593.0 198.1 M 600.2 396.2 L 600.2 198.1 M 607.4 396.2 L 607.4 198.1 M 621.7 396.2 L 621.7 198.1 M 628.9 396.2 L 628.9 198.1 M 636.1 396.2 L 636.1 198.1 M 643.3 396.2 L 643.3 198.1 M 0.0 304.3 L 654.0 304.3 M 0.0 311.5 L 654.0 311.5 M 0.0 318.6 L 654.0 318.6 M 0.0 325.8 L 654.0 325.8 M 0.0 340.1 L 654.0 340.1 M 0.0 347.3 L 654.0 347.3 M 0.0 354.5 L 654.0 354.5 M 0.0 361.6 L 654.0 361.6 M 0.0 376.0 L 654.0 376.0 M 0.0 383.1 L 654.0 383.1 M 0.0 390.3 L 654.0 390.3 M 0.0 290.0 L 654.0 290.0 M 0.0 282.8 L 654.0 282.8 M 0.0 275.7 L 654.0 275.7 M 0.0 268.5 L 654.0 268.5 M 0.0 254.2 L 654.0 254.2 M 0.0 247.0 L 654.0 247.0 M 0.0 239.8 L 654.0 239.8 M 0.0 232.7 L 654.0 232.7 M 0.0 218.4 L 654.0 218.4 M 0.0 211.2 L 654.0 211.2 M 0.0 204.0 L 654.0 204.0 " />
<path stroke="rgb(150,220,150)" fill="none" stroke-width="1" d = "" />
<path stroke="rgb(120,120,120)" fill="none" stroke-width="1" d = "M 291.1 396.2 L 291.1 198.1 M 255.1 396.2 L 255.1 198.1 M 219.2 396.2 L 219.2 198.1 M 183.2 396.2 L 183.2 198.1 M 147.3 396.2 L 147.3 198.1 M 111.3 396.2 L 111.3 198.1 M 75.4 396.2 L 75.4 198.1 M 39.4 396.2 L 39.4 198.1 M 3.5 396.2 L 3.5 198.1 M 362.9 396.2 L 362.9 198.1 M 398.9 396.2 L 398.9 198.1 M 434.8 396.2 L 434.8 198.1 M 470.8 396.2 L 470.8 198.1 M 506.7 396.2 L 506.7 198.1 M 542.7 396.2 L 542.7 198.1 M 578.6 396.2 L 578.6 198.1 M 614.6 396.2 L 614.6 198.1 M 650.5 396.2 L 650.5 198.1 M 0.0 333.0 L 654.0 333.0 M 0.0 368.8 L 654.0 368.8 M 0.0 261.3 L 654.0 261.3 M 0.0 225.5 L 654.0 225.5 " />
<path stroke="rgb(120,120,120)" fill="none" stroke-width="3" d = "" />
<rect x="0" y="0" width="654" height="198" style="fill:none; stroke:rgb(255,255,0); stroke-width:1;"/>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 0.0 297.2 L 654.0 297.2 M 327.0 396.2 L 327.0 198.1 " />
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 147.0 297.2 L 147.0 293.2 M 147.0 297.2 L 147.0 301.1 M 147.0 315.5 M 142.0 315.5 " />
<text x = "142" y="117" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);">-1</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 507.0 297.2 L 507.0 293.2 M 507.0 297.2 L 507.0 301.1 M 507.0 315.5 M 504.0 315.5 " />
<text x = "504" y="117" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);">1</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 327.0 387.2 L 333.5 387.2 M 327.0 387.2 L 320.5 387.2 M 340.1 393.2 " />
<text x = "340" y="195" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);">-10</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 327.0 207.1 L 333.5 207.1 M 327.0 207.1 L 320.5 207.1 M 340.1 213.1 " />
<text x = "340" y="14" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);">10</text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 319.8 211.2 " />
<text x = "319" y="13" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);"><tspan style="font-style:italic">y</tspan></text>
<path stroke="rgb(0,0,0)" fill="none" stroke-width="2" d = "M 645.0 310.3 " />
<text x = "645" y="112" style="font-style:roman;font-size:10pt;fill:none;stroke:rgb(0,0,0);"><tspan style="font-style:italic">x</tspan></text>
<path stroke="rgb(120,120,120)" fill="none" stroke-width="3" d = "M 0.0 304.5 L 3.3 304.3 L 6.5 304.2 L 9.8 304.0 L 13.1 303.9 L 16.3 303.7 L 19.6 303.5 L 22.9 303.4 L 26.2 303.2 L 29.4 303.0 L 32.7 302.9 L 36.0 302.7 L 39.2 302.5 L 42.5 302.4 L 45.8 302.2 L 49.0 302.1 L 52.3 301.9 L 55.6 301.7 L 58.9 301.6 L 62.1 301.4 L 65.4 301.2 L 68.7 301.1 L 71.9 300.9 L 75.2 300.7 L 78.5 300.6 L 81.7 300.4 L 85.0 300.3 L 88.3 300.1 L 91.6 299.9 L 94.8 299.8 L 98.1 299.6 L 101.4 299.4 L 104.6 299.3 L 107.9 299.1 L 111.2 298.9 L 114.4 298.8 L 117.7 298.6 L 121.0 298.5 L 124.3 298.3 L 127.5 298.1 L 130.8 298.0 L 134.1 297.8 L 137.3 297.6 L 140.6 297.5 L 143.9 297.3 L 147.1 297.1 L 150.4 297.0 L 153.7 296.8 L 157.0 296.7 L 160.2 296.5 L 163.5 296.3 L 166.8 296.2 L 170.0 296.0 L 173.3 295.8 L 176.6 295.7 L 179.8 295.5 L 183.1 295.3 L 186.4 295.2 L 189.7 295.0 L 192.9 294.9 L 196.2 294.7 L 199.5 294.5 L 202.7 294.4 L 206.0 294.2 L 209.3 294.0 L 212.5 293.9 L 215.8 293.7 L 219.1 293.5 L 222.4 293.4 L 225.6 293.2 L 228.9 293.1 L 232.2 292.9 L 235.4 292.7 L 238.7 292.6 L 242.0 292.4 L 245.2 292.2 L 248.5 292.1 L 251.8 291.9 L 255.1 291.7 L 258.3 291.6 L 261.6 291.4 L 264.9 291.3 L 268.1 291.1 L 271.4 290.9 L 274.7 290.8 L 277.9 290.6 L 281.2 290.4 L 284.5 290.3 L 287.8 290.1 L 291.0 289.9 L 294.3 289.8 L 297.6 289.6 L 300.8 289.5 L 304.1 289.3 L 307.4 289.1 L 310.6 289.0 L 313.9 288.8 L 317.2 288.6 L 320.5 288.5 L 323.7 288.3 L 327.0 288.1 L 330.3 288.0 L 333.5 287.8 L 336.8 287.7 L 340.1 287.5 L 343.3 287.3 L 346.6 287.2 L 349.9 287.0 L 353.2 286.8 L 356.4 286.7 L 359.7 286.5 L 363.0 286.4 L 366.2 286.2 L 369.5 286.0 L 372.8 285.9 L 376.0 285.7 L 379.3 285.5 L 382.6 285.4 L 385.9 285.2 L 389.1 285.0 L 392.4 284.9 L 395.7 284.7 L 398.9 284.6 L 402.2 284.4 L 405.5 284.2 L 408.7 284.1 L 412.0 283.9 L 415.3 283.7 L 418.6 283.6 L 421.8 283.4 L 425.1 283.2 L 428.4 283.1 L 431.6 282.9 L 434.9 282.8 L 438.2 282.6 L 441.4 282.4 L 444.7 282.3 L 448.0 282.1 L 451.3 281.9 L 454.5 281.8 L 457.8 281.6 L 461.1 281.4 L 464.3 281.3 L 467.6 281.1 L 470.9 281.0 L 474.1 280.8 L 477.4 280.6 L 480.7 280.5 L 484.0 280.3 L 487.2 280.1 L 490.5 280.0 L 493.8 279.8 L 497.0 279.6 L 500.3 279.5 L 503.6 279.3 L 506.8 279.2 L 510.1 279.0 L 513.4 278.8 L 516.7 278.7 L 519.9 278.5 L 523.2 278.3 L 526.5 278.2 L 529.7 278.0 L 533.0 277.8 L 536.3 277.7 L 539.5 277.5 L 542.8 277.4 L 546.1 277.2 L 549.4 277.0 L 552.6 276.9 L 555.9 276.7 L 559.2 276.5 L 562.4 276.4 L 565.7 276.2 L 569.0 276.0 L 572.2 275.9 L 575.5 275.7 L 578.8 275.6 L 582.1 275.4 L 585.3 275.2 L 588.6 275.1 L 591.9 274.9 L 595.1 274.7 L 598.4 274.6 L 601.7 274.4 L 604.9 274.2 L 608.2 274.1 L 611.5 273.9 L 614.8 273.8 L 618.0 273.6 L 621.3 273.4 L 624.6 273.3 L 627.8 273.1 L 631.1 272.9 L 634.4 272.8 L 637.6 272.6 L 640.9 272.4 L 644.2 272.3 L 647.5 272.1 L 650.7 272.0 L 654.0 271.8 L 657.3 271.6 " />
<svg id="title1" class = "title" width="075" height="48" style="position:absolute;left: 457; top: 198;" viewBox = " 0 0 75 48" xmlns="http://www.w3.org/2000/svg">
<text x = "8" y="28" style="font-style:italic;font-size:12pt;fill:rgb(120,120,120);">y </text>
<text x = "20" y="29" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">= </text>
<text x = "32" y="19" style="font-style:italic;font-size:12pt;fill:rgb(120,120,120);">x </text>
<line x1="32" y1="24" x2="40" y2="24" style="stroke:rgb(120,120,120);"/>
<text x = "32" y="37" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">1 </text>
<text x = "46" y="28" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">+ </text>
<text x = "60" y="28" style="font-style:roman;font-size:12pt;fill:rgb(120,120,120);">1 </text>
</svg>
</svg>
</div> <!-- This closes the svgContainer div -->
<div id="draggableTitle0" style="position: absolute; cursor: move; border: none; background-color: transparent; padding: 5px;"> </div>
<div id="draggableTitle1" style="position: absolute; cursor: move; border: none; background-color: transparent; padding: 5px;"> </div>
<script>
// Make the DIV elements draggable:
dragElement(document.getElementById("draggableTitle0"));
dragElement(document.getElementById("draggableTitle1"));
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;
}
}
function moveSvgElementToContainer(svgElementId, destinationContainerId) {
var svgElement = document.getElementById(svgElementId);
var destinationContainer = document.getElementById(destinationContainerId);
if (svgElement && destinationContainer) {
destinationContainer.style.position = 'absolute';
destinationContainer.style.left = svgElement.style.left;
destinationContainer.style.top = svgElement.style.top;
var svgRect = svgElement.getBoundingClientRect();
destinationContainer.style.width = svgRect.width + 'px';
destinationContainer.style.height = svgRect.height + 'px';
// Now move the SVG element to the destination container
destinationContainer.appendChild(svgElement);
// Since the SVG is now positioned relative to its new container, reset its position
svgElement.style.left = '0px';
svgElement.style.top = '0px';
} else
{ if(svgElement)
{
console.error('destination container not found');
}
else
{
console.error('SVG element not found');
}
}
}
// Ensure this script runs after the DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
moveSvgElementToContainer('title0', 'draggableTitle0');
moveSvgElementToContainer('title1', 'draggableTitle1');
});
</script
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists