Jupiter Uranus Mars Earth

AI
Generated
Templates

A Collection of Templates Generated Using Claude-AI

Architect Code

These are various templates that I generated using Claude-AI and the prompts that I used to generate them. Click on each template to view exactly how they were generated with Claude-AI without me modifying them in any way. In a real-world scenario, many of these templates would be used as a framework for building a real web page. Real work such as branding, fine tuning, bug fixing for animations and browser compatibility and adding custom tailored content would be necessary for using these templates. Use these prompts to give you ideas of how to custom tailor your own prompts for your own needs and start generating your own templates today using Claude-AI.

Template Prompt
Template 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.

Template 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.

Template 16

Generate a slick, futuristic themed project landing page that includes several sections...

  1. A history of the Django Framework, including why it was developed, who created it, major developments in each major version that was released and when they were released.
  2. What companies commonly use Django today and what they use it for.
  3. The different ways Django can be used, and a detailed description of what they are and how they are used... such as the Django REST Framework, The Browsable API, Less common GraphQL with (graphene-django), SOAP API with Django, The Django CMS, The Debug Toolbar, Django Channels, Django Signals, Django Forms, Django Templates, Django URLs, Reverse URLs and Namespaces, Django Views, Django Models, The Django Admin Panel, Building PDF's with Django Templates, Security in Django, The Django CTE Package (django-cte), The Django Extensions Package (django-extensions), The Django Pillow Package (Pillow), The Django Filter Package (django-filter), The Django Environ Package (django-environ), Standard uses with PostgreSQL and the (psycopg2 or psycopg3) packages, less common uses such as MySQL, MSSQL, Oracle, MongoDB and other NoSQL Databases, Uses with Redis for Caching, Uses with Celery for Async Tasks, Uses with Gunicorn for Delployment/Hosting on Production Servers. Various Frontend Frameworks used in conjunction with Django such as React.js, Angular.js and Vue.js.
  4. Include statistics on how many developers use Windows, Mac and Linux/Ubuntu for development machines with Django projects and additional statistics of how many host on the same kind of servers for Django projects. Include additional statistics of how many developers use Docker Containers for development vs non-containerized projects.
  5. A section that provides a link to various sub-pages of my website with a "lorum ipsum" text placeholder for the description of each of those pages that I will add to later.

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.

Template 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.

Template 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 "", line 1, in OSError: [Errno 29] I/O error AttributeError: __js_input__ TypeError: int() argument must be a string, a bytes-like object or a real number, not 'coroutine' :6: RuntimeWarning: coroutine '_custom_input' was never awaitedRuntimeWarning: Enable tracemalloc to get the object allocation traceback Please ensure these errors do not persist.

Template 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.

Template 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.

Template 11

Run interactive python directly in a webpage on the client side, not the server side. Without special formatting Python code.

Template 10

Generate a basic loading animation.

Template 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.

Template 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.

Template 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.

Template 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.

Template 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.

Template 4

Generate a very basic parking page for a website.

Template 3

Generate a very basic parking page for a website.

Template 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.

Template 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.