Unparty Logo

SELECTOR

the ui that started it all

theunpartyselector

Location: https://github.com/unparty-app/theunpartyselector
Status: Active Development
Primary Purpose: Interactive landing page and idea exploration interface for UNPARTY ecosystem

Overview

theunpartyselector is a lightweight, interactive web application that serves as the entry point for the UNPARTY ecosystem. It presents a creative, grid-based interface that guides visitors through the UNPARTY philosophy using an engaging visual experience. The application showcases UNPARTY's approach to innovation through interactive storytelling and dynamic content presentation.

Tech Stack

  • Framework: Vanilla JavaScript (ES6+)
  • Language: JavaScript, HTML5, CSS3
  • Styling: Custom CSS with responsive grid layout
  • Fonts:
    • Roboto Condensed
    • Martian Mono
    • Permanent Marker (Google Fonts)
  • Icons: Font Awesome 6 (Thin style)
  • Analytics: Google Analytics
  • Asset Storage: AWS S3 (founders-circle-font bucket)
  • Deployment: Static hosting compatible (GitHub Pages, Vercel, Netlify)

Key Features

šŸŽØ Interactive Grid Interface

  • Dual-column layout with dynamic content switching
  • Left column ("Starting Somewhere"): Lists technical capabilities (App Development, Machine Learning, AI, CSS, JavaScript, HTML, UX/UI)
  • Right column ("Start with an idea"): Presents brainstorming journey with handwritten-style navigation

šŸŒ™ Dark Mode Support

  • Toggle-based dark/light theme switching
  • Synchronized logo changes between modes
  • Persistent column background color adjustments
  • Font Awesome moon-over-sun icon for mode toggle

šŸ“– Overlay-Based Content Sections

  1. About Overlay - UNPARTY mission, vision, and development philosophy
  2. Mood Overlay - Introduction to "MOOD X UNPARTY" iOS journaling app
  3. Connect Overlay - Contact information and community engagement

šŸŽ­ Dynamic Content Injection

  • Client-side HTML injection for interactive experiences
  • Event-driven content updates without page reloads
  • Brainstorming-style navigation with crossed-out items and annotations
  • Conditional styling based on user interactions

šŸ“± Responsive Design

  • Viewport-optimized layout
  • Sticky bottom navigation bar
  • Automatic padding adjustment for navbar height
  • Mobile-friendly interface

šŸ” User Experience Elements

  • Bouncing animated icons
  • Box shadow effects on interaction
  • Pointer event control for placeholder content
  • Semantic HTML5 structure

Architecture

Code

Landing Page (Static Web App)
ā”œā”€ā”€ index.html (Main entry point)
ā”œā”€ā”€ script.js (Interactive behavior)
ā”œā”€ā”€ test.js (Grid square sizing utility)
ā”œā”€ā”€ assets/
ā”‚   ā””ā”€ā”€ css/
ā”‚       ā”œā”€ā”€ styles.css (Custom styling)
ā”‚       ā””ā”€ā”€ favicon/ (Brand icons)
ā””ā”€ā”€ ideas/ (Prototypes & experimental pages)
    ā”œā”€ā”€ app.html
    ā”œā”€ā”€ blog.html
    ā”œā”€ā”€ merch.html
    ā”œā”€ā”€ roi.html
    ā”œā”€ā”€ website.html
    ā””ā”€ā”€ ideas/ (nested exploration files)

File Structure Details

Core Files:

  • index.html - Main landing page with grid layout, overlays, and navigation
  • script.js - Event handlers, content toggling, dark mode, overlay management
  • test.js - Utility function for maintaining square grid aspect ratios

Content Architecture:

  • Profile Row: Sticky navbar with UNPARTY branding and icon navigation
  • Grid Container: Two-column responsive layout with clickable headlines
  • Overlay System: Three content overlays (About, Mood, Connect) with close functionality
  • Dynamic Content Area: Placeholder for injected HTML content

Styling Patterns:

  • Custom CSS with utility classes
  • Inline styles for dynamic content
  • Font family mixing (Roboto Condensed, Martian Mono, Permanent Marker)
  • Responsive grid with viewport-based sizing

Integration Points

External Services

  • Google Analytics: User behavior tracking and site metrics
  • Google Fonts API: Typography delivery (3 font families)
  • Font Awesome Kit: Icon library for UI elements
  • AWS S3: Static asset hosting for logos and images
    • Bucket: founders-circle-font
    • Assets: Light/dark mode UNPARTY logos

Internal Ecosystem

  • theunpartyunppp: Referenced in "Mood" overlay as iOS journaling app
  • theunpartyapp: Potential backend for waitlist/contact forms (currently email-based)

Third-Party Dependencies

  • Loops.so: Email collection API integration (currently configured for direct email contact)

Business Value

ABOUT

Introduces users to UNPARTY's philosophy and approach

  • Communicates no-code platform vision through interactive storytelling
  • Showcases development transparency ("building out loud" philosophy)
  • Presents playful, human-centered approach to technology
  • Uses visual metaphors to explain complex concepts (expanding universe, digital shoelaces)

BUILD

Demonstrates technical capabilities and creative execution

  • Validates UNPARTY's ability to create engaging user experiences
  • Shows mastery of front-end technologies (vanilla JS, responsive CSS)
  • Proves concept of interactive, content-driven navigation
  • Serves as prototype for larger UNPARTY ecosystem patterns

CONNECT

Facilitates user engagement and community building

  • Provides multiple contact pathways (email, overlays)
  • Introduces MOOD X UNPARTY as next step in user journey
  • Creates memorable first impression for UNPARTY brand
  • Establishes connection point between web presence and native app

Relationship to Ecosystem

Position in UNPARTY Architecture

theunpartyselector serves as the public gateway to the UNPARTY ecosystem:

Cross-Repository Relationships

RepositoryRelationship TypeDescription
theunpartyappSibling/BackendWeb platform that could host this selector or provide backend services
theunpartyunpppMarketing TargetNative app promoted in "Mood" overlay
theunpartyrunwayDevelopment SupportCost tracking and velocity measurement for this project
theunpartycrawlerAnalytics SourceCould analyze user interaction patterns and conversation data

Unique Differentiators

  • Simplest Tech Stack: Vanilla JavaScript (no framework dependencies)
  • Fastest Load Time: Minimal external dependencies
  • Creative Entry Point: Most visually creative introduction to UNPARTY
  • Lowest Maintenance: Static files with no build process
  • Highest Accessibility: No complex routing or state management

Development Workflow

Local Development

bash

# Clone repository
git clone https://github.com/unparty-app/theunpartyselector.git
cd theunpartyselector

# Open in browser
open index.html
# OR serve locally
python3 -m http.server 8000
# Visit http://localhost:8000

No Build Process Required

  • Pure HTML/CSS/JavaScript (no transpilation)
  • No package manager dependencies (empty package-lock.json)
  • No compilation or bundling steps
  • Direct deployment of source files

Testing Approach

  • Manual testing in multiple browsers
  • Responsive design testing across viewport sizes
  • Dark mode functionality verification
  • Overlay interaction testing
  • Analytics validation

Content Strategy

Overlay Content Themes

About Overlay - Mission & Values

  • Introduces UNPARTY as no-code platform
  • Emphasizes storytelling and personal narratives
  • Communicates development transparency
  • Uses playful, icon-enhanced bullet points

Mood Overlay - Product Introduction

  • Presents "MOOD X UNPARTY" iOS app
  • Highlights machine learning and journaling features
  • Positions app as creativity tool
  • Call-to-action: Email info@unparty.app

Connect Overlay - Community Engagement

  • Acknowledges email collection challenges
  • Direct email contact method
  • Future: Waitlist integration (code present but inactive)
  • Transparent about development stage

Interactive Navigation Concept

The brainstorming-style navigation in the right column demonstrates UNPARTY's creative philosophy:

  • Crossed-out items show iterative thinking
  • Annotations reveal decision-making process
  • Handwritten font creates authentic feel
  • Mirrors real creator journey

Design Patterns

Grid-Based Interaction Model

javascript

// Core pattern: Toggle content on column click
tagline.addEventListener('click', function() {
    toggleContentAndStyle(
        tagline,           // Clicked element
        leftColumn,        // Target column
        rightColumn,       // Content column
        originalContent,   // Fallback text
        contentHTML,       // Dynamic HTML
        "placeholder-class" // Styling class
    );
});

Dark Mode Implementation

javascript

// Toggle dark mode with synchronized UI updates
document.getElementById('toggleDarkMode').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
    // Update logo, colors, and column backgrounds
});

Overlay Management

javascript

// Show/hide overlay system
function showOverlay(overlayId) {
    document.getElementById(overlayId).style.display = 'flex';
}

function hideOverlay(overlayId) {
    document.getElementById(overlayId).style.display = 'none';
}

Future Enhancements

Planned Features

  • Integrate Loops.so waitlist API (API key currently empty)
  • Add loading state animations
  • Create additional idea exploration pages (in /ideas directory)
  • Implement blog post dynamic rendering
  • Add user analytics dashboard
  • Create A/B testing for different headline approaches

Ideas Directory

The /ideas folder contains experimental prototypes:

  • app.html - App-focused landing concept
  • blog.html - Blog integration prototype
  • merch.html - Merchandise showcase concept
  • website.html - Alternative web design
  • roi.html - ROI calculator or pitch page

These represent different "selector" paths users might take.

Key Learnings & Philosophy

Development Approach

This repository embodies UNPARTY's "building out loud" philosophy:

  1. Simple First: Vanilla JavaScript over complex frameworks
  2. Creative Expression: Playful UI elements and authentic voice
  3. User Journey: Interactive storytelling over traditional navigation
  4. Transparency: Visible development decisions (waitlist code, commented sections)
  5. Iteration: /ideas folder shows exploration and experimentation

Performance Priorities

  • Zero build time: No compilation or bundling
  • Fast first paint: Minimal CSS, no render-blocking resources
  • Progressive enhancement: Core content accessible without JavaScript
  • Cacheable assets: Google Fonts and Font Awesome CDN usage

User Experience Principles

  • Discovery over direction: Users explore rather than follow rigid paths
  • Delight in details: Animated icons, playful copy, handwritten fonts
  • Authentic communication: Acknowledges reality of early-stage development
  • Multiple entry points: Three overlays provide different engagement angles

Security & Privacy

Data Collection

  • Google Analytics: Anonymous usage tracking
  • No cookies: No client-side storage or tracking beyond GA
  • Email-only contact: Direct communication, no form data stored
  • No backend: Static files eliminate server-side vulnerabilities

Asset Security

  • CDN dependencies: Trusted sources (Google, Font Awesome, S3)
  • No sensitive data: No API keys or credentials in production code
  • HTTPS assets: All external resources use secure protocols

Cost Structure

Monthly Costs

  • Hosting: $0 (static file hosting on GitHub Pages/Vercel free tier)
  • Domain: $1/month ($12/year if using custom domain)
  • Google Analytics: $0 (free tier)
  • Font Awesome: $0 (free kit)
  • S3 Storage: <$1/month (minimal asset storage)

Total Monthly Operational Cost: ~$0-2

This makes theunpartyselector the most cost-efficient repository in the UNPARTY ecosystem.

Metrics & Success Indicators

Key Performance Indicators

  • Bounce Rate: Measure engagement with interactive elements
  • Overlay Interactions: Track which content sections resonate
  • Dark Mode Adoption: Understand user preferences
  • Email Click-Through: Measure connection intent
  • Time on Page: Validate interactive storytelling approach

Analytics Goals

  • Understand which "selector" path (About, Mood, Connect) drives conversions
  • Identify drop-off points in user journey
  • Measure mobile vs desktop engagement patterns
  • Track dark mode preference distribution

Documentation

Related Files

  • index.html - Main application structure and content
  • script.js - Comprehensive event handling and interactivity
  • test.js - Grid sizing utility function
  • assets/css/styles.css - Visual styling and responsive design

External Documentation

Contributing

Development Guidelines

  1. Maintain vanilla JavaScript approach (no framework dependencies)
  2. Keep file structure simple and flat
  3. Preserve playful, authentic voice in content
  4. Test across browsers (Chrome, Safari, Firefox)
  5. Ensure mobile responsiveness
  6. Validate HTML/CSS/JS before committing

Commit Message Format

  • feat: Add new overlay section
  • fix: Resolve dark mode logo switching
  • style: Update color scheme for better contrast
  • docs: Update README with new features

Questions This Repository Answers

  1. What problem does this repo solve?
    Provides an engaging, memorable first impression of UNPARTY for web visitors

  2. Who is the primary user?
    Potential UNPARTY users discovering the platform for the first time

  3. What tech stack does it use?
    Vanilla HTML/CSS/JavaScript with Google Fonts and Font Awesome

  4. How does it integrate with other repos?
    Markets theunpartyunppp, could connect to theunpartyapp backend

  5. Is it actively developed or archived?
    Active development with experimental features in /ideas

  6. What are the key features/capabilities?
    Interactive grid, dark mode, overlay system, dynamic content injection

  7. What external services does it depend on?
    Google Analytics, Google Fonts, Font Awesome, AWS S3

  8. How does it align with ABOUT ā†’ BUILD ā†’ CONNECT?
    About: Explains UNPARTY mission | Build: Demonstrates execution | Connect: Provides contact pathways

  9. What business value does it provide?
    First impression, brand awareness, user onboarding, app discovery

  10. How does it protect creator ownership, privacy, and cost-sensitivity?
    No data collection beyond analytics, minimal hosting costs, no vendor lock-in

Status & Roadmap

Current Status: āœ… Production Ready (v1.0)
Last Updated: 2025-10-29
Maintained By: UNPARTY LLC

Version History

  • v1.0 (Current): Interactive landing page with overlays and dark mode
  • v0.x: Experimental prototypes in /ideas directory

Next Milestones

  1. Integrate waitlist API for email collection
  2. Add analytics dashboard for interaction tracking
  3. Create additional "selector" pathways
  4. A/B test different headline approaches
  5. Implement blog post dynamic rendering

Ecosystem Position

theunpartyselector is the first touch point in the UNPARTY user journey:

Code

User Journey Flow:
1. šŸŒ Discover ā†’ theunpartyselector (you are here)
2. šŸ“– Learn ā†’ About overlay
3. šŸ’” Explore ā†’ Interactive grid
4. šŸ“± Connect ā†’ MOOD X UNPARTY discovery
5. āœ‰ļø Engage ā†’ Email contact
6. šŸš€ Convert ā†’ theunpartyapp or theunpartyunppp

Ecosystem Contribution

  • Traffic Source: Primary entry point for organic discovery
  • Brand Establishment: First impression of UNPARTY philosophy
  • User Qualification: Filters interested users toward appropriate next steps
  • Cost Efficiency: Minimal operational costs while maintaining quality
  • Creative Showcase: Demonstrates UNPARTY's unique approach to UX

Contact & Support

Questions or Issues?
Email: info@unparty.app
Subject: "theunpartyselector support"

Repository Issues:
GitHub Issues: https://github.com/unparty-app/theunpartyselector/issues

Focus: First impressions that communicate UNPARTY's creative, transparent, and user-centered approach to technology innovation.

Mission: Turn curiosity into connection through interactive storytelling.