Çıkış yap
"https://www.youtube.com/embed/L5l0PhWjJe8?si=hrSQ4nbiM8IZTtCN" title="YouTube video player"
Giriş Yap
Giriş yap
Çıkış yap
🎵 Müzikler
Planı Dosya Olarak Kaydet
Kaydet
import { createClient } from "https://esm.sh/@supabase/supabase-js@2"; // BURAYI KENDİ SUPABASE PROJENİZİN BİLGİLERİYLE DOLDURUN const SUPABASE_URL = "https://gdveoknmevwawrmjwskr.supabase.co"; // örn: https://xxxx.supabase.co const SUPABASE_ANON_KEY = "sb_publishable_hMyM7ftHjHjC8M99r5XEyQ_PsraLSRg"; const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY); const statusEl = document.getElementById("status"); // --- Giriş / Çıkış --- const authGate = document.getElementById("authGate"); const authForm = document.getElementById("authForm"); const authStatusEl = document.getElementById("authStatus"); const authUserLabel = document.getElementById("authUserLabel"); const authEmailInput = document.getElementById("authEmail"); const authPasswordInput = document.getElementById("authPassword"); const authLoginBtn = document.getElementById("authLoginBtn"); const authLogoutBtn = document.getElementById("authLogoutBtn"); const authErrorEl = document.getElementById("authError"); function updateAuthUI(session) { if (session && session.user) { document.body.classList.add("logged-in"); authGate.classList.add("hidden"); // giriş kapısını kapat authForm.style.display = "none"; authStatusEl.style.display = "flex"; authUserLabel.textContent = "Giriş yapıldı: " + session.user.email; } else { document.body.classList.remove("logged-in"); authGate.classList.remove("hidden"); // giriş kapısını tekrar göster authForm.style.display = "flex"; authStatusEl.style.display = "none"; } } supabase.auth.getSession().then(async ({ data }) => { document.body.classList.remove("auth-checking"); updateAuthUI(data.session); if (data.session) { const { error: resetErr } = await supabase .from("planlar") .delete() .not("id", "is", null); if (resetErr) { console.warn("Planlar sıfırlanamadı:", resetErr.message); } } }); supabase.auth.onAuthStateChange((_event, session) => updateAuthUI(session), ); async function handleLogin() { const email = authEmailInput.value.trim(); const password = authPasswordInput.value; authErrorEl.textContent = ""; if (!email || !password) { authErrorEl.textContent = "Lütfen e-posta ve şifre girin."; return; } authLoginBtn.disabled = true; authLoginBtn.textContent = "Giriş yapılıyor..."; const { error } = await supabase.auth.signInWithPassword({ email, password, }); authLoginBtn.disabled = false; authLoginBtn.textContent = "Giriş yap"; if (error) { authErrorEl.textContent = "Giriş başarısız: " + error.message; } else { authPasswordInput.value = ""; // updateAuthUI, onAuthStateChange tetiklendiğinde otomatik çalışır } } authLoginBtn.addEventListener("click", handleLogin); authPasswordInput.addEventListener("keydown", (e) => { if (e.key === "Enter") handleLogin(); }); authLogoutBtn.addEventListener("click", async () => { await supabase.auth.signOut(); }); document .getElementById("topLogoutBtn") .addEventListener("click", async () => { await supabase.auth.signOut(); }); // --- Giriş / Çıkış sonu --- const categories = [ { name: "Aydınlığa Doğru", split: true }, { name: "Dini Vidyo" }, { name: "Hz.Ömer" }, { name: "Radyo Tiyatrosu" }, { name: "Super Natural" }, { name: "Anime" }, { name: "Dini Film" }, { name: "Film" }, ]; const conter = document.getElementById("conter"); // Bir madde kaydeder ve eklenen satırı geri döndürür (anlık ekrana yazmak için) async function saveText(categoryKey, text) { if (!text) return null; const { data, error } = await supabase .from("planlar") .insert({ category: categoryKey, text: text }) .select() .single(); if (error) throw error; return data; } async function deleteItem(id) { const { error } = await supabase.from("planlar").delete().eq("id", id); if (error) throw error; } async function fetchCategory(categoryKey) { const { data, error } = await supabase .from("planlar") .select("id, text") .eq("category", categoryKey) .order("created_at", { ascending: true }); if (error) { statusEl.textContent = "Bağlantı hatası: " + error.message; return []; } return data; } function renderItemList(listEl, items, onDeleteItem) { listEl.innerHTML = ""; items.forEach((item) => { const row = document.createElement("div"); row.className = "item-row"; const box = document.createElement("div"); box.className = "item-box"; box.textContent = item.text; const delBtn = document.createElement("button"); delBtn.className = "item-delete-btn"; delBtn.textContent = "✕"; delBtn.title = "Kaldır"; delBtn.addEventListener("click", () => onDeleteItem(item.id, row)); row.appendChild(box); row.appendChild(delBtn); listEl.appendChild(row); }); } // Tek sütunlu kategori kartı function buildNormalCard(container, catName) { const card = document.createElement("div"); card.className = "log"; card.innerHTML = ` <h3>${catName}</h3> <div class="log-content"> <div class="widget-header"> <button class="menu-btn" title="Seçenekler">⋮</button> <div class="menu-dropdown"> <button class="menu-option add-option">Ekle</button> <button class="menu-option remove-option">Kaldır</button> </div> </div> <div class="pending-area"></div> <div class="item-list"></div> </div> `; container.appendChild(card); const menuBtn = card.querySelector(".menu-btn"); const dropdown = card.querySelector(".menu-dropdown"); const addOption = card.querySelector(".add-option"); const removeOption = card.querySelector(".remove-option"); const pendingArea = card.querySelector(".pending-area"); const listEl = card.querySelector(".item-list"); let items = []; function render() { renderItemList(listEl, items, handleDelete); } async function handleDelete(id, rowEl) { rowEl.remove(); items = items.filter((it) => it.id !== id); try { await deleteItem(id); } catch (err) { statusEl.textContent = "Silinemedi: " + err.message; fetchCategory(catName).then((data) => { items = data; render(); }); } } fetchCategory(catName).then((data) => { items = data; render(); }); menuBtn.addEventListener("click", (e) => { e.stopPropagation(); dropdown.classList.toggle("open"); }); document.addEventListener("click", () => dropdown.classList.remove("open"), ); async function saveAllPending() { const inputs = Array.from( pendingArea.querySelectorAll("input[type='text']"), ); pendingArea.innerHTML = ""; pendingArea.classList.remove("open"); for (const inp of inputs) { const text = inp.value.trim(); if (!text) continue; try { const inserted = await saveText(catName, text); if (inserted) { items.push(inserted); render(); } } catch (err) { statusEl.textContent = "Kaydedilemedi: " + err.message; } } } function addRow() { const row = document.createElement("div"); row.className = "pending-row"; const isFirst = pendingArea.children.length === 0; row.innerHTML = isFirst ? `<input type="text" placeholder="Yeni madde..." /><button class="save-btn">Kaydet</button>` : `<input type="text" placeholder="Yeni madde..." />`; pendingArea.appendChild(row); pendingArea.classList.add("open"); const input = row.querySelector("input"); input.addEventListener("keydown", (e) => { if (e.key === "Enter") saveAllPending(); }); const saveBtn = row.querySelector(".save-btn"); if (saveBtn) saveBtn.addEventListener("click", saveAllPending); input.focus(); } addOption.addEventListener("click", (e) => { e.stopPropagation(); dropdown.classList.remove("open"); listEl.classList.remove("delete-mode"); addRow(); }); removeOption.addEventListener("click", (e) => { e.stopPropagation(); dropdown.classList.remove("open"); listEl.classList.toggle("delete-mode"); }); } // Aydınlığa Doğru: TEK menü, TEK Kaydet, sağ-sol iki yazma kutusu function buildSplitCard(container, catName) { const rightKey = catName + " - sağ"; const leftKey = catName + " - sol"; const card = document.createElement("div"); card.className = "log split"; card.innerHTML = ` <h3>${catName}</h3> <div class="log-content"> <div class="widget-header"> <button class="menu-btn" title="Seçenekler">⋮</button> <div class="menu-dropdown"> <button class="menu-option add-option">Ekle</button> <button class="menu-option remove-option">Kaldır</button> </div> </div> <div class="pending-area"></div> <div class="split-columns"> <div class="item-list" data-side="left"></div> <div class="item-list" data-side="right"></div> </div> </div> `; container.appendChild(card); const menuBtn = card.querySelector(".menu-btn"); const dropdown = card.querySelector(".menu-dropdown"); const addOption = card.querySelector(".add-option"); const removeOption = card.querySelector(".remove-option"); const pendingArea = card.querySelector(".pending-area"); const leftListEl = card.querySelector('.item-list[data-side="left"]'); const rightListEl = card.querySelector('.item-list[data-side="right"]'); let leftItems = []; let rightItems = []; function renderLeft() { renderItemList(leftListEl, leftItems, handleDeleteLeft); } function renderRight() { renderItemList(rightListEl, rightItems, handleDeleteRight); } async function handleDeleteLeft(id, rowEl) { rowEl.remove(); leftItems = leftItems.filter((it) => it.id !== id); try { await deleteItem(id); } catch (err) { statusEl.textContent = "Silinemedi: " + err.message; fetchCategory(leftKey).then((d) => { leftItems = d; renderLeft(); }); } } async function handleDeleteRight(id, rowEl) { rowEl.remove(); rightItems = rightItems.filter((it) => it.id !== id); try { await deleteItem(id); } catch (err) { statusEl.textContent = "Silinemedi: " + err.message; fetchCategory(rightKey).then((d) => { rightItems = d; renderRight(); }); } } fetchCategory(leftKey).then((d) => { leftItems = d; renderLeft(); }); fetchCategory(rightKey).then((d) => { rightItems = d; renderRight(); }); menuBtn.addEventListener("click", (e) => { e.stopPropagation(); dropdown.classList.toggle("open"); }); document.addEventListener("click", () => dropdown.classList.remove("open"), ); async function saveAllPending() { const rows = Array.from(pendingArea.querySelectorAll(".pending-row")); pendingArea.innerHTML = ""; pendingArea.classList.remove("open"); for (const row of rows) { const leftInput = row.querySelector('input[data-side="left"]'); const rightInput = row.querySelector('input[data-side="right"]'); const leftText = leftInput.value.trim(); const rightText = rightInput.value.trim(); if (leftText) { try { const inserted = await saveText(leftKey, leftText); if (inserted) { leftItems.push(inserted); renderLeft(); } } catch (err) { statusEl.textContent = "Kaydedilemedi (sol): " + err.message; } } if (rightText) { try { const inserted = await saveText(rightKey, rightText); if (inserted) { rightItems.push(inserted); renderRight(); } } catch (err) { statusEl.textContent = "Kaydedilemedi (sağ): " + err.message; } } } } function addPairRow() { const row = document.createElement("div"); row.className = "pending-row"; const isFirst = pendingArea.children.length === 0; row.innerHTML = isFirst ? `<input type="text" data-side="left" placeholder="Sol..." /> <input type="text" data-side="right" placeholder="Sağ..." /> <button class="save-btn">Kaydet</button>` : `<input type="text" data-side="left" placeholder="Sol..." /> <input type="text" data-side="right" placeholder="Sağ..." />`; pendingArea.appendChild(row); pendingArea.classList.add("open"); row.querySelectorAll("input").forEach((inp) => { inp.addEventListener("keydown", (e) => { if (e.key === "Enter") saveAllPending(); }); }); const saveBtn = row.querySelector(".save-btn"); if (saveBtn) saveBtn.addEventListener("click", saveAllPending); row.querySelector("input").focus(); } addOption.addEventListener("click", (e) => { e.stopPropagation(); dropdown.classList.remove("open"); leftListEl.classList.remove("delete-mode"); rightListEl.classList.remove("delete-mode"); addPairRow(); }); removeOption.addEventListener("click", (e) => { e.stopPropagation(); dropdown.classList.remove("open"); leftListEl.classList.toggle("delete-mode"); rightListEl.classList.toggle("delete-mode"); }); } categories.forEach((cat) => { if (cat.split) { buildSplitCard(conter, cat.name); } else { buildNormalCard(conter, cat.name); } }); // --- Planı dosya olarak kaydet + kayıtlı planlar --- const planNameInput = document.getElementById("planNameInput"); const planDateInput = document.getElementById("planDateInput"); const savePlanBtn = document.getElementById("savePlanBtn"); savePlanBtn.addEventListener("click", async () => { const name = planNameInput.value.trim(); const planDate = planDateInput.value; if (!name) { statusEl.textContent = "Lütfen dosya için bir isim yazın."; return; } try { const { data: allItems, error: fetchErr } = await supabase .from("planlar") .select("category, text") .order("created_at", { ascending: true }); if (fetchErr) throw fetchErr; const snapshot = {}; (allItems || []).forEach((row) => { if (!snapshot[row.category]) snapshot[row.category] = []; snapshot[row.category].push(row.text); }); const { error: insertErr } = await supabase.from("dosyalar").insert({ name: name, plan_date: planDate || null, snapshot: snapshot, }); if (insertErr) throw insertErr; const { error: deleteErr } = await supabase .from("planlar") .delete() .not("id", "is", null); if (deleteErr) throw deleteErr; statusEl.textContent = "Kaydedildi, sayfa sıfırlanıyor..."; setTimeout(() => { location.reload(); }, 800); } catch (err) { statusEl.textContent = "Dosya kaydedilemedi: " + err.message; } }); // --- Dosya olarak kaydetme sonu --- const videoIds = { audio1: "cEfyusz6aXo", audio2: "VYCOg-yglNM", audio3: "4pPqYCNmaL8", }; let ytPlayers = {}; let ytReadyCount = 0; // YouTube API hazır olunca otomatik çağrılan fonksiyon (global olmalı) function initYouTubePlayers() { console.log("Player'lar oluşturuluyor..."); ["audio1", "audio2", "audio3"].forEach((key, index) => { const playerDivId = "ytPlayer" + (index + 1); ytPlayers[key] = new YT.Player(playerDivId, { height: "1", width: "1", videoId: videoIds[key], playerVars: { autoplay: 0, controls: 0, }, events: { onReady: () => { console.log(key + " player hazır!"); ytReadyCount++; }, onError: (e) => { console.log(key + " player HATA verdi:", e.data); }, }, }); }); } // Callback yerine YT nesnesinin hazır olup olmadığını kendimiz kontrol ediyoruz let ytCheckInterval = setInterval(() => { if (window.YT && typeof YT.Player === "function") { console.log("YT nesnesi hazır, başlatılıyor."); clearInterval(ytCheckInterval); initYouTubePlayers(); } else { console.log("YT henüz hazır değil, bekleniyor..."); } }, 300); // --- Ses oynatma (play/pause) --- document.addEventListener("DOMContentLoaded", () => { const playerBoxes = document.querySelectorAll(".side-player-box"); function stopAllPlayers(exceptBox) { playerBoxes.forEach((box) => { if (box === exceptBox) return; const btn = box.querySelector(".toggle-btn"); const vinyl = box.querySelector(".vinyl"); const audioEl = document.getElementById(btn.dataset.audio); if (audioEl) audioEl.pause(); vinyl.classList.remove("spinning"); box.classList.remove("playing"); btn.textContent = "▶"; }); } playerBoxes.forEach((box) => { const toggleBtn = box.querySelector(".toggle-btn"); const vinyl = box.querySelector(".vinyl"); const key = toggleBtn.dataset.audio; const audioEl = document.getElementById(key); toggleBtn.addEventListener("click", () => { if (!audioEl) return; if (audioEl.paused) { stopAllPlayers(box); audioEl.play(); vinyl.classList.add("spinning"); box.classList.add("playing"); toggleBtn.textContent = "⏸"; } else { audioEl.pause(); vinyl.classList.remove("spinning"); box.classList.remove("playing"); toggleBtn.textContent = "▶"; } }); }); }); // --- Ses oynatma sonu --- </script> </body> </html>