A modern, animated, single-page website for Explainur — a digital marketing education brand featuring 8 free browser-based tools, dark/light mode, and optimized for SEO, performance, and accessibility.
Open index.html in any modern web browser to view the site.
Digital Marketing/
├── index.html # Main HTML file with all sections
├── styles.css # Complete styling with theming support
├── script.js # All tools logic, animations, interactivity
├── assets/
│ └── logo.png # Explainur logo (PNG format)
└── README.md # This documentation
- Meta Tag Generator - Generate SEO-optimized meta tags with OG support
- Word Counter & Reading Time - Analyze text with real-time statistics
- UTM Link Builder - Create trackable campaign URLs
- Social Media Character Counter - Platform-specific limits (Twitter, Instagram, LinkedIn, Facebook)
- Color Palette Generator - Create harmonious 5-color schemes
- Open Graph Preview - Preview social sharing cards
- Headline Analyzer - Score headlines for engagement
- Lorem Ipsum Generator - Generate placeholder text
- 🌓 Dark/Light mode toggle with localStorage persistence
- 📱 Fully responsive mobile-first design
- ✨ Smooth scroll-triggered animations
- 🎨 Particle background animation (performance-optimized)
- 🎯 Animated statistics counters
- 🔄 Auto-rotating testimonials carousel
- 💫 Glassmorphism card effects
- 🔘 Magnetic cursor effects on CTAs
- Comprehensive meta description (150-160 characters)
- Open Graph tags for social sharing
- Twitter Card meta tags
- Canonical URL
- Structured data (JSON-LD) for Organization schema
- Proper heading hierarchy (H1 → H2 → H3)
- Semantic elements:
<header>,<nav>,<main>,<section>,<article>,<footer> - ARIA landmarks and labels throughout
- Breadcrumb-ready structure
- Skip-to-content link
- Full keyboard navigation support
- ARIA labels and roles
- Focus management in modals
- Color contrast ratios meet AA standards
- Reduced motion support (
prefers-reduced-motion) - Screen reader optimized
- LCP (Largest Contentful Paint): Optimized with preconnect hints and font display swap
- FID (First Input Delay): Minimal JavaScript, deferred loading
- CLS (Cumulative Layout Shift): Fixed dimensions on images, stable layouts
- Font preconnect for faster Google Fonts loading
- Lazy loading on all images below the fold
- Intersection Observer for animations (only animate visible elements)
- Debounced scroll and input events
- Canvas animations pause when not visible
- Single CSS file (no external frameworks)
- Deferred JavaScript loading
- No external dependencies
- Throttled event listeners
- RequestAnimationFrame for smooth animations
- HTML: ~15KB
- CSS: ~12KB (gzipped)
- JS: ~18KB (gzipped)
- Total: ~45KB critical path
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
- Mobile Safari (iOS 13+)
- Chrome Mobile (Android 10+)
- HTML5 - Semantic markup
- CSS3 - Custom properties, Grid, Flexbox, backdrop-filter
- Vanilla JavaScript - ES6+ features, no frameworks
- Canvas API - Particle animations
- Intersection Observer API - Scroll animations
- Mobile: 0-767px
- Tablet: 768px-1023px
- Desktop: 1024px+
- Generates complete meta tag sets
- Includes Open Graph and Twitter Card tags
- One-click copy to clipboard
- Real-time word count
- Character count (with/without spaces)
- Sentence count
- Reading time estimation (200 WPM)
- Required: URL, Source, Medium
- Optional: Campaign, Content
- URL-encoded parameters
- Copy-ready output
- Platform-specific limits
- Visual warnings at 20 chars remaining
- Error state when over limit
- Harmonious color generation
- HSL-based color math
- One-click hex code copying
- Keyboard accessible
- Real-time preview updates
- Facebook-style card layout
- Title, description, URL inputs
- Score: 0-100 scale
- Word count analysis (optimal: 6-12)
- Number detection bonus
- Power words counter
- Emotional word detection
- Generate paragraphs, words, or sentences
- 1-50 count range
- Copy to clipboard
- Touch-friendly button sizes (48px minimum)
- Hamburger menu with smooth animation
- Swipe-friendly carousel
- Optimized particle count on mobile (15 vs 25)
- Responsive images with srcset-ready structure
- Viewport-optimized typography (clamp())
- Tab order follows visual layout
- All interactive elements keyboard accessible
- Modal trap focus
- Escape key closes modals
- Descriptive alt text
- ARIA labels on icons
- Live regions for dynamic content
- Skip links
- High contrast mode support
- Focus indicators on all interactive elements
- Text zoom support (up to 200%)
- No information conveyed by color alone
# Simply open in browser
start index.html
# Or use a local server
python -m http.server 8000
npx serve .- Update absolute URLs in meta tags (og:url, canonical)
- Verify logo.png displays correctly
- Update social links in footer
- Configure newsletter form endpoint
- Add actual article images
- Set up analytics (Google Analytics 4)
- Test all tools functionality
- Performance: 95+
- Accessibility: 100
- Best Practices: 100
- SEO: 100
- No external tracking scripts
- No cookies (except theme preference in localStorage)
- All data processing client-side
- No data sent to servers
- Secure external links (noopener noreferrer)
© 2026 Explainur. All rights reserved.
This is a static website. To modify:
- Edit HTML in
index.html - Update styles in
styles.css - Modify tool logic in
script.js - Test in multiple browsers
- Validate with W3C validators
For issues or questions, visit explainur.com
Built with ❤️ for digital marketers everywhere