LINK IN OPENAI API BY ADDING A API FUNCTION IN SETTINGS

components/vinyl-nav.js

@@ -106,11 +106,11 @@ class VinylNav extends HTMLElement {
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
               History
             </a>
-            <a href="#" class="nav-link" onclick="event.preventDefault(); alert('Settings feature coming soon');">
+            <a href="settings.html" class="nav-link">
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
               Settings
             </a>
-          </div>
+</div>
           <button class="mobile-menu-btn">
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
           </button>

script.js

@@ -449,6 +449,101 @@ function draftAnalysis() {
     showToast('Quick preview: Fill in artist/title for full analysis', 'success');
     // Could implement lightweight preview mode
 }
+async function callOpenAI(messages, temperature = 0.7) {
+    const apiKey = localStorage.getItem('openai_api_key');
+    const model = localStorage.getItem('openai_model') || 'gpt-4o';
+    const maxTokens = parseInt(localStorage.getItem('openai_max_tokens')) || 2000;
+
+    if (!apiKey) {
+        showToast('OpenAI API key not configured. Go to Settings.', 'error');
+        return null;
+    }
+
+    try {
+        const response = await fetch('https://api.openai.com/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${apiKey}`
+            },
+            body: JSON.stringify({
+                model: model,
+                messages: messages,
+                temperature: temperature,
+                max_tokens: maxTokens
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error?.message || 'API request failed');
+        }
+
+        const data = await response.json();
+        return data.choices[0].message.content;
+    } catch (error) {
+        showToast(`OpenAI Error: ${error.message}`, 'error');
+        return null;
+    }
+}
+
+async function generateListingWithAI() {
+    const artist = document.getElementById('artistInput').value.trim();
+    const title = document.getElementById('titleInput').value.trim();
+    const catNo = document.getElementById('catInput').value.trim();
+    const year = document.getElementById('yearInput').value.trim();
+    
+    if (!artist || !title) {
+        showToast('Please enter at least artist and title', 'error');
+        return;
+    }
+
+    const messages = [
+        {
+            role: 'system',
+            content: 'You are a vinyl record eBay listing expert. Generate optimized titles, descriptions, and pricing strategies. Always return JSON format with: titles (array), description (string), condition_notes (string), price_estimate (object with min, max, recommended), and tags (array).'
+        },
+        {
+            role: 'user',
+            content: `Generate an eBay listing for: ${artist} - ${title}${catNo ? ` (Catalog: ${catNo})` : ''}${year ? ` (${year})` : ''}. Include optimized title options, professional HTML description, condition guidance, price estimate in GBP, and relevant tags.`
+        }
+    ];
+
+    showToast('Generating listing with AI...', 'success');
+    
+    const result = await callOpenAI(messages, 0.7);
+    
+    if (result) {
+        try {
+            const data = JSON.parse(result);
+            // Populate the UI with AI-generated content
+            if (data.titles) {
+                renderTitleOptions(data.titles.map(t => ({
+                    text: t.length > 80 ? t.substring(0, 77) + '...' : t,
+                    chars: Math.min(t.length, 80),
+                    style: 'AI Generated'
+                })));
+            }
+            if (data.description) {
+                document.getElementById('htmlOutput').value = data.description;
+            }
+            if (data.tags) {
+                const tagsContainer = document.getElementById('tagsOutput');
+                tagsContainer.innerHTML = data.tags.map(t => `
+                    <span class="px-3 py-1.5 bg-pink-500/10 text-pink-400 rounded-full text-sm border border-pink-500/20">${t}</span>
+                `).join('');
+            }
+            resultsSection.classList.remove('hidden');
+            emptyState.classList.add('hidden');
+            showToast('AI listing generated!', 'success');
+        } catch (e) {
+            // If not valid JSON, treat as plain text description
+            document.getElementById('htmlOutput').value = result;
+            resultsSection.classList.remove('hidden');
+            emptyState.classList.add('hidden');
+        }
+    }
+}
 
 function requestHelp() {
     alert(`VINYL PHOTO GUIDE:
@@ -476,7 +571,6 @@ TIPS:
 - Include scale reference if unusual size
 - Photograph flaws honestly - reduces returns`);
 }
-
 function showToast(message, type = 'success') {
     const existing = document.querySelector('.toast');
     if (existing) existing.remove();

settings.html

@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings - VinylVault Pro</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#7c3aed',
+                        secondary: '#06b6d4',
+                        accent: '#f59e0b',
+                        surface: '#0f172a',
+                        'surface-light': '#1e293b',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-surface text-gray-100 min-h-screen">
+    <!-- Navigation -->
+    <vinyl-nav></vinyl-nav>
+
+    <!-- Main Content -->
+    <main class="pt-20 pb-12 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
+        
+        <!-- Page Header -->
+        <section class="mb-8">
+            <h1 class="text-3xl font-bold bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent mb-2">
+                Settings
+            </h1>
+            <p class="text-gray-400">Configure your API keys and preferences</p>
+        </section>
+
+        <!-- API Configuration -->
+        <div class="space-y-6">
+            
+            <!-- OpenAI API Section -->
+            <div class="bg-surface-light rounded-2xl p-8 border border-gray-800">
+                <div class="flex items-center gap-3 mb-6">
+                    <div class="w-12 h-12 rounded-xl bg-green-500/10 flex items-center justify-center">
+                        <svg class="w-6 h-6 text-green-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+                        </svg>
+                    </div>
+                    <div>
+                        <h2 class="text-xl font-semibold text-gray-200">OpenAI API</h2>
+                        <p class="text-sm text-gray-500">Configure your API key for AI-powered listing generation</p>
+                    </div>
+                </div>
+
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">API Key</label>
+                        <div class="relative">
+                            <input type="password" id="openaiKey" placeholder="sk-..." 
+                                class="w-full px-4 py-3 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm pr-10"
+                                autocomplete="off">
+                            <button onclick="toggleApiVisibility()" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300">
+                                <i data-feather="eye" class="w-5 h-5"></i>
+                            </button>
+                        </div>
+                        <p class="text-xs text-gray-600 mt-2">Your API key is stored locally in your browser and never sent to our servers.</p>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-2">Model</label>
+                            <select id="openaiModel" class="w-full px-4 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm">
+                                <option value="gpt-4o">GPT-4o (Recommended)</option>
+                                <option value="gpt-4o-mini">GPT-4o Mini (Faster)</option>
+                                <option value="gpt-4-turbo">GPT-4 Turbo</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-2">Max Tokens</label>
+                            <input type="number" id="maxTokens" value="2000" min="500" max="4000" step="100"
+                                class="w-full px-4 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm">
+                        </div>
+                    </div>
+
+                    <div class="flex items-center justify-between pt-4 border-t border-gray-800">
+                        <div class="flex items-center gap-2 text-sm" id="apiStatus">
+                            <span class="w-2 h-2 rounded-full bg-gray-600"></span>
+                            <span class="text-gray-500">Not configured</span>
+                        </div>
+                        <div class="flex gap-3">
+                            <button onclick="testOpenAIConnection()" class="px-4 py-2 border border-gray-600 rounded-lg text-sm text-gray-300 hover:border-primary hover:text-primary transition-all flex items-center gap-2">
+                                Test Connection
+                            </button>
+                            <button onclick="saveOpenAISettings()" class="px-6 py-2 bg-primary rounded-lg font-medium text-white hover:bg-primary/90 transition-all flex items-center gap-2">
+                                <i data-feather="save" class="w-4 h-4"></i>
+                                Save
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Discogs API Section -->
+            <div class="bg-surface-light rounded-2xl p-8 border border-gray-800">
+                <div class="flex items-center gap-3 mb-6">
+                    <div class="w-12 h-12 rounded-xl bg-orange-500/10 flex items-center justify-center">
+                        <svg class="w-6 h-6 text-orange-400" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
+                        </svg>
+                    </div>
+                    <div>
+                        <h2 class="text-xl font-semibold text-gray-200">Discogs API</h2>
+                        <p class="text-sm text-gray-500">Connect Discogs for automatic tracklist and release data</p>
+                    </div>
+                </div>
+
+                <div class="space-y-4">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-2">Consumer Key</label>
+                            <input type="text" id="discogsKey" placeholder="Your Discogs consumer key" 
+                                class="w-full px-4 py-3 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm">
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-2">Consumer Secret</label>
+                            <input type="password" id="discogsSecret" placeholder="Your Discogs consumer secret" 
+                                class="w-full px-4 py-3 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm">
+                        </div>
+                    </div>
+                    <p class="text-xs text-gray-600">Get your API credentials at <a href="https://www.discogs.com/settings/developers" target="_blank" class="text-primary hover:underline">discogs.com/settings/developers</a></p>
+                </div>
+            </div>
+
+            <!-- General Settings -->
+            <div class="bg-surface-light rounded-2xl p-8 border border-gray-800">
+                <h2 class="text-xl font-semibold text-gray-200 mb-6">General Preferences</h2>
+                
+                <div class="space-y-4">
+                    <div class="flex items-center justify-between py-3 border-b border-gray-800">
+                        <div>
+                            <p class="text-gray-300 font-medium">Auto-save Listings</p>
+                            <p class="text-sm text-gray-500">Automatically save listing drafts locally</p>
+                        </div>
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" id="autoSave" class="sr-only peer" checked>
+                            <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
+                        </label>
+                    </div>
+
+                    <div class="flex items-center justify-between py-3 border-b border-gray-800">
+                        <div>
+                            <p class="text-gray-300 font-medium">Dark Mode</p>
+                            <p class="text-sm text-gray-500">Always use dark theme</p>
+                        </div>
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" id="darkMode" class="sr-only peer" checked>
+                            <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
+                        </label>
+                    </div>
+
+                    <div class="flex items-center justify-between py-3">
+                        <div>
+                            <p class="text-gray-300 font-medium">Clear Data</p>
+                            <p class="text-sm text-gray-500">Remove all saved API keys and preferences</p>
+                        </div>
+                        <button onclick="clearAllData()" class="px-4 py-2 border border-red-500/50 text-red-400 rounded-lg text-sm hover:bg-red-500/10 transition-all">
+                            Clear All
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <vinyl-footer></vinyl-footer>
+
+    <!-- Components -->
+    <script src="components/vinyl-nav.js"></script>
+    <script src="components/vinyl-footer.js"></script>
+    
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Load saved settings
+        document.addEventListener('DOMContentLoaded', () => {
+            const openaiKey = localStorage.getItem('openai_api_key');
+            const openaiModel = localStorage.getItem('openai_model') || 'gpt-4o';
+            const maxTokens = localStorage.getItem('openai_max_tokens') || '2000';
+            const discogsKey = localStorage.getItem('discogs_key');
+            const discogsSecret = localStorage.getItem('discogs_secret');
+            
+            if (openaiKey) {
+                document.getElementById('openaiKey').value = openaiKey;
+                updateApiStatus(true);
+            }
+            document.getElementById('openaiModel').value = openaiModel;
+            document.getElementById('maxTokens').value = maxTokens;
+            if (discogsKey) document.getElementById('discogsKey').value = discogsKey;
+            if (discogsSecret) document.getElementById('discogsSecret').value = discogsSecret;
+        });
+
+        function toggleApiVisibility() {
+            const input = document.getElementById('openaiKey');
+            input.type = input.type === 'password' ? 'text' : 'password';
+        }
+
+        function updateApiStatus(connected) {
+            const statusEl = document.getElementById('apiStatus');
+            if (connected) {
+                statusEl.innerHTML = '<span class="w-2 h-2 rounded-full bg-green-500"></span><span class="text-green-400">Connected</span>';
+            } else {
+                statusEl.innerHTML = '<span class="w-2 h-2 rounded-full bg-gray-600"></span><span class="text-gray-500">Not configured</span>';
+            }
+        }
+
+        async function testOpenAIConnection() {
+            const key = document.getElementById('openaiKey').value.trim();
+            if (!key) {
+                showToast('Please enter an API key first', 'error');
+                return;
+            }
+
+            showToast('Testing connection...', 'success');
+            
+            try {
+                const response = await fetch('https://api.openai.com/v1/models', {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': `Bearer ${key}`,
+                        'Content-Type': 'application/json'
+                    }
+                });
+
+                if (response.ok) {
+                    showToast('Connection successful!', 'success');
+                    updateApiStatus(true);
+                } else {
+                    const error = await response.json();
+                    showToast(`Error: ${error.error?.message || 'Invalid API key'}`, 'error');
+                    updateApiStatus(false);
+                }
+            } catch (err) {
+                showToast('Connection failed. Check your internet.', 'error');
+                updateApiStatus(false);
+            }
+        }
+
+        function saveOpenAISettings() {
+            const key = document.getElementById('openaiKey').value.trim();
+            const model = document.getElementById('openaiModel').value;
+            const maxTokens = document.getElementById('maxTokens').value;
+            const discogsKey = document.getElementById('discogsKey').value.trim();
+            const discogsSecret = document.getElementById('discogsSecret').value.trim();
+
+            if (key) {
+                localStorage.setItem('openai_api_key', key);
+                localStorage.setItem('openai_model', model);
+                localStorage.setItem('openai_max_tokens', maxTokens);
+                updateApiStatus(true);
+            }
+            if (discogsKey) localStorage.setItem('discogs_key', discogsKey);
+            if (discogsSecret) localStorage.setItem('discogs_secret', discogsSecret);
+
+            showToast('Settings saved successfully!', 'success');
+        }
+
+        function clearAllData() {
+            if (confirm('Are you sure? This will remove all API keys and preferences.')) {
+                localStorage.removeItem('openai_api_key');
+                localStorage.removeItem('openai_model');
+                localStorage.removeItem('openai_max_tokens');
+                localStorage.removeItem('discogs_key');
+                localStorage.removeItem('discogs_secret');
+                document.getElementById('openaiKey').value = '';
+                document.getElementById('discogsKey').value = '';
+                document.getElementById('discogsSecret').value = '';
+                updateApiStatus(false);
+                showToast('All data cleared', 'success');
+            }
+        }
+    </script>
+</body>
+</html>