Sindbad~EG File Manager
<?php
// Start or resume the session
session_set_cookie_params([
'lifetime' => 0, // Session expires when browser closes
'path' => '/',
'domain' => 'mathxpert.org', // Remove leading dot
'secure' => true, // Requires HTTPS
'httponly' => true, // Prevents JavaScript access
'samesite' => 'None' // Enables cross-origin session cookies
]);
session_start();
// Set HTTP header to prevent caching
header('Content-Type: text/html; charset=UTF-8');
header("Cache-Control: no-cache, must-revalidate");
require('userlog.php'); // Include user logging functions
if (!isset($_SESSION['user_started'])) {
// New session detected, log it
logNewSession();
}
$sessionId = session_id(); // guaranteed not to contain a pipe character
ini_set('display_errors', 1);
error_reporting(E_ALL);
// Define allowed keys
$allowed_keys = ['username', 'recordEmail', 'showPercent'];
// These are meant to support future interfaces.
// Web MathXpert is completely anonymous, so any record-keeping
// as to who solved what problem when is only possible if these
// variables are passed by GET to Web MathXpert; then
// WebMathXpert will send an email to recordEmail that username
// successfully solved s problem, with details about that success.
// Check GET parameters
foreach ($_GET as $key => $value) {
if (in_array($key, $allowed_keys)) {
// Validate and sanitize based on the key
if ($key === 'username') {
// Allow only alphanumeric usernames
if (ctype_alnum($value)) {
$_SESSION['username'] = $value;
}
}
elseif ($key === 'recordEmail') {
// Validate email format
if (filter_var($value, FILTER_VALIDATE_EMAIL)) {
$_SESSION['recordEmail'] = $value;
}
}
elseif ($key === 'showPercent')
{ // Allow only alphanumeric values, such as "yes", "no", "piechart"
if (ctype_alnum($value)) {
$_SESSION['showPercent'] = $value;
}
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/WebMathXpert/images/favicon.ico">
<title>Web MathXpert Splash Page</title>
<style>
body, html {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.background {
position: absolute;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#bg1, #bg2 {
position: absolute;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
overflow-x: hidden;
}
#bg1 {
background-image: url('./images/CalcAbig.png');
z-index: 1;
}
#bg2 {
background-image: url('./images/CalcBbig.png');
z-index: 2;
opacity: 0;
animation: fadeIn 5s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.container {
position: absolute;
z-index: 3;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
.splash {
position: absolute;
font-family: 'Arial', Times, sans-serif;
font-style: italic;
z-index: 4;
fill: black;
}
#interactiveOverlay {
position: absolute; /* Ensure proper positioning */
top: 0;
left: 0;
}
.clickable-rect {
stroke: red;
stroke-width: 0px; /* for checking the placement */
fill: transparent;
cursor: pointer;
}
.hidden-text {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.show-text {
opacity: 1;
fill: black;
}
#languageSelector {
position: absolute;
z-index: 5;
top: 0%;
left: 0%;
font-size: 14px !important;
padding: 5px;
background-color: white;
border: 1px solid black;
transform-origin: top left;
-webkit-appearance: none; /* Normalize for older Safari/Chrome */
}
#creditsPopup {
position: fixed; /* Or absolute, if it fits better in your structure */
display:none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: lightyellow; /* Or another color to ensure visibility */
border: 1px solid black;
padding: 20px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
z-index: 1000; /* Set a high z-index value to ensure it appears on top */
}
</style>
<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: {
mathematical: "Mathematical",
assistant: "Assistant",
make: "Make a",
graph: "Graph",
enter: "Enter a",
problem: "Problem",
problem2: "Problem",
library: "Library",
credit: "Designed and implemented by Dr. Michael Beeson",
credits: "Credits",
art: "Splash screen art",
translations: "Translations"
},
german: {
mathematical: "Mathematisch",
assistant: "Assistent",
make: "Ein Graph",
graph: "erstellen",
enter: "Ein Problem ",
problem: "eingeben",
problem2: "Problem",
library: "Bibliothek",
credit: "Entworfen und implementiert von Dr. Michael Beeson",
credits: "Mitwirkende",
art: "Splashscreen-Kunst",
translations: "Übersetzungen"
},
french: {
mathematical: "Mathématique",
assistant: "Assistant",
make: "Créer un",
graph: "Graphique",
enter: "Saisir un",
problem: "Problème",
problem2: "Problème",
library: "Bibliothèque",
credit: "Conçu et mis en œuvre par Dr. Michael Beeson",
credits: "Crédits",
art: "Art de l'écran d'accueil",
translations: "Traductions"
},
spanish: {
mathematical: "Matemático",
assistant: "Asistente",
make: "Crear un",
graph: "Gráfico",
enter: "Ingresar un",
problem: "Problema",
problem2: "Problema",
library: "Biblioteca",
credit: "Diseñado e implementado por Dr. Michael Beeson",
credits: "Créditos",
art: "Arte de la pantalla de bienvenida",
translations: "Traducciones"
},
italian: {
mathematical: "Matematico",
assistant: "Assistente",
make: "Crea un",
graph: "Grafico",
enter: "Inserisci un",
problem: "Problema",
problem2: "Problema",
library: "Libreria",
credit: "Progettato e implementato da Dr. Michael Beeson",
credits: "Crediti",
art: "Arte della schermata iniziale",
translations: "Traduzioni"
},
dutch: {
mathematical: "Wiskundig",
assistant: "Assistent",
make: "Maak een",
graph: "Grafiek",
enter: "Voer een",
problem: "Probleem",
problem2: "Probleem",
library: "Bibliotheek",
credit: "Ontworpen en geïmplementeerd door Dr. Michael Beeson",
credits: "Verantwoording",
art: "Opstartscherm kunst",
translations: "Vertalingen"
},
chinese: {
mathematical: "数学",
assistant: "助手",
make: "创建",
graph: "图表",
enter: "输入",
problem: "问题",
problem2: "问题",
library: "图书馆",
credit: "由Michael Beeson博士设计和实施",
credits: "致谢",
art: "启动屏艺术",
translations: "翻译"
}
};
function setLanguage(lang) {
const makeElement = document.getElementById('make');
console.log("makeElement", makeElement);
const graphElement = document.getElementById('graph');
const enterElement = document.getElementById('enter');
const problemElement = document.getElementById('problem');
const problem2Element = document.getElementById('problem2');
const libraryElement = document.getElementById('library');
const mathematicalElement = document.getElementById('mathematical');
const assistantElement = document.getElementById('assistant');
const creditElement = document.getElementById('credit');
const creditsElement = document.getElementById('credits');
const artElement = document.getElementById('art');
const translationsElement = document.getElementById('translations');
makeElement.textContent = languageData[lang].make;
graphElement.textContent = languageData[lang].graph;
enterElement.textContent = languageData[lang].enter;
problemElement.textContent = languageData[lang].problem;
problem2Element.textContent = languageData[lang].problem2;
libraryElement.textContent = languageData[lang].library;
mathematicalElement.textContent = languageData[lang].mathematical;
assistantElement.textContent = languageData[lang].assistant;
creditElement.textContent = languageData[lang].credit;
creditsElement.textContent = languageData[lang].credits;
artElement.innerHTML = "<em>"+languageData[lang].art+":</em>";
translationsElement.innerHTML = "<em>"+languageData[lang].translations+":</em>";
// Save the selected language in local storage for next time
localStorage.setItem('selectedLanguage', lang);
console.log("storing ", lang);
var newUrl = "GetProblemAsync.php?language=" + encodeURIComponent(lang);
// Update the relevant link with the new URL
// In SVG the href of a link is an "animated string" so it has two values:
document.getElementById("getprobLink").href.animVal = newUrl;
document.getElementById("getprobLink").href.baseVal = newUrl;
// Now do the same for the other two links.
var newUrl2 = "MakeGraph.php?language=" + encodeURIComponent(lang);
document.getElementById("MakeGraphLink").href.animVal = newUrl2;
document.getElementById("MakeGraphLink").href.baseVal = newUrl2;
var newUrl3 = "EnterProblem.php?language=" + encodeURIComponent(lang);
document.getElementById("EnterProblemLink").href.animVal = newUrl3;
document.getElementById("EnterProblemLink").href.baseVal = newUrl3;
// Adjust alignment language-by-language
if (lang === 'dutch' )
{
mathematicalElement.setAttribute('x', '10');
assistantElement.setAttribute('x', '12');
creditElement.setAttribute('x','5');
}
else if (lang === 'chinese')
{
mathematicalElement.setAttribute('x', '24');
assistantElement.setAttribute('x', '24');
creditElement.setAttribute('x','14');
}
else if (lang === 'spanish')
{
mathematicalElement.setAttribute('x', '8');
assistantElement.setAttribute('x', '13');
}
else if (lang === 'italian')
{
mathematicalElement.setAttribute('x', '9');
assistantElement.setAttribute('x', '12');
creditElement.setAttribute('x','8');
}
else
{
mathematicalElement.setAttribute('x', '8'); // Default 'x' position
assistantElement.setAttribute('x', '15'); // Default 'x' position
}
}
// The selected language may have been stored in local storeage
const savedLanguage = localStorage.getItem('selectedLanguage');
// but we have to wait until the DOM is loaded to call setLanguage
// as makeElement etc. will come out null if you run setLanguage now.
</script>
</head>
<style>
/* General styles for the select box */
#languageSelector {
font-size: 16px;
padding: 5px;
border-radius: 5px;
background-color: white;
border: 1px solid #ccc;
background-repeat: no-repeat;
background-position: left center;
}
</style>
<body>
<div class="background" id="bg1"></div>
<div class="background" id="bg2"></div>
<div class="container" id="svgContainer">
<select id="languageSelector" onchange="setLanguage(this.value)">
<option value="english">🇬🇧 English</option>
<option value="german">🇩🇪 Deutsch</option>
<option value="french">🇫🇷 Français</option>
<option value="spanish">🇪🇸 Español</option>
<option value="italian">🇮🇹 Italiano</option>
<option value="dutch">🇳🇱 Nederlands</option>
<option value="chinese">🇨🇳 中文</option>
</select>
<svg class="splash" id="subtitle" viewBox="0 0 100 100"> preserveAspectRatio="xMidYMid meet" style="width: 100%;height: 100%;">
<text x="8" y="30" id = "mathematical" style="fill: black; font-size: 6pt; text-anchor: start; dominant-baseline: middle;">
Mathematical
</text>
<text x="15" y="40" id = "assistant" style="fill: black; font-size: 6pt; text-anchor: start; dominant-baseline: middle;">
Assistant
</text>
<text x="10" y = "62" id="credit" style="fill: black; font-size: 1.5pt; text-anchor: start; dominant-baseline: middle;">
Designed and implemented by Dr. Michael Beeson
</text>
<text id="copyright" x = "15" y="65" style="fill: black; font-size: 1.5pt; text-anchor: start; dominant-baseline: middle;">
© HelpWithMath 2024
</text>
<text id="credits" x = "40" y="65" style="fill: black; font-size: 1.5pt; text-anchor: start; dominant-baseline: middle;">
Credits
</text>
<svg id="interactiveOverlay" style="width: 100%; height: 100%; top: 0; left: 0;">
<a id = "MakeGraphLink" href="MakeGraph.php">
<rect id="rect1" class="clickable-rect" target="_blank" x="61.5" y="4.2" width="36.5" height="18"/>
<text x="80" y="10" id="make" class="hidden-text" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="6">
Make a
</text>
<text x="80" y="16" id="graph" class="hidden-text" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="6">
Graph
</text>
</a>
<a id = "EnterProblemLink" href="EnterProblem.php">
<rect id="rect2" class="clickable-rect" target="_blank" x="61.5" y="25" width="36.5" height="18"/>
<text x="80" y="31" id="enter" class="hidden-text" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="6">
Enter a
</text>
<text x="80" y="37" id="problem" class="hidden-text" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="6">
Problem
</text>
</a>
<a id = "getprobLink" href="GetProblemAsync.php">
<rect id="rect3" class="clickable-rect" target="_blank" x="61.5" y="46" width="36" height="18"/>
<text x="80" y="50" class="hidden-text" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="6">
MathXpert
</text>
<text x="80" y="55" id="problem2" class="hidden-text" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="6">
Problem
</text>
<text x="80" y="60" id="library" class="hidden-text" text-anchor="middle" dominant-baseline="middle" font-family="Arial" font-size="6">
Library
</text>
</a>
</svg>
</svg>
<!-- Popup Modal -->
<div id="creditsPopup">
<div style="text-align: right;">
<button id="closePopup" style="background: none; border: none; font-size: 16px; cursor: pointer;">×</button>
</div>
<p id="art"> <em>Splash screen art</em></p>
<p> Cindi Shih</p>
<p id="translations"> <em> Translations </em>:</p>
<p>🇫🇷 François Guénard</p>
<p>🇩🇪 Michael Kohlhase</p>
<p>🇮🇹 Laura Maffei</p>
<p>🇪🇸 Liliana Saidon</p>
<p>🇳🇱 Michael Beeson, ChatGPT</p>
<p>🇨🇳 ChatGPT</p>
</div>
</div>
<script>
let originalWidth;
window.onload = function() {
const svgContainer = document.getElementById('svgContainer');
originalWidth = svgContainer.clientWidth;
};
window.addEventListener('resize', function() {
const container = document.getElementById('svgContainer');
const bg1 = document.getElementById('bg1');
const bg2 = document.getElementById('bg2');
const imageAspectRatio = 630/428;
const windowAspectRatio = window.innerWidth / window.innerHeight;
let width, height;
if (windowAspectRatio > imageAspectRatio) {
height = window.innerHeight;
width = height * imageAspectRatio;
} else {
width = window.innerWidth;
height = width / imageAspectRatio;
}
bg1.style.width = `${width}px`;
bg1.style.height = `${height}px`;
bg1.style.left = `${(window.innerWidth - width) / 2}px`;
bg1.style.top = `${(window.innerHeight - height) / 2}px`;
bg2.style.width = `${width}px`;
bg2.style.height = `${height}px`;
bg2.style.left = `${(window.innerWidth - width) / 2}px`;
bg2.style.top = `${(window.innerHeight - height) / 2}px`;
container.style.width = `${width}px`;
container.style.height = `${height}px`;
container.style.left = `${bg1.offsetLeft}px`;
container.style.top = `${bg1.offsetTop}px`;
// Position the interactiveOverlay to match bg1 and bg2
interactiveOverlay.style.width = `${width}px`;
interactiveOverlay.style.height = `${height}px`;
interactiveOverlay.style.left = `${bg1.style.left}`;
interactiveOverlay.style.top = `${bg1.style.top}`;
const rect1 = document.getElementById('rect1');
const rect2 = document.getElementById('rect2');
const rect3 = document.getElementById('rect3');
const languageSelector = document.getElementById('languageSelector');
const scaleFactor = container.clientWidth / originalWidth;
languageSelector.style.transform = `scale(${scaleFactor})`;
});
document.addEventListener("DOMContentLoaded", function() {
const container = document.getElementById('svgContainer');
const bg1 = document.getElementById('bg1');
const bg2 = document.getElementById('bg2');
const imageAspectRatio = 630/428; // This is the correct asspect ratio
const windowAspectRatio = window.innerWidth / window.innerHeight;
// The selected language may have been stored in local storeage
const savedLanguage = localStorage.getItem('selectedLanguage');
if (savedLanguage)
{ console.log("retrieved ", savedLanguage);
// Update the page content based on the saved language
setLanguage(savedLanguage);
// set the language selector to the saved language
document.getElementById('languageSelector').value = savedLanguage;
}
else
{
setLanguage("english");
}
let width, height;
if (windowAspectRatio > imageAspectRatio)
{
// Window is wider than the image's aspect ratio
height = window.innerHeight;
width = height * imageAspectRatio;
}
else
{
// Window is taller than the image's aspect ratio
width = window.innerWidth;
height = width / imageAspectRatio;
}
bg1.style.width = `${width}px`;
bg1.style.height = `${height}px`;
bg1.style.left = `${(window.innerWidth - width) / 2}px`;
bg1.style.top = `${(window.innerHeight - height) / 2}px`;
bg2.style.width = `${width}px`;
bg2.style.height = `${height}px`;
bg2.style.left = `${(window.innerWidth - width) / 2}px`;
bg2.style.top = `${(window.innerHeight - height) / 2}px`;
// Set svgContainer dimensions and position to match bg1 and bg2
container.style.width = `${width}px`;
container.style.height = `${height}px`;
container.style.left = `${bg1.offsetLeft}px`;
container.style.top = `${bg1.offsetTop}px`;
setTimeout(function() {
const hiddenTextElements = document.querySelectorAll('.hidden-text');
hiddenTextElements.forEach(function(element) {
element.classList.add('show-text');
});
}, 3000); // the animation is 5000 ms so this makes the text visible after 3 sec
// Add click event listener to the SVG text element with id "credits"
document.getElementById('credits').addEventListener('click', function () {
// Show the popup
console.log("received click in credits");
document.getElementById('creditsPopup').style.display = 'block';
});
// Add click event listener to close the popup
document.getElementById('closePopup').addEventListener('click', function () {
// Hide the popup
document.getElementById('creditsPopup').style.display = 'none';
console.log("popup display set to none");
});
});
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists