-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (129 loc) · 5.92 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>PDF Editor</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="toolbar">
<!-- Tab buttons -->
<div class="tab">
<div class="tab-links tab-load" onclick="openTab('load')">Load a PDF</div>
<div class="tab-links tab-merge" onclick="openTab('merge')">Merge PDFs</div>
<div class="tab-links tab-extract" onclick="openTab('extract')">Extract Page</div>
<div class="tab-links tab-crop" onclick="openTab('crop')">Crop Page</div>
<div class="tab-links tab-delete" onclick="openTab('delete')">Delete Page</div>
<div class="tab-links tab-insert" onclick="openTab('insert')">Insert Page</div>
<div class="tab-links tab-rotate" onclick="openTab('rotate')">Rotate Page</div>
<div class="tab-links tab-download" onclick="openTab('download')">Download PDF</div>
</div>
</div>
<div id="tab-containers">
<div id="load" class="tab-content">
<div id="load-container">
<h3>Load PDF</h3>
<input type="file" id="file-input" accept="application/pdf" />
</div>
</div>
<div id="delete" class="tab-content">
<div id="delete-container">
<h3>Delete PDF Page</h3>
<input type="number" id="delete-page-number" placeholder="Page number" min="1" />
<button id="delete-page">Delete Page</button>
</div>
</div>
<div id="insert" class="tab-content">
<div id="insert-container">
<h3>Insert Blank Page</h3>
<input type="number" id="insert-page-number" placeholder="Page number to insert blank page" />
<button id="insert-blank-page">Insert Blank Page</button>
</div>
</div>
<div id="rotate" class="tab-content">
<div id="rotate-container">
<h3>Rotate PDF Page</h3>
<input type="number" id="rotate-page-number" placeholder="Page number" min="1" />
<input type="number" id="rotation-degree" placeholder="Degrees to rotate (clockwise)" />
<button id="rotate-page">Rotate Page</button>
</div>
</div>
<div id="crop" class="tab-content">
<div id="crop-container">
<h3>Crop PDF Page</h3>
<input type="number" id="crop-page-number" placeholder="Page number" min="1" />
<input type="number" id="crop-x" placeholder="X coordinate" min="0" />
<input type="number" id="crop-y" placeholder="Y coordinate" min="0" />
<input type="number" id="crop-width" placeholder="Width" min="0" />
<input type="number" id="crop-height" placeholder="Height" min="0" />
<button id="crop-page">Crop Page</button>
<button id="start-crop">Visual Crop</button>
<button id="confirm-crop">Confirm Crop</button>
</div>
</div>
<div id="merge" class="tab-content">
<div id="merge-container">
<h3>Merge Multiple PDFs</h3>
<div id="pdf-inputs-container">
<div class="pdf-input-container">
<input type="file" class="pdf-input" accept="application/pdf" />
</div>
<div class="pdf-input-container">
<input type="file" class="pdf-input" accept="application/pdf" />
</div>
</div>
<button id="add-pdf-input">Add Another PDF</button>
<button id="merge-pdfs">Merge PDFs</button>
</div>
</div>
<div id="extract" class="tab-content">
<div id="extract-container">
<h3>Extract Page as Image</h3>
<input type="number" id="extract-page-number" placeholder="Page number" min="1" />
<button id="extract-page">Extract Page</button>
<img id="extracted-page-img" style="display: none;" />
</div>
</div>
<div id="download" class="tab-content">
<div id="download-container">
<h3>Download the PDF</h3>
<button id="download-page">Download Page</button>
</div>
</div>
</div>
<div id="content-container">
<div id="bookmarks-super-container">
<div id="resize-grip"></div>
<div id="toggle-button">Toggle Bookmarks</div>
<div id="bookmarks-container" style="display: none;"></div>
</div>
<!-- The rest of your content goes here -->
<div id="pdf-viewer-container">
<!-- Canvas where PDF page is rendered -->
<div id="pdf-container"></div>
<div id="crop-overlay" style="display: none;">
<!-- Resize handles -->
<div id="left-handle" class="resize-handle"></div>
<div id="right-handle" class="resize-handle"></div>
<div id="top-handle" class="resize-handle"></div>
<div id="bottom-handle" class="resize-handle"></div>
<!-- Button to confirm the crop -->
<!-- <button id="confirm-crop">Crop</button> -->
</div>
</div>
</div>
<!-- Include the main script file -->
<script src="back.js"></script>
<script src="front.js"></script>
<!-- Include pdf.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<script> pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js'; </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<!-- To initialize -->
<script>
openTab('load');
</script>
</body>
</html>
<style>
/* ... other styles ... */
</style>