{/* Scanline overlay */}

{/* DYNAMIC STYLES for animations */} {/* HEADER */}

ASSIGN MATE

// SQUAD.FINDER.v2

{view === 'feed' && ( )} {user?.handle && (

openProfile?.(user.handle)} title="My Profile" style={{ width: 36, height: 36, borderRadius: 18, border: '2px solid rgba(155,89,182,0.6)', backgroundImage: `url(${user?.avatarUrl || 'https://api.dicebear.com/7.x/pixel-art/svg?seed=me'})`, backgroundSize: 'cover', cursor: 'pointer', flexShrink: 0, boxShadow: '0 0 10px rgba(155,89,182,0.3)', animation: 'glowPulse 3s ease-in-out infinite' }} /> )}

{/* TOAST */} {toast && (

{toast}

)} {/* CONFETTI - Neon particles */} {showConfetti && (

{[...Array(40)].map((_, i) => { const colors = [theme.primary, theme.secondary, theme.accent, theme.purple, theme.yellow]; const color = colors[Math.floor(Math.random() * (colors || []).length)]; const size = 4 + Math.random() * 8; return (

0.5 ? '50%' : '2px', backgroundColor: color, boxShadow: `0 0 ${6 + Math.random() * 10}px ${color}`, animation: `fall ${1.5 + Math.random() * 2.5}s linear forwards`, animationDelay: `${Math.random() * 0.8}s`, opacity: 0.9 }} /> ); })}

)} {/* MAIN CONTENT AREA */}

{/* FEED VIEW */} {view === 'feed' && (

{/* ACTIVE MEMBERS SOCIAL SURFACE */} {(memberList || []).length > 0 && (

⟐ ONLINE ({(memberList || []).length})

{(memberList || []).slice(0, 12).map((m, i) => { const mHandle = m?.handle; const mName = m?.displayName || m?.name || 'Member'; const mAvatar = m?.avatarUrl || m?.profileImageUrl || `https://api.dicebear.com/7.x/pixel-art/svg?seed=${mName}`; const isActive = memberActivity?.[m?.id]?.lastActiveAt && (Date.now() - memberActivity[m.id].lastActiveAt < 300000); const glowColor = isActive ? theme.accent : 'rgba(0,212,255,0.3)'; return (

{ if (mHandle) openProfile?.(mHandle); }} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, cursor: mHandle ? 'pointer' : 'default', flexShrink: 0, minWidth: 56 }} title={mName} >

{isActive &&

}

{mName.split(' ')[0]}

); })}

)} {(filteredListings || []).length === 0 ? (

NO SQUADS FOUND

// adjust filters or create your own

) : ( (filteredListings || []).map(listing => { const statusColor = listing.status === 'open' ? theme.accent : listing.status === 'almost_full' ? theme.yellow : theme.textDim; const statusGlow = listing.status === 'open' ? `0 0 8px ${theme.accent}` : listing.status === 'almost_full' ? `0 0 8px ${theme.yellow}` : 'none'; return (

openVibeCheck(listing)} style={{ background: theme.cardBg, border: '1px solid rgba(0,212,255,0.15)', borderRadius: 16, boxShadow: '0 0 15px rgba(0,212,255,0.05), 0 4px 20px rgba(0,0,0,0.4)', padding: 20, cursor: 'pointer', position: 'relative', overflow: 'hidden', transition: 'transform 0.15s, box-shadow 0.3s', transform: 'translateY(0)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', }} onPointerDown={(e) => { e.currentTarget.style.transform = 'translateY(1px) scale(0.995)'; e.currentTarget.style.boxShadow = '0 0 20px rgba(0,212,255,0.12), 0 2px 10px rgba(0,0,0,0.4)'; }} onPointerUp={(e) => { e.currentTarget.style.transform = 'translateY(0) scale(1)'; e.currentTarget.style.boxShadow = '0 0 15px rgba(0,212,255,0.05), 0 4px 20px rgba(0,0,0,0.4)'; }} onPointerLeave={(e) => { e.currentTarget.style.transform = 'translateY(0) scale(1)'; e.currentTarget.style.boxShadow = '0 0 15px rgba(0,212,255,0.05), 0 4px 20px rgba(0,0,0,0.4)'; }} > {/* Top accent line */}

{listing.isDemo && (

DEMO

)}

{listing.subjectCode} @ {listing.uni}

{listing.assignmentName}

{listing.assignmentType}

{listing.filledSpots}/{listing.totalSpots}

{daysUntil(listing.deadline)}

{(listing.rolesNeeded || []).length > 0 ? (

ROLES NEEDED:

{(listing.rolesNeeded || []).map(role => ( {getRoleEmoji(role)} {role} ))}

) : (

// squad full — no roles needed

)}

{ e.stopPropagation(); if (listing._user?.handle) openProfile?.(listing._user.handle); }} style={{ width: 34, height: 34, borderRadius: 17, border: `2px solid ${theme.purple}60`, backgroundImage: `url(${listing._user?.profileImageUrl || 'https://api.dicebear.com/7.x/pixel-art/svg?seed=fallback'})`, backgroundSize: 'cover', cursor: listing._user?.handle ? 'pointer' : 'default', boxShadow: `0 0 8px ${theme.purple}30`, flexShrink: 0 }} />

{ e.stopPropagation(); if (listing._user?.handle) openProfile?.(listing._user.handle); }} > {listing._user?.displayName || 'Student'}

{listing.workStyle} · {listing.availability}

); }) )}

)} {/* POST FORM VIEW */} {view === 'post' && (

CREATE SQUAD

Subject Code* setFormData({...formData, subjectCode: e.target.value.toUpperCase()})} placeholder="e.g. CS101" style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }} />

University setFormData({...formData, uni: e.target.value})} placeholder="e.g. UTS" style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }} />

Assignment Name* setFormData({...formData, assignmentName: e.target.value})} placeholder="e.g. Final Group Report" style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }} />

Type

Deadline* setFormData({...formData, deadline: e.target.value})} style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }} />

Total Size setFormData({...formData, totalSpots: parseInt(e.target.value)})} style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }} />

Already Filled setFormData({...formData, filledSpots: parseInt(e.target.value)})} style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }} />

Roles Needed

{(ROLES || []).map(role => { const isSelected = (formData.rolesNeeded || []).includes(role); const roleColor = getRoleColor(role); return ( ); })}

Work Style

Availability

Short Bio / Pitch

setFormData({...formData, bio: e.target.value})} placeholder="e.g. Aiming for an A, let's crush this!" style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', minHeight: 80, resize: 'none', background: 'rgba(10,10,25,0.8)', color: theme.text }} />
              </div>

<button type="submit" style={{ 
                background: `linear-gradient(135deg, ${theme.primary}, ${theme.purple})`, color: '#fff', border: 'none', borderRadius: 14, padding: 16,
                fontSize: 16, fontWeight: 800, fontFamily: theme.fontHead, cursor: 'pointer',
                boxShadow: `0 0 20px rgba(255,0,110,0.3), 0 4px 15px rgba(0,0,0,0.4)`,
                marginTop: 8, textTransform: 'uppercase', letterSpacing: '2px',
                transition: 'box-shadow 0.3s, transform 0.15s'
              }}>
                <span aria-hidden="true">🚀</span> POST SQUAD
              </button>
            </form>
          </div>
        )}
      </main>

{/* STICKY BOTTOM ACTION BAR (only on feed) */}
      {view === 'feed' && (
        <div style={{ 
          position: 'fixed', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', 
          left: 16, right: 16, maxWidth: 448, margin: '0 auto', zIndex: 10 
        }}>
          <button 
            onClick={() => setView('post')}
            style={{ 
              width: '100%', padding: 16,
              background: `linear-gradient(135deg, ${theme.primary}, ${theme.purple})`, color: '#fff', 
              border: 'none', borderRadius: 16, fontSize: 16, fontWeight: 800, 
              fontFamily: theme.fontHead, cursor: 'pointer', letterSpacing: '2px',
              boxShadow: `0 0 25px rgba(255,0,110,0.35), 0 4px 20px rgba(0,0,0,0.5)`,
              display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8,
              transition: 'box-shadow 0.3s, transform 0.15s'
            }}>
            <span aria-hidden="true">➕</span> POST YOUR SQUAD
          </button>
        </div>
      )}

{view === 'post' && (
        <div style={{ 
          position: 'fixed', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', 
          left: 16, right: 16, maxWidth: 448, margin: '0 auto', zIndex: 10 
        }}>
          <button 
            type="button"
            onClick={() => setView('feed')}
            style={{ 
              width: '100%', padding: 16,
              background: 'rgba(15,15,30,0.9)', color: theme.secondary, 
              border: `1px solid ${theme.secondary}40`, borderRadius: 16, fontSize: 16, fontWeight: 800, 
              fontFamily: theme.fontHead, cursor: 'pointer', letterSpacing: '2px',
              boxShadow: `0 0 15px rgba(0,212,255,0.15), 0 4px 20px rgba(0,0,0,0.5)`,
              backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
              display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8,
              transition: 'box-shadow 0.3s, transform 0.15s'
            }}>
            <span aria-hidden="true">←</span> BACK TO FEED
          </button>
        </div>
      )}

{/* FILTER BOTTOM SHEET */}
      {showFilters && (
        <div style={{ 
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 50,
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)'
        }} onClick={() => setShowFilters(false)}>
          <div 
            style={{ 
              background: 'rgba(13,13,26,0.97)', padding: '24px 24px calc(env(safe-area-inset-bottom, 20px) + 24px)', 
              borderTop: `1px solid ${theme.secondary}30`, borderTopLeftRadius: 24, borderTopRightRadius: 24,
              animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
              backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)'
            }}
            onClick={e => e.stopPropagation()}
          >
            <div style={{ width: 36, height: 4, background: 'rgba(0,212,255,0.3)', borderRadius: 2, margin: '0 auto 20px' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
              <h2 style={{ margin: 0, fontFamily: theme.fontHead, color: theme.secondary, letterSpacing: '2px', fontSize: 16, textShadow: `0 0 10px ${theme.secondary}40` }}>🔍 FILTERS</h2>
              <button onClick={() => setShowFilters(false)} style={{ background: 'none', border: 'none', fontSize: 22, cursor: 'pointer', color: theme.textDim, padding: 4 }}>✕</button>
            </div>
            
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 700, marginBottom: 8, color: theme.secondary, letterSpacing: '1px', fontFamily: theme.fontHead, textTransform: 'uppercase' }}>Subject</label>
                <input value={filters.subject} onChange={e => setFilters({...filters, subject: e.target.value})} placeholder="e.g. CS101" style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }} />
              </div>
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 700, marginBottom: 8, color: theme.secondary, letterSpacing: '1px', fontFamily: theme.fontHead, textTransform: 'uppercase' }}>Role Needed</label>
                <select value={filters.role} onChange={e => setFilters({...filters, role: e.target.value})} style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }}>
                  <option value="">All Roles</option>
                  {(ROLES || []).map(r => <option key={r} value={r}>{r}</option>)}
                </select>
              </div>
              <div>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 700, marginBottom: 8, color: theme.secondary, letterSpacing: '1px', fontFamily: theme.fontHead, textTransform: 'uppercase' }}>Work Style</label>
                <select value={filters.style} onChange={e => setFilters({...filters, style: e.target.value})} style={{ width: '100%', padding: 12, border: '1px solid rgba(0,212,255,0.2)', borderRadius: 10, fontSize: 16, boxSizing: 'border-box', background: 'rgba(10,10,25,0.8)', color: theme.text }}>
                  <option value="">All Styles</option>
                  {(STYLES || []).map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </div>
              <div style={{ display: 'flex', gap: 12, marginTop: 8 }}>
                <button 
                  onClick={() => setFilters({ subject: '', role: '', style: '' })}
                  style={{ flex: 1, padding: 16, background: 'rgba(224,224,240,0.05)', border: '1px solid rgba(224,224,240,0.15)', borderRadius: 12, fontWeight: 700, cursor: 'pointer', color: theme.textDim, fontFamily: theme.fontBody, fontSize: 14 }}
                >Clear</button>
                <button 
                  onClick={() => setShowFilters(false)}
                  style={{ flex: 2, padding: 16, background: `linear-gradient(135deg, ${theme.secondary}, ${theme.purple})`, border: 'none', borderRadius: 12, fontWeight: 700, cursor: 'pointer', color: '#fff', fontFamily: theme.fontHead, letterSpacing: '1px', fontSize: 14, boxShadow: `0 0 15px ${theme.secondary}30` }}
                >APPLY</button>
              </div>
            </div>
          </div>
        </div>
      )}

{/* VIBE CHECK & CONNECT SHEET */}
      {selectedListing && (
        <div style={{ 
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)', zIndex: 60,
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)'
        }} onClick={() => setSelectedListing(null)}>
          <div 
            style={{ 
              background: 'rgba(13,13,26,0.97)', padding: '24px 24px calc(env(safe-area-inset-bottom, 20px) + 24px)', 
              borderTop: `1px solid ${theme.purple}40`, borderTopLeftRadius: 24, borderTopRightRadius: 24,
              animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
              backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)'
            }}
            onClick={e => e.stopPropagation()}
          >
            <div style={{ width: 36, height: 4, background: `${theme.purple}40`, borderRadius: 2, margin: '0 auto 20px' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
              <div>
                <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, color: '#fff' }}>{selectedListing.assignmentName}</h2>
                <div 
                  style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 10, cursor: selectedListing._user?.handle ? 'pointer' : 'default' }}
                  onClick={() => { if (selectedListing._user?.handle) openProfile?.(selectedListing._user.handle); }}
                >
                  <div style={{
                    width: 28, height: 28, borderRadius: 14, border: `2px solid ${theme.purple}60`,
                    backgroundImage: `url(${selectedListing._user?.profileImageUrl || 'https://api.dicebear.com/7.x/pixel-art/svg?seed=fallback'})`,
                    backgroundSize: 'cover', flexShrink: 0,
                    boxShadow: `0 0 8px ${theme.purple}30`
                  }} />
                  <span style={{ color: theme.textDim, fontSize: 13, fontFamily: theme.fontMono }}>by {selectedListing._user?.displayName || 'Student'}</span>
                </div>
              </div>
              <button onClick={() => setSelectedListing(null)} style={{ background: 'none', border: 'none', fontSize: 22, cursor: 'pointer', padding: 4, color: theme.textDim }}>✕</button>
            </div>
            
            {selectedListing.bio && (
              <div style={{ background: 'rgba(155,89,182,0.06)', padding: 16, borderRadius: 12, border: `1px solid ${theme.purple}20`, marginBottom: 20, fontStyle: 'italic', color: theme.textDim, fontSize: 14 }}>
                "{selectedListing.bio}"
              </div>
            )}

<div style={{ marginBottom: 24 }}>
              <h3 style={{ fontFamily: theme.fontHead, margin: '0 0 14px 0', display: 'flex', alignItems: 'center', gap: 8, color: theme.secondary, letterSpacing: '1.5px', fontSize: 13, textShadow: `0 0 8px ${theme.secondary}30` }}>
                <span aria-hidden="true">⚡</span> VIBE CHECK
              </h3>
              <div style={{ height: 28, background: 'rgba(0,0,0,0.4)', borderRadius: 14, border: `1px solid ${theme.secondary}20`, overflow: 'hidden', position: 'relative' }}>
                <div style={{ 
                  position: 'absolute', top: 0, left: 0, bottom: 0, 
                  width: `${vibeScore}%`, 
                  background: `linear-gradient(90deg, ${theme.secondary}, ${theme.primary})`,
                  transition: 'width 1.2s cubic-bezier(0.22, 1, 0.36, 1)',
                  boxShadow: `0 0 15px ${theme.secondary}40`
                }} />
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, color: '#fff', fontSize: 13, fontFamily: theme.fontHead, letterSpacing: '1px', textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
                  {vibeScore}% COMPATIBLE
                </div>
              </div>
              <div style={{ textAlign: 'center', fontSize: 12, color: theme.textDim, marginTop: 10, fontFamily: theme.fontMono }}>
                // analysis: work_style({selectedListing.workStyle}) + availability
              </div>
            </div>

{selectedListing.status === 'closed' ? (
              <button 
                onClick={() => { showToast('⭐ Review feature coming soon!'); setSelectedListing(null); }}
                style={{ width: '100%', padding: 16, background: `linear-gradient(135deg, ${theme.yellow}80, ${theme.yellow}40)`, border: `1px solid ${theme.yellow}60`, borderRadius: 14, fontSize: 15, fontWeight: 800, fontFamily: theme.fontHead, cursor: 'pointer', color: '#000', letterSpacing: '1px', boxShadow: `0 0 15px ${theme.yellow}20` }}
              >RATE SQUAD</button>
            ) : (
              <button 
                onClick={handleConnect}
                style={{ width: '100%', padding: 16, background: `linear-gradient(135deg, ${theme.accent}, ${theme.secondary})`, border: 'none', borderRadius: 14, fontSize: 15, fontWeight: 800, fontFamily: theme.fontHead, cursor: 'pointer', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8, color: '#000', letterSpacing: '1.5px', boxShadow: `0 0 20px ${theme.accent}30, 0 4px 15px rgba(0,0,0,0.4)` }}
              ><span aria-hidden="true">💬</span> CONNECT NOW</button>
            )}
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>

NO SQUADS FOUND

{listing.assignmentName}

➕ CREATE SQUAD

CREATE SQUAD