78 lines
2.7 KiB
HTML
78 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>RSA Study Coach</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="hero">
|
|
<div class="hero-inner">
|
|
<p class="eyebrow" data-i18n="heroTag">Cryptography Trainer</p>
|
|
<h1 data-i18n="heroTitle">RSA Study Coach</h1>
|
|
<p class="hero-copy" data-i18n="heroCopy">
|
|
Step through RSA from intuition to full key generation, then test yourself.
|
|
</p>
|
|
<div class="toolbar">
|
|
<label for="lang" data-i18n="languageLabel">Language</label>
|
|
<select id="lang" aria-label="Language selector">
|
|
<option value="en">English</option>
|
|
<option value="de">Deutsch</option>
|
|
<option value="es">Español</option>
|
|
<option value="fr">Français</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<section class="card" aria-labelledby="roadmap-title">
|
|
<h2 id="roadmap-title" data-i18n="roadmapTitle">Learning Path</h2>
|
|
<ol id="roadmap" class="roadmap"></ol>
|
|
<button id="nextStep" class="primary" data-i18n="nextStep">Mark step as understood</button>
|
|
</section>
|
|
|
|
<section class="card" aria-labelledby="lab-title">
|
|
<h2 id="lab-title" data-i18n="labTitle">RSA Lab</h2>
|
|
<div class="grid">
|
|
<div>
|
|
<label for="p">p (prime)</label>
|
|
<input id="p" type="number" value="61" min="2" />
|
|
</div>
|
|
<div>
|
|
<label for="q">q (prime)</label>
|
|
<input id="q" type="number" value="53" min="2" />
|
|
</div>
|
|
<div>
|
|
<label for="e">e (public exponent)</label>
|
|
<input id="e" type="number" value="17" min="2" />
|
|
</div>
|
|
<div>
|
|
<label for="m">m (message as number)</label>
|
|
<input id="m" type="number" value="65" min="0" />
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<button id="runLab" class="primary" data-i18n="runLab">Run RSA walk-through</button>
|
|
<button id="randomSmall" data-i18n="randomExample">Random small example</button>
|
|
</div>
|
|
<pre id="labOutput" class="output" aria-live="polite"></pre>
|
|
</section>
|
|
|
|
<section class="card" aria-labelledby="quiz-title">
|
|
<h2 id="quiz-title" data-i18n="quizTitle">Quick Check</h2>
|
|
<p data-i18n="quizIntro">What must hold for a valid public exponent e?</p>
|
|
<div class="quiz-options" role="radiogroup" aria-label="quiz options">
|
|
<button class="quiz-option" data-correct="false">e must be prime and larger than n</button>
|
|
<button class="quiz-option" data-correct="true">1 < e < φ(n) and gcd(e, φ(n)) = 1</button>
|
|
<button class="quiz-option" data-correct="false">e must divide φ(n)</button>
|
|
</div>
|
|
<p id="quizFeedback" class="feedback" aria-live="polite"></p>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|