=== Dear Timeline (Best Vertical & Horizontal Timeline) ===
Contributors: ankit07721
Tags: timeline, vertical timeline, horizontal timeline, history, roadmap, responsive
Requires at least: 5.6
Tested up to: 7.0
Requires PHP: 7.4
Stable tag: 1.3.2
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

A premium, responsive timeline plugin for WordPress with **three layout modes**: Horizontal (scroll-snap), Classic (premium zigzag), and Flat (modern cards). Centralized visual editor with live preview, plus inline add/edit/delete from the timeline itself.

== Description ==

DearTimeline lets you create beautiful, responsive timelines with zero bloat. Unlike other plugins that ship heavy JS slider libraries (Slick.js, Owl Carousel), DearTimeline uses pure CSS techniques — **CSS Scroll Snap** for the horizontal layout and **CSS Flexbox/Grid** for vertical layouts — keeping your pages lightning-fast.

### Layouts

*   **Horizontal** `[deartimeline layout="horizontal"]` — a scroll-snap-powered horizontal track with premium cards, calendar date boxes, color-coded dot markers, and arrow navigation.
*   **Flat** `[deartimeline layout="flat"]` — modern side-by-side image and text cards alternating around a thin vertical spine with scroll-reveal animations.

### Premium Admin Experience

DearTimeline features a completely redesigned admin interface that lets you manage events directly from a live preview:

*   **Live Preview First** — the "Live Desktop Preview" metabox sits at the top of the editor, refreshed on every save so you see changes instantly without leaving the page.
*   **Inline Quick-Add** — a pulsing "+" button on the timeline spine opens a premium glassmorphism modal for adding new events in seconds.
*   **Inline Edit/Delete** — hover any event card to reveal edit (✎) and delete (×) buttons. Edit opens the same premium modal pre-filled; delete removes with a confirmation prompt.
*   **Premium Modal** — the quick-add/edit modal features a gradient glass header, elastic slide-up animation, uppercase labels with smooth focus rings, custom scrollbar, and a gradient submit button.

### Core Features

*   **Three Layouts**: Horizontal (scroll-snap), Classic (zigzag), Flat (modern cards) — each with its own distinct premium design.
*   **Classic Layout Redesign**: Clean calendar badge with colored month strip, 2px gradient spine line, 14px refined dot with hover glow, white card with 3px colored accent bar on hover, and staggered entrance animations.
*   **Per-Event Colors**: Custom background color applied to calendar date boxes in all layouts (flat, classic, horizontal).
*   **Centralized Workspace**: Manage titles, dates, descriptions, featured images, and custom dimensions from a single dashboard.
*   **Integrated Live Preview**: Embedded preview refreshes on save — see your timeline update in real time.
*   **Scroll Reveal Animations**: Vertical items fade and slide in via IntersectionObserver — choose from fade, flip, or zoom.
*   **Precision Image Controls**: Custom width and height per event image with `object-fit: cover`.
*   **CSS Scroll Snap**: Horizontal layout uses native browser scroll-snapping — zero JavaScript slider libraries.

### Best Use Cases

*   **Company History** — showcase your brand's journey with the horizontal layout for decades-long stories or classic for detailed entries.
*   **Product Roadmaps** — keep customers informed about upcoming features and past milestones.
*   **Personal Portfolios** — display career progression or life story in a visually engaging way.
*   **Event Schedules** — multi-day conferences or workshops with swipeable horizontal agenda.
*   **Step-by-Step Guides** — any content that benefits from a left-to-right or top-to-bottom narrative.

== Installation ==

1. Upload the plugin files to the `/wp-content/plugins/deartimeline` directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress.
3. Use the `[deartimeline]` shortcode in any page or post.

== Usage ==

### Basic Shortcode
`[deartimeline]` (displays Flat layout by default)

### Switching Layouts
- **Horizontal Layout**: `[deartimeline layout="horizontal"]` — scrollable cards on a horizontal spine, CSS Scroll Snap, left/right nav buttons.
- **Flat Layout**: `[deartimeline layout="flat"]` — modern side-by-side cards with image and text.

### Animations (Vertical layouts only)
Choose from professional entrance effects:
- `[deartimeline animation="fade-in"]` (Default)
- `[deartimeline animation="flip-up"]`
- `[deartimeline animation="zoom"]`

== Screenshots ==

1. Live Desktop Preview at the top of the editor.
2. Premium quick-add modal with glassmorphism design.
3. Classic layout — premium zigzag with calendar badges and accent bars.
4. Horizontal timeline layout with arrow navigation and scroll-snap cards.

== Changelog ==

= 1.3.2 =
* **Admin UI Overhaul**: Removed "Event Styling" metabox; "Live Desktop Preview" moved to top priority; inline "+" button with "Add New Event" label on timeline spine; inline edit (✎) and delete (×) action buttons on hover for both flat and classic layouts.
* **Quick-Add/Edit Modal**: Premium glassmorphism modal with gradient header, elastic slide-up animation, uppercase labels, smooth focus rings, custom scrollable body, gradient submit button with micro-interactions.
* **Background Color Everywhere**: Custom event background color now applies to date boxes in all three layouts — flat, classic, and horizontal.
* **Horizontal Layout Polish**: Color applied to calendar month strip; `--tsp-bg` variable set per-item.
* **Enhanced Hover Effects Across All Layouts**: Bouncy card transforms, gradient accent strips, refined shadow stacks.

= 1.3.1 =
* New **Horizontal Layout**: `[deartimeline layout="horizontal"]` — a fully responsive, scroll-snap-powered horizontal timeline. Zero JS slider libraries: uses CSS Flexbox + native Scroll Snap for buttery-smooth mobile swiping and desktop arrow navigation.
* Horizontal cards feature a premium gradient accent bar, calendar-style date box (month/day/year), and per-event color-coded dot markers on a gradient spine line.
* Left/Right navigation buttons with smart disabled state (hidden at start/end of track), implemented in lightweight Vanilla JS with requestAnimationFrame throttling.
* Enhanced card design across all layouts: refined shadows, smoother hover transitions, and consistent min-height for visual balance.

= 1.3.0 =
* Complete flat layout overhaul: modern card-based UI with white cards, rounded corners, and subtle shadows.
* New CSS variables system for easy customization.
* Circular dot markers with indigo accent border instead of square nodes.
* Pill-shaped year separator labels.
* Soft gray central line (configurable).
* Responsive mobile layout: single-sided spine with stacked content.
* Scroll reveal animations via IntersectionObserver.
* Improved zigzag alternation with reliable flexbox ordering.

= 1.2.0 =
* Integrated Featured Image selector into the central meta box.
* Added custom Width and Height controls for event images.
* Added "Live Desktop Preview" directly to the Event Edit screen.
* Refactored frontend popup to support batch event creation.

= 1.1.0 =
* Improved zigzag layout with straight-line alignment.
* Standardized image heights (300px).
* Fixed text domain issues and compliance headers.

= 1.0.0 =
* Initial release.

== Frequently Asked Questions ==

= How do I use the shortcode? =
Simply add `[deartimeline]` to any page or post. By default, this will display all your published timeline events in the Flat layout.

= Can I change the layout? =
Yes! You can choose between three professional styles:
- **Horizontal**: `[deartimeline layout="horizontal"]` — scrollable card row with arrow navigation. Perfect for mobile-first, swipeable timelines.
- **Classic**: `[deartimeline layout="classic"]` — premium vertical zigzag with refined calendar badges, colored accent bars, and animated entrance.
- **Flat**: `[deartimeline layout="flat"]` — modern card-based layout with side-by-side image and text panels.

= Are there any animation options? =
For vertical layouts, use the `animation` parameter to pick your entrance effect:
- `[deartimeline animation="fade-in"]` (Subtle)
- `[deartimeline animation="flip-up"]` (Dynamic)
- `[deartimeline animation="zoom"]` (Engaging)

= How do I add or edit events from the admin? =
In the WordPress admin, open a timeline event. The "Live Desktop Preview" at the top shows your timeline. Click the "+" button on the spine to add a new event, or hover any card to reveal the edit (✎) and delete (×) buttons. The premium modal handles all CRUD operations with a clean, responsive form.

= Where do I set the image size? =
On the event edit screen, look for the "Image Width" and "Image Height" fields below the title. You can use pixels (e.g., 300px) or percentages (e.g., 100%).

= How does the horizontal layout work without JavaScript? =
The horizontal timeline uses native CSS `scroll-snap-type: x mandatory` and `overflow-x: auto`. The scroll track works on any device without JavaScript — scroll with a trackpad, swipe on mobile, or use the arrow keys. The Vanilla JS layer (for left/right buttons) enhances but never replaces the core scroll experience.

== Upgrade Notice ==

= 1.3.2 =
Complete classic layout premium redesign, admin UI overhaul with inline add/edit/delete from the live preview, premium quick-add modal, and background color applied to date boxes in all layouts. See changelog for full details.