{"id":732,"date":"2026-10-14T09:51:20","date_gmt":"2026-10-14T02:51:20","guid":{"rendered":"https:\/\/simodisdlhkotaptk.net\/?page_id=732"},"modified":"2026-10-14T09:55:47","modified_gmt":"2026-10-14T02:55:47","slug":"apa-itu-simodis","status":"publish","type":"page","link":"https:\/\/simodisdlhkotaptk.net\/?page_id=732","title":{"rendered":"alur kerja simodis"},"content":{"rendered":"\n<style>\n\/* SIMODIS Animated Workflow *\/\n#simodis-flow {\n  --blue:#0878d1;\n  --navy:#102b50;\n  --cyan:#12b8d5;\n  --green:#10a878;\n  --orange:#f49a20;\n  --purple:#7954d9;\n  font-family: \"Segoe UI\",Arial,sans-serif;\n  background:linear-gradient(145deg,#f4f9ff,#e5f3ff);\n  padding:clamp(16px,3vw,34px);\n  border-radius:22px;\n  color:var(--navy);\n  overflow:hidden;\n}\n#simodis-flow * {box-sizing:border-box}\n#simodis-flow .wf-heading {text-align:center;margin-bottom:24px}\n#simodis-flow .wf-heading h2 {\n  font-size:clamp(24px,4vw,34px);\n  margin:0;color:var(--navy)\n}\n#simodis-flow .wf-heading p {color:#60748c;margin:8px 0}\n#simodis-flow .wf-live {\n  display:inline-flex;align-items:center;gap:8px;\n  padding:7px 13px;background:white;border-radius:30px;\n  font-size:12px;font-weight:700;color:#087c61;\n  box-shadow:0 3px 12px #123b6510;\n}\n#simodis-flow .wf-dot {\n  width:9px;height:9px;border-radius:50%;\n  background:#13b982;animation:wfPulse 1.2s infinite;\n}\n#simodis-flow .wf-track {\n  position:relative;\n  display:grid;\n  grid-template-columns:repeat(5,minmax(0,1fr));\n  gap:18px;\n  align-items:stretch;\n}\n#simodis-flow .wf-card {\n  --accent:var(--blue);\n  position:relative;min-width:0;\n  background:white;border:2px solid #dce9f6;\n  border-radius:17px;overflow:visible;\n  box-shadow:0 7px 20px #163d6010;\n  transition:border-color .4s,transform .4s,box-shadow .4s;\n  opacity:.65;transform:scale(.97);\n}\n#simodis-flow .wf-card:nth-child(2){--accent:var(--green)}\n#simodis-flow .wf-card:nth-child(3){--accent:var(--blue)}\n#simodis-flow .wf-card:nth-child(4){--accent:var(--orange)}\n#simodis-flow .wf-card:nth-child(5){--accent:var(--purple)}\n#simodis-flow .wf-card.active {\n  opacity:1;transform:translateY(-7px) scale(1);\n  border-color:var(--accent);\n  box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 20%,transparent);\n}\n#simodis-flow .wf-top {\n  background:var(--accent);color:white;\n  padding:13px 10px;border-radius:13px 13px 0 0;\n  min-height:67px;display:flex;align-items:center;gap:10px;\n}\n#simodis-flow .wf-num {\n  display:grid;place-items:center;flex:0 0 37px;height:37px;\n  background:#ffffff2b;border:1px solid #ffffff80;\n  border-radius:50%;font-size:19px;font-weight:800;\n}\n#simodis-flow .wf-top strong {font-size:clamp(12px,1.3vw,15px);line-height:1.35}\n#simodis-flow .wf-visual {\n  height:130px;display:grid;place-items:center;\n  background:linear-gradient(150deg,#f7fbff,#eaf5ff);\n  position:relative;overflow:hidden;\n}\n#simodis-flow .wf-card:nth-child(2) .wf-visual {background:#e9fbf3}\n#simodis-flow .wf-card:nth-child(4) .wf-visual {background:#fff6e9}\n#simodis-flow .wf-card:nth-child(5) .wf-visual {background:#f4efff}\n#simodis-flow .wf-icon {\n  font-size:53px;filter:drop-shadow(0 6px 5px #15395815);\n  transition:transform .4s;\n}\n#simodis-flow .wf-card.active .wf-icon {\n  animation:wfBounce .85s ease-in-out infinite alternate;\n}\n#simodis-flow .wf-content {padding:14px}\n#simodis-flow .wf-content p {\n  font-size:13px;line-height:1.6;color:#566b83;\n  margin:0 0 12px;min-height:62px;\n}\n#simodis-flow .wf-check {\n  padding:8px 0;border-top:1px solid #edf1f7;\n  display:flex;align-items:flex-start;gap:7px;\n  font-size:12px;color:#425a72;\n}\n#simodis-flow .wf-check span {color:var(--accent);font-weight:900}\n#simodis-flow .wf-arrow {\n  position:absolute;right:-26px;top:48%;\n  z-index:3;width:34px;height:34px;\n  border-radius:50%;display:grid;place-items:center;\n  background:#fff;border:2px solid #cce0f5;\n  color:#8ba7c3;font-size:20px;font-weight:900;\n  transition:background .3s,color .3s;\n}\n#simodis-flow .wf-card.active .wf-arrow {\n  background:var(--cyan);color:white;border-color:white;\n}\n#simodis-flow .wf-card:last-child .wf-arrow {display:none}\n#simodis-flow .wf-progress-wrap {margin-top:26px}\n#simodis-flow .wf-progress-head {\n  display:flex;justify-content:space-between;gap:10px;\n  font-size:12px;font-weight:700;color:#526b85;margin-bottom:8px;\n}\n#simodis-flow .wf-progress {\n  height:8px;background:#d7e6f5;border-radius:30px;overflow:hidden;\n}\n#simodis-flow .wf-progress-bar {\n  height:100%;width:0%;\n  background:linear-gradient(90deg,#0878d1,#16c4c5,#14ae7a);\n  border-radius:30px;transition:width .45s ease;\n}\n#simodis-flow .wf-detail {\n  margin-top:18px;padding:20px;\n  border-radius:16px;background:var(--navy);color:white;\n  display:grid;grid-template-columns:auto 1fr;\n  align-items:center;gap:16px;\n}\n#simodis-flow .wf-detail-icon {\n  width:56px;height:56px;display:grid;place-items:center;\n  background:#ffffff18;border-radius:14px;font-size:30px;\n}\n#simodis-flow .wf-detail h3 {margin:0 0 5px;color:white;font-size:18px}\n#simodis-flow .wf-detail p {margin:0;color:#d9e8f8;font-size:13px;line-height:1.6}\n#simodis-flow .wf-controls {\n  display:flex;justify-content:center;align-items:center;\n  flex-wrap:wrap;gap:10px;margin-top:20px;\n}\n#simodis-flow .wf-btn {\n  border:0;border-radius:10px;padding:11px 17px;\n  font-size:13px;font-weight:700;cursor:pointer;\n  transition:transform .2s,opacity .2s;\n}\n#simodis-flow .wf-btn:hover {transform:translateY(-2px)}\n#simodis-flow .wf-btn:focus-visible {\n  outline:3px solid #68b9f5;outline-offset:3px;\n}\n#simodis-flow .wf-primary {background:#0878d1;color:white}\n#simodis-flow .wf-secondary {background:white;color:var(--navy);border:1px solid #d5e4f2}\n#simodis-flow .wf-fuzzy {\n  margin-top:22px;padding:20px;border-radius:16px;\n  background:white;border:1px solid #dce8f5;\n}\n#simodis-flow .wf-fuzzy h3 {margin:0 0 5px;font-size:18px}\n#simodis-flow .wf-fuzzy>p {margin:0 0 16px;font-size:13px;color:#60748c}\n#simodis-flow .wf-algorithm {\n  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;\n}\n#simodis-flow .wf-algorithm-item {\n  text-align:center;padding:15px 9px;border-radius:12px;\n  background:#edf6ff;border-bottom:3px solid #1683d3;\n}\n#simodis-flow .wf-algorithm-item:nth-child(2) {\n  background:#e8fbf2;border-color:#10a878;\n}\n#simodis-flow .wf-algorithm-item:nth-child(3) {\n  background:#fff5e5;border-color:#f49a20;\n}\n#simodis-flow .wf-algorithm-item:nth-child(4) {\n  background:#f2edff;border-color:#7954d9;\n}\n#simodis-flow .wf-algorithm-item b {display:block;font-size:13px}\n#simodis-flow .wf-algorithm-item small {\n  display:block;margin-top:6px;color:#63778e;font-size:11px;line-height:1.5;\n}\n@keyframes wfPulse {\n  50% {opacity:.35;transform:scale(.75)}\n}\n@keyframes wfBounce {\n  to {transform:translateY(-6px) rotate(-3deg)}\n}\n@media(max-width:900px) {\n  #simodis-flow .wf-track {grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}\n  #simodis-flow .wf-arrow {display:none}\n  #simodis-flow .wf-card:last-child {grid-column:1\/-1}\n  #simodis-flow .wf-content p {min-height:0}\n}\n@media(max-width:520px) {\n  #simodis-flow {padding:15px;border-radius:14px}\n  #simodis-flow .wf-track {grid-template-columns:1fr;gap:14px}\n  #simodis-flow .wf-card:last-child {grid-column:auto}\n  #simodis-flow .wf-top {min-height:56px}\n  #simodis-flow .wf-visual {height:100px}\n  #simodis-flow .wf-icon {font-size:43px}\n  #simodis-flow .wf-content {padding:12px}\n  #simodis-flow .wf-detail {grid-template-columns:1fr;padding:15px}\n  #simodis-flow .wf-algorithm {grid-template-columns:repeat(2,minmax(0,1fr))}\n  #simodis-flow .wf-btn {flex:1}\n}\n@media(prefers-reduced-motion:reduce) {\n  #simodis-flow *,#simodis-flow *::before,#simodis-flow *::after {\n    animation:none!important;transition:none!important;\n  }\n}\n<\/style>\n\n<section id=\"simodis-flow\">\n  <header class=\"wf-heading\">\n    <h2>\ud83d\ude98 Alur Kerja SIMODIS<\/h2>\n    <p>Animasi perjalanan data kendaraan dinas dari input hingga rekomendasi.<\/p>\n    <span class=\"wf-live\">\n      <span class=\"wf-dot\"><\/span>\n      SIMULASI ALUR SISTEM\n    <\/span>\n  <\/header>\n\n  <div class=\"wf-track\">\n\n    <article class=\"wf-card active\" data-step=\"0\">\n      <div class=\"wf-top\">\n        <span class=\"wf-num\">1<\/span>\n        <strong>Login Pengguna<\/strong>\n      <\/div>\n      <div class=\"wf-visual\">\n        <span class=\"wf-icon\">\ud83d\udd10<\/span>\n      <\/div>\n      <div class=\"wf-content\">\n        <p>Pengguna masuk ke aplikasi menggunakan akun yang telah terdaftar.<\/p>\n        <div class=\"wf-check\"><span>\u2713<\/span> Autentikasi pengguna<\/div>\n        <div class=\"wf-check\"><span>\u2713<\/span> Akses sesuai hak pengguna<\/div>\n      <\/div>\n      <span class=\"wf-arrow\">\u279c<\/span>\n    <\/article>\n\n    <article class=\"wf-card\" data-step=\"1\">\n      <div class=\"wf-top\">\n        <span class=\"wf-num\">2<\/span>\n        <strong>Input Data Kendaraan<\/strong>\n      <\/div>\n      <div class=\"wf-visual\">\n        <span class=\"wf-icon\">\ud83d\ude99<\/span>\n      <\/div>\n      <div class=\"wf-content\">\n        <p>Operator memasukkan identitas, dokumen, kondisi, dan jadwal pemeliharaan kendaraan.<\/p>\n        <div class=\"wf-check\"><span>\u2713<\/span> Data kendaraan<\/div>\n        <div class=\"wf-check\"><span>\u2713<\/span> Pajak, STNK, dan servis<\/div>\n      <\/div>\n      <span class=\"wf-arrow\">\u279c<\/span>\n    <\/article>\n\n    <article class=\"wf-card\" data-step=\"2\">\n      <div class=\"wf-top\">\n        <span class=\"wf-num\">3<\/span>\n        <strong>Monitoring &#038; Pengingat<\/strong>\n      <\/div>\n      <div class=\"wf-visual\">\n        <span class=\"wf-icon\">\ud83d\udcf2<\/span>\n      <\/div>\n      <div class=\"wf-content\">\n        <p>Sistem memantau tanggal jatuh tempo dan menandai data yang perlu ditindaklanjuti.<\/p>\n        <div class=\"wf-check\"><span>\u2713<\/span> Monitoring tenggat<\/div>\n        <div class=\"wf-check\"><span>\u2713<\/span> Pengingat WhatsApp*<\/div>\n      <\/div>\n      <span class=\"wf-arrow\">\u279c<\/span>\n    <\/article>\n\n    <article class=\"wf-card\" data-step=\"3\">\n      <div class=\"wf-top\">\n        <span class=\"wf-num\">4<\/span>\n        <strong>Analisis Fuzzy<\/strong>\n      <\/div>\n      <div class=\"wf-visual\">\n        <span class=\"wf-icon\">\ud83e\udde0<\/span>\n      <\/div>\n      <div class=\"wf-content\">\n        <p>Parameter kondisi kendaraan diproses menggunakan aturan algoritma Fuzzy.<\/p>\n        <div class=\"wf-check\"><span>\u2713<\/span> Evaluasi parameter<\/div>\n        <div class=\"wf-check\"><span>\u2713<\/span> Perhitungan rekomendasi<\/div>\n      <\/div>\n      <span class=\"wf-arrow\">\u279c<\/span>\n    <\/article>\n\n    <article class=\"wf-card\" data-step=\"4\">\n      <div class=\"wf-top\">\n        <span class=\"wf-num\">5<\/span>\n        <strong>Hasil &#038; Pengembangan<\/strong>\n      <\/div>\n      <div class=\"wf-visual\">\n        <span class=\"wf-icon\">\ud83d\udcca<\/span>\n      <\/div>\n      <div class=\"wf-content\">\n        <p>Hasil analisis menjadi bahan pertimbangan pengelolaan kendaraan dan pengembangan bidang lain.<\/p>\n        <div class=\"wf-check\"><span>\u2713<\/span> Rekomendasi operasional<\/div>\n        <div class=\"wf-check\"><span>\u2713<\/span> Analisis multibidang<\/div>\n      <\/div>\n    <\/article>\n\n  <\/div>\n\n  <div class=\"wf-progress-wrap\">\n    <div class=\"wf-progress-head\">\n      <span id=\"wf-progress-label\">Tahap 1 dari 5<\/span>\n      <span id=\"wf-progress-percent\">20%<\/span>\n    <\/div>\n    <div class=\"wf-progress\" role=\"progressbar\"\n         aria-label=\"Kemajuan animasi alur SIMODIS\"\n         aria-valuemin=\"1\" aria-valuemax=\"5\" aria-valuenow=\"1\"\n         id=\"wf-progress\">\n      <div class=\"wf-progress-bar\" id=\"wf-progress-bar\"><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"wf-detail\" aria-live=\"polite\">\n    <div class=\"wf-detail-icon\" id=\"wf-detail-icon\">\ud83d\udd10<\/div>\n    <div>\n      <h3 id=\"wf-detail-title\">Tahap 1 \u2014 Login Pengguna<\/h3>\n      <p id=\"wf-detail-text\">Pengguna terdaftar masuk ke SIMODIS untuk mengakses data sesuai hak aksesnya.<\/p>\n    <\/div>\n  <\/div>\n\n  <div class=\"wf-controls\">\n    <button type=\"button\" class=\"wf-btn wf-secondary\" id=\"wf-prev\">\u2190 Sebelumnya<\/button>\n    <button type=\"button\" class=\"wf-btn wf-primary\" id=\"wf-play\">\u2161 Jeda Animasi<\/button>\n    <button type=\"button\" class=\"wf-btn wf-secondary\" id=\"wf-next\">Selanjutnya \u2192<\/button>\n    <button type=\"button\" class=\"wf-btn wf-secondary\" id=\"wf-reset\">\u21bb Ulangi<\/button>\n  <\/div>\n\n  <div class=\"wf-fuzzy\">\n    <h3>\u2699\ufe0f Proses Algoritma Fuzzy Logic<\/h3>\n    <p>Rangkaian pengolahan data untuk menghasilkan nilai atau rekomendasi.<\/p>\n    <div class=\"wf-algorithm\">\n      <div class=\"wf-algorithm-item\">\n        <b>01. Fuzzifikasi<\/b>\n        <small>Mengubah input menjadi derajat keanggotaan fuzzy.<\/small>\n      <\/div>\n      <div class=\"wf-algorithm-item\">\n        <b>02. Aturan Fuzzy<\/b>\n        <small>Menerapkan aturan IF\u2013THEN yang ditentukan.<\/small>\n      <\/div>\n      <div class=\"wf-algorithm-item\">\n        <b>03. Inferensi<\/b>\n        <small>Mengolah aturan sesuai metode yang dipilih.<\/small>\n      <\/div>\n      <div class=\"wf-algorithm-item\">\n        <b>04. Defuzzifikasi<\/b>\n        <small>Menghasilkan nilai akhir atau rekomendasi.<\/small>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <p style=\"font-size:11px;color:#667b91;margin:15px 0 0\">\n    *Notifikasi WhatsApp memerlukan integrasi gateway aktif.\n    Animasi ini merupakan simulasi visual, bukan proses pengiriman pesan\n    atau perhitungan kelayakan kendaraan secara langsung.\n  <\/p>\n<\/section>\n\n<script>\n(function(){\n  const root = document.getElementById('simodis-flow');\n  if (!root || root.dataset.initialized === 'true') return;\n  root.dataset.initialized = 'true';\n\n  const cards = Array.from(root.querySelectorAll('.wf-card'));\n  const bar = root.querySelector('#wf-progress-bar');\n  const progress = root.querySelector('#wf-progress');\n  const label = root.querySelector('#wf-progress-label');\n  const percent = root.querySelector('#wf-progress-percent');\n  const title = root.querySelector('#wf-detail-title');\n  const detail = root.querySelector('#wf-detail-text');\n  const detailIcon = root.querySelector('#wf-detail-icon');\n  const playButton = root.querySelector('#wf-play');\n\n  const descriptions = [\n    {\n      icon:'\ud83d\udd10',\n      title:'Tahap 1 \u2014 Login Pengguna',\n      text:'Pengguna terdaftar masuk ke SIMODIS untuk mengakses data sesuai hak aksesnya.'\n    },\n    {\n      icon:'\ud83d\ude99',\n      title:'Tahap 2 \u2014 Input Data Kendaraan',\n      text:'Data kendaraan, tanggal akhir pajak, masa berlaku STNK, dan jadwal servis dicatat atau diperbarui.'\n    },\n    {\n      icon:'\ud83d\udcf2',\n      title:'Tahap 3 \u2014 Monitoring dan Pengingat',\n      text:'Operator memantau data yang mendekati jatuh tempo. Pengingat WhatsApp dapat dikirim melalui gateway yang terintegrasi.'\n    },\n    {\n      icon:'\ud83e\udde0',\n      title:'Tahap 4 \u2014 Analisis Kelayakan Fuzzy',\n      text:'Parameter kondisi kendaraan diproses dengan aturan Fuzzy yang telah ditetapkan untuk membantu penilaian kelayakan operasional.'\n    },\n    {\n      icon:'\ud83d\udcca',\n      title:'Tahap 5 \u2014 Rekomendasi dan Pengembangan',\n      text:'Hasil analisis menjadi bahan pertimbangan. Metode Fuzzy juga dapat dikembangkan untuk kebutuhan analisis bidang lainnya.'\n    }\n  ];\n\n  let current = 0;\n  let playing = true;\n  let timer = null;\n  const reducedMotion = window.matchMedia &&\n    window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  function render(){\n    cards.forEach(function(card,index){\n      const active = index === current;\n      card.classList.toggle('active',active);\n      if(active) card.setAttribute('aria-current','step');\n      else card.removeAttribute('aria-current');\n    });\n\n    const item = descriptions[current];\n    const pct = Math.round(((current + 1) \/ cards.length) * 100);\n\n    bar.style.width = pct + '%';\n    label.textContent = 'Tahap ' + (current + 1) + ' dari ' + cards.length;\n    percent.textContent = pct + '%';\n    progress.setAttribute('aria-valuenow',String(current + 1));\n    title.textContent = item.title;\n    detail.textContent = item.text;\n    detailIcon.textContent = item.icon;\n  }\n\n  function stop(){\n    playing = false;\n    if(timer !== null) window.clearInterval(timer);\n    timer = null;\n    playButton.textContent = '\u25b6 Mulai Animasi';\n  }\n\n  function start(){\n    if(reducedMotion){\n      stop();\n      return;\n    }\n    if(timer !== null) window.clearInterval(timer);\n    playing = true;\n    playButton.textContent = '\u2161 Jeda Animasi';\n    timer = window.setInterval(function(){\n      current = (current + 1) % cards.length;\n      render();\n    },2600);\n  }\n\n  function go(index){\n    current = (index + cards.length) % cards.length;\n    render();\n  }\n\n  root.querySelector('#wf-prev').addEventListener('click',function(){\n    stop();go(current - 1);\n  });\n  root.querySelector('#wf-next').addEventListener('click',function(){\n    stop();go(current + 1);\n  });\n  root.querySelector('#wf-reset').addEventListener('click',function(){\n    go(0);start();\n  });\n  playButton.addEventListener('click',function(){\n    if(playing) stop();\n    else start();\n  });\n\n  render();\n  if(reducedMotion) stop();\n  else start();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\ude98 Alur Kerja SIMODIS Animasi perjalanan data kendaraan dinas dari input hingga rekomendasi. SIMULASI ALUR SISTEM 1 Login Pengguna \ud83d\udd10 Pengguna masuk ke aplikasi menggunakan akun yang telah terdaftar. \u2713 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-732","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/simodisdlhkotaptk.net\/index.php?rest_route=\/wp\/v2\/pages\/732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simodisdlhkotaptk.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/simodisdlhkotaptk.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/simodisdlhkotaptk.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simodisdlhkotaptk.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=732"}],"version-history":[{"count":2,"href":"https:\/\/simodisdlhkotaptk.net\/index.php?rest_route=\/wp\/v2\/pages\/732\/revisions"}],"predecessor-version":[{"id":735,"href":"https:\/\/simodisdlhkotaptk.net\/index.php?rest_route=\/wp\/v2\/pages\/732\/revisions\/735"}],"wp:attachment":[{"href":"https:\/\/simodisdlhkotaptk.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}