Ücretsiz PDF Görüntüleyici ile Notlarınızı Yönetin

Gelişmiş PDF Görüntüleyici

Notlar

Not Stili

Arka Plan Rengi: Font: Kenar Yumuşatma: px

Metin Stili

Gelişmiş PDF Görüntüleyici, kullanıcıların PDF dosyalarını yükleyip görüntülemelerine, notlar eklemelerine ve bu notları düzenlemelerine olanak tanıyan etkili bir araçtır. Kullanıcı dostu arayüzü sayesinde, notlar üzerinde kişisel düzenlemeler yapabilir, notları kaydedip yükleyebilir ve PDF belgenizi daha interaktif hale getirebilirsiniz.

Kullanım Özellikleri

PDF Yükleme

PDF dosyalarını yükleyin: PDF dosyası yüklemek için “PDF İndir” butonuna tıklayıp dosyanızı seçin. Yalnızca .pdf uzantılı dosyalar desteklenmektedir.

Not Ekleme

Notlar oluşturun: PDF belgesi üzerindeki uygun yere not eklemek için sol üstteki not oluşturma alanını kullanabilirsiniz. Notlarınızı düşürmek için üzerine tıklayıp sürükleyebilirsiniz.

Not Düzenleme

Notları özelleştirin: Eklediğiniz notların arka plan rengi, fontu ve kenar yumuşatma özelliklerini değiştirebilirsiniz. Bunun için sağ taraftaki “Not Stili” bölümündeki ayarları kullanın.

Notları Kaydetme ve Yükleme

Notlarınızı kaydedin: Notlarınızı JSON formatında kaydetmek için “Notları Kaydet” butonuna tıklayın. İleride bu notları yüklemek için “Notları Yükle” butonunu kullanabilirsiniz.

Not Arama

Notları arayın: Notlar arasında kolayca arama yapmak için “Not Arama” çubuğunu kullanın. Arama yaparken aradığınız not anında listelenecektir.

Stil Uygulama

Not stilini uygulayın: Seçtiğiniz notlara yeni stil uygulamak için “Not Stili” bölümünden uygun seçenekleri belirleyebilir ve “Stili Uygula” butonuna tıklayarak değişiklikleri uygulayabilirsiniz.

PDF İndirme

Değişikliklerinizi kaydedin: PDF belgenizi düzenledikten sonra, “PDF İndir” butonuna tıklayarak düzenlenmiş PDF dosyanızı bilgisayarınıza indirebilirsiniz.

Gelişmiş PDF Görüntüleyici, kullanıcıların PDF belgeleriyle etkileşimde bulunmalarını kolaylaştırmak için tasarlanmış kapsamlı bir araçtır. Bu özelliklerle birlikte, notlarınızı yönetmek ve belgelerinizi daha etkili bir şekilde kullanmak için harika bir seçenektir.

<!DOCTYPE html>
<html lang=”tr”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Gelişmiş PDF Görüntüleyici</title>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js”></script>
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>
<style>
body {
font-family: ‘Roboto’, sans-serif;
background-color: #0;
margin: 0;
padding: 20px;
color: #333;
}
#pdf-canvas {
border: 1px solid #ccc;
width: 100%;
height: auto;
margin: 20px 0;
background-color: #fff;
}
.note {
position: absolute;
border: 1px solid #ffa500;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
background-color: #fff;
cursor: move;
transition: border-radius 0.2s, box-shadow 0.2s;
font-size: 14px;
}
.note:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.resizer {
width: 10px;
height: 10px;
background: #ff0000;
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
}
#note-list {
margin-top: 20px;
max-height: 250px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
background-color: #ffffff;
border-radius: 5px;
}
#note-search, #category-input, #note-color {
margin-bottom: 10px;
width: calc(100% – 20px);
padding: 8px;
}
#category-input {
margin-top: 10px;
}
button {
padding: 8px 12px;
background-color: #007bff;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
.controls {
margin-bottom: 20px;
}
.delete-button {
margin-left: 5px;
cursor: pointer;
color: red;
font-weight: bold;
}
#style-controls {
margin-top: 20px;
padding: 10px;
background-color: #e9ecef;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Gelişmiş PDF Görüntüleyici</h1>
<div class=”controls”>
<input type=”file” id=”file-input” />
<button id=”download-button”>PDF İndir</button>
<button id=”zoom-in-button”>Yakınlaştır</button>
<button id=”zoom-out-button”>Uzaklaştır</button>
<button id=”reset-button”>Sıfırla</button>
</div>
<canvas id=”pdf-canvas”></canvas>
<div id=”notes”></div>

<h2>Notlar</h2>
<input type="text" id="note-search" placeholder="Not Ara..." />
<input type="text" id="category-input" placeholder="Kategori Ekle..." />
<button id="add-category-button">Kategori Ekle</button>
<div id="note-list"></div>
<button id="save-notes-button">Notları Kaydet</button>
<button id="load-notes-button">Notları Yükle</button>

<h2>Not Stili</h2>
<div id="style-controls">
    <label for="note-color">Arka Plan Rengi:</label>
    <input type="color" id="note-color" value="#ffff00">
    <label for="note-font">Font:</label>
    <select id="note-font">
        <option value="Arial">Arial</option>
        <option value="Verdana">Verdana</option>
        <option value="Georgia">Georgia</option>
        <option value="Courier New">Courier New</option>
    </select>
    <label for="note-border-radius">Kenar Yumuşatma:</label>
    <input id="note-border-radius" type="number" min="0" value="0">px
    <button id="apply-style-button">Stili Uygula</button>
</div>

<h2>Metin Stili</h2>
<button id="bold-button">Kalın</button>
<button id="italic-button">İtalik</button>
<button id="clear-notes-button">Tüm Notları Temizle</button>

<script>
    const fileInput = document.getElementById('file-input');
    const pdfCanvas = document.getElementById('pdf-canvas');
    const context = pdfCanvas.getContext('2d');
    const noteList = document.getElementById('note-list');
    const noteSearch = document.getElementById('note-search');
    const noteColor = document.getElementById('note-color');
    const noteFont = document.getElementById('note-font');
    const noteBorderRadius = document.getElementById('note-border-radius');
    const zoomInButton = document.getElementById('zoom-in-button');
    const zoomOutButton = document.getElementById('zoom-out-button');
    const resetButton = document.getElementById('reset-button');
    const clearNotesButton = document.getElementById('clear-notes-button');

    let pdfDoc = null;
    let currentPage = 1;
    let notesArray = [];
    let scale = 1;

    // PDF yükleme
    fileInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        if (file && file.type === "application/pdf") {
            const fileReader = new FileReader();
            fileReader.onload = function() {
                const typedarray = new Uint8Array(this.result);
                pdfjsLib.getDocument(typedarray).promise.then(pdf => {
                    pdfDoc = pdf;
                    renderPage(currentPage);
                });
            };
            fileReader.readAsArrayBuffer(file);
        } else {
            alert("Lütfen bir PDF dosyası yükleyin.");
        }
    });

    // Sayfa render etme
    function renderPage(pageNum) {
        pdfDoc.getPage(pageNum).then(page => {
            const viewport = page.getViewport({ scale: scale });
            pdfCanvas.height = viewport.height;
            pdfCanvas.width = viewport.width;

            const renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    }

    // Yakınlaştırma
    zoomInButton.addEventListener('click', () => {
        scale += 0.1; 
        renderPage(currentPage);
    });

    // Uzaklaştırma
    zoomOutButton.addEventListener('click', () => {
        if (scale > 0.2) { 
            scale -= 0.1; 
            renderPage(currentPage);
        }
    });

    // PDF sıfırlama
    resetButton.addEventListener('click', () => {
        scale = 1;
        currentPage = 1;
        context.clearRect(0, 0, pdfCanvas.width, pdfCanvas.height);
        pdfCanvas.width = 0;
        pdfCanvas.height = 0;
        fileInput.value = '';
        notesArray = [];
        noteList.innerHTML = '';
        document.getElementById('notes').innerHTML = '';
    });

    // Not oluşturma
    function createNote(content, left, top, color, font, borderRadius) {
        const note = document.createElement('div');
        note.classList.add('note');
        note.contentEditable = true;
        note.textContent = content;
        note.style.left = `${left}px`;
        note.style.top = `${top}px`;
        note.style.backgroundColor = color;
        note.style.fontFamily = font;
        note.style.borderRadius = `${borderRadius}px`;

        const deleteButton = document.createElement('span');
        deleteButton.textContent = 'X';
        deleteButton.classList.add('delete-button');
        deleteButton.onclick = () => {
            note.remove();
            notesArray = notesArray.filter(n => n.content !== content);
            updateNoteList();
        };
        note.appendChild(deleteButton);

        document.getElementById('notes').appendChild(note);
        notesArray.push({ content, left, top, color, font, borderRadius }); 

        makeDraggable(note);
        makeResizable(note);
        updateNoteList(); 
    }

    // Not sürüklenebilir yapma
    function makeDraggable(note) {
        let isDragging = false;
        let offsetX, offsetY;

        note.addEventListener('mousedown', (e) => {
            isDragging = true;
            offsetX = e.clientX - note.getBoundingClientRect().left;
            offsetY = e.clientY - note.getBoundingClientRect().top;
            note.style.transition = 'none'; 
        });

        document.addEventListener('mouseup', () => isDragging = false);

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                note.style.left = `${e.clientX - offsetX}px`;
                note.style.top = `${e.clientY - offsetY}px`;
            }
        });
    }

    // Not yeniden boyutlandırma
    function makeResizable(note) {
        const resizer = document.createElement('div');
        resizer.classList.add('resizer');
        note.appendChild(resizer);

        let isResizing = false;

        resizer.addEventListener('mousedown', (e) => {
            isResizing = true;
            note.style.transition = 'none'; 
        });

        document.addEventListener('mouseup', () => isResizing = false);

        document.addEventListener('mousemove', (e) => {
            if (isResizing) {
                const newWidth = e.clientX - note.getBoundingClientRect().left;
                const newHeight = e.clientY - note.getBoundingClientRect().top;

                if (newWidth > 20) note.style.width = `${newWidth}px`;
                if (newHeight > 20) note.style.height = `${newHeight}px`;
            }
        });
    }

    // Not listesi güncellenmesi
    function updateNoteList() {
        noteList.innerHTML = ''; 
        notesArray.forEach(note => {
            const noteItem = document.createElement('div');
            noteItem.textContent = note.content;
            noteItem.style.backgroundColor = note.color;
            noteItem.style.padding = '5px';
            noteItem.style.margin = '3px 0';
            noteItem.onclick = () => {
                createNote(note.content, note.left, note.top, note.color, note.font, note.borderRadius);
            };
            noteList.appendChild(noteItem);
        });
    }

    // Not arama
    noteSearch.addEventListener('input', () => {
        const searchTerm = noteSearch.value.toLowerCase();
        const filteredNotes = notesArray.filter(note => note.content.toLowerCase().includes(searchTerm));
        noteList.innerHTML = ''; 
        filteredNotes.forEach(note => {
            const noteItem = document.createElement('div');
            noteItem.textContent = note.content;
            noteItem.style.backgroundColor = note.color;
            noteItem.style.padding = '5px';
            noteItem.style.margin = '3px 0';
            noteList.appendChild(noteItem);
        });
    });

    // Notları kaydetme
    document.getElementById('save-notes-button').addEventListener('click', () => {
        const dataStr = JSON.stringify(notesArray);
        const blob = new Blob([dataStr], { type: 'application/json' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = 'notes.json';
        link.click();
    });

    // Not yükleme
    document.getElementById('load-notes-button').addEventListener('click', () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.json';
        input.onchange = e => {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = e => {
                const loadedNotes = JSON.parse(e.target.result);
                loadedNotes.forEach(note => {
                    createNote(note.content, note.left, note.top, note.color, note.font, note.borderRadius);
                });
            };
            reader.readAsText(file);
        };
        input.click();
    });

    // Not stilini uygulama
    document.getElementById('apply-style-button').addEventListener('click', () => {
        const color = noteColor.value;
        const font = noteFont.value;
        const borderRadius = parseInt(noteBorderRadius.value, 10);
        const selectedNotes = document.querySelectorAll('.note');
        selectedNotes.forEach(note => {
            note.style.backgroundColor = color;
            note.style.fontFamily = font;
            note.style.borderRadius = `${borderRadius}px`;
        });
    });

    // Kalın metin
    document.getElementById('bold-button').addEventListener('click', () => {
        const selectedNotes = document.querySelectorAll('.note');
        selectedNotes.forEach(note => {
            note.style.fontWeight = note.style.fontWeight === 'bold' ? 'normal' : 'bold';
        });
    });

    // İtalik metin
    document.getElementById('italic-button').addEventListener('click', () => {
        const selectedNotes = document.querySelectorAll('.note');
        selectedNotes.forEach(note => {
            note.style.fontStyle = note.style.fontStyle === 'italic' ? 'normal' : 'italic';
        });
    });

    // Tüm notları temizleme
    clearNotesButton.addEventListener('click', () => {
        notesArray = [];
        noteList.innerHTML = '';
        document.getElementById('notes').innerHTML = '';
    });

    // PDF indirme
    document.getElementById('download-button').addEventListener('click', () => {
        const pdfData = pdfCanvas.toDataURL('image/jpeg');
        const link = document.createElement('a');
        link.href = pdfData.replace('image/jpeg', 'image/octet-stream');
        link.download = 'modified.pdf';
        link.click();
    });

</script>

</body>
</html>

PDF Görüntüleyici