-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
259 lines (244 loc) · 21.2 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Зоология</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css"> <!-- Подключение CSS файла -->
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Левый блок управления -->
<div class="col-md-3 col-sm-12 sidebar">
<h4 class="mt-4 text-white">Басқару мәзірі</h4>
<!-- Форма поиска -->
<form id="searchForm" class="mb-4">
<input type="text" id="searchInput" class="form-control" placeholder="Поиск по темам..." maxlength="50">
</form>
<!-- Existing menu and search form -->
<h5 class="mt-4 text-white">Балықтардың электрондық анықтағышы</h5>
<div class="alphabet-list">
<a href="#a">А</a>
<a href="#b">Б</a>
<a href="#k">К</a>
<a href="#k1">Қ</a>
<a href="#l">Л</a>
<a href="#o">О</a>
<a href="#p">П</a>
<a href="#c">С</a>
<!-- Add more letters as needed -->
</div>
<div class="accordion mt-4" id="accordionExample">
<!-- Тема 1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Зертханалық сабақ №9
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body bg-light">
<ul>
<li><a href="page/tema1.html#a1" class="text-decoration-none text-dark">➤ Кіріспе</a></li>
<li><a href="page/tema1.html#a2" class="text-decoration-none text-dark">➤ Тапсырмаға түсініктеме</a></li>
<li><a href="page/tema1.html#a3" class="text-decoration-none text-dark">➤ Жұмыстың барысы</a></li>
<li><a href="page/tema1.html#a4" class="text-decoration-none text-dark">➤ Өзін-өзі тексеру</a></li>
<li><a href="page/tema1.html#a5" class="text-decoration-none text-dark">➤ Тест</a></li>
<li><a href="page/tema1.html#a6" class="text-decoration-none text-dark">➤ Бақылау сұрақтары</a></li>
<li><a href="page/tema1.html#a7" class="text-decoration-none text-dark">➤ Пайдаланылған әдебиеттер</a></li>
</ul>
</div>
</div>
</div>
<!-- Тема 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Зертханалық сабақ №10
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body bg-light">
<ul>
<li><a href="page/tema2.html#a1" class="text-decoration-none text-dark">➤ Кіріспе</a></li>
<li><a href="page/tema2.html#a2" class="text-decoration-none text-dark">➤ Тапсырмаға түсініктеме</a></li>
<li><a href="page/tema2.html#a3" class="text-decoration-none text-dark">➤ Жұмыстың барысы</a></li>
<li><a href="page/tema2.html#a4" class="text-decoration-none text-dark">➤ Өзін-өзі тексеру</a></li>
<li><a href="page/tema2.html#a5" class="text-decoration-none text-dark">➤ Тест</a></li>
<li><a href="page/tema2.html#a6" class="text-decoration-none text-dark">➤ Бақылау сұрақтары</a></li>
<li><a href="page/tema2.html#a7" class="text-decoration-none text-dark">➤ Пайдаланылған әдебиеттер</a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed text-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Зертханалық сабақ №11
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body bg-light">
<ul>
<li><a href="page/tema3.html#a1" class="text-decoration-none text-dark">➤ Кіріспе</a></li>
<li><a href="page/tema3.html#a2" class="text-decoration-none text-dark">➤ Тапсырмаға түсініктеме</a></li>
<li><a href="page/tema3.html#a3" class="text-decoration-none text-dark">➤ Жұмыстың барысы</a></li>
<li><a href="page/tema3.html#a4" class="text-decoration-none text-dark">➤ Өзін-өзі тексеру. Тест</a></li>
<li><a href="page/tema3.html#a5" class="text-decoration-none text-dark">➤ Бақылау сұрақтары</a></li>
<li><a href="page/tema3.html#a6" class="text-decoration-none text-dark">➤ Пайдаланылған әдебиеттер</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Основной блок -->
<div class="col-md-9 col-sm-12 main-content bg-white">
<h2 class="mt-4">Зоология</h2>
<!-- Ограничение размера картинки -->
<img src="img/image1.jpg" alt="Картинка" class="limited-img mb-4">
<p>
<strong>Зоология (грек тілінен. zoon-жануар және logos-ғылым, ілім, сөз)</strong> — жануарлар әлемін зерттейтін ғылым.
</p>
<p>
Бұл қазіргі уақытта өмір сүріп жатқан немесе бұрын жер бетінде өмір сүрген жануарлардың барлық топтарының әрқайсысының құрылымы, ұрықтың дамуы, тіршілік әрекеті, тіршілік ету ортасына қатынасы, географиялық таралуы, шығу тегі мен мінез-құлқы туралы ғылым.
</p>
<p>
Зоологияның зерттеу нысаны-жануарлар, жануарлар өмірінің барлық көріністері: көбею, қоректену, таралу, көбею, мінез-құлық, сыртқы және ішкі құрылымдары және т. б.
</p>
<p>
Зоологияның негізгі міндеттері - жануарлар өмірінің көріністерінің заңдылықтарын зерттеу және жануарларды жүйелеу.
</p>
<h2>Балықтардың электрондық анықтағышы</h2>
<div class="row fish-table">
<!-- Первый столбец -->
<div class="col-md-3">
<a name="a"><h3>А</h3></a>
<div class="fish-item">
<img src="img/fish1.png" alt="Ақмарқа, Жерех, Aspius" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal1">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal1">Ақмарқа, Жерех, Aspius</a>
</div>
<div class="fish-item">
<img src="img/fish2.png" alt="Ақсақа, Сиг, Coregonus" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal2">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal2">Ақсақа, Сиг, Coregonus</a>
</div>
<div class="fish-item">
<img src="img/fish3.png" alt="Ақтұқы, Язь, Leuciscus idus" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal3">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal3">Ақтұқы, Язь, Leuciscus idus</a>
</div>
<div class="fish-item">
<img src="img/fish4.png" alt="Алабұға, Окунь, Perca" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal4">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal4">Алабұға, Окунь, Perca</a>
</div>
<div class="fish-item">
<img src="img/fish5.png" alt="Алтын мөңке, Золотой карась, Carassius carassius" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal5">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal5">Алтын мөңке, Золотой карась, Carassius carassius</a>
</div>
<!-- Добавьте больше рыб для буквы "" -->
<a name=""><h3>Л</h3></a>
<div class="fish-item">
<img src="img/fish21.png" alt="Лақа, Налим, Lota" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal21">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal21">Лақа, Налим, Lota</a>
</div>
</div>
<!-- Второй столбец -->
<div class="col-md-3">
<a name="b"><h3>Б</h3></a>
<div class="fish-item">
<img src="img/fish6.png" alt="Беріш, Бёрш, Sander" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal6">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal6">Беріш, Бёрш, Sander</a>
</div>
<div class="fish-item">
<img src="img/fish7.png" alt="Оңғақ, Линь, Tinca tinca" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal7">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal7">Оңғақ, Линь, Tinca tinca</a>
</div>
<!-- Добавьте рыб для буквы "" -->
<a name="o"><h3>О</h3></a>
<div class="fish-item">
<img src="img/fish22.png" alt="Лақа, Налим, Lota" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal22">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal22">Лақа, Налим, Lota</a>
</div>
</div>
<!-- Второй столбец -->
<div class="col-md-3">
<a name="k"><h3>К</h3></a>
<div class="fish-item">
<img src="img/fish8.png" alt="Кәдімгі қадырғы, Хариус обыкновенный, Thymallus thymallus" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal8">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal8">Кәдімгі қадырғы, Хариус обыкновенный, Thymallus thymallus</a>
</div>
<div class="fish-item">
<img src="img/fish9.png" alt="Кәдімгі табан, Обыкновенный лещ, Abramis brama" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal9">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal9">Кәдімгі табан, Обыкновенный лещ, Abramis brama</a>
</div>
<div class="fish-item">
<img src="img/fish10.png" alt="Кәдімгі таутан, Обыкновенный ёрш, Gymnocephalus cernuus" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal10">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal10">Кәдімгі таутан, Обыкновенный ёрш, Gymnocephalus cernuus</a>
</div>
<div class="fish-item">
<img src="img/fish11.png" alt="Кәдімгі торта, Обыкновенная плотва, Rutilus rutilus" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal11">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal11">Кәдімгі торта, Обыкновенная плотва, Rutilus rutilus</a>
</div>
<div class="fish-item">
<img src="img/fish12.png" alt="Кәдімгі тұқы, Обыкновенный карп, Cyprinus carpio" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal12">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal12">Кәдімгі тұқы, Обыкновенный карп, Cyprinus carpio</a>
</div>
<div class="fish-item">
<img src="img/fish13.png" alt="Кәдімгі шортан, Обыкновенная щука, Esox lucius" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal13">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal13">Кәдімгі шортан, Обыкновенная щука, Esox lucius</a>
</div>
<div class="fish-item">
<img src="img/fish14.png" alt="Көкшарбы, Ряпушка, Coregonus" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal14">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal14">Көкшарбы, Ряпушка, Coregonus</a>
</div>
<div class="fish-item">
<img src="img/fish15.png" alt="Көкшұбар, Рипус, Coregonus albula ladogensis" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal15">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal15">Көкшұбар, Рипус, Coregonus albula ladogensis</a>
</div>
<div class="fish-item">
<img src="img/fish16.png" alt="Күміс мөңке, Серебряный карась, Carassius gibelio" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal16">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal16">Күміс мөңке, Серебряный карась, Carassius gibelio</a>
</div>
<!-- Добавьте рыб для буквы "" -->
<a name="p"><h3>П</h3></a>
<div class="fish-item">
<img src="img/fish23.png" alt="Пайдабалық, Пелядь, Coregonus peled" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal23">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal23">Пайдабалық, Пелядь, Coregonus peled</a>
</div>
</div>
<!-- Второй столбец -->
<div class="col-md-3">
<a name="k1"><h3>Қ</h3></a>
<div class="fish-item">
<img src="img/fish17.png" alt="Қарабалық, Маринка, Schizothorax intermedius" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal17">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal17">Қарабалық, Маринка, Schizothorax intermedius</a>
</div>
<div class="fish-item">
<img src="img/fish18.png" alt="Қаракөз, Вобла, Rutilus capicus " class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal18">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal18">Қаракөз, Вобла, Rutilus capicus </a>
</div>
<div class="fish-item">
<img src="img/fish19.png" alt="Қарапайым көксерке, Обыкновенный судак, Sander lucioperca" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal19">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal19">Қарапайым көксерке, Обыкновенный судак, Sander lucioperca</a>
</div>
<div class="fish-item">
<img src="img/fish20.png" alt="Қызылқанат, Красноперка, Scardinius erythrophthalmus" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal20">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal20">Қызылқанат, Красноперка, Scardinius erythrophthalmus</a>
</div>
<!-- Добавьте рыб для буквы "" -->
<a name="c"><h3>С</h3></a>
<div class="fish-item">
<img src="img/fish24.png" alt="Сазан, Сазан, Cyprinus carpio" class="fish-image" data-bs-toggle="modal" data-bs-target="#fishModal24">
<a href="#" class="fish-name" data-bs-toggle="modal" data-bs-target="#fishModal24">Сазан, Сазан, Cyprinus carpio</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/script.js"></script> <!-- Подключение JS файла -->
</body>
</html>