Description

copy prompt content

[APP_NAME]: Unit Converter Calculator

🎯 Goal / Objective
Create a modern, responsive, and SEO-optimized single-page Unit Converter Calculator that converts a wide range of measurement units (length, weight, temperature, volume, area, speed, time, digital storage, pressure, energy, angle, and more). Provide an intuitive, fast, accurate, and accessible conversion experience with polished visuals, mobile-first responsiveness, and excellent performance.

💡 Webpage Structure

1. HTML Head (SEO & Performance)

   • Meta Title: Unit Converter Calculator | Free Online Measurement Conversion Tool

   • Meta Description: Convert units of length, weight, temperature, volume, area, and more — instantly and accurately. Free, responsive, and easy-to-use unit converter.

   • Meta Keywords: unit converter, online calculator, measurement conversion, metric to imperial, length converter, weight converter, temperature converter

   • Viewport: width=device-width, initial-scale=1

   • Charset: utf-8

   • Canonical URL placeholder

   • Open Graph tags (og:title, og:description, og:image, og:url)

   • Twitter Card tags

   • Minimal, critical inline CSS for above-the-fold styling; defer non-critical CSS.

   • Preconnect to fonts (if using Google fonts).

   • JSON-LD structured data (WebSite / SoftwareApplication schema) for SEO.

   • <meta name="robots" content="index, follow">

2. Header / Navbar

   • Left: Logo or text Unit Converter (SVG preferred)

   • Right: Smooth-scroll links — Home | Categories | About | Contact

   • Sticky, translucent navbar (glassmorphism) with subtle shadow

   • Mobile hamburger menu; focus trap on open

   • ARIA labels and keyboard navigable

3. Hero Section

   • Full-width gradient background (blue → cyan → white) with soft geometric or particle overlay

   • Headline: Instant & Accurate Unit Conversion

   • Subheadline: Convert any measurement instantly — from length and weight to temperature and data.

   • Primary CTA: Start Converting (scrolls to converter)

   • Secondary CTA: Explore Categories (scrolls to categories/features)

   • Animated subtle SVG icons: ruler, thermometer, scale, data stack

   • Accessible contrast and clear semantic headings (H1/H2)

4. Converter Section (Core UI)

   • Category selector (Length, Weight, Temperature, Volume, Area, Speed, Time, Data, Pressure, Energy, Angle)

   • From value input (number) with step, min/max, keyboard support

   • From unit dropdown and To unit dropdown (grouped, searchable)

   • Swap button to reverse From/To

   • Real-time conversion result with formatted output & unit label

   • Optional: show conversion formula or intermediate steps (toggle)

   • Copy result button and share link generation (URL params to restore state)

   • Input validation, error messages, and ARIA live region announcing new result

   • Responsive grid: stacked on mobile, side-by-side on desktop

   • Persist last-used category & units in localStorage

   • Unit lists include common and less-common units (e.g., meters, kilometers, miles, inches; grams, kilograms, pounds, ounces; celsius, fahrenheit, kelvin; bytes, KB, MB, GB, TB)

5. Features Section

   • 4–6 feature cards with icon, title, short description:

     • Multiple Categories — Converts metric & imperial units

     • Instant Conversion — Fast, client-side calculations

     • Mobile-First & Responsive — Works on all devices

     • Accessible & Keyboard Friendly — ARIA + WCAG considerations

     • Lightweight & Offline-capable — No backend required

   • Hover elevation and subtle entrance animations (prefer CSS)

6. Examples / Quick Conversions

   • Prebuilt quick conversion buttons (e.g., 1 mi → km, 100°C → °F, 1 TB → GB)

   • Small table with sample common conversions for SEO content

7. About Section

   • Short paragraph explaining accuracy, source of conversion constants, and how rounding is handled

   • Mention that conversions follow standard SI definitions & common industry conversions

   • Link to methodology or data source (if any) for transparency

8. Accessibility & UX

   • Semantic HTML (header, main, nav, section, footer)

   • Keyboard accessible controls, visible focus states

   • ARIA attributes for dynamic elements (aria-live, aria-controls, role=”alert” for errors)

   • Color contrast meets WCAG AA (text, CTA buttons)

   • Reduced motion preference respected (prefers-reduced-motion)

   • Large tap targets for mobile

9. Analytics & Privacy

   • Optional lightweight analytics snippet (privacy conscious)

   • GDPR cookie notice if analytics used

   • Privacy Policy link in footer

10. Footer

    • Links: About | Privacy Policy | Contact | GitHub

    • Social icons: LinkedIn, Twitter, GitHub (SVG icons)

    • Small copyright: © 2025 Unit Converter Calculator

    • Micro-copy: “No personal data collected by default.”

🎨 Attractive Theme

• Color Palette: Gradient base using #007BFF → #00BFFF with white/soft-gray surfaces (#F9FAFB). Accent/neon for primary CTA.

• Typography: Poppins (headings) + Inter (body) or a single modern font stack for performance. Use font-display: swap.

• UI Style: Glassmorphism panels (semi-transparent cards), rounded corners (8–16px), soft shadows, subtle glow on hover for primary buttons.

• Icons & Graphics: Minimal SVG icons and small Lottie or animated SVGs for hero; avoid heavy images to keep load fast.

• Animations: Smooth CSS transitions, parallax/translate for hero layers, subtle micro-interactions on buttons and dropdowns.

⚙️ Tech Stack & Implementation Notes

• Single HTML file with embedded critical CSS and a deferred external JS module (or embedded small JS for portability).

• Vanilla HTML5, CSS3, JavaScript (ES6+). No heavy frameworks.

• Use modular JS: separation of concerns (UI layer, conversion logic, storage).

• Conversion logic: precise constants, use decimal-safe arithmetic where needed (avoid floating errors for critical conversions — consider simple rounding utilities).

• Lazy-load non-critical assets (images, illustrations).

• Use aria-*, role attributes and semantic tags.

• Progressive enhancement: site works with JS disabled (basic information & sample conversions), full interactivity with JS.

• Unit tests for conversion functions (optional, for dev).

🚀 Additional Enhancements & SEO Signals

• Structured Data: JSON-LD for SoftwareApplication or WebSite to improve rich results.

• Fast Core Web Vitals: minimize render-blocking resources, compress assets, set proper cache headers.

• Sitemap & Robots: recommend creating sitemap.xml and robots.txt for indexing.

• Shareable Links: support URL params to restore converter state (e.g., ?cat=length&from=mi&to=km&value=1)

• Dark Mode: automatic detect + manual toggle; store preference in localStorage

• Offline Fallback: optional small service worker for caching static assets (makes app usable offline)

• Localization Ready: structure for i18n (strings centralized), directionality support (ltr/rtl)

• Performance: minify CSS/JS, use gzip/br or compression on server, use HTTP/2 or HTTP/3 if served

🧩 Prompt Summary (for AI Generator / Developer)
Generate a single-page, SEO-optimized Unit Converter Calculator using HTML, CSS, and JavaScript only. The page must be:

• Visually modern (gradient, glassmorphism), accessible (ARIA + WCAG), and mobile-first.

• Feature a prominent hero, an interactive converter (category + from/to + swap + real-time result), feature cards, quick examples, and an about section.

• Include SEO meta tags, JSON-LD structured data, shareable URL state, localStorage persistence, dark mode, and performance best practices.

• Keep the code lightweight, dependency-free, and ready to drop into any static hosting.

Deliverable expectations

• One single HTML file with embedded CSS and JS (production-ready, minified optional), including:

  • Head meta tags + JSON-LD

  • Fully functional converter UI and logic

  • Accessibility attributes and keyboard support

  • LocalStorage persistence and shareable URL parameters

  • Comments in the code explaining conversion sources and main functions