rss-feed-pwa/index.html at main · kfcain/rss-feed-pwa · 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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="RSS Feed">
  <meta name="theme-color" content="#1a1a2e">
  <link rel="manifest" href="manifest.json">
  <link rel="apple-touch-icon" href="icons/icon-192.svg">
  <link rel="icon" type="image/svg+xml" href="icons/icon-192.svg">
  <link rel="stylesheet" href="css/app.css">
  <title>RSS Feed</title>
</head>
<body>
  <div id="app">
    <!-- Header -->
    <header id="app-header">
      <div class="header-left">
        <h1 id="page-title">Dashboard</h1>
      </div>
      <div class="header-right">
        <button id="btn-refresh" class="icon-btn" title="Refresh">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 0 1-9 9m9-9a9 9 0 0 0-9-9m9 9H3m0 0a9 9 0 0 1 9-9m-9 9a9 9 0 0 0 9 9"/></svg>
        </button>
        <button id="btn-fetch" class="icon-btn" title="Fetch Feeds">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/><path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.4"/><circle cx="12" cy="12" r="2"/><path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.4"/><path d="M19.1 4.9C23 8.8 23 15.1 19.1 19"/></svg>
        </button>
      </div>
    </header>

    <!-- Fetch progress banner -->
    <div id="fetch-banner" class="banner fetch-banner hidden">
      <span class="spinner"></span>
      <span id="fetch-progress">Fetching feeds...</span>
    </div>

    <!-- Tab bar -->
    <nav id="tab-bar">
      <button class="tab active" data-tab="dashboard">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
        <span>Dashboard</span>
      </button>
      <button class="tab" data-tab="sources">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
        <span>Sources</span>
      </button>
      <button class="tab" data-tab="settings">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>
        <span>Settings</span>
      </button>
    </nav>

    <!-- Pages -->
    <main id="content">
      <!-- Dashboard page -->
      <div id="page-dashboard" class="page active">
        <div class="date-picker-row">
          <button id="btn-prev-day" class="chip-btn">&larr;</button>
          <input type="date" id="date-picker">
          <button id="btn-next-day" class="chip-btn">&rarr;</button>
          <button id="btn-today" class="chip-btn">Today</button>
        </div>
        <div id="digest-sections"></div>
        <div id="empty-state" class="empty-state hidden">
          <div class="empty-icon">&#128240;</div>
          <p class="empty-title">No items for this date</p>
          <p class="empty-sub">Add some feed sources to get started</p>
        </div>
      </div>

      <!-- Sources page -->
      <div id="page-sources" class="page">
        <div class="page-actions">
          <button id="btn-add-source" class="primary-btn">+ Add Source</button>
        </div>
        <div id="sources-list"></div>
      </div>

      <!-- Settings page -->
      <div id="page-settings" class="page">
        <div class="settings-section">
          <h3>Feed Fetching</h3>
          <div class="form-group">
            <label>Auto-refresh threshold (hours)</label>
            <input type="number" id="stale-threshold" value="2" min="1" max="24">
          </div>
          <div class="form-group">
            <label>Custom CORS Proxy URL (optional)</label>
            <input type="url" id="cors-proxy-url" placeholder="https://your-proxy.com/?url={url}">
            <p class="form-hint">Use {url} as placeholder for the feed URL</p>
          </div>
          <button id="btn-save-settings" class="secondary-btn">Save Settings</button>
        </div>
        <div class="settings-section">
          <h3>Status</h3>
          <p id="last-fetch-text" class="meta-text">Never fetched</p>
          <p id="stats-text" class="meta-text">0 sources, 0 items stored</p>
        </div>
        <div class="settings-section">
          <h3>Data</h3>
          <div class="settings-btn-row">
            <button id="btn-export-data" class="secondary-btn">Export Data</button>
            <button id="btn-import-data" class="secondary-btn">Import Data</button>
          </div>
          <input type="file" id="import-file" accept=".json" style="display:none">
          <button id="btn-clear-all" class="danger-btn">Clear All Data</button>
        </div>
        <div class="settings-section">
          <h3>About</h3>
          <p class="meta-text">RSS Feed Aggregator v2.0</p>
          <p class="meta-text">Fully client-side PWA &bull; IndexedDB storage</p>
          <p class="meta-text">RSS &bull; Atom &bull; Podcasts &bull; YouTube &bull; Reddit &bull; HN</p>
        </div>
      </div>
    </main>

    <!-- Item detail modal -->
    <div id="item-modal" class="modal hidden">
      <div class="modal-content">
        <div class="modal-header">
          <button id="btn-close-modal" class="icon-btn">&larr;</button>
          <div class="modal-actions">
            <button id="btn-bookmark" class="icon-btn" title="Bookmark">&#9733;</button>
            <button id="btn-open-link" class="icon-btn" title="Open in browser">&#8599;</button>
            <button id="btn-share" class="icon-btn" title="Share">&#8689;</button>
          </div>
        </div>
        <div id="modal-body"></div>
      </div>
    </div>

    <!-- Add source modal -->
    <div id="add-source-modal" class="modal hidden">
      <div class="modal-content">
        <div class="modal-header">
          <button id="btn-close-add-source" class="icon-btn">&larr;</button>
          <h2>Add Source</h2>
          <button id="btn-save-source" class="text-btn">Save</button>
        </div>
        <div class="modal-body-form">
          <div class="form-group">
            <label>Feed URL</label>
            <input type="url" id="add-feed-url" placeholder="https://example.com/feed.xml">
          </div>
          <div class="form-group">
            <label>Name</label>
            <input type="text" id="add-feed-name" placeholder="Feed Name">
          </div>
          <div class="form-group">
            <label>Type</label>
            <select id="add-feed-type">
              <option value="rss">RSS</option>
              <option value="atom">Atom</option>
              <option value="podcast">Podcast</option>
              <option value="youtube">YouTube</option>
              <option value="reddit">Reddit</option>
              <option value="hackernews">Hacker News</option>
            </select>
          </div>
          <div class="quick-add-section">
            <h3>Quick Add</h3>
            <button class="quick-add-btn" onclick="quickAdd('hackernews','Hacker News','https://hnrss.org/frontpage')">
              <span class="qa-icon hn">Y</span> Hacker News
            </button>
            <button class="quick-add-btn" onclick="quickAddPrompt('reddit')">
              <span class="qa-icon reddit">r/</span> Reddit Subreddit
            </button>
            <button class="quick-add-btn" onclick="quickAddPrompt('youtube')">
              <span class="qa-icon yt">&#9654;</span> YouTube Channel
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/db.js"></script>
  <script src="js/feed-parser.js"></script>
  <script src="js/feed-fetcher.js"></script>
  <script src="js/app.js"></script>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js');
    }
  </script>
</body>
</html>