writebox/index.html at main · rizwanhasanbd/writebox · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="WriteBox - A minimalist, distraction-free writing app">
    <meta name="theme-color" content="#ffffff">
    <title>WriteBox</title>
    <script>
        (function () {
            try {
                var stored = localStorage.getItem('writebox.theme');
                var theme = stored || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
                document.documentElement.setAttribute('data-theme', theme);
                document.documentElement.classList.toggle('dark', theme === 'dark');
            } catch (e) {}
        })();
    </script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>✍️</text></svg>">
</head>
<body>
    <!-- Top toolbar -->
    <header class="toolbar" id="toolbar" role="toolbar" aria-label="Main toolbar">
        <div class="toolbar-left">
            <button class="icon-btn" id="menu-toggle" title="Documents (Ctrl+M)" aria-label="Toggle documents menu">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="3" y1="6" x2="21" y2="6"/>
                    <line x1="3" y1="12" x2="21" y2="12"/>
                    <line x1="3" y1="18" x2="21" y2="18"/>
                </svg>
            </button>
            <span class="app-title" id="app-title">WriteBox</span>
        </div>

        <div class="toolbar-center">
            <input type="text" id="doc-title" class="doc-title-input" placeholder="Untitled" aria-label="Document title">
        </div>

        <div class="toolbar-right">
            <span class="save-status" id="save-status" aria-live="polite">Saved</span>
            <button class="icon-btn" id="new-btn" title="New document (Ctrl+N)" aria-label="New document">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                    <polyline points="14 2 14 8 20 8"/>
                    <line x1="12" y1="11" x2="12" y2="17"/>
                    <line x1="9" y1="14" x2="15" y2="14"/>
                </svg>
            </button>
            <button class="icon-btn" id="import-btn" title="Import .txt file" aria-label="Import text file">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="17 8 12 3 7 8"/>
                    <line x1="12" y1="3" x2="12" y2="15"/>
                </svg>
            </button>
            <button class="icon-btn" id="export-btn" title="Export as .txt (Ctrl+E)" aria-label="Export as text file">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                    <polyline points="7 10 12 15 17 10"/>
                    <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
            </button>
            <!-- Font size controls -->
            <div class="font-size-group" role="group" aria-label="Font size controls">
                <button class="icon-btn font-size-btn" id="font-decrease" title="Decrease font size (Ctrl+-)" aria-label="Decrease font size">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                </button>
                <span class="font-size-display" id="font-size-display" title="Current font size" aria-live="polite">19px</span>
                <button class="icon-btn font-size-btn" id="font-increase" title="Increase font size (Ctrl+=)" aria-label="Increase font size">
                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                </button>
            </div>
            <button class="icon-btn" id="theme-toggle" title="Toggle theme (Ctrl+D)" aria-label="Toggle dark mode">
                <svg id="icon-moon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                </svg>
                <svg id="icon-sun" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none;">
                    <circle cx="12" cy="12" r="5"/>
                    <line x1="12" y1="1" x2="12" y2="3"/>
                    <line x1="12" y1="21" x2="12" y2="23"/>
                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
                    <line x1="1" y1="12" x2="3" y2="12"/>
                    <line x1="21" y1="12" x2="23" y2="12"/>
                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
                </svg>
            </button>
        </div>
    </header>

    <!-- Sidebar with documents list -->
    <aside class="sidebar" id="sidebar" aria-label="Documents list">
        <div class="sidebar-header">
            <h2>Documents</h2>
            <button class="icon-btn" id="sidebar-close" aria-label="Close sidebar">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"/>
                    <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
            </button>
        </div>
        <button class="new-doc-btn" id="sidebar-new-btn">+ New Document</button>
        <ul class="doc-list" id="doc-list" role="list"></ul>
    </aside>

    <!-- Backdrop for mobile sidebar -->
    <div class="backdrop" id="backdrop"></div>

    <!-- Main writing area -->
    <main class="writing-area">
        <textarea
            id="editor"
            class="editor"
            placeholder="Start writing..."
            spellcheck="true"
            autofocus
            aria-label="Writing editor"></textarea>
    </main>

    <!-- Bottom status bar -->
    <footer class="status-bar" id="status-bar" aria-label="Document statistics">
        <span class="stat" id="word-count">0 words</span>
        <span class="stat-sep">·</span>
        <span class="stat" id="char-count">0 characters</span>
        <span class="stat-sep">·</span>
        <span class="stat" id="reading-time">0 min read</span>
    </footer>

    <!-- Hidden file input for import -->
    <input type="file" id="file-input" accept=".txt,.md,text/plain" style="display:none;">

    <!-- Toast notifications -->
    <div class="toast" id="toast" role="status" aria-live="polite"></div>

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