/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { marked } from "https://esm.sh/marked@4.3.0"; function App() { const [sport, setSport] = useState(""); const [skillLevel, setSkillLevel] = useState(""); const [ageGroup, setAgeGroup] = useState(""); const [selectedTopics, setSelectedTopics] = useState([]); const [groupSize, setGroupSize] = useState(""); const [trainingPlan, setTrainingPlan] = useState(""); const [loading, setLoading] = useState(false); const [showSpinner, setShowSpinner] = useState(false); const [sharing, setSharing] = useState(false); useEffect(() => { let timer; if (loading) { timer = setTimeout(() => setShowSpinner(true), 2000); } else { setShowSpinner(false); } return () => clearTimeout(timer); }, [loading]); const generateTrainingPlan = async () => { setLoading(true); const response = await fetch("/generate-training", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sport, skillLevel, ageGroup, groupSize, selectedTopics }), }); const data = await response.json(); setTrainingPlan(data.trainingPlan); setLoading(false); }; const handleSubmit = async (e) => { e.preventDefault(); await generateTrainingPlan(); }; const handleRegenerate = async () => { await generateTrainingPlan(); }; const handleShare = async () => { setSharing(true); try { await fetch("/share-training", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ trainingPlan }), }); alert("Training plan shared successfully!"); } catch (error) { alert("Failed to share training plan. Please try again."); } setSharing(false); }; const sportTopics = { "Tennis": [ "Forehand", "Backhand", "Serve", "Volley", "Footwork", "Net play", "Lob", "Slice", "Drop shot", "Return of serve" ], "Basketball": [ "Dribbling", "Shooting", "Passing", "Layups", "Rebounding", "Defense", "Pick and roll", "Free throws", "Post moves", "Fast break" ], "Soccer": [ "Dribbling", "Passing", "Shooting", "Ball control", "Heading", "Tackling", "Goalkeeping", "Set pieces", "Positioning", "First touch" ], "Australian Rules Football": [ "Kicking", "Handball", "Marking", "Tackling", "Bouncing", "Ruck work", "Positioning", "Shepherding", "Spoiling", "Goal kicking" ], "Golf": [ "Driving", "Iron play", "Putting", "Chipping", "Pitching", "Bunker shots", "Course management", "Grip", "Stance", "Swing mechanics" ] }; const handleTopicSelection = (topic) => { if (selectedTopics.includes(topic)) { setSelectedTopics(selectedTopics.filter(t => t !== topic)); } else if (selectedTopics.length < 3) { setSelectedTopics([...selectedTopics, topic]); } }; return (

Coach Companion

Sport Training Planner

{showSpinner &&

} {!showSpinner && ( <> {!sport ? ( ) : !trainingPlan ? (

Select 3 topics for {sport}:

{sportTopics[sport].map(topic => ( ))}

Selected topics: {selectedTopics.length}/3

{selectedTopics.length === 3 && ( )}

) : (

Training Plan

)} )}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } const css = ` @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap'); :root { --primary-color: #3a86ff; --secondary-color: #8338ec; --background-color: #f8f9fa; --text-color: #333; --border-color: #dee2e6; } body { font-family: 'Inter', sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: var(--background-color); color: var(--text-color); } .container { max-width: 800px; margin: 0 auto; background-color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } header { text-align: center; margin-bottom: 40px; } h1 { font-size: 2.5em; color: var(--primary-color); margin-bottom: 10px; } h2 { font-size: 1.5em; color: var(--secondary-color); font-weight: 400; } form { display: flex; flex-direction: column; gap: 20px; } select, input, button { padding: 12px 16px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 8px; font-family: 'Inter', sans-serif; transition: all 0.3s ease; } select:focus, input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(58, 134, 255, 0.2); } button { background-color: var(--primary-color); color: #fff; cursor: pointer; font-weight: 600; border: none; } button:hover { background-color: var(--secondary-color); transform: translateY(-2px); } button:disabled { background-color: var(--border-color); cursor: not-allowed; transform: none; } .planner-section { background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .topic-grid button { padding: 10px; background-color: #f1f3f5; border: 2px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.3s; color: var(--text-color); font-weight: 400; } .topic-grid button.selected { background-color: var(--primary-color); color: white; font-weight: 600; } .training-plan { background-color: #fff; border-radius: 12px; padding: 30px; margin-top: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } .training-plan-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .training-plan h2 { color: var(--primary-color); margin: 0; } .training-plan h3 { color: var(--secondary-color); margin-top: 25px; } .training-plan ul, .training-plan ol { padding-left: 20px; } .training-plan li { margin-bottom: 10px; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 30px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; } .regenerate-button, .email-button { padding: 10px 20px; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; } .regenerate-button { background-color: var(--secondary-color); color: #fff; } .regenerate-button:hover { background-color: #7028d7; } .email-button { display: block; width: 100%; margin-top: 30px; background-color: var(--primary-color); } .email-button:hover { background-color: #2a75e6; } .spinner { width: 50px; height: 50px; border: 5px solid var(--border-color); border-top: 5px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 600px) { .container { padding: 20px; } .topic-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .training-plan-header { flex-direction: column; align-items: flex-start; } .regenerate-button { margin-top: 10px; } } `; async function server(request: Request): Promise { // ... (server code remains the same) } async function getYouTubeVideoId(query, sport, apiKey) { // ... (getYouTubeVideoId function remains the same) } export default { server, client };

Coachcompanionv2

Version 54