TrendFitApp.github.io/features.html at main · CuWilliams/TrendFitApp.github.io · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>TrendFit — Features</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="canonical" href="https://trendfitapp.com/features.html" />
  <meta name="description" content="Track workout trends with TrendFit and TrendFitStack. Zoomable charts, on-device privacy, and flexible views by day, week, month, and year." />
  <meta property="og:url" content="https://trendfitapp.com/features.html">

  <link rel="preconnect" href="https://cdnjs.cloudflare.com">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="css/style.css?v=2025-09-20-1" />

<script defer src="js/includes.js"></script>

</head>
<body class="bg-gradient">

  <!-- ============ Header / Navbar ============ -->
  <!-- Shared header include -->
<div data-include="partials/header.html"></div>

  <main>
    <!-- ============ Hero ============ -->
    <section class="hero">
      <div class="container text-center">
        <h1 class="hero-title">Select. Trend. <span class="accent">Improve.</span></h1>
        <p class="hero-subtitle">Fast, on-device insights from your Apple Health data.<br> No cloud. No noise. Just trends that help you get better.</p>

        <!-- App Store Promo Video -->
        <div class="app-store-promo-container">
          <video
            class="app-store-promo-video"
            aria-label="TrendFit App Store promotional video"
            playsinline
            muted
            loop
            autoplay
            preload="auto">
            <source src="media/App_Store_Promo.mp4" type="video/mp4" />
            Your browser doesn't support embedded videos. TrendFit is now available on the App Store!
          </video>
        </div>

        <div class="hero-actions">
          <a class="btn btn-primary" href="https://apps.apple.com/ca/app/trendfit/id6751863796" target="_blank" rel="noopener"><i class="fa-brands fa-apple"></i> Download on App Store</a>
          <a class="btn btn-primary" href="community.html"><i class="fa-solid fa-users"></i> Join Our Community</a>
        </div>
      </div>
    </section>

    <!-- ============ Feature Cards ============ -->
    <section class="section">
      <div class="container">
        <h2 class="section-title">What you can do with TrendFit</h2>

        <div class="grid grid-3">
          <!-- Card 1 -->
          <article class="card">
            <div class="card-icon"><i class="fa-solid fa-chart-line"></i></div>
            <h3>TrendFit</h3>
            <p>Explore multiple trends—like <strong>Active Energy, Heart Rate, Pace</strong>—for a single workout type (e.g., Running). See trend-slopes to understand direction at a glance.</p>
          </article>

          <!-- Card 2 -->
          <article class="card">
            <div class="card-icon"><i class="fa-solid fa-layer-group"></i></div>
            <h3>TrendFitStack</h3>
            <p>Pick one trend (e.g., Energy) and compare it across <strong>many workout types</strong> (Running, Walking, Hiking…). Stack your totals by <strong>day / week / month / year</strong> to see cumulative progress.</p>
          </article>

          <!-- Card 3 -->
          <article class="card">
            <div class="card-icon"><i class="fa-solid fa-magnifying-glass-plus"></i></div>
            <h3>Zoomable, Readable Charts</h3>
            <p>Pinch to zoom, pan, tap to reset, press data points for details. Navigate clean, legible charts designed for quick insights.</p>
          </article>

          <!-- Card 4 -->
          <article class="card">
            <div class="card-icon"><i class="fa-solid fa-shield-heart"></i></div>
            <h3>Privacy-First by Design</h3>
            <p><strong>On-device only.</strong> TrendFit reads Apple HealthKit data locally and does <em>not</em> upload your health data to servers. Your insights stay privately yours.</p>
          </article>

          <!-- Card 5 -->
          <article class="card">
            <div class="card-icon"><i class="fa-solid fa-sliders"></i></div>
            <h3>Personalization</h3>
            <p>Choose units, chart lookback windows, and haptic preferences. TrendFit adapts to how you like to train and review progress.</p>
          </article>

          <!-- Card 6 -->
          <article class="card">
            <div class="card-icon"><i class="fa-solid fa-flag-checkered"></i></div>
            <h3>Roadmap: TrendFitChallenge</h3>
            <p>Set personal goals and friendly challenges to stay accountable. Track progress over time and celebrate wins together. <em>(Coming soon.)</em></p>
          </article>
        </div>
      </div>
    </section>

    <!-- ============ Gallery (replace images when ready) ============ -->
    <section class="section alt">
      <div class="container">
        <h2 class="section-title">Screenshots</h2>
        <div class="grid grid-2 gallery">
          <figure class="shot">
            <img src="images/tf-welcome.png" alt="TrendFit welcome screen" />
            <figcaption>Welcome screen — your jumping-off point.</figcaption>
          </figure>
          <figure class="shot">
            <img src="images/tf-trendfit.png" alt="TrendFit single workout trend view" />
            <figcaption>TrendFit — compare multiple trends for a single workout type.</figcaption>
          </figure>
          <figure class="shot">
            <img src="images/tf-stack-scatter.png" alt="TrendFitStack scatter view with multiple workout types" />
            <figcaption>TrendFitStack — explore trend data across multiple workout types.</figcaption>
          </figure>
          <figure class="shot">
            <img src="images/tf-stack-stacked.png" alt="TrendFitStack stacked view by month" />
            <figcaption>Stacked totals by day/week/month/year to reveal the bigger picture.</figcaption>
          </figure>
        </div>
      </div>
    </section>

    <!-- ============ How It Works ============ -->
    <section class="section">
      <div class="container">
        <h2 class="section-title">How it works</h2>
        <ol class="steps">
          <li><strong>Connect HealthKit</strong> — grant read access to your workouts and related metrics.</li>
          <li><strong>Select trends</strong> — pick what matters: energy, distance, heart rate, pace, and more.</li>
          <li><strong>See insights</strong> — zoom the charts, watch trends, and adjust to improve.</li>
        </ol>
      </div>
    </section>

    <!-- ============ Community CTA ============ -->
    <section class="section highlight">
      <div class="container text-center">
        <h2 class="section-title">Get Started with TrendFit</h2>
        <p>Download TrendFit from the App Store and start tracking your workout trends today.</p>
        <p>Join our community to stay updated on new features and get fitness tracking tips.</p>
        <a class="btn btn-primary" href="https://apps.apple.com/app/trendfit/id6751863796" target="_blank" rel="noopener"><i class="fa-brands fa-apple"></i> Download on App Store</a>
        <a class="btn btn-primary" href="community.html"><i class="fa-solid fa-users"></i> Join Our Community</a>
      </div>
    </section>

    <!-- ============ FAQ (short) ============ -->
    <section class="section">
      <div class="container">
        <h2 class="section-title">FAQ</h2>
        <details class="faq">
          <summary>Does TrendFit upload my health data?</summary>
          <p>No. TrendFit reads HealthKit data locally on your device. Your data is not uploaded or sold.</p>
        </details>
        <details class="faq">
          <summary>What devices are supported?</summary>
          <p>iPhone with Apple Health and HealthKit permissions enabled. Specific OS/version details will be posted at release.</p>
        </details>
        <details class="faq">
          <summary>Where can I download TrendFit?</summary>
          <p>TrendFit is available now on the App Store for iPhone. Search for "TrendFit" or visit our download link.</p>
        </details>
      </div>
    </section>
  </main>

  <!-- ============ Footer ============ -->
  <footer class="site-footer">
    <div class="container footer-row">
      <small>© 2025 TrendFit</small>
      <div class="footer-links">
        <a href="privacy.html">Privacy</a>
        <span>&middot;</span>
        <a href="terms.html">Terms</a>
      </div>
    </div>
  </footer>

<!-- Cloudflare Web Analytics --><script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon="{&quot;token&quot;: &quot;88f8c60681cd4caaaa9c73ec113a9178&quot;}"></script><!-- End Cloudflare Web Analytics -->
</body>
</html>