HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gelişmiş Tez Dönüştürücü v2.0 - Rıdvan Kaya</title>
<script src="https://unpkg.com/[email protected]/build/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<style>
:root { --primary: #2563eb; --dark: #0f172a; --bg: #f8fafc; }
* { box-sizing: border-box; margin: 0; font-family: 'Inter', system-ui, sans-serif; }
body { background: var(--bg); padding: 20px; color: #1e293b; }
.container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 90vh; }
/* Panel Tasarımları */
.panel { background: white; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e2e8f0; }
.panel-header { padding: 20px; background: var(--dark); color: white; display: flex; justify-content: space-between; align-items: center; }
/* Editör Alanı */
.editor-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 15px; }
textarea { flex-grow: 1; padding: 20px; border: 2px solid #e2e8f0; border-radius: 12px; font-size: 14px; line-height: 1.6; resize: none; outline: none; transition: 0.3s; }
textarea:focus { border-color: var(--primary); }
/* Önizleme Alanı */
#preview { flex-grow: 1; overflow-y: auto; padding: 40px; background: #fff; border: 1px solid #e2e8f0; font-family: 'Times New Roman', serif; }
.preview-page { background: white; min-height: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.05); padding: 50px; }
/* Dinamik Önizleme Stilleri */
.p-h1 { text-align: center; font-weight: bold; font-size: 1.4em; text-transform: uppercase; margin-top: 20px; }
.p-h2 { text-align: left; font-weight: bold; font-size: 1.2em; margin-top: 15px; }
.p-h3 { text-align: left; font-weight: bold; font-style: italic; font-size: 1.1em; margin-top: 10px; }
.p-text { text-align: justify; text-indent: 30px; margin-bottom: 10px; line-height: 1.5; }
.p-ref { border-top: 1px solid #eee; margin-top: 20px; padding-top: 10px; font-size: 0.9em; }
.btn { background: var(--primary); color: white; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s; }
.btn:hover { background: #1d4ed8; transform: translateY(-1px); }
.info-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
input { padding: 10px; border: 1px solid #cbd5e1; border-radius: 8px; }
@media (max-width: 1000px) { .container { grid-template-columns: 1fr; height: auto; } }
</style>
</head>
<body>
<div class="container">
<div class="panel">
<div class="panel-header">
<h2>📝 Tez Editörü</h2>
<button class="btn" onclick="processAndDownload()">📥 Word İndir</button>
</div>
<div class="editor-content">
<div class="info-inputs">
<input type="text" id="authorName" placeholder="Yazar Adı" value="Rıdvan KAYA">
<input type="text" id="supervisorName" placeholder="Danışman" value="Dr. Öğr. Üyesi Çiğdem YAMANER">
<input type="text" id="thesisTitle" style="grid-column: span 2;" placeholder="Tez Başlığı" value="Epigenetik Yaklaşımlar">
</div>
<textarea id="thesisText" oninput="updatePreview()" placeholder="Metninizi buraya yazın...">GİRİŞ
Epigenetik mekanizmalar bitkilerde stres yanıtında kritik rol oynar. Bu konuda yapılan çalışmalar (Kaya, 2023) göstermektedir ki çevresel faktörler DNA metilasyonunu değiştirir.
- Literatür Özeti
Birçok araştırmacı (Yılmaz, 2022) bitki stres fizyolojisi üzerine yoğunlaşmıştır.
* Önemli Bulgular
Bitkilerin adaptasyon süreci karmaşıktır.</textarea>
</div>
</div>
<div class="panel">
<div class="panel-header" style="background: #475569;">
<h2>📄 Canlı Önizleme (APA 7)</h2>
</div>
<div id="preview">
<div class="preview-page" id="previewContainer">
</div>
</div>
</div>
</div>
<script>
const { Document, Packer, Paragraph, TextRun, AlignmentType, HeadingLevel, Footer, PageNumber, NumberFormat, TableOfContents } = docx;
function updatePreview() {
const text = document.getElementById('thesisText').value;
const container = document.getElementById('previewContainer');
const lines = text.split('\n');
let html = "";
let references = new Set();
lines.forEach(line => {
const trimmed = line.trim();
if (!trimmed) return;
// Referans Ayıklama (Parantez içindeki yıl içeren ifadeleri yakalar)
const refMatch = trimmed.match(/\(([^)]+\d{4})\)/g);
if (refMatch) refMatch.forEach(r => references.add(r.replace(/[()]/g, '')));
if (trimmed === trimmed.toUpperCase() && !trimmed.startsWith('-') && !trimmed.startsWith('*')) {
html += `<div class="p-h1">${trimmed}</div>`;
} else if (trimmed.startsWith('-')) {
html += `<div class="p-h2">${trimmed.substring(1)}</div>`;
} else if (trimmed.startsWith('*')) {
html += `<div class="p-h3">${trimmed.substring(1)}</div>`;
} else {
html += `<div class="p-text">${trimmed}</div>`;
}
});
if (references.size > 0) {
html += `<div class="p-h1" style="margin-top:40px">KAYNAKÇA</div>`;
Array.from(references).sort().forEach(ref => {
html += `<div class="p-ref">${ref}</div>`;
});
}
container.innerHTML = html;
}
async function processAndDownload() {
const author = document.getElementById('authorName').value;
const title = document.getElementById('thesisTitle').value;
const text = document.getElementById('thesisText').value;
const lines = text.split('\n');
const mainChildren = [];
let references = new Set();
lines.forEach(line => {
const trimmed = line.trim();
if (!trimmed) return;
// Referansları topla
const refMatch = trimmed.match(/\(([^)]+\d{4})\)/g);
if (refMatch) refMatch.forEach(r => references.add(r.replace(/[()]/g, '')));
let heading = undefined;
let alignment = AlignmentType.JUSTIFY; // Türkiye akademik formatı için iki yana yaslı
let bold = false;
let italic = false;
let cleanText = trimmed;
if (trimmed === trimmed.toUpperCase() && !trimmed.startsWith('-') && !trimmed.startsWith('*')) {
heading = HeadingLevel.HEADING_1;
alignment = AlignmentType.CENTER;
bold = true;
} else if (trimmed.startsWith('-')) {
heading = HeadingLevel.HEADING_2;
cleanText = trimmed.substring(1).trim();
bold = true;
} else if (trimmed.startsWith('*')) {
heading = HeadingLevel.HEADING_3;
cleanText = trimmed.substring(1).trim();
bold = true;
italic = true;
}
mainChildren.push(new Paragraph({
heading: heading,
alignment: alignment,
spacing: { line: 360, before: 200, after: 120 },
indent: heading ? undefined : { firstLine: 720 },
children: [new TextRun({ text: cleanText, bold, italics: italic, size: 24, font: "Times New Roman" })],
pageBreakBefore: heading === HeadingLevel.HEADING_1 && mainChildren.length > 0
}));
});
// Kaynakça ekle
if (references.size > 0) {
mainChildren.push(new Paragraph({ text: "", pageBreakBefore: true }));
mainChildren.push(new Paragraph({
alignment: AlignmentType.CENTER,
heading: HeadingLevel.HEADING_1,
children: [new TextRun({ text: "KAYNAKÇA", bold: true, size: 28, font: "Times New Roman" })]
}));
Array.from(references).sort().forEach(ref => {
mainChildren.push(new Paragraph({
spacing: { line: 360, after: 120 },
children: [new TextRun({ text: ref, size: 24, font: "Times New Roman" })]
}));
});
}
const doc = new Document({
sections: [{
properties: { page: { pageNumbers: { start: 1, formatType: NumberFormat.DECIMAL } } },
children: mainChildren
}]
});
const blob = await Packer.toBlob(doc);
saveAs(blob, `Tez_Guncel.docx`);
}
// İlk yüklemede önizlemeyi çalıştır
updatePreview();
</script>
</body>
</html>
