emojimakergenerator/index.html at main · lordofsunshine/emojimakergenerator · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Emoji Maker Generator</title>

    <meta name="description" content="Create amazing emoji art from your images" />
    <meta name="robots" content="index,follow" />
    <meta name="keywords" content="emoji, emoji maker, emoji generator, emoji art, image to emoji" />
    <meta name="author" content="Emoji Maker Generator" />
    <meta property="og:title" content="Emoji Maker Generator" />
    <meta property="og:description" content="Transform your images into beautiful emoji art" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://emojimakergenerator.vercel.app/" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Emoji Maker Generator" />
    <meta name="twitter:description" content="Transform your images into beautiful emoji art" />

    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='%23FFDD67'/%3E%3Cpath fill='%23664E27' d='M69.7 64.5c-1.2-2.8-4.3-4.4-9.6-4.4-5.4 0-8.5 1.6-9.6 4.4-.2.5.2 1.2.9 1 .7-.2 2.2-.5 4.3-.5h8.8c2.1 0 3.6.3 4.3.5.7.2 1.1-.5.9-1z'/%3E%3Ccircle cx='35' cy='40' r='7.5' fill='%23664E27'/%3E%3Ccircle cx='65' cy='40' r='7.5' fill='%23664E27'/%3E%3C/svg%3E" />

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

    <script src="script.js" defer></script>
  </head>
  <body>
    <header>
      <h1><i class="fas fa-smile-beam"></i> Emoji Maker Generator</h1>
      <p class="tagline">Transform your images into emoji art</p>
    </header>

    <main>
      <div id="controls">
        <div class="upload-section">
          <label for="image" class="upload-label">
            <i class="fas fa-cloud-upload-alt"></i>
            <span>Upload your image</span>
          </label>
          <input type="file" name="image" id="image" accept="image/*">
          <div id="spinner"></div>
        </div>

        <div class="settings">
          <div class="settings-col">
            <h3><i class="fas fa-sliders-h"></i> Image Settings</h3>

            <div class="container">
              <label for="pSize" title="Smaller window gives higher resolution but processes slower">
                <i class="fas fa-search"></i> Analysis Window:
              </label>
              <input type="range" step="1" min="1" max="50" value="7" id="pSize">
              <div class="range-labels">
                <span>Higher Resolution</span>
                <span>Faster Processing</span>
              </div>
            </div>

            <div class="container">
              <label for="scale" title="Controls the size of the output image">
                <i class="fas fa-expand-arrows-alt"></i> Output Size:
              </label>
              <input type="range" min="1" step="1" max="50" value="12" id="scale">
              <div class="range-labels">
                <span>Smaller</span>
                <span>Larger</span>
              </div>
            </div>
          </div>

          <div class="settings-col">
            <h3><i class="fas fa-palette"></i> Style Settings</h3>

            <div id="c1" class="container">
              <label for="tolerance" title="Low tolerance = more accurate color, less variety of emojis">
                <i class="fas fa-circle-half-stroke"></i> Match Tolerance:
              </label>
              <input type="range" min="1" step="1" max="30" value="8" id="tolerance">
              <div class="range-labels">
                <span>Accurate Colors</span>
                <span>More Variety</span>
              </div>
            </div>

            <div class="container">
              <label for="emptySpace" title="Controls allowed amount of empty space inside emojis">
                <i class="fas fa-compress-alt"></i> Empty Space:
              </label>
              <input type="range" min=".4" step=".01" max="1" value=".7" id="emptySpace">
            </div>

            <div class="container bg-control">
              <div class="checkbox-wrapper">
                <input type="checkbox" checked id="enableBgColor">
                <label for="enableBgColor">Enable Background</label>
              </div>
              <div class="color-picker">
                <label for="bgColor">Background Color:</label>
                <input type="color" id="bgColor">
              </div>
            </div>
          </div>

          <div class="settings-col">
            <h3><i class="fas fa-eye"></i> Display Options</h3>

            <div class="container">
              <label for="display">
                <i class="fas fa-th"></i> Display Mode:
              </label>
              <select id="display">
                <option selected value="grid">Grid</option>
                <option value="mosaic">Mosaic</option>
                <option value="chart">Chart</option>
              </select>
            </div>

            <div class="container checkbox-container">
              <input type="checkbox" id="hideBlack">
              <label for="hideBlack">Hide Black/Transparent</label>
            </div>
          </div>
        </div>
      </div>

      <div class="result-container">
        <div class="canvas-wrapper">
          <canvas class="canvas" id="result"></canvas>
          <div class="loading-overlay">
            <div class="spinner-container">
              <i class="fas fa-spinner fa-spin"></i>
              <span>Processing...</span>
            </div>
          </div>
        </div>
      <div class="download-group">
        <a class="button" href="#" onclick="downloadIt()">
          <i class="fas fa-download"></i> Download Image
        </a>
        <a href="https://github.com/lordofsunshine/emojimakergenerator" target="_blank" class="opensource-link">
          <i class="fab fa-github"></i> Open source project
        </a>
      </div>
    </div>
    </main>

    <footer></footer>

    <div style="display:none">
      <input type="range" min="0" step=".01" max="1" value=".5" id="fillColor">
    </div>

  </body>
</html>