-
Notifications
You must be signed in to change notification settings - Fork 105
Expand file tree
/
Copy pathwelcome.html
More file actions
386 lines (378 loc) · 14.2 KB
/
Copy pathwelcome.html
File metadata and controls
386 lines (378 loc) · 14.2 KB
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!doctype html>
<html>
<head>
<title>Pencil Code</title>
<meta name="description" content="Pencil is a collaborative programming site for drawing art, playing music, and creating games. Pencil is also a place to experiment with mathematical functions, geometry, graphing, webpages, simulations, and algorithms. Programs are open for all to see and copy.">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400|Source+Code+Pro:400,700">
<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/welcome.css">
<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/font-awesome.css">
<link rel="icon" sizes="192x192" href="//<!--#echo var="site"-->/apple-touch-icon.png">
<link rel="shortcut icon" sizes="16x16" href="//<!--#echo var="site"-->/favicon.ico" />
<style>
</style>
<body>
<div id="overlay">
<div class="about" id="intro">
<h1 style="margin-top:0">About Pencil Code</h1>
<p>Pencil Code is a collaborative programming site for drawing
art, playing music, and creating games. It is also
a place to experiment with mathematical functions, geometry,
graphing, webpages, simulations, and algorithms. Programs are
open for all to see and copy.
<p><a target="_blank"
href="//www.youtube.com/watch?v=JJzFD4EdeuY"
data-vimeo="79743491"
>Watch a video overview</a> or
<a href="//www.youtube.com/watch?v=edN07wcbj2w"
data-vimeo="79743492" target="_blank"
>watch a video tutorial</a>.
</p>
<div id="video"></div>
<p>The main language is Coffeescript. Professional software engineers
use Coffeescript to build complex websites, but Coffeescript code can
also be very simple.
<p>Pencil Code can also be used to explore and learn Javascript, HTML,
and CSS: when you are ready, just find the "gear" button to adjust languages.
<p>Programs preload the pencilcode library to use
turtle graphics functions.
Pencil Code is all <a href="/license.html" target="_blank">open source</a>.
Hang out on the <a href="/group" target="_blank">Pencil Code
discussion forum</a> or check out
<a href="//pencilcode.net/material/reference.pdf" target="_blank"
>the quick reference</a>
or
<a href="//guide.pencilcode.net/" target="_blank">the online guide</a>
to find out more. There is also an illustrated
<a href="//pencilcode.net/book" target="_blank">Pencil Code book</a> with more than 100 small projects.
<p>Anybody can save programs and web pages, but read the
<a href="/terms.html" target="_blank">Terms of Service</a> and the
<a href="/privacy.html" target="_blank">Privacy Policy</a> first.
Two rules:
<p><u>Be Nice.</u> Do not mess up other peoples' work.
<strong>Do not post content that detracts from education on the site.</strong>
This a learning space that is not locked down
(for example, passwords are optional). So feel free to explore, create,
and link, but also please be considerate.
<p><u>Be Careful.</u> Do not depend on Pencil Code to keep your data safe.
Data posted here is public, and data is not secured from loss.
<strong>Do not post private or personally identifiable
information.</strong> Passwords on Pencil Code
do not prevent malicious interference.
<p class="bottomnote"
><a href="/team.html">The Pencil Code Foundation</a>
is devoted to advancing computer
science education by making programming as simple and as
universal as using a pencil.
Contribute to the development of Pencil Code at
<a href="http://dev.pencilcode.net/" target="_blank"
>dev.pencilcode.net</a> or
<a href="https://github.com/PencilCode">github</a>.
—
<a href="mailto:info@pencilcode.net" target="_top"
>info@pencilcode.net</a>.
</div>
<div class="loginblock">
<label class="toggler">
<span id=msg></span> <i class="fa fa-sign-in loginicon"></i> Login</ul></label>
<label>Name: <input id=user></label>
<label>Password: <input type=password id=pass></label>
<label><button id=login disabled>Login <span id=asuser></span></button></label>
</div>
</div>
<!-- end of overlay -->
<div class="container shadowcard">
<div class="row">
<div class="col-xs-6 vpadding">
<!-- branding -->
<a class="pclogo pull-left aboutlink" href="#about"><div class="pctext"><div class="pcline1">Pencil</div><div class="pcline2">Code</div></div><img src="/image/vpencil-20-64.png"></a>
</div>
<div class="col-xs-6 vpadding">
<!-- login bar -->
<ul class="pull-right list-inline"><li class="btn btn-clear" id="newaccount"><i class="fa fa-star newicon"></i> New Account<li class="btn btn-clear" style="opacity:0" id="showlogin"><i class="fa fa-sign-in loginicon"></i> Login</ul>
</div>
</div>
<!--# include file="promoline.html" -->
<!-- splash row -->
<div class="row topline">
<div class="col-sm-6 vpadding">
<h1 style="font-size:48px;margin:42px 0 10px;text-align:center;text-shadow:0 0 8px white;"><nobr>Dream it.</nobr> <nobr>Code it.</nobr></h1>
<p>Learn professional programming languages using
an editor that lets you work in either blocks or text.
Create art, music, games, and stories. Or
invent a program that will change the world.
<p style="text-align:center"><a class="btn btn-primary" style="font-size:133%" href="/edit/first">Let's play!</a>
</div>
<div class="col-sm-6 vpadding">
<iframe id="demo" style="min-height:300px;height:100%;width:100%;border:0"></iframe>
</div>
</div>
<div class="row topline">
<div class="col-sm-3 col-xs-6 vpadding text-center">
<h3><a href="//gym.pencilcode.net/draw/" class="nofeedback"><img src="/image/art.png" style="height:74px"><br>Draw</a></h3>
<p><a href="//gym.pencilcode.net/draw/" class="btn btn-default" style="white-space:normal">Create art</a>
</div>
<div class="col-sm-3 col-xs-6 vpadding text-center">
<h3><a href="//gym.pencilcode.net/jam/" class="nofeedback"><img src="/image/music.png" style="height:74px"
title="Image credit: http://www.clker.com/clipart-334772.html"><br>Jam</a></h3>
<p><a href="//gym.pencilcode.net/jam/" class="btn btn-default" style="white-space:normal">Make music</a>
</div>
<div class="col-sm-3 col-xs-6 vpadding text-center">
<h3><a href="//gym.pencilcode.net/imagine/" class="nofeedback"><img src="/image/adventure.png" style="height:74px"
title="Image credit: http://jumpfer-stock.deviantart.com/art/Steam-Dragon-01-PNG-Stock-415712374"
><br>Imagine</a></h3>
<p><a href="//gym.pencilcode.net/imagine/" class="btn btn-default" style="white-space:normal">Code an adventure</a>
</div>
<div class="col-sm-3 col-xs-6 vpadding text-center">
<h2 style="padding:20px 0 0"><a class="nofeedback" title="Start from a blank program" href="/edit/myprogram">Get Creative</a></h2>
<p>Get some ideas for <a href="//gym.pencilcode.net/draw/">art</a>,
<a href="//gym.pencilcode.net/jam/">music</a>, or
<a href="//gym.pencilcode.net/imagine/">games</a>. Or to code
anything, <a href="/edit/myprogram">start on a blank page</a>.
</div>
</div>
<div class="row topline">
<div class="col-sm-12 vpadding text-center">
<h2 style="padding:10px 0">Resources</h2>
<ul class="list-inline spaced">
<li><a class="aboutlink" href="#about">About Pencil Code</a>
<li><a href="//guide.pencilcode.net/">Material for Teachers</a>
<li><a href="//manual.pencilcode.net/">Teaching Manual</a>
<li><a href="//book.pencilcode.net/">Pencil Code Book</a>
</ul>
<ul class="list-inline spaced">
<li><a href="/edit/untitled">Open Blank Editor</a>
<li><a href="//share.pencilcode.net/">Shared Student Projects</a>
<li><a href="/home/">Browse All Users</a>
</ul>
<ul class="list-inline spaced">
<li><a href="//activity.pencilcode.net/">Printable Activities</a>
<li><a href="//blog.pencilcode.net/">Pencil Code Blog</a>
<li><a href="/team.html">Who We Are</a>
</ul>
</div>
</div>
<div class="row topline">
<div class="col-sm-12 vpadding text-center">
<p>Pencil Code supports CoffeeScript, Javascript, CSS, and HTML.
<p>Everything posted on Pencil Code is public and free to view, share,
and copy.
</div>
</div>
</div>
</body>
<script src="/lib/jquery.js"></script>
<script src="/lib/jquery.autocomplete.min.js"></script>
<script src="/lib/seedrandom.js"></script>
<script>
$(function() {
(function() {
var usernames = {};
$('#showlogin').css('opacity', 1);
$('#user').on('change', validateUser);
$('#user').autocomplete({
autoSelectFirst: true,
triggerSelectOnValidInput: false,
serviceUrl: '/load/',
paramName: 'prefix',
preventBadQueries: false, // To allow exact-match probing.
params: { count: 12 },
transformResult: function(response) {
response = JSON.parse(response);
return {
suggestions: response.list.filter(function(item) {
return item.mode.indexOf('d') >= 0;
}).map(function(item) {
usernames[item.name] = true;
return { value: item.name }
})
};
},
forceFixPosition: true,
onSelect: function() { validateUser(); setTimeout(function() {
if (!document.activeElement ||
!$(document.activeElement).closest('.loginblock').length) {
$('#pass').select().focus();
}
}, 0)}
});
function validateUser(e) {
var user = $('#user').val().toLowerCase().trim();
var found = usernames.hasOwnProperty(user);
$('#asuser').text(found ? ' as ' + user : '');
$('#login').prop('disabled', !found);
return true;
};
function keyFromPassword(username, p) {
if (!p) { return ''; }
if (/^[0-9]{3}$/.test(p)) { return p; }
var key = '';
var prng = new Math.seedrandom('turtlebits:' + username + ':' + p + '.');
for (var j = 0; j < 3; j++) {
key += Math.floor(prng() * 10);
}
return key;
}
$('#login').on('click', tryLogin);
$('#pass,#user').on('keyup', function(e) {
$('#msg').text('');
if (e.which == 13) {
if ($(this).attr('id') == 'user') {
$('#pass').focus();
} else {
tryLogin();
}
}
});
function tryLogin() {
var user = $('#user').val().toLowerCase().trim();
if (!user) return;
$('#msg').text('Logging in...');
var key = keyFromPassword(user, $('#pass').val());
$.getJSON('//' + user + '.' + location.hostname +
'/save/?mode=setkey&key=' + key + '&data=' + key).done(function(resp) {
if (resp.keyset) {
window.location =
'//' + user + '.' + location.hostname +
'/edit/#login=' + user + ':' + (key ? key : '');
} else {
$('#pass').select().focus();
$('#msg').text('Wrong password.');
}
}).fail(function() {
$('#msg').text('Network error.');
});
}
})();
// Demo Animation
var index = 0;
var count = 3;
var sleeptime = +(new Date) + 100 * 1000;
function motion() {
sleeptime = Math.max(sleeptime, +(new Date) + 30 * 1000);
}
function advance() {
if (+(new Date) > sleeptime || $('#overlay').is(':visible')) return;
document.getElementById('demo').src =
"//promo.pencilcode.net/home/promo" + (index++);
if (index >= count) { index = 0; }
}
// Now start the animation and things.
advance();
setInterval(advance, 26000);
window.addEventListener('mousemove', motion);
window.addEventListener('touchstart', motion);
// New account link
$('#newaccount').on('click', function() {
window.location = '/edit/intro#new';
});
$('#showlogin').on('click', function() {
if ($(this).css('opacity') == 0) return;
$('#overlay,.loginblock').show();
var ofs = $('#showlogin').offset();
$('.loginblock').css({
top: ofs.top - 8 + 1,
right: $(document).width() - (ofs.left + $('#showlogin').outerWidth()) - 8
});
$('#user').focus();
});
$('a.aboutlink').click(function() {
location.hash = '#about';
$('#overlay,.about').show();
return false;
});
function closeoverlay() {
$('#video').html('');
$('#overlay,.about,.loginblock').hide();
if (location.hash.length > 1) {
if (window.history.pushState) {
window.history.pushState(null, null, window.location.pathname);
} else {
location.hash = '';
}
}
}
$('#overlay').click(function(e) {
if (e.target == this || $(e.target).is('.loginblock .toggler')) {
closeoverlay();
}
});
$('#overlay').keydown(function(e) {
if (e.which == 27) {
closeoverlay();
}
});
$(window).on('hashchange load', function() {
if (/\babout\b/.test(location.hash)) {
$('#overlay,.about').show();
} else {
$('#overlay,.about,.loginblock').hide();
}
});
// Video clicking setup
// Detect if youtube is blocked.
var ytpresent = true;
var ytprobe = new Image();
ytprobe.onerror = function(){
ytpresent = false;
};
ytprobe.src = "//youtube.com/favicon.ico?r=" + Math.random();
$('a[data-vimeo]').click(function(e) {
if (ytpresent) {
var href = $(this).attr('href');
var match = /youtube.com.*v=([^&">]*)/.exec(href);
if (match && match[1]) {
if ($('#video iframe').attr('src') &&
$('#video iframe').attr('src').indexOf(match[1]) >= 0) {
$('#video').html('');
return false;
} else {
$('#video').html(
'<iframe type="text/html" width="640" height="390" ' +
'src="//www.youtube.com/embed/' + match[1] +
'?autoplay=1&origin=' +
location.protocol + '//' + location.host + '" ' +
'frameborder="0"></iframe>');
return false;
}
}
} else {
var vimeo = $(this).data('vimeo');
if (vimeo) {
if ($('#video iframe').attr('src') &&
$('#video iframe').attr('src').indexOf(vimeo) >= 0) {
$('#video').html('');
return false;
} else {
$('#video').html(
'<iframe type="text/html" width="640" height="390" ' +
'src="//player.vimeo.com/video/' + vimeo +
'?autoplay=1" ' +
'frameborder="0"></iframe>');
return false;
}
}
}
return true;
});
function preload(urls) {
for (var i = 0; i < urls.length; ++i) {
var o = new Image();
o.src = urls[i];
}
}
window.pencilcode = {domain: location.hostname};
setTimeout(function() {
preload(['/editor.js', '/editor.css', '/folder_32.png', '/droplet.css',
'/lib/ace/ace.js', '/lib/ace/mode-coffee.js',
'/lib/ace/theme-chrome.js', ]);
}, 700);
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45359764-1', window.pencilcode.domain);
ga('send', 'pageview');
});
</script>
</html>