dogglasses/index.html at master · jshields/dogglasses · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="mobileoptimized" content="0">
        <meta name="description" content="Put Glasses on Dogs">
        <meta name="author" content="Joshua Shields">
        <title>dogglasses.io</title>
        <script type="text/javascript" src="js/dogglasses.js"></script>
        <link rel="stylesheet" type="text/css" href="css/dogglasses.css">
    </head>
    <body>
        <aside id="desktop-warning">
            <h2>Sorry, only desktop is supported right now</h2>
        </aside>
        <header class="header">
            <h1>dogglasses</h1>
        </header>

        <main class="main">
            <div id="dogContainer"></div>

            <!-- IDEA make the steps a train widget or a side menu? -->
            <div id="instructions">
                <div class="step active">
                    <h3>Step 1: Pick Dog</h3>
                    <label for="dogFile" class="label">Dog Image
                        <input id="dogFile" class="control" name="dogFile" type="file" accept="image/*">
                    </label>
                    <button id="defaultDogBtn" name="defaultDogBtn" class="control" type="button">Use Default Dog</button>
                    <!--IDEA selection of defaults
                    <select>
                        <option>Lil' Tootie</option>
                        <option>Doge</option>
                        <option>Gabe</option>
                        <option>Dealwithit</option>
                    </select>
                    -->
                    <span id="dogScore">Dog Score Pending, Select JPEG File</span>
                    <label class="control">
                        <input id="includeDogScore" name="includeDogScore" type="checkbox" disabled="disabled">Include Dog Score in Image
                    </label>
                </div>

                <div class="step">
                    <h3>Step 2: Pick Glasses</h3>
                    <label for="glassesFile" class="label">Glasses Image
                        <input id="glassesFile" class="control" name="glassesFile" type="file" accept="image/*" disabled="disabled">
                    </label>

                    <button id="defaultGlassesBtn" name="defaultGlassesBtn" class="control" type="button" disabled="disabled">
                        Use Default Glasses
                    </button>

                    <label for="glassesScale" class="label">Scale Glasses
                        <input id="glassesScale" name="glassesScale" class="control" disabled="disabled" type="range" min="0.1" max="3" step="0.1" value="1">
                    </label>
                </div>

                <div class="step">
                    <button id="printBtn" name="printBtn" class="control" type="button" disabled="disabled"><h3>Step 3: Save</h3></button>
                    <div id="downloadLinkContainer"></div>
                </div>
            </div>
        </main>

        <footer class="footer">
            Source: <a href="https://github.com/jshields/dogglasses" target="_blank" rel="noopener noreferrer">jshields/dogglasses</a>
        </footer>
    </body>
</html>