<!DOCTYPE html>

<head>

<title>FiyatAvcısı - Akıllı Fiyat Takip Paneli</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body { font-family: 'Inter', sans-serif; }

/* Tema Değişiklikleri: Loş ve Sade */

body {

background-color: #0f172a; /* bg-slate-900 */

color: #e2e8f0; /* text-slate-200 */

}

.bg-card {

background-color: #1e293b; /* bg-slate-800 */

}

.text-primary {

color: #22d3ee; /* text-cyan-400 */

}

.bg-primary {

background-color: #0891b2; /* bg-cyan-600 */

}

.loading-spin {

animation: spin 1s linear infinite;

}

@keyframes spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

.store-badge {

transition: all 0.2s;

}

.store-badge:hover {

transform: translateY(-2px);

}

/* Ayarlar Paneli Animasyonu */

#settingsPanel {

transition: max-height 0.3s ease-out, opacity 0.3s ease-out;

max-height: 0;

opacity: 0;

overflow: hidden;

}

#settingsPanel.open {

max-height: 400px;

opacity: 1;

}

/* AI Modal Animasyonu */

.modal {

transition: opacity 0.3s ease-in-out;

opacity: 0;

pointer-events: none;

}

.modal.active {

opacity: 1;

pointer-events: auto;

}

/* Markdown İçerik Stilleri (Koyu Temaya Uyarlandı) */

.markdown-content ul { list-style-type: disc; margin-left: 1.5rem; margin-top: 0.5rem; }

.markdown-content li { margin-bottom: 0.25rem; }

.markdown-content p { margin-bottom: 0.75rem; }

.markdown-content strong { color: #22d3ee; /* cyan-400 */ }

.modal-content-bg { background-color: #1e293b; } /* Modal arka planı */

</style>

</head>

<h1 class="text-xl font-bold tracking-wide text-slate-100">FiyatAvcısı</h1>

</div>

<i class="fa-solid fa-gamepad text-yellow-300 mr-1"></i> <span class="hidden md:inline">Simülasyon</span>

</div>

</button>

</div>

</nav>

<i class="fa-solid fa-wand-magic-sparkles"></i> API Bağlantı Ayarları

</h3>

Sistem artık hem fiyat takibi hem de analiz için <strong>tek bir anahtar</strong> kullanıyor.

<a href="https://aistudio.google.com/app/apikey" target="_blank" class="text-cyan-400 underline font-medium">Buradan ücretsiz bir Gemini API Key alın</a> ve yapıştırın.

</p>

<label class="block text-xs font-semibold text-slate-400 mb-1">GEMINI API KEY</label>

</div>

</div>

Ayarları Sıfırla

</button>

Kaydet ve Bağlan

</button>

</div>

<div>

<h2 class="text-2xl font-bold text-slate-100">Takip Listem</h2>

<p class="text-slate-400 text-sm mt-1">Eklediğin ürünlerin fiyat değişimlerini buradan izleyebilirsin.</p>

</div>

<span>Tüm Fiyatları Güncelle</span>

</button>

</div>

<i class="fa-solid fa-plus-circle text-cyan-400"></i> Yeni Ürün Ekle

</h3>

</div>

<div>

<label class="block text-xs text-slate-400 font-medium mb-1 uppercase">Hedef Fiyat (TL)</label>

</div>

<span>Listeye Ekle</span>

</button>

</div>

<span class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block">🔥 Hızlı Ekle / Tavsiyeler</span>

</div>

<p>Listeniz boş. Yukarıdan ürün ekleyerek başlayın.</p>

</div>

<i class="fa-solid fa-sliders text-cyan-400"></i> Yönetim Araçları

</h3>

</div>

<div class="font-semibold text-sm">Excel/CSV İndir</div>

</div>

</button>

</div>

<div class="font-semibold text-sm">Fiyata Görala</div>

</div>

</button>

</div>

<div class="font-semibold text-sm">İsme Göre Sırala</div>

</div>

</button>

</div>

<div class="font-semibold text-sm">Listeyi Temizle</div>

</div>

</button>

</div>

<div>

<h3 class="font-bold text-lg">Gemini Alışveriş Asistanı</h3>

<p class="text-xs text-slate-200 opacity-90">Yapay Zeka Destekli Analiz</p>

</div>

</button>

</div>

<p class="text-slate-400 font-medium animate-pulse">Gemini internette fiyatları araştırıyor...</p>

</div>

</div>

Gemini 2.5 AI modeli tarafından internet aramasıyla oluşturulmuştur.

</div>

<span id="toastMessage">İşlem başarılı!</span>

</div>

// GLOBAL DEĞİŞKENLER

// Sadece Gemini Key Yeterli

let GEMINI_API_KEY = localStorage.getItem('geminiApiKey') || '';

let products = JSON.parse(localStorage.getItem('trackedProducts')) || [];

// Tavsiye Edilen Ürünler

const recommendedProducts = [

{ name: "iPhone 15 128GB", price: 58000 },

{ name: "PlayStation 5 Slim", price: 23000 },

{ name: "Dyson Airwrap", price: 20000 },

{ name: "AirPods Pro 2", price: 9000 },

{ name: "Samsung S24 Ultra", price: 70000 },

{ name: "Philips Airfryer XXL", price: 8500 },

{ name: "MacBook Air M2", price: 42000 },

{ name: "Xiaomi Robot Süpürge", price: 12000 }

];

const fallbackStores = [

{ name: 'Trendyol', icon: 'fa-shipping-fast', color: 'text-orange-400' },

{ name: 'Hepsiburada', icon: 'fa-box-open', color: 'text-red-400' },

{ name: 'Amazon TR', icon: 'fa-amazon', color: 'text-yellow-400' },

{ name: 'N11', icon: 'fa-ladybug', color: 'text-pink-400' }

];

document.addEventListener('DOMContentLoaded', () => {

checkApiStatus();

renderProducts();

renderRecommendations();

// Ayarlar panelini doldur

document.getElementById('inputGeminiKey').value = GEMINI_API_KEY;

});

// ==========================================

// AYARLAR VE API YÖNETİMİ

// ==========================================

function toggleSettings() {

const panel = document.getElementById('settingsPanel');

panel.classList.toggle('open');

}

function saveApiSettings() {

const geminiKey = document.getElementById('inputGeminiKey').value.trim();

if (!geminiKey) {

showToast('Lütfen geçerli bir Gemini API anahtarı girin.', 'error');

return;

}

localStorage.setItem('geminiApiKey', geminiKey);

GEMINI_API_KEY = geminiKey;

// Temizlik (Eski anahtarlar varsa silelim, kafa karıştırmasın)

localStorage.removeItem('googleApiKey');

localStorage.removeItem('searchEngineId');

checkApiStatus();

toggleSettings();

showToast('Ayarlar kaydedildi! Tek anahtar modu aktif.');

}

function clearApiSettings() {

if(confirm('API anahtarını silmek istiyor musunuz?')) {

localStorage.removeItem('geminiApiKey');

document.getElementById('inputGeminiKey').value = '';

GEMINI_API_KEY = '';

checkApiStatus();

showToast('Ayarlar sıfırlandı.', 'error');

}

function checkApiStatus() {

const statusEl = document.getElementById('apiStatus');

const icon = statusEl.querySelector('i');

const text = statusEl.querySelector('span');

if (GEMINI_API_KEY) {

statusEl.className = "text-xs md:text-sm bg-green-700 px-3 py-1 rounded-full flex items-center transition-colors text-white shadow-sm border border-green-600";

icon.className = "fa-solid fa-bolt text-white mr-1";

text.textContent = "AI & Veri Aktif";

} else {

statusEl.className = "text-xs md:text-sm bg-slate-700 px-3 py-1 rounded-full flex items-center transition-colors text-slate-300 opacity-80";

icon.className = "fa-solid fa-gamepad text-yellow-300 mr-1";

text.textContent = "Simülasyon Modu";

}

// ==========================================

// AI ANALİZ FONKSİYONLARI (GEMINI)

// ==========================================

async function openAiAnalysis(productId) {

const product = products.find(p => p.id === productId);

if (!product) return;

if (!GEMINI_API_KEY) {

showToast('Önce Ayarlar kısmından Gemini API Anahtarı girin!', 'error');

toggleSettings();

return;

}

const modal = document.getElementById('aiModal');

const loading = document.getElementById('aiLoading');

const content = document.getElementById('aiContent');

const resultText = document.getElementById('aiResultText');

modal.classList.add('active');

loading.classList.remove('hidden');

loading.classList.add('flex');

content.classList.add('hidden');

resultText.innerHTML = '';

const currentPrice = product.bestPrice > 0 ? formatCurrency(product.bestPrice) : "Fiyat Bulunamadı";

const targetPrice = product.targetPrice > 0 ? formatCurrency(product.targetPrice) : "Belirtilmedi";

const sourceInfo = product.source === 'API' ? 'Gerçek Veri' : 'Simülasyon';

const prompt = `

Sen uzman bir e-ticaret danışmanısın. Aşağıdaki ürünü analiz et.

ÜRÜN: ${product.name}

GÜNCEL FİYAT: ${currentPrice} (${sourceInfo})

HEDEF FİYAT: ${targetPrice}

Lütfen cevabını Türkçe ve Markdown formatında ver:

1. **Fiyat Analizi:** Bu fiyat piyasaya göre nasıl?

2. **Ürün Özeti:** Öne çıkan 2 özellik.

3. **Tavsiye:** Almalı mı, beklemeli mi?

Kısa ve öz yaz.

try {

// Grounding olmadan, sadece analiz için

const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${GEMINI_API_KEY}`, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

contents: [{ parts: [{ text: prompt }] }]

})

});

const data = await response.json();

if (data.error) {

console.error("Gemini API Hatası:", data.error);

if (data.error.message.includes("API key not valid")) {

resultText.innerHTML = `<div class="text-red-400 font-medium">HATA: Gemini API Anahtarı Geçersiz. Lütfen Ayarlar panelini kontrol edin.</div>`;

} else {

resultText.innerHTML = `<div class="text-red-400 font-medium">Hata: Analiz yapılırken bir sorun oluştu. Detay: ${data.error.message}</div>`;

}

loading.classList.remove('flex');

loading.classList.add('hidden');

content.classList.remove('hidden');

return;

}

// YENİ KONTROL: İçeriğin var olup olmadığını kontrol et

const candidate = data.candidates?.[0];

const aiResponseText = candidate?.content?.parts?.[0]?.text;

if (!aiResponseText) {

console.error("Gemini API: Analiz metni boş döndü.", data);

resultText.innerHTML = `<div class="text-red-400 font-medium">Hata: Analiz için yeterli bilgi oluşturulamadı.</div>`;

} else {

resultText.innerHTML = marked.parse(aiResponseText);

}

loading.classList.remove('flex');

loading.classList.add('hidden');

content.classList.remove('hidden');

} catch (error) {

console.error("Gemini Hatası:", error);

loading.classList.remove('flex');

loading.classList.add('hidden');

content.classList.remove('hidden');

resultText.innerHTML = `<div class="text-red-400 font-medium">Bağlantı Hatası: Lütfen internet bağlantınızı kontrol edin.</div>`;

}

function closeAiModal() {

document.getElementById('aiModal').classList.remove('active');

}

// ==========================================

// DİĞER FONKSİYONLAR

// ==========================================

function renderRecommendations() {

const container = document.getElementById('recommendations');

container.innerHTML = recommendedProducts.map(item => `

<button onclick="fillForm('${item.name}', ${item.price})"

class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 hover:text-cyan-400 hover:border-cyan-700 border border-slate-700 rounded-full text-xs text-slate-300 font-medium transition active:scale-95">

${item.name}

</button>

`).join('');

}

function fillForm(name, price) {

document.getElementById('productName').value = name;

document.getElementById('targetPrice').value = price;

}

async function addProduct() {

const nameInput = document.getElementById('productName');

const priceInput = document.getElementById('targetPrice');

const btn = document.getElementById('addBtn');

const name = nameInput.value.trim();

const target = parseFloat(priceInput.value);

if (!name) {

showToast('Lütfen bir ürün adı girin.', 'error');

return;

}

const originalBtnContent = btn.innerHTML;

btn.disabled = true;

btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Aranıyor...';

const newProduct = {

id: Date.now(),

name: name,

targetPrice: target || 0,

lastChecked: new Date().toLocaleString('tr-TR'),

bestPrice: 0,

prices: [],

source: 'SIMULATION'

};

// EĞER GEMINI KEY VARSA -> GERÇEK ARAMA YAP

if (GEMINI_API_KEY) {

newProduct.prices = await fetchRealPrices(name);

newProduct.source = 'API';

// Hata bildirimi fetchRealPrices içinde yapıldığı için burada sadece veri kontrolü

if (newProduct.prices.length === 0) {

// Sadece fiyat bulunamadıysa (API hatası değilse) uyarı ver

if (!localStorage.getItem('geminiApiKey')) {

// Eğer anahtar silinmişse, simülasyona dön

} else {

showToast('Fiyat bilgisi bulunamadı. Lütfen daha spesifik arama yapın.', 'error');

}

} else {

// KEY YOKSA -> SİMÜLASYON

await new Promise(r => setTimeout(r, 800));

newProduct.prices = generateSimulatedPrices(target || 1000);

newProduct.source = 'SIMULATION';

}

if (newProduct.prices.length > 0) {

newProduct.bestPrice = Math.min(...newProduct.prices.map(p => p.price));

} else {

newProduct.bestPrice = 0;

}

products.unshift(newProduct);

saveData();

renderProducts();

nameInput.value = '';

priceInput.value = '';

btn.disabled = false;

btn.innerHTML = originalBtnContent;

showToast('Ürün listeye eklendi!');

}

function deleteProduct(id) {

if(confirm('Bu ürünü takipten çıkarmak istiyor musunuz?')) {

products = products.filter(p => p.id !== id);

saveData();

renderProducts();

showToast('Ürün silindi.');

}

// ======================================================

// CORE: TEK KEY İLE FİYAT ARAMA (GEMINI GROUNDING)

// ======================================================

async function fetchRealPrices(query) {

// Google Arama aracını kullanarak Gemini'ye soruyoruz

const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${GEMINI_API_KEY}`;

// Hepsiburada'yı önceliklendiren yeni prompt

const prompt = `

Türkiye'deki online mağazalarda şu ürünün güncel fiyatını ara: "${query}".

Özellikle Hepsiburada.com ve diğer büyük Türk e-ticaret sitelerinden (Trendyol, Amazon TR, N11, Pazarama vb.) en ucuz ve güvenilir 3-4 sonucu listele.

Lütfen bulduğun sonuçları şu JSON formatında ver:

[

{"storeName": "Mağaza Adı", "price": 12345.00, "link": "https://..."}

]

ÖNEMLİ:

1. Sadece JSON döndür. Başka açıklama yazma.

2. Fiyatları sadece sayı olarak ver (TL sembolü koyma).

3. Eğer mağaza linki bulamazsan link yerine "#" koy.

try {

const response = await fetch(url, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify({

contents: [{ parts: [{ text: prompt }] }],

tools: [{ google_search: {} }], // Google Search Grounding Aktif

})

});

const data = await response.json();

// Hata Kontrolü (API anahtarı vb. hatalar burada yakalanır)

if (data.error) {

console.error("Gemini API Hatası:", data.error);

if (data.error.message.includes("API key not valid") || data.error.reason === "API_KEY_INVALID") {

showToast('HATA: Geçersiz Gemini API Anahtarı. Lütfen Ayarlar panelini kontrol edin.', 'error');

return [];

}

showToast(`API Hatası: ${data.error.message.substring(0, 50)}...`, 'error');

return [];

}

// YENİ KONTROL: Modelin yanıtının boş olup olmadığını kontrol et

const candidate = data.candidates?.[0];

const jsonText = candidate?.content?.parts?.[0]?.text;

if (!jsonText) {

console.error("Gemini API: Fiyat bilgisi boş döndü. Prompt veya model yanıtı eksik.", data);

return [];

}

// Markdown temizliği (```json ve ``` işaretlerini kaldır)

let cleanedJsonText = jsonText.replace(/```json/g, '').replace(/```/g, '').trim();

let results = JSON.parse(cleanedJsonText);

// Veriyi bizim formata uydur (ikon ve renk ekle)

results = results.map(item => {

const storeInfo = identifyStore(item.storeName.toLowerCase() + " " + item.link);

return {

storeName: item.storeName,

price: parseFloat(item.price),

link: item.link,

icon: storeInfo.icon,

color: storeInfo.color

};

});

// Sıralama

return results.sort((a,b) => a.price - b.price);

} catch (error) {

console.error('Fiyat Arama Hatası:', error);

// JSON ayrıştırma hatası, ağ bağlantısı hatası vb.

showToast('Ağ bağlantısı veya JSON ayrıştırma hatası.', 'error');

return [];

}

function identifyStore(text) {

text = text.toLowerCase();

if (text.includes('trendyol')) return { name: 'Trendyol', icon: 'fa-shipping-fast', color: 'text-orange-400' };

if (text.includes('hepsiburada')) return { name: 'Hepsiburada', icon: 'fa-box-open', color: 'text-red-400' };

if (text.includes('amazon')) return { name: 'Amazon', icon: 'fa-amazon', color: 'text-yellow-400' };

if (text.includes('n11')) return { name: 'N11', icon: 'fa-ladybug', color: 'text-pink-400' };

if (text.includes('teknosa')) return { name: 'Teknosa', icon: 'fa-plug', color: 'text-blue-400' };

if (text.includes('mediamarkt')) return { name: 'MediaMarkt', icon: 'fa-mobile-screen-button', color: 'text-red-400' };

if (text.includes('pazarama')) return { name: 'Pazarama', icon: 'fa-bag-shopping', color: 'text-fuchsia-400' };

return { name: 'Online Mağaza', icon: 'fa-store', color: 'text-slate-500' };

}

function generateSimulatedPrices(basePrice) {

const result = [];

const selectedStores = fallbackStores.sort(() => 0.5 - Math.random()).slice(0, 3);

selectedStores.forEach(store => {

const randomVariation = (Math.random() * 0.4) - 0.2;

let simPrice = basePrice * (1 + randomVariation);

if (basePrice === 0) simPrice = Math.random() * 1000 + 100;

result.push({

storeName: store.name,

price: Math.floor(simPrice),

link: '#',

icon: store.icon,

color: store.color

});

return result.sort((a, b) => a.price - b.price);

}

async function updateAllPrices() {

const btn = document.getElementById('updateAllBtn');

const icon = btn.querySelector('i');

icon.classList.add('loading-spin');

btn.disabled = true;

btn.classList.add('opacity-75');

const updates = products.map(async (p) => {

// API VARSA -> GERÇEK ARAMA

if (GEMINI_API_KEY) {

const realPrices = await fetchRealPrices(p.name);

p.source = 'API';

if (realPrices.length > 0) {

p.prices = realPrices;

p.bestPrice = Math.min(...p.prices.map(item => item.price));

}

} else {

// KEY YOKSA -> SİMÜLASYON

await new Promise(r => setTimeout(r, 500));

const baseRef = p.targetPrice > 0 ? p.targetPrice : p.bestPrice || 1000;

p.prices = generateSimulatedPrices(baseRef);

p.source = 'SIMULATION';

p.bestPrice = Math.min(...p.prices.map(item => item.price));

}

p.lastChecked = new Date().toLocaleString('tr-TR');

return p;

});

await Promise.all(updates);

saveData();

renderProducts();

icon.classList.remove('loading-spin');

btn.disabled = false;

btn.classList.remove('opacity-75');

showToast('Tüm fiyatlar güncellendi!');

}

function renderProducts() {

const container = document.getElementById('productList');

if (products.length === 0) {

container.innerHTML = `

</div>

<h3 class="text-lg font-semibold text-slate-200">Listeniz Henüz Boş</h3>

<p class="text-slate-400 text-sm mt-2">Takip etmek istediğiniz ilk ürünü yukarıdan ekleyin.</p>

</div>

return;

}

container.innerHTML = products.map(product => {

const hasData = product.prices.length > 0;

const bestDeal = hasData ? product.prices[0] : { price: 0, storeName: 'Veri Bulunamadı', color: 'text-slate-500' };

const isTargetMet = product.targetPrice > 0 && bestDeal.price <= product.targetPrice && bestDeal.price > 0;

const isRealData = product.source === 'API';

// Kart HTML

return `

${isRealData ? '<i class="fa-solid fa-bolt"></i> Yapay Zeka' : '<i class="fa-solid fa-robot"></i> Simülasyon'}

</div>

<div>

<h3 class="font-bold text-slate-100 text-lg leading-tight mb-1">${product.name}</h3>

<i class="fa-regular fa-clock"></i> Son güncel: ${product.lastChecked.split(' ')[1]}

</div>

</button>

</div>

<p class="text-xs font-semibold uppercase tracking-wider ${isTargetMet ? 'text-emerald-300' : 'text-slate-400'} mb-1">En İyi Fiyat</p>

${bestDeal.price > 0 ? formatCurrency(bestDeal.price) : '---'}

</span>

${bestDeal.storeName}

</span>

</div>

${product.targetPrice > 0 ? `

Hedef: ${formatCurrency(product.targetPrice)}

</div>

` : ''}

</div>

${hasData ? product.prices.map((offer, index) => `

</div>

<span class="font-medium text-slate-200">${offer.storeName}</span>

${index === 0 ? '<span class="bg-cyan-800 text-cyan-300 text-[10px] px-2 py-0.5 rounded-full font-bold">EN UCUZ</span>' : ''}

</div>

${formatCurrency(offer.price)}

</div>

</a>

`).join('') : `

Fiyat verisi bulunamadı.

</div>

Gemini ile Analiz Et

</button>

</div>

}).join('');

}

function saveData() {

localStorage.setItem('trackedProducts', JSON.stringify(products));

}

function exportToCSV() {

if (products.length === 0) {

showToast('İndirilecek veri yok!', 'error');

return;

}

let csvContent = "data:text/csv;charset=utf-8,";

csvContent += "Urun Adi,En Iyi Fiyat,Hedef Fiyat,Magaza,Tarih\n";

products.forEach(p => {

const best = p.prices[0] || {price:0, storeName:'-'};

const row = `"${p.name}",${best.price},${p.targetPrice},"${best.storeName}","${p.lastChecked}"`;

csvContent += row + "\n";

});

const encodedUri = encodeURI(csvContent);

const link = document.createElement("a");

link.setAttribute("href", encodedUri);

link.setAttribute("download", "fiyat_takip_listesi.csv");

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

showToast('Liste Excel/CSV olarak indirildi.');

}

function sortProducts(criteria) {

if (products.length === 0) return;

if (criteria === 'price') {

products.sort((a, b) => (a.bestPrice || 0) - (b.bestPrice || 0));

showToast('Ürünler fiyata göre sıralandı.');

} else if (criteria === 'name') {

products.sort((a, b) => a.name.localeCompare(b.name, 'tr'));

showToast('Ürünler isme göre sıralandı.');

}

renderProducts();

saveData();

}

function clearAllData() {

if (products.length === 0) return;

if(confirm('DİKKAT: Tüm takip listeniz silinecek. Bu işlem geri alınamaz. Emin misiniz?')) {

products = [];

localStorage.removeItem('trackedProducts');

renderProducts();

showToast('Tüm liste temizlendi.', 'error');

}

function formatCurrency(amount) {

return new Intl.NumberFormat('tr-TR', { style: 'currency', currency: 'TRY' }).format(amount);

}

function showToast(message, type = 'success') {

const toast = document.getElementById('toast');

const msgEl = document.getElementById('toastMessage');

const icon = toast.querySelector('i');

// Renkleri loş temaya uygun ayarla

const bgColor = type === 'error' ? 'bg-red-800' : 'bg-slate-700';

const iconColor = type === 'error' ? 'text-red-400' : 'text-green-400';

toast.className = `fixed bottom-5 right-5 ${bgColor} text-white px-6 py-3 rounded-lg shadow-2xl transform translate-y-24 transition-transform duration-300 z-50 flex items-center gap-3`;

icon.className = `fa-solid ${type === 'error' ? 'fa-circle-exclamation' : 'fa-check-circle'} ${iconColor}`;

msgEl.textContent = message;

toast.classList.remove('translate-y-24');

setTimeout(() => {

toast.classList.add('translate-y-24');

}, 3000);

}

</script>

</body>

</html>