{% extends "base.html" %} {% block title %}Analysis Results - {{ context.site_info.title }}{% endblock %} {% block content %}

Analysis Results

Create AI Prompt Home

Prompt Builder

Create and save prompts for your rebuild

Saved Prompts

Create New Prompt

{{ context.site_info.title }}

{{ context.site_info.url }}

Analyzed on {{ context.site_info.analyzed_at.split('T')[0] }}

{% if context.site_info.screenshot %} Website screenshot {% endif %}
{% if context.site_info.screenshot %}

Screenshot Color Detection

{% if context.site_info.screenshot_type == 'real' %} {% else %} {% endif %}
{% if context.site_info.screenshot_type == 'real' %}

Real Website Screenshot

This is an actual screenshot of the website. Color detection will capture real colors from the site.

{% else %}

Placeholder Screenshot

Could not capture real screenshot. This is a placeholder with sample colors. For best results, try refreshing or contact support.

{% endif %}

Click on the color wheel to add colors to your palette

Screenshot (Click to capture colors)

How to use Color Detection:

  1. Click "Enable Color Picker" to activate detection mode
  2. Move your mouse over the screenshot to preview colors
  3. Click on any area to capture that color
  4. Use the Color Wheel to add custom colors
  5. Save your palette for later use

Captured Colors ()

Current Palette

Saved Palettes

{% endif %}

Layout

Dimensions:

{{ context.layout.normalized_width }}px × {{ context.layout.normalized_height }}px

Sections:
{% for section in context.layout.sections %}
{{ section.type }}

{{ section.content_preview }}

{% if section.pattern %}

Pattern: {{ section.pattern }}

{% endif %}
{% endfor %}

Colors

Background:
{% for color in context.design.colors.background %}
{{ color }}
{% endfor %}
Text:
{% for color in context.design.colors.text %}
{{ color }}
{% endfor %}
Accent:
{% for color in context.design.colors.accent %}
{{ color }}
{% endfor %}

Suggested Tailwind Colors

{% if context.design.colors.get('suggested_tailwind') %}

Primary: {{ context.design.colors.suggested_tailwind.primary }}

Secondary: {{ context.design.colors.suggested_tailwind.secondary }}

Accent: {{ context.design.colors.suggested_tailwind.accent }}

Background: {{ context.design.colors.suggested_tailwind.background }}

Text: {{ context.design.colors.suggested_tailwind.text }}

{% else %}

No suggested Tailwind colors available. Use the extracted colors for your design.

{% endif %}

Typography

End of year HSA/FSA reminder

The end of year gets busy for us all, but don't forget to use those flex dollars before time runs out! HSA/FSA dollars can be applied to exam costs and materials including contacts, glasses, sunglasses, and more!

Font Family:

{{ context.design.typography.fonts[0] if context.design.typography.fonts else 'Default font' }}

Headings:
{% for heading, style in context.design.typography.headings.items() %}
{{ heading }}

Size: {{ style.fontSize }}, Weight: {{ style.fontWeight }}

{% endfor %}
Body Text:

Size: {{ context.design.typography.body.paragraph.fontSize }}, Weight: {{ context.design.typography.body.paragraph.fontWeight }}

Typography

Detected Fonts

{% for font in context.design.typography.fonts %}

{{ font }}

{% endfor %}
{% if context.design.typography.get('suggested_tailwind') %}

Suggested Tailwind Typography

Font Family: {{ context.design.typography.suggested_tailwind.font_family }}

Headings
{% for heading, classes in context.design.typography.suggested_tailwind.headings.items() %}

{{ heading }}: {{ classes }}

{% endfor %}
Body Text

Body: {{ context.design.typography.suggested_tailwind.body }}

{% else %}

Tailwind Typography

Use the detected fonts to guide your Tailwind typography choices

{% endif %}

Images ({{ context.images|length if context.images else 0 }})

Describe Image Placement

Be specific about section, positioning, sizing, and styling requirements.

Placement Examples:

{% if context.images %} {% for img in context.images %}
{{ img.alt if img.alt else 'Image' }}

Click to describe placement

Type: {{ img.type if img.type else 'regular' }}

{% if img.alt %}

Alt: {{ img.alt }}

{% endif %}

Placement:

{% endfor %} {% else %}
No images found on this website
{% endif %}
{% if context.images %} {% for img in context.images %} {% if not img.type or img.type == 'regular' %}
{{ img.alt if img.alt else 'Image' }}

Click to describe placement

{% if img.alt %}

Alt: {{ img.alt }}

{% endif %} {% if img.width or img.height %}

Size: {{ img.width }}x{{ img.height }}

{% endif %}

Placement:

{% endif %} {% endfor %} {% else %}
No regular images found on this website
{% endif %}
{% if context.images %} {% for img in context.images %} {% if img.type and (img.type == 'background' or img.type == 'css-background') %}
{{ img.alt if img.alt else 'Background image' }}

Click to describe placement

Type: {{ img.type }}

{% if img.element_tag %}

Element: {{ img.element_tag }}

{% endif %}

Placement:

{% endif %} {% endfor %} {% else %}
No background images found on this website
{% endif %}
{% if context.content and context.content.text %}

Text Content

{% if context.content.text.headings %}

Headings

{% for level in range(1, 7) %} {% set heading_key = 'h' + level|string %} {% if heading_key in context.content.text.headings and context.content.text.headings[heading_key] %}

{{ heading_key|upper }}

    {% for heading in context.content.text.headings[heading_key] %}
  • {{ heading }}
    • {% endfor %}
{% endif %} {% endfor %}
{% endif %} {% if context.content.text.navigation %}

Navigation

    {% for item in context.content.text.navigation %}
  • {{ item.text }} {{ item.href }}
    • {% endfor %}
{% endif %} {% if context.content.text.paragraphs %}

Paragraphs

{% for paragraph in context.content.text.paragraphs[:10] %}

{{ paragraph }}

{% endfor %} {% if context.content.text.paragraphs|length > 10 %}

...and {{ context.content.text.paragraphs|length - 10 }} more paragraphs

{% endif %}
{% endif %}
{% endif %}

Image Placements ( described)

Image Implementation Notes

  • Download locally: Use wget [image-url] -P assets/images/ to download each image
  • Avoid SSL issues: Store all images in assets/images/ directory
  • Update paths: Change external URLs to local paths like assets/images/filename.jpg
  • Follow placements: Use the descriptions below for accurate positioning and styling
No image placements described yet. Click on images in the Images section above to add placement descriptions.

Rebuild Specifications

Project Structure

This is a Tailwind CDN website using PHP partials for header, nav, and footer. Build only one page at a time, including any necessary partials (header.php, nav.php, footer.php) that are required for that specific page. Every page should be built using sections to enable more efficient design and modular development.

Template Structure

{% if context.asr and context.asr.template_structure %}
Generated by OpenAI Vision Analysis
{% if context.asr.raw_response %}
{{ context.asr.raw_response }}
{% else %} {% for structure in context.asr.template_structure %} {% if loop.first %}
├─ {{ structure }}
{% elif loop.last %}
└─ {{ structure }}
{% else %}
├─ {{ structure }}
{% endif %} {% endfor %} {% endif %}
{% if context.asr.layout_analysis %}
Layout Analysis:
Layout Type: {{ context.asr.layout_analysis.layout_type }}
Total Sections: {{ context.asr.layout_analysis.total_sections }}
Navigation Style: {{ context.asr.layout_analysis.navigation_style }}
{% if context.asr.layout_analysis.has_overlay_header %}
Header: Overlays hero section
{% endif %}
{% endif %} {% elif context.layout.sections %}
Using legacy analysis (OpenAI Vision not available)
{% for section in context.layout.sections %} {% if loop.first %}
├─ {{ section.type|title }} {% if section.pattern %} ({{ section.pattern|title }}) {% endif %} {% if section.has_overlay_header %} (Transparent, Absolute Positioning, Overlaps Hero) {% endif %}
{% elif loop.last %}
└─ {{ section.type|title }} {% if section.pattern %} ({{ section.pattern|title }}) {% endif %}
{% else %}
├─ {{ section.type|title }} {% if section.pattern %} ({{ section.pattern|title }}) {% endif %} {% if section.has_overlay_header %} (Full Height, Background Image) {% endif %}
{% endif %} {% endfor %}
{% else %}

No layout sections detected. The template structure will be determined during analysis.

{% endif %}

Selected Colors ({{ domain }})

Captured from Screenshot

No colors captured yet. Use the color picker tool above to capture colors from the screenshot.
• Source: localStorage

Typography

Detected Fonts

{% if context.design.typography.fonts %}
{% for font in context.design.typography.fonts[:5] %}
{{ font }}
{% endfor %}
{% else %}
No fonts detected. Use standard Tailwind font classes like font-sans, font-serif, or font-mono.
{% endif %}

Quick Implementation Notes

  • Layout: Use {{ context.tailwind_rebuild_notes.layout }}
  • Responsive: Mobile-first approach with Tailwind breakpoints (sm:640px, md:768px, lg:1024px, xl:1280px)
  • Components: Build reusable PHP partials for header.php, nav.php, footer.php
  • Colors: Use captured colors above with Tailwind's arbitrary value syntax like bg-[#hexcode]
  • Sections: Each content section should be modular and independently styled
Create AI Prompt
{% endblock %} {% block scripts %} {% endblock %}