308 lines
No EOL
14 KiB
HTML
308 lines
No EOL
14 KiB
HTML
<!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">
|
|
<h1><i class="fas fa-image"></i> SEO Image Renamer</h1>
|
|
</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>
|
|
<div class="mobile-menu">
|
|
<i class="fas fa-bars"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div class="container">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="workflow-section" class="workflow-section" style="display: none;">
|
|
<div class="container">
|
|
<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">
|
|
<input type="text" id="keyword-input" placeholder="Enter keywords (e.g., beach vacation, summer party)">
|
|
<button id="enhance-btn" class="btn btn-primary" disabled>
|
|
<i class="fas fa-magic"></i> Enhance with AI
|
|
</button>
|
|
</div>
|
|
|
|
<div id="keywords-display" class="keywords-display">
|
|
<!-- Keywords will be displayed here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features" class="features">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Powerful Features for Better SEO</h2>
|
|
<p>Everything you need to optimize your images for search engines</p>
|
|
</div>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-robot"></i>
|
|
</div>
|
|
<h3>AI-Powered Naming</h3>
|
|
<p>Advanced AI generates SEO-friendly filenames that help your images rank higher in search results.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-eye"></i>
|
|
</div>
|
|
<h3>Image Recognition</h3>
|
|
<p>AI analyzes your images to understand content and context for more accurate naming.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-key"></i>
|
|
</div>
|
|
<h3>Keyword Enhancement</h3>
|
|
<p>Enhance your keywords with AI-suggested synonyms for better SEO performance.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-file-archive"></i>
|
|
</div>
|
|
<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">
|
|
<div class="section-header">
|
|
<h2>How It Works</h2>
|
|
<p>Get better SEO for your images in just three simple steps</p>
|
|
</div>
|
|
|
|
<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">
|
|
<div class="section-header">
|
|
<h2>Simple, Transparent Pricing</h2>
|
|
<p>Choose the plan that works best for you</p>
|
|
</div>
|
|
|
|
<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>
|
|
<button class="btn btn-outline">Get Started</button>
|
|
</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>
|
|
<button class="btn btn-outline">Get Started</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-logo">
|
|
<h2><i class="fas fa-image"></i> SEO Image Renamer</h2>
|
|
<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>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |