/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useMemo, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Symptom tracking interface interface Symptom { date: string; mood: string; physicalSymptoms: string[]; notes: string; } function CycleDiagram({ cycleLength, lastPeriodDate }) { const phases = useMemo(() => { const periodLength = 5; // Typical period length const follicularPhaseLength = Math.floor(cycleLength * 0.4); const ovulationDay = Math.floor(cycleLength * 0.5); const lutealPhaseLength = cycleLength - periodLength - follicularPhaseLength; return [ { name: "Period", length: periodLength, color: "#FF6B6B" }, { name: "Follicular", length: follicularPhaseLength, color: "#4ECDC4" }, { name: "Ovulation", length: 1, color: "#FFD93D" }, { name: "Luteal", length: lutealPhaseLength, color: "#6A5ACD" } ]; }, [cycleLength]); return (

{phases.map((phase, index) => (

{phase.name}

))}

); } function PeriodCalculator() { const [lastPeriodDate, setLastPeriodDate] = useState(''); const [cycleLength, setCycleLength] = useState(28); const [futurePeriods, setFuturePeriods] = useState(3); const [nextPeriodDates, setNextPeriodDates] = useState([]); // New state for symptom tracking const [currentSymptom, setCurrentSymptom] = useState({ date: new Date().toISOString().split('T')[0], mood: '', physicalSymptoms: [], notes: '' }); const [symptomHistory, setSymptomHistory] = useState([]); const [fertileWindow, setFertileWindow] = useState<{ start: string, end: string } | null>(null); // Symptom tracking physical symptoms const physicalSymptomOptions = [ 'Cramps', 'Headache', 'Bloating', 'Fatigue', 'Breast Tenderness', 'Acne', 'Lower Back Pain' ]; // Mood options const moodOptions = [ '😊 Happy', '😴 Tired', '😢 Sad', '😠 Irritable', '😌 Calm', '�anxiety Anxious' ]; const calculateNextPeriods = () => { if (!lastPeriodDate) return; const periodDates: string[] = []; let lastDate = new Date(lastPeriodDate); // Calculate fertile window const ovulationDate = new Date(lastDate); ovulationDate.setDate(lastDate.getDate() + Math.floor(cycleLength * 0.5)); const fertileStart = new Date(ovulationDate); fertileStart.setDate(ovulationDate.getDate() - 5); const fertileEnd = new Date(ovulationDate); fertileEnd.setDate(ovulationDate.getDate() + 1); setFertileWindow({ start: fertileStart.toISOString().split('T')[0], end: fertileEnd.toISOString().split('T')[0] }); for (let i = 0; i < futurePeriods; i++) { const nextDate = new Date(lastDate); nextDate.setDate(lastDate.getDate() + cycleLength); periodDates.push(nextDate.toISOString().split('T')[0]); lastDate = nextDate; } setNextPeriodDates(periodDates); }; const handleSymptomSubmit = async () => { const updatedHistory = [...symptomHistory, currentSymptom]; setSymptomHistory(updatedHistory); // Persist symptoms (server-side blob storage) try { const { blob } = await import("https://esm.town/v/std/blob"); await blob.setJSON(`symptom_history_${new Date().getFullYear()}`, updatedHistory); } catch (error) { console.error("Failed to save symptoms", error); } // Reset current symptom setCurrentSymptom({ date: new Date().toISOString().split('T')[0], mood: '', physicalSymptoms: [], notes: '' }); }; const toggleSymptom = (symptom: string) => { setCurrentSymptom(prev => ({ ...prev, physicalSymptoms: prev.physicalSymptoms.includes(symptom) ? prev.physicalSymptoms.filter(s => s !== symptom) : [...prev.physicalSymptoms, symptom] })); }; return (

🩸 Comprehensive Period Tracker

{/* Existing Period Prediction Section */}

Last Period Date: setLastPeriodDate(e.target.value)} style={{ width: '100%', padding: '10px', margin: '10px 0' }} />

Average Cycle Length (days): setCycleLength(Number(e.target.value))} min="21" max="35" style={{ width: '100%', padding: '10px', margin: '10px 0' }} />

{/* Fertile Window Display */} {fertileWindow && (

🌸 Fertility Window

From {new Date(fertileWindow.start).toLocaleDateString()} to {new Date(fertileWindow.end).toLocaleDateString()}

)} {/* Symptom Tracking Section */}

Daily Symptom Log

{/* Mood Selection */}

Today's Mood:

{/* Physical Symptoms */}

Physical Symptoms:

{physicalSymptomOptions.map(symptom => ( ))}

{/* Notes */}

setCurrentSymptom(prev => ({ ...prev, notes: e.target.value }))}
          style={{ 
            width: '100%', 
            height: '100px', 
            marginTop: '10px',
            padding: '10px'
          }}
        />

<button 
          onClick={handleSymptomSubmit}
          style={{
            backgroundColor: '#4CAF50',
            color: 'white',
            border: 'none',
            padding: '10px 20px',
            borderRadius: '5px',
            cursor: 'pointer',
            marginTop: '10px'
          }}
        >
          Log Symptoms
        </button>
      </div>

{/* Symptom History */}
      {symptomHistory.length > 0 && (
        <div style={{ 
          marginTop: '20px', 
          backgroundColor: '#e0e0e0', 
          padding: '15px', 
          borderRadius: '5px' 
        }}>
          <h3>Symptom History</h3>
          {symptomHistory.slice(-5).map((entry, index) => (
            <div key={index} style={{ 
              backgroundColor: 'white', 
              margin: '5px 0', 
              padding: '10px', 
              borderRadius: '5px' 
            }}>
              <p>📅 {entry.date}</p>
              <p>😊 Mood: {entry.mood}</p>
              <p>🩺 Symptoms: {entry.physicalSymptoms.join(', ') || 'None'}</p>
              {entry.notes && <p>📝 Notes: {entry.notes}</p>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<PeriodCalculator />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>Comprehensive Period Tracker</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "content-type": "text/html" }
  });
}</article></body></html>

Ravikumarraj