hackertyper/index.html at master · unitedideas/hackertyper · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hacker Typer</title>
<link rel="stylesheet" type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css"></link>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

    <style>
        body {
            background-color: dimgrey;
            word-wrap: break-word;
        }
        #terminal {
            position: absolute;
            z-index: 9;
            border: 1px solid #d3d3d3;
            text-align: left;
            background-color: rgb(39,40,34);
            /*color: darkgreen;*/
            border-style: solid;
            border-width: 10px;
            border-radius: 5px;
            width: 900px;
            height: 500px;
            font-size: 1.2em;
            overflow: -moz-scrollbars-vertical;
            resize: horizontal;
        }
        #mydivheader {
            padding: 10px;
            cursor: move;
            z-index: 10;
            background-color: green;
            color: greenyellow;
            border-style: solid;
            border-bottom-width: 15px;
            border-color: darkgreen;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="text_container">
    <!--Draggable DIV:-->
    <div id="terminal">
        <!--Include a header DIV with the same name as the draggable DIV, followed by "header":-->
        <div id="mydivheader">Hacking the System - Terminal</div>
            <pre>
            <code id="code_insert" class="cpp">
            </code>
            </pre>
    </div>
</div>

<script>
    //Make the DIV element draggagle:
    let terminal = document.getElementById("terminal")
    dragElement(terminal);
    function dragElement(elmnt) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        if (document.getElementById(elmnt.id + "header")) {
            /* if present, the header is where you move the DIV from:*/
            document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
        } else {
            /* otherwise, move the DIV from anywhere inside the DIV:*/
            elmnt.onmousedown = dragMouseDown;
        }
        function dragMouseDown(e) {
            e = e || window.event;
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
        }
        function elementDrag(e) {
            e = e || window.event;
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }
        function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }
    function http_get(url, success) {
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                success(xhttp.responseText);
            }
        };
        xhttp.open("GET", url);
        xhttp.send();
    }
    let url = 'https://raw.githubusercontent.com/qrush/unix/master/src/c/c02.c';
    let code = '';
    http_get(url, function (data) {
        code = data;
        shown_chars = 0;
    });
    let code_insert = document.getElementById('code_insert')
    let slice_size = 5
    let hold_spot = 0
    let add_text = code.slice(hold_spot, hold_spot + slice_size)
    document.onkeydown = function () {
        code_insert.innerText += code.slice(hold_spot, hold_spot + slice_size)
        hold_spot += slice_size
        terminal.scrollTo(0, terminal.scrollHeight);
        hljs.highlightBlock(code_insert);
    }
</script>

</body>
</html>