NoteIt/index.html at main · Dushyanthyadav/NoteIt · 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.0">
    <title>NoteIt - Only on Browser</title>

    <script>
        window.__resolvedTheme = (function () {
            const saved = localStorage.getItem("theme");
            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
            const theme = saved || (prefersDark ? "dark" : "light");

            if (theme === "dark") {
                document.documentElement.classList.add("dark");
            }
            return theme;
        })();
    </script>

    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/web/icons8-notepad-parakeet-color-16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="icons/web/icons8-notepad-parakeet-color-32.png">
</head>
<!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DM0DLV9GV1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-DM0DLV9GV1');
    </script>

<body>
    <header>
        <nav class="Navigation">
            <ul>
                <li class="brand">
                    <img src="icons/web/icons8-notepad-parakeet-color-32.png" alt="NoteIt Logo">
                    <span>NoteIt</span>
                </li>
                <li>
                    <button id="theme-toggle">🌙</button>
                </li>
                <!-- <li><img src="icons/Settings.svg" alt="Setting Icon">Setting</li> -->
                <li id="clear-note" title="Clear the note" style="cursor: pointer;">
                    <img src="icons/Clear Formatting.svg" alt="Clear Icon">Clear
                </li>
                <li id="timer" class="Timer-dropdown"><img src="icons/Stopwatch.svg" alt="Timer Icon">Timer
                    <div class="menu-box" id="timer-menu">
                        <div id="15mintues" class="menu-item" data-minutes="15">15 Minutes</div>
                        <div id="30mintues" class="menu-item" data-minutes="30">30 Minutes</div>
                        <div id="60mintues" class="menu-item" data-minutes="60">60 Minutes</div>
                        <div id="Custom-timer" class="menu-item">Custom</div>
                    </div>
                </li>
                <li id="download-note" title="Download as .txt file" style="cursor: pointer;">
                    <img src="icons/Downloading Updates.svg" alt="Download Icon">Download
                </li>
                <li id="about">
                    <img src="icons/Info.svg" alt="info Logo">About
                </li>
            </ul>
        </nav>
    </header>
    <div class="notepad">
        <textarea id="note-text" name="note" placeholder="Write your notes here...."></textarea>
        <div class="timer_with_icon">
            <div class="timer-countdown">
                <p>00:00</p>
                <img id="cancelIcon" src="icons/Cancel.svg" alt="Cancel Icon">
            </div>
        </div>
    </div>
    <div id="confirm-modal" class="modal hidden">
        <div class="modal-content">
            <p>Are you sure you want to clear the note?</p>
            <div class="modal-buttons">
                <button id="confirm-clear">Yes, Clear</button>
                <button id="cancel-clear">Cancel</button>
            </div>
        </div>
    </div>
    <div id="download-modal" class="modal hidden">
        <div class="modal-content">
            <p>Nothing to download. The note is empty!</p>
            <div class="modal-buttons">
                <button id="close-download-modal">OK</button>
            </div>
        </div>
    </div>
    <div id="custom-timer-modal" class="modal hidden">
        <div class="modal-content">
            <div id="timer-text-area">
                <textarea name="set-timer-textarea" id="timer-textarea"></textarea>
                <p>Mins</p>
            </div>
            <div class="modal-buttons">
                <button id="confirm-time">OK</button>
            </div>
        </div>
    </div>
    <div id="time-up-modal" class="modal hidden">
        <div class="modal-content">
            <p>⏰ Time's up!</p>
            <div class="modal-buttons">
                <button id="close-time-up">OK</button>
            </div>
        </div>
    </div>
    <div id="about-modal" class="modal hidden">
        <div class="modal-content">
            <h2>About NoteIt</h2>
            <p><strong>NoteIt</strong> is a minimalistic and privacy-focused notepad app. It helps you quickly write and
                manage notes with a clean and distraction-free interface.</p>

            <ul style="text-align: left; margin-top: 1rem;">
                <li>🌙 Theme toggle for light/dark mode</li>
                <li>⏰ Built-in countdown timer with alerts</li>
                <li>🧹 One-click clear notes with confirmation</li>
                <li>📥 Export notes as .txt files easily</li>
                <li>🔐 <strong>Privacy-focused</strong>: All your notes are stored only in your browser using local
                    storage</li>
            </ul>

            <p style="margin-top: 1rem; color: #e53935;"><strong>⚠️ Important:</strong> Since data is stored locally in
                your browser, it can be lost if you clear your browser data or cache. Please make frequent backups using
                the download option.</p>

            <p style="margin-top: 1rem;">Made with ❤️ by <strong>Dushyanth</strong>, a student and aspiring developer.
            </p>

            <p>
                🔗 <a href="https://github.com/Dushyanthyadav/NoteIt" target="_blank"
                    style="color: var(--text-color); text-decoration: underline;">
                    GitHub Repository
                </a>
            </p>

            <div class="modal-buttons">
                <button id="close-about-modal">Close</button>
            </div>
        </div>
    </div>


    <script src="script.js"></script>

</body>

</html>