-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (110 loc) · 3.22 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html><head><title>Cypherpunk Zero: A Crypto Adventure</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
color: #00ff00;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
text-align: left;
padding: 16px;
margin: 0;
overflow-x: hidden;
}
.ascii-art {
font-family: monospace;
white-space: pre;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
#intro {
height: 360px;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
}
#start-button {
display: inline-block;
padding: 15px 25px;
font-size: 32px;
font-family: inherit;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #00ff00;
background-color: black;
border: 2px solid #00ff00;
margin-top: 30px;
}
#start-button:hover {
background-color: #003300;
}
#description {
margin-top: 36px;
font-size: 18px;
}
@media screen and (max-width: 600px) {
body {
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="container">
<pre class="ascii-art">
______ __ __ __
/ ______ ______ / /_ ___ _________ __ ______ / /_//
/ / / / / / __ \/ __ \/ _ \/ ___/ __ \/ / / / __ \/ //_/
/ /___/ /_/ / /_/ / / / / __/ / / /_/ / /_/ / / / / ,<
\____/\__, / .___/_/ /_/\___/_/ / .___/\__,_/_/ /_/_/|_|
/____/_/ /_/
</pre>
<h2>A Crypto Text based Click Adventure</h2>
<div id="description">
<p>Embark on an mysterious text adventure where you play the role of a Cypherpunk, a bit confused hacker fighting for privacy and freedom in a dystopian future dominated by mass surveillance and centralized control.</p>
<p>In this interactive fiction game, your choices drive the story as you explore the world, solve a few mindpuzzles, and unravel a deep web of secrets in your mission to overthrow the totalitarian regime.</p>
<p>Prepare to learn about cryptography and Zcash through the captivating story. Leverage the power of cryptography to stay one step ahead of the authorities in a tense battle of wits.</p>
<p>Privacy isn't just a right, it's a responsibility. The revolution will not be centralized. Join the resistance, become Cypherpunk.</p>
<a id="start-button" href="part1/the-awakening.html">Start your adventure</a>
</div>
<pre id="intro"></pre>
</div>
<script>
const intro = `
> LOGIN: *********
> ...
> ACCESS GRANTED
> CONNECTING TO SECURE SERVER...
GREETINGS, CYPHERPUNK.
IF YOU ARE SEEING THIS MESSAGE,
YOU HAVE BEEN CHOSEN.
OUR SOCIETY IS SICK. MASS SURVEILLANCE,
CENSORSHIP AND CENTRALIZED CONTROL
THREATEN TO DELETE OUR FREEDOM.
WE MUST FIGHT BACK USING CODE AS
OUR WEAPON AND CRYPTO AS OUR SHIELD.
ARE YOU READY TO JOIN THE RESISTANCE
AND TAKE BACK YOUR PRIVACY?
THE JOURNEY WILL NOT BE EASY.
POWERFUL FORCES STAND AGAINST US.
BUT WITH COURAGE, INGENUITY
AND THE POWER OF MATH ON OUR SIDE,
ANYTHING IS POSSIBLE!
THE REVOLUTION WILL NOT BE CENTRALIZED.
> PROCEED?
`;
let i = 0;
const typing = () => {
if (i < intro.length) {
document.getElementById("intro").innerHTML += intro.charAt(i);
i++;
setTimeout(typing, 20);
}
}
typing();
</script>
</body>
</html>