From 4b82d495b21265cf795f9f93a8b8c56a345843e4 Mon Sep 17 00:00:00 2001 From: Jeen Koster Date: Mon, 4 Aug 2025 22:20:30 +0200 Subject: [PATCH 1/3] Jeens made front end design with all mvp functions without vision ai --- .env | 22 ++ index.html | 246 +++++++++++++++++++ script.js | 420 ++++++++++++++++++++++++++++++++ styles.css | 688 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 1376 insertions(+) create mode 100644 .env create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/.env b/.env new file mode 100644 index 0000000..fb31641 --- /dev/null +++ b/.env @@ -0,0 +1,22 @@ +# === AI CONFIGURATION === + +# Your API key or access token +AI_API_KEY=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 + +# Name or ID of the AI model +AI_MODEL_NAME=deepseek/deepseek-chat-v3-0324:free + +# Endpoint or base URL for DeepSeek API (update if different) +AI_API_URL=https://api.deepseek.com/v1 + +# Optional: AI task-specific configuration +AI_TASK=keyword_generation +AI_RENAME_STRATEGY=descriptive # Options: 'timestamped', 'uuid', 'descriptive' + +# === GENERAL SETTINGS === + +# Environment type +NODE_ENV=development + +# Optional: Logging or debugging +ENABLE_LOGGING=true \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e1faa9e --- /dev/null +++ b/index.html @@ -0,0 +1,246 @@ + + + + + + SEO Image Renamer - AI-Powered Image SEO Tool + + + + +
+
+ + +
+
+ +
+
+
+
+

Boost Your Website's SEO with AI-Powered Image Naming

+

Stop manually renaming images for SEO. Our AI tool automatically generates SEO-friendly filenames based on your keywords and image content.

+ Try It Free +
+
+ SEO Image Renamer Dashboard +
+
+
+ +
+
+

Rename Your Images with AI

+

Upload your images, provide keywords, and let our AI generate SEO-optimized filenames.

+ +
+
+
+ +

Drag & Drop your images here

+

or

+ + +
+
+
+ + + + +
+
+ +
+
+

Powerful Features for Better SEO

+

Our AI-powered tool helps you optimize your images for search engines without the manual work.

+ +
+
+ +

AI-Powered Naming

+

Our advanced AI generates SEO-friendly filenames that help your images rank higher in search results.

+
+ +
+ +

Image Recognition

+

AI analyzes your images to understand content and context for more accurate naming.

+
+ +
+ +

Keyword Enhancement

+

Enhance your keywords with AI-suggested synonyms for better SEO performance.

+
+ +
+ +

Easy Download

+

Download all your renamed images in a single ZIP file for easy implementation.

+
+
+
+
+ +
+
+

How It Works

+

Get better SEO for your images in just three simple steps.

+ +
+
+
1
+

Upload Images

+

Drag and drop your images or browse your files to upload them to our platform.

+
+ +
+
2
+

Add Keywords

+

Provide keywords that describe your images, or let our AI enhance them for better SEO.

+
+ +
+
3
+

Download & Implement

+

Download your renamed images as a ZIP file and use them on your website.

+
+
+
+
+ +
+
+

Simple, Transparent Pricing

+

Choose the plan that works best for you.

+ +
+
+

Basic

+
$0/month
+
    +
  • 50 images per month
    • +
  • AI-powered naming
    • +
  • Keyword enhancement
    • +
  • ZIP download
    • +
+ +
+ +
+
Most Popular
+

Pro

+
$9/month
+
    +
  • 500 images per month
    • +
  • AI-powered naming
    • +
  • Keyword enhancement
    • +
  • ZIP download
    • +
  • Priority support
    • +
+ +
+ +
+

Max

+
$19/month
+
    +
  • 1000 images per month
    • +
  • AI-powered naming
    • +
  • Keyword enhancement
    • +
  • ZIP download
    • +
  • Priority support
    • +
  • Advanced analytics
    • +
+ +
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4703f02 --- /dev/null +++ b/script.js @@ -0,0 +1,420 @@ +// Global variables +let uploadedImages = []; +let keywords = []; +let generatedNames = []; + +// DOM elements +const dropArea = document.getElementById('drop-area'); +const fileInput = document.getElementById('file-input'); +const browseBtn = document.getElementById('browse-btn'); +const keywordsSection = document.getElementById('keywords-section'); +const keywordInput = document.getElementById('keyword-input'); +const enhanceBtn = document.getElementById('enhance-btn'); +const keywordsDisplay = document.getElementById('keywords-display'); +const imagesPreview = document.getElementById('images-preview'); +const imagesContainer = document.getElementById('images-container'); +const downloadBtn = document.getElementById('download-btn'); + +// AI Configuration (in a real app, this would be loaded from .env) +const AI_CONFIG = { + API_KEY: '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', + MODEL_NAME: 'deepseek/deepseek-chat-v3-0324:free', + API_URL: 'https://openrouter.ai/api/v1/chat/completions' +}; + +// Event listeners +document.addEventListener('DOMContentLoaded', () => { + // Upload area event listeners + dropArea.addEventListener('click', () => fileInput.click()); + browseBtn.addEventListener('click', () => fileInput.click()); + fileInput.addEventListener('change', handleFileSelect); + + // Drag and drop events + ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { + dropArea.addEventListener(eventName, preventDefaults, false); + }); + + ['dragenter', 'dragover'].forEach(eventName => { + dropArea.addEventListener(eventName, highlight, false); + }); + + ['dragleave', 'drop'].forEach(eventName => { + dropArea.addEventListener(eventName, unhighlight, false); + }); + + dropArea.addEventListener('drop', handleDrop, false); + + // Keyword events + keywordInput.addEventListener('input', toggleEnhanceButton); + enhanceBtn.addEventListener('click', enhanceKeywords); + + // Download button + downloadBtn.addEventListener('click', downloadImages); +}); + +// Prevent default drag behaviors +function preventDefaults(e) { + e.preventDefault(); + e.stopPropagation(); +} + +// Highlight drop area when item is dragged over it +function highlight() { + dropArea.classList.add('dragover'); +} + +// Remove highlight when item is dragged out of drop area +function unhighlight() { + dropArea.classList.remove('dragover'); +} + +// Handle dropped files +function handleDrop(e) { + const dt = e.dataTransfer; + const files = dt.files; + handleFiles(files); +} + +// Handle file selection +function handleFileSelect(e) { + const files = e.target.files; + handleFiles(files); +} + +// Process uploaded files +function handleFiles(files) { + if (files.length === 0) return; + + // Convert FileList to Array + const filesArray = Array.from(files); + + // Filter only image files + const imageFiles = filesArray.filter(file => file.type.startsWith('image/')); + + if (imageFiles.length === 0) { + alert('Please select image files only.'); + return; + } + + // Clear previous images + uploadedImages = []; + + // Process each image file + let processedCount = 0; + imageFiles.forEach(file => { + const reader = new FileReader(); + reader.onload = (e) => { + uploadedImages.push({ + file: file, + name: file.name, + size: file.size, + type: file.type, + src: e.target.result, + newName: generateFileName(file.name) + }); + + processedCount++; + // Show keywords section after all files are processed + if (processedCount === imageFiles.length) { + keywordsSection.style.display = 'block'; + imagesPreview.style.display = 'block'; + updateImagesPreview(); + } + }; + reader.readAsDataURL(file); + }); +} + +// Generate a simple filename based on original name +function generateFileName(originalName) { + // Remove extension + const nameWithoutExt = originalName.substring(0, originalName.lastIndexOf('.')); + // Replace non-alphanumeric characters with spaces + const cleanName = nameWithoutExt.replace(/[^a-zA-Z0-9]/g, ' '); + // Capitalize first letter and make it SEO friendly + return cleanName.charAt(0).toUpperCase() + cleanName.slice(1); +} + +// Toggle enhance button based on keyword input +function toggleEnhanceButton() { + enhanceBtn.disabled = keywordInput.value.trim() === ''; +} + +// Enhance keywords with AI +async function enhanceKeywords() { + const keywordText = keywordInput.value.trim(); + if (keywordText === '') return; + + // Show loading state + enhanceBtn.innerHTML = ' Enhancing...'; + enhanceBtn.disabled = true; + + try { + // Call AI API to enhance keywords + const enhancedKeywords = await callAIKeywordEnhancement(keywordText); + + // Split keywords by comma or space + const newKeywords = enhancedKeywords.split(/[, ]+/).filter(k => k !== ''); + + // Add new keywords to the list + newKeywords.forEach(keyword => { + if (!keywords.includes(keyword)) { + keywords.push(keyword); + } + }); + + // Update keywords display + updateKeywordsDisplay(); + + // Clear input + keywordInput.value = ''; + + // Generate new filenames for images + await generateNewFileNamesWithAI(); + } catch (error) { + console.error('Error enhancing keywords:', error); + alert('An error occurred while enhancing keywords. Please try again.'); + } finally { + // Reset button + enhanceBtn.innerHTML = ' Enhance with AI'; + enhanceBtn.disabled = keywordInput.value.trim() === ''; + } +} + +// Call AI API to enhance keywords +async function callAIKeywordEnhancement(keywords) { + const prompt = `Enhance these keywords for SEO image optimization. Provide 10 additional related keywords that would help images rank better in search engines. Return only the keywords separated by commas, nothing else. Keywords: ${keywords}`; + + const response = await fetch(AI_CONFIG.API_URL, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${AI_CONFIG.API_KEY}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + model: AI_CONFIG.MODEL_NAME, + messages: [ + { + role: "user", + content: prompt + } + ] + }) + }); + + if (!response.ok) { + throw new Error(`API request failed with status ${response.status}`); + } + + const data = await response.json(); + return data.choices[0].message.content.trim(); +} + +// Generate new filenames for images based on keywords using AI +async function generateNewFileNamesWithAI() { + if (keywords.length === 0) return; + + // Show loading state for each image + document.querySelectorAll('.new-name-input').forEach(input => { + input.disabled = true; + input.placeholder = 'Generating AI filename...'; + }); + + try { + // Generate new filename for each image + for (let i = 0; i < uploadedImages.length; i++) { + const image = uploadedImages[i]; + const keywordString = keywords.slice(0, 5).join(', '); + + // Call AI to generate a descriptive filename + const aiGeneratedName = await callAIFilenameGeneration(image.name, keywordString); + + // Update the image with the new name + const nameWithoutExt = image.name.substring(0, image.name.lastIndexOf('.')); + const extension = image.name.substring(image.name.lastIndexOf('.')); + const newName = `${aiGeneratedName.substring(0, 50)}${extension}`; + image.newName = newName; + } + + // Update images preview + updateImagesPreview(); + + // Enable download button + downloadBtn.disabled = false; + } catch (error) { + console.error('Error generating filenames:', error); + alert('An error occurred while generating filenames. Please try again.'); + + // Revert to simple filename generation + generateNewFileNames(); + } finally { + // Re-enable inputs + document.querySelectorAll('.new-name-input').forEach(input => { + input.disabled = false; + input.placeholder = ''; + }); + } +} + +// Call AI API to generate filename +async function callAIFilenameGeneration(originalName, keywords) { + const prompt = `Generate an SEO-optimized filename for an image. The original filename is "${originalName}" and the keywords are: ${keywords}. Create a descriptive, SEO-friendly filename that is 3-6 words long. Use only letters, numbers, and hyphens. Do not include the file extension. Return only the filename, nothing else.`; + + const response = await fetch(AI_CONFIG.API_URL, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${AI_CONFIG.API_KEY}`, + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + model: AI_CONFIG.MODEL_NAME, + messages: [ + { + role: "user", + content: prompt + } + ] + }) + }); + + if (!response.ok) { + throw new Error(`API request failed with status ${response.status}`); + } + + const data = await response.json(); + return data.choices[0].message.content.trim().replace(/[^a-zA-Z0-9\- ]/g, '').replace(/\s+/g, '-'); +} + +// Fallback function to generate new filenames without AI +function generateNewFileNames() { + if (keywords.length === 0) return; + + uploadedImages.forEach((image, index) => { + // Combine keywords with the original filename + const keywordString = keywords.slice(0, 3).join(' '); + const nameWithoutExt = image.name.substring(0, image.name.lastIndexOf('.')); + const extension = image.name.substring(image.name.lastIndexOf('.')); + + // Create new name + const newName = `${keywordString} ${nameWithoutExt}`.substring(0, 50) + extension; + image.newName = newName; + }); + + // Update images preview + updateImagesPreview(); + + // Enable download button + downloadBtn.disabled = false; +} + +// Update keywords display +function updateKeywordsDisplay() { + keywordsDisplay.innerHTML = ''; + + keywords.forEach((keyword, index) => { + const keywordChip = document.createElement('div'); + keywordChip.className = 'keyword-chip'; + keywordChip.innerHTML = ` + ${keyword} + + `; + keywordsDisplay.appendChild(keywordChip); + }); + + // Add event listeners to remove buttons + document.querySelectorAll('.remove-keyword').forEach(button => { + button.addEventListener('click', (e) => { + const index = parseInt(e.target.getAttribute('data-index')); + keywords.splice(index, 1); + updateKeywordsDisplay(); + generateNewFileNames(); + }); + }); +} + +// Update images preview +function updateImagesPreview() { + imagesContainer.innerHTML = ''; + + uploadedImages.forEach((image, index) => { + const imageCard = document.createElement('div'); + imageCard.className = 'image-card'; + imageCard.innerHTML = ` + ${image.name} +
+
Original: ${image.name}
+
+ + +
+
+ `; + imagesContainer.appendChild(imageCard); + }); + + // Add event listeners to name inputs + document.querySelectorAll('.new-name-input').forEach(input => { + input.addEventListener('input', (e) => { + const index = parseInt(e.target.getAttribute('data-index')); + uploadedImages[index].newName = e.target.value; + }); + }); +} + +// Download images as ZIP +async function downloadImages() { + if (uploadedImages.length === 0) return; + + // Show loading state + downloadBtn.innerHTML = ' Preparing Download...'; + downloadBtn.disabled = true; + + try { + // Create a new ZIP file + const zip = new JSZip(); + + // Add each image to the ZIP with its new name + for (const image of uploadedImages) { + // Convert data URL to blob + const blob = await fetch(image.src).then(res => res.blob()); + zip.file(image.newName, blob); + } + + // Generate the ZIP file + const content = await zip.generateAsync({type: "blob"}); + + // Create download link + const url = URL.createObjectURL(content); + const a = document.createElement('a'); + a.href = url; + a.download = 'renamed-images.zip'; + document.body.appendChild(a); + a.click(); + + // Clean up + setTimeout(() => { + document.body.removeChild(a); + URL.revokeObjectURL(url); + }, 100); + + // Reset button + downloadBtn.innerHTML = ' Download Renamed Images as ZIP'; + downloadBtn.disabled = false; + } catch (error) { + console.error('Error creating ZIP file:', error); + alert('An error occurred while creating the ZIP file. Please try again.'); + + // Reset button + downloadBtn.innerHTML = ' Download Renamed Images as ZIP'; + downloadBtn.disabled = false; + } +} + +// Initialize the page +function init() { + // Set up any initial state + downloadBtn.disabled = true; +} + +// Call init when page loads +init(); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d9c322c --- /dev/null +++ b/styles.css @@ -0,0 +1,688 @@ +/* Reset and base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; + background-color: #f8f9fa; +} + +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; + padding: 0 15px; +} + +/* Header styles */ +header { + background-color: #fff; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 100; +} + +header .container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; +} + +.logo h1 { + font-size: 1.8rem; + font-weight: 700; + color: #2c3e50; +} + +nav ul { + display: flex; + list-style: none; +} + +nav ul li { + margin-left: 30px; +} + +nav ul li a { + text-decoration: none; + color: #333; + font-weight: 500; + transition: color 0.3s; +} + +nav ul li a:hover { + color: #3498db; +} + +.btn { + display: inline-block; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + border: none; + font-size: 1rem; +} + +.btn-primary { + background-color: #3498db; + color: white; +} + +.btn-primary:hover { + background-color: #2980b9; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.btn-secondary { + background-color: #2c3e50; + color: white; +} + +.btn-secondary:hover { + background-color: #1a252f; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.btn-large { + padding: 15px 30px; + font-size: 1.1rem; +} + +/* Hero section */ +.hero { + padding: 80px 0; + background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%); + color: white; + text-align: center; +} + +.hero .container { + display: flex; + flex-direction: column; + align-items: center; +} + +.hero-content { + max-width: 800px; + margin-bottom: 40px; +} + +.hero h1 { + font-size: 2.5rem; + margin-bottom: 20px; + font-weight: 700; +} + +.hero p { + font-size: 1.2rem; + margin-bottom: 30px; + opacity: 0.9; +} + +.hero-image { + max-width: 600px; + width: 100%; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); +} + +.hero-image img { + width: 100%; + height: auto; + display: block; +} + +/* Upload section */ +.upload-section { + padding: 80px 0; + background-color: #fff; +} + +.upload-section h2 { + text-align: center; + font-size: 2.2rem; + margin-bottom: 15px; + color: #2c3e50; +} + +.section-description { + text-align: center; + font-size: 1.1rem; + color: #7f8c8d; + max-width: 700px; + margin: 0 auto 50px; +} + +.drop-area { + border: 3px dashed #3498db; + border-radius: 10px; + padding: 60px 20px; + text-align: center; + background-color: #f8f9fa; + transition: all 0.3s; + cursor: pointer; +} + +.drop-area:hover, .drop-area.dragover { + background-color: #e3f2fd; + border-color: #2980b9; +} + +.drop-area-content i { + color: #3498db; + margin-bottom: 20px; +} + +.drop-area-content h3 { + margin-bottom: 15px; + color: #2c3e50; +} + +.drop-area-content p { + margin-bottom: 20px; + color: #7f8c8d; +} + +.keywords-section { + margin-top: 50px; +} + +.keywords-section h3 { + text-align: center; + margin-bottom: 15px; + color: #2c3e50; +} + +.keywords-input { + display: flex; + max-width: 600px; + margin: 0 auto 30px; + gap: 10px; +} + +.keywords-input input { + flex: 1; + padding: 15px; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 1rem; +} + +.keywords-input input:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); +} + +.keywords-display { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 10px; + margin-top: 20px; +} + +.keyword-chip { + background-color: #3498db; + color: white; + padding: 8px 15px; + border-radius: 20px; + display: flex; + align-items: center; + gap: 5px; +} + +.keyword-chip .remove-keyword { + background: none; + border: none; + color: white; + cursor: pointer; + font-size: 1rem; +} + +.images-preview { + margin-top: 50px; +} + +.images-preview h3 { + text-align: center; + margin-bottom: 30px; + color: #2c3e50; +} + +.images-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 30px; + margin-bottom: 40px; +} + +.image-card { + background: #fff; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s; +} + +.image-card:hover { + transform: translateY(-5px); +} + +.image-thumbnail { + width: 100%; + height: 200px; + object-fit: cover; +} + +.image-info { + padding: 20px; +} + +.image-info .original-name { + font-size: 0.9rem; + color: #7f8c8d; + margin-bottom: 10px; + word-break: break-all; +} + +.image-info .new-name { + font-weight: 600; + color: #2c3e50; + word-break: break-all; +} + +.image-info input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 1rem; + margin-top: 10px; +} + +.image-info input:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); +} + +.actions { + text-align: center; +} + +/* Features section */ +.features { + padding: 80px 0; + background-color: #f8f9fa; +} + +.features h2 { + text-align: center; + font-size: 2.2rem; + margin-bottom: 15px; + color: #2c3e50; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; + margin-top: 50px; +} + +.feature-card { + background: #fff; + padding: 30px; + border-radius: 10px; + text-align: center; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); + transition: transform 0.3s; +} + +.feature-card:hover { + transform: translateY(-10px); +} + +.feature-card i { + color: #3498db; + margin-bottom: 20px; +} + +.feature-card h3 { + margin-bottom: 15px; + color: #2c3e50; +} + +.feature-card p { + color: #7f8c8d; +} + +/* How it works section */ +.how-it-works { + padding: 80px 0; + background-color: #fff; +} + +.how-it-works h2 { + text-align: center; + font-size: 2.2rem; + margin-bottom: 15px; + color: #2c3e50; +} + +.steps { + display: flex; + justify-content: space-between; + margin-top: 50px; + flex-wrap: wrap; +} + +.step { + flex: 1; + min-width: 250px; + text-align: center; + padding: 0 20px; + position: relative; +} + +.step:not(:last-child):after { + content: ""; + position: absolute; + top: 40px; + right: 0; + width: 50%; + height: 2px; + background-color: #3498db; +} + +.step-number { + width: 80px; + height: 80px; + background-color: #3498db; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + font-weight: 700; + margin: 0 auto 20px; +} + +.step h3 { + margin-bottom: 15px; + color: #2c3e50; +} + +.step p { + color: #7f8c8d; +} + +/* Pricing section */ +.pricing { + padding: 80px 0; + background-color: #f8f9fa; +} + +.pricing h2 { + text-align: center; + font-size: 2.2rem; + margin-bottom: 15px; + color: #2c3e50; +} + +.pricing-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin-top: 50px; +} + +.pricing-card { + background: #fff; + border-radius: 10px; + padding: 40px 30px; + text-align: center; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); + position: relative; + overflow: hidden; +} + +.pricing-card.featured { + transform: scale(1.05); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); + border: 2px solid #3498db; +} + +.featured-badge { + position: absolute; + top: 20px; + right: -30px; + background-color: #3498db; + color: white; + padding: 5px 30px; + transform: rotate(45deg); + font-size: 0.8rem; + font-weight: 600; +} + +.pricing-card h3 { + font-size: 1.8rem; + margin-bottom: 20px; + color: #2c3e50; +} + +.price { + font-size: 3rem; + font-weight: 700; + color: #2c3e50; + margin-bottom: 30px; +} + +.price span { + font-size: 1rem; + color: #7f8c8d; +} + +.pricing-card ul { + list-style: none; + margin-bottom: 30px; + text-align: left; +} + +.pricing-card ul li { + padding: 10px 0; + border-bottom: 1px solid #eee; + display: flex; + align-items: center; +} + +.pricing-card ul li:before { + content: "\f00c"; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + color: #3498db; + margin-right: 10px; +} + +.pricing-card .btn { + width: 100%; +} + +/* Footer */ +footer { + background-color: #2c3e50; + color: white; + padding: 60px 0 30px; +} + +.footer-content { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-bottom: 40px; +} + +.footer-logo h2 { + font-size: 1.8rem; + margin-bottom: 10px; +} + +.footer-logo p { + opacity: 0.7; +} + +.footer-links { + display: flex; + gap: 50px; +} + +.footer-column h4 { + margin-bottom: 20px; + position: relative; + padding-bottom: 10px; +} + +.footer-column h4:after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 50px; + height: 2px; + background-color: #3498db; +} + +.footer-column ul { + list-style: none; +} + +.footer-column ul li { + margin-bottom: 10px; +} + +.footer-column ul li a { + color: #bbb; + text-decoration: none; + transition: color 0.3s; +} + +.footer-column ul li a:hover { + color: #3498db; +} + +.footer-bottom { + text-align: center; + padding-top: 30px; + border-top: 1px solid rgba(255, 255, 255, 0.1); + color: #bbb; +} + +/* Responsive design */ +@media (max-width: 992px) { + .hero .container { + flex-direction: column; + } + + .hero-content { + margin-bottom: 50px; + } + + .steps { + flex-direction: column; + gap: 50px; + } + + .step:not(:last-child):after { + display: none; + } + + .footer-content { + flex-direction: column; + gap: 40px; + } + + .footer-links { + gap: 30px; + } +} + +@media (max-width: 768px) { + header .container { + flex-direction: column; + gap: 20px; + } + + nav ul { + flex-wrap: wrap; + justify-content: center; + } + + nav ul li { + margin: 5px 10px; + } + + .hero { + padding: 60px 0; + } + + .hero h1 { + font-size: 2rem; + } + + .hero p { + font-size: 1rem; + } + + .keywords-input { + flex-direction: column; + } + + .pricing-card.featured { + transform: scale(1); + } +} + +@media (max-width: 576px) { + .container { + width: 95%; + } + + .hero { + padding: 40px 0; + } + + .hero h1 { + font-size: 1.8rem; + } + + .upload-section, .features, .how-it-works, .pricing { + padding: 60px 0; + } + + .section-description { + font-size: 1rem; + } + + .drop-area { + padding: 40px 15px; + } + + .images-container { + grid-template-columns: 1fr; + } +} \ No newline at end of file From a829770c7e684bd91c4cb7a89ac6b7943f32d0c4 Mon Sep 17 00:00:00 2001 From: Jeen Koster Date: Tue, 5 Aug 2025 00:15:36 +0200 Subject: [PATCH 2/3] Final front-end version for day 1 by Jeen. --- index.html | 182 ++++++--- script.js | 259 ++++++++++-- styles.css | 1144 +++++++++++++++++++++++++++++++++++++--------------- 3 files changed, 1173 insertions(+), 412 deletions(-) diff --git a/index.html b/index.html index e1faa9e..5e2c585 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
+
+ +
-
-

Boost Your Website's SEO with AI-Powered Image Naming

-

Stop manually renaming images for SEO. Our AI tool automatically generates SEO-friendly filenames based on your keywords and image content.

- Try It Free -
-
- SEO Image Renamer Dashboard +
+
+
+ + AI-Powered +
+

Save time! Bulk rename your images individually for better SEO performance

+

Transform your image SEO workflow with AI that analyzes content and generates perfect filenames automatically. No more manual renaming - just upload, enhance, and download.

+ +
+
+ + AI Vision Analysis +
+
+ + Smart Keyword Enhancement +
+
+ + Instant ZIP Download +
+
+ +
+
+ 10k+ + Images Processed +
+
+ 95% + Time Saved +
+
+
+ +
+
+
+
+ +
+

Drop your images here

+

or click to browse files

+ + +
+ Supports: JPG, PNG, WEBP, GIF +
+
+
+
-
+