<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Euler's Theorem – Auto Solver</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #0f172a;
color: #e5e7eb;
margin: 0;
padding: 16px;
}
.card {
max-width: 800px;
margin: 0 auto;
background: #020617;
border-radius: 16px;
padding: 20px 18px 26px;
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
border: 1px solid #1f2937;
}
h1 {
margin-top: 0;
font-size: 20px;
color: #f97316;
text-align: center;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 12px;
align-items: center;
justify-content: space-between;
}
.field {
display: flex;
flex-direction: column;
flex: 1;
min-width: 90px;
}
label {
font-size: 12px;
color: #9ca3af;
margin-bottom: 3px;
}
input[type="number"] {
padding: 6px 8px;
border-radius: 8px;
border: 1px solid #4b5563;
background: #020617;
color: #e5e7eb;
font-size: 13px;
outline: none;
}
input[type="number"]:focus {
border-color: #f97316;
box-shadow: 0 0 0 1px rgba(249,115,22,0.5);
}
.formula {
text-align: center;
font-size: 13px;
margin-bottom: 12px;
color: #e5e7eb;
}
.badge {
display: inline-block;
background: #f97316;
color: #111827;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.section-title {
font-size: 13px;
font-weight: 600;
color: #fbbf24;
margin: 14px 0 5px;
}
.box {
background: #020617;
border-radius: 10px;
border: 1px solid #111827;
padding: 8px 10px;
font-size: 12px;
line-height: 1.5;
}
.result-big {
font-size: 26px;
font-weight: 700;
text-align: center;
margin-top: 10px;
color: #4ade80;
}
.warning {
color: #f97316;
font-size: 12px;
margin-top: 4px;
text-align: center;
}
.hint {
font-size: 11px;
color: #9ca3af;
text-align: center;
margin-top: 4px;
}
.inline-code {
font-family: "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
background: #020617;
padding: 2px 5px;
border-radius: 4px;
font-size: 11px;
}
</style>
</head>
<body>
<div class="card">
<h1>Euler's Theorem – Auto Solver</h1>
<div class="formula">
<span class="badge">Theory</span><br>
If gcd(a, n) = 1 →
<span class="inline-code">a<sup>φ(n)</sup> ≡ 1 (mod n)</span><br>
For a<sup>k</sup> (mod n): reduce k using <span class="inline-code">k mod φ(n)</span>
</div>
<div class="row">
<div class="field">
<label>Base (a)</label>
<input type="number" id="baseInput" value="5">
</div>
<div class="field">
<label>Exponent (k)</label>
<input type="number" id="expInput" value="392">
</div>
<div class="field">
<label>Modulus (n)</label>
<input type="number" id="modInput" value="13">
</div>
</div>
<div class="hint">
Example: a = 5, k = 392, n = 13 → your class test question.
</div>
<div id="gcdWarning" class="warning"></div>
<div class="section-title">Step 1 – φ(n) and gcd(a, n)</div>
<div id="phiBox" class="box"></div>
<div class="section-title">Step 2 – Reduce exponent using φ(n)</div>
<div id="reduceBox" class="box"></div>
<div class="section-title">Step 3 – Final result</div>
<div id="resultBox" class="box"></div>
<div id="resultBig" class="result-big"></div>
</div>
<script>
function gcd(a, b) {
a = Math.abs(a);
b = Math.abs(b);
while (b !== 0) {
const t = b;
b = a % b;
a = t;
}
return a;
}
function phi(n) {
if (n <= 0) return 0;
let result = n;
let temp = n;
for (let p = 2; p * p <= temp; p++) {
if (temp % p === 0) {
while (temp % p === 0) temp = Math.floor(temp / p);
result -= Math.floor(result / p);
}
}
if (temp > 1) {
result -= Math.floor(result / temp);
}
return result;
}
function modPow(base, exp, mod) {
if (mod === 1) return 0;
let result = 1;
let a = ((base % mod) + mod) % mod;
let e = Math.floor(exp);
while (e > 0) {
if (e % 2 === 1) {
result = (result * a) % mod;
}
a = (a * a) % mod;
e = Math.floor(e / 2);
}
return result;
}
function update() {
const a = parseInt(document.getElementById('baseInput').value, 10);
const k = parseInt(document.getElementById('expInput').value, 10);
const n = parseInt(document.getElementById('modInput').value, 10);
const phiBox = document.getElementById('phiBox');
const reduceBox = document.getElementById('reduceBox');
const resultBox = document.getElementById('resultBox');
const resultBig = document.getElementById('resultBig');
const gcdWarning = document.getElementById('gcdWarning');
if (isNaN(a) || isNaN(k) || isNaN(n) || n === 0) {
phiBox.innerHTML = "Please enter valid numbers for a, k, and n (n ≠ 0).";
reduceBox.innerHTML = "";
resultBox.innerHTML = "";
resultBig.textContent = "";
gcdWarning.textContent = "";
return;
}
const g = gcd(a, n);
const phiN = phi(n);
let phiHtml = "";
phiHtml += "gcd(a, n) = gcd(" + a + ", " + n + ") = " + g + "<br>";
phiHtml += "φ(" + n + ") = " + phiN;
phiBox.innerHTML = phiHtml;
if (g !== 1) {
gcdWarning.textContent = "gcd(a, n) ≠ 1 → Euler’s theorem does not directly apply. Still calculating a" +
" with exponent k (mod n) using fast power.";
} else {
gcdWarning.textContent = "";
}
const r = (phiN > 0) ? (k % phiN) : 0;
let reduceHtml = "";
if (phiN > 0) {
reduceHtml += "k mod φ(n) = " + k + " mod " + phiN + " = " + r + "<br><br>";
} else {
reduceHtml += "φ(" + n + ") is 0 or invalid for this n.<br>";
}
if (g === 1 && phiN > 0) {
if (r === 0) {
reduceHtml += "Exponent is a multiple of φ(n).<br>";
reduceHtml += "So " + a + "<sup>" + k + "</sup> ≡ 1 (mod " + n + ") by Euler’s theorem.";
} else {
reduceHtml += "So:<br>";
reduceHtml += a + "<sup>" + k + "</sup> ≡ " +
a + "<sup>" + r + "</sup> (mod " + n + ")";
}
} else {
if (phiN > 0) {
reduceHtml += "Since gcd(a, n) ≠ 1, this reduction is not Euler’s theorem, ";
reduceHtml += "but you can still see k reduced modulo φ(n).";
}
}
reduceBox.innerHTML = reduceHtml;
const valueFull = modPow(a, k, n);
let valueSmall = valueFull;
if (g === 1 && phiN > 0) {
if (r === 0) {
valueSmall = 1;
} else {
valueSmall = modPow(a, r, n);
}
}
let resultHtml = "";
resultHtml += "<strong>Direct fast power:</strong><br>";
resultHtml += a + "<sup>" + k + "</sup> mod " + n + " = " + valueFull + "<br><br>";
if (g === 1 && phiN > 0) {
resultHtml += "<strong>Using Euler reduction:</strong><br>";
if (r === 0) {
resultHtml += a + "<sup>" + k + "</sup> ≡ 1 (mod " + n + ")";
} else {
resultHtml += a + "<sup>" + k + "</sup> ≡ " +
a + "<sup>" + r + "</sup> (mod " + n + ") = " + valueSmall;
}
}
resultBox.innerHTML = resultHtml;
resultBig.textContent = valueFull;
}
document.getElementById('baseInput').addEventListener('input', update);
document.getElementById('expInput').addEventListener('input', update);
document.getElementById('modInput').addEventListener('input', update);
update();
</script>
</body>
</html>