Create a modern, responsive QR Code Generator website using only HTML, CSS, and vanilla JavaScript. Do not use PHP, databases, APIs, or backend services.
Main QR Code Generator
Create a clean and user-friendly QR Code Generator where users can:
- Enter text or a URL
- Generate a QR code instantly
- Preview the QR code
- Download the QR code as PNG
- Clear/reset the input
- Generate a new QR code without refreshing the page
- Show a helpful validation message when the input is empty
The interface should be fast, lightweight, mobile-friendly, and easy to use.
Design
Use a professional tool-style design with:
- Clean white background
- Modern typography
- Attractive primary button
- Responsive layout for desktop, tablet, and mobile
- Card-based QR generator interface
- Clear input field
- QR code preview area
- Download button
- Header/navigation menu
- Footer with useful links
- Subtle hover and transition effects
- Accessible buttons, labels, and form elements
Pages
Create the following separate pages:
- Home – QR Code Generator
- About Us
- Contact Us
- Privacy Policy
- Disclaimer
- Terms and Conditions
The Contact Us page must NOT contain a contact form. Instead, create a professional contact-information section containing text such as:
Get in Touch
If you have any questions, suggestions, feedback, or business inquiries, feel free to contact us by email.
Email: [email protected]
Use a placeholder email address so it can easily be replaced later.
About Us Page
Explain the purpose of the website and how it helps users quickly create QR codes for URLs, text, and other supported information. Keep the content professional, simple, and suitable for a public utility website.
Privacy Policy
Create a professional Privacy Policy explaining:
- What information the website collects
- That the QR generator works primarily in the user’s browser
- Cookies, if applicable
- Analytics, if applicable
- Third-party services, if applicable
- Data security
- Children’s privacy
- User rights
- Policy updates
- Contact information
Do not make false claims. Use placeholders where website-specific information is required.
Disclaimer
Create a professional Disclaimer explaining that the website is provided for general informational and utility purposes and that users are responsible for verifying the content they encode into QR codes.
Terms and Conditions
Create professional Terms and Conditions covering:
- Acceptance of terms
- Use of the website
- Acceptable use
- Intellectual property
- User responsibility
- Service availability
- Limitation of liability
- Changes to the website
- Changes to the terms
- Contact information
Technical Requirements
- Use HTML5, CSS3, and vanilla JavaScript
- No backend
- No database
- No API key
- Keep the QR generation functionality client-side
- Organize files cleanly:
index.htmlabout.htmlcontact.htmlprivacy-policy.htmldisclaimer.htmlterms.htmlstyle.cssscript.js
- Use semantic HTML
- Make the navigation work correctly between all pages
- Make the footer consistent across all pages
- Ensure the website works properly on mobile and desktop
- Add appropriate SEO-friendly
<title>and meta description tags to every page - Use clean URLs/file names and proper heading hierarchy
- Include accessible labels and keyboard-friendly controls
- Do not include unnecessary external dependencies
Final Goal
Build the website as a professional, SEO-friendly, lightweight QR Code Generator tool that can be uploaded directly to any static web hosting service and work without server-side code.
