-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (174 loc) · 10.7 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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bulk Watermarker</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon and Manifest -->
<link rel="manifest" href="manifest.json?v=202410290940">
<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png?v=202410290940">
<link rel="icon" type="image/png" sizes="192x192" href="static/img/favicon-192x192.png?v=202410290940">
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="120x120" href="static/img/apple-touch-icon-120x120.png?v=202410290940">
<link rel="apple-touch-icon" sizes="152x152" href="static/img/apple-touch-icon-152x152.png?v=202410290940">
<link rel="apple-touch-icon" sizes="167x167" href="static/img/apple-touch-icon-167x167.png?v=202410290940">
<link rel="apple-touch-icon" sizes="180x180" href="static/img/apple-touch-icon-180x180.png?v=202410290940">
<!-- Android Icons -->
<link rel="icon" type="image/png" sizes="48x48" href="static/img/android-icon-48x48.png?v=202410290940">
<link rel="icon" type="image/png" sizes="72x72" href="static/img/android-icon-72x72.png?v=202410290940">
<link rel="icon" type="image/png" sizes="96x96" href="static/img/android-icon-96x96.png?v=202410290940">
<link rel="icon" type="image/png" sizes="144x144" href="static/img/android-icon-144x144.png?v=202410290940">
<link rel="icon" type="image/png" sizes="192x192" href="static/img/android-icon-192x192.png?v=202410290940">
<link rel="icon" type="image/png" sizes="512x512" href="static/img/android-icon-512x512.png?v=202410290940">
<!-- Bootstrap CSS -->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" rel="stylesheet">
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet">
<link href="static/css/styles.css?v=202410290940" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<!-- Brand -->
<a class="navbar-brand" href="#"><img src="static/img/bulk-watermarker.svg?v=202410290940" alt="Brand Logo" width="24" class="mt-0 me-1 mb-1 ms-2"></a>
<!-- GitHub link -->
<a class="nav-link ms-auto order-lg-3" href="https://github.com/justinh-rahb/bulk-watermarker" target="_blank" rel="noopener noreferrer">
<i class="fab fa-github"></i>
<span class="d-none d-lg-inline"> GitHub</span>
</a>
<!-- Toggle button -->
<!--<button class="navbar-toggler order-lg-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>-->
<!-- Collapsing content (if any) -->
<div class="collapse navbar-collapse order-lg-2" id="navbarNav">
<!-- Add any additional navbar items here -->
</div>
</div>
</nav>
<!-- Main Container -->
<div class="container mt-4">
<!-- Upload Area -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-upload"></i> Upload Images</h5>
</div>
<div class="card-body text-center">
<div id="upload-area" class="p-4 border border-secondary rounded">
<p>Drag & Drop Images Here</p>
<button id="select-button" class="btn btn-primary"><i class="fas fa-folder-open"></i> Select Images</button>
<input type="file" id="file-input" multiple accept="image/png, image/jpeg" hidden>
</div>
</div>
</div>
<!-- Watermark Settings -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-cog"></i> Watermark Customization</h5>
</div>
<div class="card-body">
<form id="watermark-form">
<div class="mb-3">
<label for="watermark-text" class="form-label"><i class="fas fa-text-height"></i> Watermark Text:</label>
<input type="text" id="watermark-text" class="form-control" placeholder="Enter watermark text">
</div>
<div class="mb-3">
<label for="watermark-image" class="form-label"><i class="fas fa-image"></i> Or Upload Watermark Image:</label>
<input type="file" id="watermark-image" class="form-control" accept="image/png, image/jpeg">
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="position" class="form-label"><i class="fas fa-arrows-alt"></i> Position:</label>
<select id="position" class="form-select">
<option value="top-left">Top Left</option>
<option value="top-right">Top Right</option>
<option value="center">Center</option>
<option value="bottom-left">Bottom Left</option>
<option value="bottom-right">Bottom Right</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="margin-x" class="form-label"><i class="fas fa-arrows-alt-h"></i> Horizontal Margin (px):</label>
<input type="number" id="margin-x" class="form-control" value="10">
</div>
<div class="col-md-3 mb-3">
<label for="margin-y" class="form-label"><i class="fas fa-arrows-alt-v"></i> Vertical Margin (px):</label>
<input type="number" id="margin-y" class="form-control" value="10">
</div>
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="size" class="form-label"><i class="fas fa-font"></i> Watermark Height (px):</label>
<input type="number" id="size" class="form-control" value="36">
</div>
<div class="col-md-4 mb-3">
<label for="color" class="form-label"><i class="fas fa-palette"></i> Color:</label>
<input type="color" id="color" class="form-control form-control-color" value="#FFFFFF">
</div>
<div class="col-md-4 mb-3">
<label for="opacity" class="form-label"><i class="fas fa-adjust"></i> Opacity:</label>
<input type="range" id="opacity" class="form-range" min="0" max="1" step="0.1" value="0.5">
<div id="opacity-value" class="text-center">0.5</div>
</div>
</div>
</form>
</div>
</div>
<!-- Live Preview -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-eye"></i> Live Preview (Click to Download)</h5>
</div>
<div class="card-body text-center">
<canvas id="preview-canvas" class="border border-secondary"></canvas>
</div>
</div>
<!-- Image Preview and Pagination -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0"><i class="fas fa-images"></i> Processed Images (Click to Preview)</h5>
</div>
<div class="card-body">
<div id="image-preview" class="row gy-3">
<!-- Processed images will be displayed here with pagination -->
</div>
<nav>
<ul class="pagination justify-content-center mt-3">
<li class="page-item">
<button id="prev-page" class="page-link">Previous</button>
</li>
<li class="page-item disabled">
<span id="page-info" class="page-link"></span>
</li>
<li class="page-item">
<button id="next-page" class="page-link">Next</button>
</li>
</ul>
</nav>
<div class="text-center mt-3">
<button id="download-zip" class="btn btn-success"><i class="fas fa-file-archive"></i> Download All as ZIP</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and Dependencies -->
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"></script>
<!-- Include JSZip and FileSaver.js libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<!-- Main Script -->
<script src="static/js/bulk-watermarker.js?v=202410290940"></script>
<!-- Register Service Worker -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js?v=202410290940')
.then(reg => console.log('Service worker registered!', reg))
.catch(err => console.log('Service worker registration failed:', err));
}
</script>
</body>
</html>