words/index.html at master · alvov/words · 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
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Words</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="canvas"></canvas>
    <input type="checkbox" id="mf-expanded" form="mf-controls" class="form-expand-input"/>
    <form id="mf-controls" class="form">
        <label for="mf-expanded" class="form-label form-label_expand"></label>
        <div class="form-row">
            <label for="mf-preset" class="form-label">Example preset</label>
            <select id="mf-preset">
                <option value="-1">-</option>
            </select>
        </div>
        <div class="form-row">
            <label for="mf-source" class="form-label">Source</label>
            <select id="mf-source"></select>
            <div class="form-custom-file">
                <label for="mf-image-input" class="form-label_custom-file">Choose file</label>
                <input type="file" id="mf-image-input"/>
            </div>
        </div>
        <div class="form-row">
            <label for="mf-grid-size" class="form-label">Grid size</label>
            <input type="range" id="mf-grid-size" min="10" max="50" step="5" required/>
            <output for="mf-grid-size" id="mf-grid-size-output">20</output>
        </div>
        <div class="form-row">
            <label for="mf-color" class="form-label">Color</label>
            <input type="range" id="mf-color" min="-1" max="359" required/>
            <output for="mf-color" id="mf-color-output" class="form-color-output"></output>
        </div>
        <div class="form-row">
            <label for="mf-shades" class="form-label">Shades</label>
            <input type="range" id="mf-shades" min="2" max="10" required/>
            <output for="mf-shades" id="mf-shades-output">5</output>
        </div>
        <div class="form-row">
            <label for="mf-bg-color" class="form-label">Background color</label>
            <input type="range" id="mf-bg-color" min="-1" max="360" required/>
            <output for="mf-bg-color" id="mf-bg-color-output" class="form-color-output"></output>
        </div>
        <div class="form-row">
            <label for="mf-font" class="form-label">Font</label>
            <input type="text" id="mf-font" required/>
        </div>
        <div class="form-row">
            <label for="mf-vocabulary" class="form-label">Vocabulary</label>
            <textarea id="mf-vocabulary" required title="Enter space-separated words"></textarea>
        </div>
        <div class="form-row form-row_submit">
            <a href="#" id="download-link" download="word-image.png" class="form-link">Download image</a>
            <input class="form-submit" type="submit" id="mf-submit" value="Apply">
        </div>
    </form>
    <script src="node_modules/md-gum-polyfill/mediaDevices-getUserMedia-polyfill.js"></script>
    <script src="examples/me/example.js"></script>
    <script src="examples/honey/example.js"></script>
    <script src="examples/snoop-dogg/example.js"></script>
    <script src="examples/darth-vader/example.js"></script>
    <script src="helpers.js"></script>
    <script src="script.js"></script>
</body>
</html>