<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta

name="description"

content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver."

/>

<meta name="color-scheme" content="dark light" />

<meta id="themeColorMeta" name="theme-color" content="#0f172a" />

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://unpkg.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com; font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com; img-src 'self' data:; connect-src 'self' https://pyodide-cdn2.iodide.io; base-uri 'self'; form-action 'self'" />

<!-- Open Graph / Facebook -->

<meta property="og:type" content="website" />

<meta

property="og:url"

content="https://steam-bell-92.github.io/python-mini-project/utilities.html"

/>

<meta

property="og:title"

content="Python Web Utilities & Tools - Interactive Web Edition"

/>

<meta

property="og:description"

content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver."

/>

<meta property="og:site_name" content="py.mini() lab" />

<!-- Twitter -->

<meta name="twitter:card" content="summary_large_image" />

<meta

name="twitter:url"

content="https://steam-bell-92.github.io/python-mini-project/utilities.html"

/>

<meta

name="twitter:title"

content="Python Web Utilities & Tools - Interactive Web Edition"

/>

<meta

name="twitter:description"

content="Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver."

/>

<!-- Canonical Link -->

<link

rel="canonical"

href="https://steam-bell-92.github.io/python-mini-project/utilities.html"

/>

<title>Python Web Utilities & Tools - Interactive Web Edition</title>

<link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />

<!-- Structured Data (JSON-LD) -->

<script type="application/ld+json">

{

"@context": "https://schema.org",

"@type": "ItemPage",

"name": "Interactive Python Utilities & Tools",

"description": "Run handy Python utilities directly in your browser: typing speed tests, Morse code translator, number base converter, and Tower of Hanoi solver.",

"url": "https://steam-bell-92.github.io/python-mini-project/utilities.html",

"publisher": {

"@type": "Organization",

"name": "py.mini() lab"

}

}

</script>

<link rel="stylesheet" href="css/styles.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>

/* ── Page background ── */

body[data-page="utilities"] {

background-image: url("assets/utilities-bg.webp");

background-size: cover;

background-attachment: fixed;

background-position: center;

}

/* Overlay so cards stay readable */

body[data-page="utilities"]::before {

content: "";

position: fixed;

inset: 0;

background: rgba(2, 20, 10, 0.75);

z-index: 0;

pointer-events: none;

}

body[data-page="utilities"] .navbar,

body[data-page="utilities"] main,

body[data-page="utilities"] .footer {

position: relative;

z-index: 1;

}

/* Light mode overlay */

[data-theme="light"] body[data-page="utilities"]::before {

background: rgba(220, 252, 231, 0.8);

}

/* Active tab highlight for this page */

a.tab.active {

background: var(--primary-color);

border-color: var(--primary-color);

color: white;

}

</style>

</head>

<body data-page="utilities" class="sidebar-active">

<a href="#main-content" class="skip-link">🚀 Skip to main content</a>

<!-- Mobile Sidebar Toggle -->

<button

type="button"

class="mobile-sidebar-toggle"

id="mobileSidebarToggle"

aria-label="Toggle sidebar menu"

aria-expanded="false"

>

<i class="fas fa-bars"></i>

</button>

<!-- ── PRIMARY SIDEBAR DOCK ──────────────────────────────────── -->

<aside

class="sidebar-dock"

id="mainSidebar"

aria-label="Primary Navigation"

>

<div class="sidebar-brand">

<a class="logo-wrap" href="index.html">

<div class="logo-top-row">

<div class="logo-text">

<span class="logo-py">py</span>

<span class="logo-mini">.mini</span>

<span class="logo-parens">()</span>

</div>

</div>

<span class="logo-tagline">games, math &amp; terminal toys</span>

</a>

</div>

<div class="sidebar-search">

<div class="search-box" style="position: relative">

<i class="fas fa-search"></i>

<input

aria-label="Search projects"

id="searchInput"

placeholder="Search projects or tags..."

type="text"

/>

<div class="search-dropdown" id="searchDropdown">

<div class="dropdown-content" id="searchDropdownContent">

<div

class="search-loader"

id="searchLoader"

style="display: none"

>

<div class="spinner"></div>

</div>

<div class="recent-searches-section" id="dropdownRecentSearchesSection">

<div class="dropdown-section-title recent-searches-header">

<span class="recent-searches-heading">

<i class="fas fa-history" aria-hidden="true"></i>

Recent Searches

</span>

</div>

<div class="recent-searches-chips" id="dropdownRecentSearchesList" role="list"></div>

</div>

<div

class="results-section"

id="resultsSection"

style="display: none"

>

<div class="dropdown-section-title">Projects</div>

<div class="dropdown-list" id="resultsList"></div>

</div>

<div class="tips-section" id="tipsSection">

<p><strong>Search tips</strong></p>

<ul>

<li>

Type a project name — <code>snake</code>, <code>quiz</code>

</li>

<li>

Filter by tag — <code>game</code>, <code>math</code>,

<code>utility</code>

</li>

<li>Press <code>Ctrl+K</code> to focus search</li>

</ul>

</div>

<div

class="no-results-message"

id="noResultsMessage"

style="display: none"

>

No projects found. Try a different keyword.

</div>

</div>

</div>

</div>

</div>

<div class="sidebar-menu-wrapper">

<div class="sidebar-menu-title">Categories</div>

<nav

class="sidebar-menu"

role="tablist"

aria-label="Filter by category"

>

<button

aria-selected="false"

class="sidebar-tab"

data-category="all"

role="tab"

tabindex="-1"

>

<span class="sidebar-icon"><svg data-lucide="layers"></svg></span>

<span class="sidebar-label">All Projects</span>

</button>

<button

aria-selected="false"

class="sidebar-tab"

data-category="games"

role="tab"

tabindex="-1"

>

<span class="sidebar-icon"

><svg data-lucide="gamepad-2"></svg

></span>

<span class="sidebar-label">Games Arcade</span>

</button>

<button

aria-selected="false"

class="sidebar-tab"

data-category="math"

role="tab"

tabindex="-1"

>

<span class="sidebar-icon"><svg data-lucide="sigma"></svg></span>

<span class="sidebar-label">Maths Lab</span>

</button>

<button

aria-selected="true"

class="sidebar-tab active"

data-category="utilities"

role="tab"

tabindex="0"

>

<span class="sidebar-icon"><svg data-lucide="wrench"></svg></span>

<span class="sidebar-label">Utilities Lab</span>

</button>

<button

aria-selected="false"

class="sidebar-tab"

data-category="favorites"

role="tab"

tabindex="-1"

>

<span class="sidebar-icon"><svg data-lucide="star"></svg></span>

<span class="sidebar-label">My Favorites</span>

</button>

<button

aria-selected="false"

class="sidebar-tab"

data-category="playground"

role="tab"

tabindex="-1"

>

<span class="sidebar-icon"><svg data-lucide="terminal"></svg></span>

<span class="sidebar-label">Playground</span>

</button>

</nav>

</div>

<div class="sidebar-footer">

<div class="sidebar-controls">

<button

aria-label="Mute sounds"

class="sound-toggle"

id="soundToggle"

type="button"

>

<i class="fas fa-volume-up"></i>

</button>

<button

aria-label="Switch theme"

class="theme-toggle"

id="themeToggle"

type="button"

>

<i class="fas fa-moon"></i>

</button>

</div>

</div>

</aside>

<main id="main-content" tabindex="-1">

<!-- Page Title Section -->

<section

class="page-title-section"

style="text-align: center; padding: 2rem 0 1rem 0"

>

<div class="container">

<h1

style="

"

>

Interactive Python Web Utilities

</h1>

<p

style="

"

>

Explore beginner-friendly Python utility projects in your

browser—converters, translators, and more.

</p>

</div>

</section>

<!-- Projects Grid — Utilities only -->

<section class="projects-section" aria-label="Utility Projects">

<div class="container">

<div class="projects-grid" id="projectsGrid">

<div

class="project-card"

data-category="utilities"

data-project="caesar-cipher"

>

<img

class="card-banner"

src="assets/banners/caesar-cipher.webp"

alt="Caesar Cipher"

loading="lazy"

/ loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Caesar Cipher">Try It</button>

</div>

<h3>Caesar Cipher</h3>

<p>Encrypt &amp; decrypt with a shift!</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="budget-tracker"

>

<img

class="card-banner"

src="assets/banners/budget-tracker.webp"

alt="Budget Tracker"

loading="lazy"

/>

<div class="card-actions">

<button class="btn-play" aria-label="Play Budget Tracker">Try It</button>

</div>

<h3>Budget Tracker</h3>

<p>Track income and expenses, view categories, and persist data locally</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="morse-code"

>

<img

class="card-banner"

src="assets/banners/morse-code.webp"

alt="Morse Code"

loading="lazy"

/ loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Morse Code">Try It</button>

</div>

<h3>Morse Code</h3>

<p>Translate with lights &amp; sound!</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="number-converter"

>

<img

class="card-banner"

src="assets/banners/number-converter.webp"

alt="Number Converter"

loading="lazy"

/ loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Number Converter">Try It</button>

</div>

<h3>Number Converter</h3>

<p>Convert Dec, Bin, Oct, and Hex!</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="tower-of-hanoi"

>

<img

class="card-banner"

src="assets/banners/tower-of-hanoi.webp"

alt="Tower of Hanoi"

loading="lazy"

/ loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Tower of Hanoi">Try It</button>

</div>

<h3>Tower of Hanoi</h3>

<p>Solve the classic puzzle!</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="typing-speed-tester"

>

<img

class="card-banner"

src="assets/banners/typing-speed-tester.webp"

alt="Typing Speed Tester"

loading="lazy"

/ loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Typing Speed Tester">Try It</button>

</div>

<h3>Typing Speed Tester</h3>

<p>Test your typing skills!</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="pathfinding-visualizer"

>

<img class="card-banner" src="assets/banners/pathfinding-visualizer.webp" alt="Pathfinding Visualizer" loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Pathfinding Visualizer">Try It</button>

</div>

<h3>Pathfinding Visualizer</h3>

<p>Visualize Dijkstra and A* search on a grid.</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="password-forge"

>

<img class="card-banner" src="assets/banners/password-forge.webp" alt="Password Forge" loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Password Forge">Try It</button>

</div>

<h3>Password Forge</h3>

<p>Generate passwords that satisfy evolving security rules.</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="productive-pet"

>

<img class="card-banner" src="assets/banners/productive-pet.webp" alt="Productive Pet" loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Productive Pet">Try It</button>

</div>

<h3>Productive Pet</h3>

<p>Track tasks while caring for a productivity companion.</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="color-palette"

>

<img class="card-banner" src="assets/banners/color-palette.webp" alt="Color Palette" loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Color Palette">Try It</button>

</div>

<h3>Color Palette</h3>

<p>Generate and copy color palettes for design work.</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="progress-tracker"

>

<img class="card-banner" src="assets/banners/progress-tracker.webp" alt="Progress Tracker" loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Progress Tracker">Try It</button>

</div>

<h3>Progress Tracker</h3>

<p>Track completed projects across the learning journey.</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="unit-converter"

>

<img class="card-banner" src="assets/banners/unit-converter.webp" alt="Unit Converter" loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play Unit Converter">Try It</button>

</div>

<h3>Unit Converter</h3>

<p>Convert values between common measurement units.</p>

</div>

<div

class="project-card"

data-category="utilities"

data-project="tsp-visualizer"

>

<img class="card-banner" src="assets/banners/tsp-visualizer.webp" alt="TSP Visualizer" loading="lazy">

<div class="card-actions">

<button class="btn-play" aria-label="Play TSP Visualizer">Try It</button>

</div>

<h3>TSP Visualizer</h3>

<p>Explore Traveling Salesperson routes visually.</p>

</div>

</div>

<!-- /projects-grid -->

</div>

</section>

</main>

<!-- Project Modal -->

<div

class="modal"

id="projectModal"

role="dialog"

aria-modal="true"

aria-labelledby="modalDialogTitle"

aria-hidden="true"

>

<div class="modal-content">

<h2

id="modalDialogTitle"

class="modal-dialog-title visually-hidden"

tabindex="-1"

>

Interactive project

</h2>

<button

type="button"

class="modal-close"

id="modalClose"

aria-label="Close project dialog"

>

&times;

</button>

<div id="modalBody"></div>

</div>

</div>

<button

type="button"

class="back-to-top"

id="backToTop"

aria-label="Back to top"

title="Back to top"

>

<i class="fas fa-arrow-up" aria-hidden="true"></i>

</button>

<footer class="footer">

<div class="container">

<p>Made with ❤️ for Python learners everywhere</p>

<p>

<a

href="https://github.com/steam-bell-92/python-mini-project"

target="_blank"

rel="noopener noreferrer"

>

<i class="fab fa-github" aria-hidden="true"></i> View on GitHub

</a>

</p>

</div>

</footer>

<script defer src="js/audio.js"></script>

<script defer src="js/projects/rock-paper-scissor.js"></script>

<script defer src="js/projects/dice-rolling.js"></script>

<script defer src="js/projects/coin-flip.js"></script>

<script defer src="js/projects/number-guessing.js"></script>

<script defer src="js/projects/hangman.js"></script>

<script defer src="js/projects/flames.js"></script>

<script defer src="js/projects/fibonacci.js"></script>

<script defer src="js/projects/pascal-triangle.js"></script>

<script defer src="js/projects/calculator.js"></script>

<script defer src="js/projects/collatz.js"></script>

<script defer src="js/projects/armstrong.js"></script>

<script defer src="js/projects/prime-analyzer.js"></script>

<script defer src="js/projects/projectile-motion.js"></script>

<script defer src="js/projects/progression-recognizer.js"></script>

<script defer src="js/projects/coordinate-polar-transform.js"></script>

<script defer src="js/projects/complete-calculus-engine.js"></script>

<script defer src="js/projects/morse-code.js"></script>

<script defer src="js/projects/tower-of-hanoi.js"></script>

<script defer src="js/projects/math-quiz.js"></script>

<script defer src="js/projects/simon-says.js"></script>

<script defer src="js/projects/number-converter.js"></script>

<script defer src="js/projects/typing-speed-tester.js"></script>

<script defer src="js/projects/caesar-cipher.js"></script>

<script defer src="js/projects/unit-converter.js"></script>

<script defer src="js/projects/budget-tracker.js"></script>

<script defer src="js/projects/pathfinding-visualizer.js"></script>

<script defer src="js/projects/password-forge.js"></script>

<script defer src="js/projects/productive-pet.js"></script>

<script defer src="js/projects/color-palette.js"></script>

<script defer src="js/projects/progress-tracker.js"></script>

<script defer src="js/projects/tsp-visualizer.js"></script>

<script defer src="js/projects.js"></script>

<script defer src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

<script defer type="module" src="js/main.js"></script>

<script>

window.addEventListener('DOMContentLoaded', () => {

if (typeof lucide !== 'undefined') lucide.createIcons();

});

</script>