infinity-saving/index.html at main · Zycresth/infinity-saving · 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://generativelanguage.googleapis.com https://api.groq.com https://api-inference.huggingface.co; img-src 'self' data: https:;">
    <title>Infinity Saving - Save Your Dreams</title>
    <script src="https://cdn.jsdelivr.net/npm/bcryptjs@2.4.3/dist/bcrypt.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div id="loading-screen">
    <div class="loading-content glass-card">
        <div class="infinity-container">
            <svg viewBox="0 0 100 100" fill="none" aria-hidden="true" id="lemniscateSvg">
                <g id="lemniscateGroup">
                    <path id="lemniscatePath" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" opacity="0.1"></path>
                </g>
            </svg>
        </div>
        <div class="cosmic-dust" id="loadingTagline">✦ Activating Nebula Savings ✦</div>
    </div>
</div>

<div id="auth-container" style="display: none;">
    <div class="login-card glass-card">
        <div class="typing-area" id="typingText"></div>
        <div id="authPanelLogin" class="auth-panel" style="margin: 20px 0;">
            <label class="field-label" for="loginEmail" id="labelLoginEmail">Email</label>
            <input type="email" id="loginEmail" autocomplete="username" inputmode="email">
            <label class="field-label" for="loginPass" id="labelLoginPass">Kata sandi</label>
            <input type="password" id="loginPass" autocomplete="current-password">
            <div class="auth-error" id="loginError" aria-live="polite"></div>
            <button type="button" class="btn-primary" id="btnLogin">🚀 Masuk</button>
            <button type="button" class="btn-outline" id="btnShowRegister">✨ Daftar</button>
            <button type="button" class="btn-ghost" id="btnGuest">Lanjut sebagai Tamu</button>
        </div>
        <div id="authPanelRegister" class="auth-panel" style="display: none; margin: 20px 0;">
            <label class="field-label" for="regUsername" id="labelRegUsername">Nama pengguna</label>
            <input type="text" id="regUsername" autocomplete="username" maxlength="64">
            <label class="field-label" for="regEmail" id="labelRegEmail">Email</label>
            <input type="email" id="regEmail" autocomplete="email" inputmode="email">
            <label class="field-label" for="regPass" id="labelRegPass">Kata sandi</label>
            <input type="password" id="regPass" autocomplete="new-password">
            <label class="field-label" for="regConfirm" id="labelRegConfirm">Konfirmasi kata sandi</label>
            <input type="password" id="regConfirm" autocomplete="new-password">
            <div class="auth-error" id="registerError" aria-live="polite"></div>
            <div style="margin: 10px 0 6px; display:flex; gap:10px; align-items:flex-start;">
                <input type="checkbox" id="agreeTerms" style="width:auto; margin: 4px 0 0; transform: scale(1.05);" />
                <label for="agreeTerms" id="labelAgreeTerms" style="font-size: 0.82rem; color: var(--text-dim); line-height: 1.35; cursor: pointer;">
                    Saya sudah membaca dan setuju dengan Syarat Layanan & Kebijakan Privasi.
                </label>
            </div>
            <button type="button" class="btn-primary" id="btnRegisterSubmit">Daftar</button>
            <button type="button" class="auth-switch" id="btnBackToLogin">Sudah punya akun? Masuk</button>
        </div>
        <div class="lang-row">
            <label for="langSelect" id="langLabel">Bahasa</label>
            <select id="langSelect" class="lang-select">
                <option value="id">Bahasa Indonesia</option>
                <option value="en">English</option>
                <option value="ms">Bahasa Melayu</option>
            </select>
        </div>
        <div class="lang-row">
            <label for="loginThemeSelect" id="loginThemeLabel">Mode</label>
            <select id="loginThemeSelect" class="theme-select" style="width: 100%; padding: 8px; border-radius: 14px; border: 1px solid #ff3366;">
                <option value="dark">🌙 Dark Mode</option>
                <option value="light">☀️ Light Mode</option>
            </select>
        </div>
        <div class="legal-footer">
            <div class="legal-footer-links">
                <button type="button" class="legal-link" id="linkLegalTos">Terms</button>
                <span class="legal-sep" aria-hidden="true">·</span>
                <button type="button" class="legal-link" id="linkLegalPrivacy">Privacy</button>
                <span class="legal-sep" aria-hidden="true">·</span>
                <button type="button" class="legal-link" id="linkLegalHelp">Help</button>
            </div>
            <div class="v-tag">v2.13.5 | Zycresth x Fahmi-astronot</div>
        </div>
        <div id="authBusyOverlay" class="auth-busy-overlay" role="status" aria-live="polite" aria-hidden="true">
            <div class="auth-busy-inner">
                <div class="auth-busy-spinner" aria-hidden="true"></div>
                <div class="auth-busy-text" id="authBusyText"></div>
            </div>
        </div>
    </div>
</div>

<div id="main-app">
    <div id="sideRail">
        <div id="hamburgerMenu">☰</div>
        <div id="sideRailSettings" style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">
            <button type="button" id="sideRailSettingsBtn" style="width: 45px; height: 45px; border-radius: 50%; background: rgba(255, 51, 102, 0.2); border: 1px solid rgba(255, 51, 102, 0.4); color: white; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;">⚙️</button>
        </div>
        <div id="sideRailSettingsMenu" class="side-rail-settings-menu" style="display: none;">
            <label class="submenu-field-label" for="sideRailCurrencySelect" id="sideRailCurrencyLabel"></label>
            <select id="sideRailCurrencySelect" class="currency-select" style="width: 100%; padding: 8px; border-radius: 14px; border: 1px solid #ff3366;">
                <option value="IDR">IDR (Rp)</option>
                <option value="USD">USD ($)</option>
                <option value="EUR">EUR (€)</option>
                <option value="JPY">JPY (¥)</option>
            </select>
            <label class="submenu-field-label" for="sideRailLangSelect" id="sideRailLangLabel"></label>
            <select id="sideRailLangSelect" class="lang-select" style="width: 100%; padding: 8px; border-radius: 14px; border: 1px solid #ff3366; margin-top: 8px;">
                <option value="id">Bahasa Indonesia</option>
                <option value="en">English</option>
                <option value="ms">Bahasa Melayu</option>
            </select>
            <div class="submenu-toggle-row" style="margin-top: 8px;">
                <span id="sideRailDarkModeLabel"></span>
                <select id="sideRailDarkModeToggle" class="theme-select" style="width: auto; padding: 4px 8px; border-radius: 8px; border: 1px solid #ff3366;">
                    <option value="dark">🌙 Dark Mode</option>
                    <option value="light">☀️ Light Mode</option>
                </select>
            </div>
            <div class="submenu-toggle-row" style="margin-top: 8px;">
                <span id="layoutModeLabel"></span>
                <select id="layoutModeToggle" class="theme-select" style="width: auto; padding: 4px 8px; border-radius: 8px; border: 1px solid #ff3366;">
                    <option value="grid">📐 Grid Mode</option>
                    <option value="freeform">🎨 Freeform Mode</option>
                </select>
            </div>
            <div style="border-top: 1px solid rgba(255, 51, 102, 0.3); margin: 16px 0 8px 0;"></div>
            <div class="menu-category-header" id="sideRailAdvancedLabel"></div>
            <button type="button" class="submenu-item" id="sideRailExportJsonBtn" style="margin-top: 4px;"></button>
            <button type="button" class="submenu-item" id="sideRailExportTxtBtn"></button>
            <button type="button" class="submenu-item" id="sideRailImportDataBtn"></button>
            <div style="border-top: 1px solid rgba(255, 51, 102, 0.3); margin: 16px 0 8px 0;"></div>
            <button type="button" class="submenu-item" id="sideRailResetAllDataBtn" style="color: #ff4444;"></button>
        </div>
    </div>
    <div id="sidebarOverlay" aria-hidden="true"></div>
    <div class="sidebar" id="sidebar">
        <div class="menu-header" style="display: flex; justify-content: space-between; margin-bottom: 20px;">
            <span style="font-weight: bold; color:var(--red-primary)">✦ INFINITY SAVING ✦</span>
            <button id="closeSidebar" style="font-size:24px; background:none; border:none;">&times;</button>
        </div>
        <div class="menu-dropdown open" id="aiMenuGroup">
            <button type="button" class="menu-parent" data-dropdown-toggle="aiSubmenu">
                <span id="menuAiHeader"></span><span class="menu-chevron">⌄</span>
            </button>
            <div class="menu-submenu" id="aiSubmenu">
                <button type="button" class="submenu-item" id="aiChatBtn"></button>
            </div>
        </div>
        <div class="menu-dropdown" id="goalsMenuGroup">
            <button type="button" class="menu-parent" data-dropdown-toggle="goalsSubmenu">
                <span id="menuGoalsHeader">🎯 Goals</span><span class="menu-chevron">⌄</span>
            </button>
            <div class="menu-submenu" id="goalsSubmenu">
                <button type="button" class="submenu-item" id="showChartBtn"></button>
                <button type="button" class="submenu-item" id="prediksiBtn"></button>
                <button type="button" class="submenu-item" id="historyBtn"></button>
            </div>
        </div>

        <!-- Hidden file input for import -->
        <input type="file" id="importFileInput" accept=".json" style="display: none;">

        <div class="menu-section">
            <div class="menu-item" id="logoutBtn"></div>
        </div>
    </div>
    <div class="fab-plus" id="fabAddTarget">+</div>
    <div id="emptyStateMsg" style="padding: 20px; text-align: center; color: gray;"></div>
    <div class="targets-grid" id="targetsGrid"></div>
</div>

<div id="globalModal" class="modal-overlay">
    <div class="modal-content" id="modalContent"></div>
</div>

<script src="app.js"></script>
</body>
</html>