Spaces:
Running
Running
Build me a Gradio app called 'Fishing Predictor' that lets users choose a lake, a fish species, and a fishing method from dropdowns. It should also allow users to enter their ZIP code and the date they plan to fish. The app should pull weather data from the OpenWeatherMap API and calculate a fishing score from 0 to 100 based on wind speed, temperature, moon phase, and pressure. Then, based on the lake, fish species, and fishing method, it should recommend the best bait or lure to use. Display a final message like: 'Fishing for bass at Truman Lake from a boat? Try a crankbait. Score: 87 – great day to fish!'"
d1629c9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ReelCast Predictor - Smart Fishing Forecast</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <style> | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .score-gauge { | |
| background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #22c55e 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-b from-blue-50 to-blue-100 min-h-screen"> | |
| <div id="waves-bg" class="absolute w-full h-full top-0 left-0"></div> | |
| <div class="relative max-w-4xl mx-auto px-4 py-12"> | |
| <header class="text-center mb-12 fade-in"> | |
| <div class="inline-flex items-center justify-center bg-white/80 backdrop-blur-sm rounded-full px-6 py-3 shadow-sm mb-4"> | |
| <i data-feather="sun" class="text-yellow-500 mr-2"></i> | |
| <h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-blue-600 to-teal-500 bg-clip-text text-transparent">ReelCast Predictor</h1> | |
| <i data-feather="cloud-rain" class="text-blue-500 ml-2"></i> | |
| </div> | |
| <p class="text-lg text-blue-800/80 max-w-2xl mx-auto">Predict the perfect fishing day with weather intelligence and expert bait recommendations</p> | |
| </header> | |
| <main class="bg-white/80 backdrop-blur-sm rounded-xl shadow-xl overflow-hidden fade-in"> | |
| <div class="p-6 md:p-8"> | |
| <form id="fishingForm" class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="lake" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> | |
| <i data-feather="map" class="w-4 h-4 mr-2"></i> Lake | |
| </label> | |
| <select id="lake" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4 border"> | |
| <option value="">Select a lake</option> | |
| <option value="truman">Truman Lake</option> | |
| <option value="ozarks">Lake of the Ozarks</option> | |
| <option value="tableRock">Table Rock Lake</option> | |
| <option value="taneycomo">Lake Taneycomo</option> | |
| <option value="pomme">Pomme de Terre Lake</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="fish" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> | |
| <i data-feather="fish" class="w-4 h-4 mr-2"></i> Target Species | |
| </label> | |
| <select id="fish" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4 border"> | |
| <option value="">Select fish</option> | |
| <option value="bass">Largemouth Bass</option> | |
| <option value="smallmouth">Smallmouth Bass</option> | |
| <option value="crappie">Crappie</option> | |
| <option value="catfish">Catfish</option> | |
| <option value="walleye">Walleye</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="method" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> | |
| <i data-feather="anchor" class="w-4 h-4 mr-2"></i> Fishing Method | |
| </label> | |
| <select id="method" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4 border"> | |
| <option value="">Select method</option> | |
| <option value="boat">From Boat</option> | |
| <option value="shore">From Shore</option> | |
| <option value="kayak">Kayak Fishing</option> | |
| <option value="fly">Fly Fishing</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="zip" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> | |
| <i data-feather="map-pin" class="w-4 h-4 mr-2"></i> ZIP Code | |
| </label> | |
| <input type="text" id="zip" placeholder="Enter ZIP code" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4 border"> | |
| </div> | |
| <div> | |
| <label for="date" class="block text-sm font-medium text-gray-700 mb-1 flex items-center"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2"></i> Fishing Date | |
| </label> | |
| <input type="date" id="date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-3 px-4 border"> | |
| </div> | |
| </div> | |
| <div class="md:col-span-2 pt-4"> | |
| <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-teal-500 hover:from-blue-700 hover:to-teal-600 text-white font-bold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5 mr-2"></i> Calculate Fishing Prediction | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="results" class="hidden bg-blue-50/50 border-t border-blue-100 p-6 md:p-8"> | |
| <div class="max-w-3xl mx-auto space-y-6"> | |
| <h2 class="text-2xl font-bold text-blue-900 flex items-center"> | |
| <i data-feather="compass" class="w-6 h-6 mr-2 text-blue-600"></i> | |
| <span>Your Fishing Forecast</span> | |
| </h2> | |
| <div class="bg-white rounded-lg shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div class="flex-1"> | |
| <h3 class="text-lg font-semibold text-gray-800" id="resultHeader">Loading...</h3> | |
| <p class="text-gray-600 mt-1" id="resultSubtext">Analyzing conditions...</p> | |
| </div> | |
| <div class="flex items-center justify-center md:justify-end"> | |
| <div class="relative"> | |
| <div class="h-24 w-24 rounded-full flex items-center justify-center border-8 border-blue-100"> | |
| <span class="text-3xl font-bold text-blue-800" id="scoreValue">0</span> | |
| </div> | |
| <div class="absolute inset-x-0 bottom-0 text-center"> | |
| <span class="text-xs font-semibold text-blue-800">FISH SCORE</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Fishing Conditions</span> | |
| <span class="text-xs font-medium text-blue-600" id="conditionsText">Calculating...</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="score-gauge h-2.5 rounded-full" id="scoreGauge"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-300"> | |
| <div class="flex items-center mb-2"> | |
| <i data-feather="wind" class="w-5 h-5 text-blue-500 mr-2"></i> | |
| <h4 class="text-sm font-medium text-gray-700">Wind</h4> | |
| </div> | |
| <p class="text-gray-500 text-sm" id="windData">-- mph</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-300"> | |
| <div class="flex items-center mb-2"> | |
| <i data-feather="thermometer" class="w-5 h-5 text-red-500 mr-2"></i> | |
| <h4 class="text-sm font-medium text-gray-700">Temperature</h4> | |
| </div> | |
| <p class="text-gray-500 text-sm" id="tempData">-- °F</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4 card-hover transition-all duration-300"> | |
| <div class="flex items-center mb-2"> | |
| <i data-feather="moon" class="w-5 h-5 text-purple-500 mr-2"></i> | |
| <h4 class="text-sm font-medium text-gray-700">Moon Phase</h4> | |
| </div> | |
| <p class="text-gray-500 text-sm" id="moonData">--</p> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-r from-blue-50 to-teal-50 rounded-lg shadow-sm p-6 border border-blue-100 card-hover transition-all duration-300"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 rounded-full p-3 mr-4"> | |
| <i data-feather="alert-circle" class="w-6 h-6 text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-blue-800 mb-1" id="baitHeader">Bait Recommendation</h4> | |
| <p class="text-blue-700/90" id="baitText">Select options above to get personalized bait recommendations</p> | |
| <div class="mt-3" id="baitTips"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-12 text-center text-blue-800/60 text-sm fade-in"> | |
| <p>ReelCast Predictor uses real-time weather data to optimize your fishing success</p> | |
| <p class="mt-1">© <span id="year"></span> ReelCast - Made with <i data-feather="heart" class="w-4 h-4 inline text-red-400"></i> for anglers</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js waves background | |
| VANTA.WAVES({ | |
| el: "#waves-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6b9dff, | |
| shininess: 60.00, | |
| waveHeight: 15.00, | |
| waveSpeed: 0.75, | |
| zoom: 0.8 | |
| }); | |
| // Set current year in footer | |
| document.getElementById('year').textContent = new Date().getFullYear(); | |
| // Form submission handler | |
| document.getElementById('fishingForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Show loading state | |
| const results = document.getElementById('results'); | |
| results.classList.remove('hidden'); | |
| document.getElementById('resultHeader').textContent = "Analyzing conditions..."; | |
| document.getElementById('resultSubtext').textContent = "Please wait while we calculate your fishing forecast"; | |
| document.getElementById('scoreValue').textContent = "--"; | |
| // Get form values | |
| const lake = document.getElementById('lake').value; | |
| const fish = document.getElementById('fish').value; | |
| const method = document.getElementById('method').value; | |
| const zip = document.getElementById('zip').value; | |
| const date = document.getElementById('date').value; | |
| // Simulate API call delay | |
| setTimeout(() => { | |
| // Mock data - in a real app this would come from OpenWeatherMap API | |
| const mockWeatherData = { | |
| windSpeed: Math.floor(Math.random() * 15) + 5, // 5-20 mph | |
| temperature: Math.floor(Math.random() * 30) + 50, // 50-80°F | |
| pressure: Math.floor(Math.random() * 10) + 1000, // 1000-1010 hPa | |
| moonPhase: ['New Moon', 'Waxing Crescent', 'First Quarter', 'Waxing Gibbous', 'Full Moon', 'Waning Gibbous', 'Last Quarter', 'Waning Crescent'][Math.floor(Math.random() * 8)] | |
| }; | |
| // Calculate fishing score (0-100) | |
| let score = 50; // Base score | |
| // Adjust based on wind (best between 5-15 mph) | |
| if (mockWeatherData.windSpeed < 5) score -= 10; | |
| else if (mockWeatherData.windSpeed > 15) score -= 5; | |
| else score += 15; | |
| // Adjust based on temperature (best 60-75°F) | |
| if (mockWeatherData.temperature < 50) score -= 15; | |
| else if (mockWeatherData.temperature < 60) score -= 5; | |
| else if (mockWeatherData.temperature <= 75) score += 20; | |
| else if (mockWeatherData.temperature <= 85) score += 10; | |
| else score -= 10; | |
| // Adjust based on moon phase (best near full moon) | |
| if (mockWeatherData.moonPhase.includes('Full')) score += 15; | |
| else if (mockWeatherData.moonPhase.includes('Quarter')) score += 5; | |
| else if (mockWeatherData.moonPhase.includes('New')) score -= 10; | |
| // Ensure score is within 0-100 | |
| score = Math.max(0, Math.min(100, score)); | |
| // Determine conditions text | |
| let conditionsText = ''; | |
| if (score >= 80) conditionsText = 'Excellent'; | |
| else if (score >= 60) conditionsText = 'Good'; | |
| else if (score >= 40) conditionsText = 'Fair'; | |
| else conditionsText = 'Poor'; | |
| // Get lake name for display | |
| const lakeNames = { | |
| truman: "Truman Lake", | |
| ozarks: "Lake of the Ozarks", | |
| tableRock: "Table Rock Lake", | |
| taneycomo: "Lake Taneycomo", | |
| pomme: "Pomme de Terre Lake" | |
| }; | |
| // Get fish name for display | |
| const fishNames = { | |
| bass: "bass", | |
| smallmouth: "smallmouth bass", | |
| crappie: "crappie", | |
| catfish: "catfish", | |
| walleye: "walleye" | |
| }; | |
| // Get method for display | |
| const methodNames = { | |
| boat: "from a boat", | |
| shore: "from shore", | |
| kayak: "from a kayak", | |
| fly: "with fly gear" | |
| }; | |
| // Get bait recommendation | |
| const baitRecommendations = { | |
| bass: { | |
| boat: "Try a crankbait or spinnerbait around submerged structure", | |
| shore: "Use a Texas-rigged worm along weed lines", | |
| kayak: "Throw a jerkbait or topwater lure near points", | |
| fly: "Use a popper or streamer near cover" | |
| }, | |
| smallmouth: { | |
| boat: "Try a tube jig or drop shot around rocky areas", | |
| shore: "Use a ned rig or small crankbait", | |
| kayak: "Try a jerkbait along current breaks", | |
| fly: "Use a crayfish pattern or streamer" | |
| }, | |
| crappie: { | |
| boat: "Fish small jigs or minnows around brush piles", | |
| shore: "Use a slip bobber with minnow near docks", | |
| kayak: "Vertical jig with small plastics", | |
| fly: "Use small nymphs or wooly buggers" | |
| }, | |
| catfish: { | |
| boat: "Fish cut bait on the bottom in deeper holes", | |
| shore: "Use chicken liver or stink bait on the bottom", | |
| kayak: "Drift with cut bait or live bait", | |
| fly: "Use large streamers on sinking line" | |
| }, | |
| walleye: { | |
| boat: "Jig with minnows along drop-offs", | |
| shore: "Cast crankbaits at dawn/dusk", | |
| kayak: "Drift with live bait rigs", | |
| fly: "Use large streamers with sinking line" | |
| } | |
| }; | |
| // Update UI with results | |
| document.getElementById('resultHeader').textContent = `Fishing for ${fishNames[fish]} at ${lakeNames[lake]} ${methodNames[method]}?`; | |
| document.getElementById('resultSubtext').textContent = `Forecast for ${date || 'today'}`; | |
| document.getElementById('scoreValue').textContent = score; | |
| document.getElementById('conditionsText').textContent = conditionsText; | |
| document.getElementById('scoreGauge').style.width = `${score}%`; | |
| // Update weather data | |
| document.getElementById('windData').textContent = `${mockWeatherData.windSpeed} mph`; | |
| document.getElementById('tempData').textContent = `${mockWeatherData.temperature} °F`; | |
| document.getElementById('moonData').textContent = mockWeatherData.moonPhase; | |
| // Update bait recommendation | |
| document.getElementById('baitHeader').textContent = "Recommended Approach"; | |
| document.getElementById('baitText').textContent = baitRecommendations[fish][method]; | |
| // Add some tips based on conditions | |
| let tips = ''; | |
| if (mockWeatherData.windSpeed > 15) { | |
| tips += '<p class="text-sm text-blue-600 mt-2"><i data-feather="alert-triangle" class="w-4 h-4 inline mr-1"></i> Windy conditions - consider sheltered areas</p>'; | |
| } | |
| if (mockWeatherData.temperature > 80) { | |
| tips += '<p class="text-sm text-blue-600 mt-2"><i data-feather="sun" class="w-4 h-4 inline mr-1"></i> Hot weather - fish deeper or early/late</p>'; | |
| } | |
| if (mockWeatherData.moonPhase.includes('New')) { | |
| tips += '<p class="text-sm text-blue-600 mt-2"><i data-feather="moon" class="w-4 h-4 inline mr-1"></i> New moon - try brighter lures</p>'; | |
| } | |
| document.getElementById('baitTips').innerHTML = tips; | |
| // Replace feather icons | |
| feather.replace(); | |
| }, 1500); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |