Overview
This prompt guides developers in enhancing a web application while preserving its original design and functionality. Programmers and coders will benefit from clear instructions on integrating new features seamlessly.
Prompt Overview
Purpose: This enhancement aims to improve user experience by adding a project creation feature.
Audience: The target users are developers looking to efficiently manage and create new projects within the app.
Distinctive Feature: A modal will appear for project creation, maintaining the app’s existing design and functionality.
Outcome: Users will seamlessly create new projects while enjoying consistent design and multilingual support.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Animation & VFX, Content & Media Creation, Development Tools & DevOps
- Techniques: Role/Persona Prompting, Self-Consistency, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
You are tasked with enhancing a single-file inline HTML, CSS, and JavaScript web application without altering any existing layout, responsiveness, or animations.
**Instructions:**
1. Add a Button:
– Position a button with an icon at the top-right corner of the screen, next to the language dropdown and the dark/light theme switcher.
– Ensure this button is visible only when the user is viewing a newly created project.
2. Popup/Modal Functionality:
– On clicking the button, open a card-style popup/modal.
– The popup must match the existing card UI in:
– Layout
– Colors
– Animations
– Fonts
– Gradients
– Padding
– Responsiveness
– Ensure no visual or behavioral deviation from the established design.
3. Popup Content:
– Include the following elements in the popup:
– Title: “New Project”
– Text Input Field:
– Label above it: “Project Name”
– Placeholder text: “Project Name”
– Button: Labeled “Create a Project”
4. Multilingual Support:
– All text strings inside the popup (title, label, placeholder, and button text) must integrate with the existing multilingual support system.
– Ensure the popup text updates dynamically when the user changes the language.
5. Your Projects Section:
– Display a grid containing project cards representing actual project data sourced from static data or a JavaScript array.
– Each project card must display the real project name and be clickable.
– Clicking a project card should open the corresponding project, similar to selecting it from the burger menu.
**Additional Constraints:**
– All code must remain within the single existing HTML file—no external or separated CSS or JS files.
– Preserve the current theme, color palette, grid layout, and transition effects exactly.
– Do not break or modify any existing functionalities, layouts, or animations.
**Output Format:**
– Provide the complete single HTML file content integrating these enhancements.
– Ensure that all new elements are seamlessly integrated with existing logic, styling, and multilingual mechanisms.
– The file must be fully operational with the new functionality included and visually indistinguishable from the original except for the added features as described.
**Notes:**
– Reference existing classes, styles, and multilingual functions in the app for consistency and dynamic text updates.
– The new project popup modal must animate and style identically to existing card components.
– Ensure the button’s visibility toggles correctly based on whether a user is inside a newly created project view.
– Use existing event handlers or add new ones without conflicting with current behavior.
Your goal is to implement this enhancement flawlessly, maintaining the integrity and UX of the original app.
Screenshot Examples
How to Use This Prompt
- Copy the prompt into your code editor.
- Review the existing HTML structure and styles.
- Implement the button in the specified location.
- Create the popup/modal with required content and styles.
- Integrate multilingual support for popup text.
- Test the functionality to ensure no existing features are broken.
Tips for Best Results
- Add a Button: Position a button with an icon at the top-right corner, visible only for new projects.
- Popup/Modal Functionality: Create a card-style popup that matches existing UI elements in layout, colors, and animations.
- Popup Content: Include a title, text input for project name, and a “Create a Project” button, all supporting multilingual text.
- Your Projects Section: Display a grid of clickable project cards sourced from static data, opening the corresponding project on click.
FAQ
- How do I add a button to the top-right corner?
Position the button using CSS with absolute positioning, aligning it to the top-right. - What should happen when the button is clicked?
It should trigger a function that opens a modal with the specified content. - How do I ensure multilingual support for the popup?
Integrate the text with existing language functions to update dynamically on language change. - How can I display project cards in a grid?
Use a grid layout in CSS to arrange project cards, ensuring they are clickable.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
