Created
October 3, 2022 19:27
-
-
Save krisrice/ed8b9c9a0acf358b5b3a9c2fa856249b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css" integrity="sha512-XgCw4Srl8lC1ECwcaHwAU0WnxQwHkqmInzg9wJLtGB7DRuMaXPuK2k9WJ2AwRDGdrgK9eJpZl2hUlLi2WQssmw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <script | |
| src="https://code.jquery.com/jquery-2.2.4.min.js" | |
| integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" | |
| crossorigin="anonymous"></script> | |
| <script src="https://mattboldt.com/demos/typed-js/js/typed.custom.js"></script> | |
| <script>$( document ).ready(function() { | |
| var data = [ | |
| { | |
| action: 'type', | |
| strings: ["select * from emp;"], | |
| output: `<pre> | |
| +-------+----------+-------------+------+------------+--------------+------+--------+----+ | |
| | EMPNO | ENAME | JOB | MGR | HIREDATE | SAL | COMM | DEPTNO | | | |
| +-------+----------+-------------+------+------------+--------------+------+--------+----+ | |
| | 7369 | "SMITH" | "CLERK" | 7902 | 12/17/1980 | 12:00:00 AM | 800 | | 20 | | |
| | 7499 | "ALLEN" | "SALESMAN" | 7698 | 2/20/1981 | 12:00:00 AM | 1600 | 300 | 30 | | |
| | 7521 | "WARD" | "SALESMAN" | 7698 | 2/22/1981 | 12:00:00 AM | 1250 | 500 | 30 | | |
| | 7566 | "JONES" | "MANAGER" | 7839 | 4/2/1981 | 12:00:00 AM | 2975 | | 20 | | |
| | 7654 | "MARTIN" | "SALESMAN" | 7698 | 9/28/1981 | 12:00:00 AM | 1250 | 1400 | 30 | | |
| | 7698 | "BLAKE" | "MANAGER" | 7839 | 5/1/1981 | 12:00:00 AM | 2850 | | 30 | | |
| | 7782 | "CLARK" | "MANAGER" | 7839 | 6/9/1981 | 12:00:00 AM | 2450 | | 10 | | |
| | 7788 | "SCOTT" | "ANALYST" | 7566 | 12/9/1982 | 12:00:00 AM | 3000 | | 20 | | |
| | 7839 | "KING" | "PRESIDENT" | | 11/17/1981 | 12:00:00 AM | 5000 | | 10 | | |
| | 7844 | "TURNER" | "SALESMAN" | 7698 | 9/8/1981 | 12:00:00 AM | 1500 | 0 | 30 | | |
| | 7876 | "ADAMS" | "CLERK" | 7788 | 1/12/1983 | 12:00:00 AM | 1100 | | 20 | | |
| | 7900 | "JAMES" | "CLERK" | 7698 | 12/3/1981 | 12:00:00 AM | 950 | | 30 | | |
| | 7902 | "FORD" | "ANALYST" | 7566 | 12/3/1981 | 12:00:00 AM | 3000 | | 20 | | |
| | 7934 | "MILLER" | "CLERK" | 7782 | 1/23/1982 | 12:00:00 AM | 1300 | | 10 | | |
| +-------+----------+-------------+------+------------+--------------+------+--------+----+</pre>`, | |
| postDelay: 1000 | |
| }, | |
| { | |
| action: 'type', | |
| strings: ["select * from dept;"], | |
| output: `<pre> | |
| +--------+--------------+-----------+ | |
| | DEPTNO | DNAME | LOC | | |
| +--------+--------------+-----------+ | |
| | 10 | "ASDF1" | "ASDF" | | |
| | 20 | "RESEARCH" | "DALLAS" | | |
| | 30 | "SALES" | "CHICAGO" | | |
| | 40 | "OPERATIONS" | "BOSTON" | | |
| +--------+--------------+-----------+ | |
| </pre> | |
| `, | |
| postDelay: 1000 | |
| }, | |
| { | |
| action: 'type', | |
| //clear: true, | |
| strings: ['select JSON_OBJECT(*) from emp;'], | |
| output: $('.json_object-output').html() | |
| }, | |
| { | |
| action: 'type', | |
| strings: ["that was easy!", ''], | |
| postDelay: 2000 | |
| } | |
| ]; | |
| runScripts(data, 0); | |
| }); | |
| function runScripts(data, pos) { | |
| var prompt = $('.prompt'), | |
| script = data[pos]; | |
| if(script.clear === true) { | |
| $('.history').html(''); | |
| } | |
| switch(script.action) { | |
| case 'type': | |
| // cleanup for next execution | |
| prompt.removeData(); | |
| $('.typed-cursor').text(''); | |
| prompt.typed({ | |
| strings: script.strings, | |
| typeSpeed: 30, | |
| callback: function() { | |
| var history = $('.history').html(); | |
| history = history ? [history] : []; | |
| history.push('$ ' + prompt.text()); | |
| if(script.output) { | |
| history.push(script.output); | |
| prompt.html(''); | |
| $('.history').html(history.join('<br>')); | |
| } | |
| // scroll to bottom of screen | |
| $('section.terminal').scrollTop($('section.terminal').height()); | |
| // Run next script | |
| pos++; | |
| if(pos < data.length) { | |
| setTimeout(function() { | |
| runScripts(data, pos); | |
| }, script.postDelay || 1000); | |
| } | |
| } | |
| }); | |
| break; | |
| case 'view': | |
| break; | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background: #6D7074; | |
| } | |
| .terminal-window { | |
| text-align: left; | |
| width: 800px; | |
| height: 640px; | |
| border-radius: 10px; | |
| margin: auto; | |
| position: relative; | |
| } | |
| .terminal-window header { | |
| background: #E0E8F0; | |
| height: 30px; | |
| border-radius: 8px 8px 0 0; | |
| padding-left: 10px; | |
| } | |
| .terminal-window header .button { | |
| width: 12px; | |
| height: 12px; | |
| margin: 10px 4px 0 0; | |
| display: inline-block; | |
| border-radius: 8px; | |
| } | |
| .terminal-window header .button.green { | |
| background: #3BB662; | |
| } | |
| .terminal-window header .button.yellow { | |
| background: #E5C30F; | |
| } | |
| .terminal-window header .button.red { | |
| background: #E75448; | |
| } | |
| .terminal-window section.terminal { | |
| color: white; | |
| font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier"; | |
| font-size: 11pt; | |
| background: #30353A; | |
| padding: 10px; | |
| box-sizing: border-box; | |
| position: absolute; | |
| width: 100%; | |
| top: 30px; | |
| bottom: 0; | |
| overflow: auto; | |
| } | |
| .terminal-window section.terminal .typed-cursor { | |
| opacity: 1; | |
| -webkit-animation: blink 0.7s infinite; | |
| -moz-animation: blink 0.7s infinite; | |
| animation: blink 0.7s infinite; | |
| } | |
| @keyframes blink{ | |
| 0% { opacity:1; } | |
| 50% { opacity:0; } | |
| 100% { opacity:1; } | |
| } | |
| @-webkit-keyframes blink{ | |
| 0% { opacity:1; } | |
| 50% { opacity:0; } | |
| 100% { opacity:1; } | |
| } | |
| @-moz-keyframes blink{ | |
| 0% { opacity:1; } | |
| 50% { opacity:0; } | |
| 100% { opacity:1; } | |
| } | |
| .terminal-data { display: none; } | |
| .terminal-window .gray { color: gray; } | |
| .terminal-window .green { color: green;} | |
| </style> | |
| </head> | |
| <div class="terminal-window"> | |
| <header> | |
| <div class="button green"></div> | |
| <div class="button yellow"></div> | |
| <div class="button red"></div> | |
| </header> | |
| <section class="terminal"> | |
| <div class="history"></div> | |
| $ <span class="prompt"></span> | |
| <span class="typed-cursor"></span> | |
| </section> | |
| </div> | |
| <!-- data --> | |
| <div class="terminal-data json_object-output"> | |
| <pre> | |
| | JSON_OBJECT(*) | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| |----------------------------------------------------------------------------------------------------------------------------------|----|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|--|----| | |
| | {"EMPNO":7369,"ENAME":"SMITH","JOB":"CLERK","MGR":7902,"HIREDATE":"1980-12-17T00:00:00","SAL":800,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7499,"ENAME":"ALLEN","JOB":"SALESMAN","MGR":7698,"HIREDATE":"1981-02-20T00:00:00","SAL":1600,"COMM":300,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7521,"ENAME":"WARD","JOB":"SALESMAN","MGR":7698,"HIREDATE":"1981-02-22T00:00:00","SAL":1250,"COMM":500,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7566,"ENAME":"JONES","JOB":"MANAGER","MGR":7839,"HIREDATE":"1981-04-02T00:00:00","SAL":2975,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7654,"ENAME":"MARTIN","JOB":"SALESMAN","MGR":7698,"HIREDATE":"1981-09-28T00:00:00","SAL":1250,"COMM":1400,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7698,"ENAME":"BLAKE","JOB":"MANAGER","MGR":7839,"HIREDATE":"1981-05-01T00:00:00","SAL":2850,"COMM":null,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7782,"ENAME":"CLARK","JOB":"MANAGER","MGR":7839,"HIREDATE":"1981-06-09T00:00:00","SAL":2450,"COMM":null,"DEPTNO":10} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7788,"ENAME":"SCOTT","JOB":"ANALYST","MGR":7566,"HIREDATE":"1982-12-09T00:00:00","SAL":3000,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7839,"ENAME":"KING","JOB":"PRESIDENT","MGR":null,"HIREDATE":"1981-11-17T00:00:00","SAL":5000,"COMM":null,"DEPTNO":10} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7844,"ENAME":"TURNER","JOB":"SALESMAN","MGR":7698,"HIREDATE":"1981-09-08T00:00:00","SAL":1500,"COMM":0,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7876,"ENAME":"ADAMS","JOB":"CLERK","MGR":7788,"HIREDATE":"1983-01-12T00:00:00","SAL":1100,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7900,"ENAME":"JAMES","JOB":"CLERK","MGR":7698,"HIREDATE":"1981-12-03T00:00:00","SAL":950,"COMM":null,"DEPTNO":30} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7902,"ENAME":"FORD","JOB":"ANALYST","MGR":7566,"HIREDATE":"1981-12-03T00:00:00","SAL":3000,"COMM":null,"DEPTNO":20} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | {"EMPNO":7934,"ENAME":"MILLER","JOB":"CLERK","MGR":7782,"HIREDATE":"1982-01-23T00:00:00","SAL":1300,"COMM":null,"DEPTNO":10} | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | Elapsed: 00:00:00.009 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| | 14 rows selected. | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
| </pre> | |
| </div> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment