-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
170 lines (170 loc) · 8.24 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Typography, font, game, typeface, design, fun" />
<meta name="description" content="Fun with fonts. This game for designers and people who interested in typography." />
<meta name="author" content="Kolosova Svetlana" />
<title>Fun with fonts</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/scripts.js"></script>
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body class="b-page">
<div style="display: none">
<script type="text/template" id="js-tmpl-start">
<div class="b-task b-task_intro">Test</div>
<div class="js-game-start-button b-typeface_intro">
<img src="images/fonts/sofia.png" />
<div class="b-line_horizontal_higher"></div>
<div class="b-line_horizontal_top"></div>
<div class="b-line_horizontal_buttom"></div>
<div class="b-line_vertical_one"></div>
<div class="b-line_vertical_two"></div>
<div class="b-line_vertical_three"></div>
<div class="b-line_vertical_four"></div>
</div>
<div class="b-instructions">
<div class="b-instructions__title">Instructions</div>
<div class="b-instructions__text">
<p>This project was created for designers and people who interested in typography.</p>
<p>Your mission is simple: to guess which of the four fonts typed the word.</p>
<p>I hope you enjoy it =)</p>
</div>
</div>
<div>
<div class="b-button js-game-start-button">Start</div>
</div>
</script>
<script type="text/template" id="js-tmpl-question">
<div class="js-question" data-answer="<%= answer.name %>">
<div class="b-task">Which font is this one here?</div>
<div class="b-typeface">
<img src="images/fonts/<%= answer.image %>" />
<div class="b-line_horizontal" style="top: <%= answer.higherLine + 1 %>px"></div>
<div class="b-line_horizontal" style="top: <%= answer.topLine %>px"></div>
<div class="b-line_horizontal" style="top: <%= answer.buttomLine - 21 %>px"></div>
<div class="b-line_vertical" style="left: <%= answer.leftLine %>px"></div>
<div class="b-line_vertical" style="left: <%= answer.rightLine -8%>px"></div>
</div>
</div>
<div class="b-options">
<div class="b-options__item js-option1" data-value="<%= option1 %>"><%= option1 %></div>
<div class="b-options__item js-option2" data-value="<%= option2 %>"><%= option2 %></div>
<div class="b-options__item js-option3" data-value="<%= option3 %>"><%= option3 %></div>
<div class="b-options__item js-option4" data-value="<%= option4 %>"><%= option4 %></div>
</div>
<div class="b-score">Score: <%= score %></div>
</script>
<script type="text/template" id="js-tmpl-answer">
<div class="b-task">Your answer is incorrect</div>
<div class="b-type-compare">
<div class="b-type-compare__answer">
<div class="b-typeface">
<img src="images/fonts/<%= answer.image %>" />
<div class="b-line_horizontal" style="top: <%= answer.higherLine + 1 %>px"></div>
<div class="b-line_horizontal" style="top: <%= answer.topLine %>px"></div>
<div class="b-line_horizontal" style="top: <%= answer.buttomLine - 21 %>px"></div>
<div class="b-line_vertical" style="left: <%= answer.leftLine %>px"></div>
<div class="b-line_vertical" style="left: <%= answer.rightLine - 8%>px"></div>
</div>
<table class="b-typeface__info">
<tr>
<td>Typeface </td>
<td><a href="<%= answer.link %>" target="_blank"><%= answer.name %></a></td>
</tr>
<tr>
<td>Designer</td>
<td><a href="https://www.google.ru/#q=<%= answer.designer %>"><%= answer.designer %></a></td>
</tr>
<tr>
<td>Released</td>
<td><%= answer.released %></td>
</tr>
</table>
</div>
<div class="b-type-compare__answer_wrong">
<div class="b-typeface_wrong">
<img src="images/fonts/<%= choice.image %>" />
<div class="b-typeface_wrong__push">
<div class="b-line_horizontal b-line_horizontal_hide" style="top: <%= answer.higherLine + 1 %>px"></div>
<div class="b-line_horizontal b-line_horizontal_hide" style="top: <%= answer.topLine %>px"></div>
<div class="b-line_horizontal b-line_horizontal_hide" style="top: <%= answer.buttomLine - 21 %>px"></div>
<div class="b-line_vertical" style="left: <%= answer.leftLine %>px"></div>
<div class="b-line_vertical" style="left: <%= answer.rightLine %>px"></div>
</div>
</div>
<table class="b-typeface__info">
<tr>
<td>Typeface </td>
<td><a href="<%= choice.link %>" target="_blank"><%= choice.name %></a></td>
</tr>
<tr>
<td>Designer</td>
<td><a href="https://www.google.ru/#q=<%= choice.designer %>"><%= choice.designer %></a></td>
</tr>
<tr>
<td>Released</td>
<td><%= choice.released %></td>
</tr>
</table>
</div>
</div>
<div class="b-score">Score: <%= score %></div>
<div class="b-button js-game-next">Next</div>
</script>
<script type="text/template" id="js-tmpl-counter">FONT <span class="b-header__counter_blue"><%= step %> of <%= total %></span>
</script>
</div>
<div class="b-hotkeys">
<div class="b-hotkeys__item"><span class="b-hotkeys__item__icon">ENTER</span> — Start / Next</div>
<div class="b-hotkeys__item"><span class="b-hotkeys__item__icon">1</span> — Option 1</div>
<div class="b-hotkeys__item"><span class="b-hotkeys__item__icon">2</span> — Option 2</div>
<div class="b-hotkeys__item"><span class="b-hotkeys__item__icon">3</span> — Option 3</div>
<div class="b-hotkeys__item"><span class="b-hotkeys__item__icon">4</span> — Option 4</div>
</div>
<div class="b-overlay js-show"></div>
<div class="b-final js-show">
<div class="b-final__title">Your score</div>
<div class="b-final__score"></div>
<div class="b-final__out-of">out of <span class="b-final__total"></span></div>
<div class="b-tweet-button js-game-tweet-score">Tweet your score</div>
<div class="b-retry-button js-game-restart-button">or try again</div>
<div class="b-final__thanks">Thanks for playing this game. I hope you enjoyed Fun with fonts! You can also support me by liking on Facebook or follow me on Twitter, thanks in advance!</div>
</div>
<div class="b-page__wrapper">
<header class="b-header">
<div class="b-header__game-title">FUNFONTS <span class="b-header__game-title_blue">a font game<span></div>
<div class="b-header__counter"></div>
<div class="b-header__hotkeys-button">
<a href="#" class="js-game-hotkeys">Hotkeys</a>
</div>
</header>
<main class="b-test"></main>
</div>
<footer class="b-footer">
<div class="b-footer__credits">
<div class="b-crafted">Crafted by <a href="http://vk.com/iniel">Svetlana Kolosova</a></div>
<div class="b-follow">More games are coming up, follow us to get notifed</div>
</div>
<div class="b-footer__social">
<script>
document.write(
'<iframe src="http://www.facebook.com/plugins/like.php?href='+
encodeURIComponent('http://funwithfonts.com/')+
'&layout=button_count&show_faces=false&width=200&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe>'
);
</script>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
<a href="https://twitter.com/iniel_todd" class="twitter-follow-button" data-show-count="false">Follow @iniel_todd</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
</footer>
</body>
</html>