The Crimson Ledger

A compendium of fine dining & sustenance

{/* Members/Share */}

{(activeMembers || []).slice(0, 5).map(m => (

m.handle && openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', border: `2px solid ${THEME.gold}`, overflow: 'hidden', cursor: 'pointer' }} > {m.avatarUrl ? {m.displayName}

{m.displayName?.[0]}

}

))}

{/* SCROLL CONTENT */}

{(entries || []).map(entry => (

{/* Decorative corners */}

{entry.restaurant}

{entry.dish}

{[...Array(5)].map((_, i) => ( ★ ))}

Rec by {entry.addedBy.name}

"{entry.verdict}"

))}

❦ End of Scroll ❦

{/* FAB - QUILL */} {/* ADD ENTRY FORM (Bottom Sheet) */} {isFormOpen && (

e.target === e.currentTarget && setIsFormOpen(false)}>

Pen Your Verdict

Establishment setNewEntry({...newEntry, restaurant: e.target.value})} />

Dish of Note setNewEntry({...newEntry, dish: e.target.value})} />

Scholarly Review

setNewEntry({...newEntry, verdict: e.target.value})}
                />
              </div>

<div>
                <label style={{ display: 'block', fontSize: 12, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 6, fontWeight: 'bold' }}>Rating</label>
                <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
                  {[1, 2, 3, 4, 5].map(star => (
                    <button 
                      key={star} 
                      onClick={() => setNewEntry({...newEntry, rating: star})}
                      style={{ 
                        background: 'none', border: 'none', fontSize: 32, cursor: 'pointer', 
                        color: star <= newEntry.rating ? THEME.gold : '#ddd', 
                        transition: 'transform 0.1s'
                      }}
                    >
                      ★
                    </button>
                  ))}
                </div>
              </div>

<button 
                onClick={handleSave}
                style={{ 
                  marginTop: 8, height: 52, backgroundColor: THEME.crimson, color: '#fff', 
                  border: `1px solid ${THEME.gold}`, borderRadius: 8, fontSize: 18, fontFamily: THEME.font, 
                  fontWeight: 'bold', cursor: 'pointer', boxShadow: '0 4px 10px rgba(165, 28, 48, 0.3)'
                }}
              >
                Affix Seal & Publish
              </button>
            </div>
          </div>
        </div>
      )}

{/* GOLDEN SEAL ANIMATION OVERLAY */}
      {showSealAnim && (
        <div style={{ 
          position: 'fixed', inset: 0, zIndex: 300, display: 'flex', alignItems: 'center', justifyContent: 'center',
          pointerEvents: 'none'
        }}>
          <div style={{ 
            width: 200, height: 200, borderRadius: '50%', 
            background: `radial-gradient(circle at 30% 30%, ${THEME.gold}, #B8860B)`, 
            border: '8px double #8B4513',
            boxShadow: '0 10px 40px rgba(0,0,0,0.5)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            animation: 'sealStamp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards',
            opacity: 0
          }}>
            <span style={{ fontSize: 80 }}>VERITAS</span>
          </div>
          <style>{`
            @keyframes sealStamp {
              0% { transform: scale(3); opacity: 0; }
              50% { transform: scale(0.9); opacity: 1; }
              70% { transform: scale(1.1); }
              100% { transform: scale(1); opacity: 0; }
            }
          `}</style>
        </div>
      )}
    </div>
  );
}</article></body></html>