Skip to content

CLAUDE.md

Latest commit

 

History

History
88 lines (68 loc) · 3.16 KB

CLAUDE.md

File metadata and controls

88 lines (68 loc) · 3.16 KB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

Binary Code Translator is a static web application that provides free online tools for converting between different number bases and text formats. It's designed as a Multi-Page Application (MPA) for SEO optimization, running entirely client-side with no backend dependencies.

Development Commands

Since this is a static site with no build process:

Running Locally

# Serve the site locally (any static server works)
python -m http.server 8000
# or
npx serve .
# or simply open index.html directly in browser

Deployment

  • Copy all files to any static hosting service (GitHub Pages, Netlify, Vercel)
  • No build step required - files are deployment-ready

Architecture & Structure

Core Pages (SEO-focused MPA structure)

  • index.html - Main text ↔ binary converter (primary landing page)
  • text-to-binary.html - Dedicated text to binary conversion
  • binary-to-text.html - Binary to text conversion
  • binary-to-decimal.html - Binary to decimal conversion
  • binary-to-hex.html - Binary to hexadecimal conversion
  • ascii-to-binary.html - ASCII to binary conversion

Shared Components

  • css/style.css - Unified stylesheet with CSS variables, dark mode support
  • js/ui-controller.js - Core conversion logic using ES6+ classes
  • js/enhanced-ui.js - Additional features (FAQ, examples, animations)

Key Patterns

  1. Data Attributes: Pages use data-mode to configure converter behavior
  2. Real-time Updates: Input events trigger instant conversion with debouncing
  3. LocalStorage: Conversion history persists in browser storage
  4. Progressive Enhancement: Basic functionality works without JavaScript

Implementation Details

Conversion Logic (ui-controller.js)

  • Handles bidirectional conversions between text, binary, decimal, hex, ASCII
  • Auto-detects input format and converts accordingly
  • Manages UI state, error handling, and file operations

Styling System (style.css)

  • CSS custom properties for theming
  • Mobile-first responsive design
  • Dark/light mode via prefers-color-scheme
  • Monospace fonts (JetBrains Mono) for code display

SEO Implementation

  • Each page has unique meta tags and structured data
  • Canonical tags prevent duplicate content issues
  • sitemap.xml lists all converter pages
  • robots.txt for search engine crawling

Development Guidelines

When Adding New Converters

  1. Create new HTML page following existing template
  2. Set appropriate data-mode attribute
  3. Add unique title/meta tags for SEO
  4. Update sitemap.xml and navigation

When Modifying Conversion Logic

  • Update ui-controller.js classes and methods
  • Ensure error handling provides clear visual feedback
  • Test with various input formats and edge cases

When Updating Styles

  • Use CSS variables for consistent theming
  • Maintain mobile responsiveness
  • Test both light and dark modes

Technical Constraints

  • No external dependencies or frameworks
  • All processing must be client-side only
  • Maintain 100+ Lighthouse performance scores
  • Ensure accessibility with semantic HTML and keyboard navigation