Final front-end version for day 1 by Jeen.
This commit is contained in:
Jeen Koster
parent
4b82d495b2
commit
a829770c7e
3 changed files with 1173 additions and 412 deletions
182
index.html
182
index.html
|
|
@ -11,7 +11,7 @@
|
|||
<header>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<h1>SEO Image Renamer</h1>
|
||||
<h1><i class="fas fa-image"></i> SEO Image Renamer</h1>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
|
|
@ -21,66 +21,114 @@
|
|||
<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-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 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="upload-section" class="upload-section">
|
||||
<section id="workflow-section" class="workflow-section" style="display: none;">
|
||||
<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 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="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 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>
|
||||
|
|
@ -88,30 +136,40 @@
|
|||
|
||||
<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="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">
|
||||
<i class="fas fa-robot fa-2x"></i>
|
||||
<div class="feature-icon">
|
||||
<i class="fas fa-robot"></i>
|
||||
</div>
|
||||
<h3>AI-Powered Naming</h3>
|
||||
<p>Our advanced AI generates SEO-friendly filenames that help your images rank higher in search results.</p>
|
||||
<p>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>
|
||||
<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">
|
||||
<i class="fas fa-key fa-2x"></i>
|
||||
<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">
|
||||
<i class="fas fa-file-archive fa-2x"></i>
|
||||
<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>
|
||||
|
|
@ -121,8 +179,10 @@
|
|||
|
||||
<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="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">
|
||||
|
|
@ -148,8 +208,10 @@
|
|||
|
||||
<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="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">
|
||||
|
|
@ -161,7 +223,7 @@
|
|||
<li>Keyword enhancement</li>
|
||||
<li>ZIP download</li>
|
||||
</ul>
|
||||
<button class="btn btn-secondary">Get Started</button>
|
||||
<button class="btn btn-outline">Get Started</button>
|
||||
</div>
|
||||
|
||||
<div class="pricing-card featured">
|
||||
|
|
@ -189,7 +251,7 @@
|
|||
<li>Priority support</li>
|
||||
<li>Advanced analytics</li>
|
||||
</ul>
|
||||
<button class="btn btn-secondary">Get Started</button>
|
||||
<button class="btn btn-outline">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -200,7 +262,7 @@
|
|||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">
|
||||
<h2>SEO Image Renamer</h2>
|
||||
<h2><i class="fas fa-image"></i> SEO Image Renamer</h2>
|
||||
<p>AI-powered image SEO optimization</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue