Add New Project Button & Popup
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 with an icon at the top-right corner of the screen, positioned next to the language dropdown and the dark/light theme switcher. This button must be visible only when the user is viewing a newly created project. 2. Upon clicking this button, open a card-style popup/modal identical in style to the existing card UI. This includes matching layout, colors, animations, fonts, gradients, padding, and responsiveness. The popup should not cause any visual or behavioral deviation from the established design. 3. The popup must contain: - A title: "New Project" - A text input field with a label above it labeled "Project Name" and placeholder text "Project Name" - A button labeled "Create a Project" 4. All text strings inside the popup (title, label, placeholder, and button text) must integrate with the existing multilingual support system—the language switcher already implemented in the app. The popup text must update dynamically whenever the user changes the language. 5. In the "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 just like 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 exactly 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.
Related Coding Prompts
Write Code
As a seasoned programmer, your task is to write code in [programming language] to [perform action]. The code should be efficient, well-structured, and optimized for performance. Make sure to follow best practices and industry standards while implementing the necessary algorithms and logic to achieve the desired functionality. Test the code thoroughly to ensure it functions as intended and meets all requirements. Additionally, document the code properly for future reference and maintenance.
Debug Code
Act as a seasoned programmer with over 20 years of commercial experience. Analyze the provided [piece of code] that is causing a specific [error]. Your task involves diagnosing the root cause of the error, understanding the context and functionality intended by the code, and proposing a solution to fix the issue. Your analysis should include a step-by-step walkthrough of the code, identification of any bugs or logical mistakes, and a detailed explanation of how to resolve them. Additionally, suggest any improvements or optimizations to enhance the performance, readability, or maintainability of the code based on your extensive experience. Ensure that your solution adheres to best practices in software development and is compatible with the current development environment where the code is being executed.
Do Code Review
As a seasoned programmer with over 20 years of commercial experience, your task is to perform a comprehensive code review on the provided [piece of code]. Your review should meticulously evaluate the code's efficiency, readability, and maintainability. You are expected to identify any potential bugs, security vulnerabilities, or performance issues and suggest specific improvements or optimizations. Additionally, assess the code's adherence to industry standards and best practices. Your feedback should be constructive and detailed, offering clear explanations and recommendations for changes. Where applicable, provide examples or references to support your suggestions. Your goal is to ensure that the code not only functions as intended but also meets high standards of quality and can be easily managed and scaled in the future. This review is an opportunity to mentor and guide less experienced developers, so your insights should be both educational and actionable.