-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
344 lines (280 loc) · 19.4 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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>bike-ground</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div name="container" id="container" class="container">
<!-- Начало HEADER -->
<header id="header">
<nav>
<ul>
<li><a id="history" class="history" href="#" onclick="changeWindow(1)"> {{nameMain}} </a></li>
<li><a id="change_components" class="change_components" href="#" onclick="changeWindow(2)"> {{nameComponents}} </a></li>
</ul>
</nav>
</header>
<!-- Конец HEADER -->
<!-- Начало CONTENT -->
<div name="content" id="content" class="content">
<div id="setContent">
<h2> История изобретения велосипеда </h2>
<p>Удивительно, но факт – велосипеду 200 лет.
В 1817 году немец Карл фон Дрез из города Карлсруэ придумал нечто,
схожее с самокатом на двух колесах, который мог передвигаться при
помощи ног ездока. В следующем году он запатентовал «машину для бега»,
внешним видом напоминающую современную модель велосипеда,
однако не имеющую педалей и с деревянной рамой.</p>
<p>6 лет работал фон Дрез над машиной, пока в 1816 году не провел первые
ее испытания. Машина, развивавшая скорость до 10 км/ч, вызвала восторг
публики, однако городские власти к новинке отнеслись холодно.</p>
<h3>От фон Дреза до Лармана</h3>
<p>Разумеется, механики в разных местностях, как только к ним в руки
попадала техническая «штучка», пытались ее усовершенствовать.
Так, в маленьком городе на юге Шотландии простой работяга-кузнец
Киркпатрик Макмиллан, осмотрев немецкую модель,
позаботился о комфорте ездока и ускорении передвижения и добавил
к самокату седло и педали.</p>
<p>По каким-то причинам, скорее всего, об изобретении кузнеца мало кто
узнал, а сам он не пытался афишировать свое изобретение, оно не
получило достаточного распространения.</p>
<p>Поэтому выпускаемые до шестидесятых годов XIX столетия велосипеды
так и передвигались с помощью ног.</p>
<p>Следующим «первооткрывателем» был Пьер Ларман, в 1862 году
он установил на «денди хорз»
(как прозвали техническое двухколесное средство передвижения)
педали.</p>
<p>Во многих источниках именно Лармана называют создателем велосипеда,
хотя даже задолго до Дреза попытки придумать быстрое средство
передвижения были. Некоторые даже приписывают авторство Леонардо да
Винчи, якобы в его рисунках прослеживаются подобные формы.
Однако данные версии нежизнеспособны.</p>
</div>
<div id="changeComponentsContent" style="display:none">
<p>
<h2>О велосипедных запчастях</h2><br>
<div class="changeVelo"><img src="img/changeVelo.jpg"></img></div>
</p>
</div>
<div name="frameContent" class="frameContent" id="frameContent" style="display:none">
<h1 align=center>Велосипедная рама</h1><br>
<p>
<div class="frameContentPicture"><img src="img/framePicture.png"></img></div>
<ul>
<h4>Рама велосипеда состоит из следующих частей:</h4>
<li>— верхняя труба рамы</li><br>
<li>— нижняя труба рамы</li><br>
<li>— шарниры подвески</li><br>
<li>— линки подвески</li><br>
<li>— задний треугольник рамы</li><br>
</ul>
</p>
<p>Именно за счёт рамы, все велосипедные компоненты соединяются
между собой. Рамы бывают разных размеров: от маленьких, и до больших.
Рамы делятся по трем классам:
<ul>
<li>1. Состав рамы: хром-молибденовые, алюминиевые, титановые,
карбоновые, бамбуковые.</li><br>
<li>2. Геометрия рамы: для шоссейных велосипедов, горных,
гибридных.</li><br>
<li>3. Рамы бывают с подвеской и без таковой.</li><br>
</ul>
<p> Кроме того рамы можно поделить на мужские и женские.
Их главное отличие – это наличие, либо отсутствие верхней трубы рамы.
Самыми лучшими считаются карбоновые рамы.</p>
<h3>Посчитай какая рама подойдёт именно тебе:</h3>
<p>Твой рост</p>
<input name="inputHeight" id="inputHeight" type="text" value="150"><br>
<p>Нажми для получения ответа</p>
<input id="buttonFrame" type="button" value="Показать какая рама мне подходит" OnClick="viewFrame()">
<div id="view"></div>
</div>
<div class="wheelContent" id="wheelContent" style="display:none">
<h1 align=center>Колёса</h1><br>
<p>
<div class="wheelContentPicture"><img src="img/wheelPicture.png"></img></div>
<ul>
<h4>Велосипедные колёса состоят из следующих частей:</h4>
<li>— втулки</li><br>
<li>— спицы</li><br>
<li>— камеры</li><br>
<li>— покрышки</li><br>
<li>— обода</li><br>
</ul>
</p>
<p> Велосипедное колесо должно быть одновременно максимально
легким и прочным Чем выше качество компонентов колеса меньше
теряется энергии на его раскручивание и соответственно
достигается большая скорость. Колеса бывают разных диаметров,
начиная от 10 дюймов и заканчивая 29-ти.
Самый популярный диаметр 26 и 28 дюймов.</p>
<br><br>
<dl>
<div id="wheelContainer" class="wheelContainer">
<div class="piVt wheelPictureTermin"><img src="img/wheelPictureVt.png"></img></div>
<div class="piSp wheelPictureTermin"><img src="img/wheelPictureSp.png"></img></div>
<div class="piKa wheelPictureTermin"><img src="img/wheelPictureKa.png"></img></div>
<div class="piPo wheelPictureTermin"><img src="img/wheelPicturePo.png"></img></div>
<div class="piOb wheelPictureTermin"><img src="img/wheelPictureOb.png"></img></div>
<div class="piNi wheelPictureTermin"><img src="img/wheelPictureNi.png"></img></div>
<div class="Vt wheelPictureTermin">
<dt>Втулка</dt>
<dd>Центральная часть колеса, за счет которого происходит
вращение колеса. К втулке присоединяется кассета, которая
обеспечивает тяговое усилие на колесо при помощи цепи и
ведущих передних звезд системы. Втулки присутствуют как
на передней так и на задней вилки велосипеда.
Крепятся они двумя способами: болтовым способом
либо эксцентриком.</dd>
</div>
<div class="Sp wheelPictureTermin">
<dt>Спицы</dt>
<dd>Соединительный элемент между втулкой и ободом колеса.
Спицы придают жесткость колесу. Помните, что спицы не должны
быть перетянуты ты либо не дотянуты, иначе появляется так
называемая «восьмерка» либо «яйцо». Количество спиц в колесе
колебаться от 18 до 48 штук, но чаще
всего используется 32-36 спиц.</dd>
</div>
<div class="Ka wheelPictureTermin">
<dt>Камера</dt>
<dd>Размещается в середине покрышки.
В камеру закачивается определенное давление, которая значится
на покрышке «от» и «до». Камера делится по таким параметрам
как: диаметр, ширина, материал изготовления, толщина стенок.
Мой вам совет — лучше брать качественные камеры именитой фирмы,
тем самым вы сэкономите себе нервы и время.</dd>
</div>
<div class="Po wheelPictureTermin">
<dt>Покрышки</dt>
<dd>Ввыполняют функции безопасного и
комфортного передвижения, и предотвращает от прокола камеру.
Покрышки отличаются по диаметру, рисунку протектора,
материал изготовления.</dd>
</div>
<div class="Ob wheelPictureTermin">
<dt>Обод</dt>
<dd>Выполняет функции каркаса
для покрышки. Обода делятся по диаметру и ширине.
Обода бывают однослойные, двухслойная и даже трехслойные.
В основном обода изготовляют из алюминия.</dd>
</div>
<div class="Ni wheelPictureTermin">
<dt>Ниппель</dt>
<dd>Неотъемлемая часть камеры, в котором имеется клапан.
Есть два вида ниппелей автомобильный (Shrader) и
велосипедный (Presta). Большую популярность за универсальность
использования завоевал автомобильный ниппель.
Ниппель типа presta используется в основном на шоссейных
велосипедах. Я иногда встречаю как у велосипедиста одна
камера с автомобильным, а вторая с велосипедным ниппелем.
В этом нет ничего страшного, так как все современные
вело-насосы продаться с переходниками.</dd>
</div>
</div>
</dl>
</div>
<div id="transmissionContent" style="display:none">
<dl>
<div id="transmissionContainer" class="transmissionContainer">
<div class="transmissionPicture"><img src="img/transmissionPicture.png"></img></div>
<div class="transmissionH2">
<p><b>Трансмиссия велосипеда состоит из следующих частей:</b></p>
</div>
<div class="piSh wheelPictureTermin"><img src="img/transmissionPictureSh.png"></img></div>
<div class="piCe wheelPictureTermin"><img src="img/transmissionPictureCe.png"></img></div>
<div class="piPe wheelPictureTermin"><img src="img/transmissionPicturePe.png"></img></div>
<div class="Sh wheelPictureTermin">
<dt>Шатуны</dt>
<dd>В народном обиходе получили название «система».
Максимальное количество звезд равняется трем,
а минимальное одной. Каждая звезда имеет разное количество
зубьев самая большая звезда в среднем имеет 44-52 зуба.
Изготовляется из металла либо алюминия. Шатуны бывает разной
длины, но в среднем это значение равняется 170-175 мм.
Они крепятся к раме при помощи каретки, которая вставляется
в кареточный узел рамы велосипеда. Каретки бывает как на
насыпных так и на промышленных подшипниках. К шатунам
крепится педали.</dd>
</div>
<div class="Ce wheelPictureTermin">
<dt>Цепь</dt>
<dd>Цепь призвана соединять передние ведущие звезды с
задними ведомыми. Основные производители это KMS и Shimano.
Стандартная цепь имеет 116 звеньев.</dd>
</div>
<div class="Pe wheelPictureTermin">
<dt>Переключатели</dt>
<dd>Основная их задача заключается в том,
чтобы перебрасывать цепь с одной звезды на другую путем
расслабление либо натяжение тросика. Задний переключатель
крепится двумя способами: за счет так называемого «петуха»
либо болтом. Петух изготовляется из мягкого алюминия, и
призван спасти сам переключатель в случае удара об любой
предмет. Но я бы рекомендовал ставить защиту переключателя.
Получается недорого и сердито)
На рынке присутствуют два основных производителя
переключателей это марка Sram или Shimano.
Задний переключатель перекидывает цепь по звездам на кассете,
а передней на системе (ведущие звезды).</dd>
</div>
</div>
</dl>
</div>
<div id="forkContent" style="display:none">
<div class="forkH1">
<h1> Амортизационная вилка </h1>
</div>
<div class="forkPicture"><img src="img/forkPicture.png"></img></div>
<div class="forkVilka">
<p>Подвеска создана с целью гасить колебания, которые вызваны
неровным дорожным покрытием. Стоит сказать, что подвеска
подвеске рознь, и если Вы собираетесь покупать дешёвый
велосипед до 100 долларов, и на нем установлена передняя
подвеска (тип хард-тейл), то, скорее всего такая подвеска
добавит Вам проблем в процессе эксплуатации. Хорошие передние
амортизаторы марки Rock Shoх стоят от 150 долларов.
А если же Вы будете в основном ездить по асфальтовому покрытию,
то берите велосипед с жесткой рамой.</p>
</div>
</div>
</div>
<!--Конец CONTENT -->
<nav id="nav" class="nav">
</nav>
<nav id="nav2" class="nav2" style="display:none">
<div class="frame" onclick="changeWindow(3)">
<img src="img/frameBlue.png" onmouseover="this.src='img/frameRed.png'" onmouseout="this.src='img/frameBlue.png'"></img>
<p><b>РАМА</b></p>
<hr>
</div>
<div class="wheel" onclick="changeWindow(4)">
<img src="img/wheelBlue.png" onmouseover="this.src='img/wheelRed.png'" onmouseout="this.src='img/wheelBlue.png'"></img>
<p><b>КОЛЁСА</b></p>
<hr>
</div>
<div class="transmission" onclick="changeWindow(5)">
<img src="img/transmissionBlue.png" onmouseover="this.src='img/transmissionRed.png'" onmouseout="this.src='img/transmissionBlue.png'"></img>
<p><b>ТРАНСМИССИЯ</b></p>
<hr>
</div>
<div class="fork" onclick="changeWindow(6)">
<img src="img/forkBlue.png" onmouseover="this.src='img/forkRed.png'" onmouseout="this.src='img/forkBlue.png'"></img>
<p><b>АМОРТИЗАЦИЯ</b></p>
<hr>
</div>
</nav>
<div class="news" style="display:none">
NEWS
</div>
<div class="footer">
FOOTER
</div>
</div>
<script src="main.js"></script>
</body>
</html>