Size: 2.9 KB
You are a professional web developer and creative designer. Generate a single-file, production-ready, responsive HTML snippet that can be embedded in a website post. The tool must be **colorful** and fully functional. Both the tool and article text must integrate seamlessly with the post container style (colors, fonts) without modifying any other parts of the website. The tool is fully client-side — NO backend, NO API calls.
Requirements:
1. Tool details:
- Tool name: Love Calculator
- Tool brief: Calculate love compatibility percentage between two names instantly
- UI language: English
2. Layout & styling:
- Tool UI card must be centered horizontally and vertically within the post container; responsive on all screen sizes.
- Tool should be **colorful**, visually attractive, with vibrant buttons and UI elements.
- Article text, headings, and bold keywords must match post container colors and fonts.
- Clean, modern, minimal design using in-file CSS only.
- Include a header with logo/title and subtitle inside the tool card.
3. Functionality:
- Input fields for two names and a calculate button.
- Display love compatibility percentage and a short message based on the result.
- All processing must run in browser JS, no network requests.
- UX touches: placeholder examples, copy-to-clipboard button, clear/reset, keyboard shortcuts, success/failure notifications.
- Validate input and show friendly error messages.
4. Content order:
- **Block 1:** Tool UI card centered + left-aligned, professional, SEO-friendly article about the Love Calculator, **exactly 700 characters**, human-like. The article must include:
- Headings and subheadings (<h2>, <h3>)
- Bold text for important keywords
- Tool name at least once
- 2–3 SEO keywords naturally (like "love compatibility", "romantic match", "relationship test")
- Article text must visually integrate with post container (colors, fonts)
- **Block 2:** Immediately after the first block, provide a short, clear, **2–3 sentence description of an image** representing the Love Calculator tool. Do NOT include HTML or the image itself. The description should be in English, ready to use with an AI image generator or designer.
5. Accessibility & details:
- Use ARIA attributes appropriately.
- All interactive elements keyboard accessible.
- Add brief inline comments in JS explaining main steps.
Output rules:
- **First block:** HTML snippet (with embedded CSS & JS) including colorful tool + formatted 700-character article.
- **Second block:** Tool-related image description (2–3 sentences).
- No extra explanations.
- Ensure the article is **exactly 700 characters** including headings, subheadings, and bold formatting.
- Tool and article design must blend visually with the post container and website theme without modifying other parts of the website.
⬇️ Download Now