-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
151 lines (145 loc) · 5.24 KB
/
index.html
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<html>
<head>
<title>New Tab</title>
<!-- <link rel="stylesheet" href="styles.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="vendor/materialize.min.css">
<link rel="stylesheet" href="interface.css">
<style>
body {
}
main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cell {
border: 0.1px solid #aaa;
background-color: #efefef;
}
#background-image {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: grayscale(100%);
z-index: -1;
display: none;
}
/* For making a perfect square */
/*.cell {
width: 50%;
}
.cell:after {
content: "";
display: block;
padding-bottom: 100%;
}*/
</style>
</head>
<body>
<img id="background-image">
<hgroup>
<h3>Golie Visual</h3>
<p>Powered by ColourLovers</p>
</hgroup>
<button class="menu-toggle">Controls</button>
<header class="z-depth-2">
<nav>
<div class="tracking-controls">
<div class="controls-container">
<a href="#" id="previous-color">
<i class="material-icons waves-effect">skip_previous</i>
</a>
<p class="select-text">Select</p> <p> Colors</p>
<a href="#" id="next-color">
<i class="material-icons waves-effect">skip_next</i>
</a>
</div>
<div class="controls-container" id="pattern-select-container">
<a href="#" id="previous-pattern" class="disabled">
<i class="material-icons waves-effect">skip_previous</i>
</a>
<p class="select-text">Select</p> <p> Pattern</p>
<a href="#" id="next-pattern">
<i class="material-icons waves-effect">skip_next</i>
</a>
</div>
</div>
<div class="checkbox-controls">
<div class="checkbox-container">
<p>
<input type="checkbox" class="filled-in" id="pattern-checkbox" checked="checked" />
<label for="pattern-checkbox">Include Pattern</label>
</p>
</div>
<div class="checkbox-container dimmer-container">
<p>
<input type="checkbox" class="filled-in" id="dimmer-checkbox" />
<label for="dimmer-checkbox">Dim</label>
</p>
</div>
<div class="checkbox-container dimmer-container">
<p>
<input type="checkbox" class="filled-in" id="title-checkbox" />
<label for="title-checkbox">Hide Title</label>
</p>
</div>
</div>
<a id="pause-btn" class="btn-floating btn-large waves-effect red darken-3 z-depth-4">
<i class="material-icons pause-icon">pause</i>
<i class="material-icons play-icon">play_arrow</i>
</a>
<div class="favorite-container">
<a class="btn grey waves-effect" id="favorite-preset-btn">
<i class="material-icons">star</i>
</a>
</div>
</nav>
</header>
<main></main>
</body>
<script src="vendor/jquery-3.1.1.min.js"></script>
<script src="vendor/materialize.min.js"></script>
<script src="vendor/jquery-color.min.js"></script>
<script src="vendor/images-loaded.min.js"></script>
<script src="scripts/star-helper.js"></script>
<script src="scripts/mono-color.js"></script>
<script src="scripts/revitalizer.js"></script>
<script src="scripts/favorites-manager.js"></script>
<script src="scripts/favorites-packager.js"></script>
<script src="scripts/local-storage.js"></script>
<script src="scripts/favorite-button.js"></script>
<script src="scripts/dimmer-checkbox.js"></script>
<script src="scripts/title-checkbox.js"></script>
<script src="scripts/pattern-checkbox.js"></script>
<script src="scripts/pattern-select.js"></script>
<script src="scripts/color-select.js"></script>
<script src="scripts/background-image.js"></script>
<script src="scripts/headings.js"></script>
<script src="scripts/header.js"></script>
<script src="scripts/toggle-menu-button.js"></script>
<script src="scripts/global-styles.js"></script>
<script src="scripts/state-manager.js"></script>
<script src="scripts/pause-button.js"></script>
<script src="scripts/pattern-fetch.js"></script>
<script src="scripts/style-manager.js"></script>
<script src="scripts/color-fetch.js"></script>
<script src="scripts/style-storage.js"></script>
<script src="scripts/runner.js"></script>
<script src="scripts/painter.js"></script>
<script src="scripts/neighbor-calculator.js"></script>
<script src="scripts/life-transformer.js"></script>
<script src="scripts/environment-info.js"></script>
<script src="scripts/game-maker.js"></script>
<script src="scripts/instance-storage.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/injector.js"></script>
<script src="scripts/element-storage.js"></script>
<script src="scripts/grid-maker.js"></script>
<script src="app.js"></script>
</html>