File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/..//tmpr/../wowZ/tools/index.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
// Include configuration
require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/hero.php';
// Polyfill for tools_hero_html in case hero.php is cached or not updated
if (!function_exists('tools_hero_html')) {
function tools_hero_html($category) {
global $TOOLS_HERO_HEALTH, $TOOLS_HERO_BRANDING, $TOOLS_HERO_STRATEGY, $TOOLS_HERO_FINANCE, $TOOLS_HERO_GROWTH, $TOOLS_HERO_RESOURCES, $TOOLS_HERO_UTILITIES;
switch ($category) {
case 'resources': return $TOOLS_HERO_RESOURCES;
case 'utilities': return $TOOLS_HERO_UTILITIES;
case 'health': return $TOOLS_HERO_HEALTH;
case 'branding': return $TOOLS_HERO_BRANDING;
case 'strategy': return $TOOLS_HERO_STRATEGY;
case 'finance': return $TOOLS_HERO_FINANCE;
case 'growth': return $TOOLS_HERO_GROWTH;
default: return '';
}
}
}
// Ensure BASE_URL is defined
if (!defined('BASE_URL')) {
$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$host = isset($_SERVER['HTTP_HOST']) ? (string)$_SERVER['HTTP_HOST'] : 'localhost';
define('BASE_URL', $scheme . '://' . $host . '/wowX'); // Default fallback
}
// Get current tool from URL, default to null (will load landing page)
$current_tool = !empty($_GET['tool']) ? $_GET['tool'] : null;
// Fallback: derive tool key from friendly URL path when no ?tool= is present
if ($current_tool === null && isset($_SERVER['REQUEST_URI'])) {
$req_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
if (is_string($req_path)) {
$segments = explode('/', trim($req_path, '/'));
if (!empty($segments)) {
$last = end($segments);
if ($last !== 'tools' && $last !== 'wowX' && $last !== '') {
$current_tool = $last;
}
}
}
}
$is_home = ($current_tool === null || $current_tool === 'home');
// Detect overview / landing pages (used to hide embed controls)
$is_landing_page = false;
if ($current_tool && substr($current_tool, -8) === '_landing') {
$is_landing_page = true;
}
$embed_flag = isset($_GET['embed']) ? $_GET['embed'] : null;
$is_embed = ($embed_flag === '1' || $embed_flag === 'true');
$embed_partner = isset($_GET['partner']) ? $_GET['partner'] : null;
$embed_theme = isset($_GET['theme']) ? $_GET['theme'] : 'light';
$embed_attr_style = isset($_GET['attributionStyle']) ? $_GET['attributionStyle'] : 'light';
// Define Navigation Structure
$nav_structure = [
'home' => [
'label' => 'Home',
'icon' => 'home',
'tools' => [
'home' => ['label' => 'Home', 'icon' => 'home', 'desc' => 'Return to Dashboard', 'url' => BASE_URL . '/tools']
]
],
'resources' => [
'label' => 'Resources',
'icon' => 'library_books',
'tools' => [
'resources' => ['label' => 'Infographics', 'icon' => 'perm_media', 'desc' => 'Steal Our 100+ Viral Infographics for Free Traffic', 'url' => BASE_URL . '/tools/overview/infographics'],
'brand_insights' => ['label' => 'Brand Insights', 'icon' => 'insights', 'desc' => 'Unlock AI-Driven Brand Insights & Dashboards', 'url' => BASE_URL . '/tools/resources/brand_insights'],
'templates' => ['label' => 'Templates', 'icon' => 'dashboard', 'desc' => 'Use Proven Templates That Convert 3x Better', 'url' => BASE_URL . '/tools/overview/templates'],
'stock_photos' => ['label' => 'Stock Photos', 'icon' => 'photo_library', 'desc' => 'Stop Paying for Photos. Get High-End Assets for Free.', 'url' => BASE_URL . '/tools/overview/stock_photos'],
'brand_kits' => ['label' => 'Brand Kits', 'icon' => 'branding_watermark', 'desc' => 'Centralize Your Brand Assets & Speed Up Workflow', 'url' => BASE_URL . '/tools/overview/brand_kits'],
'brand_360' => ['label' => 'Brand 360', 'icon' => '360', 'desc' => 'Track Your Brand\'s Pulse in Real-Time', 'url' => BASE_URL . '/tools/overview/brand_360'],
'create_ai_image' => ['label' => 'Create AI Image', 'icon' => 'auto_awesome', 'desc' => 'Create Viral, Copyright-Free Images in 5 Seconds', 'url' => BASE_URL . '/tools/overview/create_ai_image'],
'website_templates' => ['label' => 'Website Templates', 'icon' => 'web', 'desc' => 'Launch a High-Converting Site in Under 10 Minutes', 'url' => BASE_URL . '/tools/overview/website_templates'],
'icons' => ['label' => 'Icons & Illustrations', 'icon' => 'insert_emoticon', 'desc' => 'Access 1,000+ Vector Icons That Pop', 'url' => BASE_URL . '/tools/overview/icons']
]
],
'health' => [
'label' => 'Health',
'icon' => 'health_and_safety',
'tools' => [
'health' => ['label' => 'Health Check', 'icon' => 'monitor_heart', 'desc' => 'Is Your Business at Risk? Get a Free Diagnostics Check.', 'url' => BASE_URL . '/tools/overview/health_check'],
'experience' => ['label' => 'CX Impact', 'icon' => 'sentiment_satisfied_alt', 'desc' => 'Calculate How Much Bad CX Is Costing You', 'url' => BASE_URL . '/tools/overview/cx_impact']
]
],
'branding' => [
'label' => 'Branding',
'icon' => 'diamond',
'tools' => [
'brand' => ['label' => 'Brand Equity', 'icon' => 'diamond', 'desc' => 'Discover How Much Your Brand Is Really Worth', 'url' => BASE_URL . '/tools/overview/brand_equity'],
'signature' => ['label' => 'Email Signature', 'icon' => 'badge', 'desc' => 'Get More Clicks with a Pro Email Signature', 'url' => BASE_URL . '/tools/overview/email_signature'],
'trust' => ['label' => 'Trust Score', 'icon' => 'verified_user', 'desc' => 'Find Out If Customers Actually Trust You', 'url' => BASE_URL . '/tools/overview/trust_score'],
'consistency' => ['label' => 'Consistency', 'icon' => 'fact_check', 'desc' => 'Fix Branding Mistakes That Kill Conversions', 'url' => BASE_URL . '/tools/overview/consistency'],
'value' => ['label' => 'Perception', 'icon' => 'verified', 'desc' => 'Craft a Value Prop That Customers Can\'t Ignore', 'url' => BASE_URL . '/tools/overview/perception'],
'rebrand' => ['label' => 'Rebrand ROI', 'icon' => 'autorenew', 'desc' => 'Don\'t Rebrand Until You See This ROI Data', 'url' => BASE_URL . '/tools/overview/rebrand_roi'],
'brand_blogs' => ['label' => 'Brand Blogs', 'icon' => 'rss_feed', 'desc' => 'Read the Strategies We Used to Grow to 10M+', 'url' => BASE_URL . '/tools/overview/brand_blogs'],
'background_creator' => ['label' => 'Background Creator', 'icon' => 'wallpaper', 'desc' => 'Look Like a Pro on Every Zoom Call', 'url' => BASE_URL . '/tools/overview/background_creator'],
'mood_board' => ['label' => 'Mood Board', 'icon' => 'dashboard', 'desc' => 'Visualize Your Brand\'s Future in Minutes', 'url' => BASE_URL . '/tools/overview/mood_board']
]
],
'strategy' => [
'label' => 'Strategy',
'icon' => 'psychology',
'tools' => [
'gap' => ['label' => 'Gap Analysis', 'icon' => 'radar', 'desc' => 'Identify the Hidden Gaps Stalling Your Growth', 'url' => BASE_URL . '/tools/overview/gap_analysis'],
'pricing' => ['label' => 'Pricing', 'icon' => 'monetization_on', 'desc' => 'Stop Guessing. Find the Perfect Price Point.', 'url' => BASE_URL . '/tools/overview/pricing_strategy'],
'brand_insights' => ['label' => 'Brand Insights', 'icon' => 'insights', 'desc' => 'Unlock powerful insights for your brand with our AI-driven dashboards.', 'url' => BASE_URL . '/tools/resources/brand_insights']
]
],
'finance' => [
'label' => 'Finance',
'icon' => 'payments',
'tools' => [
'ltv' => ['label' => 'LTV Calc', 'icon' => 'groups', 'desc' => 'Calculate the True Value of Every Customer', 'url' => BASE_URL . '/tools/overview/ltv_calculator'],
'roi' => ['label' => 'ROI Suite', 'icon' => 'show_chart', 'desc' => 'Prove Your Marketing Budget is Working', 'url' => BASE_URL . '/tools/overview/roi_suite'],
'invoice' => ['label' => 'Invoice Gen', 'icon' => 'description', 'desc' => 'Get Paid Faster with Professional Invoices', 'url' => BASE_URL . '/tools/overview/invoice_generator'],
'quote' => ['label' => 'Quotation', 'icon' => 'request_quote', 'desc' => 'Send Quotes That Close Deals 2x Faster', 'url' => BASE_URL . '/tools/overview/quotation_generator']
]
],
'growth' => [
'label' => 'Growth',
'icon' => 'trending_up',
'tools' => [
'awareness' => ['label' => 'Reach', 'icon' => 'visibility', 'desc' => 'Uncover Your Total Addressable Market (TAM)', 'url' => BASE_URL . '/tools/overview/tam_calculator'],
'social' => ['label' => 'Social', 'icon' => 'share', 'desc' => 'Predict Viral Success Before You Post', 'url' => BASE_URL . '/tools/overview/viral_social'],
'content' => ['label' => 'Content', 'icon' => 'article', 'desc' => 'Plan Content That Ranks #1 on Google', 'url' => BASE_URL . '/tools/overview/content_planner']
]
],
'utilities' => [
'label' => 'Utilities',
'icon' => 'build',
'tools' => [
'converter' => ['label' => 'Converter', 'icon' => 'transform', 'desc' => 'Convert Files Instantly (No Quality Loss)', 'url' => BASE_URL . '/tools/overview/file_converter'],
'smart_features' => ['label' => 'Smart Resizer', 'icon' => 'aspect_ratio', 'desc' => 'Resize Images for Any Platform in 1 Click', 'url' => BASE_URL . '/tools/overview/smart_resizer'],
'signature' => ['label' => 'Email Signature', 'icon' => 'badge', 'desc' => 'Turn Your Email Signature into a Marketing Channel', 'url' => BASE_URL . '/tools/overview/email_signature'],
'qr' => ['label' => 'QR Generator', 'icon' => 'qr_code_2', 'desc' => 'Create Trackable QR Codes That Drive Traffic', 'url' => BASE_URL . '/tools/overview/qr_generator'],
'image_compressor' => ['label' => 'Img Compressor', 'icon' => 'compress', 'desc' => 'Speed Up Your Site with 80% Smaller Images', 'url' => BASE_URL . '/tools/overview/image_compressor'],
'color_palette' => ['label' => 'Color Palette', 'icon' => 'palette', 'desc' => 'Pick Colors That Evoke Emotion & Action', 'url' => BASE_URL . '/tools/overview/color_palette'],
'text_image' => ['label' => 'Text to Image', 'icon' => 'image', 'desc' => 'Turn Boring Text into Viral Social Cards', 'url' => BASE_URL . '/tools/overview/text_to_image'],
'gradient_generator' => ['label' => 'Gradient Pro', 'icon' => 'gradient', 'desc' => 'Design Gradients That Catch the Eye', 'url' => BASE_URL . '/tools/overview/gradient_generator']
]
]
];
$categories_with_overview = ['branding', 'health', 'strategy', 'finance', 'growth', 'utilities'];
if ($current_tool && array_key_exists($current_tool, $nav_structure) && !in_array($current_tool, $categories_with_overview, true)) {
$category_tools = $nav_structure[$current_tool]['tools'];
if (!empty($category_tools)) {
$current_tool = array_key_first($category_tools);
$is_home = ($current_tool === null || $current_tool === 'home');
}
}
// Determine Active Category
$landing_to_nav_tool = [
'infographics_landing' => 'resources',
'templates_landing' => 'templates',
'stock_photos_landing' => 'stock_photos',
'brand_kits_landing' => 'brand_kits',
'brand_360_landing' => 'brand_360',
'create_ai_image_landing' => 'create_ai_image',
'website_templates_landing' => 'website_templates',
'icons_landing' => 'icons',
'health_check_landing' => 'health',
'cx_impact_landing' => 'experience',
'brand_equity_landing' => 'brand',
'email_signature_landing' => 'signature',
'trust_score_landing' => 'trust',
'consistency_landing' => 'consistency',
'perception_landing' => 'value',
'rebrand_roi_landing' => 'rebrand',
'brand_blogs_landing' => 'brand_blogs',
'background_creator_landing' => 'background_creator',
'mood_board_landing' => 'mood_board',
'gap_analysis_landing' => 'gap',
'pricing_strategy_landing' => 'pricing',
'ltv_calculator_landing' => 'ltv',
'roi_suite_landing' => 'roi',
'invoice_generator_landing' => 'invoice',
'quotation_generator_landing' => 'quote',
'tam_calculator_landing' => 'awareness',
'viral_social_landing' => 'social',
'content_planner_landing' => 'content',
'file_converter_landing' => 'converter',
'smart_resizer_landing' => 'smart_features',
'qr_generator_landing' => 'qr',
'image_compressor_landing' => 'image_compressor',
'color_palette_landing' => 'color_palette',
'text_to_image_landing' => 'text_image',
'gradient_generator_landing' => 'gradient_generator'
];
$current_category = 'resources';
if ($is_home) {
$current_category = 'home';
} else {
if ($current_tool && array_key_exists($current_tool, $nav_structure)) {
$current_category = $current_tool;
} else {
$category_lookup_tool = $current_tool;
if (isset($landing_to_nav_tool[$current_tool])) {
$category_lookup_tool = $landing_to_nav_tool[$current_tool];
}
foreach ($nav_structure as $cat_key => $cat_data) {
if (array_key_exists($category_lookup_tool, $cat_data['tools'])) {
$current_category = $cat_key;
break;
}
}
}
}
// Analytics Tracking
require_once __DIR__ . '/includes/analytics_helper.php';
$track_tool = $current_tool ?: 'home';
$track_cat = $current_category ?: 'unknown';
$track_action = $is_embed ? 'embed_view' : 'view';
$track_metadata = [];
if ($is_embed) {
$track_metadata['embed'] = true;
if ($embed_partner) {
$embed_meta = get_embed_referrer_metadata($embed_partner);
if (is_array($embed_meta)) {
foreach ($embed_meta as $k => $v) {
$track_metadata[$k] = $v;
}
}
} elseif (!empty($_SERVER['HTTP_REFERER'])) {
$track_metadata['referrer'] = $_SERVER['HTTP_REFERER'];
}
}
track_tool_usage($track_tool, $track_cat, $track_action, $track_metadata);
// SEO Configuration (Neil Patel Style - High Impact, Keyword Rich)
$seo_data = [
'home' => [
'title' => 'Free Marketing & Branding Tools That Actually Grow Your Business',
'desc' => 'Access our suite of free professional tools to build, manage, and grow your brand. From LTV calculators to AI image generators.',
'keywords' => 'free marketing tools, branding tools, business calculators, ai marketing tools, growth hacking tools'
],
'infographics_landing' => [
'title' => 'Steal 100+ Viral Marketing Infographics (Free Download)',
'desc' => 'Stop wasting time designing from scratch. Download our free, high-converting marketing infographics and visual guides. Perfect for social media and presentations.',
'keywords' => 'free marketing infographics, marketing visual guides, social media infographics, business flowcharts, data visualization templates'
],
'templates_landing' => [
'title' => 'Download Proven Brand Strategy Templates That Convert',
'desc' => 'Download professional brand strategy templates. From startup branding frameworks to pitch decks. Customize in seconds and launch your brand.',
'keywords' => 'brand strategy templates, startup branding framework, free business templates, pitch deck templates, marketing strategy pdf'
],
'stock_photos_landing' => [
'title' => 'Stop Paying for Stock Photos. Get Premium Assets Free.',
'desc' => 'Stop using cheesy stock photos. Access our curated library of high-converting, modern business photography. 100% Royalty Free.',
'keywords' => 'royalty free business photos, modern stock photography, marketing images, startup stock photos, diverse business photos'
],
'resources' => [
'title' => 'Steal 100+ Viral Marketing Infographics (Free Download)',
'desc' => 'Stop wasting time designing from scratch. Download our free, high-converting marketing infographics and visual guides. Perfect for social media and presentations.',
'keywords' => 'free marketing infographics, marketing visual guides, social media infographics, business flowcharts, data visualization templates'
],
'brand_insights' => [
'title' => 'Brand Insights & AI Dashboards',
'desc' => 'Unlock powerful insights for your brand with our AI-driven dashboards. From content calendars to marketing strategies.',
'keywords' => 'brand insights, ai dashboard, marketing strategy, content calendar, brand analytics'
],
'brand_blogs' => [
'title' => 'Read the Exact Strategies We Used to Scale to $10M+',
'desc' => 'Discover practical tips, industry trends, and inspiring stories to help you build a successful brand and grow your business with confidence.',
'keywords' => 'branding blogs, design insights, business growth, brand strategy, marketing trends'
],
'templates' => [
'title' => 'Download Proven Brand Strategy Templates That Convert',
'desc' => 'Download professional brand strategy templates. From startup branding frameworks to pitch decks. Customize in seconds and launch your brand.',
'keywords' => 'brand strategy templates, startup branding framework, free business templates, pitch deck templates, marketing strategy pdf'
],
'stock_photos' => [
'title' => 'Stop Paying for Stock Photos. Get Premium Assets Free.',
'desc' => 'Stop using cheesy stock photos. Access our curated library of high-converting, modern business photography. 100% Royalty Free.',
'keywords' => 'royalty free business photos, modern stock photography, marketing images, startup stock photos, diverse business photos'
],
'brand_kits' => [
'title' => 'Centralize Your Brand Assets & 10x Your Workflow Speed',
'desc' => 'Keep your logos, colors, and fonts organized. Create a professional Brand Kit in minutes and share it with your team. Try it for free.',
'keywords' => 'brand kit generator, brand asset management, logo organizer, brand guidelines creator, brand identity kit'
],
'brand_360' => [
'title' => 'Is Your Brand Dying? Check Your Health Score Instantly.',
'desc' => 'Is your brand growing or dying? Monitor your brand health, reach, and sentiment in one simple dashboard. Get your Brand 360 score now.',
'keywords' => 'brand monitoring dashboard, brand health check, brand sentiment analysis, marketing analytics, brand tracking tool'
],
'create_ai_image' => [
'title' => 'Create Viral AI Images in 5 Seconds (No Skills Needed)',
'desc' => 'Generate unique, copyright-free marketing visuals in seconds with AI. No design skills needed. Perfect for ads, blogs, and social media.',
'keywords' => 'ai image generator, free ai art, marketing image generator, text to image, artificial intelligence design'
],
'website_templates' => [
'title' => 'Launch a High-Converting Website in Under 10 Minutes',
'desc' => 'Don\'t spend months on web dev. Launch your startup site today with our conversion-optimized templates. Mobile-ready and SEO-friendly.',
'keywords' => 'conversion optimized templates, startup landing pages, high converting website templates, saas website themes, bootstrap templates'
],
'icons' => [
'title' => 'Download 1,000+ Premium Vector Icons for High-End Designs',
'desc' => 'Download thousands of premium vector icons. Fully customizable SVG icons for UI design, presentations, and marketing materials.',
'keywords' => 'free vector icons, svg icons for ui, business icon set, flat icons, outline icons'
],
'branding' => [
'title' => 'Branding Tools Suite: Build a Brand People Pay More For',
'desc' => 'Run quick audits, tighten consistency, and create pro-grade brand assets. Use this branding toolbox to look like the market leader in every channel.',
'keywords' => 'branding tools, brand equity, brand consistency, brand trust, rebrand roi'
],
'health' => [
'title' => 'Free Business Health Check: Diagnose Revenue Leaks Instantly',
'desc' => 'Take the 2-minute Business Health Quiz. Diagnose operational weak points and get a personalized roadmap to stability. Take the quiz now.',
'keywords' => 'business health assessment, small business checkup, business vital signs, company health quiz, operational audit'
],
'experience' => [
'title' => 'CX ROI Calculator: See How Much Bad Service Costs You',
'desc' => 'How much is bad CX costing you? Calculate the real ROI of investing in customer experience. See the financial impact instantly.',
'keywords' => 'cx roi calculator, customer experience value, cx impact analysis, customer journey roi, service design metrics'
],
'brand' => [
'title' => 'Brand Equity Calculator: Discover Your True Market Value',
'desc' => 'Don\'t guess your brand value. Use our advanced Brand Equity Calculator to estimate your market strength and financial value. Get your valuation.',
'keywords' => 'brand equity calculator, calculate brand value, brand valuation tool, market strength analysis, brand worth'
],
'signature' => [
'title' => 'Email Signature Generator: Get More Clicks from Every Email',
'desc' => 'Create a beautiful, professional email signature in 30 seconds. Boost your personal brand with every email you send. Works with Gmail & Outlook.',
'keywords' => 'free email signature generator, html email signature, professional signature maker, gmail signature template, outlook signature'
],
'trust' => [
'title' => 'Brand Trust Score: Do Customers Actually Believe You?',
'desc' => 'Trust is your most valuable asset. Measure your Brand Trust Score today and find out exactly how to build more credibility with your audience.',
'keywords' => 'brand trust score, measure brand credibility, customer trust index, brand reputation analysis, trust metrics'
],
'consistency' => [
'title' => 'Brand Consistency Audit: Find Mistakes That Kill Sales',
'desc' => 'Is your brand sending mixed signals? Run a free Brand Consistency Audit to identify gaps in your visual and verbal identity.',
'keywords' => 'brand consistency audit, brand compliance checklist, visual identity audit, brand messaging check, brand alignment'
],
'value' => [
'title' => 'Value Proposition Canvas: Create Offers That Sell Themselves',
'desc' => 'Map your product features to customer pains and gains. Create a compelling Value Proposition that converts. Try the interactive canvas.',
'keywords' => 'value proposition canvas, customer value perception, product market fit tool, value map, customer profile'
],
'rebrand' => [
'title' => 'Rebranding ROI Calculator: Don\'t Spend a Dime Until You See This',
'desc' => 'Thinking of rebranding? Calculate the estimated ROI and payback period before you spend a dime. Make a data-driven decision.',
'keywords' => 'rebranding roi calculator, cost of rebranding, rebrand benefit analysis, brand transformation roi, rebranding business case'
],
'background_creator' => [
'title' => 'Free Zoom Backgrounds: Look Professional on Every Call',
'desc' => 'Create branded virtual backgrounds for Zoom, Teams, and Google Meet. Look professional on every video call. No design skills required.',
'keywords' => 'zoom background creator, virtual background maker, branded video call background, teams background, google meet background'
],
'mood_board' => [
'title' => 'Mood Board Creator: Visualize Your Brand\'s Future Fast',
'desc' => 'Drag, drop, and dream. Create stunning digital mood boards to visualize your brand identity. The perfect tool for designers and marketers.',
'keywords' => 'digital mood board creator, online moodboard maker, brand inspiration board, design collage tool, visual identity planner'
],
'strategy' => [
'title' => 'Strategy Tools: Find the Gaps and Focus Your Growth Plan',
'desc' => 'Use structured frameworks to uncover hidden gaps and align pricing, positioning, and execution so every campaign pushes in the same direction.',
'keywords' => 'strategy tools, gap analysis, pricing strategy, business planning, growth frameworks'
],
'gap' => [
'title' => 'Gap Analysis Tool: Find the Hidden Holes in Your Strategy',
'desc' => 'Where are you vs where you want to be? Use this Gap Analysis tool to identify strategic holes and build a bridge to success.',
'keywords' => 'gap analysis tool, strategic planning template, business gap assessment, performance gap analysis, strategy execution'
],
'pricing' => [
'title' => 'Pricing Calculator: Stop Guessing & Start Maximizing Profit',
'desc' => 'Are you leaving money on the table? Use our Pricing Strategy Calculator to find the optimal price point for your SaaS or product.',
'keywords' => 'pricing strategy calculator, saas pricing model, optimal price point, product pricing tool, revenue maximization'
],
'ltv' => [
'title' => 'LTV Calculator: The #1 Metric for Profitable Growth',
'desc' => 'Stop guessing. Calculate your Customer Lifetime Value (LTV) instantly. Understand your most important metric to optimize ad spend.',
'keywords' => 'ltv calculator, customer lifetime value formula, saas ltv calc, clv calculator, retention metrics'
],
'roi' => [
'title' => 'Marketing ROI Calculator: Prove Your Budget is Working',
'desc' => 'Calculate the Return on Investment of your marketing campaigns. Generate a professional report to show your boss or clients.',
'keywords' => 'marketing roi calculator, campaign roi, return on investment formula, marketing performance metrics, ad spend roi'
],
'finance' => [
'title' => 'Finance Tools for Marketers: LTV, ROI, Quotes and Invoices',
'desc' => 'Stop guessing the numbers. Calculate LTV, prove ROI, and send polished quotes and invoices so you can scale with confidence.',
'keywords' => 'marketing finance tools, ltv calculator, roi suite, invoice generator, quotation generator'
],
'invoice' => [
'title' => 'Free Invoice Generator: Get Paid 2x Faster',
'desc' => 'Create and send professional PDF invoices in seconds. No account required. The simplest free invoice generator on the web.',
'keywords' => 'free invoice generator, online invoice maker, pdf invoice template, freelancer invoicing, bill generator'
],
'invoice_generator_landing' => [
'title' => 'Free Invoice Generator - No Sign Up Required (100% Free)',
'desc' => 'The best free invoice generator online. Create professional PDF invoices in seconds. No watermarks, no hidden fees, and no account needed.',
'keywords' => 'free invoice generator, invoice maker free, online invoice generator, invoice template pdf, free billing software'
],
'ltv_calculator_landing' => [
'title' => 'LTV Calculator: Calculate Customer Lifetime Value (Formula & Tool)',
'desc' => 'Calculate your Customer Lifetime Value (LTV) instantly. Learn the LTV formula, why it matters for SaaS & eCommerce, and how to improve it.',
'keywords' => 'ltv calculator, customer lifetime value formula, calculate ltv, clv calculator, saas metrics'
],
'brand_equity_landing' => [
'title' => 'Brand Equity Calculator: Measure Your Brand\'s Value',
'desc' => 'How much is your brand really worth? Use our free Brand Equity Calculator to estimate your brand\'s financial value and market strength.',
'keywords' => 'brand equity calculator, brand value estimator, brand valuation tool, measure brand equity, brand worth'
],
'qr_generator_landing' => [
'title' => 'Free QR Code Generator - Custom Logo, Colors & Frames',
'desc' => 'Create custom QR codes for free. Add your logo, change colors, and choose frames. Perfect for business cards, flyers, and websites.',
'keywords' => 'free qr code generator, custom qr code maker, qr code with logo, qr code generator free, dynamic qr code'
],
'quote' => [
'title' => 'Quote Generator: Send Estimates That Close Deals',
'desc' => 'Win more jobs with professional price estimates. Generate branded quotes instantly and download as PDF. Perfect for freelancers.',
'keywords' => 'free quote generator, price estimate template, online quotation maker, freelancer proposal tool, estimate generator'
],
'awareness' => [
'title' => 'TAM Calculator: How Big is Your Market Opportunity?',
'desc' => 'How many people will see your brand? Use our Reach Calculator to project brand awareness and potential market penetration.',
'keywords' => 'audience reach calculator, brand awareness projection, market reach estimator, ad reach calculator, brand visibility'
],
'growth' => [
'title' => 'Growth Tools: Model Your Market, Virality, and Content Engine',
'desc' => 'Understand your total addressable market, pressure-test social campaigns, and build a content plan that compounds instead of fading.',
'keywords' => 'growth tools, tam calculator, viral social, content planner, marketing growth'
],
'social' => [
'title' => 'Viral Impact Calculator: Will Your Next Post Go Viral?',
'desc' => 'Estimate the viral potential of your social media content. Analyze engagement factors to predict reach and shares.',
'keywords' => 'viral impact calculator, social media engagement estimator, viral coefficient, social reach predictor, campaign viral potential'
],
'content' => [
'title' => 'Content Strategy Builder: Plan Content That Ranks #1',
'desc' => 'Stop staring at a blank screen. Use our Content Strategy Builder to plan, organize, and schedule high-performing content in minutes.',
'keywords' => 'content strategy builder, content calendar planner, marketing content plan, social media content organizer, content roadmap'
],
'converter' => [
'title' => 'Marketing Unit Converter: Calculate Ad Spend & Metrics Fast',
'desc' => 'Quickly convert currencies, ad spend, and marketing metrics. A simple, no-nonsense converter tool designed for digital marketers.',
'keywords' => 'marketing unit converter, ad spend converter, currency converter for marketers, digital marketing tools, metric conversion'
],
'utilities' => [
'title' => 'Utility Tools: Compress, Convert, and Polish Every Brand Asset',
'desc' => 'Handle the technical details that make your brand feel premium. Resize, compress, convert, and generate visuals that load fast and look sharp.',
'keywords' => 'marketing utilities, qr generator, image compressor, color palette generator, text to image'
],
'smart_features' => [
'title' => 'Social Media Resizer: One Click to Fit All Platforms',
'desc' => 'Upload once, resize for everything. Instantly crop and resize your images for Instagram, LinkedIn, Twitter, and Facebook.',
'keywords' => 'social media image resizer, crop for instagram, linkedin image size, facebook cover resizer, bulk image resize'
],
'qr' => [
'title' => 'QR Code Generator: Create Trackable Codes for Free',
'desc' => 'Create custom QR codes that match your brand. Add your logo, change colors, and track scans. 100% Free.',
'keywords' => 'branded qr code generator, custom qr code with logo, free qr maker, marketing qr codes, dynamic qr code'
],
'image_compressor' => [
'title' => 'Image Compressor: Speed Up Your Site by 80%',
'desc' => 'Reduce image file size by up to 80% without losing quality. Improve your SEO and load times with our free bulk compressor.',
'keywords' => 'lossless image compressor, compress png online, reduce jpg size, web image optimizer, bulk image compression'
],
'color_palette' => [
'title' => 'Color Palette Generator: Pick Colors That Drive Action',
'desc' => 'Upload an image to extract its colors, or generate a beautiful new palette from scratch. Export to CSS or PDF.',
'keywords' => 'color palette generator, extract colors from image, brand color scheme, color picker, hex code generator'
],
'text_image' => [
'title' => 'Text to Image: Turn Quotes into Viral Social Cards',
'desc' => 'Transform text into shareable social media graphics instantly. The fastest way to create quote images for Instagram and Twitter.',
'keywords' => 'text to image converter, quote image maker, social media text graphics, text over image, instagram quote creator'
],
'gradient_generator' => [
'title' => 'CSS Gradient Generator: Design Backgrounds That Pop',
'desc' => 'Create stunning, modern CSS gradients. Copy and paste the code directly into your project. Supports linear, radial, and conic gradients.',
'keywords' => 'css gradient generator, beautiful css gradients, background gradient maker, css3 gradient tool, web design gradients'
]
];
// Helper function to render related tools
function render_related_tools($related_keys) {
global $nav_structure;
// Flatten tools list for easy lookup
$all_tools = [];
foreach ($nav_structure as $cat) {
if (isset($cat['tools'])) {
foreach ($cat['tools'] as $key => $data) {
$all_tools[$key] = $data;
}
}
}
echo '<div class="related-tools-section" style="margin-top: 60px; border-top: 1px solid #e2e8f0; padding-top: 40px;">';
echo '<h3 style="font-size: 20px; font-weight: 700; color: #1e293b; margin-bottom: 24px;">Explore Related Tools</h3>';
echo '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;">';
foreach ($related_keys as $key) {
if (isset($all_tools[$key])) {
$tool = $all_tools[$key];
$url = isset($tool['url']) ? $tool['url'] : "?tool=$key";
echo '<a href="' . $url . '" style="text-decoration: none; color: inherit; display: block;">';
echo '<div style="background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; transition: all 0.2s; height: 100%; display: flex; flex-direction: column;">';
echo '<div style="color: #3b82f6; margin-bottom: 12px;"><span class="material-icons" style="font-size: 28px;">' . $tool['icon'] . '</span></div>';
echo '<div style="font-weight: 600; color: #0f172a; margin-bottom: 8px; font-size: 16px;">' . $tool['label'] . '</div>';
echo '<div style="font-size: 13px; color: #64748b; line-height: 1.5;">' . $tool['desc'] . '</div>';
echo '</div>';
echo '</a>';
}
}
echo '</div>';
echo '</div>';
}
function render_category_overview($category_key, $headline, $subheading, $body_text) {
global $nav_structure;
if (!isset($nav_structure[$category_key])) {
return;
}
$category = $nav_structure[$category_key];
echo '<section class="category-overview" style="max-width: 960px; margin: 0 auto 40px auto;">';
echo '<div style="display:flex; flex-direction:column; gap:16px; margin-bottom:32px;">';
echo '<div style="display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; background:rgba(59,130,246,0.06); color:#1d4ed8;">';
echo '<span class="material-icons" style="font-size:16px;">' . $category['icon'] . '</span>';
echo '<span>' . htmlspecialchars($category['label']) . ' Tools</span>';
echo '</div>';
echo '<h2 style="font-size:28px; line-height:1.25; color:#0f172a; font-weight:800;">' . htmlspecialchars($headline) . '</h2>';
echo '<p style="font-size:16px; line-height:1.6; color:#475569; max-width:680px;">' . htmlspecialchars($subheading) . '</p>';
if ($body_text !== null && $body_text !== '') {
echo '<p style="font-size:14px; line-height:1.7; color:#64748b; max-width:720px;">' . htmlspecialchars($body_text) . '</p>';
}
echo '</div>';
echo '<div class="category-card-grid" style="display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;">';
foreach ($category['tools'] as $tool_key => $tool_data) {
$url = isset($tool_data['url']) ? $tool_data['url'] : '?tool=' . $tool_key;
echo '<a href="' . $url . '" class="category-card" style="text-decoration:none; color:inherit;">';
echo '<div style="background:linear-gradient(135deg,#a78bfa,#ec4899); border-radius:18px; padding:1px; height:100%;">';
echo '<div style="background:rgba(255,255,255,0.96); border-radius:16px; padding:18px; height:100%; display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:0 18px 40px rgba(15,23,42,0.08);">';
echo '<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;">';
echo '<div style="display:flex; align-items:center; gap:10px;">';
echo '<div style="width:36px; height:36px; border-radius:999px; background:linear-gradient(135deg,#3b82f6,#1e40af); display:flex; align-items:center; justify-content:center;">';
echo '<span class="material-icons" style="font-size:22px; color:#ffffff;">' . $tool_data['icon'] . '</span>';
echo '</div>';
echo '<span style="font-size:15px; font-weight:600; color:#0f172a;">' . htmlspecialchars($tool_data['label']) . '</span>';
echo '</div>';
echo '<span style="font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:#94a3b8;">Tool</span>';
echo '</div>';
echo '<p style="font-size:13px; line-height:1.6; color:#475569; margin:0 0 16px 0; flex-grow:1;">' . htmlspecialchars($tool_data['desc']) . '</p>';
echo '<div style="margin-top:auto; display:flex; align-items:center; justify-content:space-between;">';
echo '<span style="font-size:12px; color:#64748b;">' . htmlspecialchars($category['label']) . '</span>';
echo '<span class="gradient-text" style="font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:4px;">Launch tool<span class="material-icons" style="font-size:16px;">arrow_outward</span></span>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</a>';
}
echo '</div>';
echo '</section>';
}
// Get SEO Data for Current Tool
$seo_lookup_key = $is_home ? 'home' : $current_tool;
// Check for Infographics Subcategory SEO override
if ($current_tool === 'resources' && isset($_GET['category']) && !empty($_GET['category'])) {
$sub_cat_slug = strtolower($_GET['category']);
// Define unique SEO data for each subcategory
$subcategory_seo_map = [
'analytics' => [
'title' => 'Master Data Visualization with Free Analytics Infographics',
'desc' => 'Simplify complex data. Download free analytics infographics and dashboards to present your metrics clearly and professionally.',
'keywords' => 'analytics infographics, data visualization templates, dashboard design, business intelligence visuals'
],
'branding' => [
'title' => 'Build a Stronger Brand with Free Branding Infographics',
'desc' => 'Visual guides for brand identity, archetypes, and strategy. Download free branding infographics to elevate your business presence.',
'keywords' => 'branding infographics, brand identity guides, brand strategy templates, visual branding assets'
],
'content' => [
'title' => 'Content Marketing Infographics & Strategy Guides (Free)',
'desc' => 'Plan and execute your content strategy with our free visual guides. Download infographics for content calendars, funnels, and distribution.',
'keywords' => 'content marketing infographics, content strategy flowcharts, blog planning templates, content distribution visuals'
],
'customer-success' => [
'title' => 'Customer Success Infographics: Retention & Churn Guides',
'desc' => 'Improve customer retention with free visual guides. Download customer success infographics for onboarding, health checks, and support.',
'keywords' => 'customer success infographics, churn reduction guides, user onboarding flows, customer retention visuals'
],
'design' => [
'title' => 'Graphic Design Principles & Tips Infographics (Free)',
'desc' => 'Learn and apply design principles faster. Download free infographics covering typography, color theory, and layout rules.',
'keywords' => 'graphic design infographics, design theory guides, typography cheatsheets, color theory visuals'
],
'email-marketing' => [
'title' => 'Email Marketing Infographics: Best Practices & Flows',
'desc' => 'Optimize your campaigns with free email marketing infographics. Visual guides for automation flows, segmentation, and copywriting.',
'keywords' => 'email marketing infographics, email automation flows, newsletter design tips, email segmentation visuals'
],
'finance' => [
'title' => 'Financial Planning & Analysis Infographics (Free Download)',
'desc' => 'Visualize financial concepts easily. Download free infographics for budgeting, forecasting, and financial reporting.',
'keywords' => 'finance infographics, financial planning visuals, budget templates, accounting flowcharts'
],
'marketing' => [
'title' => 'General Marketing Infographics & Cheat Sheets (Free)',
'desc' => 'Broad marketing concepts visualized. Download free infographics for marketing mix, SWOT analysis, and planning.',
'keywords' => 'general marketing infographics, marketing mix visuals, swot analysis templates, marketing basics'
],
'operations' => [
'title' => 'Business Operations & Workflow Infographics (Free)',
'desc' => 'Streamline your processes. Download free infographics for project management, SOPs, and operational efficiency.',
'keywords' => 'operations infographics, workflow diagrams, project management visuals, sop templates'
],
'sales' => [
'title' => 'Sales Enablement Infographics & Playbooks (Free)',
'desc' => 'Close more deals with visual aids. Download free sales infographics for funnels, objection handling, and negotiation.',
'keywords' => 'sales infographics, sales funnel visuals, negotiation guides, sales enablement assets'
],
'social-media' => [
'title' => 'Social Media Marketing Infographics & Sizing Guides',
'desc' => 'Dominate the feed. Download free infographics for social media strategy, image sizes, and engagement tips.',
'keywords' => 'social media infographics, instagram guides, linkedin strategy visuals, social media image sizes'
],
'strategy' => [
'title' => 'Business Strategy & Framework Infographics (Free)',
'desc' => 'Plan your next move. Download free infographics for strategic frameworks, competitive analysis, and growth models.',
'keywords' => 'strategy infographics, business frameworks, strategic planning visuals, growth model templates'
],
'web-development' => [
'title' => 'Web Development Roadmaps & Cheatsheets (Free Infographics)',
'desc' => 'Visual guides for frontend, backend, and full-stack development. Download free cheatsheets and flowcharts for your next project.',
'keywords' => 'web development infographics, coding cheatsheets, full stack roadmaps, programming visuals'
]
];
if (isset($subcategory_seo_map[$sub_cat_slug])) {
$current_seo = $subcategory_seo_map[$sub_cat_slug];
} else {
// Fallback for any undefined categories
$sub_cat_seo = ucwords(str_replace('-', ' ', $_GET['category']));
$current_seo = [
'title' => "{$sub_cat_seo} Infographics & Visual Guides (Free Download)",
'desc' => "Download free {$sub_cat_seo} infographics to simplify complex topics and improve your marketing strategy.",
'keywords' => strtolower($sub_cat_seo) . " infographics, free visual guides, {$sub_cat_seo} charts"
];
}
} else {
$current_seo = isset($seo_data[$seo_lookup_key]) ? $seo_data[$seo_lookup_key] : [
'title' => 'Brand AI - Tools & Resources',
'desc' => 'Explore Brand AI tools to boost your business.',
'keywords' => 'brand ai, business tools, marketing resources'
];
}
if ($current_tool === 'text_to_image_landing') {
$current_seo = [
'title' => 'Text to Image AI Generator — Create Images From Prompts',
'desc' => 'Turn a text prompt into high-quality images in seconds. Generate product shots, thumbnails, ads, and concept art with Brand AI.',
'keywords' => 'text to image ai, ai image generator, ai art generator, stable diffusion alternative, dall-e alternative, create images from text'
];
} elseif (!$is_home && $current_tool && substr($current_tool, -8) === '_landing' && !isset($seo_data[$seo_lookup_key])) {
$toolLabel = ucwords(str_replace('_', ' ', substr($current_tool, 0, -8)));
$toolLabelLc = strtolower($toolLabel);
$current_seo = [
'title' => "{$toolLabel} — Free Tool by Brand AI",
'desc' => "Use Brand AI's free {$toolLabel} tool to create faster, cleaner assets and grow your brand.",
'keywords' => "{$toolLabelLc}, {$toolLabelLc} tool, brand ai {$toolLabelLc}, free {$toolLabelLc}"
];
}
if ($is_embed) {
$embed_theme_value = ($embed_theme === 'dark') ? 'dark' : 'light';
$embed_attr_value = in_array($embed_attr_style, ['light', 'dark', 'minimal'], true) ? $embed_attr_style : 'light';
$public_base = BASE_URL;
$parsed_public = parse_url(BASE_URL);
if (isset($parsed_public['scheme'], $parsed_public['host'])) {
$public_base = $parsed_public['scheme'] . '://' . $parsed_public['host'];
}
$public_root = rtrim($public_base, '/');
$public_tools = $public_root . '/tools';
$partner_slug = $embed_partner ? preg_replace('/[^a-zA-Z0-9\-_]/', '-', $embed_partner) : 'embed-partner';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($current_seo['title']); ?></title>
<meta name="description" content="<?php echo htmlspecialchars($current_seo['desc']); ?>">
<meta name="robots" content="noindex, nofollow">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?php $rand = rand(10,299993); ?>
<link href="<?php echo BASE_URL; ?>/css/style-cleaned.css?<?php echo $rand; ?>" rel="stylesheet" type="text/css">
<link id="brand-theme-link" href="<?php echo BASE_URL; ?>/css/light-cleaned.css?<?php echo $rand; ?>" rel="stylesheet" type="text/css">
<style>
.brandai-embed-body-shell {
margin: 0;
padding: 0;
background: transparent;
}
.brandai-embed-root {
max-width: 100%;
border-radius: 12px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
overflow: hidden;
background: #ffffff;
color: #0f172a;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.brandai-embed-theme-dark {
background: #020617;
color: #e5e7eb;
}
.brandai-embed-body {
padding: 24px;
background: linear-gradient(135deg, #f9fafb, #e5f0ff);
}
.brandai-embed-theme-dark .brandai-embed-body {
background: linear-gradient(135deg, #020617, #0f172a);
}
.brandai-embed-attribution {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
padding: 10px 16px;
font-size: 11px;
border-top: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(248, 250, 252, 0.9);
color: #64748b;
}
.brandai-embed-theme-dark .brandai-embed-attribution {
background: rgba(15, 23, 42, 0.9);
color: #e5e7eb;
}
.brandai-embed-attribution a {
color: #0f172a;
text-decoration: none;
font-weight: 600;
}
.brandai-embed-theme-dark .brandai-embed-attribution a {
color: #e5e7eb;
}
.brandai-embed-attribution a:hover {
text-decoration: underline;
}
.brandai-embed-attribution-dot {
opacity: 0.6;
padding: 0 4px;
}
.brandai-embed-attribution-minimal {
font-size: 10px;
opacity: 0.85;
}
.brandai-embed-placeholder {
padding: 32px 20px;
text-align: center;
font-size: 14px;
color: #6b7280;
}
@media (max-width: 600px) {
.brandai-embed-body {
padding: 16px;
}
.brandai-embed-attribution {
padding: 8px 12px;
}
}
</style>
<script>
window.BASE_URL = "<?php echo BASE_URL; ?>";
</script>
<script src="<?php echo BASE_URL; ?>/tools/js/analytics.js"></script>
</head>
<body class="brandai-embed-body-shell">
<div class="brandai-embed-root brandai-embed-theme-<?php echo $embed_theme_value; ?>">
<div class="brandai-embed-body">
<?php
if ($is_home) {
echo '<div class="brandai-embed-placeholder">Select a specific tool to embed from Brand AI.</div>';
} elseif ($current_tool === 'resources') {
include 'includes/resources_infographics.php';
} elseif ($current_tool === 'brand_insights') {
include 'includes/resources_brand_insights.php';
} elseif ($current_tool === 'brand_blogs') {
include 'includes/brand_blogs.php';
} elseif ($current_tool === 'brand') {
include 'includes/brand_calculator.php';
} elseif ($current_tool === 'trust') {
include 'includes/brand_trust_calculator.php';
} elseif ($current_tool === 'consistency') {
include 'includes/brand_consistency_audit.php';
} elseif ($current_tool === 'ltv') {
include 'includes/ltv_calculator.php';
} elseif ($current_tool === 'roi') {
include 'includes/roi_calculator.php';
} elseif ($current_tool === 'invoice') {
include 'includes/invoice_generator.php';
} elseif ($current_tool === 'quote') {
include 'includes/quotation_generator.php';
} elseif ($current_tool === 'pricing') {
include 'includes/pricing_calculator.php';
} elseif ($current_tool === 'rebrand') {
include 'includes/rebranding_calculator.php';
} elseif ($current_tool === 'background_creator') {
echo '<iframe src="https://www.thebrand.ai/wowX/bgSVG/index.php" style="width:100%; height:100%; min-height:800px; border:none;"></iframe>';
} elseif ($current_tool === 'mood_board') {
include 'includes/mood_board.php';
} elseif ($current_tool === 'gap') {
include 'includes/gap_analyzer.php';
} elseif ($current_tool === 'value') {
include 'includes/value_calculator.php';
} elseif ($current_tool === 'awareness') {
include 'includes/awareness_projector.php';
} elseif ($current_tool === 'social') {
include 'includes/social_impact_calculator.php';
} elseif ($current_tool === 'content') {
include 'includes/content_builder.php';
} elseif ($current_tool === 'experience') {
include 'includes/experience_calculator.php';
} elseif ($current_tool === 'converter') {
include 'includes/converter.php';
} elseif ($current_tool === 'smart_features') {
include 'includes/smart_features.php';
} elseif ($current_tool === 'signature') {
include 'includes/email_signature.php';
} elseif ($current_tool === 'qr') {
include 'includes/qr_generator.php';
} elseif ($current_tool === 'image_compressor') {
include 'includes/image_compressor.php';
} elseif ($current_tool === 'color_palette') {
include 'includes/color_palette.php';
} elseif ($current_tool === 'text_image') {
include 'includes/text_to_image.php';
} elseif ($current_tool === 'gradient_generator') {
include 'includes/gradient_generator.php';
} elseif ($current_tool === 'growth') {
echo '<div class="card" style="padding:40px; text-align:center;"><h2>Growth Calculator</h2><p>Coming Soon</p></div>';
} elseif ($current_tool === 'strategy') {
echo '<div class="card" style="padding:40px; text-align:center;"><h2>Strategy Planner</h2><p>Coming Soon</p></div>';
} else {
echo '<div class="brandai-embed-placeholder">This tool is not yet available as an embed. Visit Brand AI to use it.</div>';
}
?>
</div>
</div>
<script>
(function () {
var lastHeight = 0;
function computeHeight() {
var root = document.querySelector(".brandai-embed-root");
if (root) {
var rect = root.getBoundingClientRect();
var h = root.scrollHeight || rect.height || 0;
return h;
}
return document.documentElement.scrollHeight || document.body.scrollHeight || 0;
}
function sendHeight() {
var height = computeHeight();
if (!height) {
return;
}
if (Math.abs(height - lastHeight) < 2) {
return;
}
lastHeight = height;
var params = new URLSearchParams(window.location.search);
var iframeId = params.get("iframeId");
var payload = { type: "BRANDAI_EMBED_HEIGHT", height: height };
if (iframeId) {
payload.iframeId = iframeId;
}
if (window.parent && window.parent !== window) {
window.parent.postMessage(payload, "*");
}
}
function setupParentNavigationLinks() {
var root = document.querySelector(".brandai-embed-body") || document;
var anchors = root.querySelectorAll("a[href]");
anchors.forEach(function (link) {
link.addEventListener("click", function (e) {
var href = link.getAttribute("href");
if (!href || href.charAt(0) === "#") {
return;
}
var url;
try {
url = new URL(link.href);
} catch (err) {
return;
}
if (url.origin === window.location.origin) {
e.preventDefault();
try {
window.top.location.href = link.href;
} catch (err2) {
window.location.href = link.href;
}
}
});
});
}
window.addEventListener("load", function () {
setTimeout(sendHeight, 40);
setupParentNavigationLinks();
});
var resizeTimeout;
window.addEventListener("resize", function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(sendHeight, 160);
});
if (typeof ResizeObserver !== "undefined") {
try {
var observer = new ResizeObserver(function () {
sendHeight();
});
var target = document.querySelector(".brandai-embed-root") || document.body;
observer.observe(target);
} catch (e) {}
}
})();
(function () {
var links = document.querySelectorAll(".brandai-embed-attribution a");
var toolKey = "<?php echo htmlspecialchars($track_tool, ENT_QUOTES); ?>";
var categoryKey = "<?php echo htmlspecialchars($track_cat, ENT_QUOTES); ?>";
var partnerId = "<?php echo htmlspecialchars($partner_slug, ENT_QUOTES); ?>";
links.forEach(function (link) {
link.addEventListener("click", function () {
if (typeof window.trackToolUsage === "function") {
window.trackToolUsage(toolKey, categoryKey, "embed_click", {
partner_id: partnerId,
destination: link.href
});
}
});
});
})();
</script>
</body>
</html>
<?php
exit;
}
$canonical_url = null;
$base_root = rtrim(BASE_URL, '/');
if ($current_tool === 'resources' && isset($_GET['category'], $_GET['id']) && !empty($_GET['category']) && !empty($_GET['id'])) {
$cat_slug = strtolower(trim((string)$_GET['category']));
$canonical_url = $base_root . '/tools/resources/infographics/' . rawurlencode($cat_slug);
} elseif ($is_home) {
$canonical_url = $base_root . '/tools/';
} elseif ($current_tool && substr($current_tool, -8) === '_landing') {
$canonical_url = $base_root . '/tools/overview/' . substr($current_tool, 0, -8);
} elseif (isset($_SERVER['REQUEST_URI']) && $_SERVER['REQUEST_URI'] !== '') {
$origin = $base_root;
$parsed_base = parse_url(BASE_URL);
if (isset($parsed_base['scheme'], $parsed_base['host'])) {
$origin = $parsed_base['scheme'] . '://' . $parsed_base['host'];
}
$path = strtok($_SERVER['REQUEST_URI'], '?');
if ($path !== '/' && substr($path, -1) === '/') {
$path = rtrim($path, '/');
}
$canonical_url = $origin . $path;
} else {
$canonical_url = $base_root . '/tools/';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ENHHZKM53C"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ENHHZKM53C');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($current_seo['title']); ?></title>
<meta name="description" content="<?php echo htmlspecialchars($current_seo['desc']); ?>">
<meta name="keywords" content="<?php echo htmlspecialchars($current_seo['keywords']); ?>">
<!-- Canonical URL -->
<link rel="canonical" href="<?php echo htmlspecialchars($canonical_url); ?>">
<!-- Robots -->
<meta name="robots" content="index, follow">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo htmlspecialchars($current_seo['title']); ?>">
<meta name="twitter:description" content="<?php echo htmlspecialchars($current_seo['desc']); ?>">
<!-- Open Graph SEO -->
<meta property="og:title" content="<?php echo htmlspecialchars($current_seo['title']); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($current_seo['desc']); ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?php echo htmlspecialchars($canonical_url); ?>">
<!-- Schema Markup -->
<script type="application/ld+json">
<?php
$schema_payload = [
"@context" => "https://schema.org",
"@type" => "SoftwareApplication",
"name" => $current_seo['title'],
"description" => $current_seo['desc'],
"url" => $canonical_url,
"applicationCategory" => "BusinessApplication",
"operatingSystem" => "Web Browser",
"offers" => [
"@type" => "Offer",
"price" => "0",
"priceCurrency" => "USD"
]
];
echo json_encode($schema_payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
?>
</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?php $rand = rand(10,299993); ?>
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>/beautiful/styles-cleaned.css?<?php echo $rand; ?>">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/beautiful/brand-cleaned.css?<?php echo $rand; ?>" media="all" onload="this.media='all'">
<link href="<?php echo BASE_URL; ?>/css/style-cleaned.css?<?php echo $rand; ?>" rel="stylesheet" type="text/css">
<link id="brand-theme-link" href="<?php echo BASE_URL; ?>/css/light-cleaned.css?<?php echo $rand; ?>" rel="stylesheet" type="text/css">
<?php include("../includes/sections/styles.php"); ?>
<?php include("../includes/sections/scripts.php"); ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="<?php echo BASE_URL; ?>/dashboard/partials/library.css?<?php echo $rand; ?>">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="<?php echo BASE_URL; ?>/tools/js/analytics.js"></script>
<style>
/* Vertical Menu Styling (Adapted from TheBrandNavMain) */
.TheBrandNavMain {
--color-foreground-5: rgba(0,0,0,0.05);
--color-foreground-10: rgba(0,0,0,0.15);
--color-focus-50: rgba(4, 107, 191, 0.5);
--color-focus-100: rgba(4, 107, 191, 1);
--transition-duration-10: 0.3s;
--border-radius: 0.625em;
display: flex;
overflow: hidden;
align-items: center;
}
.TheBrandNavMain .TheBrandTabList {
flex-direction: column;
display: flex;
padding: 0;
margin: 0;
margin-left: 0; /* Reset margin */
list-style: none;
}
.TheBrandNavMain .TheBrandTabList li {
display: flex;
user-select: none; line-height: normal; font-size: var(--font-size); font-family: var(--font-family);
text-align: left; text-transform: none; text-rendering: optimizeLegibility;
direction: ltr; color: var(--color-foreground-90); background-color: transparent; outline-color: rgba(var(--color-preview-outline) 0,0,0 , 1); transition: background-color 1ms, outline-color 1ms, color var(--transition-duration-10) ease-in-out, dir 1ms;
}
.TheBrandNavMain .TheBrandTabList li + li {
margin: .5em 0 0;
}
.TheBrandNavMain button {
box-shadow: inset 0 0 0 1px var(--color-foreground-5);
transition: all 0.2s ease-out;
background-color: #ffffff;
border: none;
padding: 5px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
width: 4.5em; /* Slightly wider */
height: 4.5em;
border-radius: var(--border-radius);
position: relative;
}
.TheBrandNavMain button:hover {
box-shadow: inset 0 0 0 1px var(--color-code-highlight);
transform: translateY(-1px);
}
/* Active State for Category (Level 1) */
.TheBrandTabList li[aria-selected="true"] button {
color: #fff;
background-color: var(--brand-blue, #046bbf); /* Use brand color */
box-shadow: 0 4px 12px rgba(4, 107, 191, 0.3);
}
.TheBrandTabList li[aria-selected="true"] button .material-icons {
color: #fff;
}
/* Sub Menu Styling (Level 2) */
.TheBrandNavSub {
width: 200px;
margin-left: 16px;
padding: 16px;
border: 1px solid rgba(0,0,0,0.05);
border-radius: 12px; margin-right:10px ;
overflow: hidden;
}
.TheBrandNavSub .sub-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
margin-bottom: 8px;
border-radius: 8px;
background: #fff;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
color: #666;
}
.TheBrandNavSub .sub-nav-item > * {
color: inherit;
}
.TheBrandNavSub .sub-nav-item:hover {
background: #f8fafc;
border-color: rgba(0,0,0,0.05);
transform: translateX(2px);
}
.TheBrandNavSub .sub-nav-item.active {
background: #f0f7ff;
border-color: var(--brand-blue, #046bbf);
color: var(--brand-blue, #046bbf);
}
.TheBrandNavSub .sub-nav-item .material-icons {
font-size: 20px;
color: #94a3b8;
transition: color 0.2s;
}
.TheBrandNavSub .sub-nav-item.active .material-icons {
color: var(--brand-blue, #046bbf);
}
.TheBrandNavSub .sub-nav-text {
display: flex;
flex-direction: column;
}
.TheBrandNavSub .sub-nav-title {
font-weight: 500;
font-size: 0.9em;
}
.TheBrandNavSub .sub-nav-desc {
font-size: 0.75em;
color: #94a3b8;
}
.TheBrandNavMain button span {
pointer-events: none;
}
.TheBrandNavMain button .material-icons {
font-size: 22px;
width: auto;
height: auto;
margin-top: .1em;
color: #64748b;
}
.TheBrandNavMain button span:not(.material-icons) {
font-size: .7em;
margin-top: .4em;
display: block;
width: 100%;
font-weight: 500;
}
.TheBrandNavMain::-webkit-scrollbar {
width: 4px;
}
.TheBrandNavMain::-webkit-scrollbar-track {
background: transparent;
}
.TheBrandNavMain::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.1);
border-radius: 4px;
}
.TheBrandNavMain:hover::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
}
.TheBrandMobileNavShell {
display: none;
}
.TheBrandNavSubMobile {
display: none;
}
.TheBrandNavMainMobile {
display: none;
}
@media (max-width: 768px) {
.teams-ui {
padding-bottom: 80px;
}
.TheBrandNavMain {
display: none;
}
.TheBrandNavSub {
display: none;
}
.TheBrandMobileNavShell {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
background: #ffffff;
box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.12);
padding: 8px 12px 10px;
}
.TheBrandNavSubMobile {
display: block;
margin: 0 0 6px;
padding: 4px 4px 8px;
border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}
.TheBrandNavSubMobile h3 {
font-size: 0.85rem;
}
.TheBrandNavSubMobileList {
margin-top: 6px;
max-height: 120px;
overflow-y: auto;
overflow-x: hidden;
}
.TheBrandNavSubMobileList::-webkit-scrollbar {
display: none;
}
.TheBrandNavSubMobileList {
scrollbar-width: none;
-ms-overflow-style: none;
}
.TheBrandNavSubMobile .sub-nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin-bottom: 4px;
border-radius: 8px;
background: #f9fafb;
border: 1px solid transparent;
text-decoration: none;
color: #64748b;
font-size: 0.8rem;
}
.TheBrandNavSubMobile .sub-nav-item.active {
background: #e0f2fe;
border-color: var(--brand-blue, #046bbf);
color: var(--brand-blue, #046bbf);
}
.TheBrandNavMainMobile {
display: block;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.TheBrandNavMainMobile::-webkit-scrollbar {
display: none;
}
.TheBrandNavMainMobile {
scrollbar-width: none;
-ms-overflow-style: none;
}
.TheBrandNavMainMobile .TheBrandTabList {
display: flex;
flex-direction: row;
gap: 8px;
padding: 0 12px;
margin: 0;
width: auto;
list-style: none;
}
.TheBrandNavMainMobile .brand-icon-menu-btn {
flex: 0 0 auto;
}
.TheBrandNavMainMobile .brand-icon-menu-btn button {
width: 3.5em;
height: 3.5em;
padding: 6px;
box-shadow: inset 0 0 0 1px var(--color-foreground-5);
transition: all 0.2s ease-out;
background-color: #ffffff;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
position: relative;
}
.TheBrandNavMainMobile .brand-icon-menu-btn[aria-selected="true"] button {
color: #fff;
background-color: var(--brand-blue, #046bbf);
box-shadow: 0 4px 12px rgba(4, 107, 191, 0.3);
}
.TheBrandNavMainMobile .brand-icon-menu-btn button .material-icons {
font-size: 22px;
width: auto;
height: auto;
margin-top: .1em;
color: #64748b;
}
.TheBrandNavMainMobile .brand-icon-menu-btn[aria-selected="true"] button .material-icons {
color: #fff;
}
.TheBrandNavMainMobile .brand-icon-menu-btn button span:not(.material-icons) {
display: block;
margin-top: .25em;
font-size: .6rem;
line-height: 1.1;
text-align: center;
}
}
.teams-section {
margin-left: 18px; margin-top: 0px!important;
}
/* Standard Tool Header */
.tool-header {
margin: 0 0 40px 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
padding-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 20px;
}
.tool-header h2 {
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 8px 0;
color: #1e293b;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.tool-header p {
color: #64748b;
margin: 0;
font-size: 1rem;
max-width: 600px;
line-height: 1.6;
font-weight: 400;
}
.tool-header .header-actions {
display: flex;
gap: 10px;
}
@media (max-width: 768px) {
.teams-actions .brand-btn.small .btn-label {
display: none;
}
}
</style>
</head>
<body id="brand" class="light-theme teams-page" style="background-color:#ffffff!important">
<div class="content-gutter content-limit-wide" style="padding-top: 10px;">
<div class="teams-ui">
<div class="teams-header">
<h1 class="teams-title"><span class="material-icons"><?php echo $nav_structure[$current_category]['icon']; ?></span><?php echo $nav_structure[$current_category]['label']; ?></h1>
<div class="teams-actions">
<a href="https://www.thebrand.ai/wowX/dashboard/index.php" class="brand-btn small"><span class="material-icons">arrow_back</span><span class="btn-label">Back to Dashboard</span></a>
<button id="share-tools-btn" class="brand-btn small" style="margin-left: 10px; background: linear-gradient(135deg, #a78bfa, #ec4899); color: white; border: none;"><span class="material-icons" style="color: white;">share</span><span class="btn-label">Share Toolkit</span></button>
<?php if (!$is_home && !$is_landing_page && $current_tool !== 'resources'): ?>
<button id="embed-tools-btn" class="brand-btn small" onclick="if(window.BrandAI_openEmbedModal){window.BrandAI_openEmbedModal();}" style="margin-left: 10px; background: linear-gradient(135deg, #38bdf8, #6366f1); color: white; border: none;"><span class="material-icons" style="color: white;">code</span><span class="btn-label">Embed This Tool</span></button>
<?php endif; ?>
</div>
</div>
<div style="display:flex; gap:0; align-items:flex-start; margin-top:20px; min-height: calc(100vh - 100px);">
<!-- Column 1: Categories -->
<div class="TheBrandNav TheBrandNavMain" style="position: sticky; top: 10px; background: none; width:auto; height: calc(100vh - 20px); overflow-y:auto; border:none; padding:0; flex-shrink:0">
<div class="TheBrandScrollable" style="--scrollable-feather-start-opacity: 1;--scrollable-feather-end-opacity: 0; overflow:visible" data-direction="y">
<div style="transform: translateY(0px)">
<ul class="TheBrandTabList" role="tablist" style="flex-direction:column; width:80px; gap:12px; padding-bottom: 20px;">
<?php foreach ($nav_structure as $cat_key => $cat_data): ?>
<?php
$is_active = ($cat_key === $current_category);
$cat_url = BASE_URL . '/tools/' . $cat_key;
?>
<li role="tab" class="brand-icon-menu-btn" aria-selected="<?php echo $is_active ? 'true' : 'false'; ?>">
<button type="button" class="resetElements" onclick="location.href='<?php echo $cat_url; ?>'" data-tooltip="<?php echo $cat_data['label']; ?>" data-tooltip-placement="right">
<span class="material-icons"><?php echo $cat_data['icon']; ?></span>
<span><?php echo $cat_data['label']; ?></span>
</button>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
</div>
<div style="flex:1; min-width:0; display:flex; flex-direction:column;">
<?php
// Landing pages that require full width and no sidebar
$landing_pages = [
'infographics_landing', 'templates_landing', 'stock_photos_landing', 'brand_kits_landing', 'brand_360_landing',
'create_ai_image_landing', 'website_templates_landing', 'icons_landing', 'health_check_landing', 'cx_impact_landing',
'brand_equity_landing', 'email_signature_landing', 'trust_score_landing', 'consistency_landing', 'perception_landing',
'rebrand_roi_landing', 'brand_blogs_landing', 'background_creator_landing', 'mood_board_landing',
// Strategy
'gap_analysis_landing', 'pricing_strategy_landing',
// Finance
'ltv_calculator_landing', 'roi_suite_landing', 'invoice_generator_landing', 'quotation_generator_landing',
// Growth
'tam_calculator_landing', 'viral_social_landing', 'content_planner_landing',
// Utilities
'file_converter_landing', 'smart_resizer_landing', 'qr_generator_landing', 'image_compressor_landing',
'color_palette_landing', 'text_to_image_landing', 'gradient_generator_landing'
];
// Category overview pages that should hide the sub-navigation
$category_overview_tools = [
'strategy',
'finance',
'growth',
'utilities',
'health',
'branding',
];
// Hero should only appear on main category overviews and Infographics (/tools/resources)
$hero_allowed_tools = [
'strategy',
'finance',
'growth',
'utilities',
'health',
'branding',
'resources',
];
$should_show_hero = (
$current_tool !== null &&
in_array($current_tool, $hero_allowed_tools, true) &&
!in_array($current_tool, $landing_pages, true)
);
if ($should_show_hero) {
echo tools_hero_html($current_category);
}
?>
<div style="display:flex; flex:1; align-items:flex-start;">
<!-- Column 2: Sub-navigation -->
<?php if (
!$is_home &&
!in_array($current_tool, $landing_pages) &&
!in_array($current_tool, $category_overview_tools)
): ?>
<div class="TheBrandNavSub">
<div style="margin-bottom: 20px; padding-left: 4px;">
<h3 style="font-size: 1.1em; font-weight: 600; color: #1e293b; margin: 0; display:flex; align-items:center; gap:8px;">
<span class="material-icons" style="font-size: 20px; color: var(--brand-blue, #046bbf);"><?php echo $nav_structure[$current_category]['icon']; ?></span>
<?php echo $nav_structure[$current_category]['label']; ?>
</h3>
</div>
<?php foreach ($nav_structure[$current_category]['tools'] as $tool_key => $tool_data): ?>
<?php
$is_tool_active = ($tool_key === $current_tool);
$tool_href = isset($tool_data['url']) ? $tool_data['url'] : "?tool=$tool_key";
?>
<a href="<?php echo $tool_href; ?>" class="sub-nav-item <?php echo $is_tool_active ? 'active' : ''; ?>">
<span class="material-icons"><?php echo $tool_data['icon']; ?></span>
<div class="sub-nav-text">
<span class="sub-nav-title"><?php echo $tool_data['label']; ?></span>
<span class="sub-nav-desc"><?php echo $tool_data['desc']; ?></span>
</div>
</a>
<?php endforeach; ?>
</div>
<?php endif; ?>
<!-- Column 3: Content -->
<div style="flex:1; min-width:0; <?php echo (
!$is_home &&
!in_array($current_tool, $landing_pages) &&
!in_array($current_tool, $category_overview_tools)
) ? 'padding-left: 24px; border-left: 1px solid rgba(0,0,0,0.05);' : ''; ?>">
<div class="tool-container">
<?php
if ($is_home) {
include 'includes/home.php';
} elseif ($current_tool === 'canva_alternative_landing') {
include 'pages/canva-alternative.php';
} elseif ($current_tool === 'infographics_landing') {
include 'pages/infographics.php';
} elseif ($current_tool === 'templates_landing') {
include 'pages/templates.php';
} elseif ($current_tool === 'stock_photos_landing') {
include 'pages/stock-photos.php';
} elseif ($current_tool === 'brand_kits_landing') {
include 'pages/brand-kits.php';
} elseif ($current_tool === 'brand_360_landing') {
include 'pages/brand-360.php';
} elseif ($current_tool === 'create_ai_image_landing') {
include 'pages/create-ai-image.php';
} elseif ($current_tool === 'website_templates_landing') {
include 'pages/website-templates.php';
} elseif ($current_tool === 'icons_landing') {
include 'pages/icons.php';
} elseif ($current_tool === 'health_check_landing') {
include 'pages/health-check.php';
} elseif ($current_tool === 'cx_impact_landing') {
include 'pages/cx-impact.php';
} elseif ($current_tool === 'brand_equity_landing') {
include 'pages/brand-equity.php';
} elseif ($current_tool === 'email_signature_landing') {
include 'pages/email-signature.php';
} elseif ($current_tool === 'trust_score_landing') {
include 'pages/trust-score.php';
} elseif ($current_tool === 'consistency_landing') {
include 'pages/consistency.php';
} elseif ($current_tool === 'perception_landing') {
include 'pages/perception.php';
} elseif ($current_tool === 'rebrand_roi_landing') {
include 'pages/rebrand-roi.php';
} elseif ($current_tool === 'brand_blogs_landing') {
include 'pages/brand-blogs.php';
} elseif ($current_tool === 'background_creator_landing') {
include 'pages/background-creator.php';
} elseif ($current_tool === 'mood_board_landing') {
include 'pages/mood-board.php';
} elseif ($current_tool === 'gap_analysis_landing') {
include 'pages/gap-analysis.php';
} elseif ($current_tool === 'pricing_strategy_landing') {
include 'pages/pricing-strategy.php';
} elseif ($current_tool === 'ltv_calculator_landing') {
include 'pages/ltv-calculator.php';
} elseif ($current_tool === 'roi_suite_landing') {
include 'pages/roi-suite.php';
} elseif ($current_tool === 'invoice_generator_landing') {
include 'pages/invoice-generator.php';
} elseif ($current_tool === 'quotation_generator_landing') {
include 'pages/quotation-generator.php';
} elseif ($current_tool === 'tam_calculator_landing') {
include 'pages/tam-calculator.php';
} elseif ($current_tool === 'viral_social_landing') {
include 'pages/viral-social.php';
} elseif ($current_tool === 'content_planner_landing') {
include 'pages/content-planner.php';
} elseif ($current_tool === 'file_converter_landing') {
include 'pages/file-converter.php';
} elseif ($current_tool === 'smart_resizer_landing') {
include 'pages/smart-resizer.php';
} elseif ($current_tool === 'qr_generator_landing') {
include 'pages/qr-generator.php';
} elseif ($current_tool === 'image_compressor_landing') {
include 'pages/image-compressor.php';
} elseif ($current_tool === 'color_palette_landing') {
include 'pages/color-palette.php';
} elseif ($current_tool === 'text_to_image_landing') {
include 'pages/text-to-image.php';
} elseif ($current_tool === 'gradient_generator_landing') {
include 'pages/gradient-generator.php';
} elseif ($current_tool === 'resources') {
include 'includes/resources_infographics.php';
} elseif ($current_tool === 'brand_insights') {
include 'includes/resources_brand_insights.php';
} elseif ($current_tool === 'brand_blogs') {
include 'includes/brand_blogs.php';
} elseif ($current_tool === 'brand') {
include 'includes/brand_calculator.php';
} elseif ($current_tool === 'trust') {
include 'includes/brand_trust_calculator.php';
} elseif ($current_tool === 'consistency') {
include 'includes/brand_consistency_audit.php';
} elseif ($current_tool === 'ltv') {
include 'includes/ltv_calculator.php';
} elseif ($current_tool === 'roi') {
include 'includes/roi_calculator.php';
} elseif ($current_tool === 'invoice') {
include 'includes/invoice_generator.php';
} elseif ($current_tool === 'quote') {
include 'includes/quotation_generator.php';
} elseif ($current_tool === 'pricing') {
include 'includes/pricing_calculator.php';
} elseif ($current_tool === 'rebrand') {
include 'includes/rebranding_calculator.php';
} elseif ($current_tool === 'background_creator') {
echo '<iframe src="https://www.thebrand.ai/wowX/bgSVG/index.php" style="width:100%; height:100%; min-height:800px; border:none;"></iframe>';
} elseif ($current_tool === 'mood_board') {
include 'includes/mood_board.php';
} elseif ($current_tool === 'gap') {
include 'includes/gap_analyzer.php';
} elseif ($current_tool === 'value') {
include 'includes/value_calculator.php';
} elseif ($current_tool === 'awareness') {
include 'includes/awareness_projector.php';
} elseif ($current_tool === 'social') {
include 'includes/social_impact_calculator.php';
} elseif ($current_tool === 'content') {
include 'includes/content_builder.php';
} elseif ($current_tool === 'experience') {
include 'includes/experience_calculator.php';
} elseif ($current_tool === 'converter') {
include 'includes/converter.php';
} elseif ($current_tool === 'smart_features') {
include 'includes/smart_features.php';
} elseif ($current_tool === 'signature') {
include 'includes/email_signature.php';
} elseif ($current_tool === 'qr') {
include 'includes/qr_generator.php';
} elseif ($current_tool === 'image_compressor') {
include 'includes/image_compressor.php';
} elseif ($current_tool === 'color_palette') {
include 'includes/color_palette.php';
} elseif ($current_tool === 'text_image') {
include 'includes/text_to_image.php';
} elseif ($current_tool === 'gradient_generator') {
include 'includes/gradient_generator.php';
} elseif ($current_tool === 'health') {
render_category_overview(
'health',
'Run a quick health check on your business',
'Turn vague “something feels off” into clear diagnostics so you know exactly where revenue, retention, or experience is leaking.',
'Use these health tools to benchmark stability, quantify CX impact, and walk away with a simple action plan instead of another vague to-do list.'
);
} elseif ($current_tool === 'branding') {
render_category_overview(
'branding',
'Build a brand people remember and pay more for',
'Turn every touchpoint into proof that your brand is premium, consistent, and worth a higher price tag.',
'Use these branding tools to audit perception, tighten consistency, and ship assets that make you look like the market leader—even if you are still scrappy and bootstrapped.'
);
} elseif ($current_tool === 'strategy') {
render_category_overview(
'strategy',
'Make smarter strategic moves with less guesswork',
'Spot hidden gaps, align your offers, and price with confidence so every campaign pushes in the same direction.',
'Start with a quick gap analysis, layer in pricing intelligence, and use these tools to turn scattered ideas into a focused roadmap your team can actually execute.'
);
} elseif ($current_tool === 'finance') {
render_category_overview(
'finance',
'Turn your marketing into a predictable money machine',
'Know exactly which campaigns print profit, which ones burn cash, and where to double down.',
'Use these financial tools to calculate LTV, prove ROI, and send clean invoices and quotes so the money side of growth stops being a black box.'
);
} elseif ($current_tool === 'growth') {
render_category_overview(
'growth',
'Design growth that is intentional, not accidental',
'Map your true market size, predict virality, and plan content that compounds instead of fading after 24 hours.',
'Use these growth tools to understand your TAM, pressure-test campaign ideas, and build a content engine that keeps your brand in front of the right people every week.'
);
} elseif ($current_tool === 'utilities') {
render_category_overview(
'utilities',
'Polish every asset so your brand looks “expensive” everywhere',
'Compress, resize, convert, and generate on-brand visuals in minutes instead of wrestling with clunky software.',
'These utilities handle the unsexy but critical details—so your pages load fast, your assets look sharp, and your brand feels premium on every screen.'
);
} else {
echo '<div class="card" style="padding:40px; text-align:center;"><h2>Tool Not Found</h2><p>Please select a tool from the menu.</p></div>';
}
?>
</div>
</div>
</div></div>
</div>
</div>
</div>
<div class="TheBrandMobileNavShell">
<?php if (
!$is_home &&
!in_array($current_tool, $landing_pages) &&
!in_array($current_tool, $category_overview_tools)
): ?>
<div class="TheBrandNavSubMobile">
<div style="display:flex; align-items:center; gap:8px;">
<span class="material-icons" style="font-size: 18px; color: var(--brand-blue, #046bbf);"><?php echo $nav_structure[$current_category]['icon']; ?></span>
<h3 style="font-size: 0.9em; font-weight: 600; color: #1e293b; margin: 0;">
<?php echo $nav_structure[$current_category]['label']; ?>
</h3>
</div>
<div class="TheBrandNavSubMobileList">
<?php foreach ($nav_structure[$current_category]['tools'] as $tool_key => $tool_data): ?>
<?php
$is_tool_active = ($tool_key === $current_tool);
$tool_href = isset($tool_data['url']) ? $tool_data['url'] : "?tool=$tool_key";
?>
<a href="<?php echo $tool_href; ?>" class="sub-nav-item <?php echo $is_tool_active ? 'active' : ''; ?>">
<span class="sub-nav-title"><?php echo $tool_data['label']; ?></span>
</a>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<div class="TheBrandNavMainMobile">
<ul class="TheBrandTabList" role="tablist">
<?php foreach ($nav_structure as $cat_key => $cat_data): ?>
<?php
$is_active = ($cat_key === $current_category);
$cat_url = BASE_URL . '/tools/' . $cat_key;
?>
<li role="tab" class="brand-icon-menu-btn" aria-selected="<?php echo $is_active ? 'true' : 'false'; ?>">
<button type="button" class="resetElements" onclick="location.href='<?php echo $cat_url; ?>'">
<span class="material-icons"><?php echo $cat_data['icon']; ?></span>
<span><?php echo $cat_data['label']; ?></span>
</button>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<!-- Share Modal -->
<div id="share-modal" class="share-modal-overlay" style="display: none;">
<div class="share-modal-content">
<button id="close-share-modal" class="close-modal-btn">×</button>
<div class="share-header">
<div class="share-icon-wrapper">
<span class="material-icons">campaign</span>
</div>
<h2>Share the Secret</h2>
<p>You've discovered the ultimate growth toolkit. Be the hero who shares it with your network.</p>
</div>
<div class="share-actions">
<button class="share-btn twitter" onclick="shareToTwitter()">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.84 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
Share on Twitter
</button>
<button class="share-btn linkedin" onclick="shareToLinkedIn()">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 21.227.792 22 1.771 22h20.451C23.2 22 24 21.227 24 20.271V1.729C24 .774 23.2 0 22.225 0z"/></svg>
Share on LinkedIn
</button>
</div>
</div>
</div>
<div id="embed-modal" class="embed-modal-overlay" style="display: none;">
<div class="embed-modal-content">
<button id="close-embed-modal" class="close-modal-btn">×</button>
<div class="embed-header">
<h2>Embed this tool on your site</h2>
<p>Customize your widget once and drop the code into any page.</p>
</div>
<div class="embed-grid">
<div class="embed-column">
<h3 class="embed-section-title">Your partner profile</h3>
<div class="embed-field">
<label for="embed-partner-name">Website or brand name</label>
<input type="text" id="embed-partner-name" placeholder="Acme Marketing">
</div>
<div class="embed-field">
<label for="embed-partner-url">Primary website URL</label>
<input type="text" id="embed-partner-url" placeholder="https://example.com">
</div>
<div class="embed-field">
<label for="embed-partner-email">Work email (optional)</label>
<input type="email" id="embed-partner-email" placeholder="you@example.com">
</div>
<div class="embed-hint">
This stays on your browser so you do not have to refill it every time.
</div>
</div>
<div class="embed-column">
<h3 class="embed-section-title">Widget settings</h3>
<div class="embed-field">
<label>Theme</label>
<div class="embed-options-row">
<button type="button" class="embed-option-btn" data-embed-theme="light">Light</button>
<button type="button" class="embed-option-btn" data-embed-theme="dark">Dark</button>
</div>
</div>
<div class="embed-field">
<label>Attribution style</label>
<div class="embed-options-row">
<button type="button" class="embed-option-btn" data-embed-attr="light">Standard</button>
<button type="button" class="embed-option-btn" data-embed-attr="dark">Bold</button>
<button type="button" class="embed-option-btn" data-embed-attr="minimal">Minimal</button>
</div>
</div>
<div class="embed-field">
<label for="embed-width">Width</label>
<select id="embed-width">
<option value="100%">Responsive (recommended)</option>
<option value="800px">Fixed 800px</option>
<option value="600px">Fixed 600px</option>
</select>
</div>
<div class="embed-field">
<label for="embed-height">Minimum height</label>
<select id="embed-height">
<option value="620px">620px</option>
<option value="720px">720px</option>
<option value="820px">820px</option>
</select>
</div>
<div class="embed-field">
<label for="embed-code">Copy and paste this snippet</label>
<textarea id="embed-code" rows="8" readonly></textarea>
<button id="copy-embed-code" class="embed-copy-btn">Copy embed code</button>
</div>
<div class="embed-hint">
Paste this into your CMS or HTML. The widget will auto-resize using our height script.
</div>
</div>
</div>
</div>
</div>
<style>
.share-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.share-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.share-modal-content {
background: white;
padding: 2.5rem;
border-radius: 24px;
width: 90%;
max-width: 500px;
text-align: center;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
transform: translateY(20px);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.share-modal-overlay.active .share-modal-content {
transform: translateY(0);
}
.close-modal-btn {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 24px;
color: #94a3b8;
cursor: pointer;
transition: color 0.2s;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.close-modal-btn:hover {
color: #1e293b;
background: #f1f5f9;
}
.embed-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.25);
backdrop-filter: blur(14px);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.embed-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.embed-modal-content {
background: white;
padding: 2.2rem;
border-radius: 20px;
width: 96%;
max-width: 860px;
position: relative;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.08);
transform: translateY(18px);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.embed-modal-overlay.active .embed-modal-content {
transform: translateY(0);
}
.embed-header h2 {
font-size: 1.6rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.3rem;
}
.embed-header p {
color: #64748b;
font-size: 0.98rem;
line-height: 1.6;
margin-bottom: 1.6rem;
}
.embed-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
gap: 1.8rem;
}
.embed-column {
padding: 1.2rem 1.4rem;
border-radius: 16px;
background: linear-gradient(135deg, #f8fafc, #eef2ff);
}
.embed-column:nth-child(2) {
background: linear-gradient(135deg, #f9fafb, #e0f2fe);
}
.embed-section-title {
font-size: 0.95rem;
font-weight: 600;
color: #0f172a;
margin: 0 0 0.8rem;
}
.embed-field {
margin-bottom: 0.9rem;
}
.embed-field label {
display: block;
font-size: 0.8rem;
font-weight: 500;
color: #64748b;
margin-bottom: 0.25rem;
}
.embed-field input,
.embed-field select,
.embed-field textarea {
width: 100%;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.6);
padding: 0.55rem 0.7rem;
font-size: 0.9rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #0f172a;
background: rgba(255, 255, 255, 0.9);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
resize: vertical;
}
.embed-field input:focus,
.embed-field select:focus,
.embed-field textarea:focus {
border-color: #6366f1;
box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4);
background: #ffffff;
}
.embed-field textarea {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
line-height: 1.4;
}
.embed-options-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.embed-option-btn {
flex: 0 0 auto;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.8);
padding: 0.35rem 0.9rem;
font-size: 0.8rem;
font-weight: 500;
background: rgba(255, 255, 255, 0.9);
color: #0f172a;
cursor: pointer;
transition: all 0.18s ease-out;
}
.embed-option-btn.active {
background: linear-gradient(135deg, #4f46e5, #6366f1);
border-color: transparent;
color: #ffffff;
box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
}
.embed-option-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
}
.embed-copy-btn {
margin-top: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 0.95rem;
border-radius: 999px;
border: none;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
background: linear-gradient(135deg, #22c55e, #16a34a);
color: #ffffff;
box-shadow: 0 8px 18px rgba(22, 163, 74, 0.35);
transition: all 0.2s ease-out;
}
.embed-copy-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(22, 163, 74, 0.5);
}
.embed-hint {
margin-top: 0.5rem;
font-size: 0.75rem;
color: #64748b;
}
@media (max-width: 840px) {
.embed-grid {
grid-template-columns: minmax(0, 1fr);
}
.embed-column {
padding: 1rem 1.1rem;
}
}
background: #f1f5f9;
}
.share-icon-wrapper {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #a78bfa, #ec4899);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3);
}
.share-icon-wrapper .material-icons {
font-size: 32px;
}
.share-header h2 {
font-size: 1.75rem;
font-weight: 800;
color: #1e293b;
margin-bottom: 0.75rem;
font-family: 'Playfair Display', serif;
}
.share-header p {
color: #64748b;
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.share-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
.share-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 1rem;
border-radius: 12px;
border: none;
font-weight: 600;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.share-btn svg {
width: 24px;
height: 24px;
}
.share-btn.twitter {
background: #1DA1F2;
color: white;
box-shadow: 0 4px 15px rgba(29, 161, 242, 0.3);
}
.share-btn.twitter:hover {
background: #0c85d0;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(29, 161, 242, 0.4);
}
.share-btn.linkedin {
background: #0077b5;
color: white;
box-shadow: 0 4px 15px rgba(0, 119, 181, 0.3);
}
.share-btn.linkedin:hover {
background: #005885;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 119, 181, 0.4);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const shareBtn = document.getElementById('share-tools-btn');
const shareModal = document.getElementById('share-modal');
const closeShareBtn = document.getElementById('close-share-modal');
if (shareBtn && shareModal) {
shareBtn.addEventListener('click', function(e) {
e.preventDefault();
shareModal.style.display = 'flex';
setTimeout(function() {
shareModal.classList.add('active');
}, 10);
});
function closeShareModal() {
shareModal.classList.remove('active');
setTimeout(function() {
shareModal.style.display = 'none';
}, 300);
}
closeShareBtn.addEventListener('click', closeShareModal);
shareModal.addEventListener('click', function(e) {
if (e.target === shareModal) {
closeShareModal();
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && shareModal.classList.contains('active')) {
closeShareModal();
}
});
}
const mobileNav = document.querySelector('.TheBrandNavMainMobile');
if (mobileNav && window.matchMedia('(max-width: 768px)').matches) {
const activeItem = mobileNav.querySelector('.brand-icon-menu-btn[aria-selected="true"]');
if (activeItem) {
const rect = activeItem.getBoundingClientRect();
const containerRect = mobileNav.getBoundingClientRect();
const offset = rect.left - containerRect.left - 12;
mobileNav.scrollLeft += offset;
}
}
const embedBtn = document.getElementById('embed-tools-btn');
const embedModal = document.getElementById('embed-modal');
const closeEmbedBtn = document.getElementById('close-embed-modal');
const partnerNameInput = document.getElementById('embed-partner-name');
const partnerUrlInput = document.getElementById('embed-partner-url');
const partnerEmailInput = document.getElementById('embed-partner-email');
const themeButtons = document.querySelectorAll('.embed-option-btn[data-embed-theme]');
const attrButtons = document.querySelectorAll('.embed-option-btn[data-embed-attr]');
const widthSelect = document.getElementById('embed-width');
const heightSelect = document.getElementById('embed-height');
const embedCodeTextarea = document.getElementById('embed-code');
const copyEmbedBtn = document.getElementById('copy-embed-code');
const currentToolKey = "<?php echo htmlspecialchars($current_tool ?? '', ENT_QUOTES); ?>";
const toolsBaseUrl = "<?php echo BASE_URL; ?>/tools/";
const profileStorageKey = 'brandaiEmbedProfile';
function safeParseUrl(raw) {
if (!raw) {
return null;
}
try {
return new URL(raw);
} catch (e) {
try {
return new URL('https://' + raw);
} catch (e2) {
return null;
}
}
}
function buildPartnerId(profile) {
const parsed = safeParseUrl(profile.websiteUrl || '');
if (!parsed || !parsed.host) {
return 'embed-partner';
}
let host = parsed.host.toLowerCase();
if (host.indexOf('www.') === 0) {
host = host.substring(4);
}
host = host.replace(/[^a-z0-9\-]/g, '-');
if (!host) {
return 'embed-partner';
}
return host;
}
function loadProfile() {
try {
const stored = window.localStorage.getItem(profileStorageKey);
if (!stored) {
return null;
}
return JSON.parse(stored);
} catch (e) {
return null;
}
}
function saveProfile(profile) {
try {
window.localStorage.setItem(profileStorageKey, JSON.stringify(profile));
} catch (e) {
}
}
function pickActiveValue(nodes, dataKey, fallback) {
let active = null;
nodes.forEach(function(btn) {
if (btn.classList.contains('active')) {
active = btn.getAttribute(dataKey);
}
});
return active || fallback;
}
function setActiveButton(nodes, value, dataKey) {
nodes.forEach(function(btn) {
const v = btn.getAttribute(dataKey);
if (v === value) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
}
function randomId() {
return 'brandai-' + Math.random().toString(36).substring(2, 10);
}
function buildEmbedSnippet() {
const profile = {
name: partnerNameInput ? partnerNameInput.value.trim() : '',
websiteUrl: partnerUrlInput ? partnerUrlInput.value.trim() : '',
email: partnerEmailInput ? partnerEmailInput.value.trim() : ''
};
if (profile.name || profile.websiteUrl || profile.email) {
saveProfile(profile);
}
const themeValue = pickActiveValue(themeButtons, 'data-embed-theme', 'light');
const attrValue = pickActiveValue(attrButtons, 'data-embed-attr', 'light');
const widthValue = widthSelect ? widthSelect.value : '100%';
const heightValue = heightSelect ? heightSelect.value : '620px';
const partnerId = buildPartnerId(profile);
const iframeId = randomId();
const queryParts = [];
if (currentToolKey) {
queryParts.push('tool=' + encodeURIComponent(currentToolKey));
}
queryParts.push('embed=1');
if (partnerId) {
queryParts.push('partner=' + encodeURIComponent(partnerId));
}
queryParts.push('theme=' + encodeURIComponent(themeValue));
queryParts.push('attributionStyle=' + encodeURIComponent(attrValue));
queryParts.push('iframeId=' + encodeURIComponent(iframeId));
const src = toolsBaseUrl + '?' + queryParts.join('&');
const utm = [
'ref=' + encodeURIComponent(partnerId || 'embed-partner'),
'utm_source=embed',
'utm_medium=widget',
'utm_campaign=' + encodeURIComponent(currentToolKey || 'tools')
].join('&');
const brandRoot = "<?php
$embed_public_base = BASE_URL;
$parsed_embed_public = parse_url(BASE_URL);
if (isset($parsed_embed_public['scheme'], $parsed_embed_public['host'])) {
$embed_public_base = $parsed_embed_public['scheme'] . '://' . $parsed_embed_public['host'];
}
echo rtrim($embed_public_base, '/');
?>";
const toolsRoot = brandRoot + '/tools';
const brandLink = brandRoot + '/?' + utm;
const toolsLink = toolsRoot + '/?' + utm;
const blockLines = [];
blockLines.push('<div class="brandai-embed-wrapper" style="max-width:100%;margin:0 auto 8px auto;">');
blockLines.push(' <iframe');
blockLines.push(' src="' + src + '"');
blockLines.push(' style="width: ' + widthValue + '; min-height: ' + heightValue + '; border: 0; overflow: hidden;"');
blockLines.push(' loading="lazy"');
blockLines.push(' referrerpolicy="strict-origin-when-cross-origin"');
blockLines.push(' sandbox="allow-scripts allow-same-origin allow-forms allow-popups"');
blockLines.push(' data-brandai-embed="1"');
blockLines.push(' data-brandai-embed-id="' + iframeId + '"');
blockLines.push(' ></iframe>');
blockLines.push(' <div class="brandai-embed-attribution-outside" style="margin-top:6px;font-size:11px;color:#64748b;font-family:system-ui,-apple-system,BlinkMacSystemFont,\'Segoe UI\',sans-serif;text-align:right;">');
blockLines.push(' <span>Powered by </span><a href="' + brandLink + '" target="_blank" rel="noopener" style="color:#0f172a;font-weight:600;text-decoration:none;">Brand AI</a>');
blockLines.push(' <span style="opacity:0.6;padding:0 4px;">·</span>');
blockLines.push(' <a href="' + toolsLink + '" target="_blank" rel="noopener" style="color:#0f172a;font-weight:600;text-decoration:none;">200+ Free Tools</a>');
blockLines.push(' </div>');
blockLines.push('</div>');
const scriptLines = [];
scriptLines.push('<script>');
scriptLines.push('(function(){');
scriptLines.push(' function handleBrandAIResize(event){');
scriptLines.push(' var d = event.data;');
scriptLines.push(' if(!d || d.type !== "BRANDAI_EMBED_HEIGHT"){ return; }');
scriptLines.push(' var selector = d.iframeId ? \'iframe[data-brandai-embed-id=\"\' + d.iframeId + \'\"]\' : \'iframe[data-brandai-embed]\';');
scriptLines.push(' var frame = document.querySelector(selector);');
scriptLines.push(' if(!frame){ return; }');
scriptLines.push(' if(typeof d.height === "number" && d.height > 0){');
scriptLines.push(' frame.style.height = d.height + "px";');
scriptLines.push(' }');
scriptLines.push(' }');
scriptLines.push(' if(!window.__brandaiEmbedHeightListener){');
scriptLines.push(' window.__brandaiEmbedHeightListener = true;');
scriptLines.push(' window.addEventListener("message", handleBrandAIResize);');
scriptLines.push(' }');
scriptLines.push('})();');
scriptLines.push('<' + '/script>');
const fullSnippet = blockLines.join('\n') + '\n' + scriptLines.join('\n');
if (embedCodeTextarea) {
embedCodeTextarea.value = fullSnippet;
}
}
if (embedBtn && embedModal) {
function openEmbedModal(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
const profile = loadProfile();
if (profile) {
if (partnerNameInput && profile.name) {
partnerNameInput.value = profile.name;
}
if (partnerUrlInput && profile.websiteUrl) {
partnerUrlInput.value = profile.websiteUrl;
}
if (partnerEmailInput && profile.email) {
partnerEmailInput.value = profile.email;
}
}
setActiveButton(themeButtons, 'light', 'data-embed-theme');
setActiveButton(attrButtons, 'light', 'data-embed-attr');
if (widthSelect) {
widthSelect.value = '100%';
}
if (heightSelect) {
heightSelect.value = '620px';
}
buildEmbedSnippet();
embedModal.style.display = 'flex';
setTimeout(function() {
embedModal.classList.add('active');
}, 10);
}
embedBtn.addEventListener('click', openEmbedModal);
window.BrandAI_openEmbedModal = openEmbedModal;
function closeEmbedModal() {
embedModal.classList.remove('active');
setTimeout(function() {
embedModal.style.display = 'none';
}, 300);
}
if (closeEmbedBtn) {
closeEmbedBtn.addEventListener('click', closeEmbedModal);
}
embedModal.addEventListener('click', function(e) {
if (e.target === embedModal) {
closeEmbedModal();
}
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && embedModal.classList.contains('active')) {
closeEmbedModal();
}
});
themeButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
const value = btn.getAttribute('data-embed-theme') || 'light';
setActiveButton(themeButtons, value, 'data-embed-theme');
buildEmbedSnippet();
});
});
attrButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
const value = btn.getAttribute('data-embed-attr') || 'light';
setActiveButton(attrButtons, value, 'data-embed-attr');
buildEmbedSnippet();
});
});
if (widthSelect) {
widthSelect.addEventListener('change', buildEmbedSnippet);
}
if (heightSelect) {
heightSelect.addEventListener('change', buildEmbedSnippet);
}
if (partnerNameInput) {
partnerNameInput.addEventListener('blur', buildEmbedSnippet);
}
if (partnerUrlInput) {
partnerUrlInput.addEventListener('blur', buildEmbedSnippet);
}
if (partnerEmailInput) {
partnerEmailInput.addEventListener('blur', buildEmbedSnippet);
}
if (copyEmbedBtn && embedCodeTextarea) {
copyEmbedBtn.addEventListener('click', function() {
const text = embedCodeTextarea.value || '';
if (!text) {
return;
}
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(function() {
if (typeof toastr !== 'undefined') {
toastr.success('Embed code copied to clipboard.');
}
}).catch(function() {
});
} else {
embedCodeTextarea.select();
try {
document.execCommand('copy');
if (typeof toastr !== 'undefined') {
toastr.success('Embed code copied to clipboard.');
}
} catch (e) {
}
window.getSelection().removeAllRanges();
}
});
}
}
});
function shareToTwitter() {
const text = "Stop paying for marketing tools. I found a hidden gem with 50+ professional assets—ROI calculators, AI generators, and viral templates. All free. This is the unfair advantage you've been looking for.";
const url = "https://www.thebrand.ai/wowX/tools/";
const hashtags = "Marketing,GrowthHacking,FreeTools,TheBrand";
const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}&hashtags=${encodeURIComponent(hashtags)}`;
window.open(shareUrl, '_blank', 'width=600,height=400');
}
function shareToLinkedIn() {
const text = "The best things in life are free, but only if you know where to look. I just uncovered a massive library of 50+ professional marketing tools that replace expensive subscriptions. We're talking AI visual generators, strategic frameworks, and financial calculators. It's rare to find this level of quality without a price tag. If you're serious about growth, bookmark this now.";
const url = "https://www.thebrand.ai/wowX/tools/";
navigator.clipboard.writeText(text + " " + url).then(() => {
if (typeof toastr !== 'undefined') {
toastr.success('Caption copied to clipboard! Paste it in your post.');
} else {
alert('Caption copied to clipboard! Paste it in your post.');
}
setTimeout(() => {
const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
window.open(shareUrl, '_blank', 'width=600,height=600');
}, 1000);
}).catch(err => {
const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
window.open(shareUrl, '_blank', 'width=600,height=600');
});
}
</script>
<script>
// Define BASE_URL for JS tools
window.BASE_URL = '<?php echo BASE_URL; ?>';
</script>
<script src="<?php echo BASE_URL; ?>/tools/js/analytics.js"></script>
</body>
</html>