VISITORS: 001337

{(groups || []).sort((a, b) => (b._timestamp || 0) - (a._timestamp || 0)).map(group => { const isMember = group.members?.includes(user?.id); const isNew = Date.now() - (group._timestamp || 0) < 86400000; // less than 24h old return (

{group.isDemo && '💾 DEMO: '} {group.title} {isNew && NEW!} {isMember && ✓ JOINED}

Subject: {group.subject}

Time: {group.time}

"{group.desc}"

Admin: {group._user?.displayName || 'Anonymous'}

); })}

); const renderCreateGroup = () => (

New_Group_Details.exe

Group Configuration

Title: setNewGroup({...newGroup, title: e.target.value})} placeholder="e.g. History Buffs" />

Subject: setNewGroup({...newGroup, subject: e.target.value})} placeholder="e.g. WW2" />

Time: setNewGroup({...newGroup, time: e.target.value})} placeholder="e.g. Fridays at 5" />

Description:

setNewGroup({...newGroup, desc: e.target.value})} placeholder="What are we studying?" />
            </div>
          </fieldset>

<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
            <button type="button" className="win-button" onClick={() => setView('board')} style={{ minHeight: 44 }}>Cancel</button>
            <button type="submit" className="win-button" style={{ minHeight: 44, fontWeight: 'bold' }}>💾 Create Group</button>
          </div>
        </form>
      </div>
    </div>
  );

return (
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: 8 }}>
        <div className="win-panel" style={{ marginBottom: 8, padding: 2, flexShrink: 0 }}>
           <div className="win-titlebar">
            <span>{group.title}</span>
            <button className="win-button" style={{ padding: '0 4px', minHeight: 24, fontSize: 12 }} onClick={() => setView('board')}>✕</button>
          </div>
          <div style={{ padding: 8, fontSize: 14 }}>
            <div><strong>Subject:</strong> {group.subject} | <strong>Time:</strong> {group.time}</div>
            <div style={{ fontStyle: 'italic', marginTop: 4 }}>{group.desc}</div>
          </div>
        </div>

<div className="win-inset" style={{ flex: 1, backgroundColor: '#FFFFFF', overflowY: 'auto', padding: 8, marginBottom: 8, fontFamily: 'Courier New', fontSize: 15, display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={{ color: '#008080', borderBottom: '1px dashed #008080', paddingBottom: 4, marginBottom: 8 }}>
            *** Welcome to the chat room for {group.title} ***
          </div>
          
          {(groupMessages || []).length === 0 ? (
             <div style={{ color: '#808080', fontStyle: 'italic' }}>No messages yet. Be the first!</div>
          ) : (
            (groupMessages || []).map(msg => (
              <div key={msg.id} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                <strong 
                  style={{ color: msg._user?.id === user?.id ? '#0000FF' : '#FF0000', cursor: 'pointer', whiteSpace: 'nowrap' }} 
                  onClick={() => openProfile && msg._user?.handle && openProfile(msg._user.handle)}
                >
                  <{msg._user?.displayName || 'Anonymous'}>
                </strong>
                <span style={{ wordBreak: 'break-word' }}>{msg.text}</span>
              </div>
            ))
          )}
          <div ref={chatEndRef} />
        </div>

<form onSubmit={handleSendMessage} style={{ flexShrink: 0, display: 'flex', gap: 8 }}>
          <input 
            className="win-inset" 
            style={{ flex: 1, height: 48, padding: '0 8px' }}
            value={chatInput}
            onChange={e => setChatInput(e.target.value)}
            placeholder="Type message here..."
          />
          <button type="submit" className="win-button" style={{ height: 48, minWidth: 80 }}>Send</button>
        </form>
      </div>
    );
  };

return (
    <div style={{ 
      minHeight: '100dvh', 
      backgroundColor: '#008080', 
      fontFamily: 'Times New Roman, serif',
      display: 'flex',
      flexDirection: 'column',
      paddingTop: 'max(env(safe-area-inset-top, 20px), 8px)',
      paddingBottom: 'env(safe-area-inset-bottom, 20px)',
      paddingLeft: 'max(env(safe-area-inset-left, 0px), 8px)',
      paddingRight: 'max(env(safe-area-inset-right, 0px), 8px)',
      maxWidth: 600,
      margin: '0 auto',
      width: '100%',
      boxSizing: 'border-box'
    }}>
      <style dangerouslySetInnerHTML={{ __html: retroStyles }} />
      
      {/* Header */}
      <header className="win-panel" style={{ padding: 2, marginBottom: 16, flexShrink: 0 }}>
        <div className="win-titlebar" style={{ padding: '6px 12px' }}>
          <h1 style={{ margin: 0, fontSize: 20, display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'Arial Black, sans-serif' }}>
            <span role="img" aria-label="globe">🌐</span> StudyNet '98 
          </h1>
          <div style={{ display: 'flex', gap: 4 }}>
            <div className="win-button" style={{ padding: '2px 8px', minWidth: 24, textAlign: 'center' }}>_</div>
            <div className="win-button" style={{ padding: '2px 8px', minWidth: 24, textAlign: 'center' }}>□</div>
            <div className="win-button" style={{ padding: '2px 8px', minWidth: 24, textAlign: 'center' }}>X</div>
          </div>
        </div>
        {view === 'board' && (
          <div style={{ background: 'black', color: '#00FF00', padding: '2px 0', borderTop: '2px solid #808080' }}>
            <div style={{ overflow: 'hidden', whiteSpace: 'nowrap', width: '100%' }}>
              <div className="marquee">*** WELCOME TO STUDYNET *** FIND YOUR GROUP TODAY *** NO Y2K BUGS HERE ***</div>
            </div>
          </div>
        )}
      </header>

{/* Main Content Area */}
      <main style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
        {view === 'board' && renderBoard()}
        {view === 'create' && renderCreateGroup()}
        {view === 'group' && renderGroupView()}
      </main>

{/* Connecting Overlay */}
      {isConnecting && (
        <div style={{ 
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, 
          backgroundColor: 'rgba(0,0,0,0.7)', zIndex: 9999,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 16
        }}>
          <div className="win-panel" style={{ width: '100%', maxWidth: 320, padding: 2 }}>
            <div className="win-titlebar">Dial-Up Networking</div>
            <div style={{ padding: 20, backgroundColor: '#FFFFFF', minHeight: 120, border: '3px inset #808080', fontFamily: 'Courier New', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
              {(connectionLog || []).map((log, i) => (
                <div key={i} style={{ marginBottom: 4 }}>{log}</div>
              ))}
              <div className="blink">_</div>
            </div>
          </div>
        </div>
      )}

{/* Success Modal Overlay */}
      {showSuccessModal && (
        <div style={{ 
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, 
          backgroundColor: 'rgba(0,0,0,0.5)', zIndex: 9999,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 16
        }}>
          <div className="win-panel" style={{ width: '100%', maxWidth: 300, padding: 2, textAlign: 'center' }}>
            <div className="win-titlebar" style={{ background: '#008000' }}>Success!</div>
            <div style={{ padding: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
              <div style={{ fontSize: 48 }} className="blink">✨</div>
              <h2 style={{ margin: 0, color: '#0000FF' }}>DING!</h2>
              <p style={{ margin: 0, fontWeight: 'bold' }}>Group Created Successfully!</p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
)}</article></body></html>