Sindbad~EG File Manager

<svg id="hzoomin" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- Vertical line -->
  <line x1="15" y1="6" x2="15" y2="24" stroke="white" stroke-width="4" />

 <!-- Left triangle -->
 <polygon points="5,10 5,20 10,15" fill="white" />

 <!-- Right triangle -->
 <polygon points="25,10 25,20 20,15" fill="white" />
</svg>

<svg id="vzoomin" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- Horizontal line -->
  <line x1="6" y1="15" x2="24" y2="15" stroke="white" stroke-width="4" />

  <!-- Top triangle -->
  <polygon points="10,5 20,5 15,10" fill="white" />

  <!-- Bottom triangle -->
  <polygon points="10,25 20,25 15,20" fill="white" />
</svg>

<svg id="hzoomout" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- Vertical line -->
  <line x1="15" y1="6" x2="15" y2="24" stroke="white" stroke-width="4" />

  <!-- Left triangle -->
  <polygon points="5,15 10,10 10,20" fill="white" />

  <!-- Right triangle -->
  <polygon points="25,15 20,10 20,20" fill="white" />
</svg>

<svg id="vzoomout" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- Horizontal line -->
  <line x1="6" y1="15" x2="24" y2="15" stroke="white" stroke-width="4" />

  <!-- Top triangle -->
  <polygon points="10,10 20,10 15,5" fill="white" />

  <!-- Bottom triangle -->
  <polygon points="10,20 20,20 15,25" fill="white" />
</svg>

<svg id="zoomin" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- Top triangle -->
  <polygon points="10,5 20,5 15,10" fill="white" />

  <!-- Bottom triangle -->
  <polygon points="10,25 20,25 15,20" fill="white" />

  <!-- Left triangle -->
  <polygon points="5,10 5,20 10,15" fill="white" />

  <!-- Right triangle -->
  <polygon points="25,10 25,20 20,15" fill="white" />
</svg>

<svg id="zoomout" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- Top triangle -->
  <polygon points="10,5 20,5 15,0" fill="white" />

  <!-- Bottom triangle -->
  <polygon points="10,25 20,25 15,30" fill="white" />

  <!-- Left triangle -->
  <polygon points="0,15 5,20 5,10" fill="white" />

  <!-- Right triangle -->
  <polygon points="25,10 25,20 30,15" fill="white" />
</svg>

<svg id="draw" class="svg-button" width="60" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="60" height="30" fill="rgb(0,0,128)" />

  <!-- Horizontal line -->
  <line x1="0" y1="7.5" x2="60" y2="7.5" stroke="white" stroke-width="1" />

  <!-- Vertical line -->
  <line x1="30" y1="0" x2="30" y2="15" stroke="white" stroke-width="1" />

  <!-- cubic curve -->
  <path d="M 0 15 Q 10 -5 30 7.5 Q 50 20 60 -5" fill="none" stroke="white" stroke-width="1" />

  <!-- Text -->
  <text x="30" y="25" fill="white" font-size="12" font-family="Arial" text-anchor="middle">Draw</text>
</svg>

<svg id="select1" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- White rectangle touching lower left corner -->
  <rect x="0" y="18" width="12" height="12" fill="none" stroke="white" stroke-width="1" />

  <!-- Dotted line with arrowhead from rectangle to upper right corner -->
  <defs>
    <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="1" refY="3" orient="auto">
      <polygon points="0 0, 6 3, 0 6" fill="white" />
    </marker>
  </defs>
  <line x1="12" y1="18" x2="25" y2="5" stroke="white" stroke-width="1" stroke-dasharray="2,2" marker-end="url(#arrowhead)" />
</svg>


<svg id="select2" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- White rectangle centered in the button -->
  <rect x="9" y="9" width="12" height="12" fill="none" stroke="white" stroke-width="1" />

  <!-- Dotted line with arrowhead from center to upper right corner -->
  <defs>
    <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="1" refY="3" orient="auto">
      <polygon points="0 0, 6 3, 0 6" fill="white" />
    </marker>
  </defs>
  <line x1="15" y1="15" x2="25" y2="5" stroke="white" stroke-width="1" stroke-dasharray="2,2" marker-end="url(#arrowhead)" />
</svg>

<svg id="pointslope" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- Horizontal and vertical lines emanating from points one pixel from the center -->
  <line x1="15" y1="13" x2="15" y2="0" stroke="white" stroke-width="1" />
  <line x1="15" y1="17" x2="15" y2="30" stroke="white" stroke-width="1" />
  <line x1="13" y1="15" x2="0" y2="15" stroke="white" stroke-width="1" />
  <line x1="17" y1="15" x2="30" y2="15" stroke="white" stroke-width="1" />
</svg>

<svg id="drag" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />

  <!-- Arrow at a 30-degree angle to the horizontal -->
  <defs>
    <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
      <polygon points="0 0, 6 3, 0 6" fill="white" />
    </marker>
  </defs>
  <line x1="2" y1="15" x2="25" y2="5" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />

  <!-- Text -->
  <text x="15" y="25" fill="white" font-size="10" font-family="Arial" text-anchor="middle">Drag</text>
</svg>

<svg id="circularAspect" class="svg-button" width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="30" height="30" fill="rgb(0,0,128)" />
   <circle cx="15" cy="15" r="10" stroke="white" fill="none" stroke-width="1"  />
</svg>

<svg id="directionfield" class="svg-button" width="60" height="30" xmlns="http://www.w3.org/2000/svg">
    <!-- Background -->
    <rect width="30" height="30" fill="rgb(0,0,128)" />

    <!-- Direction field arrows -->
    <defs>
        <marker id="arrowhead" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5" orient="auto">
            <polygon points="0 0, 3 1.5, 0 3" fill="white" />
        </marker>
    </defs>

    <!-- Arcs with arrows -->

    <!-- Arc 1 -->
    <line x1="0" y1="8" x2="10" y2="0" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="10" y1="0" x2="20" y2="-3" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="20" y1="-3" x2="30" y2="0.5" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="30" y1="0.5" x2="40" y2="4" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="40" y1="4" x2="50" y2="0" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="50" y1="0" x2="60" y2="-5" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    

    <!-- Arc 2 -->
    <line x1="0" y1="15" x2="10" y2="7" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="10" y1="7" x2="20" y2="4" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="20" y1="4" x2="30" y2="7.5" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="30" y1="7.5" x2="40" y2="11" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="40" y1="11" x2="50" y2="9" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="50" y1="9" x2="60" y2="0" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    

    <!-- Arc 3 -->
    <line x1="0" y1="22" x2="10" y2="14" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="10" y1="14" x2="20" y2="11" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="20" y1="11" x2="30" y2="14.5" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="30" y1="14.5" x2="40" y2="18" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="40" y1="18" x2="50" y2="16" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="50" y1="16" x2="60" y2="9" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />

    <!-- Arc 4 -->
    <line x1="0" y1="29" x2="10" y2="21" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="10" y1="21" x2="20" y2="18" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="20" y1="18" x2="30" y2="21.5" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="30" y1="21.5" x2="40" y2="25" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="40" y1="25" x2="50" y2="24" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="50" y1="24" x2="60" y2="18" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
	
    <!-- Arc 5 -->
    <line x1="0" y1="35" x2="10" y2="28" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="10" y1="28" x2="20" y2="25" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="20" y1="25" x2="30" y2="29" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="30" y1="29" x2="40" y2="39" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="40" y1="39" x2="50" y2="30" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
    <line x1="50" y1="30" x2="60" y2="26" stroke="white" stroke-width="1" marker-end="url(#arrowhead)" />
</svg>

<svg id="assumptions" class="svg-button" width="62" height="20" xmlns="http://www.w3.org/2000/svg">
    <!-- Background -->
    <rect width="62" height="20" fill="rgb(0,0,128)" />
    <!-- Text -->
    <text x="30" y="15" fill="white" font-size="12" font-family="Arial" text-anchor="middle">Assumptions</text>
</svg>

<svg id="singularities" class="svg-button" width="62" height="20" xmlns="http://www.w3.org/2000/svg">
    <!-- Background -->
    <rect width="62" height="20" fill="rgb(0,0,128)" />
    <!-- Text -->
    <text x="30" y="15" fill="white" font-size="12" font-family="Arial" text-anchor="middle">Singularities</text>
</svg>

<svg id="jumps" class="svg-button" width="62" height="20" xmlns="http://www.w3.org/2000/svg">
    <!-- Background -->
    <rect width="62" height="20" fill="rgb(0,0,128)" />
    <!-- Text -->
    <text x="30" y="15" fill="white" font-size="12" font-family="Arial" text-anchor="middle">Jumps</text>
</svg>

<svg id="remarksText" class="svg-button" width="62" height="20" xmlns="http://www.w3.org/2000/svg">
    <!-- Background -->
    <rect width="62" height="20" fill="rgb(0,0,128)" />
    <!-- Text -->
    <text x="30" y="15" fill="white" font-size="12" font-family="Arial" text-anchor="middle">Remarks</text>
</svg>

<svg id="finishedButtonRef" class="svg-button" width="62" height="36" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="66" height="36" fill="rgb(0,0,128)" />
  
  <!-- Check mark -->
  <text x="30" y="20" fill="lightgreen"  stroke="white" font-size="24" font-family="Arial" text-anchor="middle">✓</text>
  
  <!-- Text -->
  <text x="34" y="33" fill="white" font-size="12" font-family="Arial" text-anchor="middle" >Finished?</text>
</svg>


<!-- arrowhead definition needed for the undo button, it doesn't get included automatically, 
whether inside the definition of undoButton or not,  so it's repeated in SymbolicDoc.php and
THIS copy actually does nothing at all but is only for reference if someone happens to read this file.
 -->
 
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <marker id="arrowhead2" markerWidth="5" markerHeight="4" refX="2" refY="2" orient="auto">
            <polygon points="0 0, 4 2, 0 4" fill="white" />
        </marker>
    </defs>
</svg>

<svg id="undoButtonRef" class="svg-button" width="66" height="36" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="66" height="36" fill="rgb(0,0,128)" />
   <path d="M 24,17 A9,9 0 1,0 24,9" stroke="white" fill="none" stroke-width="2" marker-end="url(#arrowhead2)"/>
   <text x="33" y="33" fill="white" font-size="12" font-family="Arial" text-anchor="middle">Undo</text>
</svg>

<svg id="graphButtonRef" class="svg-button" width="66" height="36" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="66" height="36" fill="rgb(0,0,128)" />

  <!-- Horizontal line -->
  <line x1="5" y1="11" x2="60" y2="11" stroke="white" stroke-width="1" />

  <!-- Vertical line -->
  <line x1="33" y1="2" x2="33" y2="20" stroke="white" stroke-width="1" />

<!-- cubic curve -->
<path d="M 8 19 Q 17 1 30 10.5 Q 50 22 58 3" fill="none" stroke="red" stroke-width="2" />

  <!-- Text -->
  <text x="33" y="33" fill="white" font-size="12" font-family="Arial" text-anchor="middle">Graph</text>
</svg>

<svg id="hintButtonRef" class="svg-button" width="66" height="36" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="66" height="36" fill="rgb(0,0,128)" />
  <!--  sound waves -->
  <text x="11" y="20" font-size="24" stroke="white"> 〰</text>
  <text x="11" y="24" font-size="24" stroke="white"> 〰</text>
   <!--  ear emoji -->     
  <text x="37" y="23" font-size="24"> 👂 </text>
  <!-- Text -->
  <text x="33" y="33" fill="white" font-size="12" font-family="Arial" text-anchor="middle">Hint</text>
</svg>

<svg id="autoFinishButtonRef" class="svg-button" width="66" height="36" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="66" height="36" fill="rgb(0,0,128)" />
 <!-- Scaled steps -->
 <text x="34" y="18" font-size="18" fill="white" transform="scale(0.6, 1)">▂▅▇</text>
 <path d="M 6 18 L 30 4"  stroke="white" stroke-width="2" marker-end="url(#arrowhead2)" />
   <!-- Text -->
  <text x="33" y="33" fill="white" font-size="12" font-family="Arial" text-anchor="middle" >AutoFinish</text>
</svg>

<svg id="autoStepButtonRef" class="svg-button" width="66" height="36" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="66" height="36" fill="rgb(0,0,128)" />
 <!-- Scaled steps -->
 <text x="34" y="18" font-size="18" fill="white" transform="scale(0.6, 1)">▂▅▇</text>
 <path d="M 9 18 L 17 13.3"  stroke="white" stroke-width="2" marker-end="url(#arrowhead2)" />
   <!-- Text -->
  <text x="33" y="33" fill="white" font-size="12" font-family="Arial" text-anchor="middle" >AutoStep</text>
</svg>

<svg id="showStepButtonRef" class="svg-button" width="66" height="36" xmlns="http://www.w3.org/2000/svg">
	<!-- Background -->
	<rect width="66" height="36" fill="rgb(0,0,128)" />
    <!-- Cone of light -->
    <polygon points="17,15 21,20 38,20 21,9" fill="lightyellow" opacity="0.5" />
	
	<!-- Scaled steps -->
	<text x="34" y="18" font-size="18" fill="white" transform="scale(0.6, 1)">▂▅▇</text> 
	<!--  flashlight -->
	<text x="-18" y="18" font-size="18" transform="scale(-0.8, 0.75)" text-anchor="middle" text-anchor="middle">🔦</text>
	<!-- Text -->
	<text x="35" y="33" fill="white" font-size="12" font-family="Arial" text-anchor="middle" >ShowStep</text>
</svg>

<svg id="assumptionsButtonRef" class="svg-button" width="66" height="36" xmlns="http://www.w3.org/2000/svg">
    <!-- Background -->
    <rect width="66" height="36" fill="rgb(0,0,128)" />
    
    <!-- Eye emoji -->
    <text x="33" y="18" font-size="18" text-anchor="middle">👁️</text>
    
    
    <!-- Text -->
    <text x="33" y="33" fill="white" font-size="12" font-family="Arial" text-anchor="middle" >Assumptions</text>
</svg>