-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (171 loc) · 8.62 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipper IR Library</title>
<link rel="stylesheet" href="styles.css">
</head>
<!-- Google Analytics -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NKXZVMQ34Z"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-NKXZVMQ34Z');
</script>
<body>
<div class="container">
<div class="header">
<h1>Flipper IR Library</h1>
<div class="scanning-indicator" id="scanningIndicator" style="display: none">
<div class="dot"></div>
<span>Scanning files...</span>
</div>
<button id="connectBtn" class="connect-btn">Connect Flipper</button>
<div class="connection-help">
<small class="helper-text">Connect your Flipper Zero via USB and click to browse IR files</small>
</div>
</div>
<div id="alert" class="alert"></div>
<!-- Loading overlay -->
<div id="loadingOverlay" class="loading-overlay">
<div class="loading-content">
<div class="loading-bar"></div>
<div id="loadingStatus" class="loading-status"></div>
</div>
</div>
<div class="content-tabs">
<button id="localTab" class="tab-btn">Local Files</button>
<button id="databaseTab" class="tab-btn">Shared Database</button>
<button id="homeTab" class="tab-btn active">Home</button>
</div>
<div id="localContent" class="tab-content">
<div id="localLoadingState" class="loading-state" style="display: none;">
<div class="spinner"></div>
<h3>Loading Local Files...</h3>
<p>Scanning your Flipper Zero for IR files</p>
</div>
<div id="irFiles" class="ir-files"></div>
<div id="emptyLocalState" class="empty-state" style="display: none;">
<div class="empty-icon">📂</div>
<h3>Your IR Library is Empty</h3>
<p>No IR files found in your Flipper Zero's /ext/infrared directory.</p>
<div class="empty-steps">
<p>To get started:</p>
<ol>
<li>Connect your Flipper Zero via USB</li>
<li>Record some IR signals using your Flipper</li>
<li>Save them to /ext/infrared with metadata</li>
</ol>
</div>
<small>Files must contain metadata (brand, model, device type) to be displayed.</small>
</div>
</div>
<div id="databaseContent" class="tab-content">
<div class="database-header">
<div class="view-controls">
<div class="section-tabs">
<button class="section-tab active" data-section="device_type">
Device Types
<span class="count">0</span>
</button>
<button class="section-tab" data-section="brand">
Brands
<span class="count">0</span>
</button>
<button class="section-tab" data-section="all">
All Files
<span class="count">0</span>
</button>
</div>
<div class="view-toggle">
<button class="active" data-view="grid">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M1 1h6v6H1zM9 1h6v6H9zM1 9h6v6H1zM9 9h6v6H9z" fill="currentColor"/>
</svg>
</button>
<button data-view="list">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M1 1h14v2H1zM1 6h14v2H1zM1 11h14v2H1z" fill="currentColor"/>
</svg>
</button>
</div>
</div>
<div class="search-section">
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Search files..." class="search-input">
<select id="activeGroup" class="group-select">
<!-- Dynamically populated based on active section -->
</select>
</div>
<div id="categoryChips" class="category-chips">
<!-- Will be populated dynamically -->
</div>
</div>
</div>
<div id="databaseFiles" class="ir-files"></div>
<div class="pagination-wrapper"></div>
<div id="databaseLoadingState" class="loading-state" style="display: none;">
<div class="spinner"></div>
<h3>Loading Shared Files...</h3>
<p>Fetching IR files from the community database</p>
</div>
<div id="emptyDatabaseState" class="empty-state" style="display: none;">
<h3>No Shared Files Found</h3>
<p>Be the first to share your IR files with the community!</p>
<small>You can share files from your local collection using the "Share to Database" button.</small>
</div>
</div>
<div id="homeContent" class="tab-content active">
<div id="welcomeMessage" class="welcome-message">
<div class="welcome-content">
<h2>IR Signal Library</h2>
<p>Share and discover infrared signals for the Flipper Zero community</p>
<div class="getting-started">
<h3>How It Works</h3>
<div class="steps">
<div class="step">
<span class="step-number">1</span>
<p>Connect your Flipper Zero via USB to browse your local IR files</p>
</div>
<div class="step">
<span class="step-number">2</span>
<p>Share your IR signals with the community using the "Share to Database" button</p>
</div>
<div class="step">
<span class="step-number">3</span>
<p>Browse and download signals shared by other Flipper Zero users</p>
</div>
</div>
</div>
<div class="features">
<div class="feature">
<span class="feature-icon">🌐</span>
<h4>Community Database</h4>
<p>Browse a growing collection of IR signals shared by Flipper Zero users. Filter by brand, device type, or model to find what you need.</p>
</div>
<div class="feature">
<span class="feature-icon">⬆️</span>
<h4>Easy Sharing</h4>
<p>Share your IR files with metadata (brand, model, device type) to help others find and use your signals.</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
Created by <a href="https://github.com/jaylikesbunda" target="_blank" rel="noopener noreferrer">Jay Candel</a>
</div>
</div>
<!-- Firebase Scripts -->
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-database-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script>
<!-- App Scripts -->
<script src="firebase-config.js"></script>
<script src="serial.js"></script>
<script src="app.js"></script>
</body>
</html>