forked from izu/student-web-if-development-kit
74 lines
6.6 KiB
JavaScript
74 lines
6.6 KiB
JavaScript
const fs = require('fs');
|
|
let c = fs.readFileSync('groups/LimaEm/index.html', 'utf8');
|
|
|
|
const oldHeroGrad = '<div class=\"absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0\"></div>';
|
|
const newHeroGrad = '<div class=\"absolute inset-0 z-0\" style=\"background: linear-gradient(to right, #003150 0%, rgba(0, 49, 80, 0.8) 50%, transparent 100%);\"></div>';
|
|
c = c.replace(oldHeroGrad, newHeroGrad);
|
|
|
|
const oldPhotoStr = \<!-- --- Right: Photo --- -->
|
|
<div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
|
|
|
|
<!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
|
|
<div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
|
|
bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
|
|
|
|
<!-- Frame foto — overflow hidden, foto full width tanpa crop -->
|
|
<div
|
|
class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
|
|
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
|
alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
|
|
transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
|
|
<!-- Gradient overlay bawah -->
|
|
<div class="absolute inset-0
|
|
bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
|
|
opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
|
|
</div>
|
|
|
|
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
|
<div class="absolute z-20 bottom-[-3%] left-[0%]
|
|
bg-hmif-secondary text-hmif-primary
|
|
rounded-xl px-4 py-3 text-center shadow-2xl
|
|
border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
|
</svg>
|
|
<p class="text-[11px] lg:text-xs font-bold leading-snug">
|
|
Inklusivitas &<br>Kolaborasi
|
|
</p>
|
|
</div>
|
|
</div>\;
|
|
const newPhotoStr = \<!-- --- Right: Photo --- -->
|
|
<div class="order-2 relative mt-8 lg:mt-0 flex justify-center lg:justify-end">
|
|
<!-- Offset shadow block biru tua -->
|
|
<div class="absolute inset-0 bg-hmif-primary translate-x-4 translate-y-4 rounded-2xl lg:rounded-3xl z-0 shadow-2xl" style="background-color: #003150;"></div>
|
|
|
|
<!-- Frame foto -->
|
|
<div class="relative w-full rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default bg-gray-200" style="aspect-ratio: 4/5;">
|
|
<img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
|
|
alt="Ruang Tumbuh HMIF Universitas Tanjungpura"
|
|
class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
|
|
<!-- Gradient overlay bawah -->
|
|
<div class="absolute inset-0 transition-opacity duration-500 opacity-70 group-hover:opacity-45" style="background: linear-gradient(to top, rgba(0, 49, 80, 0.45), transparent, transparent);"></div>
|
|
</div>
|
|
|
|
<!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
|
|
<div class="absolute z-20 bottom-0 left-0 -translate-x-2 translate-y-4 lg:-translate-x-6 lg:translate-y-6
|
|
bg-hmif-secondary text-hmif-primary
|
|
rounded-xl px-4 py-3 text-center shadow-2xl
|
|
border-2 border-white/20" style="min-width: 120px; max-width: 140px; background-color: #feb401; color: #003150;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
|
|
stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
|
</svg>
|
|
<p class="text-[11px] lg:text-xs font-bold leading-snug">
|
|
Inklusivitas &<br>Kolaborasi
|
|
</p>
|
|
</div>
|
|
</div>\;
|
|
c = c.replace(oldPhotoStr, newPhotoStr);
|
|
fs.writeFileSync('groups/LimaEm/index.html', c);
|
|
console.log('HTML layout fixed');
|