-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfeatures.html
More file actions
393 lines (355 loc) · 18.5 KB
/
features.html
File metadata and controls
393 lines (355 loc) · 18.5 KB
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
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Primary Meta Tags -->
<title>Features - GF PriceChecker</title>
<meta name="title" content="Features - GF PriceChecker">
<meta name="description" content="Discover how GF PriceChecker helps you track gluten-free product price differentials, manage receipts, and generate tax reports for Canadian medical expense deductions.">
<!-- Canonical URL -->
<link rel="canonical" href="https://gfpricechecker.com/features.html">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://gfpricechecker.com/features.html">
<meta property="og:title" content="Features - GF PriceChecker">
<meta property="og:description" content="Discover how GF PriceChecker helps you track gluten-free product price differentials, manage receipts, and generate tax reports for Canadian medical expense deductions.">
<meta property="og:image" content="https://gfpricechecker.com/assets/images/og-image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://gfpricechecker.com/features.html">
<meta property="twitter:title" content="Features - GF PriceChecker">
<meta property="twitter:description" content="Discover how GF PriceChecker helps you track gluten-free product price differentials, manage receipts, and generate tax reports for Canadian medical expense deductions.">
<meta property="twitter:image" content="https://gfpricechecker.com/assets/images/og-image.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="/assets/images/favicon.png">
<!-- Stylesheets -->
<link rel="stylesheet" href="/assets/css/base.css">
<link rel="stylesheet" href="/assets/css/components.css">
<!-- Cloudflare Web Analytics -->
<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{"token": "84f439e876194e66b093f87464973973"}"></script>
<!-- JSON-LD Structured Data - WebApplication -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "MobileApplication",
"name": "GF PriceChecker",
"applicationCategory": "FinanceApplication",
"operatingSystem": "iOS",
"description": "Track gluten-free product price differentials for Canadian tax deductions. Compare prices, manage receipts, and generate CRA-compliant tax reports.",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "CAD"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5.0",
"ratingCount": "1"
},
"author": {
"@type": "Organization",
"name": "GF PriceChecker"
},
"countriesSupported": "CA",
"featureList": [
"Price comparison tracking for gluten-free products",
"Receipt scanning and management",
"Tax report generation for CRA medical expense claims",
"Product database with price history",
"Privacy-focused local-first storage"
]
}
</script>
</head>
<body>
<!-- Skip Navigation Link for Accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Navigation will be loaded by components.js -->
<div id="navbar-placeholder"></div>
<!-- Main Content -->
<main id="main-content">
<!-- Status Banner (will be populated from status.json) -->
<div class="container">
<div id="status-banner" class="status-banner status-banner-coming-soon" role="status" aria-live="polite">
<strong>Coming Soon!</strong> GF PriceChecker is currently in development.
</div>
</div>
<!-- Hero Section -->
<section class="section">
<div class="container text-center">
<h1>Powerful Features for Tax Compliance</h1>
<p style="max-width: 700px; margin-left: auto; margin-right: auto;">
GF PriceChecker simplifies tracking gluten-free product price differentials, helping Canadians with celiac disease or gluten intolerance maximize their medical expense deductions.
</p>
</div>
</section>
<!-- App Screenshots Carousel Placeholder -->
<section class="section" style="background-color: var(--light-gray);">
<div class="container">
<h2 class="text-center mb-xl">See It in Action</h2>
<!-- Carousel -->
<div class="carousel" role="region" aria-label="App screenshots carousel" tabindex="0">
<div class="carousel-viewport">
<div class="carousel-track">
<div class="carousel-slide" role="group" aria-label="Screenshot 1 of 14">
<img data-src="/assets/images/screenshots/screenshot-01-launch.jpg"
alt="GF PriceChecker screenshot 1"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 2 of 14">
<img data-src="/assets/images/screenshots/screenshot-02-onboarding-welcome.png"
alt="GF PriceChecker screenshot 2"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 3 of 14">
<img data-src="/assets/images/screenshots/screenshot-03-onboarding-how-it-works.png"
alt="GF PriceChecker screenshot 3"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 4 of 14">
<img data-src="/assets/images/screenshots/screenshot-04-smartscanning-how-it-works.png"
alt="GF PriceChecker screenshot 4"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 5 of 14">
<img data-src="/assets/images/screenshots/screenshot-05-onboarding-camera.png"
alt="GF PriceChecker screenshot 5"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 6 of 14">
<img data-src="/assets/images/screenshots/screenshot-06-onboarding-complete.png"
alt="GF PriceChecker screenshot 6"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 7 of 14">
<img data-src="assets/images/screenshots/screenshot-07-capture.jpg"
alt="GF PriceChecker screenshot 7"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 8 of 14">
<img data-src="assets/images/screenshots/screenshot-08-ProductCaptureFlowView.png"
alt="GF PriceChecker screenshot 8"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 9 of 14">
<img data-src="assets/images/screenshots/screenshot-09-ReceiptDetailView.png"
alt="GF PriceChecker screenshot 9"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 10 of 14">
<img data-src="assets/images/screenshots/screenshot-10-ReceiptCaptureView.png"
alt="GF PriceChecker screenshot 10"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 11 of 14">
<img data-src="assets/images/screenshots/screenshot-11-ProductPairDetailView.png"
alt="GF PriceChecker screenshot 11"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 12 of 14">
<img data-src="assets/images/screenshots/screenshot-12-ProductPairListingView.png"
alt="GF PriceChecker screenshot 12"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 13 of 14">
<img data-src="assets/images/screenshots/screenshot-13-ExportView.png"
alt="GF PriceChecker screenshot 13"
loading="lazy">
</div>
<div class="carousel-slide" role="group" aria-label="Screenshot 14 of 14">
<img data-src="assets/images/screenshots/screenshot-14-SummaryDashBoardView.png"
alt="GF PriceChecker screenshot 14"
loading="lazy">
</div>
</div>
</div>
<!-- Carousel Controls -->
<div class="carousel-controls">
<button class="carousel-button" data-carousel-prev aria-label="Previous screenshot">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<button class="carousel-button" data-carousel-next aria-label="Next screenshot">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
<!-- Progress Indicator -->
<div class="carousel-progress" role="tablist" aria-label="Carousel navigation">
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 1" tabindex="0"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 2" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 3" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 4" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 5" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 6" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 7" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 8" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 9" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 10" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 11" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 12" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 13" tabindex="-1"></button>
<button class="carousel-progress-dot" role="tab" aria-label="Go to screenshot 14" tabindex="-1"></button>
</div>
</div>
</div>
</section>
<!-- App Description -->
<section class="section">
<div class="container">
<h2 class="text-center mb-xl">What is GF PriceChecker?</h2>
<div style="max-width: 800px; margin: 0 auto;">
<p>
GF PriceChecker is an iOS app designed specifically for Canadians who need to track the incremental cost of gluten-free products for tax purposes. If you have celiac disease or gluten intolerance, the Canada Revenue Agency (CRA) allows you to claim the price differential between gluten-free and regular products as a medical expense.
</p>
<p>
Our app makes this process simple and accurate, helping you maintain proper documentation and maximize your eligible deductions without the hassle of manual tracking and calculations.
</p>
</div>
</div>
</section>
<!-- Feature Highlights -->
<section class="section" style="background-color: var(--light-gray);">
<div class="container">
<h2 class="text-center mb-xl">Key Features</h2>
<div class="grid">
<div class="card">
<h3 class="card-title">Price Comparison Tracking</h3>
<p class="card-text">
Easily compare prices between gluten-free and regular equivalent products. Our app calculates the differential automatically, ensuring accurate records for your tax claims.
</p>
<div class="card-footer">
<span class="badge badge-primary">Core Feature</span>
</div>
</div>
<div class="card">
<h3 class="card-title">Receipt Management</h3>
<p class="card-text">
Scan and organize your receipts in one place. Keep digital copies of your purchases with timestamps and categorization for easy retrieval during tax season.
</p>
<div class="card-footer">
<span class="badge badge-primary">Core Feature</span>
</div>
</div>
<div class="card">
<h3 class="card-title">Tax Reports</h3>
<p class="card-text">
Generate comprehensive reports that summarize your gluten-free product expenses and calculated differentials. Export-ready formats make filing your taxes straightforward.
</p>
<div class="card-footer">
<span class="badge badge-primary">Core Feature</span>
</div>
</div>
<div class="card">
<h3 class="card-title">Product Database</h3>
<p class="card-text">
Access a growing database of gluten-free products with price history and equivalents. Save time by leveraging community data while maintaining your personal tracking.
</p>
<div class="card-footer">
<span class="badge">Planned</span>
</div>
</div>
<div class="card">
<h3 class="card-title">CRA Compliance</h3>
<p class="card-text">
Built with CRA medical expense guidelines in mind. Our reports include the documentation format accepted by the Canada Revenue Agency.
</p>
<div class="card-footer">
<span class="badge badge-success">Tax Compliant</span>
</div>
</div>
<div class="card">
<h3 class="card-title">Privacy-Focused</h3>
<p class="card-text">
Your financial and health data stays on your device. We prioritize your privacy with local-first storage and optional encrypted backups.
</p>
<div class="card-footer">
<span class="badge badge-success">Secure</span>
</div>
</div>
</div>
</div>
</section>
<!-- Instructional Videos -->
<section class="section">
<div class="container">
<h2 class="text-center mb-xl">How It Works</h2>
<!-- Video Grid (3 videos) -->
<div class="video-grid video-grid-three">
<!-- Video 1: Price Tracking -->
<div class="video-item">
<h3 class="video-title">Tracking Price Differentials</h3>
<p class="video-description">
Step-by-step guide on comparing gluten-free products to regular alternatives and tracking the price difference.
</p>
<div class="video-container">
<video class="video-player"
controls
preload="metadata"
poster="/assets/images/price-tracking-poster.png">
<source src="/assets/video/price-tracking.mp4" type="video/mp4">
<p>Your browser does not support the video tag. Please use a modern browser to view instructional videos.</p>
</video>
</div>
</div>
<!-- Video 2: Receipt Management -->
<div class="video-item">
<h3 class="video-title">Managing Receipts</h3>
<p class="video-description">
Discover how to scan, organize, and manage your receipts for easy retrieval during tax season.
</p>
<div class="video-container">
<video class="video-player"
controls
preload="metadata"
poster="/assets/images/receipts-management-poster.png">
<source src="/assets/video/receipt-management.mp4" type="video/mp4">
<p>Your browser does not support the video tag. Please use a modern browser to view instructional videos.</p>
</video>
</div>
</div>
<!-- Video 3: Tax Reports -->
<div class="video-item">
<h3 class="video-title">Generating Tax Reports</h3>
<p class="video-description">
Learn how to generate comprehensive reports that are ready for your CRA medical expense claims.
</p>
<div class="video-container">
<video class="video-player"
controls
preload="metadata"
poster="/assets/images/tax-reports-poster.png">
<source src="/assets/video/reporting-exporting.mp4" type="video/mp4">
<p>Your browser does not support the video tag. Please use a modern browser to view instructional videos.</p>
</video>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="section" style="background-color: var(--light-gray);">
<div class="container text-center">
<h2>Ready to Simplify Your Tax Deductions?</h2>
<p class="mb-lg">
Join the waitlist to be notified when GF PriceChecker launches on the App Store.
</p>
<div class="empty-state-action">
<span class="badge badge-primary" style="font-size: var(--text-md); padding: var(--space-md) var(--space-xl);">Coming Soon</span>
</div>
</div>
</section>
</main>
<!-- Footer will be loaded by components.js -->
<div id="footer-placeholder"></div>
<!-- Scripts -->
<script src="/assets/js/components.js"></script>
<script src="/assets/js/utils.js"></script>
<script src="/assets/js/content-loader.js"></script>
<script src="/assets/js/carousel.js"></script>
<script src="/assets/js/main.js"></script>
</body>
</html>