Proje dosyaları eklendi

2026-08-29 15:53:53 +03:00
commit d3313400ca
440 changed files with 24827 additions and 0 deletions
@@ -0,0 +1,72 @@
+import './bootstrap';
+import 'bootstrap';
+import './api-keys';
+import '../css/api-keys.css';
+import '../css/api-key-status.css';
+
+const icons = { light: '☀', dark: '☾', system: '◐' };
+
+function updateThemeControls(event) {
+    const state = event?.detail ?? {
+        preference: window.ThemeManager.getPreference(),
+        resolved: window.ThemeManager.getResolvedTheme(),
+    };
+
+    document.querySelectorAll('[data-theme-value]').forEach((button) => {
+        const active = button.dataset.themeValue === state.preference;
+        button.classList.toggle('active', active);
+        button.setAttribute('aria-pressed', String(active));
+        button.setAttribute('aria-current', active ? 'true' : 'false');
+        const check = button.querySelector('[data-theme-check]');
+        if (check) check.hidden = !active;
+    });
+    document.querySelectorAll('[data-theme-current-label]').forEach((node) => {
+        node.textContent = document.querySelector(`[data-theme-value="${state.preference}"]`)?.dataset.themeLabel ?? state.preference;
+    });
+    document.querySelectorAll('[data-theme-current-icon]').forEach((node) => {
+        node.textContent = icons[state.preference];
+    });
+    document.querySelectorAll('[data-theme-preference]').forEach((node) => {
+        node.textContent = document.querySelector(`[data-theme-value="${state.preference}"]`)?.dataset.themeLabel ?? state.preference;
+    });
+    document.querySelectorAll('[data-theme-resolved]').forEach((node) => {
+        node.textContent = document.querySelector(`[data-theme-value="${state.resolved}"]`)?.dataset.themeLabel ?? state.resolved;
+    });
+}
+
+document.addEventListener('click', (event) => {
+    const button = event.target.closest('[data-theme-value]');
+    if (button) {
+        window.ThemeManager.setPreference(button.dataset.themeValue);
+    }
+});
+document.querySelector('[data-settings-theme]')?.addEventListener('change', event => window.ThemeManager.setPreference(event.target.value));
+if (document.querySelector('input[name="reduced_motion"]:checked')) document.documentElement.dataset.reducedMotion = 'true';
+
+window.addEventListener('trafficpumper:theme-change', updateThemeControls);
+updateThemeControls();
+
+function renderRankingCharts() {
+    document.querySelectorAll('[data-ranking-chart]').forEach((container) => {
+        const series = JSON.parse(container.dataset.rankingChart || '[]');
+        const colors = ['#6d5dfc', '#16a085', '#e45175', '#e6a23c', '#2d8cf0', '#8e44ad'];
+        const width = 900, height = 320, pad = 38;
+        const points = series.flatMap((item) => item.points);
+        if (!points.length) return;
+        const dates = points.map((point) => new Date(point.date).getTime());
+        const minDate = Math.min(...dates), maxDate = Math.max(...dates);
+        const x = (date) => pad + ((new Date(date).getTime() - minDate) / Math.max(1, maxDate - minDate)) * (width - pad * 2);
+        const y = (rank) => pad + ((rank - 1) / 99) * (height - pad * 2);
+        const grid = [1, 10, 20, 50, 100].map((rank) => `<line x1="${pad}" y1="${y(rank)}" x2="${width-pad}" y2="${y(rank)}"/><text x="4" y="${y(rank)+4}">${rank}</text>`).join('');
+        const paths = series.map((item, index) => {
+            const coordinates = item.points.map((point) => `${x(point.date)},${y(point.rank)}`).join(' ');
+            const dots = item.points.map((point) => `<circle cx="${x(point.date)}" cy="${y(point.rank)}" r="4"><title>${item.keyword} · ${item.project} · #${point.rank} · ${new Date(point.date).toLocaleString()}</title></circle>`).join('');
+            return `<g style="--series:${colors[index%colors.length]}"><polyline points="${coordinates}"/>${dots}</g>`;
+        }).join('');
+        const legend = series.map((item,index)=>`<span><i style="background:${colors[index%colors.length]}"></i>${item.keyword}</span>`).join('');
+        container.innerHTML = `<svg viewBox="0 0 ${width} ${height}" aria-hidden="true"><g class="tp-chart-grid">${grid}</g>${paths}</svg><div class="tp-chart-legend">${legend}</div>`;
+    });
+}
+renderRankingCharts();
+window.addEventListener('trafficpumper:theme-change', renderRankingCharts);
+function renderVisibilityCharts(){document.querySelectorAll('[data-visibility-chart]').forEach(container=>{const data=JSON.parse(container.dataset.visibilityChart||'{}');const all=[...(data.current||[]),...(data.previous||[])];if(!all.length)return;const w=900,h=300,p=35;const dates=all.map(x=>new Date(x.date).getTime()),min=Math.min(...dates),max=Math.max(...dates);const x=d=>p+(new Date(d).getTime()-min)/Math.max(1,max-min)*(w-p*2),y=v=>h-p-(v/100)*(h-p*2);const series=(points,color,dash='')=>`<polyline style="stroke:${color};stroke-dasharray:${dash}" points="${points.map(q=>`${x(q.date)},${y(q.score)}`).join(' ')}"/>`+points.map(q=>`<circle style="--series:${color}" cx="${x(q.date)}" cy="${y(q.score)}" r="4"><title>${q.date} · ${q.score}% · ${q.measured}</title></circle>`).join('');container.innerHTML=`<svg viewBox="0 0 ${w} ${h}"><g class="tp-chart-grid">${[0,25,50,75,100].map(v=>`<line x1="${p}" y1="${y(v)}" x2="${w-p}" y2="${y(v)}"/><text x="2" y="${y(v)+4}">${v}%</text>`).join('')}</g>${series(data.current||[],'#6d5dfc')}${series(data.previous||[],'#16a085','7 5')}</svg>`;});}renderVisibilityCharts();window.addEventListener('trafficpumper:theme-change',renderVisibilityCharts);