MeganSpauldingCreative.github.io/index.html at master · meganspaulding/MeganSpauldingCreative.github.io · 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
<!DOCTYPE html>
<html>
<head>
    <title>Bright Light</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
</head>
<body>


<!--
  ===========================

    Resize Modal

  ===========================
-->

    <div id="resize-modal" class="modal">
        <div id="modal-content">
        <p id="resize-close" class="close">&times;</p>
        <h2 class="modal-header">Size Your Grid</h2>
        <form id="sizePicker">
        <span class="form-height form-label">Grid Height:
            <input type="number" id="inputHeight" name="height" min="1" max="32" value="1">
        </span>
        <span class="form-width form-label">
        Grid Width:
            <input type="number" id="inputWeight" name="width" min="1" max="84" value="1">
        </span>
            <input type="submit" id="submit">
       </form>
       <div class="preset-size-container">
           <button class="size-button small-size coming-soon">Small<span class="size-tool">Coming Soon</span></button>
           <button class="size-button coming-soon">Medium<p class="size-tool">Coming Soon</p></button>
           <button class="size-button coming-soon">Large<p class="size-tool">Coming Soon</p></button>
       </div>

        </div>
    </div>


<!--
  ===========================

    Color Modal

  ===========================
-->

    <div id="color-modal" class="modal">
            <p id="color-close" class="close">&times;</p>

            <h2 class="modal-header">Choose Your Color</h2>
        <div id="color-modal-content">
            <div class="color-square top-row selected-color" id="red-square"></div>
            <div class="color-square top-row" id="orange-square"></div>
            <div class="color-square top-row" id="yellow-square"></div>
            <div class="color-square top-row" id="green-square"></div>
            <div class="color-square" id="blue-square"></div>
            <div class="color-square" id="purple-square"></div>
            <div class="color-square" id="pink-square"></div>
            <div class="color-square" id="white-square"></div>
        </div>
    </div>

<!-- Disabled Div -->


<!--
  ===========================

    Header

  ===========================
-->

    <div class="header">
     <img id="logo" src="Logo.png" alt="Bright Light">
     <img id="lightsOff" src="light.png" alt="Bright Light light bulb">
    </div>

<!--
  ===========================

    Stripe

  ===========================
-->
    <div id="stripe">
        <button id="color">Choose Color</button>
        <button id="color-preview">&nbsp;</button>
        <button id="paint-brush" class="selected mode">Paint</button>
        <button id="erase" class="mode">Erase</button>
        <button id="turnOn">Light</button>
        <button id="clear">Clear</button>
        <button id="resize">Resize</button>
        <button id="fullscreen" class="coming-soon">Fullscreen<span class="tooltiptext">Coming Soon</span></button>
        <button id="reset">Reset</button>
    </div>

<!--
  ===========================

    Pixel Canvas

  ===========================
-->

     <table id="pixelCanvas"></table>


    <script src="designs.js"></script>
</body>
</html>