share-edit/index.html at master · catdad-experiments/share-edit · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Share Edit</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Manifest -->
  <link rel="manifest" href="./manifest.json">
  <meta name="theme-color" content="#202124">
  <link rel="icon" type="image/png" href="assets/icon-512.png" />
  <link rel="stylesheet" type="text/css" href="src/fonts.css">
  <link rel="stylesheet" type="text/css" href="src/style.css">

  <link href="https://cdn.jsdelivr.net/npm/toastify-js@1.6.1/src/toastify.min.css" rel="stylesheet">
</head>

<body>
  <div class="unsupported limit">
    <p>This browser is not supported.</p>
    <p>See the <a href="https://github.com/catdad-experiments/share-edit">GitHub page</a> for more info.</p>
  </div>

  <div class="container hide">
    <div class="main">
      <div class="renderer">
        <canvas id="canvas" class=""></canvas>
        <img src="" alt="" class="hidden-image">
      </div>
    </div>
    <div class="controls limit">
      <div class="general-tools palette">
        <i class="material-icons material-inline hide" title="Install" id="install">archive</i>
        <i class="material-icons material-inline" title="Open" id="open">photo</i>
        <i class="material-icons material-inline" title="Crop" id="crop">crop</i>
        <i class="material-icons material-inline" title="Draw" id="draw">edit</i>
        <i class="material-icons material-inline" title="Share" id="share">share</i>
        <i class="material-icons material-inline" title="Quality" id="quality">equalizer</i>
        <i class="material-icons material-inline" title="Help" id="help">help</i>
        <input type="file" id="open-input" class="hide" />
      </div>
      <div class="crop-tools palette hide">
        <i class="material-icons material-inline" data-cmd="rotate" title="Rotate">rotate_90_degrees_ccw</i>
        <i class="material-icons material-inline" data-cmd="done" title="Done">done</i>
        <i class="material-icons material-inline" data-cmd="cancel" title="Cancel">close</i>
      </div>
      <div class="draw-tools palette hide">
        <i class="material-icons material-inline" data-cmd="undo" title="Undo">undo</i>
        <i class="material-icons material-inline" data-cmd="color" title="Color">color_lens</i>
        <i class="material-icons material-inline" data-cmd="size" title="Size">all_out</i>
        <i class="material-icons material-inline" data-cmd="done" title="Done">done</i>
        <i class="material-icons material-inline" data-cmd="cancel" title="Cancel">close</i>
      </div>
      <div class="color-tools palette hide">
        <i class="color-icon" data-color="#000000" style="background: #000000"></i>
        <i class="color-icon" data-color="#ffffff" style="background: #ffffff"></i>
        <i class="color-icon" data-color="#3897f0" style="background: #3897f0"></i>
        <i class="color-icon" data-color="#70c050" style="background: #70c050"></i>
        <i class="color-icon" data-color="#fdcb5c" style="background: #fdcb5c"></i>
        <i class="color-icon" data-color="#fd8d32" style="background: #fd8d32"></i>
        <i class="color-icon" data-color="#ed4956" style="background: #ed4956"></i>
        <i class="color-icon" data-color="#d10869" style="background: #d10869"></i>
        <i class="color-icon" data-color="#a307ba" style="background: #a307ba"></i>
      </div>
      <div class="size-tools palette hide">
        <div class="slider"><div class="thumb"></div></div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/exif-js@2.3.0/exif.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/toastify-js@1.6.1/src/toastify.min.js"></script>
  <script type="module">
    import loader from './src/loader.js';

    document.querySelector('.unsupported').remove();
    document.querySelector('.container').classList.remove('hide');

    window.addEventListener('load', function () {
      loader();
    });
  </script>
  <script src="/analytics.js" async></script>
</body>

</html>