diff options
| author | Endi S. Dewata <edewata@redhat.com> | 2013-10-30 06:28:19 +0000 |
|---|---|---|
| committer | Endi S. Dewata <edewata@redhat.com> | 2013-10-30 20:49:52 +0000 |
| commit | 02e7b534871ce513f72b0fe038ff824a662cc58b (patch) | |
| tree | 126bcdd45afc8ca804af08247b41e65fa294c79a /index.html | |
| download | cli-demo-02e7b534871ce513f72b0fe038ff824a662cc58b.tar.gz cli-demo-02e7b534871ce513f72b0fe038ff824a662cc58b.tar.xz cli-demo-02e7b534871ce513f72b0fe038ff824a662cc58b.zip | |
Initial commit.
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..628eac4 --- /dev/null +++ b/index.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Terminal Animation</title> + <link href="https://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css" rel="stylesheet" type="text/css" /> + <link href="css/terminal-animation.css" rel="stylesheet" type="text/css" /> + <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> + <script src="http://code.jquery.com/jquery.js"></script> + <script src="js/terminal-animation.js"></script> + <script src="js/init.js"></script> + <style> +body { + font: small sans-serif; +} + </style> +</head> +<body> +<h1>Terminal Animation</h1> + +<h2>Overview</h2> + +This jQuery plugin provides a simple way to create animations of terminal activities for demonstration purposes. + +<h2>Quick Start</h2> + +Execute the actual operations in the terminal: +<pre class="prettyprint" style="width: 700px; margin: 1em 0px;"> +$ ls /usr/lib +anaconda-runtime games locale rpm sendmail.postfix +ConsoleKit gcc python2.6 sendmail yum-plugins +$ ls /var/lib +alternatives dhclient nfs random-seed stateless +authconfig games plymouth rhsm udev +cs logrotate.status polkit-1 rpm up2date +dbus misc postfix rsyslog yum +$ +</pre> + +Copy and paste the content of the terminal into a <div class="terminal-animation"> in an HTML page. Mark the parts that are manually typed with <span class="terminal-animation-input">. + +<pre class="prettyprint" style="width: 700px; margin: 1em 0px;"> +<html> +<head> ... </head> +<body> + +<div class="terminal-animation">$ <span class="terminal-animation-input">ls /usr/lib</span> +anaconda-runtime games locale rpm sendmail.postfix +ConsoleKit gcc python2.6 sendmail yum-plugins +$ <span class="terminal-animation-input">ls /var/lib</span> +alternatives dhclient nfs random-seed stateless +authconfig games plymouth rhsm udev +cs logrotate.status polkit-1 rpm up2date +dbus misc postfix rsyslog yum +$ </div> + +</body> +</html> +</pre> + +Include the JS and CSS files in the header and execute the plugin: + +<pre class="prettyprint" style="width: 700px; margin: 1em 0px;"> +<html> +<head> + <link href="css/terminal-animation.css" rel="stylesheet" type="text/css"/> + <script src="http://code.jquery.com/jquery.js"></script> + <script src="js/terminal-animation.js"></script> + <script> +$(function() { + $(".terminal-animation").terminal_animation(); +}); + </script> +</head> +<body> + ... +</body> +</html> +</pre> + +Result: + +<div class="terminal-animation">$ <span class="terminal-animation-input">ls /usr/lib</span> +anaconda-runtime games locale rpm sendmail.postfix +ConsoleKit gcc python2.6 sendmail yum-plugins +$ <span class="terminal-animation-input">ls /var/lib</span> +alternatives dhclient nfs random-seed stateless +authconfig games plymouth rhsm udev +cs logrotate.status polkit-1 rpm up2date +dbus misc postfix rsyslog yum +$ </div> + +<h2>Examples</h2> + +<ul> +<li><a href="examples/basic.html">Basic example</a></li> +</ul> + +<h2>Repository</h2> +<pre> +git://fedorapeople.org/home/fedora/edewata/public_git/pki.git +</pre> + +</body> +</html> |