-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (163 loc) · 8.71 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145820860-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-145820860-1');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A game where you write a story with others.">
<meta name="keywords" content="The Woven Book, game, rpg, co-writing, writing, story, fantasy">
<meta name="Resource-type" content="Document">
<title>The Woven Book</title>
<!--<link rel="shortcut icon" href="img/fi.ico" type="image/x-icon">-->
<!--<link rel="icon" href="img/fi.ico" type="image/x-icon">-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="./main.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Grenze|Roboto&display=swap" rel="stylesheet">
</head>
<body>
<!-- Cover image -->
<div class="cover-div cover-img">
<img src="img/logo.svg" style="margin:234px 0 90px 0;">
<form style="margin-top:20px;" id="subscription" action="/subscribe/">
<div class="form-group">
<input type="email" class="form-control email-input" name="email" aria-describedby="emailHelp"
placeholder="Enter email">
<button type="submit" class=" btn btn-primary email-btn">Subscribe for updates</button>
</div>
<!-- Success notification, not working atm due to refresh on submit -->
<div class="container" style="display:none;" id="success-message">
<div class="alert alert-success alert-dismissable" id="myAlert2">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Success! message sent successfully.
</div>
</div>
</form>
<p style="
display: block;
margin: 60px auto;
padding: 8px 24px;
background:var(--b54);
width:400px
align-text:center;
border-radius:3px;
color: white;
backdrop-filter: blur(6px);
">
Join our <a style="color:var(--gold)" href="https://discord.gg/xcnA3xW" target="_blank">Discord</a> to play the game</p>
</div>
<div style="display: flex;justify-content: center;overflow: hidden;">
<img src="img/cover-bg.svg" style="height: 820px;margin-bottom: 40px;">
</div>
<div class="container-fluid">
<!-- About the game -->
<div class="row justify-content-center" style="margin-top: 40px;">
<div class="col-sm-8">
<h1><span style="color: var(--b38)">The Woven Book is a</span> free browser game where you can write a story
with others.</h1>
<p>Gain influence points by writing and use them to affect the story and develop your character. You can also participate in encounters, where you will play against other players. Create an effective build, learn how to write stories, train your memory, typing skills and read interesting stories.<br><br>
<span style="color: var(--b38)">✤</span> RPG style character progression (classes, levels, skills,
items, talents etc.)<br>
<span style="color: var(--b38)">✤</span> Achievements linked to writing performance<br>
<span style="color: var(--b38)">✤</span> Leaderboard for best writers in the game<br>
</p>
</div>
</div>
<div class="row justify-content-center">
<img src="img/book.jpg" class="img-fluid" style="width: 902px;">
</div>
<!-- The book -->
<div class="row justify-content-center traveler-img">
<div class="col-sm-8">
<h1>The Book</h1>
<p>Players choose a storyline written by other player and continues it. Best ideas are upvoted and get to the top of the chapter. In this way, the story continues and most interesting authors gain influence points. Influence points are the currency of the game, used to vote for storylines, buy items, consumables etc.</p>
</div>
</div>
<!-- Classes -->
<div class="row b5">
<img src="img/classes1.svg" class="img-fluid class-icons">
</div>
<div class="row b5 justify-content-center">
<div class="col-sm-5" style="padding-right: 34px;">
<h1>Classes</h1>
<p>Each class has a unique playstyle, for example, Alchemist can craft consumables that allow him to gain buffs and heal himself. He also can use spells like <b>Plague</b>, that will swap characters in your opponent's text making him slower during the encounter.<br><br>
Warlord, on the other hand, will focus on brute force and deal extra damage with each typed character.</p>
</div>
<img src="img/classes2.jpg" class="sdw img-fluid">
</div>
<!-- Encounters -->
<div class="row b5">
<img src="img/enc.jpg" class="sdw img-fluid">
<div class="col-sm-5" style="padding-left: 34px;">
<h1>Encounters</h1>
<p>During encounters, you will play against other players. You will be given a text, in size equal to opponent life points. Both players will start typing, dealing damage equal to the number of characters typed.<br><br>
The outcome of the duel will be affected by stats, class skills, items, players typing speed, memory and precision.</p>
</div>
</div>
<!-- Email form -->
<div class="row b5" style="background: rgba(0, 0, 0, 0.75);">
<form style="margin-top: 40px" id="secondary-subscription" action="/subscribe/">
<div class="form-group">
<input type="email" class="form-control email-input" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email" name="email">
<button type="submit" class="btn btn-primary email-btn" value="showAlert" onclick="showAlert();">
Subscribe for updates
</button>
</div>
</form>
</div>
<!-- Footer -->
<div class="row footer">
<img src="img/weapons.svg" class="weapon-img">
<img src="img/logo.svg" class="img-fluid">
<div class="team">
<div style="margin: 0 20px 0 auto;">
<img src="img/andrei copy.jpg" class="img-fluid team-img">
<label>Andrew <br> Development</label>
</div>
<div>
<img src="img/pasha.jpg" class="img-fluid team-img">
<label>Pavel / Design</label>
<a href="https://twitter.com/paveluxd" target="_blank">Twitter</a>
</div>
<div>
<img src="img/weipert-daniel.jpg" class="img-fluid team-img">
<label>Daniel / Development</label>
<a href="https://de.linkedin.com/in/daniel-weipert-8b9a38137" target="_blank">Linked in</a>
</div>
<div style="display: flex; flex-direction:column; margin: 0 auto 0 0;">
<img src="img/artur copy.jpg" class="img-fluid team-img">
<label>Arthur <br> Community management</label>
</div>
</div>
<div class="row" style="padding: 0;">
<div class="col-sm-12" style="padding-left: 34px; color: rgba(255,255,255,0.5); margin: auto; text-align: center;">
<p>
Hi, we have designed this game to help people be more productive by applying gamification to story writing.<br>
At the moment it's just a concept, later we will publish more details about the game.<br>
Feel free to contact us, share your feedback and ideas :)<br><br>
<span>✤</span>
<a style="color:var(--gold)" href="https://discord.gg/xcnA3xW" target="_blank">Join our Discord to play the game</a>
<span>✤</span>
</p>
</div>
</div>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/ie10-viewport-bug-workaround.js"></script>
<script src="./button.js"></script>
</body>
</html>