{/* Header */}

CampusPulse

{(memberList || []).map(m => (

m.handle && openProfile && openProfile(m.handle)} style={{ width: 36, height: 36, borderRadius: '50%', background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : '#334155', border: '2px solid #8b5cf6', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}> {!m.avatarUrl && 👤}

))}

{/* Main Content Area */}

{view === 'map' ? (

{/* Abstract Grid Lines */}

{/* Zones labels */} {(ZONES || []).map(z => (

{z.name}

))} {/* Event Pins */} {(events || []).map(evt => { const buzz = getEventBuzz(evt.id); const isHot = buzz > 1; return (

{/* Pulse Ring */}

{/* Pin Drop */}

setSelectedEventId(evt.id)} style={{ position: 'absolute', transform: 'translate(-50%, -100%)', animation: 'float 3s ease-in-out infinite', display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer' }} >

{evt.title.split(' ')[0]} {isHot && '🔥'}

); })}

) : (

{(events || []).length === 0 &&

No events yet. Be the first!

} {(events || []).map(evt => (

setSelectedEventId(evt.id)} className="glass-panel" style={{ padding: 16, borderRadius: 20, display: 'flex', flexDirection: 'column', gap: 8, cursor: 'pointer', animation: 'pop-in 0.3s ease-out' }}>

{evt.isDemo ? `Demo • ${evt.title}` : evt.title}

⭐ {getEventBuzz(evt.id)}

🕒 {evt.time} 📍 {evt.location}

{evt.description}

))}

)}

{/* Add Event FAB */} {/* Selected Event Bottom Sheet */} {selectedEvent && (

setSelectedEventId(null)}>

e.stopPropagation()}>

{selectedEvent.imageUrl && ( Event

)}

{selectedEvent.isDemo ? `Demo • ${selectedEvent.title}` : selectedEvent.title}

🕒 {selectedEvent.time}

📍 {selectedEvent.location}

{selectedEvent.description}

selectedEvent._user?.handle && openProfile && openProfile(selectedEvent._user.handle)} style={{ width: 32, height: 32, borderRadius: 16, background: selectedEvent._user?.profileImageUrl ? `url(${selectedEvent._user.profileImageUrl}) center/cover` : '#475569', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}> {!selectedEvent._user?.profileImageUrl && 👤}

Hosted by

{selectedEvent._user?.displayName || 'Anonymous'}

🔥 {getEventBuzz(selectedEvent.id)} Buzz

)} {/* Add Event Modal */} {isAdding && (

Drop a Pin

Event Title setNewEvent({...newEvent, title: e.target.value})} placeholder="e.g. Midnight Pizza Run" style={{ width: '100%', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', padding: '16px', borderRadius: 16, fontSize: 16, boxSizing: 'border-box' }} />

Time setNewEvent({...newEvent, time: e.target.value})} style={{ width: '100%', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', padding: '16px', borderRadius: 16, fontSize: 16, boxSizing: 'border-box' }} />

Zone

Details

setNewEvent({...newEvent, description: e.target.value})} 
                placeholder="What's the vibe?"
                rows={3}
                style={{ width: '100%', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', padding: '16px', borderRadius: 16, fontSize: 16, boxSizing: 'border-box', resize: 'none' }}
              />
            </div>

<div>
              <label style={{ display: 'block', fontSize: 13, fontWeight: 700, color: '#94a3b8', marginBottom: 8, textTransform: 'uppercase', letterSpacing: 1 }}>Photo (Optional)</label>
              {newEvent.photo ? (
                <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', height: 160 }}>
                  <img src={newEvent.photo} alt="Preview" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  <button onClick={() => setNewEvent({...newEvent, photo: null})} style={{ position: 'absolute', top: 8, right: 8, width: 32, height: 32, borderRadius: 16, background: 'rgba(0,0,0,0.6)', color: '#fff', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✕</button>
                </div>
              ) : (
                <button 
                  onClick={handlePhotoUpload}
                  disabled={uploading}
                  style={{ width: '100%', height: 100, background: 'rgba(255,255,255,0.05)', border: '2px dashed rgba(255,255,255,0.2)', borderRadius: 16, color: '#cbd5e1', fontSize: 16, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8 }}
                >
                  <span style={{ fontSize: 24 }}>📷</span>
                  {uploading ? 'Uploading...' : 'Tap to add photo'}
                </button>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>