-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial.html
128 lines (125 loc) · 10.4 KB
/
tutorial.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<meta name="theme-color" content="#fafafa">
<script src="https://kit.fontawesome.com/6456946f0c.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="header">
<div class="header__content">
<div class="header__row">
<i class="fas fa-bars header__menu" id="headerMenu" onclick="changeMenuState()"></i>
<a href="index.html" id="headerLogo" onclick="resetUsername()">
<svg id="svg" xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0, 0, 400,111.2372304199773"><g id="svgg"><path id="path0" d="M51.148 15.409 C 22.418 21.678,11.763 59.154,32.670 80.401 C 48.326 96.311,76.563 95.009,89.877 77.763 C 92.865 73.892,92.989 74.131,85.812 69.928 L 79.682 66.339 79.002 67.335 C 74.843 73.432,68.224 76.736,60.190 76.726 C 29.766 76.686,28.430 31.093,58.797 29.198 C 66.884 28.693,77.171 33.543,78.783 38.620 C 78.937 39.104,79.268 39.501,79.519 39.501 C 79.892 39.501,91.442 32.987,92.148 32.379 C 93.077 31.579,87.032 24.526,82.877 21.561 C 74.234 15.394,62.048 13.031,51.148 15.409 M199.773 15.178 C 175.876 20.229,162.532 47.031,172.776 69.405 L 173.928 71.922 163.695 82.162 C 158.067 87.794,153.462 92.570,153.462 92.775 C 153.462 93.349,163.566 103.973,164.112 103.973 C 164.377 103.973,169.071 99.492,174.543 94.016 L 184.492 84.059 186.466 85.418 C 206.529 99.221,236.381 89.284,244.300 66.165 C 254.152 37.407,229.291 8.940,199.773 15.178 M100.795 52.894 L 100.795 89.898 118.873 89.898 C 138.431 89.898,139.138 89.825,144.130 87.297 C 156.316 81.126,159.159 64.101,149.585 54.636 L 146.294 51.383 147.639 50.095 C 154.580 43.450,153.996 29.443,146.481 22.344 C 140.274 16.479,137.571 15.891,116.840 15.891 L 100.795 15.891 100.795 52.894 M272.645 16.355 C 250.545 20.791,245.872 51.872,265.850 61.555 L 268.590 62.883 259.834 76.094 C 255.018 83.360,251.078 89.540,251.078 89.828 C 251.078 90.204,253.380 90.352,259.247 90.352 L 267.416 90.352 276.050 77.412 L 284.684 64.472 288.540 64.472 L 292.395 64.472 292.395 77.412 L 292.395 90.352 299.886 90.352 L 307.378 90.352 307.378 53.121 L 307.378 15.891 290.919 15.941 C 281.867 15.968,273.644 16.155,272.645 16.355 M320.999 53.121 L 320.999 90.352 327.072 90.352 C 330.411 90.352,333.780 90.225,334.557 90.069 L 335.971 89.787 336.090 73.244 L 336.209 56.701 348.849 73.299 L 361.489 89.898 370.075 89.898 C 374.797 89.898,378.661 89.768,378.661 89.609 C 378.661 89.450,372.367 80.920,364.675 70.653 L 350.690 51.986 364.211 34.279 C 371.647 24.540,377.736 16.419,377.742 16.232 C 377.748 16.044,373.908 15.891,369.208 15.891 L 360.664 15.891 348.437 31.625 L 336.209 47.359 336.089 31.625 L 335.970 15.891 328.484 15.891 L 320.999 15.891 320.999 53.121 M213.639 29.753 C 225.968 32.919,233.475 45.012,230.978 57.685 C 226.052 82.692,190.805 83.456,184.962 58.683 C 180.826 41.147,196.486 25.348,213.639 29.753 M132.712 30.579 C 137.357 32.520,138.952 38.572,135.883 42.615 C 133.791 45.370,131.990 45.836,123.383 45.847 L 115.778 45.857 115.778 37.911 L 115.778 29.966 123.511 29.966 C 128.978 29.966,131.674 30.146,132.712 30.579 M292.395 40.663 L 292.395 51.359 283.620 51.219 C 274.906 51.079,274.832 51.070,272.954 49.826 C 267.218 46.026,266.361 37.815,271.197 32.979 C 273.828 30.347,275.077 30.066,284.336 30.012 L 292.395 29.966 292.395 40.663 M135.909 60.116 C 141.526 62.905,141.745 71.595,136.279 74.808 C 134.194 76.034,134.044 76.052,124.972 76.204 L 115.778 76.358 115.778 67.657 L 115.778 58.957 124.972 59.104 C 132.912 59.231,134.403 59.369,135.909 60.116 " stroke="none" fill="#ffffff" fill-rule="evenodd"></path></g></svg>
</a>
</div>
<div class="header__row">
<div class="header__links">
<a class="link" href="lobby.html">Лобби</a>
<a class="link" href="packs.html">Пакеты</a>
<a class="link" href="tutorial.html">Туториал</a>
<a class="link" href="about_project.html">О проекте</a>
</div>
</div>
<div class="header__row">
<div class="user user_type1">
<i class="fas fa-dragon user__icon">
</i>
<div class="user__nickname" id="username">
</div>
</div>
</div>
</div>
</div>
<div class="block block_positioned-firstly block_positioned-last">
<div class="block__title">Туториал</div>
<div class="tutorial">
<div class="tutorial__image fade" style="background: url('img/step1.jpg') center/cover no-repeat"></div>
<div class="tutorial__description">
<div class="tutorial__description-title">
Подготовка
</div>
Наша игра имеет схожие правила с известной ТВ-программой.
В игре принимают участие <span class="tutorial__description-entity">Ведущий</span> и
<span class="tutorial__description-entity">Игроки</span>. Чтобы начать игру,
участники собираются вживую или в одном голосовом чате.
Ведущий создает <span class="tutorial__description-entity">комнату</span>, выбирает
<span class="tutorial__description-entity">пакет вопросов</span> и приглашает Игроков.
Чтобы попасть в комнату, необходимо ввести пароль, придуманный Ведущим.
</div>
<div class="tutorial__image fade" style="background: url('img/step2.jpg') center/cover no-repeat"></div>
<div class="tutorial__description">
<div class="tutorial__description-title">
Таблица вопросов
</div>
<span class="tutorial__description-entity">Пакет вопросов</span> состоит из
<span class="tutorial__description-entity">раундов</span>, раунды
состоят из <span class="tutorial__description-entity">тем</span>,
темы состоят из <span class="tutorial__description-entity">вопросов</span> различной сложности.
Игроки, правильно отвечая на вопросы, накапливают <span class="tutorial__description-entity">очки</span> на своих
<span class="tutorial__description-entity">счетах</span>. Выигрывает тот, кто накопит больше всего очков.
</div>
<div class="tutorial__image fade" style="background: url('img/step3.jpg') center/cover no-repeat"></div>
<div class="tutorial__description">
<div class="tutorial__description-title">
На старт. Внимание. Марш!
</div>
Один из Игроков выбирает заинтересовавший его вопрос.
Текст вопроса отображается на экране, после этого у Игроков есть <span class="tutorial__description-entity">15 секунд</span>, чтобы нажать <span class="tutorial__description-entity">кнопку "Ответить"</span>
быстрее своих оппонентов. В случае, если игрок нажал на кнопку раньше отсчета <span class="tutorial__description-entity">таймера</span>, то его кнопка
будет заблокирована на <span class="tutorial__description-entity">3 секунды</span>.
</div>
<div class="tutorial__image fade" style="background: url('img/step4.jpg') center/cover no-repeat"></div>
<div class="tutorial__description">
<div class="tutorial__description-title">
Ответ на вопрос
</div>
У Игрока есть <span class="tutorial__description-entity">15 секунд</span> чтобы устно ответить на вопрос Ведущему, который будет знать правильный ответ.
В случае, если игрок не успел ответить или ответил неверно, с его счета будет <span class="tutorial__description-entity">списана</span> цена вопроса и у других Игроков
появится возможность ответить. Если игрок ответил верно, то на его счет <span class="tutorial__description-entity">начисляется</span> цена вопроса
и у него появится возможность выбрать <span class="tutorial__description-entity">следующий вопрос</span>.
</div>
<div class="tutorial__image fade" style="background: url('img/step5.jpg') center/cover no-repeat"></div>
<div class="tutorial__description">
<div class="tutorial__description-title">
Я тут главный!
</div>
Ведущий, в случае необходимости, может вручную <span class="tutorial__description-entity">выбирать</span> вопрос за игрока,
изменять счета игроков,
ставить игру на <span class="tutorial__description-entity">паузу</span>.
Если Ведущий выходит из игры, то она <span class="tutorial__description-entity">заканчивается</span>.
</div>
</div>
</div>
<div class="footer">
<div class="footer__content">
<div class="footer__row">
<b>
Артемий Карпов,<br>Арсений Карпов,<br>Денис Андреев
</b>
</div>
<div class="footer__row">
<button class="footer__button footer__button_github">Github <i class="fab fa-github"></i></button>
<button class="footer__button footer__button_vk">Group <i class="fab fa-vk"></i></button>
</div>
<div class="footer__row">
Санкт-Петербург,<br>2021
</div>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>