Basic-Notepad/index.html at main · Brandon19-Chew/Basic-Notepad · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <title>Ruby Notepad</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">
    <!-- Notes List View -->
    <div id="list-view" class="view active">
      <header class="app-header">
        <h1 id="list-title">Ruby Notepad</h1>
        <div class="header-actions">
          <button id="tags-btn" class="icon-btn" title="Tags">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
          </button>
          <button id="search-btn" class="icon-btn" title="Search">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          </button>
        </div>
      </header>

      <!-- Tag Filter Bar -->
      <div id="tag-filter-bar" class="tag-filter-bar hidden">
        <div class="tag-filter-scroll">
          <button class="tag-chip active" data-tag="all">All Notes</button>
        </div>
        <button id="manage-tags-btn" class="icon-btn tag-manage-btn" title="Manage Tags">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
        </button>
      </div>

      <div id="search-bar" class="search-bar hidden">
        <input type="text" id="search-input" placeholder="Search notes..." autocomplete="off">
        <button id="search-close" class="icon-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
        </button>
      </div>
      <div id="notes-container" class="notes-grid"></div>
      <div id="empty-state" class="empty-state hidden">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5"><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="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
        <p>No notes yet</p>
        <p class="sub">Tap + to create your first note</p>
      </div>
      <button id="add-btn" class="fab" title="New Note">+</button>
    </div>

    <!-- Note Editor View -->
    <div id="editor-view" class="view">
      <header class="app-header editor-header">
        <button id="back-btn" class="icon-btn" title="Back">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        </button>
        <div class="editor-actions">
          <button id="tag-btn" class="icon-btn" title="Tag">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
          </button>
          <button id="color-btn" class="icon-btn" title="Color">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>
          </button>
          <button id="share-btn" class="icon-btn" title="Share">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
          </button>
          <button id="download-btn" class="icon-btn" title="Download">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>
          <button id="delete-btn" class="icon-btn" title="Delete">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
          </button>
        </div>
      </header>

      <!-- Tag Picker for Editor -->
      <div id="tag-picker" class="tag-picker hidden">
        <div class="tag-picker-header">
          <span>Assign Tags</span>
          <button id="tag-picker-close" class="icon-btn tag-picker-close-btn">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
          </button>
        </div>
        <div id="tag-picker-list" class="tag-picker-list"></div>
        <div class="tag-picker-add">
          <input type="text" id="new-tag-input" placeholder="New tag name..." maxlength="20">
          <button id="add-tag-btn" class="tag-add-btn">Add</button>
        </div>
      </div>

      <div id="color-picker" class="color-picker hidden">
        <button class="color-dot" data-color="#ffffff" style="background:#ffffff" title="White"></button>
        <button class="color-dot" data-color="#fff3b0" style="background:#fff3b0" title="Yellow"></button>
        <button class="color-dot" data-color="#ffd6d6" style="background:#ffd6d6" title="Red"></button>
        <button class="color-dot" data-color="#d4f5d4" style="background:#d4f5d4" title="Green"></button>
        <button class="color-dot" data-color="#d4e4f7" style="background:#d4e4f7" title="Blue"></button>
        <button class="color-dot" data-color="#e8d4f5" style="background:#e8d4f5" title="Purple"></button>
        <button class="color-dot" data-color="#ffe0c2" style="background:#ffe0c2" title="Orange"></button>
        <button class="color-dot" data-color="#e0e0e0" style="background:#e0e0e0" title="Gray"></button>
      </div>

      <!-- Current tags display -->
      <div id="editor-tags" class="editor-tags hidden"></div>

      <div class="editor-body">
        <input type="text" id="note-title" class="note-title-input" placeholder="Title">
        <textarea id="note-content" class="note-content-input" placeholder="Start writing..."></textarea>
      </div>
    </div>
  </div>

  <!-- Delete Confirmation Modal -->
  <div id="delete-modal" class="modal hidden">
    <div class="modal-backdrop"></div>
    <div class="modal-content">
      <h3>Delete Note?</h3>
      <p>This action cannot be undone.</p>
      <div class="modal-actions">
        <button id="cancel-delete" class="modal-btn cancel">Cancel</button>
        <button id="confirm-delete" class="modal-btn danger">Delete</button>
      </div>
    </div>
  </div>

  <!-- Share Modal -->
  <div id="share-modal" class="modal hidden">
    <div class="modal-backdrop share-backdrop"></div>
    <div class="modal-content share-modal-content">
      <h3>Share Note</h3>
      <div class="share-options">
        <button id="share-text-btn" class="share-option-btn">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          <span>Share as Text</span>
        </button>
        <button id="share-copy-btn" class="share-option-btn">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          <span>Copy to Clipboard</span>
        </button>
        <button id="share-email-btn" class="share-option-btn">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          <span>Send via Email</span>
        </button>
        <button id="share-whatsapp-btn" class="share-option-btn">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#25D366" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
          <span>WhatsApp</span>
        </button>
      </div>
      <button id="share-cancel" class="modal-btn cancel share-cancel-btn">Cancel</button>
    </div>
  </div>

  <!-- Manage Tags Modal -->
  <div id="manage-tags-modal" class="modal hidden">
    <div class="modal-backdrop manage-tags-backdrop"></div>
    <div class="modal-content manage-tags-content">
      <h3>Manage Tags</h3>
      <div id="manage-tags-list" class="manage-tags-list"></div>
      <div class="tag-picker-add">
        <input type="text" id="manage-new-tag-input" placeholder="New tag name..." maxlength="20">
        <button id="manage-add-tag-btn" class="tag-add-btn">Add</button>
      </div>
      <button id="manage-tags-close-btn" class="modal-btn cancel" style="margin-top:12px;width:100%">Done</button>
    </div>
  </div>

  <!-- Toast Notification -->
  <div id="toast" class="toast hidden"></div>

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