A Collection of Templates Generated Using Claude-AI
Architect Code| Template | Prompt |
|---|---|
| 18 |
Build me a slick HTML page that is an image gallery with fully functional JavaScript to handle this gallery. It should include a left and right navigation button to slide the gallery left and right. Additionally, keyboard buttons left and right should also work as a secondary way to interact with this gallery. Have a single large image in the middle and be able to see additional smaller images to the left and right of the primary image that show the previous and next images in the sequence. Adjust the additional images for smaller devices, such as mobile devices should probably hide these due to not enough horizontal real-estate. Use placeholder images for now, I will have the backend wire-up serving my images to the page. Include dot indicators of all the images in the sequence, these dots do not have to show the actual image but make them look slick and futuristic in design. Adjust so that only X-amount of dots can be visible in the real-estate provided and if there are more images than can fit dots in the horizontal real-estate, move the dots accordingly. For example if there are a hundred images but only 10 dots can fit in the space provided. Have a dot indicator move from left to right that indicates this is the current image in relation to the dot in the sequence. But again if there are a hundred images, the dot indicator should stop on the far right or left whichever direction is being navigated. Include awesome animations and transitions. Make the corners slightly rounded and include box-shadowing effects. Include any other animations, graphic design or transitions that are in high demand today that I may not know what to ask for. Make the gallery fully responsive with standard CSS break-points (320px, 480px, 640px, 768px, 1024px and 1200px). Include a pause/play button to ensure full compatibility compliance and whatever else might be needed to adhere to this compliance. If there are 10 or more images, please wire up a way to AJAX Request the new ones, with enough time to start to load them as the user approaches to the left and to the right. Be sure to account for this preloading of assets should the user decided to navigate to the left when first loading the page, such as if they start on image 1 and decide to slide backwards to image 100, use the best possible approach to handle this edge-case and how it displays in the additional preview images to the left and right of the primary image. Assume that my image endpoint will be paginated to 10 images and includes a count of total number of items to help determine total number of pages. |
| 17 |
Generate a slick landing page that discusses the history of Python and what it is commonly used for throughout history and today. At the bottom of the page include a list of links to pages of examples that I will provide, just have placeholder links for now. Make it a dark blue color scheme and a space theme. Include animations to make it look modern and keeps the visitor engaged and interactive. |
| 16 |
Generate a slick, futuristic themed project landing page that includes several sections...
Make it a dark blue color scheme and a space theme. Include animations to make it look modern and keeps the visitor engaged and interactive. Include a basic loading animation that will disappear when the page is fully loaded. Include fun features like parallax scrolling, parallax layered background with a space theme and include stars and galaxy's in the background, responsive design with CSS break-point placeholders at (320px, 480px, 640px, 768px, 1024px and 1200px), Floating particles that animate across the hero section, Cursor trail effect with smooth following circles, Fade-in animations triggered as you scroll down the page and Ripple click effect. Smooth transitions throughout and any other features that I haven't thought of that might help the content pop out and engage with the visitor of the page. Make it fully ADA and WCAG Compliant. |
| 15 |
Generate a slick landing page that discusses the history of Python and what it is commonly used for throughout history and today. At the bottom of the page include a list of links to pages of examples that I will provide, just have placeholder links for now. Make it a dark blue color scheme and a space theme. Include animations to make it look modern and keeps the visitor engaged and interactive. |
| 14 |
Run interactive python directly in a webpage on the client side, not the server side. Without special formatting Python code. Also, allow input() commands to function properly. Previous attempts keep failing in the browser with errors like...
File " |
| 13 |
Run interactive python directly in a webpage on the client side, not the server side. Without special formatting Python code. Also, allow input() commands to function properly. Previous attempts keep failing in the browser. |
| 12 |
Run interactive python directly in a webpage on the client side, not the server side. Without special formatting Python code. Also, allow input() commands to function properly. |
| 11 |
Run interactive python directly in a webpage on the client side, not the server side. Without special formatting Python code. |
| 10 |
Generate a basic loading animation. |
| 9 |
Generate a basic landing page in HTML with the appropriate JavaScript to display an IT resume geared towards software engineering with sections like a place to put an image of myself, professional summary, technical skills, tools and platforms, work experience, education, certifications, clients and notable work, publications, and a projects. Include fun features like parallax scrolling, responsive design with CSS break-point placeholders at (320px, 480px, 640px, 768px, 1024px and 1200px), Floating particles that animate across the hero section, Cursor trail effect with smooth following circles, Fade-in animations triggered as you scroll down the page, 3D tilt effect on skill cards when you hover over them, Hover transformations on all interactive cards, Ripple click effect on project cards, Typing animation for the hero title, Smooth transitions throughout and any other features that I haven't thought of that might help the content pop out and engage with the visitor of the page. Use a color scheme of dark blues and a theme of space, include stars and galaxy's in the background. Make it fully ADA and WCAG Compliant. Include a very small rocket ship flying around in the background. |
| 8 |
Generate a fun space themed coming soon page for a parked website. Make the graphics look futuristic and slick, don't make it look like a cartoon. Please include some of our solar systems planets and please use real images of planets. Don't include any form objects and input fields. Include a countdown as well. |
| 7 |
Generate a fun space themed coming soon page for a parked website. Make the graphics look futuristic and slick, don't make it look like a cartoon. Please include some of our solar systems planets and make them look real. Don't include any form objects and input fields. Include a countdown as well. |
| 6 |
Generate a basic landing page in HTML with the appropriate JavaScript to display an IT resume geared towards software engineering with sections like a place to put an image of myself, technical skills, work experience, education and a projects list. Include fun features like parallax scrolling, responsive design with CSS break-point placeholders at (320px, 480px, 640px, 768px, 1024px and 1200px), Floating particles that animate across the hero section, Cursor trail effect with smooth following circles, Fade-in animations triggered as you scroll down the page, 3D tilt effect on skill cards when you hover over them, Hover transformations on all interactive cards, Ripple click effect on project cards, Typing animation for the hero title, Smooth transitions throughout and any other features that I haven't thought of that might help the content pop out and engage with the visitor of the page. Use a color scheme of dark blues and a theme of space, include stars and galaxy's in the background. |
| 5 |
Generate a very basic parking page for a website. That does not have form input field objects. That does include a cool image implying it is under construction. Include a brief description of how this site will include Python snippets and what Python is and some history. Use a Blue Color Scheme and make the images relate to space. |
| 4 |
Generate a very basic parking page for a website. |
| 3 |
Generate a very basic parking page for a website. |
| 2 |
Generate a basic landing page in HTML with the appropriate JavaScript to display an IT resume geared towards software engineering with sections like a place to put an image of myself, technical skills, work experience, education and a projects list. Include fun features like parallax scrolling, responsive design with CSS break-point placeholders at (320px, 480px, 640px, 768px, 1024px and 1200px), Floating particles that animate across the hero section, Cursor trail effect with smooth following circles, Fade-in animations triggered as you scroll down the page, 3D tilt effect on skill cards when you hover over them, Hover transformations on all interactive cards, Ripple click effect on project cards, Typing animation for the hero title, Smooth transitions throughout and any other features that I haven't thought of that might help the content pop out and engage with the visitor of the page. Use a color scheme of Blues and a theme of space. |
| 1 |
Generate a basic landing page in html with the appropriate Javascript to display an IT resume geared towards software engineering with fun features like parallax scrolling and any other features that I haven't thought of that might help the content pop out and engage with the visitor of the page. |