-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
151 lines (150 loc) · 7.77 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
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Merge PDFs FREE, convert images to PDFs, or blend both with text watermarks — quickly and securely in your browser. No data uploads to servers, no ads, and no sign-up required." />
<meta name="author" content="Mark Bradley" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="theme-color" content="#1d1d1d" />
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png" />
<title>PDFMERGE - Merge PDFs and images FREE. Quickly and securely in your browser.</title>
<link href="css/reset.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div id="spinner" class="spinner"></div>
<div class="wrapper">
<header>
<div class="header-top">
<div class="branding"><img src="images/pdfmerge-icon.png" />PDF<span>MERGE</span></div>
<div id="theme-switcher">
<svg id="sun-icon" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle class="sun" cx="12" cy="12" r="6" fill="currentColor" />
<g class="sun-beams" stroke="currentColor">
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</g>
</svg>
<svg id="moon-icon" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<mask id="moon-mask" class="moon">
<rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
<circle cx="12" cy="10" r="6" fill="white" />
</mask>
<circle class="moon" cx="12" cy="12" r="6" fill="currentColor" />
</svg>
</div>
</div>
<div class="hero">
Merge PDFs, convert images to PDFs, or blend both with text watermarks—quickly and securely in your browser. No data uploads to servers, no ads, and no sign-up required.
</div>
</header>
<main>
<div id="flash-banner" class="flash-banner-container"></div>
<label for="file-input" id="file-upload-label">Click to add files...</label>
<input accept=".jpg, .jpeg, .png, .pdf" id="file-input" multiple="" type="file" />
<div id="drop-area">
<p class="bold">Or drag and drop files here...</p>
<div id="file-list">
<ul id="selected-files-list"></ul>
</div>
</div>
<div id="image-details-toggle" style="display: none">
<div class="toggle-group">
<div class="toggle-item">
<label for="print-image-details">
<div class="switch">
<input type="checkbox" id="print-image-details" name="print-image-details" />
<span class="slider round"></span>
</div>
Image Details
</label>
</div>
<div class="toggle-item">
<label for="landscape-orientation">
<div class="switch">
<input type="checkbox" id="landscape-orientation" name="landscape-orientation" />
<span class="slider round"></span>
</div>
Image Landscape
</label>
</div>
<div class="toggle-item">
<label for="print-image-page-numbers">
<div class="switch">
<input type="checkbox" id="print-image-page-numbers" name="print-image-page-numbers" />
<span class="slider round"></span>
</div>
Image Number
</label>
</div>
<div class="toggle-item">
<label for="print-image-hash">
<div class="switch">
<input type="checkbox" id="print-image-hash" name="print-image-hash" />
<span class="slider round"></span>
</div>
Image Hash
</label>
</div>
<p class="toggle-description">Image Details adds the image name, and EXIF details including GPS and date (if available). Image Landscape fits the images to landscape A4 pages (default is portrait). Image Number will add an image number in the bottom right. Image Hash will add the unique SHA-256 hash value for the input image.</p>
</div>
</div>
<div id="watermark-details-toggle" style="display: none">
<div class="toggle-item">
<label for="add-watermark">
<div class="switch">
<input type="checkbox" id="add-watermark" name="add-watermark" />
<span class="slider round"></span>
</div>
Add Watermark
</label>
</div>
<div class="watermark-group" style="display: none">
<div class="watermark-item">
<input type="text" id="watermark-text" placeholder="Enter watermark text">
</div>
<div class="watermark-item">
<label for="watermark-color">Watermark Color</label>
<input type="color" id="watermark-color" value="#000000">
</div>
<div class="watermark-item">
<label for="watermark-opacity">Watermark Opacity (0-1):</label>
<input type="number" id="watermark-opacity" min="0" max="1" step="0.1" value="0.5">
</div>
<p class="watermark-description">A text watermark will be added to all PDF pages this includes new images and existing PDF document pages.</p>
</div>
</div>
<div id="progress-container">
<div id="progress-bar"></div>
</div>
<button id="convert-button" class="button primary">Convert and PDF Merge</button>
<button id="reset-button" class="button secondary">Clear File List</button>
<div id="file-link"></div>
</main>
<footer>
<p>
Supported File Types: PDF, JPG, PNG, GIF, WEBP. Images are automatically resized to optimally fit A4-sized documents. On desktop browsers, the new PDF will automatically save to your Downloads. For mobile devices, manual saving of the file may be required. All processing is performed locally in your browser, using the <a href="https://pdf-lib.js.org/" target="_blank">pdf-lib</a> JavaScript library and the HTML5 FileReader API. Source code for this application is available on <a href="https://github.com/bradsec/pdfmerge" target="_blank">GitHub</a>.
</p>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pdf-lib/fontkit@1.1.1/dist/fontkit.umd.min.js"></script>
<script src="js/utils.js" type="module"></script>
<script src="js/fileHandling.js" type="module"></script>
<script src="js/watermark.js" type="module"></script>
<script src="js/pdfProcessing.js" type="module"></script>
<script src="js/theme.js" type="module"></script>
<script src="js/main.js" type="module"></script>
</div>
</body>
</html>