@wilsr700/emotion-graph/README.md

A customizable, interactive emotion graph component for visualizing customer satisfaction across journey stages

# Customer Journey Map Template

A clean, modern, and interactive visual journey map template created with HTML, CSS, and JavaScript. Features both light and dark modes.

## Features

- **Responsive Design**: Works on desktop and mobile devices
- **Interactive Elements**: Double-click any text to edit it
- **Visual Feedback**: Hover over sections to highlight related elements
- **Light & Dark Mode**: Toggle between light and dark themes
- **Preference Saving**: Remembers your theme preference for future visits
- **Customizable**: Easy to modify for your specific customer journey

## How to Use

1. Open `index.html` in your web browser to view the journey map
2. Click the theme toggle button in the top-right corner to switch between light and dark modes
3. Double-click on any text to edit it (headings, paragraphs, list items)
4. Customize the content to match your customer's journey
5. Hover over sections to see related touchpoints across the journey

## Structure

The journey map is structured with the following components:

- **Persona**: Customer profile at the top
- **Stages**: Key phases of the customer journey (Awareness → Advocacy)
- **Touchpoints**: Where and how customers interact with your product/service
- **Actions**: What customers do during each stage
- **Emotions**: How customers feel throughout the journey
- **Opportunities**: Potential improvements for each stage

## Theme Options

The template supports two themes:

- **Light Mode**: A clean, bright theme for standard use or printing
- **Dark Mode**: A dark theme that's easier on the eyes, especially in low-light environments

The theme selection is automatically saved in your browser's local storage, and the template will respect your system's color scheme preference if you haven't made a selection.

## Customization

You can further customize the template by:

- Editing `styles.css` to change colors, spacing, and visual elements
- Modifying the theme variables in the CSS to create custom themes
- Modifying `index.html` to add or remove sections as needed
- Extending `script.js` to add more interactive features

## Credits

This template was created as a static HTML journey map builder. It uses:

- Font Awesome for icons
- Modern CSS techniques including CSS variables, Flexbox and CSS Grid
- Vanilla JavaScript for interactivity and theme switching 

<button class="action-button-mini export-data" data-tooltip="Export Journey Data">
    <i class="fas fa-file-export"></i>
</button>