unicon/index.html at main · terremoth/unicon · GitHub

57 lines (52 loc) · 2.54 KB

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset='utf-8'>

<meta http-equiv='X-UA-Compatible' content='IE=edge'>

<title>Universal Image Converter</title>

<meta name='viewport' content='width=device-width, initial-scale=1'>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"

integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

</head>

<body>

<div class="container">

<h1 class="mt-4">Universal Image Converter</h1>

<div class="row mt-4">

<div class="row mt-2 mb-3">

<small>

Made by <a target="_blank" href="https://github.com/terremoth/universal-image-converter">Terremoth</a> with ⚡ & ❤️

</small>

</div>

<div class="col-md-4 mt-3">

<label class="visually-hidden" for="user">Image file:</label>

<input type="file" accept="image/*" placeholder="Image file" required class="form-control" id="image">

</div>

<div class="col-md-4 mt-3">

<div class="d-flex align-items-center gap-2">

<label for="format" class="mb-0">To:</label>

<select class="form-select" id="format">

<option selected value="webp">WEBP</option>

<option value="tiff">TIFF</option>

<option value="jfif">JFIF</option>

<option value="jpg">JPEG</option>

<option value="png">PNG</option>

<option value="aviff">AVIFF</option>

<option value="gif">GIF</option>

</select>

</div>

</div>

<div class="col-md-4 mt-3">

<button type="button" id="export" class="btn btn-success"><i class="fa-solid fa-download me-2"></i> Export</button>

</div>

</div>

<hr>

<div class="" id="result">

<canvas id="canvas"></canvas>

</div>

</div>

<script src="converter.js"></script>

</body>

</html>