diff --git a/frontend/public/content/how-it-works.html b/frontend/public/content/how-it-works.html index f1fada7..2a0dbdb 100644 --- a/frontend/public/content/how-it-works.html +++ b/frontend/public/content/how-it-works.html @@ -41,6 +41,12 @@ margin-bottom: 1.25rem; } + .content-wrapper ul { + list-style: disc; + margin-left: 1.5rem; + margin-bottom: 1.25rem; + } + .content-wrapper li { margin-bottom: 0.75rem; color: #4b5563; @@ -66,55 +72,272 @@ border-top: 1px solid #e5e7eb; } + .intro-box { + background-color: #f0f9ff; + border-left: 4px solid #6366f1; + padding: 1.25rem; + margin-bottom: 2rem; + border-radius: 0.5rem; + } + + .intro-box p { + margin-bottom: 0; + color: #1e40af; + } + + .step-number { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + background-color: #6366f1; + color: white; + border-radius: 50%; + font-weight: 700; + margin-right: 0.75rem; + font-size: 1.125rem; + } + + .tip-box { + background-color: #fef3c7; + border-left: 4px solid #f59e0b; + padding: 1rem; + margin: 1.5rem 0; + border-radius: 0.5rem; + } + + .tip-box strong { + color: #92400e; + } + + .tip-box p { + margin-bottom: 0; + color: #78350f; + } + .footer-text { font-style: italic; color: #6b7280; margin-top: 2rem; + text-align: center; }

How It Works

-

Lorem Ipsum

+
+

+ spotlight.cam helps dancers at West Coast Swing events find recording partners and exchange competition videos. + No more running around looking for someone to film your heat – let the platform do the matching for you! +

+
+

Getting Started

+ +

1Create Your Account

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Register with your email, choose a username, and verify your email address. + You can optionally link your WSDC ID to auto-fill your profile with competition data from worldsdc.com.

-

Ut Enim Ad Minim

- +

2Complete Your Profile

- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat: + Add your name, location, and social media links. Upload a profile picture so other dancers can recognize you at the event. + The more complete your profile, the easier it is to connect with other participants!

+
+

+ Beta Testers: During our beta period, all new registrations automatically receive SUPPORTER status, + giving you priority in the auto-matching system. Look for the ✨ badge next to your username! +

+
+ +

At the Event

+ +

3Check In to the Event

+

+ Find your event in the Events list and click "Check In". This lets other participants know you're at the event and available to help. + You can check in anytime during the event – even before it officially starts. +

+ +

4Join the Event Chat

+

+ Once checked in, you can join the event chat room. This is where all the magic happens: +

+ + +

Getting Recording Partners

+ +

There are two ways to get someone to record your heats:

+ +

5AAuto-Matching (Recommended)

+

+ If the event organizer has set up competition heats in the system, you can use auto-matching: +

    -
  1. Duis aute irure - Dolor in reprehenderit in voluptate velit esse cillum dolore
    2. -
  2. Eu fugiat nulla - Pariatur excepteur sint occaecat cupidatat non proident
    3. -
  3. Sunt in culpa - Qui officia deserunt mollit anim id est laborum
    4. +
  4. Go to the Recording tab on the event page
    5. +
  5. Browse through your competition heats
    6. +
  6. The system will automatically suggest recording partners based on: +
      +
    • Who's free when you're dancing (they're not competing at the same time)
      • +
    • Who hasn't been matched yet
      • +
    • Fair distribution – everyone helps, everyone gets help
      • +
    +
    7. +
  7. Accept a suggestion and you're matched!
-

Sed Ut Perspiciatis

+
+

+ Fairness System: The auto-matching algorithm tracks how many recordings you've done versus received. + If you help others record, you'll get priority when you need someone to record you. It's all about community karma! + SUPPORTER and COMFORT tier users get even higher priority. +

+
+

5BManual Match Request

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. + Prefer to choose your own partner? No problem: +

+
    +
  1. Go to the Participants tab
    2. +
  2. Click on any participant's name to view their profile
    3. +
  3. Click "Send Match Request"
    4. +
  4. Wait for them to accept
    5. +
+

+ You can send match requests to anyone who's checked in to the event. They'll get a notification and can accept or decline.

-

Nemo Enim Ipsam

+

Recording & Exchanging Videos

+

6Chat with Your Match

- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. + Once matched, you get a private 1:1 chat with your recording partner. Use it to: +

+ + +

7Record the Heat

+

+ This is the fun part – you're helping a fellow dancer capture their competition moment! + Record their heat on your phone, then head back to the platform.

-

Neque Porro Quisquam

- +

8Send the Video (P2P Transfer)

- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. + Here's where spotlight.cam gets technical (in a good way):

+
    +
  1. In your match chat, click "Send File"
    2. +
  2. Select the video from your phone
    3. +
  3. The platform uses WebRTC to send it directly from your device to theirs
    4. +
  4. No uploading to servers, no waiting, no storage limits
    5. +
  5. Progress bar shows how the transfer is going
    6. +
+ +
+

+ Why P2P? Your videos never touch our servers – they go straight from your phone to your partner's phone. + This means faster transfers, better privacy, and no file size limits. We've tested transfers up to 700MB+! +

+
+ +

After the Exchange

+ +

9Rate Your Partner

+

+ Once you've exchanged videos, you can rate your experience: +

+ +

+ Ratings help build trust in the community and let others know who's reliable, helpful, and easy to work with. + Plus, it helps the fairness algorithm work better for everyone! +

+ +

10View Your History

+

+ Check your History page to see: +

+ + +

Features Overview

+ +

Real-Time Chat

+ + +

Smart Matching

+ + +

P2P Video Transfer

+ + +

Public Profiles

+
+

Tips for Success

+ + + +

Need Help?

+ +

+ If you run into any issues or have questions, check out: +

+ +

- For questions or feedback, contact us. + Ready to get started? Create your account and join the community!