<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Göbel's Profil - Dijital Katalog</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<style>
/* Göbel's Profil Marka Renkleri ve Genel Tasarım */
:root {
--primary-color: #d32f2f; /* Kırmızı */
--secondary-color: #212121; /* Siyah */
--bg-color: #f5f5f5;
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-color);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
/* Üst Menü */
header {
background-color: var(--secondary-color);
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 10;
}
h1 {
margin: 0;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.controls {
display: flex;
gap: 10px;
align-items: center;
}
button {
background-color: var(--primary-color);
border: none;
color: white;
padding: 8px 15px;
cursor: pointer;
border-radius: 4px;
font-weight: bold;
transition: background 0.3s;
}
button:hover {
background-color: #b71c1c;
}
button:disabled {
background-color: #757575;
cursor: not-allowed;
}
#page-info {
font-size: 0.9rem;
min-width: 80px;
text-align: center;
}
/* Katalog Görüntüleme Alanı */
#canvas-container {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
padding: 20px;
position: relative;
}
canvas {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
max-width: 100%;
max-height: 90vh;
}
/* Yükleniyor Animasyonu */
#loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2rem;
color: var(--secondary-color);
}
@media (max-width: 600px) {
h1 { font-size: 1rem; }
button { padding: 6px 10px; font-size: 0.8rem; }
}
</style>
</head>
<body>
<header>
<h1>Göbel's Profil</h1>
<div class="controls">
<button id="prev-btn">❮ Önceki</button>
<span id="page-info">Sayfa <span id="page-num">--</span> / <span id="page-count">--</span></span>
<button id="next-btn">Sonraki ❯</button>
</div>
</header>
<div id="canvas-container">
<div id="loader">Katalog Yükleniyor...</div>
<canvas id="pdf-render"></canvas>
</div>
<script>
// PDF Dosya Yolu (HTML dosyası ile aynı klasörde olmalı)
const url = 'KATALOG.pdf';
let pdfDoc = null,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 1.5, // Yakınlaştırma oranı
canvas = document.getElementById('pdf-render'),
ctx = canvas.getContext('2d');
// PDF.js ayarları
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
// Sayfayı render etme fonksiyonu
function renderPage(num) {
pageRendering = true;
// Mevcut sayfayı getir
pdfDoc.getPage(num).then(function(page) {
// Ekran genişliğine göre ölçeklemeyi ayarla (Mobil uyumluluk)
const viewport = page.getViewport({scale: scale});
const containerWidth = document.getElementById('canvas-container').clientWidth - 40;
let responsiveScale = scale;
if(viewport.width > containerWidth) {
responsiveScale = scale * (containerWidth / viewport.width);
}
const finalViewport = page.getViewport({scale: responsiveScale});
canvas.height = finalViewport.height;
canvas.width = finalViewport.width;
// Render işlemi
const renderContext = {
canvasContext: ctx,
viewport: finalViewport
};
const renderTask = page.render(renderContext);
// Render bitince
renderTask.promise.then(function() {
pageRendering = false;
document.getElementById('loader').style.display = 'none'; // Yükleniyor yazısını gizle
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Sayfa numarasını güncelle
document.getElementById('page-num').textContent = num;
// Buton durumlarını güncelle
document.getElementById('prev-btn').disabled = num <= 1;
document.getElementById('next-btn').disabled = num >= pdfDoc.numPages;
}
// Bekleyen render isteği varsa sıraya al
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
// Önceki Sayfa
function onPrevPage() {
if (pageNum <= 1) return;
pageNum--;
queueRenderPage(pageNum);
}
// Sonraki Sayfa
function onNextPage() {
if (pageNum >= pdfDoc.numPages) return;
pageNum++;
queueRenderPage(pageNum);
}
// Butonlara tıklama olaylarını ekle
document.getElementById('prev-btn').addEventListener('click', onPrevPage);
document.getElementById('next-btn').addEventListener('click', onNextPage);
// Klavye ok tuşları ile kontrol
document.addEventListener('keydown', function(e) {
if(e.key === "ArrowLeft") onPrevPage();
if(e.key === "ArrowRight") onNextPage();
});
// PDF'i yükle
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page-count').textContent = pdfDoc.numPages;
renderPage(pageNum);
}).catch(function(error) {
console.error('PDF yüklenirken hata oluştu:', error);
document.getElementById('loader').textContent = 'Katalog yüklenemedi. Lütfen dosya adının "KATALOG.pdf" olduğundan emin olun.';
});
</script>
</body>
</html>