LiteRoomJS/index.html at master · gillespiecd/LiteRoomJS · 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
<html>
  <head>
    <title>LiteRoomJS</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://cdn.muicss.com/mui-0.9.16/css/mui.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.muicss.com/mui-0.9.16/js/mui.min.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-45666830-3', 'auto');
      ga('send', 'pageview');

    </script>
    <link rel="stylesheet" href="assets/index.css">
  </head>

  <body>
      <h1 class="title">LiteRoomJS</h1>
      <h2 class="subtitle">Upload, edit, and download your favorite images.</h2>
      <div class="main">

        <section class="left-col">
          <label for="image-upload" class="custom-file-upload">
            UPLOAD IMAGE
          </label>
          <input id="image-upload" type="file"/>
          <a id="download-link" download="image.png" href="#">
            <button class="mui-btn mui-btn--accent">Save Edited Image</button>
          </a>
          <button id="rotate-image" class="mui-btn mui-btn--primary">Rotate Image</button>
        </section>

        <section class="mid-col">
          <canvas id="canvas-image" width="800" height="600"></canvas>
        </section>

        <section class="right-col">
          <label for="grayscale">Grayscale
            <input id="grayscale" type="range" min="0" value="0" max="100"/>
          </label>
          <label for="sepia">Sepia
            <input id="sepia" type="range" min="0" value="0" max="100"/>
          </label>
          <label for="contrast">Contrast
            <input id="contrast" type="range" min="0" value="0" max="100"/>
          </label>
          <label for="brightness">Brightness
            <input id="brightness" type="range" min="0" value="0" max="100"/>
          </label>
          <label for="saturate">Saturate
            <input id="saturate" type="range" min="0" value="0" max="100"/>
          </label>
          <label for="opacity">Opacity
            <input id="opacity" type="range" min="0" value="0" max="100"/>
          </label>
          <label for="invert">Invert
            <input id="invert" type="range" min="0" value="0" max="100"/>
          </label>
          <button id="reset-btn" class="mui-btn mui-btn--danger">Reset Filters</button>
        </section>

      </div>
  </body>
  <footer>
    <p>Photograph: <a href="https://en.wikipedia.org/wiki/William_Eggleston">William Eggleston</a></p>
    <p>Code: <a href="https://www.github.com/gillespiecd/literoomjs">
      Chris Gillespie</a></p>
    <img id="default-image" crossOrigin="Anonymous" hidden src="http://res.cloudinary.com/dn1agy1ea/image/upload/v1496354544/eggleston2_ik5nsx.jpg"</img>
    <script type="application/javascript" src="literoom.js"></script>
  </footer>
</html>