CrossStitchTools/pattern.html at main · hanya/CrossStitchTools · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title id="page-title">Cross-Stitch Pattern Maker</title>
    <script src="https://cdn.jsdelivr.net/gh/hamada147/IsThisColourSimilar@master/Colour.js" ></script>
    <script src="https://unpkg.com/jimp@0.16.1/browser/lib/jimp.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@pdf-lib/fontkit/dist/fontkit.umd.js" type="text/javascript"></script>
    <script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>
    <link rel="stylesheet" href="./assets/css/pattern.css" />
</head>
<body>
<div id="search-container">
    <div id="setup">
        <table>
            <tr>
                <td><span>Count/per 10 cm</span><br><select id="counts"></select></td>
            </tr>
            <tr>
                <td><span>Color table</span><br><select id="color-table"></select></td>
                <td></td>
            </tr>
            <tr>
                <td><span>Replace color</span><br>
                <span>(color to color number,</span><br><span>separated by space)</span><br>
                <textarea id="color-number" rows="5" cols="20"></textarea></td>
                <td><span>Omit numbering colors</span><br>
                <span>(hexadecimal RGB color code)</span><br>
                <textarea id="omit" rows="5" cols="20"></textarea></td>
            </tr>
            <tr>
                <td><span>Ply</span><br><select id="ply"></select></td>
                <td><span>Addition</span><br><select id="addition"></select></td>
            </tr>
            <tr>
                <td><span>Title</span><br><input type="text" id="title"></td>
                <td><span>Author</span><br><input type="text" id="author"></td>
            </tr>
            <tr>
                <td colspan="2"><span>Copyright</span><br>
                    <textarea id="copyright" rows="5" cols="60"></textarea></td>
            </tr>
            <tr>
                <td><span>PDF paper size</span><br><select id="paper-size"></select>
                <input type="radio" id="portrait" name="paper-direction" checked>
                <label for="portrait"><span>Portrait</span></label>
                <input type="radio" id="landscape" name="paper-direction">
                <label for="landscape"><span>Landscape</span></label></td>
                <td>
                </td>
            </tr>
            <tr>
                <td><span>Color mode</span><br><select id="color-mode"></select></td>
                <td></td>
            </tr>
            <tr>
                <td><input type="button" value="Select picture" id="select">
                    <input type="button" value="Create pattern" id="create"></td>
                <td><input type="checkbox" value="PDF" id="pdf-check" name="pdf-check" >
                    <label for="pdf-check"><span>PDF</span></label>
                    <input type="checkbox" value="SVG" id="svg-check" name="svg-check" checked>
                    <label for="svg-check"><span>SVG</span></label>
                    <input type="checkbox" value="SVG in HTML" id="svg-html-check" name="svg-html-check">
                    <label for="svg-html-check"><span>SVG in HTML</span></label>
                    <!--
                    <input type="checkbox" value="HTML" id="html-check" name="html-check" checked>
                    <label for="html-check"><span>HTML</span></label>
                    -->
                </td>
            </tr>
        </table>
        <input type="file" id="file_input" style="display:none;">
    </div>
    <div id="result">
        <div id="image"><img id="data_image"></div>
        <div id=""></div>
    </div>
</div>
<div id="info"></div>
<object type="application/pdf" data="" id="pdf" width="1000" height="900"></object>
<div id="svg"><img id="svg_image"></div>
<div id="svg-html">
    <iframe id="svg_html_image" width="400" height="300" style="visibility: hidden;"></iframe>
    <br><a href="" id="svg-html-link"></a>
</div>
<div id="html">
    <iframe id="html_image" width="400" height="300" style="visibility: hidden;"></iframe>
    <br><a href="" id="html-link"></a>
</div>
<div id="text-width" style="visibility: visible; display: block; font-family: helvetica; font-size: 8pt;"></div>
<script type="module" src="./assets/js/pattern.js"></script>
</body>
</html>