This repository has been archived by the owner on Jul 10, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
30 lines (29 loc) · 2.05 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Home page of Jacob Birkett - Placeholder page.">
<meta name="keywords" content="jacob, birkett, spike, spikespaz, github, programming, open, source, projects">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" type="text/css">
<link rel="stylesheet" href="css/console.css" type=text/css>
<link rel="stylesheet" href="css/index.css" type=text/css>
<title>spikespaz</title>
</head>
<body>
<div class="body-wrapper">
<div class="console-wrapper" id="main-console">
<ul class="console-buffer">
<li class="console-line"><p><b>Welcome! Please enter a command below, or type "help" to list commands.</b></p></li>
<li class="console-line"><br></li>
<li class="console-line"><p>Just kidding. This console doesn't work yet. It's a shitty proof-of-concept to make a "console like" interface with as few lines of web code as possible.</p></li>
<li class="console-line"><br></li>
<li class="console-line"><p>The blinking cursor was a bitch to implement. There's a hidden text input that gets focused when the console area is clicked on, and the content of the last line in this list element will update to match it with proper styling for the caret position etc.</p></li>
<li class="console-line"><p>Each line in the console buffer is a separate list item with a paragraph element inside.</p></li>
<li class="console-line"><br></li>
<li class="console-line"><p><mark>Shift + Arrow</mark> selection should be fully functional, and blinking should start and stop in accordance to the focus of the console element. Give it a try, and if you break anything, make an issue on the <a href="http://gh.spikespaz.com/spikespaz.github.io">github repository</a>.</p></li>
</ul>
</div>
</div>
<script src="js/console.js" type="text/javascript"></script>
</body>
</html>