UangSaku-Pro/goals.html at main · xDzaky/UangSaku-Pro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="id" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>UangSaku Pro — Target Tabungan</title>
  <meta name="description" content="Buat target tabungan, pantau progress, dan lihat estimasi selesai." />
  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' https://cdn.jsdelivr.net; connect-src 'self'; font-src 'self' data:; object-src 'none';" />
  <meta name="theme-color" content="#0d9488" />
  <link rel="manifest" href="manifest.webmanifest" />
  <link rel="icon" type="image/svg+xml" href="assets/icon.svg" />
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body data-page="goals">
  <a class="skip-link" href="#main">Lewati ke konten utama</a>
  <header class="app-header">
    <div class="brand">
      <span aria-hidden="true">💸</span>
      <div>
        <p class="app-title">UangSaku Pro</p>
        <p class="app-tagline">Budgeting Pelajar Offline-First</p>
      </div>
    </div>
    <nav aria-label="Navigasi utama">
      <ul class="nav-list">
        <li><a href="index.html">Dashboard</a></li>
        <li><a href="transactions.html">Transaksi</a></li>
        <li><a href="budgets.html">Anggaran</a></li>
        <li><a href="goals.html">Target</a></li>
        <li><a href="reports.html">Laporan</a></li>
        <li><a href="settings.html">Pengaturan</a></li>
      </ul>
    </nav>
  </header>
  <main id="main" class="container">
    <section class="card">
      <header class="section-header">
        <div>
          <h1>Target tabungan</h1>
          <p class="muted">Tetapkan tujuan, jaga motivasi, dan rayakan pencapaian.</p>
        </div>
        <button class="btn primary" data-action="open-goal-dialog" aria-haspopup="dialog">+ Target</button>
      </header>
      <ul id="goalsList" class="goal-list" aria-live="polite"></ul>
    </section>
  </main>
  <dialog id="goalDialog" aria-modal="true">
    <form id="goalForm">
      <header>
        <h2 id="goalDialogTitle">Target baru</h2>
      </header>
      <div class="form-grid">
        <label>Nama target
          <input type="text" name="name" maxlength="40" required />
        </label>
        <label>Nominal (Rp)
          <input type="number" name="amount" min="0" step="10000" required />
        </label>
        <label>Deadline
          <input type="date" name="deadline" required />
        </label>
        <label>Nominal terkumpul (Rp)
          <input type="number" name="saved" min="0" step="5000" value="0" />
        </label>
      </div>
      <footer class="dialog-actions">
        <button type="submit" class="btn primary">Simpan</button>
        <button type="button" class="btn ghost" data-action="close-dialog">Batal</button>
      </footer>
    </form>
  </dialog>
  <footer class="app-footer">
    <p>Tip: Pecah target besar menjadi beberapa milestone agar tetap realistis.</p>
  </footer>
  <script type="module" src="js/app.js"></script>
</body>
</html>