Web-programming-site-device/phoneHTML.html at main · TeslenkoPavlo/Web-programming-site-device · GitHub

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
<!DOCTYPE html>
<html lang="uk">
<head>
    <!-- Вказує, що документ використовує кодування UTF-8 -->
    <meta charset="UTF-8">
    <!-- Встановлює, що ширина екрана дорівнює ширині пристрою, а масштаб 1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Встановлює назву сторінки, яка буде відображатись у вкладці браузера -->
    <title>Список телефонів</title>
    <!-- Підключає зовнішній файл стилів для оформлення сторінки -->
    <link rel="stylesheet" href="phoneCSS.css">
</head>

<body>

<!-- Основний заголовок сторінки -->
<h1 class="page-title">Мобільні телефони</h1>
<!-- Мітка для випадаючого списку сортування -->
<label for="sort-options">Виводити</label>
<!-- Випадаючий список для вибору параметрів сортування -->
<select id="sort-options" onchange="shufflePhones()">
    <!-- Опція сортування за популярністю -->
    <option value="popularity">за популярністю</option>
    <!-- Опція сортування від дешевих до дорогих -->
    <option value="price-asc">від дешевих до дорогих</option>
    <!-- Опція сортування від дорогих до дешевих -->
    <option value="price-desc">від дорогих до дешевих</option>
    <!-- Опція сортування за відгуками -->
    <option value="reviews">за відгуками</option>
    <!-- Опція сортування за датою додавання -->
    <option value="date">за датою додавання</option>
</select>


<!-- Панель для фільтрації товарів за параметрами -->
<div class="filter-panel">
    <!-- Заголовок секції фільтрації -->
    <h3>Підбір за параметрами</h3>
    <!-- Група фільтрів для вибору виробників -->
    <div class="filter-group">
        <!-- Заголовок групи фільтрів -->
        <h4>Виробники</h4>
        <!-- Фільтр для вибору Apple -->
        <label><input type="checkbox" value="Apple" onchange="filterPhones()"> Apple</label>
        <!-- Фільтр для вибору Xiaomi -->
        <label><input type="checkbox" value="Xiaomi" onchange="filterPhones()"> Xiaomi</label>
        <!-- Фільтр для вибору Poco -->
        <label><input type="checkbox" value="Poco" onchange="filterPhones()"> Poco</label>
        <!-- Фільтр для вибору Samsung -->
        <label><input type="checkbox" value="Samsung" onchange="filterPhones()"> Samsung</label>
    </div>
</div>


<!-- Секція для списку телефонів -->
<section class="phone-list">

    <!-- Карточка товару: Apple iPhone 15 Pro Max -->
    <div class="phone-card" onmouseenter="showButton(this)" onmouseleave="hideButton(this)" data-image="img/iphone15.jpg" data-price="899">
        <!-- Зображення телефону -->
        <img src="img/iphone15.jpg" alt="Apple iPhone 15 Pro Max" class="phone-image">
        <!-- Інформація про телефон -->
        <div class="phone-info">
            <!-- Назва телефону -->
            <h2 class="phone-title">Apple iPhone 15 Pro Max</h2>
            <!-- Обсяг пам'яті -->
            <span class="storage">256 ГБ</span>
            <!-- Теги для опису характеристик телефону -->
            <div class="tags">
                <span>2023 рік</span>
                <span>камерафон</span>
                <span>хороший звук</span>
                <span>120 Гц</span>
                <span>NFC</span>
                <span>бездротова зарядка</span>
                <span>USB C 3 fast</span>
            </div>
            <!-- Деталі технічних характеристик -->
            <div class="details">
                <p><strong>Екран:</strong> 6.7", OLED, 2796x1290, 120 Гц</p>
                <p><strong>Камера:</strong> 3 модулі, 48 МП + 13.4 МП + 12.7 МП</p>
                <p><strong>Процесор:</strong> Apple A17 Pro</p>
                <p><strong>ОЗП:</strong> 8 ГБ, LPDDR5</p>
                <p><strong>Акумулятор:</strong> 4441 мАгод</p>
                <p><strong>Корпус:</strong> скло, 221 г, товщина 8 мм</p>
            </div>
        </div>
        <!-- Кнопка для перегляду деталей товару -->
        <button class="view-button" onclick="showProductDetails(this)">Переглянути товар</button>
    </div>

    <!-- Карточка товару: Xiaomi Redmi Note 13 Pro 5G -->
    <div class="phone-card" onmouseenter="showButton(this)" onmouseleave="hideButton(this)" data-image="img/redmi13.jpg" data-price="400">
        <!-- Зображення телефону -->
        <img src="img/redmi13.jpg" alt="Xiaomi Redmi Note 13 Pro 5G" class="phone-image">
        <!-- Інформація про телефон -->
        <div class="phone-info">
            <!-- Назва телефону -->
            <h2 class="phone-title">Xiaomi Redmi Note 13 Pro 5G</h2>
            <!-- Обсяг пам'яті -->
            <span class="storage">256 ГБ / 8 ГБ</span>
            <!-- Теги для опису характеристик телефону -->
            <div class="tags">
                <span>2023 рік</span>
                <span>Redmi Note</span>
                <span>камерафон</span>
                <span>120 Гц</span>
                <span>NFC</span>
                <span>без microSD</span>
                <span>fast charge</span>
            </div>
            <!-- Деталі технічних характеристик -->
            <div class="details">
                <p><strong>Екран:</strong> 6.67", AMOLED, 2712x1220, 120 Гц</p>
                <p><strong>Камера:</strong> 3 модулі, 200 МП + 8 МП + макро</p>
                <p><strong>Відео:</strong> fullHD 60 к/с, 4K, стабілізація</p>
                <p><strong>Процесор:</strong> Snapdragon 7s Gen 2</p>
                <p><strong>ОЗП:</strong> 8 ГБ, LPDDR4X</p>
                <p><strong>Акумулятор:</strong> 5100 мАгод</p>
                <p><strong>Корпус:</strong> скло, 187 г, товщина 8 мм</p>
            </div>
        </div>
        <!-- Кнопка для перегляду деталей товару -->
        <button class="view-button" onclick="showProductDetails(this)">Переглянути товар</button>
    </div>

    <!-- Карточка товару: Apple iPhone 16 Pro Max -->
    <div class="phone-card" onmouseenter="showButton(this)" onmouseleave="hideButton(this)" data-image="img/iphone16.jpg" data-price="1100">
        <!-- Зображення телефону -->
        <img src="img/iphone16.jpg" alt="Apple iPhone 16 Pro Max" class="phone-image">
        <!-- Інформація про телефон -->
        <div class="phone-info">
            <!-- Назва телефону -->
            <h2 class="phone-title">Apple iPhone 16 Pro Max</h2>
            <!-- Обсяг пам'яті -->
            <span class="storage">256 ГБ</span>
            <!-- Теги для опису характеристик телефону -->
            <div class="tags">
                <span>2024 рік</span>
                <span>камерафон</span>
                <span>флагман</span>
                <span>120 Гц</span>
                <span>NFC</span>
                <span>бездротова зарядка</span>
                <span>USB C 3 fast</span>
            </div>
            <!-- Деталі технічних характеристик -->
            <div class="details">
                <p><strong>Екран:</strong> 6.9", OLED (LTPO), 2868x1320, 120 Гц</p>
                <p><strong>Камера:</strong> 3 модулі, 48 МП + 48 МП + 12 МП</p>
                <p><strong>Відео:</strong> fullHD 60 к/с, 4K, стабілізація</p>
                <p><strong>Процесор:</strong> Apple A18 Pro</p>
                <p><strong>ОЗП:</strong> 8 ГБ, LPDDR5</p>
                <p><strong>Акумулятор:</strong> 4685 мАгод</p>
                <p><strong>Корпус:</strong> скло, 227 г, товщина 8 мм</p>
            </div>
        </div>
        <!-- Кнопка для перегляду деталей товару -->
        <button class="view-button" onclick="showProductDetails(this)">Переглянути товар</button>
    </div>

    <!-- Карточка товару: Poco X6 Pro -->
    <div class="phone-card" onmouseenter="showButton(this)" onmouseleave="hideButton(this)" data-image="img/poco.jpg" data-price="420">
        <!-- Зображення телефону -->
        <img src="img/poco.jpg" alt="Poco X6 Pro" class="phone-image">
        <!-- Інформація про телефон -->
        <div class="phone-info">
            <!-- Назва телефону -->
            <h2 class="phone-title">Poco X6 Pro</h2>
            <!-- Обсяг пам'яті -->
            <span class="storage">256 ГБ / 8 ГБ</span>
            <!-- Теги для опису характеристик телефону -->
            <div class="tags">
                <span>2023 рік</span>
                <span>X Series</span>
                <span>120 Гц</span>
                <span>NFC</span>
                <span>без microSD</span>
                <span>fast charge</span>
            </div>
            <!-- Деталі технічних характеристик -->
            <div class="details">
                <p><strong>Екран:</strong> 6.67", AMOLED, 2712x1220, 120 Гц</p>
                <p><strong>Камера:</strong> 3 модулі, 64 МП + 8 МП + макро</p>
                <p><strong>Відео:</strong> fullHD 60 к/с, 4K, стабілізація</p>
                <p><strong>Процесор:</strong> Dimensity 8300 Ultra</p>
                <p><strong>ОЗП:</strong> 8 ГБ, LPDDR5X</p>
                <p><strong>Акумулятор:</strong> 5000 мАгод</p>
                <p><strong>Корпус:</strong> пластик, 186 г, товщина 8 мм</p>
            </div>
        </div>
        <!-- Кнопка для перегляду деталей товару -->
        <button class="view-button" onclick="showProductDetails(this)">Переглянути товар</button>
    </div>

    <!-- Карточка товару: Samsung Galaxy S24 Ultra -->
    <div class="phone-card" onmouseenter="showButton(this)" onmouseleave="hideButton(this)" data-image="img/samsung24.jpg" data-price="1200">
        <!-- Зображення телефону -->
        <img src="img/samsung24.jpg" alt="Samsung Galaxy S24 Ultra" class="phone-image">
        <!-- Інформація про телефон -->
        <div class="phone-info">
            <!-- Назва телефону -->
            <h2 class="phone-title">Samsung Galaxy S24 Ultra</h2>
            <!-- Обсяг пам'яті -->
            <span class="storage">256 ГБ / 12 ГБ</span>
            <!-- Теги для опису характеристик телефону -->
            <div class="tags">
                <span>2024 рік</span>
                <span>Galaxy S</span>
                <span>камерафон</span>
                <span>флагман</span>
                <span>хороша автономність</span>
                <span>120 Гц</span>
                <span>NFC</span>
                <span>fast charge</span>
                <span>без microSD</span>
                <span>Wi-Fi 7</span>
                <span>USB C 3 fast</span>
            </div>
            <!-- Деталі технічних характеристик -->
            <div class="details">
                <p><strong>Екран:</strong> 6.8", AMOLED (LTPO), 3120x1440, 120 Гц</p>
                <p><strong>Камера:</strong> 4 модулі, 200 МП + 12 МП + 10 МП</p>
                <p><strong>Відео:</strong> fullHD 60 к/с, 4K, стабілізація</p>
                <p><strong>Процесор:</strong> Snapdragon 8 Gen 3</p>
                <p><strong>ОЗП:</strong> 12 ГБ, LPDDR5X</p>
                <p><strong>Акумулятор:</strong> 5000 мАгод</p>
                <p><strong>Корпус:</strong> скло, 232 г, товщина 9 мм</p>
            </div>
        </div>
        <!-- Кнопка для перегляду деталей товару -->
        <button class="view-button" onclick="showProductDetails(this)">Переглянути товар</button>
    </div>
</section>


<!-- Модальне вікно для деталей товару -->
<div id="product-modal" class="modal">
    <div class="modal-content">
        <!-- Кнопка закриття модального вікна -->
        <span class="close-button" onclick="closeProductModal()">×</span>
        <!-- Назва товару -->
        <h2 id="modal-title"></h2>
        <!-- Зображення товару -->
        <img id="modal-image" src="" alt="" class="modal-image">
        <!-- Ціна товару -->
        <p id="modal-price"></p>
        <!-- Кнопка для додавання товару до кошика -->
        <button class="buy-button">В кошик</button>
    </div>
</div>


<!-- Файл JS -->
<script src="phoneJS.js"></script>

</body>
</html>