Spaces:
Running
Running
| <html lang="en" data-bs-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Daily Horoscopes - AI-Powered Astrology</title> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <link href="/static/css/custom.css" rel="stylesheet"> | |
| <!-- Feather Icons --> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| <i data-feather="star"></i> Cosmic Guide | |
| </a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav ms-auto"> | |
| <li class="nav-item"> | |
| <a class="nav-link active" href="/">Horoscopes</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="/mt564">MT564 Training</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="/docs">API Docs</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#about">About</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="container"> | |
| <div class="p-5 mb-4 bg-dark rounded-3"> | |
| <div class="container-fluid py-5"> | |
| <h1 class="display-5 fw-bold">AI-Powered Daily Horoscopes</h1> | |
| <p class="col-md-8 fs-4">Discover what the stars have in store for you with our AI-enhanced horoscope readings, consolidated from multiple trusted astrological sources.</p> | |
| <button class="btn btn-primary btn-lg" id="get-horoscope-btn">Get Your Horoscope</button> | |
| </div> | |
| </div> | |
| <div class="row align-items-md-stretch mb-4"> | |
| <div class="col-md-6 mb-4"> | |
| <div class="h-100 p-5 bg-dark border rounded-3"> | |
| <h2><i data-feather="star"></i> Daily Horoscopes</h2> | |
| <div class="zodiac-grid"> | |
| <div class="zodiac-sign" data-sign="aries"> | |
| <div class="zodiac-icon">♈</div> | |
| <div>Aries<br><small>Mar 21 - Apr 19</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="taurus"> | |
| <div class="zodiac-icon">♉</div> | |
| <div>Taurus<br><small>Apr 20 - May 20</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="gemini"> | |
| <div class="zodiac-icon">♊</div> | |
| <div>Gemini<br><small>May 21 - Jun 20</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="cancer"> | |
| <div class="zodiac-icon">♋</div> | |
| <div>Cancer<br><small>Jun 21 - Jul 22</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="leo"> | |
| <div class="zodiac-icon">♌</div> | |
| <div>Leo<br><small>Jul 23 - Aug 22</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="virgo"> | |
| <div class="zodiac-icon">♍</div> | |
| <div>Virgo<br><small>Aug 23 - Sep 22</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="libra"> | |
| <div class="zodiac-icon">♎</div> | |
| <div>Libra<br><small>Sep 23 - Oct 22</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="scorpio"> | |
| <div class="zodiac-icon">♏</div> | |
| <div>Scorpio<br><small>Oct 23 - Nov 21</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="sagittarius"> | |
| <div class="zodiac-icon">♐</div> | |
| <div>Sagittarius<br><small>Nov 22 - Dec 21</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="capricorn"> | |
| <div class="zodiac-icon">♑</div> | |
| <div>Capricorn<br><small>Dec 22 - Jan 19</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="aquarius"> | |
| <div class="zodiac-icon">♒</div> | |
| <div>Aquarius<br><small>Jan 20 - Feb 18</small></div> | |
| </div> | |
| <div class="zodiac-sign" data-sign="pisces"> | |
| <div class="zodiac-icon">♓</div> | |
| <div>Pisces<br><small>Feb 19 - Mar 20</small></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6 mb-4"> | |
| <div class="h-100 p-5 bg-dark border rounded-3"> | |
| <h2><i data-feather="info"></i> How It Works</h2> | |
| <p>Our AI-powered system scrapes multiple trusted astrological sources daily and uses advanced language models to consolidate the predictions.</p> | |
| <ul class="list-group list-group-flush bg-transparent"> | |
| <li class="list-group-item bg-dark"><i data-feather="check" class="feature-icon"></i> Scrapes multiple astrological websites</li> | |
| <li class="list-group-item bg-dark"><i data-feather="check" class="feature-icon"></i> Uses AI to consolidate predictions</li> | |
| <li class="list-group-item bg-dark"><i data-feather="check" class="feature-icon"></i> Updates daily for fresh insights</li> | |
| <li class="list-group-item bg-dark"><i data-feather="check" class="feature-icon"></i> Exports to WordPress for easy publishing</li> | |
| <li class="list-group-item bg-dark"><i data-feather="check" class="feature-icon"></i> Accessible via API for developers</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mt-4"> | |
| <div class="col-12"> | |
| <div class="card bg-dark"> | |
| <div class="card-header"> | |
| <h3 id="reading-header"><i data-feather="sun"></i> Your Daily Horoscope</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div id="horoscope-placeholder" class="text-center py-5"> | |
| <p>Select your zodiac sign above to view your horoscope</p> | |
| </div> | |
| <div id="horoscope-content" class="d-none"> | |
| <div class="d-flex align-items-center mb-4"> | |
| <div class="display-1 me-3" id="sign-icon"></div> | |
| <div> | |
| <h2 id="sign-name" class="mb-0"></h2> | |
| <p id="reading-date" class="text-muted"></p> | |
| </div> | |
| </div> | |
| <div class="spinner-border text-light mb-4 d-none" id="spinner" role="status"> | |
| <span class="visually-hidden">Loading...</span> | |
| </div> | |
| <div id="horoscope-text" class="mb-4 fs-5"></div> | |
| <div id="horoscope-source" class="text-muted small"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mt-4"> | |
| <div class="col-12"> | |
| <div class="card bg-dark"> | |
| <div class="card-header"> | |
| <h3 id="about"><i data-feather="help-circle"></i> About Cosmic Guide</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p>Cosmic Guide is an AI-powered horoscope consolidation service that brings together multiple astrological sources to provide you with the most comprehensive daily readings.</p> | |
| <p>Our system uses advanced web scraping techniques to collect data from trusted astrological websites, and then employs state-of-the-art language models to analyze and consolidate the information into a coherent reading.</p> | |
| <p>Whether you're a casual horoscope reader or a dedicated astrology enthusiast, Cosmic Guide offers insightful predictions that can help guide your day.</p> | |
| <h4 class="mt-4">API Access</h4> | |
| <p>Developers can access our horoscope data through our API. Check out the <a href="/docs">API documentation</a> for more details.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="footer mt-5 py-3 bg-dark"> | |
| <div class="container text-center"> | |
| <span class="text-muted">Cosmic Guide - AI-Powered Horoscopes © 2025</span> | |
| </div> | |
| </footer> | |
| <!-- Bootstrap JS Bundle --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Custom JS --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize Feather icons | |
| feather.replace(); | |
| // Get horoscope button | |
| const getHoroscopeBtn = document.getElementById('get-horoscope-btn'); | |
| getHoroscopeBtn.addEventListener('click', function() { | |
| // Scroll to zodiac signs | |
| document.querySelector('.zodiac-grid').scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| // Zodiac sign icons | |
| const zodiacIcons = { | |
| aries: '♈', | |
| taurus: '♉', | |
| gemini: '♊', | |
| cancer: '♋', | |
| leo: '♌', | |
| virgo: '♍', | |
| libra: '♎', | |
| scorpio: '♏', | |
| sagittarius: '♐', | |
| capricorn: '♑', | |
| aquarius: '♒', | |
| pisces: '♓' | |
| }; | |
| // Zodiac sign elements | |
| const zodiacSigns = document.querySelectorAll('.zodiac-sign'); | |
| zodiacSigns.forEach(sign => { | |
| sign.addEventListener('click', function() { | |
| const signName = this.getAttribute('data-sign'); | |
| getHoroscope(signName); | |
| // Remove active class from all signs | |
| zodiacSigns.forEach(s => s.classList.remove('active')); | |
| // Add active class to clicked sign | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Function to get horoscope | |
| function getHoroscope(sign) { | |
| // Show spinner | |
| const spinner = document.getElementById('spinner'); | |
| spinner.classList.remove('d-none'); | |
| // Show horoscope content, hide placeholder | |
| document.getElementById('horoscope-placeholder').classList.add('d-none'); | |
| document.getElementById('horoscope-content').classList.remove('d-none'); | |
| // Update sign info | |
| document.getElementById('sign-icon').textContent = zodiacIcons[sign]; | |
| document.getElementById('sign-name').textContent = sign.charAt(0).toUpperCase() + sign.slice(1); | |
| const today = new Date(); | |
| document.getElementById('reading-date').textContent = today.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); | |
| // Clear previous horoscope text | |
| document.getElementById('horoscope-text').textContent = ''; | |
| document.getElementById('horoscope-source').textContent = ''; | |
| // Fetch horoscope from API | |
| fetch(`/api/horoscope/get/${sign}`) | |
| .then(response => response.json()) | |
| .then(data => { | |
| spinner.classList.add('d-none'); | |
| if (data.error) { | |
| document.getElementById('horoscope-text').innerHTML = `<div class="alert alert-warning">No horoscope found for ${sign}. Please try again later.</div>`; | |
| return; | |
| } | |
| // If consolidated horoscope is available | |
| if (data.consolidated_prediction) { | |
| document.getElementById('horoscope-text').textContent = data.consolidated_prediction; | |
| document.getElementById('horoscope-source').textContent = `Sources: ${data.sources}`; | |
| } | |
| // If only single horoscope is available | |
| else if (data.prediction) { | |
| document.getElementById('horoscope-text').textContent = data.prediction; | |
| document.getElementById('horoscope-source').textContent = `Source: ${data.source}`; | |
| } | |
| // If multiple horoscopes are available | |
| else if (data.horoscopes && Array.isArray(data.horoscopes)) { | |
| // Use the first one | |
| const firstHoroscope = data.horoscopes[0]; | |
| document.getElementById('horoscope-text').textContent = firstHoroscope.prediction; | |
| document.getElementById('horoscope-source').textContent = `Source: ${firstHoroscope.source}`; | |
| } | |
| }) | |
| .catch(error => { | |
| spinner.classList.add('d-none'); | |
| document.getElementById('horoscope-text').innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`; | |
| }); | |
| // Scroll to the reading | |
| document.getElementById('reading-header').scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| }); | |
| </script> | |
| <style> | |
| .zodiac-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1rem; | |
| } | |
| .zodiac-sign { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .zodiac-sign:hover { | |
| background-color: #343a40; | |
| } | |
| .zodiac-sign.active { | |
| background-color: #17a2b8; | |
| color: white; | |
| } | |
| .zodiac-icon { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .feature-icon { | |
| width: 1rem; | |
| height: 1rem; | |
| margin-right: 0.5rem; | |
| color: #17a2b8; | |
| } | |
| #sign-icon { | |
| font-size: 4rem; | |
| } | |
| @media (max-width: 768px) { | |
| .zodiac-grid { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .zodiac-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| </style> | |
| </body> | |
| </html> | |