-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·143 lines (127 loc) · 6.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="pixel art, collaborative canvas, public art, whiteboard, nodejs" />
<meta name="description" content="A web based collaborative public pixel canvas" />
<meta name="author" content="Rahul Anand <eternalthinker>" />
<meta name="copyright" content="Apache 2.0" />
<title>PixelPals</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/colorPicker.css">
<link rel="stylesheet" href="css/flat-ui.min.css">
<link rel="stylesheet" href="css/tool-icons.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=VT323' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="js/jquery-1.11.1.min.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/bootstrap.min.js"></script>
<script src="js/flat-ui.min.js"></script>
<script src="js/jquery.colorPicker.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.0.6/firebase.js"></script>
<script src="pixelpals.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=316657775101192&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="main-navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">PixelPals</a>
<p class="navbar-text hidden-sm hidden-xs">A collaborative pixel canvas</p>
<p class="navbar-text visible-sm-inline-block hidden-xs">Collaborative canvas</p>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation-collapse-content">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right" id="main-navigation-collapse-content">
<ul class="nav navbar-nav">
<li><a href="#about">?</a></li>
<li><a href="http://eternalthinker.co/">Home</a></li>
<li><a href="http://github.com/eternalthinker">Github</a></li>
<li><a href="https://github.com/eternalthinker/pixelpals">Source</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<!-- Canvas and info -->
<div class="col-lg-8 col-md-12 col-sm-12">
<div class="row">
<div class="col-xs-12">
<!-- Extra 2px padding in container below, to account for border overlay -->
<div id="canvas-container" class="center-block" style="position:relative; height:602px; width:752px; border:1px dotted #CCCCCC;">
<canvas id="grid" height="600" width="750" style="position:absolute; top:0; left:0; z-index:3;"></canvas>
<canvas id="pixelcanvas" height="600" width="750" style="position:absolute; top:0; left:0; z-index:2;"></canvas>
<canvas id="networkcanvas" height="600" width="750" style="position:absolute; top:0; left:0; z-index:1;"></canvas>
</div>
</div>
</div>
</div>
<!-- End of Canvas and info -->
<!-- Controls and Tools -->
<div class="text-left col-lg-4 col-lg-offset-0 col-md-6 col-md-offset-3 col-xs-8 col-xs-offset-2">
<div class="row">
<div class="col-xs-12" style="margin-top:10px;">
<button type="button" id="pencil" class="tool btn btn-default btn-primary btn-embossed"><span class="icon-pencil"></span></button>
<input id="colorpicker" type="text" name="colorpicker" value="#000000"></input>
<button type="button" id="picker" class="tool btn btn-default btn-primary btn-embossed mll"><span class="icon-picker"></span></button>
<hr/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<label style="margin-top:0px;" class="mrdl">Grid</label>
<input type="checkbox" checked data-toggle="switch" name="default-switch-colors" data-on-color="primary" data-off-color="default" id="grid-switch"/>
<hr/>
</div>
</div>
<div class="row" id="notice">
<div class="col-xs-12">
<p>
Syncing canvas data..<br>
<small>If the canvas stays blank or unresponsive, it could be due to heavy traffic.
If the situation continues for long, Reload the page to attempt a fresh connection.</small>
</p>
</div>
</div> <!-- End of Controls and Tools -->
</div> <!-- END core content row -->
<div class="row"> <!-- About row -->
<div class="col-md-12">
<article id="about">
<section>
<h3>About</h3>
<p>
<em>PixelPals</em> is a public pixel canvas. You can see updates from others in real time. Just draw on! :)<br>
<div class="fb-like" data-href="https://eternalthinker.github.io/pixelpals" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</p>
</section>
</article>
</div>
</div>
<div class="row" style="margin-top:40px">
<div class="col-lg-12">
<p class="text-center"><small><a href="http://eternalthinker.co/"><eternalthinker></a></small></p>
</div>
</div>
</div> <!-- END main container -->
</body>
</html>