CSS Template Test

Modular Design Testing

This is a test page for the new modular design. Here you can see how all elements look.

Current State: Logged In User

You can see the user avatar in the header. Clicking on it will take you to the profile page. The avatar shows the first letter of the email address (S for shalom@specifys.ai).

Test different emails:

Icon Buttons Collection

Look at the bottom-right corner of the page - you'll see a collection of icon buttons:

↑ Arrow - Scroll to top (rotates based on scroll position)
× Close - Close button (red on hover)
✓ Check - Check button (green on hover)
⚙ Settings - Settings button (gray on hover)
? Help - Help button (blue on hover)
🔔 Bell - Notifications button (yellow on hover)

All buttons have hover effects and are responsive. They're defined in assets/css/components/icons.css and can be used throughout the site.

Typography System

The site now has a comprehensive font system with multiple font families and utility classes:

Font Families:

Primary (Montserrat) - Main brand font
Secondary (Inter) - Body text and UI
UI (Roboto) - Buttons, forms, interface
Display (Poppins) - Headings and large text
Monospace - Code and technical content

Typography Classes:

Heading 1 - Display Font

Heading 2 - Display Font

Heading 3 - Display Font

Body Large - Secondary Font

Body Base - Secondary Font

Body Small - Secondary Font

Button Text - UI Font

Caption - UI Font

Code Text - Monospace Font

Utility Classes:

Use classes like .font-primary, .text-xl, .font-bold, .leading-relaxed for custom typography.

Table Styles System

The site now includes comprehensive table styling with multiple variants, responsive design, and dark theme support.

Basic Table:

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	User	Pending
Bob Johnson	bob@example.com	Moderator	Inactive

Striped Table with Badges:

Product	Category	Price	Stock	Tags
Laptop Pro	Electronics	$1,299	15	Featured In Stock
Wireless Mouse	Accessories	$29	0	Low Stock
Gaming Keyboard	Electronics	$89	8	New In Stock

Small Table with Images:

Name	Department	Last Login
John Doe	Engineering	2 hours ago
Jane Smith	Marketing	1 day ago
Bob Johnson	Sales	3 days ago

Table with Pagination:

ID	Title	Author	Date
1	Getting Started with CSS	John Doe	2024-01-15
2	JavaScript Best Practices	Jane Smith	2024-01-14
3	React Hooks Guide	Bob Johnson	2024-01-13
Showing 1-3 of 25 results

Features:

✅ Responsive design with horizontal scroll
✅ Multiple variants (striped, bordered, borderless)
✅ Different sizes (small, normal, large)
✅ Status indicators and badges
✅ Action buttons with multiple styles (primary, secondary, success, warning, danger, outline, ghost)
✅ Pagination controls
✅ Dark theme support
✅ Sortable headers
✅ Loading and empty states
✅ Consistent button styling matching site design

Mermaid Charts Integration

The site now includes built-in support for Mermaid diagrams with dark theme support and responsive design.

Flowchart Example:

Process Flow

Sequence Diagram Example:

User Interaction

Pie Chart Example:

Data Visualization

Interactive Chart Editor:

Features:

✅ Dark/Light theme support
✅ Responsive design
✅ Interactive editor
✅ Multiple chart types (flowchart, sequence, gantt, class, pie, state)
✅ Error handling
✅ Loading states

Buttons

Different Button Sizes

Different Button Styles

Buttons with Icons

Loading Button

Text and Typography

This is a regular paragraph with English text. The quick brown fox jumps over the lazy dog.

This is secondary text.

This is muted text.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Code

Here's an example of code: console.log('Hello World');

function hello() {
    console.log('Hello World');
    return true;
}

Lists

First item
Second item
Third item

First step
Second step
Third step

Links

Here's a regular link within text.

Quote

"Design is not how it looks, but how it works."