marcusGS/goals.html at master · d2kole/marcusGS · 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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Marcus Savings Tracker • Goals</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="css/styles.css" />
</head>
<body class="pb-20">


  <header>
    <div class="header-content">
      <div class="header-title">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="12" r="10"></circle>
          <circle cx="12" cy="12" r="6"></circle>
          <circle cx="12" cy="12" r="2"></circle>
        </svg>
        Marcus • Goals
      </div>
      <div class="header-actions">
        <button id="toggleGoalForm" class="btn btn-primary">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          Create New Goal
        </button>
        <button id="themeToggle" class="theme-toggle">☀️</button>
      </div>
    </div>
  </header>

  <main class="app-container page-content">
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-label">
          <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="12 2v20M2 12h20"></path>
          </svg>
          Active Goals
        </div>
        <div class="stat-value" id="activeCount">0</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">
          <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="8 12l2 2 4-4"></path>
            <circle cx="12" cy="12" r="10"></circle>
          </svg>
          Completed
        </div>
        <div class="stat-value" id="completedCount">0</div>
      </div>
    </div>

    <section id="goalFormSection" class="hidden card mb-6">
      <h2 class="mb-4">Create New Goal</h2>
      <form id="goalForm" novalidate>
        <div class="form-group">
          <label class="form-label">Goal Name</label>
          <input id="goalName" type="text" class="form-input" placeholder="Emergency fund" required />
          <p id="goalNameError" class="form-error"></p>
        </div>
        <div class="form-group">
          <label class="form-label">Category</label>
          <select id="goalCategory" class="form-input">
            <option>Vacation</option>
            <option>Emergency Fund</option>
            <option>General Savings</option>
            <option>Major Purchase</option>
            <option>Other</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Target Amount ($)</label>
          <input id="targetAmount" type="number" min="1" step="0.01" class="form-input" placeholder="500" required />
          <p id="targetAmountError" class="form-error"></p>
        </div>
        <div class="form-group">
          <label class="form-label">Target Date</label>
          <input id="targetDate" type="date" class="form-input" required />
          <p id="targetDateError" class="form-error"></p>
        </div>
        <div class="flex gap-2">
          <button type="submit" class="btn btn-primary" style="flex: 1;">Create Goal</button>
          <button type="button" id="cancelCreate" class="btn btn-secondary" style="flex: 1;">Cancel</button>
        </div>
        <p id="limitError" class="form-error mt-3"></p>
      </form>
    </section>

    <!-- Active Goals Section -->
    <div class="mb-8">
      <h2 class="mb-4 text-xl font-bold text-gray-800 border-b-2 border-blue-600 pb-2">🎯 Active Goals</h2>
      <section id="activeGoals" class="card-grid"></section>
    </div>

    <!-- Completed Goals Section -->
    <div class="mt-12 pt-8 border-t-2 border-gray-200">
      <h2 class="mb-4 text-xl font-bold text-green-700 border-b-2 border-green-500 pb-2">✅ Completed Goals</h2>
      <section id="completedGoals" class="card-grid"></section>
    </div>

  </main>

  <footer class="bottom-nav">
    <div class="nav-grid">
      <a class="nav-item" href="index.html">
        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9,22 9,12 15,12 15,22"></polyline>
        </svg>
        <span class="nav-label">Dashboard</span>
      </a>
      <a class="nav-item active" href="goals.html">
        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="12" r="10"></circle>
          <circle cx="12" cy="12" r="6"></circle>
          <circle cx="12" cy="12" r="2"></circle>
        </svg>
        <span class="nav-label">Goals</span>
      </a>
      <a class="nav-item" href="friends.html">
        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="9" cy="7" r="4"></circle>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
        </svg>
        <span class="nav-label">Friends</span>
      </a>
      <a class="nav-item" href="profile.html">
        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
          <circle cx="12" cy="7" r="4"></circle>
        </svg>
        <span class="nav-label">Profile</span>
      </a>
    </div>
  </footer>

  <script src="js/utils.js"></script>
  <script src="js/storage.js"></script>
  <script src="js/validators.js"></script>
  <script src="js/components.js"></script>
  <script src="js/goals.js"></script>
  <script src="js/celebration.js"></script>
  <script src="js/app.js"></script>
</body>
</html>