Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select a Graph Type</title>
<style>
.graph-container {
display: grid;
gap: 10px; /* vertical space between the items */
}
body {
background-color: rgb(220,220,255); /* Replace #e0e0e0 with your desired color */
}
h1 {
font-family: Arial, sans-serif;
text-align: center;
font-style: italic;
}
svg text {
font-size: 14px;
fill: black;
text-align: center;
}
.graph-item {
width: 150px;
height: 170px;
border: 1px solid black;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: lightblue;
}
.graph-item img {
width: 120px;
height: 120px;
margin-bottom: 5px;
object-fit: contain; /* Ensures that alt-text shows if the image is missing */
display: block;
}
/* Grid settings for different screen sizes */
@media (min-width: 1201px) {
.graph-container {
grid-template-columns: repeat(6, 1fr); /* 2 rows of 6 */
}
}
@media (max-width: 1200px) and (min-width: 901px) {
.graph-container {
grid-template-columns: repeat(4, 1fr); /* 3 rows of 4 */
}
}
@media (max-width: 900px) and (min-width: 601px) {
.graph-container {
grid-template-columns: repeat(3, 1fr); /* 4 rows of 3 */
}
}
@media (max-width: 600px) and (min-width: 401px) {
.graph-container {
grid-template-columns: repeat(2, 1fr); /* 6 rows of 2 */
}
}
@media (max-width: 400px) {
.graph-container {
grid-template-columns: repeat(1, 1fr); /* 12 rows of 1 */
}
}
#selector1 {
font-family: "Times New Roman", serif;
font-size: 10pt;
}
#selector2 {
font-family: "Times New Roman", serif;
font-size: 10pt;
}
.selector {
width: 160px; /* Adjust the width as needed */
box-sizing: border-box;
}
. selector-item.selected {
border: 1px solid black;
}
</style>
<script src="ToolbarWidth.js"></script>
<script>
// This script provides translations into all supported languages of the
// text needed for this page, so we can change languages without the Engine.
// The selected language then can be passed by GET to subsequent pages.
const languageData = {
english: {
select: "Select a Graph Type",
ordinaryGraph: "Ordinary Graph",
compareSame: "Same Axes",
compareDifferent: "Different Axes",
graphInequality: "Graph Inequality",
graphParametric: "Parametric Curve",
graphPolar: "Polar Graph",
graphComplexRoots: "Complex Roots",
graphRelation: "Relation Equation",
graphRelationInequality: "Relation Inequality",
graphDeriv: "Graph f and f'",
graphDerivs: "Graph f, f', and f''",
graphODE: "Graph ODE",
graphTwoODEs: "Two ODEs",
graphHDE: "Higher-order ODE",
graphRiemannSums: "Riemann Sums",
graphTrapezoidRule: "Trapezoid Rule",
graphSimpsonsRule: "Simpson's Rule"
},
german: {
select: "Wählen Sie einen Graphen",
ordinaryGraph: "Normaler Graph",
compareSame: "Gleiche Achsen",
compareDifferent: "Unterschiedliche Achsen",
graphInequality: "Ungleichung zeichnen",
graphParametric: "Parametrische Kurve",
graphPolar: "Polarkoordinate",
graphComplexRoots: "Komplexe Wurzeln",
graphRelation: "Relation Gleichung",
graphRelationInequality: "Relation Ungleichung",
graphDeriv: "Graph von f und f'",
graphDerivs: "Graph von f, f', und f''",
graphODE: "Graph DGL",
graphTwoODEs: "Zwei DGLs",
graphHDE: "Höherordentliche DGL",
graphRiemannSums: "Riemann-Summen",
graphTrapezoidRule: "Trapezregel",
graphSimpsonsRule: "Simpsonregel"
},
french: {
select: "Choisir un Graphique",
ordinaryGraph: "Graphique Ordinaire",
compareSame: "Axes Identiques",
compareDifferent: "Axes Différents",
graphInequality: "Tracer une Inégalité",
graphParametric: "Courbe Paramétrique",
graphPolar: "Graphique Polaire",
graphComplexRoots: "Racines Complexes",
graphRelation: "Équation Relationnelle",
graphRelationInequality: "Inégalité Relationnelle",
graphDeriv: "Tracer f et f'",
graphDerivs: "Tracer f, f', et f''",
graphODE: "Graphique EDO",
graphTwoODEs: "Deux EDO",
graphHDE: "EDO d'Ordre Supérieur",
graphRiemannSums: "Sommes de Riemann",
graphTrapezoidRule: "Règle du Trapèze",
graphSimpsonsRule: "Règle de Simpson"
},
spanish: {
select: "Seleccionar un Gráfico",
ordinaryGraph: "Gráfico Ordinario",
compareSame: "Mismos Ejes",
compareDifferent: "Ejes Diferentes",
graphInequality: "Graficar Desigualdad",
graphParametric: "Curva Paramétrica",
graphPolar: "Gráfico Polar",
graphComplexRoots: "Raíces Complejas",
graphRelation: "Ecuación Relacional",
graphRelationInequality: "Desigualdad Relacional",
graphDeriv: "Graficar f y f'",
graphDerivs: "Graficar f, f' y f''",
graphODE: "Gráfico de EDO",
graphTwoODEs: "Dos EDOs",
graphHDE: "EDO de Orden Superior",
graphRiemannSums: "Sumas de Riemann",
graphTrapezoidRule: "Regla del Trapecio",
graphSimpsonsRule: "Regla de Simpson"
},
italian: {
select: "Seleziona un Grafico",
ordinaryGraph: "Grafico Ordinario",
compareSame: "Stessi Assi",
compareDifferent: "Assi Diversi",
graphInequality: "Grafico Disuguaglianza",
graphParametric: "Curva Parametrica",
graphPolar: "Grafico Polare",
graphComplexRoots: "Radici Complesse",
graphRelation: "Equazione Relazionale",
graphRelationInequality: "Relazionale", // "Disuguaglianza Relazionale" is too long
graphDeriv: "Grafico di f e f'",
graphDerivs: "Grafico di f, f' e f''",
graphODE: "Grafico EDO",
graphTwoODEs: "Grafico due EDOs",
graphHDE: "EDO di Ordine Superiore",
graphRiemannSums: "Somme di Riemann",
graphTrapezoidRule: "Regola del Trapezio",
graphSimpsonsRule: "Regola di Simpson"
},
dutch: {
select: "Selecteer een Grafiek",
ordinaryGraph: "Gewone Grafiek",
compareSame: "Zelfde Assen",
compareDifferent: "Verschillende Assen",
graphInequality: "Grafiek Ongelijkheid",
graphParametric: "Parametrische Kromme",
graphPolar: "Poolgrafiek",
graphComplexRoots: "Complexe Wortels",
graphRelation: "Relatie Vergelijking",
graphRelationInequality: "Relatie Ongelijkheid",
graphDeriv: "Grafiek van f en f'",
graphDerivs: "Grafiek van f, f' en f''",
graphODE: "Grafiek ODE",
graphTwoODEs: "Grafiek twee ODE's",
graphHDE: "Hogere Orde ODE",
graphRiemannSums: "Riemann-Sommen",
graphTrapezoidRule: "Trapeziumregel",
graphSimpsonsRule: "Simpsonregel"
},
chinese: {
select: "选择一个图形",
ordinaryGraph: "普通图形",
compareSame: "相同轴",
compareDifferent: "不同轴",
graphInequality: "绘制不等式",
graphParametric: "参数曲线",
graphPolar: "极坐标图",
graphComplexRoots: "复数根",
graphRelation: "关系方程",
graphRelationInequality: "关系不等式",
graphDeriv: "绘制 f 和 f'",
graphDerivs: "绘制 f, f' 和 f''",
graphODE: "常微分方程图",
graphTwoODEs: "两个常微分方程图",
graphHDE: "高阶常微分方程",
graphRiemannSums: "黎曼和",
graphTrapezoidRule: "梯形规则",
graphSimpsonsRule: "辛普森规则"
}
};
function setLanguage(lang) {
console.log("Entering setLanguage with " , lang);
const selectElement = document.getElementById('select');
const ordinaryGraphElement = document.getElementById('ordinaryGraph').querySelector("text");
const compareSameElement = document.getElementById('compareSame').querySelector("text");
const compareDifferentElement = document.getElementById('compareDifferent').querySelector("text");
const graphInequalityElement = document.getElementById('graphInequality').querySelector("text");
const graphParametricElement = document.getElementById('graphParametric').querySelector("text");
const graphPolarElement = document.getElementById('graphPolar').querySelector("text");
const graphComplexRootsElement = document.getElementById('graphComplexRoots').querySelector("text");
const graphRelationElement = document.getElementById('graphRelation').querySelector("text");
const graphRelationInequalityElement = document.getElementById('graphRelationInequality').querySelector("text");
const graphDerivElement = document.getElementById('graphDeriv');
const graphDerivsElement = document.getElementById('graphDerivs');
const graphODEElement = document.getElementById('graphODE');
const graphTwoODEsElement = document.getElementById('graphTwoODEs');
const graphHDEElement = document.getElementById('graphHDE');
const graphRiemannSumsElement = document.getElementById('graphRiemannSums');
const graphTrapezoidRuleElement = document.getElementById('graphTrapezoidRule');
const graphSimpsonsRuleElement = document.getElementById('graphSimpsonsRule');
selectElement.textContent = languageData[lang].select;
ordinaryGraphElement.textContent = languageData[lang].ordinaryGraph;
compareSameElement.textContent = languageData[lang].compareSame;
compareDifferentElement.textContent = languageData[lang].compareDifferent;
graphInequalityElement.textContent = languageData[lang].graphInequality;
graphParametricElement.textContent = languageData[lang].graphParametric;
graphPolarElement.textContent = languageData[lang].graphPolar;
graphComplexRootsElement.textContent = languageData[lang].graphComplexRoots;
graphRelationElement.textContent = languageData[lang].graphRelation;
graphRelationInequalityElement.textContent = languageData[lang].graphRelationInequality;
graphDerivsElement.textContent = languageData[lang].graphDerivs;
graphDerivElement.textContent = languageData[lang].graphDeriv;
graphODEElement.textContent = languageData[lang].graphODE;
graphTwoODEsElement.textContent = languageData[lang].graphTwoODEs;
graphHDEElement.textContent = languageData[lang].graphHDE;
graphRiemannSumsElement.textContent = languageData[lang].graphRiemannSums;
graphTrapezoidRuleElement.textContent = languageData[lang].graphTrapezoidRule;
graphSimpsonsRuleElement.textContent = languageData[lang].graphSimpsonsRule;
// Save the selected language in local storage for next time
localStorage.setItem('selectedLanguage', lang);
// pass the language as a GET parameter to all the linked pages
// Get all the anchor elements on the page
var links = document.querySelectorAll('a');
// Loop through each link
links.forEach(function(link) {
// Get the current href of the link
var href = link.getAttribute('href');
// Check if the href already has a query string
if (href.includes('?')) {
// If yes, just append the language parameter
href += '&language=' + lang;
}
else {
// If no, add the language parameter as the first query string
href += '?language=' + lang;
}
href += '&windowWidth=' + windowWidth;
href += '&windowHeight=' + windowHeight;
href += '&toolbarWidth=' + toolbarWidth;
// Set the modified href back to the link
link.setAttribute('href', href);
console.log("adding GET parameters to href");
});
}
</script>
</head>
<body>
<?php
$language = $_GET['language'];
?>
<h1 id="select" >Select a Graph Type</h1>
<div style="display:none;">
<?php include 'ButtonDefinitions.svg'; ?>
</div>
<div class="graph-container">
<a href="EnterOrdinaryGraph.php" id="OrdinaryGraphLink" class="graph-item">
<img src="images/OrdinaryGraph.png" alt="Ordinary Graph">
<svg id="ordinaryGraph" width="150" height="20">
<text x="75" y="15" text-anchor="middle" >Ordinary Graph</text>
</svg>
</a>
<a href="EnterCompareSame.php" id="CompareSameLink" class="graph-item">
<img src="images/CompareSame.png" alt="Compare Same">
<svg id="compareSame" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Same Axes</text>
</svg>
</a>
<a href="EnterCompareDifferent.php" id="CompareDifferentLink" class="graph-item">
<img src="images/CompareDifferent.png" alt="Different Axes">
<svg id="compareDifferent" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Different Axes</text>
</svg>
</a>
<a href="EnterGraphInequality.php" id="GraphInequalityLink" class="graph-item">
<img src="images/GraphInequality.png" alt="Inequality">
<svg id="graphInequality" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Inequality</text>
</svg>
</a>
<a href="EnterGraphParametric.php" id="GraphParametricLink" class="graph-item">
<img src="images/GraphParametric.png" alt="Parametric Curve">
<svg id="graphParametric" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Parametric Curve</text>
</svg>
</a>
<a href="EnterGraphPolar.php" id="GraphPolarLink" class="graph-item">
<img src="images/GraphPolar.png" alt="Polar Graph">
<svg id="graphPolar" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Polar Graph</text>
</svg>
</a>
<a href="EnterGraphComplexRoots.php" id="ComplexRootsLink" class="graph-item">
<img src="images/ComplexRoots.png" alt="Graph Complex Roots">
<svg id="graphComplexRoots" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Complex Roots</text>
</svg>
</a>
<a href="EnterGraphRelation.php" id="GraphRelationLink" class="graph-item">
<img src="images/GraphRelation.png" alt="Graph Relation">
<svg id="graphRelation" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Relation Equation</text>
</svg>
</a>
<a href="EnterGraphRelationInequality.php" id="GraphRelationInequalityLink" class="graph-item">
<img src="images/GraphRelationInequality.png" alt="Graph Relation Inequality">
<svg id="graphRelationInequality" width="150" height="20">
<text x="75" y="15" text-anchor="middle">Relation Inequality</text>
</svg>
</a>
<a href="EnterGraphDeriv.php" class="graph-item" id="dynamicLink3" >
<img src="images/GraphDerivs.png" alt="Graph Derivs">
<div style="margin-top: 3px;"></div>
<select id="selector3" class="selector" onchange="setURL3(this.value)">
<option value = "EnterGraphDeriv.php" class="selector-item" id="graphDeriv">
Graph f and f'
</option>
<option value = "EnterGraphDerivs.php" class="selector-item" id="graphDerivs">
Graph f, f', and f''
</option>
</select>
</a>
<a href="EnterODE.php" class="graph-item" id="dynamicLink">
<img src="images/GraphODE.png" alt="Graph ODE">
<div style="margin-top: 3px;"></div>
<select id="selector1" class="selector" onchange="setURL(this.value)">
<option value = "EnterODE.php" class="selector-item" id="graphODE">
Graph ODE
</option>
<option value = "EnterTwoODEs.php" class="selector-item" id="graphTwoODEs">
Graph Two ODEs
</option>
<option value = "EnterHDE.php" class="selector-item" id="graphHDE">
Higher-order ODE
</option>
</select>
</a>
<a href="EnterRiemannSums.php" class="graph-item" id="dynamicLink2">
<img src="images/RiemannSums.png" alt="Riemann Sums">
<select id="selector2" class="selector" onchange="setURL2(this.value)">
<option value="EnterRiemannSums.php" class="selector-item" id="graphRiemannSums">
Riemann Sums
</option>
<option value="EnterTrapezoidRule.php" class="selector-item" id="graphTrapezoidRule">
Trapezoid Rule
</option>
<option value="EnterSimpsonsRule.php" class="selector-item" id="graphSimpsonsRule">
Simpson's Rule
</option>
</select>
</a>
</div>
<script>
function setURL(selectedValue) {
console.log("in setURL");
setLinks();
var link = document.getElementById("dynamicLink");
link.href = selectedValue + '?language=' + <?php echo("\"$language\"");?> + '&windowWidth=' + windowWidth + '&windowHeight=' + windowHeight + '&toolbarWidth=' + toolbarWidth;
console.log(link);
}
function setURL2(selectedValue) {
var link = document.getElementById("dynamicLink2");
console.log("in setURL2");
setLinks();
link.href = selectedValue + '?language=' + <?php echo("\"$language\"");?> + '&windowWidth=' + windowWidth + '&windowHeight=' + windowHeight + '&toolbarWidth=' + toolbarWidth;
console.log(link);
}
function setURL3(selectedValue) {
setLinks();
var link = document.getElementById("dynamicLink3");
console.log(link);
link.href = selectedValue + '?language=' + <?php echo("\"$language\"");?> + '&windowWidth=' + windowWidth + '&windowHeight=' + windowHeight + '&toolbarWidth=' + toolbarWidth;
console.log(link);
}
</script>
<script src="ToolbarWidth.js"></script>
<script>
// measure the toolbarWidth, since it will be passed by GET until we get to GraphDocProc
let toolbarWidth = getToolbarWidth();
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight; // technically this is the "viewport height"
console.log("windowWidth=",windowWidth);
document.addEventListener("DOMContentLoaded", function() {
<?php if(isset($language))
echo ("const savedLanguage = \"$language\";");
else
echo ("const savedLanguage = localStorage.getItem(\'selectedLanguage\');");
?>
console.log("language = ", savedLanguage);
console.log("got here!");
if (savedLanguage) {
// Update the page content based on the saved language
setLanguage(savedLanguage);
}
setLinks();
});
function setLinks() {
const svgItems = document.querySelectorAll('.selector-item');
svgItems.forEach(item => {
item.addEventListener('click', function () {
// Remove 'selected' class from all items
svgItems.forEach(i => i.classList.remove('selected'));
// Add 'selected' class to the clicked item
this.classList.add('selected');
console.log(this.id + ' selected');
});
});
}
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists