UNSW • JALAN PELAN

Walk Slowly

); const renderMap = () => (

🗺️

Overlapping paths...

{/* Simple abstract art representing paths */}

); const renderFeed = () => (

{/* Question Card */}

THIS WEEK

{CURRENT_QUESTION}

{/* Logs */} {(logs || []).map(log => (

{log._user?.avatarUrl ?

: '👤'}

{log._user?.displayName}

{log.location}

{log.text}

{log.mood}

))}

); // 5. MAIN RENDER return (

{renderHeader()}

{view === 'feed' ? renderFeed() : renderMap()}

{/* Bottom Nav */}

{/* Composer Overlay */} {isComposing && (

setIsComposing(false)}>

e.stopPropagation()} style={{ width: '100%', background: '#FFFDF5', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 24px)' }}>

What did you notice?

setText(e.target.value)} autoFocus
              placeholder="A sound, a smell, a feeling..."
              style={{ 
                width: '100%', height: 100, borderRadius: 12, border: '1px solid #E6BE8A', 
                padding: 12, fontSize: 16, marginBottom: 16, fontFamily: 'inherit'
              }}
            />
            <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 16 }}>
              {(MOODS || []).map(m => (
                <button 
                  key={m.label} onClick={() => setMood(m)}
                  style={{ 
                    padding: '8px 12px', borderRadius: 20, border: '1px solid',
                    borderColor: mood === m ? '#D45668' : '#EEE',
                    background: mood === m ? '#FFF0F5' : '#FFF',
                    color: mood === m ? '#D45668' : '#666',
                    whiteSpace: 'nowrap'
                  }}
                >
                  {m.icon} {m.label}
                </button>
              ))}
            </div>
            <button onClick={handlePost} style={{ 
              width: '100%', height: 50, borderRadius: 16, background: '#2D2D2D', color: '#F4E8C1', 
              fontSize: 16, fontWeight: 600, border: 'none'
            }}>
              Share Quietly
            </button>
          </div>
        </div>
      )}

{/* Ribbon Animation Overlay */}
      {showRibbon && (
        <div style={{ 
          position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 200, 
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column'
        }}>
          <div style={{ fontSize: 80 }}>🎀</div>
          <div style={{ color: '#D45668', fontWeight: 600, marginTop: 16, background: 'rgba(255,255,255,0.8)', padding: '4px 12px', borderRadius: 12 }}>Saved.</div>
        </div>
      )}
    </div>
  );
}</article></body></html>