fade-server/page.html at main · benbenbob1/fade-server · 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
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<meta name="google-site-verification" content="cW-yMRoPK6AHWNYBlwMs3d2zyHjPj3wg2o1xU5PmjxQ" />
<link href='/assets/style.css' rel='stylesheet' type='text/css'>
<script src='https://code.jquery.com/jquery-2.2.0.min.js'></script>
<script src='/js/patterns.js'></script>
<script src='/js/colorpicker.js'></script>
<script src='/js/helpers.js'></script>
<script src='/js/client.js'></script>
</head>
<body>

<div id='color-overlay-container'>
    <div id='color-overlay-modal'>
        <div id='color-overlay-content'>
            <div id='color-overlay-button-close'></div>
            <div id='color-picker-container'>
                <div id='color-picker-title'>Pick a color</div>
                <canvas id='color-picker-canvas' width="320" height="240">
                    <canvas id='color-picker-canvas-hue'></canvas>
                </canvas>

                <div id='color-preview-div'></div>
            </div>
            <div id='pattern-picker-container'>
                <div id='pattern-picker-title'>Pick a pattern</div>
                <div id='preset-container'></div>
                <div id='config-space'></div>
            </div>
        </div>
    </div>
</div>


<div id='container'>
    <h1>Choose a light strip</h1>
    <div id='main'>
        <div class='flexible-space'>
            <!--
            <img id='lock-strips' onclick='lockIconClicked()' title='Locks the color strips to the same color' src=''>
            -->
        </div>

        <div class='strips'>
            <div id='strip-buttons'>
                <!--To be filled in with js -->
            </div>
            <!-- \/ This is what it will look like \/
            <div class='button-collection'>
                <button class='preset-button' id='pattern-rainbow-fade' onclick='chosePreset(this.id)' title="Rainbow Fade"></button>
                <button class='preset-button' id='pattern-rainbow-alternate' onclick='chosePreset(this.id)' title="Reverse Double Fade">
                    <div id='pattern-rainbow-alternate-top'></div>
                    <div id='pattern-rainbow-alternate-bottom'></div>
                </button>
                <button class='preset-button' id='pattern-random' onclick='chosePreset(this.id)' title="Random">?</button>
                <button class='preset-button' id='pattern-waves' onclick='chosePreset(this.id)' title="Waves">
                    <span id='pattern-waves-text'></span>
                    <div id='pattern-waves-circle-red' class='pattern-waves-circle'></div>
                    <div id='pattern-waves-circle-green' class='pattern-waves-circle'></div>
                    <div id='pattern-waves-circle-blue' class='pattern-waves-circle'></div>
                </button>
                <button class='preset-button' id='pattern-moving-fade' onclick='chosePreset(this.id)' title="Moving Fade"></button>
                <button class='preset-button' id='pattern-switch' onclick='chosePreset(this.id)' title="Switch"></button>
            </div>

            <div id='config-space'>
            </div>
            -->
        </div>

        <div class='flexible-space'>
        </div>
    </div>
</div>
</body>
</html>