-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (68 loc) · 4.23 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
<!DOCTYPE html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Work+Sans&display=swap"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<link rel="manifest" href="./manifest.json" />
<link rel="apple-touch-icon" href="./icon.png" />
<meta name="apple-mobile-web-app-status-bar" content="#151515" />
<meta name="theme-color" content="#865e5e" />
<link href="./style.css" rel="stylesheet">
</head>
<body>
<dialog id="privacyDialog">
<div class="dialogInternal">
<h2>Privacy</h2>
<l>msedge-img-edit doesn't send any of your images or any other data to a server.<br><br>All of the data is
elaborated locally. Hosting is provided by GitHub pages, and, to make this page a little decent-looking,
a font (Work Sans) is downloaded from Google Fonts' servers. msedge-img-edit doesn't share anything with
them.<br><br>msedge-img-edit saves in the website's isolated local storage the theme the user selected.
This is the only data msedge-img-edit saves on your device, and you can delete it when you want from
your browser's settings.</l>
<br><br>
<button class="accent" onclick="manageDialog('privacyDialog', false)">Got it</button>
</div>
</dialog>
<dialog id="licenseDialog">
<div class="dialogInternal">
<h2>License</h2>
<l>Click on a name to see their license.</l>
<div style="display: flex; overflow-x: auto;">
<a class="right hoverAnimate" data-license="2023 Dinoosauro">msedge-img-edit</a><a class="right hoverAnimate" data-license="2020 Alex Corvi">heic2any</a><a class="right hoverAnimate" data-license="2017 Photopea">UTIF.js</a><a class="right hoverAnimate" id="iconText">Icons</a>
</div><br><br>
<div style="padding: 10px; border-radius: 8px; backdrop-filter: brightness(80%); -webkit-backdrop-filter: brightness(80%);">
<l id="licenseLabel"></l>
</div>
<br><br>
<button class="accent" onclick="manageDialog('licenseDialog', false)">Got it</button>
</div>
</dialog>
<h1>msedge-img-edit</h1>
<div id="firststep">
<h2>Step 1: Choose the image.</h2>
<i>A file picker window might have appeared when you entered here. If that's not the case, you can click the
button below.</i><br><br>
<button onclick="openPicker()" class="accent hoverAnimate">Choose the image</button><button style="margin-left: 10px;" class="hoverAnimate" onclick="getClipboard()">Get from clipboard</button><br><br><br><br>
<button onclick="goToReEnc()" class="hoverAnimate">Resize & transcode an image</button>
<form id="reset"><input type="file" style="display: none;" id="fileOpen"></form>
</div>
<div id="secondstep" style="display: none;">
<h2>Step 2: Right-click</h2>
<i>You can see below your image. Right click it and click on "Edit image". Then, copy the result into the
clipboard and click the "Convert Image" button below if you want to convert the image in JPG/WebP or resize
it.</i><br><br>
<img id="img"><br><br>
<button onclick="goToConvert()" class="accent hoverAnimate">Convert Image</button><button
style="background-color: rgb(90,90,90); border-color: rgb(90,90,90); margin-left: 25px;" class="hoverAnimate" onclick="back()">Go
back</button>
</div>
<div style="position: absolute; bottom: 25px">
<a id="themechange" class="right hoverAnimate" hoverAnimate>Change theme</a><a class="right hoverAnimate" id="appInstall">Install as an app</a><a class="right hoverAnimate"
onclick="manageDialog('privacyDialog', true)">Privacy</a><a class="right hoverAnimate"
onclick="manageDialog('licenseDialog', true)">License</a><a
href="https://github.com/Dinoosauro/msedge-img-edit" class="hoverAnimate">View on GitHub</a>
</div>
<script src="./script.js"></script>
</body>