https://wuppit.com/en/index.html

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <meta
7      name="description"
8      content="wuppit makes litter picking visible, playful and privacy-friendly. Save progress, collect locally, evaluate anonymously."
9    />
10    <title>wuppit - Cleanup Gamification</title>
11    <link rel="alternate" hreflang="de" href="https://www.wuppit.com/index.html" />
12    <link rel="alternate" hreflang="en" href="https://www.wuppit.com/en/index.html" />
13    <link rel="alternate" hreflang="es" href="https://www.wuppit.com/es/index.html" />
14    <link rel="icon" type="image/png" sizes="192x192" href="../assets/icon-192.png" />
15    <link rel="apple-touch-icon" href="../assets/icon-192.png" />
16    <meta property="og:title" content="wuppit" />
17    <meta property="og:description" content="wuppit makes litter picking visible, playful and privacy-friendly." />
18    <meta property="og:image" content="../assets/icon-1024.png" />
19    <meta property="og:type" content="website" />
20    <link rel="preload" href="../assets/wuppit-hero.png" as="image" />
21    <link rel="stylesheet" href="../assets/leaflet.min.css" />
22    <link rel="stylesheet" href="../styles.css" />
23  </head>
24  <body>
25    <header class="site-header" aria-label="Main navigation">
26      <a class="brand" href="#top" aria-label="wuppit Home">
27        <span class="brand-mark">W</span>
28        <span>wuppit</span>
29      </a>
30      <nav class="nav-links" aria-label="Page navigation">
31        <a href="#impact">Impact</a>
32        <a href="#map">Live map</a>
33        <a href="#privacy">Privacy</a>
34      </nav>
35      <div class="header-right">
36        <a class="nav-cta" href="#join">Early access</a>
37        <div class="lang-switch" aria-label="Language">
38          <a href="../index.html">DE</a>
39          <a href="./index.html" class="lang-active">EN</a>
40          <a href="../es/index.html">ES</a>
41        </div>
42      </div>
43    </header>
44
45    <main id="top">
46      <section class="hero" aria-labelledby="hero-title">
47        <img class="hero-image" src="../assets/wuppit-hero.png" alt="Tidy park path after a cleanup action in the morning light" />
48        <div class="hero-scrim"></div>
49        <div class="hero-content">
50          <p class="eyebrow">Cleanup app for cities, groups and anyone who wants to make a visible difference</p>
51          <h1 id="hero-title">wuppit</h1>
52          <p class="hero-copy">
53            Picking up litter becomes measurable, motivating and fair: points, streaks, challenges and a public
54            impact map, without exposing personal statistics data.
55          </p>
56          <div class="hero-actions">
57            <a class="button primary" href="#join">Get launch notified</a>
58            <a class="button secondary" href="#map">See the impact</a>
59          </div>
60        </div>
61        <div class="hero-status" aria-label="wuppit preview">
62          <span class="status-dot"></span>
63          <span>Live · Supabase data</span>
64        </div>
65      </section>
66
67      <section id="impact" class="metrics-band" aria-label="wuppit live metrics">
68        <div class="metric">
69          <strong id="stat-cleanups" class="stat-loading">–</strong>
70          <span>Cleanup actions</span>
71        </div>
72        <div class="metric">
73          <strong id="stat-items" class="stat-loading">–</strong>
74          <span>Items collected</span>
75        </div>
76        <div class="metric">
77          <strong id="stat-confirmed" class="stat-loading">–</strong>
78          <span>Confirmed disposed</span>
79        </div>
80        <div class="metric">
81          <strong id="stat-regions" class="stat-loading">–</strong>
82          <span>Active regions</span>
83        </div>
84      </section>
85
86      <section class="product-section">
87        <div class="section-copy">
88          <p class="eyebrow dark">Gamification with substance</p>
89          <h2>Progress that keeps people coming back.</h2>
90          <p>
91            wuppit combines local action with team spirit: log cleanups, count categories, earn points, unlock
92            badges, and optionally back up your progress with an account.
93          </p>
94        </div>
95        <div class="feature-grid">
96          <article class="feature">

97            <span class="feature-icon">01</span>
98            <h3>Log a cleanup</h3>
99            <p>Categories, quantity, an optional rounded location and disposal confirmation are logged in seconds.</p>
100          </article>
101          <article class="feature">
102            <span class="feature-icon">02</span>
103            <h3>Save your progress</h3>
104            <p>Optional sign-in with email, Google or Apple protects points, streaks and badges from data loss.</p>
105          </article>
106          <article class="feature">
107            <span class="feature-icon">03</span>
108            <h3>Act together</h3>
109            <p>Challenges, groups and regional stats make cleanup activity visible and comparable.</p>
110          </article>
111        </div>
112      </section>
113
114      <section id="map" class="map-section" aria-labelledby="map-title">
115        <div class="map-copy">
116          <p class="eyebrow dark">Live map</p>
117          <h2 id="map-title">Where the community is active right now.</h2>
118          <p>
119            Every point represents a real cleanup action – anonymous and without personal reference.
120            Zoom in to discover cities and hotspots.
121          </p>
122          <div class="map-live-badge" aria-live="polite">
123            <span class="status-dot"></span>
124            <span id="map-point-count">Loading data…</span>
125          </div>
126        </div>
127        <div class="map-panel">
128          <div class="map-toolbar">
129            <span>🌍 World map · Live</span>
130            <span style="font-size:12px;font-weight:600;opacity:.6">Zoom for details</span>
131          </div>
132          <div id="geomap" class="geomap" aria-label="Live heatmap of worldwide cleanup actions"></div>
133          <div class="map-legend">
134            <span>Single action</span>
135            <span class="legend-ramp"></span>
136            <span>Hotspot</span>
137          </div>
138        </div>
139      </section>
140
141      <section id="privacy" class="privacy-section">
142        <div>
143          <p class="eyebrow dark">Privacy</p>
144          <h2>Personal sync and public stats stay separate.</h2>
145        </div>
146        <div class="privacy-list">
147          <article>
148            <h3>Private</h3>
149            <p>Progress is only stored with an account and restricted to your own Supabase user via RLS.</p>
150          </article>
151          <article>
152            <h3>Anonymous</h3>
153            <p>Public impact data contains no user ID, email, photos or notes.</p>
154          </article>
155          <article>
156            <h3>Regional</h3>
157            <p>Reports use controlled regions from NUTS 2024 and Statistical Regions 2024.</p>
158          </article>
159        </div>
160      </section>
161
162      <section id="join" class="join-section">
163        <div class="join-content">
164          <p class="eyebrow dark">Early access</p>
165          <h2>Ready for your next visible cleanup?</h2>
166          <p>The app is ready as an MVP. Supabase setup, account sync and the geomap data pipeline are the next milestones.</p>
167        </div>
168        <form class="waitlist" aria-label="Sign up for early access">
169          <label for="email">Email</label>
170          <div class="waitlist-row">
171            <input id="email" name="email" type="email" placeholder="[email protected]" autocomplete="email" />
172            <button class="button primary" type="submit">Sign up</button>
173          </div>
174          <p id="form-message" class="form-message" role="status"></p>
175        </form>
176      </section>
177    </main>
178
179    <footer class="site-footer">
180      <span>wuppit · digipren · Wolfgang Oswald</span>
181      <span><a href="./impressum.html" style="color:var(--moss)">Legal notice</a> &nbsp;·&nbsp; <a href="./datenschutz.html" style="color:var(--moss)">Privacy</a> &nbsp;·&nbsp; <a href="./datenloeschung.html" style="color:var(--moss)">Delete data</a></span>
182    </footer>
183
184    

184<script src="../assets/leaflet.min.js"></script>

184
185    

185<script src="../config.js"></script>

185
186    

186<script src="../script.js"></script>

186
187  </body>
188</html>