PDF92/split.html at main · m92vyas/PDF92 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Splitter Pro</title>
    <script src="static/js/app.js"></script>
    <!-- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> -->
    <link href="static/css/fonts_googleapis.css" rel="stylesheet">
    <link rel="stylesheet" href="static/css/all.min.css">
    <style>
        body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .thumb-card { transition: all 0.2s ease; }
        .thumb-card:hover { transform: translateY(-2px); border-color: #10b981; }
    </style>
</head>
<body class="bg-[#f8fafc] h-screen flex flex-col overflow-hidden text-slate-900">

    <header class="h-14 bg-white border-b border-slate-200 flex items-center justify-between px-6 z-50 shrink-0">
        <div class="flex items-center gap-3">
            <div class="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center text-white shadow-lg shadow-emerald-200">
                <i class="fa-solid fa-scissors text-xs"></i>
            </div>
            <h1 class="text-sm font-bold tracking-tight text-slate-800">Split<span class="text-emerald-600">PDF</span></h1>
            <button onclick="pywebview.api.home_page()" class="ml-2 p-2 text-slate-400 hover:text-emerald-600 transition-colors" title="Home">
                <i class="fa-solid fa-house text-lg"></i> Go to Home Page
            </button>
        </div>

        <div id="action-bar" class="hidden flex items-center gap-4">
             <button onclick="location.reload()" class="text-slate-500 hover:text-slate-700 text-xs font-semibold flex items-center gap-2">
                <i class="fa-solid fa-rotate-left"></i> Reset
            </button>
        </div>
    </header>

    <main class="flex-1 flex overflow-hidden">
        <aside class="w-72 bg-slate-50 border-r border-slate-200 flex flex-col hidden" id="sidebar">
            <div class="p-4 flex justify-between items-center shrink-0 border-b border-slate-200 bg-white">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400">Page Preview</span>
                <span class="text-xs font-bold bg-emerald-100 px-2 py-0.5 rounded text-emerald-700" id="page-count-badge">0</span>
            </div>
            <div class="flex-1 overflow-y-auto p-4 space-y-4" id="thumbnail-container"></div>
        </aside>

        <section class="flex-1 bg-slate-100 relative overflow-y-auto flex flex-col items-center p-8">

            <div id="upload-zone" class="m-auto text-center w-full max-w-md">
                <div onclick="openFile()" class="bg-white p-12 rounded-3xl shadow-sm border-2 border-dashed border-slate-200 hover:border-emerald-400 transition-all cursor-pointer group">
                    <div class="w-16 h-16 bg-emerald-50 text-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-file-pdf text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-slate-800 mb-1">Select PDF to Split</h3>
                    <p class="text-sm text-slate-400 mb-6">Process locally, no files leave your computer</p>
                    <span class="inline-block bg-slate-900 text-white px-8 py-2.5 rounded-xl font-bold text-xs">Browse Files</span>
                </div>
            </div>

            <div id="editor-zone" class="hidden w-full max-w-2xl space-y-6">
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200">
                    <h2 class="text-sm font-bold text-slate-800 mb-4 flex items-center gap-2">
                        <i class="fa-solid fa-wand-magic-sparkles text-emerald-500"></i>
                        Split Configuration
                    </h2>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-500 uppercase mb-2">Define Ranges (use ; and , as per the below Tip)</label>
                            <input type="text" id="range-input"
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-emerald-500 outline-none transition"
                                placeholder="e.g. 1-3,6 ; 5 ; 8-12">
                            <p class="mt-2 text-[11px] text-slate-400 leading-relaxed">
                                <strong>Tip:</strong> Use semicolons (;) to create multiple files. <br>
                                Example: <span class="text-slate-600 font-mono">1-2; 4; 6-10</span> will generate 3 separate PDF files.<br>
                                Use comma (,) to add single page to a set. <br>
                                Example: <span class="text-slate-600 font-mono">1-2,5 ; 4 ; 6-10</span> will generate 3 separate PDF files with the first file containing pages 1-2 and 5.
                            </p>
                        </div>

                        <button onclick="runSplit()" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-xl transition shadow-lg shadow-emerald-100 flex items-center justify-center gap-2">
                            <i class="fa-solid fa-scissors"></i> Process Splits
                        </button>
                    </div>
                </div>

                <div id="results-container" class="hidden space-y-3">
                    <h3 class="text-[11px] font-bold text-slate-500 uppercase px-2">Generated Files</h3>
                    <div id="results-list" class="space-y-2"></div>
                </div>
            </div>

        </section>
    </main>

    <script>
        async function openFile() {
            const data = await pywebview.api.select_pdf_file();
            if (data) {
                document.getElementById('upload-zone').classList.add('hidden');
                document.getElementById('editor-zone').classList.remove('hidden');
                document.getElementById('sidebar').classList.remove('hidden');
                document.getElementById('action-bar').classList.remove('hidden');

                document.getElementById('page-count-badge').innerText = data.pages;

                currentpath = data.path;
                currentfilename = data.name;
                const container = document.getElementById('thumbnail-container');
                container.innerHTML = '';
                data.thumbnails.forEach((base64, idx) => {
                    const div = document.createElement('div');
                    div.className = 'thumb-card bg-white p-2 rounded-lg border border-slate-200 shadow-sm relative';
                    div.innerHTML = `
                        <img src="data:image/png;base64,${base64}" class="w-full h-auto rounded">
                        <span class="absolute top-3 left-3 bg-slate-800/80 text-white text-[10px] px-1.5 py-0.5 rounded font-bold">${idx + 1}</span>
                    `;
                    container.appendChild(div);
                });
            }
        }

        async function runSplit() {
            const input = document.getElementById('range-input').value;
            if (!input) return;

            const results = await pywebview.api.process_splits(input, currentpath, currentfilename);
            const container = document.getElementById('results-container');
            const list = document.getElementById('results-list');

            container.classList.remove('hidden');
            list.innerHTML = '';

            results.forEach(file => {
                const item = document.createElement('div');
                item.className = 'bg-white p-4 rounded-xl border border-slate-200 flex items-center justify-between shadow-sm';

                // 1. Create the inner HTML without the onclick attribute
                item.innerHTML = `
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center text-slate-400">
                            <i class="fa-solid fa-file-export"></i>
                        </div>
                        <div>
                            <p class="text-xs font-bold text-slate-800 truncate max-w-[300px]">${file.filename}</p>
                            <p class="text-[10px] text-slate-500 font-medium italic">Pages: ${file.range}</p>
                        </div>
                    </div>
                    <button class="save-btn bg-emerald-50 text-emerald-600 hover:bg-emerald-600 hover:text-white px-4 py-2 rounded-lg text-[11px] font-bold transition">
                        <i class="fa-solid fa-download mr-1"></i> Save
                    </button>
                `;

                // 2. Target the button and add the event listener directly
                const saveBtn = item.querySelector('.save-btn');
                saveBtn.addEventListener('click', () => {
                    saveFile(file.temp_path, file.filename, file.current_path);
                });

                list.appendChild(item);
            });
        }

        async function saveFile(tempPath, name, currpath) {
            await pywebview.api.save_output_file(tempPath, name, currpath);
        }
    </script>
</body>
</html>