Ready for FCOS.org: This widget is designed to embed seamlessly into your Neon One website.
It shows a different orchid each day from your validated collection, with proper botanical formatting
and senior-friendly accessibility.
📊 Google Sheets Setup Instructions:
Step 1: Create a Google Sheet with these column headers (exact names):
genus, species, variety, hybrid, grex, clonal_name, infraspecific_rank, orchid_group, title, caption, image_url, photographer, credit, license, license_url, native_range, habitat, elevation_m, blooming_season, culture_notes, date, tags, accession_id
Step 2: Fill in your orchid data. Required columns:
- image_url - Direct link to orchid photo (required)
- genus - Orchid genus name
- species - Species name (or leave blank for hybrids)
- hybrid or grex - For hybrid orchids
- caption - Description of the orchid
Step 3: Publish your sheet:
- Go to File > Share > Publish to web
- Choose Comma-separated values (.csv)
- Click Publish
- Copy the CSV URL
Step 4: Update the widget config with your CSV URL
Embed Code (copy this to FCOS.org):
<script src="https://your-orchid-continuum-domain.com/static/js/orchid-of-the-day.js" defer></script>
<div id="orchid-of-the-day"></div>
Features:
- ✅ Reads from your existing Orchid Continuum database (no mock data!)
- ✅ One orchid per day with no repeats for 30+ days
- ✅ Proper botanical name formatting with italics
- ✅ Senior-friendly: 18px base font, high contrast colors
- ✅ WCAG AA accessible with focus states and alt text
- ✅ Shadow DOM prevents CSS conflicts with Neon One
- ✅ FCOS green branding (#2e7d32)
- ✅ Responsive design for mobile and desktop
- ✅ Caches data for fast loading
Configuration Options:
Edit the CONFIG object at the top of orchid-of-the-day.js:
const CONFIG = {
timezone: 'America/Los_Angeles',
DATA_SOURCE: {
type: 'json', // 'google_sheet' | 'json' | 'local'
url: '/api/orchid-of-the-day-data' // Your API endpoint
},
cacheTtlMinutes: 120,
maxRecentHistory: 30,
brand: {
bg: '#f4fff4', // Background color
title: '#2e7d32', // Title color
text: '#111' // Text color
}
};