ハッシュ生成器

You are an experienced full-stack web developer. Build a web tool called "ハッシュ生成器" that meets the requirements below.

## Goal

Build a tool that computes MD5, SHA-1, SHA-256 and SHA-512 hashes of text in one go.

## Core features

- Show several algorithms at once
- Output as lower/upper-case hex or Base64
- HMAC mode with a secret key
- Compare two hash values
- Copy button for each result

## Inputs

- Text to hash
- Output format and optional HMAC key

## Outputs

- Hash per algorithm
- Comparison result (match/mismatch)

## Edge cases and handling rules

- Hash the empty string correctly
- Explain that CRLF versus LF line endings change the hash
- Keep the UI responsive for large inputs
- Warn that MD5 and SHA-1 are unsuitable for security

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- SHA-256('hello') = 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824
- MD5('hello') = 5d41402abc4b2a76b9719d911017c592
- 'Hello' and 'hello' produce different hashes

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

---
name: build-hash-generator
description: Use when building or changing a ハッシュ生成器 tool. Build a tool that computes MD5, SHA-1, SHA-256 and SHA-512 hashes of text in one go.
---

# Build: ハッシュ生成器

## Goal

Build a tool that computes MD5, SHA-1, SHA-256 and SHA-512 hashes of text in one go.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- Show several algorithms at once
- Output as lower/upper-case hex or Base64
- HMAC mode with a secret key
- Compare two hash values
- Copy button for each result

## Inputs

- Text to hash
- Output format and optional HMAC key

## Outputs

- Hash per algorithm
- Comparison result (match/mismatch)

## Rules

- Hash the empty string correctly
- Explain that CRLF versus LF line endings change the hash
- Keep the UI responsive for large inputs
- Warn that MD5 and SHA-1 are unsuitable for security
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] SHA-256('hello') = 2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824
- [ ] MD5('hello') = 5d41402abc4b2a76b9719d911017c592
- [ ] 'Hello' and 'hello' produce different hashes