Hesabım

23.10.2025

haber

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Video Galeri | Mermak CNC</title>
<meta name="description" content="Mermak CNC video galerisi: ürün tanıtımları, montaj ve kullanım videoları." />
<style>
:root{
--ink:#0b1220; --muted:#5f6b7a; --bg:#f8fafc; --card:#ffffff; --bd:#e5e7eb;
--brand:#ff4d4f; --brand-2:#ff814d; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.06)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{max-width:1180px;margin:0 auto;padding:20px}
header .title{font-weight:900;letter-spacing:-.3px;font-size:32px;margin:6px 0}
header .desc{color:var(--muted);margin:0}
.toolbar{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin:18px 0}
.toolbar input,.toolbar select{border:1px solid var(--bd);border-radius:12px;padding:12px 14px;background:#fff;font-size:14px}
.toolbar .btn{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer}
.grid{display:grid;gap:16px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.thumb{position:relative;aspect-ratio:16/9;background:#000;display:block}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:transform .25s ease}
.thumb .duration{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.7);color:#fff;padding:4px 8px;border-radius:10px;font-size:12px}
.thumb .play{position:absolute;inset:0;display:grid;place-items:center}
.thumb .play svg{width:60px;height:60px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4))}
.card:hover img{transform:scale(1.02)}
.body{padding:14px 14px 12px}
.title-line{font-weight:800;font-size:16px;margin:0 0 6px 0}
.meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#f3f4f6;border:1px solid var(--bd);padding:6px 10px;border-radius:999px;font-size:12px}
.footer{padding:12px 14px;border-top:1px solid var(--bd);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tag{font-size:11px;background:#fff;border:1px solid var(--bd);padding:6px 10px;border-radius:999px;color:#334155}
.empty{padding:40px;border:1px dashed var(--bd);border-radius:14px;text-align:center;color:var(--muted);background:#fff}
/* Modal */
dialog{padding:0;border:0;border-radius:16px;max-width:min(1100px,94vw);width:94vw}
.modal{background:#000;border-radius:16px;overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#0b1220;color:#fff}
.modal-title{font-weight:800}
.modal-close{background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer}
.modal-player{aspect-ratio:16/9;width:100%;background:#000}
.modal-info{display:flex;gap:14px;flex-wrap:wrap;padding:10px 12px;background:#0b1220;color:#cbd5e1;border-top:1px solid rgba(255,255,255,.06)}
.modal-info .tag{border-color:#334155;background:#111827;color:#e5e7eb}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
</style>
</head>
<body>
<div class="container">
<header>
<p class="desc">Video Galeri</p>
<h1 class="title">Ürün Tanıtım & Kurulum Videoları</h1>
</header>

<div class="toolbar">
<input id="q" type="search" placeholder="Videolarda ara (örn: servo, step motor, 4. eksen)" aria-label="Videolarda ara" />
<select id="cat" aria-label="Kategori seç">
<option value="">Tüm Kategoriler</option>
</select>
<button class="btn" id="resetBtn" type="button">Filtreyi Temizle</button>
</div>

<section id="grid" class="grid" aria-live="polite"></section>
<div id="empty" class="empty" hidden>Sonuç bulunamadı.</div>

<dialog id="playerDialog">
<div class="modal">
<div class="modal-header">
<strong class="modal-title" id="modalTitle">Videoyu oynat</strong>
<button class="modal-close" id="closeDialog" aria-label="Kapat">✕</button>
</div>
<div class="modal-player">

<iframe id="playerFrame" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen title="Video oynatıcı"></iframe>
</div>
<div class="modal-info" id="modalInfo"></div>
</div>
</dialog>
</div>

/* =====================
2) FİLTRE & ARAMA
===================== */
const q = document.getElementById('q');
const cat = document.getElementById('cat');
const grid = document.getElementById('grid');
const empty = document.getElementById('empty');

// Kategori listesi üret
const categories = Array.from(new Set(VIDEOS.map(v=>v.category))).sort();
for(const c of categories){
const opt = document.createElement('option');
opt.value = c; opt.textContent = c; cat.appendChild(opt);
}

let state = {q:'', cat:''};

function normalize(t){return (t||'').toLowerCase().trim()}

function filterVideos(){
const nq = normalize(state.q);
const nc = normalize(state.cat);
return VIDEOS.filter(v=>{
const inCat = !nc || normalize(v.category)===nc;
const hay = [v.title, v.category, ...(v.tags||[])].join(' ').toLowerCase();
const inQ = !nq || hay.includes(nq);
return inCat && inQ;
});
}

q.addEventListener('input', ()=>{state.q=q.value; render()});
cat.addEventListener('change', ()=>{state.cat=cat.value; render()});
document.getElementById('resetBtn').addEventListener('click', ()=>{ q.value=''; cat.value=''; state={q:'',cat:''}; render(); });

/* =====================
3) RENDER – KARTLAR
===================== */
function cardHTML(v){
const tags = (v.tags||[]).map(t=>`<span class="tag">#${t}</span>`).join(' ');
const dateStr = v.date? new Date(v.date).toLocaleDateString('tr-TR') : '';
const meta = [`${v.category}`, dateStr && `Yüklenme: ${dateStr}`].filter(Boolean).map(x=>`<span class="chip">${x}</span>`).join('');
const thumb = v.thumb || (v.type==='youtube' ? `https://img.youtube.com/vi/${v.videoId}/hqdefault.jpg` : '');
return `
<article class="card" data-id="${v.id}">
<a href="#" class="thumb" data-open="${v.id}" aria-label="${escapeHTML(v.title)} videosunu oynat">
<img src="${thumb}" alt="${escapeHTML(v.title)} küçük görseli" loading="lazy" width="640" height="360" />
<span class="duration">${v.duration||''}</span>
<span class="play" aria-hidden="true">${playIcon()}</span>
</a>
<div class="body">
<h3 class="title-line">${escapeHTML(v.title)}</h3>
<div class="meta">${meta}</div>
</div>
<div class="footer">${tags}</div>
</article>`
}

function render(){
const list = filterVideos();
grid.innerHTML = list.map(cardHTML).join('');
empty.hidden = list.length>0;
}

/* =====================
4) MODAL / OYNATICI
===================== */
const dlg = document.getElementById('playerDialog');
const frame = document.getElementById('playerFrame');
const modalTitle = document.getElementById('modalTitle');
const modalInfo = document.getElementById('modalInfo');

document.addEventListener('click', (e)=>{
const a = e.target.closest('[data-open]');
if(!a) return;
e.preventDefault();
const id = a.getAttribute('data-open');
const v = VIDEOS.find(x=>x.id===id);
if(!v) return;
openVideo(v);
});

document.getElementById('closeDialog').addEventListener('click', closeVideo);
dlg.addEventListener('close', stopVideo);

function closeVideo(){ dlg.close(); }
function stopVideo(){ frame.src='about:blank'; }

/* =====================
5) JSON-LD (VideoObject) – her oynatımda dinamik enjekte
===================== */
function injectVideoLD(v){
const ld = {
"@context":"https://schema.org",
"@type":"VideoObject",
name: v.title,
description: v.title,
thumbnailUrl: [v.thumb || (v.type==='youtube'?`https://img.youtube.com/vi/${v.videoId}/hqdefault.jpg`: '')],
uploadDate: v.date || new Date().toISOString().slice(0,10),
duration: v.duration? toISODuration(v.duration) : undefined,
contentUrl: v.type==='file'? (v.src || '') : undefined,
embedUrl: v.type==='youtube' ? `https://www.youtube.com/embed/${v.videoId}` : (v.type==='vimeo'? `https://player.vimeo.com/video/${v.videoId}` : undefined)
};
// Önce eski LD'yi temizle
document.querySelectorAll('script[data-ld=video]').forEach(s=>s.remove());
const s = document.createElement('script');
s.type='application/ld+json'; s.dataset.ld='video';
s.textContent = JSON.stringify(ld, null, 2);
document.head.appendChild(s);
}

// "08:14" -> "PT8M14S"
function toISODuration(hhmmss){
const p = hhmmss.split(':').map(Number);
const [a,b,c] = p.length===3 ? p : [0, p[0]||0, p[1]||0];
return `PT${a? a+'H':''}${b? b+'M':''}${c? c+'S':''}` || 'PT0S';
}

function playIcon(){
return `<svg viewBox="0 0 200 200" aria-hidden="true"><defs><linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="${cssVar('--brand')}"/><stop offset="1" stop-color="${cssVar('--brand-2')}"/></linearGradient></defs><circle cx="100" cy="100" r="70" fill="url(#g)" opacity=".95"/><polygon points="80,65 80,135 140,100" fill="#fff"/></svg>`
}

function cssVar(name){return getComputedStyle(document.documentElement).getPropertyValue(name).trim()}
function escapeHTML(str){return (str+"").replace(/[&<>"']/g, m=>({"&":"&","<":"<",">":">","\"":""","'":"'"}[m]))}

// İlk render
render();
</script>
</body>
</html>

Mermak CNc

Step Motor Kuvvet / Kaldırma Hesaplama

Step Motor Torku (Nm)

Redüktör Oranı (yoksa 1)

Vidalı Mil (kullanılmıyorsa boş bırakın)
Vidalı Mil Hatvesi (mm)

Pinyon / Kremayer (kullanılmıyorsa boş bırakın)
Pinyon Modülü

Pinyon Diş Sayısı

⚠️ Hesaplama; uygun mekanik montaj, doğru step motor sürücüsü, yeterli güç kaynağı ve bakımları yapılmış bir sistem varsayılarak yapılmıştır. Step motorlar hız arttıkça tork kaybeder. Sonuçlar yaklaşık ve bilgilendirme amaçlıdır.

T-Soft E-Ticaret Sistemleriyle Hazırlanmıştır.