Eugeny Galkovskiy / kbenergy_new

Commit 45ba031d9970207f1f4b99cd628fc894c81e53d0

Authored by Volodymyr
1 parent 71161f15

add product modal on main page

Showing 4 changed files with 599 additions and 186 deletions   Show diff stats
Inline Side-by-side
frontend/assets/ProductAsset.php 0 → 100644
  Show/Hide comments   View file @45ba031
  1 +<?php
  2 +
  3 + namespace frontend\assets;
  4 +
  5 + use yii\web\AssetBundle;
  6 +
  7 + /**
  8 + * Main frontend application asset bundle.
  9 + */
  10 + class ProductAsset extends AssetBundle
  11 + {
  12 + public $basePath = '@webroot';
  13 + public $baseUrl = '@web';
  14 + public $css = [
  15 + 'css/product.css',
  16 + ];
  17 + public $js = [
  18 + 'js/product.js',
  19 + ];
  20 + public $depends = [
  21 + 'frontend\assets\AppAsset',
  22 + ];
  23 + }
  24 +
0 25 \ No newline at end of file
... ...
frontend/views/site/index.php
  Show/Hide comments   View file @45ba031
1 1 <?php
2   -
3   - /**
4   - * @var $this yii\web\View
5   - * @var $slider \common\models\Slider
6   - * @var $objects \common\models\Objectkb
7   - */
8   -
9   - use common\models\Settings;
10   - use frontend\assets\MapAsset;
11   - use frontend\assets\IndexAsset;
12   - use frontend\assets\FaqAsset;
13   - use yii\web\View;
14   - use yii\helpers\Url;
15   -
16   - MapAsset::register($this);
17   - IndexAsset::register($this);
18   - FaqAsset::register($this);
19   - $settings = Settings::getInstance();
20   - $this->title = 'KB Energy';
21   - $currentLang = \artbox\core\models\Language::getCurrent();
22   -
23   - $coordinates = [];
24   - $coordinates['lat'] = empty($settings->lat) ? 0 : $settings->lat;
25   - $coordinates['lon'] = empty($settings->lon) ? 0 : $settings->lon;
26 2  
  3 +/**
  4 + * @var $this yii\web\View
  5 + * @var $slider \common\models\Slider
  6 + * @var $objects \common\models\Objectkb
  7 + */
  8 +
  9 +use artbox\core\models\Language;
  10 +use common\models\Settings;
  11 +use frontend\assets\MapAsset;
  12 +use frontend\assets\IndexAsset;
  13 +use frontend\assets\FaqAsset;
  14 +use frontend\assets\ProductAsset;
  15 +use yii\web\View;
  16 +use yii\helpers\Url;
  17 +
  18 +MapAsset::register($this);
  19 +IndexAsset::register($this);
  20 +FaqAsset::register($this);
  21 +ProductAsset::register($this);
  22 +$settings = Settings::getInstance();
  23 +$this->title = 'KB Energy';
  24 +$currentLang = Language::getCurrent();
  25 +
  26 +$coordinates = [];
  27 +$coordinates['lat'] = empty($settings->lat) ? 0 : $settings->lat;
  28 +$coordinates['lon'] = empty($settings->lon) ? 0 : $settings->lon;
27 29 ?>
28   -
29 30 <div id="main-page" class="new-index">
30 31 <section class="main-about" style="background-image: url('/img/new-index/section-1-bg.jpg')">
31 32 <div class="container">
... ... @@ -36,7 +37,10 @@
36 37 <?= \Yii::t('app', 'main-about__title') ?>
37 38 </div>
38 39 <div class="main-about__button">
39   - <a href="#" class="btn button1 icon_phone modaled init-button-consultation press-consultation" data-title="Отримати консультацію спеціаліста" data-toggle="modal" data-target="#feedback-modal">
  40 + <a href="#"
  41 + class="btn button1 icon_phone modaled init-button-consultation press-consultation"
  42 + data-title="Отримати консультацію спеціаліста" data-toggle="modal"
  43 + data-target="#feedback-modal">
40 44 <?= \Yii::t('app', 'get_consult2') ?>
41 45 </a>
42 46 </div>
... ... @@ -65,23 +69,23 @@
65 69 </div>
66 70 </div>
67 71 </section>
68   - <?php if(!empty($tiles)) { ?>
69   - <section class="second-about">
70   - <div class="container">
71   - <div class="row">
72   - <?php foreach ($tiles as $tile) { ?>
73   - <div class="col-xs-6 col-sm-6 col-md-3 second-about__col">
74   - <div class="second-about__item">
75   - <a href="<?=$tile->lang->link ?>">
76   - <img src="<?= $tile->image->getImg([]) ?>" alt="">
77   - <span><?= $tile->lang->title ?></span>
78   - </a>
79   - </div>
  72 + <?php if (!empty($tiles)) { ?>
  73 + <section class="second-about">
  74 + <div class="container">
  75 + <div class="row">
  76 + <?php foreach ($tiles as $tile) { ?>
  77 + <div class="col-xs-6 col-sm-6 col-md-3 second-about__col">
  78 + <div class="second-about__item">
  79 + <a href="<?= $tile->lang->link ?>">
  80 + <img src="<?= $tile->image->getImg([]) ?>" alt="">
  81 + <span><?= $tile->lang->title ?></span>
  82 + </a>
  83 + </div>
  84 + </div>
  85 + <?php } ?>
80 86 </div>
81   - <?php } ?>
82 87 </div>
83   - </div>
84   - </section>
  88 + </section>
85 89 <?php } ?>
86 90 <section class="index-solution">
87 91 <div class="container">
... ... @@ -90,7 +94,7 @@
90 94 <div class="index-solution__title index-titles"><?= \Yii::t('app', 'index-solution__title') ?></div>
91 95 </div>
92 96 </div>
93   - <?=$this->render('_objects',['objects'=>$forPrivate]) ?>
  97 + <?= $this->render('_objects', ['objects' => $forPrivate]) ?>
94 98 <div class="row row-flex justify-content-center">
95 99 <div class="index-solution__more">
96 100 <a href="#" class="animation-hover"><?= \Yii::t('app', 'index-solution__more') ?></a>
... ... @@ -112,7 +116,8 @@
112 116 <!--обрезать по высоте в 211px-->
113 117 <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
114 118 </a>
115   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
  119 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
  120 + "Под ключ"</a>
116 121 <div class="index-solution-slider__item_price">1740000.00 $</div>
117 122 </div>
118 123 </div>
... ... @@ -122,7 +127,8 @@
122 127 <!--обрезать по высоте в 211px-->
123 128 <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
124 129 </a>
125   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
  130 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
  131 + кВт"Под ключ"</a>
126 132 <div class="index-solution-slider__item_price">480000.00 $</div>
127 133 </div>
128 134 </div>
... ... @@ -132,7 +138,8 @@
132 138 <!--обрезать по высоте в 211px-->
133 139 <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
134 140 </a>
135   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
  141 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
  142 + "Под ключ"</a>
136 143 <div class="index-solution-slider__item_price">1740000.00 $</div>
137 144 </div>
138 145 </div>
... ... @@ -142,7 +149,8 @@
142 149 <!--обрезать по высоте в 211px-->
143 150 <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
144 151 </a>
145   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
  152 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
  153 + кВт"Под ключ"</a>
146 154 <div class="index-solution-slider__item_price">480000.00 $</div>
147 155 </div>
148 156 </div>
... ... @@ -152,7 +160,8 @@
152 160 <!--обрезать по высоте в 211px-->
153 161 <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
154 162 </a>
155   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
  163 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
  164 + "Под ключ"</a>
156 165 <div class="index-solution-slider__item_price">1740000.00 $</div>
157 166 </div>
158 167 </div>
... ... @@ -162,7 +171,8 @@
162 171 <!--обрезать по высоте в 211px-->
163 172 <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
164 173 </a>
165   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
  174 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
  175 + кВт"Под ключ"</a>
166 176 <div class="index-solution-slider__item_price">480000.00 $</div>
167 177 </div>
168 178 </div>
... ... @@ -176,7 +186,7 @@
176 186 <div class="index-solution__title index-titles"><?= \Yii::t('app', 'index-solution__title_company') ?></div>
177 187 </div>
178 188 </div>
179   - <?=$this->render('_objects',['objects'=>$forCompanies]) ?>
  189 + <?= $this->render('_objects', ['objects' => $forCompanies]) ?>
180 190 <div class="row row-flex justify-content-center">
181 191 <div class="index-solution__more">
182 192 <a href="#" class="animation-hover"><?= \Yii::t('app', 'index-solution__more') ?></a>
... ... @@ -198,7 +208,8 @@
198 208 <!--обрезать по высоте в 211px-->
199 209 <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
200 210 </a>
201   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
  211 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
  212 + "Под ключ"</a>
202 213 <div class="index-solution-slider__item_price">1740000.00 $</div>
203 214 </div>
204 215 </div>
... ... @@ -208,7 +219,8 @@
208 219 <!--обрезать по высоте в 211px-->
209 220 <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
210 221 </a>
211   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
  222 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
  223 + кВт"Под ключ"</a>
212 224 <div class="index-solution-slider__item_price">480000.00 $</div>
213 225 </div>
214 226 </div>
... ... @@ -218,7 +230,8 @@
218 230 <!--обрезать по высоте в 211px-->
219 231 <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
220 232 </a>
221   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
  233 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
  234 + "Под ключ"</a>
222 235 <div class="index-solution-slider__item_price">1740000.00 $</div>
223 236 </div>
224 237 </div>
... ... @@ -228,7 +241,8 @@
228 241 <!--обрезать по высоте в 211px-->
229 242 <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
230 243 </a>
231   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
  244 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
  245 + кВт"Под ключ"</a>
232 246 <div class="index-solution-slider__item_price">480000.00 $</div>
233 247 </div>
234 248 </div>
... ... @@ -238,7 +252,8 @@
238 252 <!--обрезать по высоте в 211px-->
239 253 <img src="/img/new-index/slider-items/slider-item-1.jpg" alt="">
240 254 </a>
241   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт "Под ключ"</a>
  255 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 2 МВт
  256 + "Под ключ"</a>
242 257 <div class="index-solution-slider__item_price">1740000.00 $</div>
243 258 </div>
244 259 </div>
... ... @@ -248,7 +263,8 @@
248 263 <!--обрезать по высоте в 211px-->
249 264 <img src="/img/new-index/slider-items/slider-item-2.jpg" alt="">
250 265 </a>
251   - <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500 кВт"Под ключ"</a>
  266 + <a href="#" class="index-solution-slider__item_link">Промышленная солнечная электростанция 500
  267 + кВт"Под ключ"</a>
252 268 <div class="index-solution-slider__item_price">480000.00 $</div>
253 269 </div>
254 270 </div>
... ... @@ -274,14 +290,15 @@
274 290 <div class="income-calculator__left_title"><?= \Yii::t('app', 'income-calculator__left_title-1') ?></div>
275 291 </div>
276 292 <div class="col-xs-12">
277   - <div class="calc-range calc-range-1"
  293 + <div class="calc-range calc-range-1"
278 294 data-min="0"
279 295 data-max="50"
280 296 data-from="2.5"
281 297 >
282 298 <div class="price_filter first_price_li">
283 299 <div class="price_slider">
284   - <input type="text" id="price_interval" name="price_interval" value="" style="display: none"/>
  300 + <input type="text" id="price_interval" name="price_interval" value=""
  301 + style="display: none"/>
285 302 </div>
286 303 </div>
287 304 </div>
... ... @@ -292,14 +309,15 @@
292 309 <div class="income-calculator__left_title"><?= \Yii::t('app', 'income-calculator__left_title-2') ?></div>
293 310 </div>
294 311 <div class="col-xs-12">
295   - <div class="calc-range calc-range-2"
  312 + <div class="calc-range calc-range-2"
296 313 data-min="0"
297 314 data-max="5000"
298 315 data-from="1500"
299 316 >
300 317 <div class="price_filter first_price_li">
301 318 <div class="price_slider">
302   - <input type="text" id="price_interval2" name="price_interval" value="" style="display: none"/>
  319 + <input type="text" id="price_interval2" name="price_interval" value=""
  320 + style="display: none"/>
303 321 </div>
304 322 </div>
305 323 </div>
... ... @@ -327,7 +345,8 @@
327 345 </div>
328 346 <div class="row row-flex justify-content-center">
329 347 <div class="income-calculator__button">
330   - <a href="#" class="animation-hover" data-title="Отримати консультацію спеціаліста" data-toggle="modal" data-target="#feedback-modal">
  348 + <a href="#" class="animation-hover" data-title="Отримати консультацію спеціаліста"
  349 + data-toggle="modal" data-target="#feedback-modal">
331 350 <?= \Yii::t('app', 'get_consult2') ?>
332 351 </a>
333 352 </div>
... ... @@ -346,22 +365,28 @@
346 365 <div class="col-md-12 partners-wr__col">
347 366 <ul class="owl-carousel customers">
348 367 <li class="item">
349   - <a href="#" target="_blank"><img src="/img/customer-1.png" alt="" class="img-responsive"></a>
  368 + <a href="#" target="_blank"><img src="/img/customer-1.png" alt=""
  369 + class="img-responsive"></a>
350 370 </li>
351 371 <li class="item">
352   - <a href="#" target="_blank"><img src="/img/customer-2.png" alt="" class="img-responsive"></a>
  372 + <a href="#" target="_blank"><img src="/img/customer-2.png" alt=""
  373 + class="img-responsive"></a>
353 374 </li>
354 375 <li class="item">
355   - <a href="#" target="_blank"><img src="/img/customer-3.png" alt="" class="img-responsive"></a>
  376 + <a href="#" target="_blank"><img src="/img/customer-3.png" alt=""
  377 + class="img-responsive"></a>
356 378 </li>
357 379 <li class="item">
358   - <a href="#" target="_blank"><img src="/img/customer-4.png" alt="" class="img-responsive"></a>
  380 + <a href="#" target="_blank"><img src="/img/customer-4.png" alt=""
  381 + class="img-responsive"></a>
359 382 </li>
360 383 <li class="item">
361   - <a href="#" target="_blank"><img src="/img/customer-5.png" alt="" class="img-responsive"></a>
  384 + <a href="#" target="_blank"><img src="/img/customer-5.png" alt=""
  385 + class="img-responsive"></a>
362 386 </li>
363 387 <li class="item">
364   - <a href="#" target="_blank"><img src="/img/customer-6.png" alt="" class="img-responsive"></a>
  388 + <a href="#" target="_blank"><img src="/img/customer-6.png" alt=""
  389 + class="img-responsive"></a>
365 390 </li>
366 391 </ul>
367 392 <!-- /.owl-carousel -->
... ... @@ -372,125 +397,180 @@
372 397 </section>
373 398  
374 399  
375   - <section class="section-text">
376   - <div class="container">
377   - <div class="row">
378   - <div class="col-xs-12">
379   - <div class="home-text-wr">
380   - <?php if($currentLang->url == 'ru'){ ?>
381   - <p>Проектирование солнечных станций в Украине — это разработка технической документации, а также сметы вашего проекта.</p>
382   -
383   - <p>В проектирование входит ТЭО, обязательный анализ потребления энергии, электросхема, продумывание монтажа опорных компонентов, а также расчеты наиболее оптимального угла для выработки солнечной энергии и согласование с контролирующими органами.</p>
384   -
385   - <h2>Этапы проектирования солнечных электростанции</h2>
386   -
387   - <p>В перечень услуг проектирования солнечной электростанции входит:</p>
388   - <ul>
389   - <li>Составление пояснительной записки в которой собраны данные про показатели электроснабжения, электропотребителей, расчет нагрузок, учет электроэнергии, контур заземления, защитные меры, и расчетная таблица электрической нагрузки на розетки.</li>
390   -
391   - <li>Оценка влияния на окружающею среду — это оценка влияния СЭС на близлежащие водоемы, флору и фауну региона строительства объекта.</li>
392   -
393   - <li>Генеральный план проекта солнечной электростанции — это чертеж-карта с инженерными отметками размещения объекта.</li>
394   -
395   - <li>Архитектурно-строительные решения — это составление реализуемого фундамента под КТП (комплектные трансформаторные подстанции), проведение видеонаблюдения и охраны территории, а также монтаж подходящих металлоконструкций крепления фотомодулей.</li>
396   -
397   - <li>Описание методов изготовления и вида металла для металлоконструкций вашего проекта.</li>
398   -
399   - <li>Электротехнические решения — готовый документ в котором описываются энергоэффективные решения для вашего проекта, в частности, возможность выработки солнечной энергии с помощью СЭС. </li>
400   -
401   - <li>Создание 3D-модели будущей СЭС с помощью специального программного обеспечения.</li>
402   -
403   - <li>Сметная документация — это завершающий этап проектирования солнечных электростанций с описанием целесообразности и реализуемости, в него также входит просчет объекта (как государственного) на основе денег из бюджета Украины для дальнейшего подключения по Зеленому тарифу.</li>
404   - </ul>
405   - <h2>Строительство солнечных электростанций</h2>
406   -
407   - <p>После проектирования СЭС осуществляется строительство солнечных электростанций. На этом этапе делают опорные установки и конструкции под специальным углом наклона, также на крышу монтируют кремниевые или поликристаллические солнечные батареи.</p>
408   -
409   - <h2>Почему это мы?</h2>
410   -
411   - <p>Наш большой опыт позволил воплотить в жизнь уже свыше 200 проектов, а также проектирование первой солнечной электростанции по Зеленому тарифу в Киевской области. Преимущества компании KB Energy:</p>
412   - <ul>
413   - <li>Полное сопровождение клиентов по Зеленому тарифу;</li>
414   -
415   - <li>Штат высококвалифированных команды;</li>
416   -
417   - <li>Поставка оригинального оборудования;</li>
418   -
419   - <li>Консультация по всем вопросам входящее в стоимость; </li>
420   -
421   - <li>Предоставляем решения для частных и коммерческих проектов;</li>
422   -
423   - <li>Партнерство с Укргазбанком;</li>
424   -
425   - <li>Быстрая реализация вашего проекта.</li></ul>
426   - <?php } else if($currentLang->url == 'ua') {?>
427   - <p>Проектування сонячних станцій в Україні - це розробка технічної документації, а також кошторису вашого проекту.</p>
428   -
429   - <p>У проектування входить ТЕО, обов'язковий аналіз споживання енергії, схема живлення, продумування монтажу опорних компонентів, а також розрахунки найбільш оптимального кута для вироблення сонячної енергії і узгодження з контролюючими органами.</p>
430   -
431   - <h2>Етапи проектування сонячних електростанції</h2>
432   -
433   - <p>У перелік послуг проектування сонячної електростанції входить:</p>
434   - <ul>
435   - <li>Складання пояснювальної записки в якій зібрані дані про показники електропостачання, електроспоживачів, розрахунок навантажень, облік електроенергії, контур заземлення, захисні заходи, і розрахункова таблиця електричного навантаження на розетки. </li>
436   - <li>Оцінка впливу на навколишнє середовище - це оцінка впливу СЕС на довколишні водойми, флору і фауну регіону будівництва об'єкта. </li>
437   - <li>Генеральний план проекту сонячної електростанції - це креслення-карта з інженерними відмітками розміщення об'єкта. </li>
438   - <li>Архітектурно-будівельні рішення - це складання реалізованого фундаменту під КТП (комплектні трансформаторні підстанції), проведення відеоспостереження та охорони території, а також монтаж відповідних металоконструкцій кріплення фотомодулів. </li>
439   - <li>Опис методів виготовлення і виду металу для металоконструкцій вашого проекту. </li>
440   - <li>Електротехнічні рішення - готовий документ в якому описуються енергоефективні рішення для вашого проекту, зокрема, можливість вироблення сонячної енергії за допомогою СЕС. </li>
441   - <li>Створення 3D-моделі майбутньої СЕС за допомогою спеціального програмного забезпечення. </li>
442   - <li>Кошторисна документація - це завершальний етап проектування сонячних електростанцій з описом доцільності і можливості бути реалізованим, в нього також входить прорахунок об'єкта (як державного) на основі грошей з бюджету України для подальшого підключення по Зеленим тарифом. </li>
443   - </ul>
444   - <h2>Будівництво сонячних електростанцій</h2>
445   -
446   - <p>Після проектування СЕС здійснюється будівництво сонячних електростанцій. На цьому етапі роблять опорні установки і конструкції під спеціальним кутом нахилу, також на дах монтують кремнієві або полікристалічні сонячні батареї.</p>
447   -
448   - <h2>Чому це ми?</h2>
449   -
450   - <p>Наш великий досвід дозволив втілити в життя вже понад 200 проектів, а також проектування першої сонячної електростанції по Зеленим тарифом в Київській області. Переваги компанії KB Energy:</p>
451   - <ul>
452   - <li>Повний супровід клієнтів по Зеленим тарифом; </li>
453   - <li>Штат висококваліфірованних команди; </li>
454   - <li>Поставка оригінального устаткування; </li>
455   - <li>Консультація з усіх питань входить у вартість; </li>
456   - <li>Надаємо рішення для приватних і комерційних проектів; </li>
457   - <li>Партнерство з Укргазбанком; </li>
458   - <li>Швидка реалізація вашого проекту. </li>
459   - </ul>
460   - <?php } ?>
461   - </div>
462   - <div class="more-text">
463   - <span class="more-text__span" data-more="<?=\Yii::t('app', 'more-text')?>" data-hide="<?=\Yii::t('app', 'hide-text')?>"><?=\Yii::t('app', 'more-text')?><i></i></span>
464   - </div>
  400 + <section class="section-text">
  401 + <div class="container">
  402 + <div class="row">
  403 + <div class="col-xs-12">
  404 + <div class="home-text-wr">
  405 + <?php if ($currentLang->url == 'ru') { ?>
  406 + <p>Проектирование солнечных станций в Украине — это разработка технической документации, а
  407 + также сметы вашего проекта.</p>
  408 +
  409 + <p>В проектирование входит ТЭО, обязательный анализ потребления энергии, электросхема,
  410 + продумывание монтажа опорных компонентов, а также расчеты наиболее оптимального угла для
  411 + выработки солнечной энергии и согласование с контролирующими органами.</p>
  412 +
  413 + <h2>Этапы проектирования солнечных электростанции</h2>
  414 +
  415 + <p>В перечень услуг проектирования солнечной электростанции входит:</p>
  416 + <ul>
  417 + <li>Составление пояснительной записки в которой собраны данные про показатели
  418 + электроснабжения, электропотребителей, расчет нагрузок, учет электроэнергии, контур
  419 + заземления, защитные меры, и расчетная таблица электрической нагрузки на розетки.
  420 + </li>
  421 +
  422 + <li>Оценка влияния на окружающею среду — это оценка влияния СЭС на близлежащие водоемы,
  423 + флору и фауну региона строительства объекта.
  424 + </li>
  425 +
  426 + <li>Генеральный план проекта солнечной электростанции — это чертеж-карта с инженерными
  427 + отметками размещения объекта.
  428 + </li>
  429 +
  430 + <li>Архитектурно-строительные решения — это составление реализуемого фундамента под КТП
  431 + (комплектные трансформаторные подстанции), проведение видеонаблюдения и охраны
  432 + территории, а также монтаж подходящих металлоконструкций крепления фотомодулей.
  433 + </li>
  434 +
  435 + <li>Описание методов изготовления и вида металла для металлоконструкций вашего
  436 + проекта.
  437 + </li>
  438 +
  439 + <li>Электротехнические решения — готовый документ в котором описываются
  440 + энергоэффективные решения для вашего проекта, в частности, возможность выработки
  441 + солнечной энергии с помощью СЭС.
  442 + </li>
  443 +
  444 + <li>Создание 3D-модели будущей СЭС с помощью специального программного обеспечения.</li>
  445 +
  446 + <li>Сметная документация — это завершающий этап проектирования солнечных электростанций
  447 + с описанием целесообразности и реализуемости, в него также входит просчет объекта
  448 + (как государственного) на основе денег из бюджета Украины для дальнейшего
  449 + подключения по Зеленому тарифу.
  450 + </li>
  451 + </ul>
  452 + <h2>Строительство солнечных электростанций</h2>
  453 +
  454 + <p>После проектирования СЭС осуществляется строительство солнечных электростанций. На этом
  455 + этапе делают опорные установки и конструкции под специальным углом наклона, также на
  456 + крышу монтируют кремниевые или поликристаллические солнечные батареи.</p>
  457 +
  458 + <h2>Почему это мы?</h2>
  459 +
  460 + <p>Наш большой опыт позволил воплотить в жизнь уже свыше 200 проектов, а также
  461 + проектирование первой солнечной электростанции по Зеленому тарифу в Киевской области.
  462 + Преимущества компании KB Energy:</p>
  463 + <ul>
  464 + <li>Полное сопровождение клиентов по Зеленому тарифу;</li>
  465 +
  466 + <li>Штат высококвалифированных команды;</li>
  467 +
  468 + <li>Поставка оригинального оборудования;</li>
  469 +
  470 + <li>Консультация по всем вопросам входящее в стоимость;</li>
  471 +
  472 + <li>Предоставляем решения для частных и коммерческих проектов;</li>
  473 +
  474 + <li>Партнерство с Укргазбанком;</li>
  475 +
  476 + <li>Быстрая реализация вашего проекта.</li>
  477 + </ul>
  478 + <?php } else if ($currentLang->url == 'ua') { ?>
  479 + <p>Проектування сонячних станцій в Україні - це розробка технічної документації, а також
  480 + кошторису вашого проекту.</p>
  481 +
  482 + <p>У проектування входить ТЕО, обов'язковий аналіз споживання енергії, схема живлення,
  483 + продумування монтажу опорних компонентів, а також розрахунки найбільш оптимального кута
  484 + для вироблення сонячної енергії і узгодження з контролюючими органами.</p>
  485 +
  486 + <h2>Етапи проектування сонячних електростанції</h2>
  487 +
  488 + <p>У перелік послуг проектування сонячної електростанції входить:</p>
  489 + <ul>
  490 + <li>Складання пояснювальної записки в якій зібрані дані про показники електропостачання,
  491 + електроспоживачів, розрахунок навантажень, облік електроенергії, контур заземлення,
  492 + захисні заходи, і розрахункова таблиця електричного навантаження на розетки.
  493 + </li>
  494 + <li>Оцінка впливу на навколишнє середовище - це оцінка впливу СЕС на довколишні водойми,
  495 + флору і фауну регіону будівництва об'єкта.
  496 + </li>
  497 + <li>Генеральний план проекту сонячної електростанції - це креслення-карта з інженерними
  498 + відмітками розміщення об'єкта.
  499 + </li>
  500 + <li>Архітектурно-будівельні рішення - це складання реалізованого фундаменту під КТП
  501 + (комплектні трансформаторні підстанції), проведення відеоспостереження та охорони
  502 + території, а також монтаж відповідних металоконструкцій кріплення фотомодулів.
  503 + </li>
  504 + <li>Опис методів виготовлення і виду металу для металоконструкцій вашого проекту.</li>
  505 + <li>Електротехнічні рішення - готовий документ в якому описуються енергоефективні
  506 + рішення для вашого проекту, зокрема, можливість вироблення сонячної енергії за
  507 + допомогою СЕС.
  508 + </li>
  509 + <li>Створення 3D-моделі майбутньої СЕС за допомогою спеціального програмного
  510 + забезпечення.
  511 + </li>
  512 + <li>Кошторисна документація - це завершальний етап проектування сонячних електростанцій
  513 + з описом доцільності і можливості бути реалізованим, в нього також входить
  514 + прорахунок об'єкта (як державного) на основі грошей з бюджету України для подальшого
  515 + підключення по Зеленим тарифом.
  516 + </li>
  517 + </ul>
  518 + <h2>Будівництво сонячних електростанцій</h2>
  519 +
  520 + <p>Після проектування СЕС здійснюється будівництво сонячних електростанцій. На цьому етапі
  521 + роблять опорні установки і конструкції під спеціальним кутом нахилу, також на дах
  522 + монтують кремнієві або полікристалічні сонячні батареї.</p>
  523 +
  524 + <h2>Чому це ми?</h2>
  525 +
  526 + <p>Наш великий досвід дозволив втілити в життя вже понад 200 проектів, а також проектування
  527 + першої сонячної електростанції по Зеленим тарифом в Київській області. Переваги компанії
  528 + KB Energy:</p>
  529 + <ul>
  530 + <li>Повний супровід клієнтів по Зеленим тарифом;</li>
  531 + <li>Штат висококваліфірованних команди;</li>
  532 + <li>Поставка оригінального устаткування;</li>
  533 + <li>Консультація з усіх питань входить у вартість;</li>
  534 + <li>Надаємо рішення для приватних і комерційних проектів;</li>
  535 + <li>Партнерство з Укргазбанком;</li>
  536 + <li>Швидка реалізація вашого проекту.</li>
  537 + </ul>
  538 + <?php } ?>
  539 + </div>
  540 + <div class="more-text">
  541 + <span class="more-text__span" data-more="<?= \Yii::t('app', 'more-text') ?>"
  542 + data-hide="<?= \Yii::t('app', 'hide-text') ?>"><?= \Yii::t('app', 'more-text') ?><i></i></span>
465 543 </div>
466 544 </div>
467 545 </div>
468   - </section>
  546 + </div>
  547 + </section>
469 548  
470 549  
471 550 <section class="media-about-section">
472 551 <div class="container">
473 552 <div class="row">
474 553 <div class="col-xs-12">
475   - <h2 class="media-about-section__title index-titles"><?=\Yii::t('app', 'index_medias1')?></h2>
  554 + <h2 class="media-about-section__title index-titles"><?= \Yii::t('app', 'index_medias1') ?></h2>
476 555 </div>
477 556 </div>
478 557 <div class="about row">
479 558 <div class="col-md-8 col-sm-7 col-xs-12 smi_left">
480 559 <div class="video">
481   - <iframe width="100%" height="100%" src="https://www.youtube.com/embed/4XJ_UHggzto" frameborder="0" allowfullscreen=""></iframe>
  560 + <iframe width="100%" height="100%" src="https://www.youtube.com/embed/4XJ_UHggzto"
  561 + frameborder="0" allowfullscreen=""></iframe>
482 562 </div>
483 563 </div>
484 564 <div class="col-md-4 col-sm-5 col-xs-12 smi_right">
485 565 <div class="media-about-section__text">
486   - <?=\Yii::t('app', 'index_medias2')?>
  566 + <?= \Yii::t('app', 'index_medias2') ?>
487 567 </div>
488 568 <div class="media-about-section__button">
489 569 <a
490   - href="<?= Url::toRoute(['object/index'])?>"
  570 + href="<?= Url::toRoute(['object/index']) ?>"
491 571 class="animation-hover"
492 572 >
493   - <?=\Yii::t('app', 'more_about_ours')?>
  573 + <?= \Yii::t('app', 'more_about_ours') ?>
494 574 </a>
495 575 </div>
496 576 </div>
... ... @@ -509,48 +589,75 @@
509 589 <div class="row">
510 590 <div class="col-xs-12">
511 591 <div class="faq__items">
512   - <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
  592 + <div class="faq__item" itemscope="" itemprop="mainEntity"
  593 + itemtype="https://schema.org/Question">
513 594 <div class="faq__item_close"></div>
514 595 <div class="faq__item_title" itemprop="name">Как это работает?</div>
515   - <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  596 + <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
  597 + itemtype="https://schema.org/Answer">
516 598 <div itemprop="text">
517   - <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
  599 + <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
  600 + и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
  601 + тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
  602 + средства за её продажу.</p>
518 603 </div>
519 604 </div>
520 605 </div>
521   - <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
  606 + <div class="faq__item" itemscope="" itemprop="mainEntity"
  607 + itemtype="https://schema.org/Question">
522 608 <div class="faq__item_close"></div>
523 609 <div class="faq__item_title" itemprop="name">Сколько нужно вкладывать время?</div>
524   - <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  610 + <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
  611 + itemtype="https://schema.org/Answer">
525 612 <div itemprop="text">
526   - <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
  613 + <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
  614 + и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
  615 + тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
  616 + средства за её продажу.</p>
527 617 </div>
528 618 </div>
529 619 </div>
530   - <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
  620 + <div class="faq__item" itemscope="" itemprop="mainEntity"
  621 + itemtype="https://schema.org/Question">
531 622 <div class="faq__item_close"></div>
532   - <div class="faq__item_title" itemprop="name">Как не упустить прибыль и зафиксировать ставку? </div>
533   - <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  623 + <div class="faq__item_title" itemprop="name">Как не упустить прибыль и зафиксировать
  624 + ставку?
  625 + </div>
  626 + <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
  627 + itemtype="https://schema.org/Answer">
534 628 <div itemprop="text">
535   - <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
  629 + <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
  630 + и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
  631 + тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
  632 + средства за её продажу.</p>
536 633 </div>
537 634 </div>
538 635 </div>
539   - <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
  636 + <div class="faq__item" itemscope="" itemprop="mainEntity"
  637 + itemtype="https://schema.org/Question">
540 638 <div class="faq__item_close"></div>
541 639 <div class="faq__item_title" itemprop="name">Кто платит?</div>
542   - <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  640 + <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
  641 + itemtype="https://schema.org/Answer">
543 642 <div itemprop="text">
544   - <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
  643 + <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
  644 + и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
  645 + тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
  646 + средства за её продажу.</p>
545 647 </div>
546 648 </div>
547 649 </div>
548   - <div class="faq__item" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
  650 + <div class="faq__item" itemscope="" itemprop="mainEntity"
  651 + itemtype="https://schema.org/Question">
549 652 <div class="faq__item_close"></div>
550 653 <div class="faq__item_title" itemprop="name">Что делать, если СЭС выйдет из строя?</div>
551   - <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
  654 + <div class="faq__item_text" itemscope="" itemprop="acceptedAnswer"
  655 + itemtype="https://schema.org/Answer">
552 656 <div itemprop="text">
553   - <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый» тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете средства за её продажу.</p>
  657 + <p>Сначала команда специалистов делает все необходимые замеры, разрабатывает проект
  658 + и устанавливает солнечную электростанцию. После мы помогаем оформить «зеленый»
  659 + тариф. Далее ваша станция генерирует электроэнергию и вы ежемесячно получаете
  660 + средства за её продажу.</p>
554 661 </div>
555 662 </div>
556 663 </div>
... ... @@ -561,27 +668,36 @@
561 668 </section>
562 669  
563 670 <section class="index-map">
564   - <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2541.835332126824!2d30.647180415730542!3d50.42553957947196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40d4c5184ae56b5f%3A0x90a021df035746cc!2z0YPQuy4g0KHQuNC80YTQtdGA0L7Qv9C-0LvRjNGB0LrQsNGPLCAxMywg0JrQuNC10LIsIDAyMDAw!5e0!3m2!1sru!2sua!4v1625051795776!5m2!1sru!2sua" width="100%" height="380" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  671 + <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2541.835332126824!2d30.647180415730542!3d50.42553957947196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40d4c5184ae56b5f%3A0x90a021df035746cc!2z0YPQuy4g0KHQuNC80YTQtdGA0L7Qv9C-0LvRjNGB0LrQsNGPLCAxMywg0JrQuNC10LIsIDAyMDAw!5e0!3m2!1sru!2sua!4v1625051795776!5m2!1sru!2sua"
  672 + width="100%" height="380" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
565 673 </section>
566 674 </div>
567   -
  675 +<a href="#" class="animation-hover" data-title="hhh" data-toggle="modal" data-target="#cardProduct">
  676 + Получить консультацию </a>
568 677 <!-- Modal -->
569 678 <div class="modal fade" id="cardProduct" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
570 679 <div class="modal-dialog modal-lg">
571 680 <div class="modal-content kb-modal-wrapper">
572 681 <div class="card-content">
573   - <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
574   - <div class="container">
575   - <div class="row">
  682 + <button type="button" class="btn-close close" data-dismiss="modal" data-bs-dismiss="modal"
  683 + aria-label="Close">
  684 + </button>
  685 + <div class="container big-container">
  686 + <div class="row row-flex">
576 687 <div class="col-md-4 modal-left">
577 688 <div class="product-image">
578   - <img src="./img/product.png" alt="Промышленная солнечная электростанция 2 МВт &#34;Под ключ&#34;">
  689 + <img src="/img/new-index/slider-items/slider-item-1.jpg"
  690 + alt="Промышленная солнечная электростанция 2 МВт &#34;Под ключ&#34;">
579 691 </div>
580 692 </div>
581 693 <div class="col-md-8 modal-right">
582 694 <div class="product-code">Код товара 9000</div>
583 695 <div class="product-title">Промышленная солнечная электростанция 2 МВт "Под ключ"</div>
584   - <div class="product-body">Промышленная солнечная электростанция устанавливается в целях продажи электроэнергии по "зеленому" тарифу для промышленных станций. Стоимость продажи электроэнергии по "зеленому" тарифу прописана законом Украины "Про электроэнергию" и составляет 0.1637 €/кВт∙ч для промышленных станций, установленных на крыше.</div>
  696 + <div class="product-body">Промышленная солнечная электростанция устанавливается в целях
  697 + продажи электроэнергии по "зеленому" тарифу для промышленных станций. Стоимость продажи
  698 + электроэнергии по "зеленому" тарифу прописана законом Украины "Про электроэнергию" и
  699 + составляет 0.1637 €/кВт∙ч для промышленных станций, установленных на крыше.
  700 + </div>
585 701 <form class="modal-form" method="POST" action="/action">
586 702 <input type="hidden" name="product_code" value="9000">
587 703 <div class="product-counter">
... ... @@ -594,7 +710,9 @@
594 710 <a class="product-counter__decrement"></a>
595 711 </div>
596 712 </div>
597   - <div class="product-counter__value" data-currency="$" data-price="1740000.00">1232</div>
  713 + <div class="product-counter__value" data-currency="$" data-price="1740000.00">
  714 + 1232
  715 + </div>
598 716 </label>
599 717 </div>
600 718 <div class="modal-form__inner">
... ...
frontend/web/css/product.css 0 → 100644
  Show/Hide comments   View file @45ba031
  1 +.modal-backdrop.show {
  2 + opacity: .8;
  3 +}
  4 +
  5 +@media (min-width: 992px) {
  6 + #cardProduct .modal-dialog {
  7 + width: auto;
  8 + max-width: 800px;
  9 + }
  10 +}
  11 +
  12 +.kb-modal-wrapper {
  13 + border: none;
  14 + border-radius: 0;
  15 + max-width: 730px;
  16 + margin: 0 auto;
  17 + padding: 1em 0;
  18 + box-shadow: 0px 4px 12px #3e3e3e;
  19 +}
  20 +
  21 +.kb-modal-wrapper .btn-close {
  22 + width: 24px;
  23 + height: 24px;
  24 + opacity: 1;
  25 + transform: rotate(45deg);
  26 + font-size: 0;
  27 + position: absolute;
  28 + top: 23px;
  29 + right: 22px;
  30 +}
  31 +
  32 +.kb-modal-wrapper .btn-close:before, .kb-modal-wrapper .btn-close:after {
  33 + content: '';
  34 + position: absolute;
  35 + left: 50%;
  36 + top: 50%;
  37 + background: #8e8f90;
  38 +}
  39 +
  40 +.kb-modal-wrapper .btn-close:before {
  41 + width: 2px;
  42 + height: 24px;
  43 + margin-left: -1px;
  44 + margin-top: -12px;
  45 +}
  46 +
  47 +.kb-modal-wrapper .btn-close:after {
  48 + width: 24px;
  49 + height: 2px;
  50 + margin-left: -12px;
  51 + margin-top: -1px;
  52 +
  53 +}
  54 +
  55 +.kb-modal-wrapper .card-content {
  56 + margin-top: 3.8em;
  57 +}
  58 +
  59 +.kb-modal-wrapper .product-image {
  60 + margin: 5px 20px;
  61 +}
  62 +
  63 +.kb-modal-wrapper .product-image img {
  64 + max-width: 250px;
  65 + display: block;
  66 + pointer-events: none;
  67 + margin: 0 auto 2em;
  68 +}
  69 +
  70 +.kb-modal-wrapper .product-code {
  71 + color: #8e8f90;
  72 + font-size: 13px;
  73 +}
  74 +
  75 +.kb-modal-wrapper .product-title {
  76 + font-size: 18px;
  77 + font-weight: bold;
  78 + line-height: 1.4em;
  79 + margin: 0.4em 0;
  80 +}
  81 +
  82 +.kb-modal-wrapper .product-code,
  83 +.kb-modal-wrapper .product-title {
  84 + max-width: 350px;
  85 +}
  86 +
  87 +.kb-modal-wrapper .product-body {
  88 + font-size: 15px;
  89 + line-height: 1.4em;
  90 + padding: 2px 0px;
  91 +}
  92 +
  93 +.btn.big-yellow {
  94 + width: 100%;
  95 + font-size: 13px;
  96 + font-weight: bold;
  97 + background-color: #ffd800;
  98 + text-transform: uppercase;
  99 + padding: 1em;
  100 + padding-top: calc(1em + 1px);
  101 + margin: 1em 0;
  102 + border-radius: 0;
  103 +}
  104 +
  105 +.btn.big-yellow:hover,
  106 +.btn.big-yellow:active {
  107 + background-color: #ffe764;
  108 + box-shadow: inset 0px 0px 0px 2px black, 0px 0px 20px rgba(0, 0, 0, 0.2) !important;
  109 + transition: 0.3s;
  110 +}
  111 +
  112 +.btn.big-yellow:active {
  113 + box-shadow: inset 0px 0px 0px 2px black, 0px 0px 30px rgba(0, 0, 0, 0.2) !important;
  114 + transform: scale(.95);
  115 +}
  116 +
  117 +.kb-modal-wrapper .modal-form {
  118 + padding-top: 5px;
  119 +}
  120 +
  121 +.kb-modal-wrapper .modal-form .product-counter {
  122 + border-bottom: 1px solid #ebebeb;
  123 + padding-bottom: 1em;
  124 + margin-bottom: 1em;
  125 +}
  126 +
  127 +.kb-modal-wrapper .modal-form label {
  128 + width: 100%;
  129 +}
  130 +
  131 +.kb-modal-wrapper .modal-form__inner .kb-input {
  132 + padding-top: 6px;
  133 + padding-bottom: 20px;
  134 +}
  135 +
  136 +.kb-modal-wrapper .kb-input .label-title {
  137 + font-size: 15px;
  138 + margin: 5px 0;
  139 +}
  140 +
  141 +.kb-modal-wrapper .kb-input input {
  142 + width: 100%;
  143 + display: block;
  144 + border: 1px solid #c1c3c7;
  145 + padding: 0.5em;
  146 + box-shadow: inset 2px 2px 4px rgb(190 190 190 / 50%);
  147 +}
  148 +
  149 +.kb-modal-wrapper .modal-right {
  150 + max-width: 450px;
  151 + margin: 0 0 0 30px;
  152 +}
  153 +
  154 +.kb-modal-wrapper .modal-form__inner {
  155 + max-width: 255px;
  156 +}
  157 +
  158 +.kb-modal-wrapper .modal-form__inner .submit-button-wr {
  159 + margin-top: -1px;
  160 + margin-bottom: 1px;
  161 +}
  162 +
  163 +.kb-modal-wrapper::after {
  164 + content: '';
  165 + position: absolute;
  166 + width: 100%;
  167 + bottom: 0;
  168 + left: 0;
  169 + height: 2px;
  170 + background: rgb(30, 178, 105);
  171 + background: linear-gradient(270deg, rgba(30, 178, 105, 1) 0%, rgba(0, 150, 215, 1) 100%);
  172 +}
  173 +
  174 +.product-counter__label {
  175 + color: #8e8f90;
  176 + font-size: 13px;
  177 +}
  178 +
  179 +.product-counter__value {
  180 + font-size: 15px;
  181 + font-weight: bold;
  182 + color: #0096d6;
  183 + margin-left: 20px;
  184 +}
  185 +
  186 +.product-counter,
  187 +.product-counter > * {
  188 + display: flex;
  189 + align-items: center;
  190 + flex-wrap: wrap;
  191 + margin: 8px 0;
  192 +}
  193 +
  194 +.big-container {
  195 + width: 100% !important;
  196 +}
  197 +
  198 +@media (min-width: 1400px) {
  199 + .big-container {
  200 + max-width: 1320px !important;
  201 + }
  202 +}
  203 +
  204 +.product-counter .kb-input input::-webkit-outer-spin-button,
  205 +.product-counter .kb-input input::-webkit-inner-spin-button {
  206 + -webkit-appearance: none;
  207 + margin: 0;
  208 +}
  209 +
  210 +.product-counter .kb-input input {
  211 + -moz-appearance: textfield;
  212 + text-align: center;
  213 + width: 42px;
  214 +}
  215 +
  216 +.product-counter__actions {
  217 + display: flex;
  218 + flex-direction: column;
  219 + align-items: center;
  220 + justify-content: space-between;
  221 + margin-left: 6px;
  222 +}
  223 +
  224 +.product-counter__input {
  225 + display: flex;
  226 + margin: 0 12px;
  227 +}
  228 +
  229 +.product-counter__actions > * {
  230 + display: block;
  231 + width: 18px;
  232 + height: 18px;
  233 + border: none;
  234 + background-color: #f6f6f6;
  235 + color: transparent;
  236 + background-position: center;
  237 + background-repeat: no-repeat;
  238 + cursor: pointer;
  239 +}
  240 +
  241 +.product-counter__actions .product-counter__increment {
  242 + background-image: url("data:image/svg+xml,%3Csvg id='plus' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23f6f6f6;%7D.cls-2%7Bfill:%238e8f90;%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' width='18' height='18'/%3E%3Crect class='cls-2' x='8' y='4' width='2' height='10'/%3E%3Crect class='cls-2' x='4' y='8' width='10' height='2'/%3E%3C/svg%3E");
  243 +}
  244 +
  245 +.product-counter__actions .product-counter__decrement {
  246 + background-image: url("data:image/svg+xml,%3Csvg id='minus' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%238e8f90;%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='4' y='8' width='10' height='2'/%3E%3C/svg%3E");
  247 +}
  248 +
  249 +.product-counter__actions > *:active {
  250 + opacity: .5;
  251 + transition: .2s;
  252 +}
  253 +
  254 +@media (max-width: 991px) {
  255 + .kb-modal-wrapper .modal-left,
  256 + .kb-modal-wrapper .modal-right {
  257 + width: 100%;
  258 + }
  259 +
  260 + .kb-modal-wrapper .modal-right {
  261 + margin: 0em 0.5em;
  262 + }
  263 +
  264 + .kb-modal-wrapper .modal-form__inner {
  265 + max-width: 100%;
  266 + }
  267 +
  268 + .product-counter__input {
  269 + flex: 1;
  270 + }
  271 +}
0 272 \ No newline at end of file
... ...
frontend/web/js/product.js 0 → 100644
  Show/Hide comments   View file @45ba031