-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
108 lines (91 loc) · 3.06 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
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body
{
background-color: #000;
padding: 1%;
color: lime;
font-family: Fixedsys;
font-size: 1em;
}
.console
{
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
font-size:18px;
}
input[type="button"]
{
cursor: pointer;
}
</style>
<script>
var captionLength = 0;
var caption = '';
$(document).ready(function() {
setInterval ('cursorAnimation()', 800);
captionEl = $('#caption');
testTypingEffect();
$('#test-typing').click(function(){
testTypingEffect();
});
$('#test-erasing').click(function(){
testErasingEffect();
});
});
function testTypingEffect() {
// caption = $('input#user-caption').val();
caption = "This is a page for Vue and React experts based in Berlin. Look in the sourcecode for my contact details if you need consulting.";
type();
}
function type() {
captionEl.html(caption.substr(0, captionLength++));
if(captionLength < caption.length+1) {
setTimeout('type()', 90);
} else {
captionLength = 0;
caption = '';
}
}
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}
</script>
<!--
________ _________ _ ______ _________ _ _______
\__ _/|\ /|\__ __/( \ ( __ \ \__ __/( ( /|( ____ \
) ( | ) ( | ) ( | ( | ( \ ) ) ( | \ ( || ( \/
| | | (___) | | | | | | | ) | | | | \ | || |
| | | ___ | | | | | | | | | | | | (\ \) || | ____
| | | ( ) | | | | | | | ) | | | | | \ || | \_ )
|\_) ) | ) ( |___) (___| (____/\| (__/ )___) (___| ) \ || (___) |
(____/ |/ \|\_______/(_______/(______/ \_______/|/ )_)(_______)
_______ _______ _____ _______ _______ _______ _________ _
( ____ \( ____ \ / ___ \ ( ____ \( )( ___ )\__ __/( \
| ( \/| ( \/ / / _ \ \ | ( \/| () () || ( ) | ) ( | (
| (_____ | (_____ ( ( / \ ) )| | | || || || (___) | | | | |
(_____ )(_____ )| |(()// / | | ____ | |(_)| || ___ | | | | |
) | ) |( ( \___/ | | \_ )| | | || ( ) | | | | |
/\____) |/\____) | \ \____/\ | (___) || ) ( || ) ( |___) (___| (____/\ _
\_______)\_______) \______/ (_______)|/ \||/ \|\_______/(_______/(_)
_______ _______ _______
( ____ \( ___ )( )
| ( \/| ( ) || () () |
| | | | | || || || |
| | | | | || |(_)| |
| | | | | || | | |
| (____/\| (___) || ) ( |
(_______/(_______)|/ \|
-->
</head>
<body>
<p class="console">
<span> > </span><span id="caption"></span><span id="cursor">_</span>
</p>
</body>
</html>