2025-08-04 22:20:30 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > SEO Image Renamer - AI-Powered Image SEO Tool< / title >
< link rel = "stylesheet" href = "styles.css" >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" >
< / head >
< body >
< header >
< div class = "container" >
< div class = "logo" >
2025-08-05 00:15:36 +02:00
< h1 > < i class = "fas fa-image" > < / i > SEO Image Renamer< / h1 >
2025-08-04 22:20:30 +02:00
< / div >
< nav >
< ul >
< li > < a href = "#features" > Features< / a > < / li >
< li > < a href = "#how-it-works" > How It Works< / a > < / li >
< li > < a href = "#pricing" > Pricing< / a > < / li >
< li > < a href = "#" class = "btn btn-primary" > Sign In< / a > < / li >
< / ul >
< / nav >
2025-08-05 00:15:36 +02:00
< div class = "mobile-menu" >
< i class = "fas fa-bars" > < / i >
< / div >
2025-08-04 22:20:30 +02:00
< / div >
< / header >
< main >
< section class = "hero" >
< div class = "container" >
2025-08-05 00:15:36 +02:00
< div class = "hero-grid" >
< div class = "hero-content" >
< div class = "hero-badge" >
< i class = "fas fa-bolt" > < / i >
< span > AI-Powered< / span >
< / div >
< h1 > Save time! Bulk rename your images individually for better SEO performance< / h1 >
< p > Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically. No more manual renaming - just upload, enhance, and download.< / p >
< div class = "hero-features" >
< div class = "mini-feature" >
< i class = "fas fa-eye" > < / i >
< span > AI Vision Analysis< / span >
< / div >
< div class = "mini-feature" >
< i class = "fas fa-magic" > < / i >
< span > Smart Keyword Enhancement< / span >
< / div >
< div class = "mini-feature" >
< i class = "fas fa-download" > < / i >
< span > Instant ZIP Download< / span >
< / div >
< / div >
< div class = "hero-stats" >
< div class = "stat" >
< span class = "stat-number" > 10k+< / span >
< span class = "stat-label" > Images Processed< / span >
< / div >
< div class = "stat" >
< span class = "stat-number" > 95%< / span >
< span class = "stat-label" > Time Saved< / span >
< / div >
< / div >
< / div >
< div class = "hero-upload" >
< div id = "drop-area" class = "drop-area" >
< div class = "drop-area-content" >
< div class = "upload-icon" >
< i class = "fas fa-cloud-upload-alt" > < / i >
< / div >
< h3 > Drop your images here< / h3 >
< p > or click to browse files< / p >
< button id = "browse-btn" class = "upload-btn" >
< i class = "fas fa-folder-open" > < / i >
< span > Choose Files< / span >
< / button >
< input type = "file" id = "file-input" accept = "image/*" multiple style = "display: none;" >
< div class = "supported-formats" >
< span > Supports: JPG, PNG, WEBP, GIF< / span >
< / div >
< / div >
< / div >
< / div >
2025-08-04 22:20:30 +02:00
< / div >
< / div >
< / section >
2025-08-05 00:15:36 +02:00
< section id = "workflow-section" class = "workflow-section" style = "display: none;" >
2025-08-04 22:20:30 +02:00
< div class = "container" >
2025-08-05 00:15:36 +02:00
< div id = "keywords-section" class = "keywords-section" >
< div class = "workflow-step" >
< div class = "step-header" >
< i class = "fas fa-tags" > < / i >
< h3 > Step 1: Add Your Keywords< / h3 >
< p > Help our AI understand your content better< / p >
< / div >
< div class = "keywords-input" >
2025-08-05 21:46:06 +02:00
< input type = "text" id = "keyword-input" placeholder = "Enter keywords or phrases (e.g., african barbershop amsterdam, professional wedding photography)" >
2025-08-05 00:15:36 +02:00
< button id = "enhance-btn" class = "btn btn-primary" disabled >
2025-08-05 21:46:06 +02:00
< i class = "fas fa-magic" > < / i > Generate SEO Keywords
2025-08-05 00:15:36 +02:00
< / button >
< / div >
< div id = "keywords-display" class = "keywords-display" >
<!-- Keywords will be displayed here -->
2025-08-04 22:20:30 +02:00
< / div >
< / div >
< / div >
2025-08-05 00:15:36 +02:00
< div id = "images-preview" class = "images-preview" >
< div class = "workflow-step" >
< div class = "step-header" >
< i class = "fas fa-images" > < / i >
< h3 > Step 2: Review & Download< / h3 >
< p > Your AI-generated filenames are ready< / p >
< / div >
< div id = "images-container" class = "images-container" >
<!-- Images will be displayed here -->
< / div >
< div class = "actions" >
< button id = "download-btn" class = "btn btn-success btn-large" disabled >
< i class = "fas fa-download" > < / i > Download Renamed Images as ZIP
< / button >
< / div >
2025-08-04 22:20:30 +02:00
< / div >
< / div >
< / div >
< / section >
< section id = "features" class = "features" >
< div class = "container" >
2025-08-05 00:15:36 +02:00
< div class = "section-header" >
< h2 > Powerful Features for Better SEO< / h2 >
< p > Everything you need to optimize your images for search engines< / p >
< / div >
2025-08-04 22:20:30 +02:00
< div class = "features-grid" >
< div class = "feature-card" >
2025-08-05 00:15:36 +02:00
< div class = "feature-icon" >
< i class = "fas fa-robot" > < / i >
< / div >
2025-08-04 22:20:30 +02:00
< h3 > AI-Powered Naming< / h3 >
2025-08-05 00:15:36 +02:00
< p > Advanced AI generates SEO-friendly filenames that help your images rank higher in search results.< / p >
2025-08-04 22:20:30 +02:00
< / div >
< div class = "feature-card" >
2025-08-05 00:15:36 +02:00
< div class = "feature-icon" >
< i class = "fas fa-eye" > < / i >
< / div >
2025-08-04 22:20:30 +02:00
< h3 > Image Recognition< / h3 >
< p > AI analyzes your images to understand content and context for more accurate naming.< / p >
< / div >
< div class = "feature-card" >
2025-08-05 00:15:36 +02:00
< div class = "feature-icon" >
< i class = "fas fa-key" > < / i >
< / div >
2025-08-04 22:20:30 +02:00
< h3 > Keyword Enhancement< / h3 >
< p > Enhance your keywords with AI-suggested synonyms for better SEO performance.< / p >
< / div >
< div class = "feature-card" >
2025-08-05 00:15:36 +02:00
< div class = "feature-icon" >
< i class = "fas fa-file-archive" > < / i >
< / div >
2025-08-04 22:20:30 +02:00
< h3 > Easy Download< / h3 >
< p > Download all your renamed images in a single ZIP file for easy implementation.< / p >
< / div >
< / div >
< / div >
< / section >
< section id = "how-it-works" class = "how-it-works" >
< div class = "container" >
2025-08-05 00:15:36 +02:00
< div class = "section-header" >
< h2 > How It Works< / h2 >
< p > Get better SEO for your images in just three simple steps< / p >
< / div >
2025-08-04 22:20:30 +02:00
< div class = "steps" >
< div class = "step" >
< div class = "step-number" > 1< / div >
< h3 > Upload Images< / h3 >
< p > Drag and drop your images or browse your files to upload them to our platform.< / p >
< / div >
< div class = "step" >
< div class = "step-number" > 2< / div >
< h3 > Add Keywords< / h3 >
< p > Provide keywords that describe your images, or let our AI enhance them for better SEO.< / p >
< / div >
< div class = "step" >
< div class = "step-number" > 3< / div >
< h3 > Download & Implement< / h3 >
< p > Download your renamed images as a ZIP file and use them on your website.< / p >
< / div >
< / div >
< / div >
< / section >
< section id = "pricing" class = "pricing" >
< div class = "container" >
2025-08-05 00:15:36 +02:00
< div class = "section-header" >
< h2 > Simple, Transparent Pricing< / h2 >
< p > Choose the plan that works best for you< / p >
< / div >
2025-08-04 22:20:30 +02:00
< div class = "pricing-grid" >
< div class = "pricing-card" >
< h3 > Basic< / h3 >
< div class = "price" > $0< span > /month< / span > < / div >
< ul >
< li > 50 images per month< / li >
< li > AI-powered naming< / li >
< li > Keyword enhancement< / li >
< li > ZIP download< / li >
< / ul >
2025-08-05 00:15:36 +02:00
< button class = "btn btn-outline" > Get Started< / button >
2025-08-04 22:20:30 +02:00
< / div >
< div class = "pricing-card featured" >
< div class = "featured-badge" > Most Popular< / div >
< h3 > Pro< / h3 >
< div class = "price" > $9< span > /month< / span > < / div >
< ul >
< li > 500 images per month< / li >
< li > AI-powered naming< / li >
< li > Keyword enhancement< / li >
< li > ZIP download< / li >
< li > Priority support< / li >
< / ul >
< button class = "btn btn-primary" > Get Started< / button >
< / div >
< div class = "pricing-card" >
< h3 > Max< / h3 >
< div class = "price" > $19< span > /month< / span > < / div >
< ul >
< li > 1000 images per month< / li >
< li > AI-powered naming< / li >
< li > Keyword enhancement< / li >
< li > ZIP download< / li >
< li > Priority support< / li >
< li > Advanced analytics< / li >
< / ul >
2025-08-05 00:15:36 +02:00
< button class = "btn btn-outline" > Get Started< / button >
2025-08-04 22:20:30 +02:00
< / div >
< / div >
< / div >
< / section >
< / main >
< footer >
< div class = "container" >
< div class = "footer-content" >
< div class = "footer-logo" >
2025-08-05 00:15:36 +02:00
< h2 > < i class = "fas fa-image" > < / i > SEO Image Renamer< / h2 >
2025-08-04 22:20:30 +02:00
< p > AI-powered image SEO optimization< / p >
< / div >
< div class = "footer-links" >
< div class = "footer-column" >
< h4 > Product< / h4 >
< ul >
< li > < a href = "#features" > Features< / a > < / li >
< li > < a href = "#how-it-works" > How It Works< / a > < / li >
< li > < a href = "#pricing" > Pricing< / a > < / li >
< / ul >
< / div >
< div class = "footer-column" >
< h4 > Company< / h4 >
< ul >
< li > < a href = "#" > About Us< / a > < / li >
< li > < a href = "#" > Blog< / a > < / li >
< li > < a href = "#" > Contact< / a > < / li >
< / ul >
< / div >
< div class = "footer-column" >
< h4 > Legal< / h4 >
< ul >
< li > < a href = "#" > Privacy Policy< / a > < / li >
< li > < a href = "#" > Terms of Service< / a > < / li >
< / ul >
< / div >
< / div >
< / div >
< div class = "footer-bottom" >
< p > © 2025 SEO Image Renamer. All rights reserved.< / p >
< / div >
< / div >
< / footer >
<!-- Include JSZip library for ZIP functionality -->
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" > < / script >
2025-08-05 21:46:06 +02:00
<!-- Include configuration file -->
< script src = "config.js" > < / script >
2025-08-04 22:20:30 +02:00
< script src = "script.js" > < / script >
< / body >
< / html >
