function img() {
return gulp.src(paths.images.src, {
encoding: false
})
.pipe(imagemin())
.pipe(gulp.dest(paths.images.dest));
}
Хочу узнать как верстальщики сейчас инспектируют Figma дизайны
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Название страницы</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">1...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">2...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">3...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">4...</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
.wrapper .tab {
color: blue;
}
.wrapper .active {
color: red;
}.wrapper .tab {
color: blue;
}
.wrapper .tab.active {
color: red;
}
$fileName = md5(microtime() . rand(0,1000)); 
$items = [
'My Tasks' => [ // уникальный ключ для каждого элемента
'text' => '130 / 500', // текст, который показывается для элемента в span
'color' => 'bg-fusion-400', // цвет
'progress_wrapper_class' => 'mb-3', // класс для progress (уникальный у User Testing) или использовать if, как в примере ниже
'progress_value' => 65, // значение progress bar
],
'Transfered' => [
'text' => '440 TB',
'color' => 'bg-success-500',
'progress_wrapper_class' => 'mb-3',
'progress_value' => 34,
],
// остальные элементы
];<?php foreach ($items as $key => $item) : ?>
<div class="d-flex <?php if ($key == 'My Tasks'): ?>mt-2<?php endif; ?>">
<?= $key ?>
<span class="d-inline-block ml-auto"><?= $item['text'] ?></span>
</div>
<div class="progress progress-sm mb-3">
<div class="progress-bar <?= $item['color'] ?>" role="progressbar" style="width: <?= $item['progress_value'] ?>%;" aria-valuenow="<?= $item['progress_value'] ?>" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<?php endforeach; ?>
=(ЧАС(ТДАТА())-ЧАС(A1))*3 (формат ячейки с формулой всегда Общий) 
Хорошо бы если на чистом css
но и js тоже можно
document.addEventListener('click', ({ target: { tagName, parentNode: p } }) => {
if (tagName === 'SUMMARY') {
document.querySelectorAll('details').forEach(n => n.open = n.open && n === p);
}
});
// или
const details = document.querySelectorAll('details');
const onClick = e => details.forEach(n => n.open = n.open && n === e.target.parentNode);
details.forEach(n => n.children[0].addEventListener('click', onClick));
const details = document.querySelectorAll("details");
details.forEach((targetDetail) => {
targetDetail.addEventListener("click", () => {
details.forEach((detail) => {
if (detail !== targetDetail) {
detail.removeAttribute("open");
}
});
});
});