Response Details (ID: 100 - UIGEN-X-4B-0729)

Text Before HTML:

We are building a hyper-interactive data visualization interface for genomic sequences.
 The design should be inspired by the provided template but tailored for a genomic data visualization tool.
 We need deep zoom, custom filtering, and multi-layer annotations.

 Key features to include:
 1. A main genomic sequence viewer (like a genome browser) with the ability to zoom in and out.
 2. Custom filtering options (e.g., by gene, variant, annotation type).
 3. Multi-layer annotations (e.g., genes, regulatory elements, variants) that can be toggled.

 We'll use:
  - Tailwind CSS for styling (with custom colors and fonts as per the template's quality).
  - A genome browser component (we can use a library like `uiGenome` or `Jbrowse` but for simplicity, we'll use a placeholder and focus on the UI).
  - We'll structure the page with a header, main content area (with the genomic viewer and controls), and a sidebar for filters.

 Color Scheme:
  - We'll choose a scientific color scheme: blues, greens, and purples for annotations, with a clean white background.
  - Accent colors: We'll use a teal (#0D9488) and a purple (#7E22CE) for highlights.

 Layout:
  - The page will have a fixed header with the title and some navigation.
  - The main content will be split into two columns: 
        Left: Genomic viewer (taking 2/3 of the width on large screens, full on small)
        Right: Sidebar with filters and annotation controls (1/3 on large, hidden behind a button on small)

  - The sidebar will have:
        * A search bar for genes, variants, etc.
        * Toggle switches for different annotation layers (genes, regulatory, variants, etc.)
        * A panel for custom filtering (e.g., by chromosome, position range, etc.)

  - We'll also have a button to toggle the sidebar on mobile.

  - The genomic viewer will be a placeholder div for now, but we can add some mockup lines to represent the genome.

 Steps:

  1. Set up the HTML structure with Tailwind via CDN.
  2. Define custom colors and fonts in the style tag (inspired by the template but adjusted for our use case).
  3. Create a fixed header with the title and a button to toggle the sidebar on mobile.
  4. Create a main content area with two columns (genomic viewer and sidebar).
  5. In the sidebar, add filter controls and annotation toggles.
  6. Add a button to toggle the sidebar on mobile.

 Note: We are not implementing the actual genome browser or the logic, just the UI.

 Let's code accordingly.


# Hyper-Interactive Genomic Sequence Visualization

I'll create a sophisticated genomic visualization interface with deep zoom capabilities, custom filtering, and multi-layer annotations using Tailwind CSS.

Generated HTML Page:

Text After HTML:

## Key Features of the Genomic Visualization Interface

1. **Interactive Genomic Viewer**
   - Dark-themed visualization area with gradient background
   - Simulated genomic sequence with base pair markers
   - Annotation bars representing different feature types
   - Gene features with hover effects and selection highlighting

2. **Deep Zoom Functionality**
   - Zoom controls in the bottom right corner
   - Position navigation input field
   - Zoom in/out and expand to full view buttons

3. **Multi-Layer Annotations**
   - Toggleable annotation layers (genes, regulatory elements, variants)
   - Color-coded feature types (blue for genes, purple for regulatory, red for variants)
   - Pulsing animation for active annotations

4. **Custom Filtering System**
   - Chromosome selection
   - Position range input
   - Annotation layer toggles
   - Feature type filters (coding, miRNA, introns, UTRs)
   - Recent projects panel

5. **Feature Details Panel**
   - Detailed information about selected features
   - Variant analysis, sequence access, and regulatory analysis options
   - Card-based layout with appropriate icons

6. **Responsive Design**
   - Mobile-friendly layout with collapsible sidebar
   - Adaptive controls for different screen sizes
   - Touch-friendly interface elements

The interface uses a scientific color scheme with blues, purples, and teals that are appropriate for genomic data visualization. The design is clean, modern, and focused on the genomic data with intuitive controls for exploration and analysis.