246 lines
11 KiB
HTML
246 lines
11 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>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>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<section class="hero">
|
||
|
|
<div class="container">
|
||
|
|
<div class="hero-content">
|
||
|
|
<h1>Boost Your Website's SEO with AI-Powered Image Naming</h1>
|
||
|
|
<p>Stop manually renaming images for SEO. Our AI tool automatically generates SEO-friendly filenames based on your keywords and image content.</p>
|
||
|
|
<a href="#upload-section" class="btn btn-large btn-primary">Try It Free</a>
|
||
|
|
</div>
|
||
|
|
<div class="hero-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=400&q=80" alt="SEO Image Renamer Dashboard">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="upload-section" class="upload-section">
|
||
|
|
<div class="container">
|
||
|
|
<h2>Rename Your Images with AI</h2>
|
||
|
|
<p class="section-description">Upload your images, provide keywords, and let our AI generate SEO-optimized filenames.</p>
|
||
|
|
|
||
|
|
<div class="upload-container">
|
||
|
|
<div id="drop-area" class="drop-area">
|
||
|
|
<div class="drop-area-content">
|
||
|
|
<i class="fas fa-cloud-upload-alt fa-3x"></i>
|
||
|
|
<h3>Drag & Drop your images here</h3>
|
||
|
|
<p>or</p>
|
||
|
|
<button id="browse-btn" class="btn btn-secondary">Browse Files</button>
|
||
|
|
<input type="file" id="file-input" accept="image/*" multiple style="display: none;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="keywords-section" class="keywords-section" style="display: none;">
|
||
|
|
<h3>Enter Keywords for Your Images</h3>
|
||
|
|
<p>Provide keywords that describe your images to help our AI generate better filenames.</p>
|
||
|
|
|
||
|
|
<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-secondary" 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 id="images-preview" class="images-preview" style="display: none;">
|
||
|
|
<h3>Your Images</h3>
|
||
|
|
<div id="images-container" class="images-container">
|
||
|
|
<!-- Images will be displayed here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="actions">
|
||
|
|
<button id="download-btn" class="btn btn-primary btn-large" disabled>
|
||
|
|
<i class="fas fa-download"></i> Download Renamed Images as ZIP
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="features" class="features">
|
||
|
|
<div class="container">
|
||
|
|
<h2>Powerful Features for Better SEO</h2>
|
||
|
|
<p class="section-description">Our AI-powered tool helps you optimize your images for search engines without the manual work.</p>
|
||
|
|
|
||
|
|
<div class="features-grid">
|
||
|
|
<div class="feature-card">
|
||
|
|
<i class="fas fa-robot fa-2x"></i>
|
||
|
|
<h3>AI-Powered Naming</h3>
|
||
|
|
<p>Our advanced AI generates SEO-friendly filenames that help your images rank higher in search results.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature-card">
|
||
|
|
<i class="fas fa-eye fa-2x"></i>
|
||
|
|
<h3>Image Recognition</h3>
|
||
|
|
<p>AI analyzes your images to understand content and context for more accurate naming.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature-card">
|
||
|
|
<i class="fas fa-key fa-2x"></i>
|
||
|
|
<h3>Keyword Enhancement</h3>
|
||
|
|
<p>Enhance your keywords with AI-suggested synonyms for better SEO performance.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature-card">
|
||
|
|
<i class="fas fa-file-archive fa-2x"></i>
|
||
|
|
<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">
|
||
|
|
<h2>How It Works</h2>
|
||
|
|
<p class="section-description">Get better SEO for your images in just three simple steps.</p>
|
||
|
|
|
||
|
|
<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">
|
||
|
|
<h2>Simple, Transparent Pricing</h2>
|
||
|
|
<p class="section-description">Choose the plan that works best for you.</p>
|
||
|
|
|
||
|
|
<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-secondary">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-secondary">Get Started</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<div class="container">
|
||
|
|
<div class="footer-content">
|
||
|
|
<div class="footer-logo">
|
||
|
|
<h2>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>
|