591 lines
27 KiB
Plaintext
591 lines
27 KiB
Plaintext
<section class="relative w-full px-4 sm:px-6 mb-8">
|
||
<div class="absolute top-0 left-0 h-[400px] sm:h-[400px] md:h-full w-full md:w-1/3 bg-oren rounded-br-[30px] md:rounded-tr-[30px] md:rounded-br-[30px] -z-10"></div>
|
||
|
||
<div class="md:container md:max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-5 md:gap-8 items-center relative pt-12 md:pt-0">
|
||
<!-- Left Content -->
|
||
<div class="text-white rounded-lg flex flex-col items-center md:items-start relative z-10 h-full justify-end md:pt-16 px-4 md:px-0">
|
||
<div>
|
||
<h2 class="text-3xl sm:text-4xl font-bold mb-4 sm:mb-6 text-center md:text-left">Social Media</h2>
|
||
<p class="text-base sm:text-lg mb-6 sm:mb-8 text-center md:text-left max-w-md mx-auto md:mx-0">
|
||
Ikuti akun resmi DLH untuk berita, edukasi, dan ajakan aksi lingkungan langsung dari sumber terpercaya.
|
||
</p>
|
||
|
||
</div>
|
||
<!-- Pancoran -->
|
||
<div class="w-full flex justify-center md:justify-start hidden md:block">
|
||
<img src="@Url.Content("~/assets/images/home/pancoran.svg")" alt="DLH Pancoran" class="max-w-[200px] md:max-w-full h-auto">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Content -->
|
||
<div class="col-span-4 w-full">
|
||
<!-- Mobile post navigation tabs -->
|
||
<div class="flex overflow-x-auto gap-2 pb-3 mb-4 md:hidden social-tabs">
|
||
<button class="social-tab active flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/90 rounded-full text-sm font-medium transition-all shadow-sm" data-platform="all">
|
||
<span class="w-2 h-2 rounded-full bg-oren"></span>
|
||
Semua
|
||
</button>
|
||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="instagram">
|
||
<span class="w-2 h-2 rounded-full bg-gradient-to-br from-purple-500 to-pink-500"></span>
|
||
Instagram
|
||
</button>
|
||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="twitter">
|
||
<span class="w-2 h-2 rounded-full bg-blue-400"></span>
|
||
Twitter
|
||
</button>
|
||
<button class="social-tab flex items-center gap-2 whitespace-nowrap px-4 py-2 bg-white/80 rounded-full text-sm font-medium transition-all" data-platform="tiktok">
|
||
<span class="w-2 h-2 rounded-full bg-black"></span>
|
||
TikTok
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Social media post grid with responsive layout -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 relative z-10">
|
||
<!-- Instagram Post 1 -->
|
||
<div class="social-post instagram-post group" data-platform="instagram">
|
||
<div class="social-post-header instagram-header">
|
||
<div class="social-icon instagram-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||
</svg>
|
||
</div>
|
||
<span class="font-medium text-sm">@@dinaslhdki</span>
|
||
</div>
|
||
<div class="social-post-content">
|
||
<blockquote
|
||
class="instagram-media"
|
||
data-instgrm-captioned
|
||
data-instgrm-permalink="https://www.instagram.com/p/DBtPIcETJjm/?utm_source=ig_embed&utm_campaign=loading"
|
||
data-instgrm-version="14"
|
||
style="background:#FFF; border:0; border-radius:0; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
|
||
</blockquote>
|
||
</div>
|
||
<div class="social-post-footer instagram-gradient opacity-0 group-hover:opacity-100">
|
||
<a href="https://www.instagram.com/dinaslhdki" target="_blank" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
|
||
<span>Kunjungi Instagram</span>
|
||
</a>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Instagram Post 2 -->
|
||
<div class="social-post instagram-post group" data-platform="instagram">
|
||
<div class="social-post-header instagram-header">
|
||
<div class="social-icon instagram-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
|
||
</svg>
|
||
</div>
|
||
<span class="font-medium text-sm">@@jakartasadarsampah</span>
|
||
</div>
|
||
<div class="social-post-content">
|
||
<blockquote
|
||
class="instagram-media"
|
||
data-instgrm-captioned
|
||
data-instgrm-permalink="https://www.instagram.com/p/DEzFYTwpJDW/?utm_source=ig_embed&utm_campaign=loading"
|
||
data-instgrm-version="14"
|
||
style="background:#FFF; border:0; border-radius:0; box-shadow:none; margin:0; max-width:100%; min-width:100%; height:100%; width:100%;">
|
||
</blockquote>
|
||
</div>
|
||
<div class="social-post-footer instagram-gradient opacity-0 group-hover:opacity-100">
|
||
<a href="https://www.instagram.com/jakartasadarsampah" target="_blank" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
|
||
<span>Kunjungi Instagram</span>
|
||
</a>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Twitter Post -->
|
||
<div class="social-post twitter-post group" data-platform="twitter">
|
||
<div class="social-post-header twitter-header">
|
||
<div class="social-icon twitter-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"/>
|
||
</svg>
|
||
</div>
|
||
<span class="font-medium text-sm">@@dinaslhdki</span>
|
||
</div>
|
||
<div class="social-post-content">
|
||
<blockquote class="twitter-tweet" data-theme="light" data-width="100%" style="height:100%; border:0; margin:0;">
|
||
<a href="https://twitter.com/dinaslhdki/status/1884521645173596375?ref_src=twsrc%5Etfw">January 29, 2025</a>
|
||
</blockquote>
|
||
</div>
|
||
<div class="social-post-footer twitter-gradient opacity-0 group-hover:opacity-100">
|
||
<a href="https://x.com/dinaslhdki" target="_blank" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
|
||
<span>Kunjungi X</span>
|
||
</a>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TikTok Post -->
|
||
<div class="social-post tiktok-post group" data-platform="tiktok">
|
||
<div class="social-post-header tiktok-header">
|
||
<div class="social-icon tiktok-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||
<path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
|
||
</svg>
|
||
</div>
|
||
<span class="font-medium text-sm">@@dinaslhdki</span>
|
||
</div>
|
||
<div class="social-post-content">
|
||
<blockquote
|
||
class="tiktok-embed"
|
||
cite="https://www.tiktok.com/@@dinaslhdki/video/7332309253337746694"
|
||
data-video-id="7332309253337746694"
|
||
style="max-width:100%; min-width:100%; height:100%; margin:0; border:0; border-radius:0;">
|
||
<section>
|
||
<a target="_blank" title="@@dinaslhdki" href="https://www.tiktok.com/@@dinaslhdki?refer=embed">@@dinaslhdki</a>
|
||
Street Sweeper Electric⚡️ Peluncuran Street sweeper Electric, menyapu dan menyedot sampah ke dalam bak tahan karat dengan teknologi mesin yang lebih ramah lingkungan☘️
|
||
<a title="suksesjakartauntukindonesia" target="_blank" href="https://www.tiktok.com/tag/suksesjakartauntukindonesia?refer=embed">#SuksesJakartaUntukIndonesia</a>
|
||
<a title="kurangipilaholah" target="_blank" href="https://www.tiktok.com/tag/kurangipilaholah?refer=embed">#KurangiPilahOlah</a>
|
||
<a title="roadsweeperelectric" target="_blank" href="https://www.tiktok.com/tag/roadsweeperelectric?refer=embed">#RoadSweeperElectric</a>
|
||
</section>
|
||
</blockquote>
|
||
</div>
|
||
<div class="social-post-footer tiktok-gradient opacity-0 group-hover:opacity-100">
|
||
<a href="https://www.tiktok.com/@@dinaslhdki" target="_blank" class="flex items-center gap-2 text-white hover:text-gray-200 transition-colors">
|
||
<span>Kunjungi Tiktok</span>
|
||
</a>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
|
||
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<register-block dynamic-section="css" key="cssSosmed">
|
||
<style>
|
||
/* Social media posts styling - Enhanced for mobile */
|
||
.social-post {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 400px;
|
||
overflow: hidden;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.05);
|
||
background-color: #fff;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
/* Mobile-specific post styling */
|
||
@@media (max-width: 768px) {
|
||
.social-post {
|
||
height: 450px;
|
||
max-height: 80vh;
|
||
}
|
||
}
|
||
|
||
.social-post:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.social-post-header {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px;
|
||
z-index: 10;
|
||
color: #fff;
|
||
}
|
||
|
||
.social-post-content {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.social-post-footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
color: white;
|
||
transition: opacity 0.3s ease;
|
||
z-index: 10;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.social-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 50%;
|
||
margin-right: 8px;
|
||
color: white;
|
||
}
|
||
|
||
/* Platform specific styling */
|
||
|
||
/* Instagram styling */
|
||
.instagram-post {
|
||
position: relative;
|
||
}
|
||
|
||
.instagram-post:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4px;
|
||
background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
|
||
z-index: 5;
|
||
}
|
||
|
||
.instagram-header {
|
||
background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
|
||
}
|
||
|
||
.instagram-icon {
|
||
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
|
||
}
|
||
|
||
.instagram-gradient {
|
||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||
}
|
||
|
||
/* Twitter/X styling */
|
||
.twitter-post {
|
||
position: relative;
|
||
}
|
||
|
||
.twitter-post:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4px;
|
||
background: #1DA1F2;
|
||
z-index: 5;
|
||
}
|
||
|
||
.twitter-header {
|
||
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
|
||
}
|
||
|
||
.twitter-icon {
|
||
background: #000;
|
||
}
|
||
|
||
.twitter-gradient {
|
||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||
}
|
||
|
||
/* TikTok styling */
|
||
.tiktok-post {
|
||
position: relative;
|
||
}
|
||
|
||
.tiktok-post:befor{% %}
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4px;
|
||
background: linear-gradient(to right, #25F4EE, #FE2C55, #000000);
|
||
z-index: 5;
|
||
}
|
||
|
||
.tiktok-header {
|
||
background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
|
||
}
|
||
|
||
.tiktok-icon {
|
||
background: #000;
|
||
position: relative;
|
||
}
|
||
|
||
.tiktok-icon:before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -3px;
|
||
left: -3px;
|
||
right: -3px;
|
||
bottom: -3px;
|
||
background: linear-gradient(to right, #25F4EE, #FE2C55);
|
||
border-radius: 50%;
|
||
z-index: -1;
|
||
}
|
||
|
||
.tiktok-gradient {
|
||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||
}
|
||
|
||
/* Social buttons styling */
|
||
.social-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
color: white;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.social-btn:hover {% %}
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 6px 10px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.instagram-btn {
|
||
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
|
||
}
|
||
|
||
.twitter-btn {
|
||
background: #000;
|
||
}
|
||
|
||
.tiktok-btn {
|
||
background: #000;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tiktok-btn:before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -3px;
|
||
left: -3px;
|
||
right: -3px;
|
||
bottom: -3px;
|
||
background: linear-gradient(to right, #25F4EE, #FE2C55);
|
||
border-radius: 50%;
|
||
z-index: -1;
|
||
}
|
||
|
||
.youtube-btn {
|
||
background: #FF0000;
|
||
}
|
||
|
||
/* Mobile tabs styling */
|
||
.social-tabs {
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
position: relative;
|
||
touch-action: pan-x;
|
||
user-select: none;
|
||
}
|
||
|
||
.social-tabs::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.social-tab {
|
||
opacity: 0.7;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.social-tab.active {
|
||
opacity: 1;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.social-tab.active:after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 25%;
|
||
width: 50%;
|
||
height: 2px;
|
||
background-color: #F97316;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.swipe-indicator {
|
||
animation: fadeIn 1s ease-in-out;
|
||
}
|
||
|
||
@@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
/* Additional TikTok post optimizations for mobile */
|
||
@@media (max-width: 640px) {
|
||
.tiktok-post {
|
||
height: 500px; /* Extra height for TikTok content */
|
||
}
|
||
|
||
.tiktok-post .tiktok-embed {
|
||
margin-top: -25px !important; /* Adjust TikTok embed position */
|
||
}
|
||
}
|
||
</style>
|
||
</register-block>
|
||
|
||
<register-block dynamic-section="scripts" key="jsSosmed">
|
||
<script async src="https://www.instagram.com/embed.js"></script>
|
||
<script async src="https://platform.twitter.com/widgets.js"></script>
|
||
<script async src="https://www.tiktok.com/embed.js"></script>
|
||
<script>
|
||
// Mobile tabs functionality with touch swipe support
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const tabs = document.querySelectorAll('.social-tab');
|
||
const posts = document.querySelectorAll('.social-post');
|
||
const tabsContainer = document.querySelector('.social-tabs');
|
||
let currentTabIndex = 0;
|
||
|
||
// Function to switch to a specific tab
|
||
function switchToTab(tabIndex) {
|
||
if (tabIndex < 0) tabIndex = 0;
|
||
if (tabIndex >= tabs.length) tabIndex = tabs.length - 1;
|
||
|
||
currentTabIndex = tabIndex;
|
||
const selectedTab = tabs[tabIndex];
|
||
const platform = selectedTab.getAttribute('data-platform');
|
||
|
||
// Update active tab
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
selectedTab.classList.add('active');
|
||
|
||
// Scroll tab into view with smooth animation
|
||
@* selectedTab.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' }); *@
|
||
|
||
// Show/hide posts based on platform
|
||
if (platform === 'all') {
|
||
posts.forEach(post => {
|
||
post.style.display = 'block';
|
||
});
|
||
} else {
|
||
posts.forEach(post => {
|
||
if (post.getAttribute('data-platform') === platform) {
|
||
post.style.display = 'block';
|
||
} else {
|
||
post.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Reload embeds when tabs are switched (helps with display issues)
|
||
setTimeout(() => {
|
||
if (window.instgrm) window.instgrm.Embeds.process();
|
||
if (window.twttr) window.twttr.widgets.load();
|
||
}, 100);
|
||
}
|
||
|
||
// Click event for tabs
|
||
tabs.forEach((tab, index) => {
|
||
tab.addEventListener('click', function() {
|
||
switchToTab(index);
|
||
});
|
||
});
|
||
|
||
// Touch swipe functionality for tab container
|
||
let touchStartX = 0;
|
||
let touchEndX = 0;
|
||
|
||
function handleTouchStart(event) {
|
||
touchStartX = event.changedTouches[0].screenX;
|
||
}
|
||
|
||
function handleTouchEnd(event) {
|
||
touchEndX = event.changedTouches[0].screenX;
|
||
handleSwipe();
|
||
}
|
||
|
||
function handleSwipe() {
|
||
const swipeThreshold = 50; // Minimum distance to detect a swipe
|
||
|
||
// Left swipe (next tab)
|
||
if (touchEndX < touchStartX - swipeThreshold) {
|
||
switchToTab(currentTabIndex + 1);
|
||
}
|
||
|
||
// Right swipe (previous tab)
|
||
if (touchEndX > touchStartX + swipeThreshold) {
|
||
switchToTab(currentTabIndex - 1);
|
||
}
|
||
}
|
||
|
||
// Add touch event listeners to both tabs and posts container for better UX
|
||
if (tabsContainer) {
|
||
tabsContainer.addEventListener('touchstart', handleTouchStart, { passive: true });
|
||
tabsContainer.addEventListener('touchend', handleTouchEnd, { passive: true });
|
||
}
|
||
|
||
const postsContainer = document.querySelector('.grid');
|
||
if (postsContainer) {
|
||
postsContainer.addEventListener('touchstart', handleTouchStart, { passive: true });
|
||
postsContainer.addEventListener('touchend', handleTouchEnd, { passive: true });
|
||
}
|
||
|
||
// Fix embed sizing issues on mobile
|
||
function resizeEmbeds() {
|
||
const containers = document.querySelectorAll('.social-post-content');
|
||
if (window.innerWidth < 640) {
|
||
containers.forEach(container => {
|
||
container.style.minHeight = '400px';
|
||
});
|
||
} else {
|
||
containers.forEach(container => {
|
||
container.style.minHeight = '';
|
||
});
|
||
}
|
||
}
|
||
|
||
window.addEventListener('resize', resizeEmbeds);
|
||
resizeEmbeds();
|
||
|
||
// Add visible cues for swipe functionality on mobile
|
||
if (window.innerWidth <= 768) {
|
||
const swipeIndicator = document.createElement('div');
|
||
swipeIndicator.className = 'swipe-indicator flex items-center justify-center gap-2 text-gray-500 text-xs mt-1 mb-3';
|
||
swipeIndicator.innerHTML = `
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M12.5 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H12a.5.5 0 0 1 .5.5z"/>
|
||
</svg>
|
||
<span>Geser untuk melihat semua</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||
<path fill-rule="evenodd" d="M3.5 8a.5.5 0 0 0 .5.5h6.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L10.293 7.5H4a.5.5 0 0 0-.5.5z"/>
|
||
</svg>
|
||
`;
|
||
|
||
if (tabsContainer) {
|
||
tabsContainer.after(swipeIndicator);
|
||
|
||
// Auto-hide swipe indicator after 5 seconds
|
||
setTimeout(() => {
|
||
swipeIndicator.style.opacity = '0';
|
||
swipeIndicator.style.transition = 'opacity 1s ease';
|
||
}, 5000);
|
||
}
|
||
}
|
||
|
||
// Initialize with the first tab active
|
||
switchToTab(0);
|
||
});
|
||
</script>
|
||
</register-block> |