|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>About MathTime ⏳</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body class="bg-gray-900 min-h-screen flex flex-col"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="flex-grow p-8 max-w-4xl mx-auto"> |
|
|
<div class="bg-gray-800 rounded-2xl p-8 shadow-2xl"> |
|
|
<h1 class="text-3xl font-bold text-purple-400 mb-6">How MathTime Works 🧮</h1> |
|
|
|
|
|
<div class="prose prose-invert"> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
MathTime is a unique clock that displays the current time using mathematical equations instead of digits. |
|
|
Each digit (0-9) is represented by a simple mathematical expression that evaluates to that number. |
|
|
</p> |
|
|
|
|
|
<h2 class="text-xl font-semibold text-blue-300 mt-6 mb-3">Why MathTime?</h2> |
|
|
<ul class="list-disc pl-6 space-y-2 text-gray-300"> |
|
|
<li>Makes math more approachable and fun</li> |
|
|
<li>Helps visualize numbers in different ways</li> |
|
|
<li>Great conversation starter!</li> |
|
|
<li>Perfect for math enthusiasts and educators</li> |
|
|
</ul> |
|
|
|
|
|
<h2 class="text-xl font-semibold text-green-300 mt-6 mb-3">Digit Equations</h2> |
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">0 = lim<sub>x→∞</sub>(1/x)</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">1 = cos(0)</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">2 = 1 + 1</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">3 = √9</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">4 = 2<sup>2</sup></span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">5 = ∫<sub>0</sub><sup>1</sup>5dx</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">6 = 3!</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">7 = ⌈6.3⌉</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">8 = 4 × 2</span> |
|
|
</div> |
|
|
<div class="bg-gray-700 p-4 rounded-lg"> |
|
|
<span class="text-yellow-300 font-mono">9 = 3<sup>2</sup></span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<p class="text-gray-300 mt-4"> |
|
|
Try to find your own equations for each digit! The possibilities are endless. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
