with open('/var/www/html/undangan_digital/index.html', 'r') as f:
    html = f.read()

old_timeline = """  <!-- Timeline visual -->
  <div class="reveal" style="max-width:700px;margin:3rem auto 0;display:flex;align-items:center;gap:0;flex-wrap:wrap;justify-content:center;">
    <div style="text-align:center;flex:1;min-width:100px;">
      <div style="background:var(--merah);color:white;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:1.3rem;border:2px solid var(--emas);"><iconify-icon icon="mdi:weather-sunset-up" inline></iconify-icon></div>
      <div style="font-size:0.75rem;margin-top:0.5rem;font-weight:700;color:var(--merah-tua);">08.00<br>Akad Nikah</div>
    </div>
    <div style="flex:1;height:3px;background:linear-gradient(90deg,var(--merah),var(--emas));min-width:30px;"></div>
    <div style="text-align:center;flex:1;min-width:100px;">
      <div style="background:var(--hijau);color:white;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:1.3rem;border:2px solid var(--emas);"><iconify-icon icon="mdi:party-popper" inline></iconify-icon></div>
      <div style="font-size:0.75rem;margin-top:0.5rem;font-weight:700;color:var(--hijau);">11.00<br>Resepsi</div>
    </div>
    <div style="flex:1;height:3px;background:linear-gradient(90deg,var(--emas),var(--hijau));min-width:30px;"></div>
    <div style="text-align:center;flex:1;min-width:100px;">
      <div style="background:var(--biru);color:white;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:1.3rem;border:2px solid var(--emas);"><iconify-icon icon="mdi:drama-masks" inline></iconify-icon></div>
      <div style="font-size:0.75rem;margin-top:0.5rem;font-weight:700;color:var(--biru);">13.00<br>Hiburan</div>
    </div>
    <div style="flex:1;height:3px;background:linear-gradient(90deg,var(--hijau),var(--merah));min-width:30px;"></div>
    <div style="text-align:center;flex:1;min-width:100px;">
      <div style="background:var(--emas-tua);color:white;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:1.3rem;border:2px solid var(--emas);"><iconify-icon icon="mdi:weather-sunset-down" inline></iconify-icon></div>
      <div style="font-size:0.75rem;margin-top:0.5rem;font-weight:700;color:var(--emas-tua);">15.00<br>Penutupan</div>
    </div>
  </div>"""

new_timeline = """  <!-- Timeline visual -->
  <div class="timeline-wrap reveal">
    <div class="timeline-node">
      <div class="timeline-icon" style="background:var(--merah);"><iconify-icon icon="mdi:weather-sunset-up" inline></iconify-icon></div>
      <div class="timeline-text" style="color:var(--merah-tua);">08.00<br>Akad Nikah</div>
    </div>
    <div class="timeline-line" style="background:linear-gradient(90deg,var(--merah),var(--emas));"></div>
    <div class="timeline-node">
      <div class="timeline-icon" style="background:var(--hijau);"><iconify-icon icon="mdi:party-popper" inline></iconify-icon></div>
      <div class="timeline-text" style="color:var(--hijau);">11.00<br>Resepsi</div>
    </div>
    <div class="timeline-line" style="background:linear-gradient(90deg,var(--emas),var(--hijau));"></div>
    <div class="timeline-node">
      <div class="timeline-icon" style="background:var(--biru);"><iconify-icon icon="mdi:drama-masks" inline></iconify-icon></div>
      <div class="timeline-text" style="color:var(--biru);">13.00<br>Hiburan</div>
    </div>
    <div class="timeline-line" style="background:linear-gradient(90deg,var(--hijau),var(--merah));"></div>
    <div class="timeline-node">
      <div class="timeline-icon" style="background:var(--emas-tua);"><iconify-icon icon="mdi:weather-sunset-down" inline></iconify-icon></div>
      <div class="timeline-text" style="color:var(--emas-tua);">15.00<br>Penutupan</div>
    </div>
  </div>"""

html = html.replace(old_timeline, new_timeline)

with open('/var/www/html/undangan_digital/index.html', 'w') as f:
    f.write(html)


with open('/var/www/html/undangan_digital/style.css', 'r') as f:
    css = f.read()

new_css_classes = """
/* ── TIMELINE ── */
.timeline-wrap {
  max-width: 700px; margin: 3rem auto 0;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
}
.timeline-node {
  text-align: center; flex: 1; min-width: 80px;
}
.timeline-icon {
  color: white; border-radius: 50%;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; font-size: 1.3rem;
  border: 2px solid var(--emas);
}
.timeline-text {
  font-size: 0.75rem; margin-top: 0.5rem; font-weight: 700;
}
.timeline-line {
  flex: 1; height: 3px; min-width: 20px;
}

/* ── RESPONSIVE ── */"""

css = css.replace("/* ── RESPONSIVE ── */", new_css_classes)

responsive_additions = """
@media (max-width:600px) {
  .timeline-wrap {
    flex-direction: column;
    gap: 0.5rem;
  }
  .timeline-line {
    width: 3px; height: 30px; min-height: 30px; flex: none;
    background: var(--emas) !important;
  }"""

css = css.replace("@media (max-width:600px) {", responsive_additions)

with open('/var/www/html/undangan_digital/style.css', 'w') as f:
    f.write(css)

print("Timeline styling fixed.")
