-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoptions.html
187 lines (186 loc) · 8.64 KB
/
options.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
184
185
186
187
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Multishot Options</title>
</head>
<body>
<div class="sidebar">
<div class="fixed">
<div class="sidebar-main">
<header>
<div class="logo-container">
<img class="sidebar-logo" src="./icons/icon128.png" />
<p class="sidebar-title">Multi<span style="font-weight: bold; color: black;">shot</span></p>
</div>
<p class="sidebar-subtitle">Options</p>
</header>
<nav>
<ul id="sidebar-tabs" class="tabs">
<li>
<a class="tab-item" href="#general" aria-selected="true">General</a>
</li>
<li>
<a class="tab-item" href="#presets" aria-selected="false">Presets</a>
</li>
<li>
<a class="tab-item" href="#hotkeys" aria-selected="false">Hotkeys</a>
</li>
<li>
<a class="tab-item" href="#about" aria-selected="false">About</a>
</li>
</ul>
</nav>
<footer>
<p>Have a new idea or found a bug ?</p>
<a href="https://github.com/HamzaEzzRa/Multishot" target="_blank" rel="noopener noreferrer">Contribute</a>
</footer>
</div>
</div>
</div>
<main id="body-main">
<div class="options-main" id="general">
<header>
<h1>General</h1>
</header>
<section>
<h2 class="options-title">Capture</h2>
<ul class="options-ul">
<li class="options-li">
<div class="option-controls">
<div class="toggle-button">
<input type="checkbox" id="remember-home">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
<span class="option-desc">Remember home tab paramaters. Avoid tweaking the home parameters each time you open the extension.</span>
</li>
<li class="options-li">
<div class="option-controls">
<input type="number" min="1" max="100" id="image-quality" required>
</div>
<span class="option-desc">Image quality. This setting is only applicable to JPEG format as PNG is losseless and should match the original page quality.</span>
</li>
<li class="options-li">
<div class="option-controls">
<input type="number" id="capture-delay" min="0" required>
</div>
<span class="option-desc">Capture delay. Wait a number of seconds after the page has done loading. Allows for dynamic rendering and animations to be completed. (Default is 0)</span>
</li>
</ul>
</section>
<section style="padding-bottom: 0;">
<h2 class="options-title">Downloads</h2>
<ul class="options-ul">
<li class="options-li">
<div class="option-controls">
<input type="text" id="zip-name" required>
</div>
<span class="option-desc">Default output name. Please limit this to letters, numbers, dashes, and underscores. Invalid characters will be automatically removed.</span>
</li>
<li class="options-li">
<div class="option-controls">
<div class="toggle-button">
<input type="checkbox" id="save-as">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
<span class="option-desc">Save as dialog. Prompt a default "save as" dialog instead of automatically downloading the output file.</span>
</li>
<li class="options-li">
<div class="option-controls">
<div class="toggle-button">
<input type="checkbox" id="save-pdf">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
<span class="option-desc">Save as PDF. Generate a PDF file containing the captured images instead of individual screenshots in a ZIP file.</span>
</li>
<li class="options-li">
<div class="option-controls">
<div class="toggle-button">
<input type="checkbox" id="cloud-upload">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
<span class="option-desc">Upload to cloud. Automatically upload the screenshots to the cloud and download a text file containing the images urls. This overrides all the other download options. (Limited usage)</span>
</li>
</ul>
</section>
</div>
<div class="options-main" id="presets" style="display: none;">
<header>
<div style="display: flex; column-gap: 12px; align-items: center;">
<h1 class="options-title" style="flex: 0; padding: 0 0 0 2rem;">Presets</h1>
<div class="reset-button-wrapper tooltip" id="presets-reset">
<button class="reset-button"></button>
<span class="tooltip-content" style="margin-left: 190px;">Reset default presets</span>
</div>
</div>
</header>
<section>
<div style="display: inherit;" id="presets-container"></div>
</section>
</div>
<div class="options-main" id="hotkeys" style="display: none;">
<header>
<div style="display: flex; column-gap: 12px; align-items: center;">
<h1 class="options-title" style="flex: 0; padding: 0 0 0 2rem;">Hotkeys</h1>
<div class="edit-button-wrapper tooltip">
<button class="edit-button" id="hotkey-edit"></button>
<span class="tooltip-content" style="margin-left: 150px;">Edit hotkeys</span>
</div>
</div>
</header>
<section style="padding-top: 1.3rem;">
<table>
<tbody id="hotkey-control">
<tr class="hotkey-container">
<td>
<code class="hotkey-command">Alt + Shift + M</code>
</td>
<td class="hotkey-desc">Activate the extension</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="options-main" id="about" style="display: none;">
<header>
<h1>About</h1>
</header>
<section>
<h2 class="options-title">Version</h2>
<ul class="options-ul" style="font-size: 1.1rem;">
<li style="margin-bottom: 5px; font-weight: 600;">Multishot <span style="color: rgb(140, 140, 140); font-style: italic; font-weight: 400;">1.0.1</span></li>
<li class="options-li" style="margin-bottom: 5px;"><a href="#release-notes" class="tab-item" style="color: #0797e1;">What's new in this version ?</a></li>
</ul>
</section>
<section>
<h2 class="options-title">Credits</h2>
<ul class="options-ul">
<li style="margin: 0;"><a style="color: #ffa600;" href="https://github.com/mrcoles/full-page-screen-capture-chrome-extension" target="_blank" rel="noopener noreferrer">Full-page-screen-capture-chrome-extension</a><span> - a full page capture extension</span></li>
<li style="margin: 0;"><a style="color: #ffa600;" href="https://stuk.github.io/jszip/" target="_blank" rel="noopener noreferrer">JSZip</a><span> - a JavaScript library for creating, reading and editing ZIP files</span></li>
<li style="margin: 0;"><a style="color: #ffa600;" href="https://parall.ax/products/jspdf" target="_blank" rel="noopener noreferrer">jsPDF</a><span> - a JavaScript library for generating PDF files</span></li>
<li style="margin: 0;"><span>Icons by Font Awesome Free - </span><a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer" style="color: #ffa600;">CC BY 4.0 License</a></li>
<li style="margin: 0;"><span>The Github community for their suggestions and help</span></li>
</ul>
</section>
</div>
<div class="options-main" id="release-notes" style="display: none;">
<header>
<h1>Release Notes</h1>
</header>
<section id="version-control" style="padding-top: 0.1rem; border-top: none;"></section>
</div>
</main>
<link rel="stylesheet" href="options.css">
<script src="storage.js"></script>
<script src="release.js"></script>
<script src="options.js"></script>
</body>
</html>