e2b10387c2
Implemented comprehensive beta testing system with tier badges and
reorganized environment configuration for better maintainability.
Beta Testing Features:
- Beta banner component with dismissible state (localStorage)
- Auto-assign SUPPORTER tier to new registrations (env controlled)
- TierBadge component with SUPPORTER/COMFORT tier display
- Badge shown in Navbar, ProfilePage, and PublicProfilePage
- Environment variables: VITE_BETA_MODE, BETA_AUTO_SUPPORTER
Environment Configuration Reorganization:
- Moved .env files from root to frontend/ and backend/ directories
- Created .env.{development,production}{,.example} structure
- Updated docker-compose.yml to use env_file for frontend
- All env vars properly namespaced and documented
Privacy Policy Implementation:
- New /privacy route with dedicated PrivacyPage component
- Comprehensive GDPR/RODO compliant privacy policy (privacy.html)
- Updated CookieConsent banner to link to /privacy
- Added Privacy Policy links to all footers (HomePage, PublicFooter)
- Removed privacy section from About Us page
HTML Content System:
- Replaced react-markdown dependency with simple HTML loader
- New HtmlContentPage component for rendering .html files
- Converted about-us.md and how-it-works.md to .html format
- Inline CSS support for full styling control
- Easier content editing without React knowledge
Backend Changes:
- Registration auto-assigns SUPPORTER tier when BETA_AUTO_SUPPORTER=true
- Added accountTier to auth middleware and user routes
- Updated public profile endpoint to include accountTier
Files:
- Added: frontend/.env.{development,production}{,.example}
- Added: backend/.env variables for BETA_AUTO_SUPPORTER
- Added: components/BetaBanner.jsx, TierBadge.jsx, HtmlContentPage.jsx
- Added: pages/PrivacyPage.jsx
- Added: public/content/{about-us,how-it-works,privacy}.html
- Modified: docker-compose.yml (env_file configuration)
- Modified: App.jsx (privacy route, beta banner)
- Modified: auth.js (auto SUPPORTER tier logic)
109 lines
3.4 KiB
HTML
109 lines
3.4 KiB
HTML
<style>
|
||
.content-wrapper {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
}
|
||
|
||
.content-wrapper h1 {
|
||
font-size: 2.25rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1.5rem;
|
||
color: #1f2937;
|
||
}
|
||
|
||
.content-wrapper h2 {
|
||
font-size: 1.875rem;
|
||
font-weight: 700;
|
||
margin-top: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
color: #1f2937;
|
||
border-bottom: 2px solid #e5e7eb;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.content-wrapper p {
|
||
margin-bottom: 1.25rem;
|
||
color: #4b5563;
|
||
}
|
||
|
||
.content-wrapper a {
|
||
color: #6366f1;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.content-wrapper a:hover {
|
||
color: #4f46e5;
|
||
}
|
||
|
||
.content-wrapper hr {
|
||
margin: 2.5rem 0;
|
||
border: 0;
|
||
border-top: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.intro-text {
|
||
font-size: 1.125rem;
|
||
color: #1f2937;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.footer-links {
|
||
margin-top: 2rem;
|
||
padding-top: 1.5rem;
|
||
border-top: 1px solid #e5e7eb;
|
||
color: #6b7280;
|
||
font-size: 0.875rem;
|
||
}
|
||
</style>
|
||
|
||
<div class="content-wrapper">
|
||
<h1>About Us</h1>
|
||
|
||
<p class="intro-text">
|
||
Hi, I'm Radek – a software engineer, a West Coast Swing dancer and the person behind <strong>spotlight.cam</strong>.
|
||
</p>
|
||
|
||
<p>
|
||
Spotlight.cam is a project built by someone who actually stands in the same registration lines, dances in the same heats and scrolls through the same event pages as you :P
|
||
</p>
|
||
|
||
<p>
|
||
If we ever meet at an event, I'll probably be somewhere near the dance floor, probably pressing "record" on someone's spotlight.
|
||
</p>
|
||
|
||
<p>
|
||
To be fair, the original idea for this service was actually dropped on me by a friend who was tired of hunting for someone to film her dances – I just did what any backend developer / DevOps / Linux admin would do: said "okay, that shouldn't be that hard… right?", opened my editor, set up a few servers and scripts… and suddenly we had a new project on our hands 😅 I also had a not-so-secret teammate: AI. Without it, this would probably still be stuck in my "one day" folder for about a year 😄
|
||
</p>
|
||
|
||
<h2>The Vision</h2>
|
||
|
||
<p>
|
||
Our goal is to make it easier for dancers to capture and share their competition moments. No more running around looking for someone with a free hand to record your heat. No more missing your own spotlight because you were recording someone else's.
|
||
</p>
|
||
|
||
<p>
|
||
We're building a platform that connects dancers who want to help each other out, making the whole process smoother, fairer, and more organized.
|
||
</p>
|
||
|
||
<h2>Technology</h2>
|
||
|
||
<p>
|
||
Under the hood, spotlight.cam uses modern web technologies to deliver a fast, secure, and reliable experience:
|
||
</p>
|
||
|
||
<ul>
|
||
<li><strong>WebRTC peer-to-peer transfers</strong> - your videos are sent directly between devices, never stored on our servers</li>
|
||
<li><strong>Real-time chat</strong> - coordinate with your recording partners instantly</li>
|
||
<li><strong>Smart auto-matching</strong> - fairness algorithms ensure everyone gets help</li>
|
||
<li><strong>End-to-end encryption</strong> - your data is protected at every step</li>
|
||
</ul>
|
||
|
||
<div class="footer-links">
|
||
<p>
|
||
Have questions? Check out our <a href="/how-it-works">How It Works</a> page,
|
||
read our <a href="/privacy">Privacy Policy</a>, or <a href="/contact">contact us</a> directly.
|
||
</p>
|
||
</div>
|
||
</div>
|