Memento-Mori/popup.html at main · AmazingKeymaster/Memento-Mori · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memento Mori</title>
    <link rel="stylesheet" href="popup.css">
    <link
        href="https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="container">
        <header class="header">
            <div class="candle-icon">🕯️</div>
            <h1 class="title">Memento Mori</h1>
        </header>

        <div class="candle-container">
            <div class="candle-wrapper">
                <div class="flame"></div>
                <div class="candle" id="candle">
                    <div class="candle-body" id="candleBody"></div>
                </div>
                <div class="wax-base" id="waxBase"></div>
            </div>
        </div>

        <div class="stats-container">
            <div class="stat-item">
                <span class="stat-label">Screen Time:</span>
                <span class="stat-value" id="screenTime">0 min</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Saved Time:</span>
                <span class="stat-value" id="savedTime">0 min</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Days Left:</span>
                <span class="stat-value" id="daysLeft">0</span>
            </div>
        </div>

        <div class="quote-container">
            <p class="quote" id="dailyQuote">
                "Remember that you are mortal, and you have a limited time to live."
            </p>
            <p class="quote-author" id="quoteAuthor">— Ancient Roman Wisdom</p>
        </div>

        <div class="goals-section">
            <h3>Today's Goals</h3>
            <div class="goals-list" id="goalsList">
                <div class="goal-item">
                    <input type="checkbox" id="goal1">
                    <label for="goal1">Click 'Personalize' to set your first goal</label>
                </div>
            </div>
            <div class="add-goal-form" id="addGoalForm"
                style="display: none; margin-top: 10px; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 5px;">
                <input type="text" id="goalInput" placeholder="Enter your goal..."
                    style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 8px; background: rgba(255,255,255,0.9); color: #333;">
                <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 8px;">
                    <input type="checkbox" id="hasDeadline" style="margin-right: 5px;">
                    <label for="hasDeadline" style="font-size: 12px; color: #e2e8f0;">Add deadline?</label>
                    <input type="date" id="deadlineInput"
                        style="padding: 4px; border: 1px solid #ccc; border-radius: 4px; background: rgba(255,255,255,0.9); color: #333; font-size: 12px; display: none;">
                </div>
                <div style="display: flex; gap: 8px;">
                    <button id="saveGoalBtn"
                        style="flex: 1; padding: 8px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Save
                        Goal</button>
                    <button id="cancelGoalBtn"
                        style="flex: 1; padding: 8px; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Cancel</button>
                </div>
            </div>
            <button class="add-goal-btn" id="addGoalBtn">+ Add Goal</button>
        </div>

        <div class="action-buttons">
            <button class="btn btn-secondary" id="personalizeBtn">
                👤 Personalize
            </button>
            <button class="btn btn-secondary" id="viewStatsBtn">
                📊 View Stats
            </button>
            <button class="btn btn-secondary" id="focusModeBtn">
                🧘‍♂️ Focus Mode
            </button>
        </div>

        <div class="support-section">
            <a href="https://ko-fi.com/amazingkeymaster" target="_blank" class="kofi-link">
                ☕ Support Me
            </a>
        </div>

        <div class="privacy-policy">
            <h4>Privacy Policy</h4>
            <p><strong>Memento Mori</strong> stores your birthdate, continent, and settings locally on your device using
                Chrome's storage API. No data ever leaves your device - we don't send, sell, or share anything to
                servers. You're fully in control. Uninstalling the extension removes all stored data. We don't collect
                personal identifiers like your name, email, or IP address. Everything stays local. No ads, no tracking,
                no funny business. Questions? Hit me up on github.</p>
        </div>

        <div class="watermark">
            <a href="https://amazingkeymaster.github.io/" target="_blank">
                Made with ❤️ by amazingkeymaster
            </a>
        </div>
    </div>

    <script src="utils.js"></script>
    <script src="popup.js"></script>
</body>

</html>