Skip to content

Commit a465d24

Browse files
HHMagnusHHMagnus
committed
Included source in footer
1 parent 8ccdccc commit a465d24

1 file changed

Lines changed: 103 additions & 82 deletions

File tree

‎index.html‎

Lines changed: 103 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,26 @@
2222
}
2323

2424
body {
25+
min-height: 100vh;
26+
margin: 0;
27+
padding: 0;
28+
}
29+
30+
body, header, footer, main {
2531
background-color: var(--main-bg-color);
2632
display: flex;
2733
flex-direction: column;
2834
align-items: center;
2935
}
3036

37+
main {
38+
flex: 1;
39+
}
40+
41+
footer {
42+
padding: 1em;
43+
}
44+
3145
#error-message {
3246
background-color: var(--main-error-color);
3347
border: 1px solid var(--main-draw-color);
@@ -123,98 +137,105 @@
123137
</style>
124138
</head>
125139
<body>
126-
<h1>Offline Image Converter</h1>
127-
<ul id="features">
128-
<li>Convert between different image formats directly in the browser</li>
129-
<li>No cloud, no uploads, no installs, no downloads</li>
130-
<li>Everything stays on your device, private and secure</li>
131-
</ul>
132-
133-
<hr style="width: 35em; max-width: 90%;">
134-
135-
<p>Paste using CTLR-V or choose a image from:</p>
136-
137-
<div id="inputSection">
138-
<input type="file" id="fileInput" aria-label="Image to convert" onchange="fileInputChanged(event)" accept="image/bmp,image/x-bmp,image/vnd-ms.dds,image/x-direct-draw-surface,image/x-exr,image/ff,image/gif,image/vnd.radiance,image/x-icon,image/jpeg,image/png,image/x-portable-bitmap,image/x-portable-graymap,image/x-portable-pixmap,image/x-portable-anymap,image/qoi,image/x-tga,image/x-targa,image/tiff,image/tiff-fx,image/webp" />
139-
140-
<div id="filePasteSection" style="display: none;">
141-
<p>Pasted file</p>
142-
<button onclick="resetPaste()">Reset</button>
143-
</div>
144-
</div>
145-
146-
<div id="actionSection" style="display: none;">
147-
<div id="outputSection">
148-
<label for="outputType">Output format:</label>
149-
<select id="outputType" onchange="selectChanged(event)">
150-
151-
<optgroup label="Recommended:">
152-
<option value="image/jpeg">JPEG</option>
153-
<option value="image/png">PNG</option>
154-
</optgroup>
155-
156-
<optgroup label="More:">
157-
<option value="image/avif">AVIF</option>
158-
<option value="image/bmp">BMP</option>
159-
<option value="image/x-exr">OpenEXR</option>
160-
<option value="image/ff">Farbfeld</option>
161-
<option value="image/gif">GIF</option>
162-
<option value="image/vnd.radiance">HDR</option>
163-
<option value="image/x-icon">ICO</option>
164-
<option value="image/x-portable-bitmap">PNM</option>
165-
<option value="image/qoi">QOI</option>
166-
<option value="image/x-tga">TGA</option>
167-
<option value="image/tiff">TIFF</option>
168-
<option value="image/webp">WebP</option>
169-
</optgroup>
170-
</select>
140+
<header>
141+
<h1>Offline Image Converter</h1>
142+
<ul id="features">
143+
<li>Convert between different image formats directly in the browser</li>
144+
<li>No cloud, no uploads, no installs, no downloads</li>
145+
<li>Everything stays on your device, private and secure</li>
146+
</ul>
147+
<hr style="width: 35em; max-width: 90%;">
148+
</header>
149+
150+
<main>
151+
<p>Paste using CTLR-V or choose a image from:</p>
152+
153+
<div id="inputSection">
154+
<input type="file" id="fileInput" aria-label="Image to convert" onchange="fileInputChanged(event)" accept="image/bmp,image/x-bmp,image/vnd-ms.dds,image/x-direct-draw-surface,image/x-exr,image/ff,image/gif,image/vnd.radiance,image/x-icon,image/jpeg,image/png,image/x-portable-bitmap,image/x-portable-graymap,image/x-portable-pixmap,image/x-portable-anymap,image/qoi,image/x-tga,image/x-targa,image/tiff,image/tiff-fx,image/webp" />
155+
156+
<div id="filePasteSection" style="display: none;">
157+
<p>Pasted file</p>
158+
<button onclick="resetPaste()">Reset</button>
159+
</div>
171160
</div>
172161

173-
<details id="advancedInput">
174-
<summary>
175-
Advanced options (click to expand)
176-
</summary>
177-
<div id="advancedInput-image/jpeg">
178-
<label for="quality">Quality (0 low, 100 high):</label>
179-
<input type="number" id="quality" name="quality" min="0" max="100" value="100" />
162+
<div id="actionSection" style="display: none;">
163+
<div id="outputSection">
164+
<label for="outputType">Output format:</label>
165+
<select id="outputType" onchange="selectChanged(event)">
166+
167+
<optgroup label="Recommended:">
168+
<option value="image/jpeg">JPEG</option>
169+
<option value="image/png">PNG</option>
170+
</optgroup>
171+
172+
<optgroup label="More:">
173+
<option value="image/avif">AVIF</option>
174+
<option value="image/bmp">BMP</option>
175+
<option value="image/x-exr">OpenEXR</option>
176+
<option value="image/ff">Farbfeld</option>
177+
<option value="image/gif">GIF</option>
178+
<option value="image/vnd.radiance">HDR</option>
179+
<option value="image/x-icon">ICO</option>
180+
<option value="image/x-portable-bitmap">PNM</option>
181+
<option value="image/qoi">QOI</option>
182+
<option value="image/x-tga">TGA</option>
183+
<option value="image/tiff">TIFF</option>
184+
<option value="image/webp">WebP</option>
185+
</optgroup>
186+
</select>
180187
</div>
181188

182-
<div id="advancedInput-image/png" style="display: none;">
183-
<div>
184-
<label for="compression">Compression method:</label>
185-
<select id="compression" name="compression">
186-
<option value="fast">Fast, minimal compression</option>
187-
<option value="best">Best compression level</option>
188-
<option value="default">Default compression level</option>
189-
</select>
189+
<details id="advancedInput">
190+
<summary>
191+
Advanced options (click to expand)
192+
</summary>
193+
<div id="advancedInput-image/jpeg">
194+
<label for="quality">Quality (0 low, 100 high):</label>
195+
<input type="number" id="quality" name="quality" min="0" max="100" value="100" />
190196
</div>
191197

192-
<div>
193-
<label for="filter">Filter type:</label>
194-
<select id="filter" name="filter">
195-
<option value="adaptive">Automatic</option>
196-
<option value="no_filter">No filter</option>
197-
<option value="sub">Sub</option>
198-
<option value="up">Up</option>
199-
<option value="avg">Avg</option>
200-
<option value="paeth">Paeth</option>
201-
</select>
198+
<div id="advancedInput-image/png" style="display: none;">
199+
<div>
200+
<label for="compression">Compression method:</label>
201+
<select id="compression" name="compression">
202+
<option value="fast">Fast, minimal compression</option>
203+
<option value="best">Best compression level</option>
204+
<option value="default">Default compression level</option>
205+
</select>
206+
</div>
207+
208+
<div>
209+
<label for="filter">Filter type:</label>
210+
<select id="filter" name="filter">
211+
<option value="adaptive">Automatic</option>
212+
<option value="no_filter">No filter</option>
213+
<option value="sub">Sub</option>
214+
<option value="up">Up</option>
215+
<option value="avg">Avg</option>
216+
<option value="paeth">Paeth</option>
217+
</select>
218+
</div>
219+
<a href="https://www.libpng.org/pub/png/spec/1.2/PNG-Filters.html" target="_blank" rel="noopener noreferrer">Read more about PNG filters</a>
202220
</div>
203-
<a href="https://www.libpng.org/pub/png/spec/1.2/PNG-Filters.html" target="_blank" rel="noopener noreferrer">Read more about PNG filters</a>
204-
</div>
205-
</details>
221+
</details>
206222

207-
<button id="convertBtn" onclick="convert()">Convert</button>
208-
209-
<div id="loader" style="display: none;">
210-
<span class="loader"></span>
211-
<p id="progress">Starting...</p>
223+
<button id="convertBtn" onclick="convert()">Convert</button>
224+
225+
<div id="loader" style="display: none;">
226+
<span class="loader"></span>
227+
<p id="progress">Starting...</p>
228+
</div>
212229
</div>
213-
</div>
214230

215-
<p id="error-message" style="display: none;">
216-
Error here
217-
</p>
231+
<p id="error-message" style="display: none;">
232+
Error here
233+
</p>
234+
</main>
235+
236+
<footer>
237+
<a href="https://github.com/HHMagnus/ImageConvert" target="_blank">Source and Issues on Github</a>
238+
</footer>
218239

219240
<script>
220241
const errorMessage = document.getElementById("error-message");

0 commit comments

Comments
 (0)