<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ACR Yazılımları | Hızlı Resim Yükle</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" />
<style>
:root{
--bg1:#0f172a; --bg2:#111827; --surface:rgba(17,24,39,.65);
--text:#e5e7eb; --muted:#94a3b8; --border:rgba(255,255,255,.10);
--brand:#6366f1; --brand-2:#22d3ee;
/* narin bilişim temalı arka plan GIF */
--gif-url:url('https://media.giphy.com/media/3o7TKtnuHOHHUjR38Y/giphy.gif');
}
:root[data-theme="light"]{
--bg1:#f8fafc; --bg2:#ffffff; --surface:rgba(255,255,255,.85);
--text:#0f172a; --muted:#475569; --border:rgba(15,23,42,.10);
--brand:#4f46e5; --brand-2:#06b6d4;
}
*{box-sizing:border-box}
body{min-height:100vh; position:relative; color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial; overflow-x:hidden;}
/* Arka plan: GIF + üst tül/gradyan */
body::before{content:""; position:fixed; inset:0; z-index:-2; background: var(--gif-url) center/cover fixed no-repeat; opacity:.22; filter: blur(1px);}
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:
radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,.18), transparent 40%),
radial-gradient(900px 500px at 100% 0%, rgba(99,102,241,.22), transparent 45%),
linear-gradient(135deg, var(--bg1), var(--bg2));}
.app-shell{max-width:1100px; margin:48px auto; padding:0 16px;}
.brand-card{background: var(--surface); border:1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,.25); border-radius:16px; overflow:hidden;}
.brand-head{background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(99,102,241,.18)); border-bottom:1px solid var(--border);}
.brand-logo{height:32px; width:auto; display:block;}
.badge-soft{background: rgba(255,255,255,.08); color: var(--muted); border:1px solid var(--border);}
.dropzone{border:2px dashed var(--border); border-radius:14px; padding:28px; text-align:center; transition:.25s ease; background: rgba(2,6,23,.25);}
[data-theme="light"] .dropzone{background: rgba(255,255,255,.65);}
.dropzone.dragover{border-color: var(--brand-2); background: rgba(2,6,23,.45); transform: translateY(-2px); box-shadow:0 12px 40px rgba(34,211,238,.15);}
[data-theme="light"] .dropzone.dragover{background: rgba(255,255,255,.85);}
.thumb{background:transparent; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.thumb img{width:100%; display:block;}
.progress{height:10px; background: rgba(255,255,255,.08);}
[data-theme="light"] .progress{background: rgba(15,23,42,.08);}
.progress-bar{transition: width .25s ease;}
.meta-small{font-size:.85rem; color:var(--muted);}
.copy-btn{border: 1px solid var(--border);}
.link-input{background:transparent; color:var(--text); border-color: var(--border);}
.format-tabs .nav-link{color:var(--muted);}
.format-tabs .nav-link.active{color:var(--text); background: rgba(255,255,255,.06); border-color: transparent;}
.theme-toggle{border:1px solid var(--border);}
.settings-pop{position:relative;}
.settings-card{position:absolute; right:0; top:120%; min-width:280px; border:1px solid var(--border); background:var(--surface); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:10; display:none;}
.settings-pop.show .settings-card{display:block;}
</style>
</head>
<body>
<div class="app-shell" id="app" data-theme="dark">
<div class="brand-card">
<div class="brand-head p-3 d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center gap-3">
<span class="logo-dot d-inline-flex align-items-center">
<!-- LOGO: sabit URL -->
<img id="brandLogo" class="brand-logo" src="https://v18.acrlisans.xyz/acr21.png" alt="ACR Yazılımları Logosu" />
</span>
<div>
<a href="https://acrlisans.com" target="_blank" rel="noopener" class="text-decoration-none">
<strong>ACR Yazılımları</strong>
</a>
<span class="badge badge-soft ms-2">Hızlı Resim Yükle</span>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<div class="settings-pop" id="settings">
<button id="settingsBtn" class="btn btn-sm btn-outline-light theme-toggle"><i class="bi bi-sliders"></i> Tema</button>
<div class="settings-card p-3">
<div class="mb-3 d-flex justify-content-between align-items-center">
<span class="meta-small">Görünüm</span>
<div class="btn-group btn-group-sm" role="group">
<button type="button" data-mode="light" class="btn btn-outline-secondary">Aydınlık</button>
<button type="button" data-mode="dark" class="btn btn-outline-secondary active">Karanlık</button>
<button type="button" data-mode="auto" class="btn btn-outline-secondary">Oto</button>
</div>
</div>
<div class="mb-3">
<label class="meta-small mb-1">Vurgu Rengi</label>
<input type="color" id="brandColor" class="form-control form-control-color" value="#6366f1" title="Vurgu rengi"/>
</div>
<div class="d-flex justify-content-end">
<button id="saveBtn" class="btn btn-sm btn-primary"><i class="bi bi-save"></i> Kaydet</button>
</div>
</div>
</div>
</div>
</div>
<div class="p-4 p-md-5">
<div id="dropzone" class="dropzone mb-3">
<i class="bi bi-cloud-arrow-up fs-1 d-block mb-2"></i>
<div class="mb-2">Dosyaları buraya sürükleyin veya</div>
<label class="btn btn-outline-light btn-sm">
<i class="bi bi-images me-1"></i> Dosya Seç
<input id="fileInput" type="file" accept="image/*" multiple hidden>
</label>
</div>
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="meta-small">Seçili: <span id="countSel">0</span> / 7</div>
<div class="d-flex gap-2">
<button id="prepareBtn" class="btn btn-primary"><i class="bi bi-rocket-takeoff me-1"></i> Bağlantıları Oluştur</button>
<button id="clearBtn" class="btn btn-outline-light"><i class="bi bi-x-circle me-1"></i> Temizle</button>
<button id="zipBtn" class="btn btn-outline-info"><i class="bi bi-file-zip"></i> ZIP İndir</button>
</div>
</div>
<div id="grid" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"></div>
<div id="overallWrap" class="mt-4 d-none">
<div class="d-flex justify-content-between meta-small mb-1">
<span>Hazırlanıyor</span>
<span id="overallPct">0%</span>
</div>
<div class="progress">
<div id="overallBar" class="progress-bar bg-info" role="progressbar" style="width:0%"></div>
</div>
</div>
</div>
</div>
<footer class="text-center mt-4 text-secondary meta-small pb-4">
<span class="me-1">®</span>
<span>ACR Yazılımları Tüm Hakları Saklıdır.</span>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
<script>
const app = document.getElementById('app');
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('fileInput');
const prepareBtn = document.getElementById('prepareBtn');
const clearBtn = document.getElementById('clearBtn');
const zipBtn = document.getElementById('zipBtn');
const grid = document.getElementById('grid');
const countSel = document.getElementById('countSel');
const overallWrap = document.getElementById('overallWrap');
const overallBar = document.getElementById('overallBar');
const overallPct = document.getElementById('overallPct');
const settingsBtn = document.getElementById('settingsBtn');
const settingsPop = document.getElementById('settings');
const brandColor = document.getElementById('brandColor');
const saveBtn = document.getElementById('saveBtn');
const brandLogo = document.getElementById('brandLogo');
let queue = [];
// --- Logo görünümü (SRC'yi değiştirme, sadece tema filtresi uygula)
function updateLogoAppearance(){
const isLight = app.getAttribute('data-theme') === 'light';
brandLogo.style.filter = isLight ? 'none' : 'drop-shadow(0 0 8px rgba(99,102,241,.6))';
}
// --- Tema / Ayarlar ---
function setTheme(mode){
if(mode === 'auto'){
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
app.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
} else {
app.setAttribute('data-theme', mode);
}
updateLogoAppearance();
}
function applyBrandColor(hex){ document.documentElement.style.setProperty('--brand', hex); }
// Aç/Kapa
settingsBtn.addEventListener('click', (e)=>{ e.stopPropagation(); settingsPop.classList.toggle('show'); });
document.addEventListener('click', (e)=>{ if(!settingsPop.contains(e.target)) settingsPop.classList.remove('show'); });
// Mod butonları
settingsPop.querySelectorAll('[data-mode]').forEach(btn=>{
btn.addEventListener('click', ()=>{
settingsPop.querySelectorAll('[data-mode]').forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
const m = btn.dataset.mode;
localStorage.setItem('acrTheme', m);
setTheme(m);
});
});
// Kaydet (vurgu rengi + seçili tema kalıcı)
saveBtn.addEventListener('click', ()=>{
localStorage.setItem('acrBrand', brandColor.value);
applyBrandColor(brandColor.value);
settingsPop.classList.remove('show');
});
// Başlangıçta yükle
(function initTheme(){
const m = localStorage.getItem('acrTheme') || 'dark';
const c = localStorage.getItem('acrBrand') || '#6366f1';
brandColor.value = c;
applyBrandColor(c);
setTheme(m);
updateLogoAppearance();
})();
// --- Uploader (yerel) ---
function updateCount(){ countSel.textContent = queue.length; }
function bytesToSize(bytes){ const s=['B','KB','MB','GB']; if(bytes===0) return '0 B'; const i=Math.floor(Math.log(bytes)/Math.log(1024)); return (bytes/Math.pow(1024,i)).toFixed(1)+' '+s[i]; }
function makeThumb(file){
const col = document.createElement('div'); col.className = 'col';
const card = document.createElement('div'); card.className = 'thumb';
const img = document.createElement('img'); img.alt = file.name; img.style.aspectRatio='4/3'; img.style.objectFit='cover';
const reader = new FileReader(); reader.onload = e => img.src = e.target.result; reader.readAsDataURL(file);
const body = document.createElement('div'); body.className = 'p-3';
const title = document.createElement('div'); title.className = 'd-flex justify-content-between align-items-center mb-2';
title.innerHTML = `<span class="meta-small">${file.name}</span><span class="meta-small">${bytesToSize(file.size)}</span>`;
const progressWrap = document.createElement('div'); progressWrap.className = 'progress mb-2';
const progressBar = document.createElement('div'); progressBar.className = 'progress-bar bg-success'; progressBar.style.width='0%'; progressWrap.appendChild(progressBar);
const linkInput = document.createElement('input'); linkInput.className='form-control form-control-sm link-input mb-2'; linkInput.readOnly=true; linkInput.placeholder='Bağlantı hazır olduğunda görünecek';
const formats = document.createElement('div'); formats.className = 'format-tabs';
formats.innerHTML = `
<ul class="nav nav-pills nav-fill gap-1" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" data-format="direct" type="button">Doğrudan</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-format="bbcode" type="button">BBCode</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" data-format="html" type="button">HTML</button></li>
</ul>`;
const actions = document.createElement('div'); actions.className='d-flex gap-2';
const copyBtn = document.createElement('button'); copyBtn.className='btn btn-sm btn-outline-light copy-btn'; copyBtn.innerHTML='<i class="bi bi-clipboard"></i> Kopyala';
const downloadBtn = document.createElement('a'); downloadBtn.className='btn btn-sm btn-outline-light'; downloadBtn.innerHTML='<i class="bi bi-download"></i> İndir'; downloadBtn.download = file.name;
const removeBtn = document.createElement('button'); removeBtn.className='btn btn-sm btn-outline-light'; removeBtn.innerHTML='<i class="bi bi-trash"></i>';
actions.append(copyBtn, downloadBtn, removeBtn);
body.append(title, progressWrap, linkInput, formats, actions); card.append(img, body); col.append(card); grid.prepend(col);
removeBtn.addEventListener('click', ()=>{ queue = queue.filter(q=>q.id!==file._id); col.remove(); updateCount(); });
copyBtn.addEventListener('click', async ()=>{ try{ await navigator.clipboard.writeText(linkInput.value||''); copyBtn.innerHTML='<i class="bi bi-check2"></i> Kopyalandı'; setTimeout(()=>copyBtn.innerHTML='<i class="bi bi-clipboard"></i> Kopyala',1500);}catch(e){} });
formats.addEventListener('click', (e)=>{ const btn = e.target.closest('button[data-format]'); if(!btn) return; formats.querySelectorAll('.nav-link').forEach(x=>x.classList.remove('active')); btn.classList.add('active'); const fmt = btn.getAttribute('data-format'); const data = col._data || {}; if(!data.url) return; if(fmt==='direct') linkInput.value = data.url; if(fmt==='bbcode') linkInput.value = `[img]${data.url}[/img]`; if(fmt==='html') linkInput.value = `<img src="${data.url}" alt="">`; });
return { el: col, progressBar, linkInput, downloadBtn };
}
function addFiles(files){
const incoming = Array.from(files);
for(const f of incoming){ if(!f.type.startsWith('image/')) continue; if(queue.length >= 7) break; f._id = crypto.randomUUID(); const ui = makeThumb(f); queue.push({ file: f, id: f._id, ui, blobUrl: null }); }
updateCount();
}
['dragenter','dragover'].forEach(evt=> dropzone.addEventListener(evt,(e)=>{ e.preventDefault(); e.stopPropagation(); dropzone.classList.add('dragover'); }));
['dragleave','drop'].forEach(evt=> dropzone.addEventListener(evt,(e)=>{ e.preventDefault(); e.stopPropagation(); if(evt==='dragleave' && e.target!==dropzone) return; dropzone.classList.remove('dragover'); }));
dropzone.addEventListener('drop', (e)=> addFiles(e.dataTransfer.files));
dropzone.addEventListener('click', ()=> fileInput.click());
fileInput.addEventListener('change', ()=> addFiles(fileInput.files));
clearBtn.addEventListener('click', ()=>{ queue=[]; grid.innerHTML=''; updateCount(); overallWrap.classList.add('d-none'); overallBar.style.width='0%'; overallPct.textContent='0%'; });
function prepareLinks(){
if(queue.length===0){ alert('Önce en az bir görsel seçin.'); return; }
overallWrap.classList.remove('d-none');
let done = 0; const total = queue.length;
queue.forEach(item=>{
let p=0; const tick = setInterval(()=>{
p = Math.min(100, p + 10 + Math.random()*10);
item.ui.progressBar.style.width = Math.round(p)+'%';
if(p>=100){
clearInterval(tick);
if(!item.blobUrl){ item.blobUrl = URL.createObjectURL(item.file); }
item.ui.linkInput.value = item.blobUrl;
item.ui.downloadBtn.href = item.blobUrl;
item.ui.el._data = { url: item.blobUrl };
done++;
const ov = Math.round((done/total)*100);
overallBar.style.width = ov+'%'; overallPct.textContent = ov+'%';
}
}, 120);
});
}
async function downloadZip(){
if(queue.length===0){ alert('Yüklenecek dosya yok.'); return; }
const zip = new JSZip();
for(const item of queue){ zip.file(item.file.name, item.file); }
const blob = await zip.generateAsync({type:'blob'});
saveAs(blob, 'acr-resimler.zip');
}
document.getElementById('prepareBtn').addEventListener('click', prepareLinks);
zipBtn.addEventListener('click', downloadZip);
</script>
</body>
</htmlindex.php olarak ana dizine atın ve bu kadar
değiştireleeck alanlar aratın
DEMO