forked from replit-archive/repl.it
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
222 lines (205 loc) · 12.9 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
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
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Product">
<head>
<title>repl.it</title>
<!-- Session Fallback Redirect -->
<script>
(function () {
var loc = window.location,
session_path = loc.hash.split(':')[0].slice(1);
if (session_path) {
window.location.href = loc.protocol + '//' + loc.host + '/' + session_path;
}
})();
</script>
<!-- Icons -->
<link rel="shortcut icon" href="/images/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png" type="image/png" />
<!-- Scripts -->
<link type="text/css" rel="stylesheet" href="/css/style.css?{{CACHE_BUSTER}}" />
<!-- Application -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!--BAKED
<script src="/jsrepl/jsrepl.js?{{CACHE_BUSTER}}" id="jsrepl-script"></script>
<script src="/repl.it.js?{{CACHE_BUSTER}}"></script>
UNBAKED-->
<!-- jsREPL -->
<script src="/jsrepl/repl.js?{{CACHE_BUSTER}}" id="jsrepl-script"></script>
<script src="/jsrepl/languages.js?{{CACHE_BUSTER}}"></script>
<!-- repl.it -->
<script src="/lib/jqconsole-2.6.min.js?{{CACHE_BUSTER}}"></script>
<script src="/base.js?{{CACHE_BUSTER}}"></script>
<script src="/browser-check.js?{{CACHE_BUSTER}}"></script>
<script src="/hash.js?{{CACHE_BUSTER}}"></script>
<script src="/dom.js?{{CACHE_BUSTER}}"></script>
<script src="/repl.js?{{CACHE_BUSTER}}"></script>
<script src="/pager.js?{{CACHE_BUSTER}}"></script>
<script src="/session.js?{{CACHE_BUSTER}}"></script>
<script src="/languages.js?{{CACHE_BUSTER}}"></script>
<script src="/analytics.js?{{CACHE_BUSTER}}"></script>
<!--/UNBAKED-->
<script src="/lib/ace/ace.js"></script>
<!-- Session -->
<script>try{ {{SESSION_PLACEHOLDER}} } catch(e) {}</script>
<!-- Facebook -->
<meta property="og:title" content="repl.it" />
<meta property="og:description" content="Run code in a variety of languages from your browser!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://repl.it/" />
<meta property="og:image" content="http://repl.it/images/logo-small.png" />
<meta property="og:site_name" content="repl.it" />
<meta property="fb:app_id" content="111098168994577" />
<!-- G+ -->
<meta itemprop="name" content="repl.it" />
<meta itemprop="description" content="Run code in a variety of languages from your browser!" />
<meta itemprop="image" content="http://repl.it/images/logo-small.png" />
<!-- Mobiles -->
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1">
</head>
<body>
<div id="header">
<a id="logo" href="/"><img src="/images/logo-small.png" width="173" height="60" /></a>
<div id="buttons">
<!-- Warning: inline elements, any white space would break the layout -->
<div id="button-languages" class="button left"><div class="tooltip">Languages</div></div><div id="button-examples" class="button middle"><div class="tooltip">Examples</div></div><div id="button-save" class="button middle"><div class="tooltip">Save</div></div><div id="button-help" class="button right"><div class="tooltip">Help</div></div>
</div>
<div id="title"></div>
</div>
<div id="main">
<div id="resize-left"></div>
<!-- Main wokspace area with editor and console. -->
<div id="content-workspace" class="page">
<div id="editor">
<div id="editor-run" class="button"></div>
<div id="editor-widget"></div>
<div id="unhide-left"></div>
</div>
<div id="resize-center"></div>
<div id="console">
<div id="replay-button" class="button">Run Session</div>
<div id="progress"><div id="progress-fill"></div></div>
<div id="unhide-right"></div>
</div>
</div>
<!-- Language selector. -->
<!-- NOTE: tabindex needed for it to receive focus. -->
<div id="content-languages" class="page" tabindex="0">
<div id="languages-back" class="page-close"></div>
</div>
<!-- Examples page. -->
<div id="content-examples" class="page">
<div id="examples-editor"></div>
<div id="examples-separator"></div>
<div id="examples-console"></div>
<div id="examples-back" class="page-close"></div>
</div>
<!-- Help page. -->
<div id="content-help" class="page">
<div id="help-faq">
<div id="help-header">Frequently Asked Questions</div>
<div class="faq-question">What is repl.it?</div>
<div class="faq-answer">It is an online environment for interactively exploring programming languages. The name comes from the <a href="http://en.wikipedia.org/wiki/REPL">read-eval-print loop</a>, the interactive toplevel used by languages like Lisp and Python.</div>
<div class="faq-question">How do I start?</div>
<div class="faq-answer">Once you have selected a language, start by typing an expression into the console on the right side of the screen and pressing Enter. Your expression will be evaluated in the selected language and its result will be printed. Repeat until satisfied. You can also try some ready-to-run examples by clicking on the button labeled "eg".</div>
<div class="faq-question">Can I use variables or other state?</div>
<div class="faq-answer">Yes! The repl.it interpreters fully support variables, state and side effects in all the supported languages.</div>
<div class="faq-question">Can I save my session?</div>
<div class="faq-answer">Yes! You can save your session and share it with others by clicking on the chain link icon in the top right corner. Both the editor's content and the REPL session will be preserved and can be executed once again using the created link to continue from where you left off.</div>
<div class="faq-question">Is repl.it open source?</div>
<div class="faq-answer">Yes! You can explore the code and contribute to various parts of repl.it through <a href="https://github.com/replit">our GitHub repositories</a>.</div>
<div class="faq-question">Can I use repl.it on my phone or tablet?</div>
<div class="faq-answer">Yes! As a web application, repl.it can be used on any device that has a modern web browser. Currently, we have full support for Android devices, and partial support for iOS (Ruby and Python are still not supported on iOS).</div>
<div class="faq-question">How does repl.it work?</div>
<div class="faq-answer">All code processed by repl.it runs entirely on your computer, with no server-side evaluation. It uses language interpreters written in JavaScript to execute your code and keep track of state. Some of the interpreters (like BiwaScheme) are originally implemented in JavaScript, while others (like Python) were compiled from their original lower-level implementations using <a href="http://emscripten.org/">Emscripten</a>.</div>
</div>
<div id="help-shortcuts">
<div id="help-header">Console Shortcuts</div>
<div id="help-shortcuts-content">
<div class="shortcut"><kbd>Enter</kbd></div> Evaluate the entered command.<br />
<div class="shortcut"><kbd>Shift<em>+</em>Enter</kbd></div> Continue to the next line.<br />
<div class="shortcut"><kbd>Tab</kbd></div> Indent.<br />
<div class="shortcut"><kbd>Shift<em>+</em>Tab</kbd></div> Unindent.<br />
<div class="shortcut"><kbd>Up</kbd></div> Previous history item.<br />
<div class="shortcut"><kbd>Down</kbd></div> Next history item.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>Up</kbd></div> Move to the line above the cursor.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>Down</kbd></div> Move to the line below the cursor.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>E</kbd></div> Move to the end of the current line.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>A</kbd></div> Move to the start of the current line.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>Z</kbd></div> Cancel current prompt.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>L</kbd></div> Open languages selector.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>G</kbd></div> Open examples preview.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>H</kbd></div> Open this help page.<br />
<div class="shortcut"><kbd>Ctrl<em>+</em>S</kbd></div> Save session (new revision).<br />
<div class="shortcut"><kbd>Escape</kbd></div> Close current view.<br />
</div>
</div>
<div id="help-back" class="page-close"></div>
</div>
<!-- About page. -->
<div id="content-about" class="page">
<p>The repl.it project is an attempt to create an online environment for interactively exploring programming languages. It provides a fully-featured terminal emulator and code editor, powered by interpreter engines for more than 15 languages.</p>
<p>All our interpreters are written in (or compiled to) JavaScript, and run completely on the user's device, regardless or whether it's a desktop, laptop or phone.</p>
<p>The repl.it code is open source and is available on <a href="https://github.com/replit">GitHub</a>.</p>
<p> </p>
<p><a href="https://twitter.com/amjad_masad"><img src="/images/amjad.jpg" /></a><a href="https://twitter.com/amjad_masad">Amjad Masad</a> is a programmer at <a href="http://codecademy.com">Codecademy</a> and a JavaScript fanatic. He usually does frontend development, but is also known to dabble in server stuff. He drives fast cars and likes good food.</p>
<p><a href="http://max99x.com/"><img src="/images/max.jpg" /></a><a href="http://max99x.com/">Max Shawabkeh</a> is a software engineer at Google and a Python enthusiast. He fancies himself a jack of many programming trades but a master of none. He reads fantasy books and likes good food.</p>
<p> </p>
<p>This application is a result of their sushi-powered collaboration.</p>
<div id="about-back" class="page-close"></div>
</div>
<div id="resize-right"></div>
</div>
<!-- Browser fallback page. -->
<div id="content-fallback">
<div id="fallback-header">Browser Version Not Supported</div>
<div id="fallback-content">
Due to repl.it's reliance on advanced JavaScript techniques, older browsers might have problems running it correctly. Please download the latest version of your favourite browser.
<br />
<a href="http://www.google.com/chrome" id="browser-chrome">Chrome 13+</a>
<a href="http://www.mozilla.org/firefox/" id="browser-firefox">Firefox 3.6+</a>
<a href="http://www.opera.com/download/" id="browser-opera">Opera 11.51+</a>
<br />
<a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" id="browser-ie">IE 9+</a>
<a href="http://www.apple.com/safari/download/" id="browser-safari">Safari 5+</a>
<div id="fallback-ignore">Let me try anyway!</div>
</div>
</div>
<!-- Session save box. -->
<div id="save-box">
<div id="save-box-handle"></div>
<label for="save-box-link">Share on:</label>
<ul class="share-list">
<li class="share-social facebook"><a href="#"></a></li>
<li class="share-social twitter"><a href="#"></a></li>
<li class="share-social gplus"><a href="#"></a></li>
</ul>
<input id="save-box-link" type="text" value="" />
<label>Download:</label>
<ul class="downloads">
<li><a class="editor" href="#">Editor content</a></li>
<li><a class="repl" href="#">REPL session</a></li>
</ul>
</div>
<div id="footer">
<div id="social">
<div id="social-buttons-container">
<div class="social_button" type="facebook">
<div id="fb-root"></div><fb:like href="http://repl.it" send="false" layout="button_count" width="100" show_faces="false" font="verdana"></fb:like>
</div>
<div class="social_button" type="twitter">
<a href="http://twitter.com/share" data-via="replit" data-text="Run code in a variety of languages from your browser!" data-url="http://repl.it" class="twitter-share-button">Tweet</a>
</div>
<div class="social_button" type="gplus">
<g:plusone size="medium"></g:plusone>
</div>
</div>
</div>
<div id="links">
<a href="#" id="link-about">about us</a>
<a href="https://github.com/replit" id="link-source-code" target="_blank">source code</a>
<a href="/" id="language-about-link" target="_blank"> </a>
<a href="/" id="language-engine-link" target="_blank"> </a>
</div>
</div>
</body>
</html>