geodinamika

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
geodinamika [2026/02/09 11:27] – [📌 Catatan] geofiterageodinamika [2026/02/09 16:31] (current) – [📌 Catatan] geofitera
Line 72: Line 72:
   * Materi dapat berubah mengikuti perkembangan kelas.     * Materi dapat berubah mengikuti perkembangan kelas.  
   * Silakan cek laman ini secara berkala untuk update terbaru.    * Silakan cek laman ini secara berkala untuk update terbaru. 
- 
-<html> 
-<!-- Load Tailwind & Fonts & Icons --> 
-<script src="https://cdn.tailwindcss.com"></script> 
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> 
-<script src="https://unpkg.com/lucide@latest"></script> 
- 
-<!-- Custom Styles --> 
-<style> 
-    /* Scoped Styles untuk Wrapper */ 
-    #modern-course-wrapper { 
-        font-family: 'Inter', sans-serif; 
-        /* Menaikkan base size agar lebih terbaca di DokuWiki */ 
-        font-size: 16px;  
-        line-height: 1.6; 
-        color: #1e293b; /* slate-800 */ 
-    } 
-    #modern-course-wrapper a { 
-        text-decoration: none !important; 
-    } 
-     
-    /* Styling untuk Accordion (Details/Summary) */ 
-    details > summary { 
-        list-style: none; 
-        cursor: pointer; 
-    } 
-    details > summary::-webkit-details-marker { 
-        display: none; 
-    } 
-    details[open] summary ~ * { 
-        animation: sweep .3s ease-in-out; 
-    } 
-    @keyframes sweep { 
-        0%    {opacity: 0; transform: translateY(-10px)} 
-        100%  {opacity: 1; transform: translateY(0)} 
-    } 
-     
-    /* Responsive Iframe Container untuk Google Slides */ 
-    .slide-container { 
-        position: relative; 
-        overflow: hidden; 
-        width: 100%; 
-        padding-top: 56.25%; /* 16:9 Aspect Ratio */ 
-        border-radius: 0.5rem; 
-        border: 1px solid #cbd5e1; 
-        background-color: #f1f5f9; 
-    } 
-    .slide-container iframe { 
-        position: absolute; 
-        top: 0; 
-        left: 0; 
-        bottom: 0; 
-        right: 0; 
-        width: 100%; 
-        height: 100%; 
-    } 
- 
-    /* Custom Buttons */ 
-    .btn-action { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.9rem; transition: all 0.2s; } 
-    .btn-primary { background-color: #2563eb; color: white; } 
-    .btn-primary:hover { background-color: #1d4ed8; } 
-    .btn-video { background-color: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; } 
-    .btn-video:hover { background-color: #fca5a5; } 
-    .tag-week { background: #f1f5f9; color: #475569; padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 0.85rem; border: 1px solid #cbd5e1; } 
-</style> 
- 
-<div id="modern-course-wrapper" class="w-full bg-slate-50 p-4 sm:p-6 rounded-xl border border-slate-200 shadow-sm"> 
- 
-    <!-- Header Banner --> 
-    <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-8 text-white shadow-lg mb-8 relative overflow-hidden"> 
-        <div class="relative z-10"> 
-            <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-2 text-white m-0 border-b-0">📘 Geodinamika</h1> 
-            <p class="text-slate-300 text-xl m-0 font-light">TG25-31001 • Semester 5</p> 
-             
-            <div class="mt-6 flex flex-wrap items-center gap-4 text-slate-200 text-base"> 
-                <div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-lg border border-white/10"> 
-                    <i data-lucide="user" class="w-5 h-5"></i> 
-                    <span class="font-medium">Yudha Styawan, M.Sc.</span> 
-                </div> 
-                <div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-lg border border-white/10"> 
-                    <i data-lucide="book-open" class="w-5 h-5"></i> 
-                    <span>2 SKS</span> 
-                </div> 
-            </div> 
-        </div> 
-    </div> 
- 
-    <!-- Layout Utama: Grid 2 Kolom (Kiri: Jadwal, Kanan: Info/Tugas) --> 
-    <div class="grid lg:grid-cols-3 gap-8"> 
-         
-        <!-- Kolom Kiri: Jadwal Pertemuan (Accordion) --> 
-        <div class="lg:col-span-2 space-y-4"> 
-            <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-2 mb-4 border-b pb-2"> 
-                <i data-lucide="presentation" class="text-blue-600"></i> Materi & Jadwal 
-            </h2> 
- 
-            <!-- MINGGU 1 --> 
-            <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden" open> 
-                <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors"> 
-                    <div class="flex items-center gap-4"> 
-                        <span class="tag-week">Mg 1</span> 
-                        <span class="font-bold text-lg text-slate-800">Pengantar & Konsep Dasar</span> 
-                    </div> 
-                    <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300"> 
-                        <i data-lucide="chevron-down" class="w-6 h-6"></i> 
-                    </span> 
-                </summary> 
-                <div class="p-6 border-t border-slate-100 bg-slate-50/50"> 
-                    <!-- Layout Konten Mingguan --> 
-                    <div class="grid md:grid-cols-2 gap-6"> 
-                        <!-- Sisi Kiri: Slideshow --> 
-                        <div class="space-y-2"> 
-                            <div class="flex justify-between items-center mb-1"> 
-                                <label class="text-sm font-semibold text-slate-500 uppercase">Slide Presentasi</label> 
-                                <a href="https://docs.google.com/presentation/d/1cXisQCijRIL0yCbi4mlejeGtBIEsdcQ4sJh3zDEiR6c/edit?usp=drive_link" target="_blank" class="text-blue-600 text-sm hover:underline flex items-center gap-1">Buka Full <i data-lucide="external-link" class="w-3 h-3"></i></a> 
-                            </div> 
-                            <!-- Embed Google Slide (Ubah /edit menjadi /embed) --> 
-                            <div class="slide-container"> 
-                                <iframe src="https://docs.google.com/presentation/d/1cXisQCijRIL0yCbi4mlejeGtBIEsdcQ4sJh3zDEiR6c/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe> 
-                            </div> 
-                        </div> 
-                        <!-- Sisi Kanan: Penjelasan & Video --> 
-                        <div class="space-y-4"> 
-                            <div class="bg-white p-4 rounded-lg border border-slate-200"> 
-                                <h4 class="font-bold text-slate-800 text-base mb-2 flex items-center gap-2 m-0"><i data-lucide="sticky-note" class="w-4 h-4 text-amber-500"></i> Catatan Materi</h4> 
-                                <p class="text-sm text-slate-600 mb-0"> 
-                                    Pengenalan silabus, aturan perkuliahan, dan definisi dasar geodinamika. Memahami perbedaan antara data geologi dan geofisika. 
-                                </p> 
-                            </div> 
-                            <div> 
-                                <h4 class="font-bold text-slate-800 text-sm mb-2">Video Pembelajaran</h4> 
-                                <a href="https://docs.google.com/presentation/d/1zCKWvwtyCjOOdhU1FBYMW7VrELUw98SR1pUKB6D6_HU/edit?usp=sharing" target="_blank" class="btn-action btn-video w-full justify-center"> 
-                                    <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Tonton Rekaman 
-                                </a> 
-                            </div> 
-                        </div> 
-                    </div> 
-                </div> 
-            </details> 
- 
-            <!-- MINGGU 2 --> 
-            <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden"> 
-                <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors"> 
-                    <div class="flex items-center gap-4"> 
-                        <span class="tag-week">Mg 2</span> 
-                        <span class="font-bold text-lg text-slate-800">Tektonik Lempeng Global</span> 
-                    </div> 
-                    <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300"> 
-                        <i data-lucide="chevron-down" class="w-6 h-6"></i> 
-                    </span> 
-                </summary> 
-                <div class="p-6 border-t border-slate-100 bg-slate-50/50"> 
-                    <div class="grid md:grid-cols-2 gap-6"> 
-                        <div class="space-y-2"> 
-                             <div class="flex justify-between items-center mb-1"> 
-                                <label class="text-sm font-semibold text-slate-500 uppercase">Slide Presentasi</label> 
-                            </div> 
-                            <div class="slide-container"> 
-                                <iframe src="https://docs.google.com/presentation/d/1UkQJZtNX5GRS6U6tNFQEa0c9tDlWc1OMxxl3hOQDw64/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe> 
-                            </div> 
-                        </div> 
-                        <div class="space-y-4"> 
-                            <div class="bg-white p-4 rounded-lg border border-slate-200"> 
-                                <h4 class="font-bold text-slate-800 text-base mb-2 m-0">Ringkasan</h4> 
-                                <p class="text-sm text-slate-600"> 
-                                    Membahas pergerakan lempeng, batas-batas lempeng (divergen, konvergen, transform), dan bukti-bukti tektonik lempeng. 
-                                </p> 
-                            </div> 
-                             <!-- Contoh jika ada tugas di minggu ini --> 
-                            <div class="bg-blue-50 border border-blue-200 p-3 rounded-lg flex items-start gap-3"> 
-                                <i data-lucide="alert-circle" class="w-5 h-5 text-blue-600 mt-0.5"></i> 
-                                <div> 
-                                    <p class="text-blue-800 font-bold text-sm m-0">Tugas 1 Diberikan</p> 
-                                    <p class="text-blue-600 text-xs m-0">Cek panel tugas di sebelah kanan.</p> 
-                                </div> 
-                            </div> 
-                        </div> 
-                    </div> 
-                </div> 
-            </details> 
- 
-            <!-- MINGGU 3 --> 
-            <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden"> 
-                <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors"> 
-                    <div class="flex items-center gap-4"> 
-                        <span class="tag-week">Mg 3</span> 
-                        <span class="font-bold text-lg text-slate-800">Dinamika Interior Bumi</span> 
-                    </div> 
-                    <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300"> 
-                        <i data-lucide="chevron-down" class="w-6 h-6"></i> 
-                    </span> 
-                </summary> 
-                <div class="p-6 border-t border-slate-100 bg-slate-50/50"> 
-                    <div class="grid md:grid-cols-2 gap-6"> 
-                        <div class="space-y-2"> 
-                            <div class="slide-container"> 
-                                <iframe src="https://docs.google.com/presentation/d/1UrnNaCjBYLHUICTBPLlk7xzJGhuOzgkXkl7Ew1h3bEQ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe> 
-                            </div> 
-                        </div> 
-                         <div class="space-y-4"> 
-                            <a href="https://drive.google.com/file/d/1xHgtaiSDENehJYSEQWI92zRV6O9aAwCQ/view?usp=sharing" target="_blank" class="btn-action btn-video w-full justify-center"> 
-                                <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Tonton Video Materi 
-                            </a> 
-                        </div> 
-                    </div> 
-                </div> 
-            </details> 
- 
-            <!-- MINGGU 4-7 (Simple List agar tidak terlalu panjang kodenya, bisa diduplikasi polanya) --> 
-            <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm"> 
-                 <h3 class="font-bold text-slate-600 text-sm uppercase mb-4">Minggu Selanjutnya (4-7)</h3> 
-                 <div class="space-y-3"> 
-                    <a href="https://docs.google.com/presentation/d/1GUfZG1_Lwv-ieOLL-Ipz6X28XD8Ber0qgio79Trt_fk/edit?usp=drive_link" target="_blank" class="flex items-center justify-between p-3 rounded-lg bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 transition-all group"> 
-                        <div class="flex items-center gap-3"> 
-                            <span class="tag-week">Mg 4</span> 
-                            <span class="font-medium text-slate-700">Materi Minggu 4</span> 
-                        </div> 
-                        <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i> 
-                    </a> 
-                    <a href="https://docs.google.com/presentation/d/14ykA34jpXtBpwOI7Peytm4zG-SwQ3rrShVvLCndPpQI/edit?usp=drive_link" target="_blank" class="flex items-center justify-between p-3 rounded-lg bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 transition-all group"> 
-                         <div class="flex items-center gap-3"> 
-                            <span class="tag-week">Mg 5</span> 
-                            <span class="font-medium text-slate-700">Materi Minggu 5</span> 
-                        </div> 
-                        <div class="flex items-center gap-2"> 
-                             <i data-lucide="play-circle" class="w-4 h-4 text-red-400"></i> 
-                             <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i> 
-                        </div> 
-                    </a> 
-                     <a href="https://docs.google.com/presentation/d/1Lu7DnrNTGlCbJlATkqkODg2OLGGR6nnbaWN-bir1f9M/edit?usp=drive_link" target="_blank" class="flex items-center justify-between p-3 rounded-lg bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 transition-all group"> 
-                         <div class="flex items-center gap-3"> 
-                            <span class="tag-week">Mg 6</span> 
-                            <span class="font-medium text-slate-700">Materi Minggu 6</span> 
-                        </div> 
-                        <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i> 
-                    </a> 
-                 </div> 
-            </div> 
- 
-             <!-- MINGGU 9 (Pasca UTS) --> 
-            <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden"> 
-                <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors"> 
-                    <div class="flex items-center gap-4"> 
-                        <span class="tag-week">Mg 9</span> 
-                        <span class="font-bold text-lg text-slate-800">Zona Subduksi</span> 
-                    </div> 
-                    <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300"> 
-                        <i data-lucide="chevron-down" class="w-6 h-6"></i> 
-                    </span> 
-                </summary> 
-                <div class="p-6 border-t border-slate-100 bg-slate-50/50"> 
-                    <div class="grid md:grid-cols-2 gap-6"> 
-                        <div class="space-y-2"> 
-                            <div class="slide-container"> 
-                                <iframe src="https://docs.google.com/presentation/d/1tk7LRWi5gWu-FntisKaQEwUcpvpDMrXqcmup_9pDCf8/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe> 
-                            </div> 
-                        </div> 
-                         <div class="space-y-3"> 
-                            <h4 class="font-bold text-slate-800 text-sm">Referensi Video</h4> 
-                            <a href="https://drive.google.com/file/d/1OS8Sg1XCOKV1RSe4tiZfyvvAMYXx5H0N/view?usp=sharing" target="_blank" class="btn-action btn-video w-full justify-center"> 
-                                <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Video Bagian 1 
-                            </a> 
-                            <a href="https://drive.google.com/file/d/1H4A0ajbgQY-YOeMOoIb3xgU_Q9xM4eA3/view?usp=sharing" target="_blank" class="btn-action btn-video w-full justify-center"> 
-                                <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Video Bagian 2 
-                            </a> 
-                        </div> 
-                    </div> 
-                </div> 
-            </details> 
- 
-        </div> 
- 
-        <!-- Kolom Kanan: Sidebar Informasi (Sticky) --> 
-        <div class="lg:col-span-1 space-y-6"> 
-             
-            <!-- Panel Deskripsi --> 
-            <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm"> 
-                <h3 class="font-bold text-lg text-slate-800 mb-4 flex items-center gap-2 border-b-0 m-0"> 
-                    <i data-lucide="info" class="text-blue-500"></i> Deskripsi 
-                </h3> 
-                <p class="text-slate-600 text-sm leading-relaxed mb-4"> 
-                    Mata kuliah ini membahas prinsip dasar geodinamika, tektonik lempeng, zona subduksi, dan evolusi kerak bumi menggunakan data geologi dan geofisika. 
-                </p> 
-                <div class="flex flex-col gap-2"> 
-                    <div class="bg-blue-50 p-3 rounded border border-blue-100"> 
-                        <strong class="text-blue-700 text-xs uppercase block mb-1">CPL 1</strong> 
-                        <span class="text-xs text-blue-900">Identifikasi & pemecahan masalah rekayasa kompleks.</span> 
-                    </div> 
-                </div> 
-            </div> 
- 
-            <!-- Panel Tugas & Kuis --> 
-            <div class="bg-indigo-50 p-6 rounded-xl border border-indigo-100 shadow-sm"> 
-                 <h3 class="font-bold text-lg text-indigo-900 mb-4 flex items-center gap-2 border-b-0 m-0"> 
-                    <i data-lucide="check-square" class="text-indigo-600"></i> Penilaian 
-                </h3> 
-                 
-                <div class="space-y-3"> 
-                    <!-- Kuis Items --> 
-                    <a href="https://forms.gle/kgT2ogQMR6DLdq5o8" target="_blank" class="block bg-white p-3 rounded-lg border border-indigo-200 hover:shadow-md transition-all group"> 
-                        <div class="flex justify-between items-start"> 
-                            <div> 
-                                <span class="text-[10px] font-bold text-white bg-indigo-500 px-2 py-0.5 rounded-full">KUIS 1</span> 
-                                <div class="text-sm font-bold text-slate-800 mt-1">Materi Mg 1–4</div> 
-                            </div> 
-                            <i data-lucide="external-link" class="w-4 h-4 text-slate-300 group-hover:text-indigo-500"></i> 
-                        </div> 
-                    </a> 
- 
-                    <!-- Tugas Items --> 
-                    <a href="https://docs.google.com/document/d/1a6IaIMPNBbTVyaU-aYZ0dGXs_g7UqJETfPYnFH5KfPQ/edit?usp=sharing" target="_blank" class="block bg-white p-3 rounded-lg border border-emerald-200 hover:shadow-md transition-all group border-l-4 border-l-emerald-500"> 
-                        <div class="flex justify-between items-start"> 
-                            <div> 
-                                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100">TUGAS 1</span> 
-                                <div class="text-sm font-bold text-slate-800 mt-1">Review Jurnal (Mg 2-3)</div> 
-                            </div> 
-                            <i data-lucide="file-text" class="w-4 h-4 text-slate-300 group-hover:text-emerald-500"></i> 
-                        </div> 
-                    </a> 
-                </div> 
-            </div> 
- 
-            <!-- Panel Pustaka --> 
-            <div class="bg-slate-800 p-6 rounded-xl text-slate-200 shadow-sm"> 
-                <h3 class="font-bold text-lg text-white mb-4 flex items-center gap-2 border-b-0 m-0"> 
-                    <i data-lucide="book" class="text-amber-400"></i> Referensi 
-                </h3> 
-                <ul class="text-sm space-y-4 list-none p-0 m-0"> 
-                    <li class="flex gap-3"> 
-                        <span class="text-amber-400 font-bold">1.</span> 
-                        <span>Turcotte, D.L., & Schubert, G. (2014). <em>Geodynamics (3rd ed.)</em>. Cambridge Univ. Press.</span> 
-                    </li> 
-                    <li class="flex gap-3"> 
-                        <span class="text-amber-400 font-bold">2.</span> 
-                        <span>Fowler, C.M.R. (2005). <em>The Solid Earth</em>. Cambridge Univ. Press.</span> 
-                    </li> 
-                </ul> 
-                <div class="mt-6 pt-4 border-t border-slate-700"> 
-                    <a href="https://www.youtube.com/@helsinkiuniversitygeodynam6511" target="_blank" class="flex items-center gap-2 text-sm text-slate-300 hover:text-white transition-colors"> 
-                        <i data-lucide="youtube" class="w-4 h-4 text-red-500"></i> Helsinki Univ. Geodynamics 
-                    </a> 
-                </div> 
-            </div> 
- 
-        </div> 
-    </div> 
-     
-    <div class="mt-8 text-center text-slate-400 text-sm border-t border-slate-200 pt-4"> 
-        Last updated: 2026 • Silakan cek berkala untuk perubahan jadwal. 
-    </div> 
- 
-</div> 
- 
-<!-- Script Icons --> 
-<script> 
-    lucide.createIcons(); 
-</script> 
-</html> 
  • geodinamika.1770636445.txt.gz
  • Last modified: 2026/02/09 11:27
  • by geofitera