Skip to content

Commit 3084cb0

Browse files
semanticdatasemanticdata
committed
new design
1 parent 94799f8 commit 3084cb0

3 files changed

Lines changed: 313 additions & 195 deletions

File tree

‎src/newtab.html‎

Lines changed: 86 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,95 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="light">
2+
<html lang="en-US">
33

44
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>NoteKeeper</title>
8-
<meta name="description"
9-
content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
10-
<link rel="icon" type="image/png" sizes="48x48" href="icons/icon48.png" />
11-
<!-- Prevent flash of incorrect theme -->
12-
<script type="text/javascript" src="js/theme-init.js"></script>
13-
<link rel="stylesheet" href="styles.css" />
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>NoteKeeper</title>
8+
<meta name="description"
9+
content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
10+
<link rel="icon" type="image/svg+xml" href="icon.svg" />
11+
<link rel="stylesheet" href="styles.css" />
12+
<script>
13+
// Prevent FOUC
14+
const savedTheme = localStorage.getItem("theme");
15+
const sysTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
16+
document.documentElement.setAttribute("data-theme", savedTheme || (sysTheme ? "dark" : "light"));
17+
// Pre-load font size
18+
const savedSize = localStorage.getItem("fontsize");
19+
if (savedSize) document.documentElement.style.setProperty('--note-size', savedSize);
20+
</script>
1421
</head>
1522

1623
<body>
17-
<header>
18-
<h1 class="nav-title">
19-
<img src="icons/icon32.png" alt="icon" height="32px" width="32px" />
20-
NoteKeeper
21-
</h1>
22-
<button type="button" data-theme-toggle aria-label="Change to light theme">
23-
Theme Toggle
24-
</button>
25-
</header>
26-
27-
<main>
28-
<textarea class="textarea" id="notes" rows="20" placeholder="Write something..."></textarea>
29-
</main>
30-
31-
<footer>
32-
<p>
33-
Made with
34-
<a class="heart" href="https://github.com/semanticdata/notekeeper">❤</a>
35-
in Minneapolis.
36-
</p>
37-
</footer>
38-
39-
<script type="text/javascript" src="js/tabnotes.js"></script>
40-
<script type="text/javascript" src="js/toggle.js"></script>
24+
<header>
25+
<div style="display: flex; align-items: center; gap: 0.25rem;">
26+
<img src="icon.svg" alt="NoteKeeper Logo" width="24" height="24" />
27+
<span class="brand">NoteKeeper</span>
28+
</div>
29+
30+
<button id="theme-toggle" aria-label="Toggle theme">
31+
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
32+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
33+
<circle cx="12" cy="12" r="5"></circle>
34+
<line x1="12" y1="1" x2="12" y2="3"></line>
35+
<line x1="12" y1="21" x2="12" y2="23"></line>
36+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
37+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
38+
<line x1="1" y1="12" x2="3" y2="12"></line>
39+
<line x1="21" y1="12" x2="23" y2="12"></line>
40+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
41+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
42+
</svg>
43+
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
44+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
45+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
46+
</svg>
47+
</button>
48+
</header>
49+
50+
<main>
51+
<textarea id="notes" placeholder="Write something..." autofocus></textarea>
52+
</main>
53+
54+
<footer>
55+
<div class="col-left"><span>Made with <a class="heart" href="https://github.com/semanticdata/notekeeper"
56+
target="_blank" rel="noopener">❤</a> in Minneapolis.</span></div>
57+
58+
<div class="col-center">
59+
<span id="word-count">0 words</span>
60+
<span class="divider">|</span>
61+
<span id="save-status">Ready</span>
62+
</div>
63+
64+
<div class="col-right" style="position: relative;">
65+
<!-- Settings Menu Popover -->
66+
<div id="settings-menu" class="settings-menu" hidden>
67+
<div class="setting-row">
68+
<label for="font-slider">Font Size</label>
69+
<span id="font-display">18px</span>
70+
</div>
71+
<input type="range" id="font-slider" min="12" max="32" value="18" step="1">
72+
</div>
73+
74+
<!-- Settings Trigger -->
75+
<button id="settings-toggle" aria-label="Open settings" aria-expanded="false">
76+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
77+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
78+
<line x1="4" y1="21" x2="4" y2="14"></line>
79+
<line x1="4" y1="10" x2="4" y2="3"></line>
80+
<line x1="12" y1="21" x2="12" y2="12"></line>
81+
<line x1="12" y1="8" x2="12" y2="3"></line>
82+
<line x1="20" y1="21" x2="20" y2="16"></line>
83+
<line x1="20" y1="12" x2="20" y2="3"></line>
84+
<line x1="1" y1="14" x2="7" y2="14"></line>
85+
<line x1="9" y1="8" x2="15" y2="8"></line>
86+
<line x1="17" y1="16" x2="23" y2="16"></line>
87+
</svg>
88+
</button>
89+
</div>
90+
</footer>
91+
92+
<script type="text/javascript" src="script.js"></script>
4193
</body>
4294

4395
</html>

‎src/sidebar/panel.html‎

Lines changed: 86 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,95 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="light">
2+
<html lang="en-US">
33

44
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>NoteKeeper in Sidebar</title>
8-
<meta name="description"
9-
content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
10-
<link rel="icon" type="image/png" sizes="48x48" href="../icons/icon48.png" />
11-
<!-- Prevent flash of incorrect theme -->
12-
<script>
13-
(function () {
14-
const localStorageTheme = localStorage.getItem("theme");
15-
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
16-
17-
let theme = "light";
18-
if (localStorageTheme) {
19-
theme = localStorageTheme;
20-
} else if (systemSettingDark) {
21-
theme = "dark";
22-
}
23-
24-
document.documentElement.setAttribute("data-theme", theme);
25-
})();
26-
</script>
27-
<link rel="stylesheet" href="../styles.css" />
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>NoteKeeper</title>
8+
<meta name="description"
9+
content="NoteKeeper is a Firefox extension that transforms the New Tab into a minimalist, auto-saving text editor.">
10+
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
11+
<link rel="stylesheet" href="../styles.css" />
12+
<script>
13+
// Prevent FOUC
14+
const savedTheme = localStorage.getItem("theme");
15+
const sysTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
16+
document.documentElement.setAttribute("data-theme", savedTheme || (sysTheme ? "dark" : "light"));
17+
// Pre-load font size
18+
const savedSize = localStorage.getItem("fontsize");
19+
if (savedSize) document.documentElement.style.setProperty('--note-size', savedSize);
20+
</script>
2821
</head>
2922

3023
<body>
31-
<header>
32-
<h1 class="nav-title">
33-
<img src="../icons/icon32.png" alt="icon" height="32px" width="32px" />
34-
NoteKeeper
35-
</h1>
36-
<button type="button" data-theme-toggle aria-label="Change to light theme">
37-
Theme Toggle
38-
</button>
39-
</header>
40-
41-
<main>
42-
<textarea class="textarea" id="notes" rows="20" placeholder="Write something..."></textarea>
43-
</main>
44-
45-
<footer>
46-
<p>
47-
Made with
48-
<a class="heart" href="https://github.com/semanticdata/notekeeper">❤</a>
49-
in Minneapolis.
50-
</p>
51-
</footer>
52-
53-
<script type="text/javascript" src="../js/tabnotes.js"></script>
54-
<script type="text/javascript" src="../js/toggle.js"></script>
24+
<header>
25+
<div style="display: flex; align-items: center; gap: 0.25rem;">
26+
<img src="../icon.svg" alt="NoteKeeper Logo" width="24" height="24" />
27+
<span class="brand">NoteKeeper</span>
28+
</div>
29+
30+
<button id="theme-toggle" aria-label="Toggle theme">
31+
<svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
32+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
33+
<circle cx="12" cy="12" r="5"></circle>
34+
<line x1="12" y1="1" x2="12" y2="3"></line>
35+
<line x1="12" y1="21" x2="12" y2="23"></line>
36+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
37+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
38+
<line x1="1" y1="12" x2="3" y2="12"></line>
39+
<line x1="21" y1="12" x2="23" y2="12"></line>
40+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
41+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
42+
</svg>
43+
<svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
44+
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
45+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
46+
</svg>
47+
</button>
48+
</header>
49+
50+
<main>
51+
<textarea id="notes" placeholder="Write something..." autofocus></textarea>
52+
</main>
53+
54+
<footer>
55+
<div class="col-left"><span>Made with <a class="heart" href="https://github.com/semanticdata/notekeeper"
56+
target="_blank" rel="noopener">❤</a> in Minneapolis.</span></div>
57+
58+
<div class="col-center">
59+
<span id="word-count">0 words</span>
60+
<span class="divider">|</span>
61+
<span id="save-status">Ready</span>
62+
</div>
63+
64+
<div class="col-right" style="position: relative;">
65+
<!-- Settings Menu Popover -->
66+
<div id="settings-menu" class="settings-menu" hidden>
67+
<div class="setting-row">
68+
<label for="font-slider">Font Size</label>
69+
<span id="font-display">18px</span>
70+
</div>
71+
<input type="range" id="font-slider" min="12" max="32" value="18" step="1">
72+
</div>
73+
74+
<!-- Settings Trigger -->
75+
<button id="settings-toggle" aria-label="Open settings" aria-expanded="false">
76+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
77+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
78+
<line x1="4" y1="21" x2="4" y2="14"></line>
79+
<line x1="4" y1="10" x2="4" y2="3"></line>
80+
<line x1="12" y1="21" x2="12" y2="12"></line>
81+
<line x1="12" y1="8" x2="12" y2="3"></line>
82+
<line x1="20" y1="21" x2="20" y2="16"></line>
83+
<line x1="20" y1="12" x2="20" y2="3"></line>
84+
<line x1="1" y1="14" x2="7" y2="14"></line>
85+
<line x1="9" y1="8" x2="15" y2="8"></line>
86+
<line x1="17" y1="16" x2="23" y2="16"></line>
87+
</svg>
88+
</button>
89+
</div>
90+
</footer>
91+
92+
<script type="text/javascript" src="../script.js"></script>
5593
</body>
5694

5795
</html>

0 commit comments

Comments
 (0)