-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
397 lines (248 loc) · 17 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
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
387
388
389
390
391
392
393
394
395
396
397
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/jquery.fullPage.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<title> Coda - Panic Inc </title>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="favicons/manifest.json">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#9bff1b">
<link rel="shortcut icon" href="favicons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="Coda">
<meta name="application-name" content="Coda">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="favicons/mstile-144x144.png">
<meta name="msapplication-config" content="favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<noscript>This site requires JavaScript!</noscript>
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://panic.com"><img alt="Panic" src="svg/panic.svg" class="svg"></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" id="ib1"></span>
<span class="icon-bar" id="ib2"></span>
<span class="icon-bar" id="ib3"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#secondPage" class="nav-a">Features</a></li>
<li><a href="#thirdPage" class="nav-a">About</a></li>
<li><a href="#fourthPage" class="nav-a">FAQ</a></li>
<li><a href="https://library.panic.com" class="nav-a">Support</a></li>
<li><a href="#" id="buy-now">Buy now</a></li>
</ul>
</div>
</div>
</nav>
<!-- Main content -->
<div id="fullpage">
<!-- Section 1 -->
<div class="section" id="section-1">
<div class="background" id="sec1-bg"></div>
<div class="content">
<img src="svg/coda.svg" class="img-responsive center-block" id="coda-icon" alt="Coda" />
<h2 class="cnt1-h2 text-center"> You code for the web. You demand a fast, clean, and powerful text editor. Pixel-perfect preview. A built-in way to open and manage your local and remote files. And maybe a dash of SSH. Say hello, Coda. </h2>
<a class="cnt1-a center-block" href="#secondPage" style="text-decoration: none;"><h1 class="text-center">Learn more</h1>
<img src="svg/arrow.svg" class="svg img-responsive center-block" id="arrow" alt="Arrow" /></a>
</div>
</div>
<!-- Section 2 -->
<div class="section" id="section-2">
<div class="background" id="sec2-bg"></div>
<div class="content container" id="sec2-cont">
<h1 class="text-center center-block" id="features-h1"> Features </h1>
<div class="row">
<!-- Speed -->
<div id="speed" class="col-xs-6 col-sm-3">
<img src="svg/speed.svg" class="img-responsive center-block info-img" id="speed-img" alt="Speed" />
<h3 id="speed-h3" class="text-center info-h3"> Speed </h3>
<p id="speed-p" class="text-center info-p"> Syntax highlighting is anywhere from 4 to 10 times faster. Symbol parsing is 10 times faster. It’s real zippier. </p>
</div>
<!-- Editor -->
<div id="editor" class="col-xs-6 col-sm-3">
<img src="svg/editor.svg" class="img-responsive center-block info-img" id="editor-img" alt="Editor" />
<h3 id="editor-h3" class="text-center info-h3"> Editor </h3>
<p id="editor-p" class="text-center info-p"> Vertical indentation guides. Customizable column guide. Color-coded traditional or visual tabs. </p>
</div>
<!-- Indexer -->
<div id="indexer" class="col-xs-6 col-sm-3">
<img src="svg/indexer.svg" class="img-responsive center-block info-img" id="indexer-img" alt="Indexer" />
<h3 id="indexer-h3" class="text-center info-h3"> Local Indexer </h3>
<p id="indexer-p" class="text-center info-p"> It’s here. Site-wide autocomplete of your functions, classes, and variables, all indexed from your local files. </p>
</div>
<!-- Plugins -->
<div id="plugins" class="col-xs-6 col-sm-3">
<img src="svg/plugins.svg" class="img-responsive center-block info-img" id="plugins-img" alt="Plugins" />
<h3 id="plugins-h3" class="text-center info-h3"> Plug-ins </h3>
<p id="plugins-p" class="text-center info-p"> Manage your existing plugins, and discover new and exciting ones, via Coda’s preferences. </p>
</div>
</div>
<div class="row">
<!-- Override -->
<div id="override" class="col-xs-6 col-sm-3">
<img src="svg/cssoverride.svg" class="img-responsive center-block info-img" id="override-img" alt="Override" />
<h3 id="override-h3" class="text-center info-h3"> CSS Override </h3>
<p id="override-p" class="text-center info-p"> Easily override and edit a site’s CSS, live, right within Coda’s Preview. </p>
</div>
<!-- Publisher -->
<div id="publisher" class="col-xs-6 col-sm-3">
<img src="svg/publisher.svg" class="img-responsive center-block info-img" id="publisher-img" alt="Publisher" />
<h3 id="publisher-h3" class="text-center info-h3"> Publisher </h3>
<p id="publisher-p" class="text-center info-p"> Coda can now track and publish files modified outside of Coda. Plus a handy “Save and Publish” shortcut. </p>
</div>
<!-- FTP -->
<div id="ftp" class="col-xs-6 col-sm-3">
<img src="svg/ftp.svg" class="img-responsive center-block info-img" id="ftp-img" alt="FTP" />
<h3 id="ftp-h3" class="text-center info-h3"> FTP </h3>
<p id="ftp-p" class="text-center info-p"> Coda features an powerful FTP client with support for both FTP and SFTP protocols. </p>
</div>
<!-- Sync -->
<div id="sync" class="col-xs-6 col-sm-3">
<img src="svg/sync.svg" class="img-responsive center-block info-img" id="sync-img" alt="Sync" />
<h3 id="sync-h3" class="text-center info-h3"> Panic Sync </h3>
<p id="sync-p" class="text-center info-p"> Sync your sites, passwords, and private keys to all of your Macs and more. It's free, easy, and extremely secure. </p>
</div>
</div>
</div>
</div>
<!-- Section 3 -->
<div class="section" id="section-3">
<div class="background" id="sec3-bg"></div>
<section class="content" id="content2">
<h2 id="sec3-h2" class="center-block">What is Coda?</h2>
<!-- First slide -->
<div class="col-xs-12 col-md-4 col-lg-4 sec3-p" id="P1">
<p>Good question. <em>Coda is everything you need to hand-code a website, in one beautiful app.</em></p>
<p>While the pitch is simple, building <strong>Coda</strong> was anything but. How do you elegantly wrap everything together? Well, we did it. And today, Coda has grown to be a critical tool for legions of web developers around the world.</p>
<p><em>More than anything else, Coda is a text editor</em>. It’s got everything you expect: syntax highlighting for tons of languages. Code folding. Project-wide autocomplete. Fast find and replace. Indentation guides. Automatic tag closing. Fast commenting and shifting of code. The works. <em>But Coda’s editor has features you won’t find anywhere else.</em> For example, the Find and Replace has this revolutionary "Wildcard" token that makes RegEx one-button simple. And as you type, Coda Pops let you quickly create colors, gradients, and more, using easy controls. There are nice touches everywhere.</p>
</div>
<!-- Second slide -->
<div class="col-xs-12 col-md-4 col-lg-4 sec3-p" id="P2">
<p>But an incredible text editor is just a nice typewriter if you can’t easily handle all of your files — from anywhere. <em>Coda has battle-tested, deeply integrated file management.</em> Open local files or edit remotely on FTP, SFTP, WebDAV, or Amazon S3 servers. Use the Files tab and move, rename, copy, transfer from server-to-server... anything. Track local changes for remote publishing. There’s even support for Git and Subversion.</p>
<p>Then you’ll want to see what your code looks like. <em>Use our WebKit Preview, which includes a web inspector, debugger, and profiler.</em> Then, on top of that, we added AirPreview, a revolutionary feature that lets you use your iPad and iPhone with Coda for iOS to Preview pages as you code on your desktop.</p>
</div>
<!-- Third slide -->
<div class="col-xs-12 col-md-4 col-lg-4 sec3-p" id="P3">
<p>Believe it or not, we’ve just scratched the surface. <em>Open Coda’s Sidebar to discover a rich set of utilities that make you work better.</em> Like Clips, which let you create frequently used bits of text that you can insert into your document with special triggers. And project-wide Find and Replace that’ll work across multiple files. There’s also an HTML Validator, a Code Navigator, and more.</p>
<p>Finally, hiding behind the Plus button in the tab bar is a <em>built-in Terminal and MySQL editor</em>, two amazingly powerful Tab Tools. The Terminal can open a local shell or SSH. MySQL lets you define structure, edit data, and more.</p>
<p><em>And it’s all wrapped up in our Sites, which get you started quickly</em>. Opening a Site sets your file paths, your root URLs, where your files Publish to, source control settings, and more. And with Panic Sync, our free and secure sync service, your sites follow you on any computer.</p>
<p><em>Coda is a very good app.</em></p>
</div>
</section>
</div>
<!-- Section 4 -->
<div class="section" id="section-4">
<div class="background" id="sec4-bg"></div>
<section id="sec4-content" class="content">
<h2 id="sec4-h2" class="center-block">FAQ</h2>
<!-- First slide -->
<div class="col-xs-12 col-md-4 col-lg-4 sec4-faq">
<h3>Is Coda 2.5 a free upgrade?</h3>
<p>Yes. Coda 2.5 is free for all Coda 2 owners, to whom we say thanks.</p>
<h3>Help, I lost my serial number!</h3>
<p>Not a problem! You can <a href="https://www.panic.com/#support_serial">look it up</a>. If you no longer have access to the email address you used to purchase, <a href="#email">email us</a> and we'll look it up for you.</p>
<h3>What about Mac App Store customers?</h3>
<p>Coda 2.5 is only available directly from Panic. But don’t worry, we’re migrating Mac App Store customers for free.</p>
<p>First, <em>make sure you've got the latest</em> from the App Store — <em>Coda 2.0.14</em> — and that you have <em>launched the latest version</em> at least once.</p>
<p>Ready? Great! Now simply <a href="https://download.panic.com/coda/Coda-Latest.zip">download Coda 2.5 from us</a>, launch it, and follow the prompts. Provide your email address and we’ll send you a personalized Coda 2 serial you can use to unlock the app now, and in the future.</p>
</div>
<!-- Second slide -->
<div class="col-xs-12 col-md-4 col-lg-4 sec4-faq">
<h3>How do I activate the Local Site Indexer?</h3>
<p>Simply edit your Site, and check the "Automatically index all Site files" box.</p>
<h3>Why does autocomplete seem slower?</h3>
<p>With the new local indexer, trying to fetch an unknown amount of data can be slow for large sites. Rather than let your typing speed suffer or lag, we introduced a 0.1-second delay before showing the autocomplete menu.</p>
<h3>Is there a command line tool I can use?</h3>
<p>Absolutely <a href="https://download.panic.com/coda/Coda%20CLI%201.0.pkg">yes there is</a>.</p>
<h3>How can I make plug-ins?</h3>
<p>You can learn more about extending Coda from the <a href="https://github.com/panicinc/CodaPluginKit">CodaPluginKit</a> repository on GitHub.</p>
<h3>How can I use Subversion for version control?</h3>
<p>Originally, Coda used the <a href="https://subversion.apache.org">Subversion</a> binary that was installed with every copy of Mac OS X. As of Mountain Lion (10.8), Subversion is no longer bundled with OS X, and must be installed manually.</p>
<p style="display: none" id="cont">(cont.)</p>
</div>
<!-- Third slide -->
<div class="col-xs-12 col-md-4 col-lg-4 sec4-faq">
<p id="sli3-p">To install Subversion on OS X 10.9 and later, enter the following command at a <strong>Terminal</strong> prompt:</p>
<pre><code>xcode-select --install</code></pre>
<p>(Using OS X 10.8 or earlier? You can <a href="https://subversion.apache.org">grab an official binary</a> or install <a href="https://itunes.apple.com/app/xcode/id497799835">Xcode</a>)</p>
<h3>How can I use Git for version control?</h3>
<p>If you have Git installed already, simply fill out the <strong>Git Tool Path</strong> setting in the <strong>Files</strong> pane of Coda’s Preferences.</p>
<p>To install git on OS X 10.9 and later, enter the following command at a <strong>Terminal</strong> prompt:</p>
<pre><code>xcode-select --install</code></pre>
<p>(Using OS X 10.8 or earlier? You can <a href="https://git-scm.com/" title="Download Git from git-scm.com">download Git from git-scm.com</a> or install <a href="https://itunes.apple.com/app/xcode/id497799835">Xcode</a>)</p>
</div>
</section>
</div>
</div>
<!-- JS scripts -->
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/config.js"></script>
<!-- Hamburger menu script -->
<script>
$(".navbar-toggle").on("click", function () {
$(this).toggleClass("active");
});
</script>
<!-- Responsive related scripts -->
<script>
if($(document).width() <= 767) {
$(".row").addClass("fp-slide fp-table");
}
if($(document).width() <= 1366) {
$(".sec3-p").addClass("fp-slide fp-table");
$(".sec4-faq").addClass("fp-slide fp-table");
$("#cont").css('display', 'inline-block');
}
</script>
<!-- Custom script to inject SVG code directly into the DOM -->
<script>
// SVG script from http://stackoverflow.com/a/11978996/4394216
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
</script>
</body>
</html>