imgcmp/index.html at master · b6b/imgcmp · 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
<!DOCTYPE html>
<html>
<head>
<title>imgcmp</title>
<meta charset="UTF-8">
<meta name="description" content="Simple image comparison">
<link href="assets/css/main.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.0/URI.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
</head>
<body>

  <div id="app">

    <div id="home" v-if="!loadComparison">
      <h1>imgcmp - Simple image comparison</h1>

      <p>
        <label>Image 1:</label>
        <input v-model="img1" @keyup.enter="compare">
      </p>

      <p>
        <label>Image 2:</label>
        <input v-model="img2" @keyup.enter="compare">
      </p>

      <p style="font-size: 12px; font-style: italic;">*imgcmp doesn't host images. Use URLs to already hosted images.</p>

      <p><button @click="compare">Compare images</button></p>

    </div>

    <div id="comparison" v-else>
      <div id="imgTitle">
        <span class="highlight" v-show="!showAlt">Image 1</span>
        <span class="highlight" v-show="showAlt">Image 2</span>
      </div>

      <div id="img">
        <img :src="img1" v-show="!showAlt" @mouseover="showAlt = true" style="border:3px solid #222222">
        <img :src="img2" v-show="showAlt" @mouseleave="showAlt = false" style="border:3px solid #444444">
      </div>
    </div>

  </div>

  <script src="assets/js/main.js"></script>
</body>
</html>