diff --git a/eco_project/backend/static/index.html b/eco_project/backend/static/index.html index 229b2f6..ca8aaee 100644 --- a/eco_project/backend/static/index.html +++ b/eco_project/backend/static/index.html @@ -57,6 +57,7 @@

Community

  • Forest Seeds Promotion
  • Join the Chat
  • Watch Sports
    • +
  • Listen to Podcasts
  • Air Quality
  • UNEP Data
    • diff --git a/eco_project/backend/static/podcast.css b/eco_project/backend/static/podcast.css new file mode 100644 index 0000000..ceed98d --- /dev/null +++ b/eco_project/backend/static/podcast.css @@ -0,0 +1,60 @@ +#podcast-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + margin-top: 20px; +} + +.podcast-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 15px; + background-color: #f9f9f9; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + transition: transform 0.2s; +} + +.podcast-card:hover { + transform: translateY(-5px); + box-shadow: 0 4px 8px rgba(0,0,0,0.1); +} + +.podcast-card img { + max-width: 100%; + border-radius: 4px; + margin-bottom: 10px; +} + +.podcast-card h3 { + margin: 10px 0 5px 0; + font-size: 1.2em; +} + +.podcast-card p { + margin: 5px 0; + color: #666; +} + +.podcast-card a { + display: inline-block; + margin-top: 10px; + padding: 8px 16px; + background-color: #2e7d32; + color: white; + text-decoration: none; + border-radius: 4px; +} + +.podcast-card a:hover { + background-color: #1b5e20; +} + +.back-link { + display: inline-block; + margin-top: 20px; + text-decoration: none; + color: #2e7d32; +} diff --git a/eco_project/backend/static/podcast.html b/eco_project/backend/static/podcast.html new file mode 100644 index 0000000..26b8926 --- /dev/null +++ b/eco_project/backend/static/podcast.html @@ -0,0 +1,32 @@ + + + + + + Environmental Podcasts - Environment Protection + + + + +
    +

    Environmental Podcasts

    + +
    +
    +
    +

    Listen to Podcasts

    +
    + +

    Loading podcasts...

    +
    +
    + Back to Home +
    + + + + diff --git a/eco_project/backend/static/podcast.js b/eco_project/backend/static/podcast.js new file mode 100644 index 0000000..e2af0d0 --- /dev/null +++ b/eco_project/backend/static/podcast.js @@ -0,0 +1,63 @@ +document.addEventListener('DOMContentLoaded', () => { + const podcastContainer = document.getElementById('podcast-container'); + + // iTunes Search API for environmental podcasts + const apiUrl = 'https://itunes.apple.com/search?term=environment&entity=podcast&limit=15'; + + fetch(apiUrl) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + podcastContainer.innerHTML = ''; // Clear loading message + + if (!data.results || data.results.length === 0) { + podcastContainer.innerHTML = '

    No podcasts found.

    '; + return; + } + + data.results.forEach(podcast => { + const podcastCard = document.createElement('div'); + podcastCard.classList.add('podcast-card'); + + const img = document.createElement('img'); + img.src = podcast.artworkUrl600 || podcast.artworkUrl100; + img.alt = podcast.collectionName; + + const h3 = document.createElement('h3'); + h3.textContent = podcast.collectionName; + + const artistP = document.createElement('p'); + artistP.innerHTML = `Artist: `; + const artistSpan = document.createElement('span'); + artistSpan.textContent = podcast.artistName; + artistP.appendChild(artistSpan); + + const genreP = document.createElement('p'); + genreP.innerHTML = `Genre: `; + const genreSpan = document.createElement('span'); + genreSpan.textContent = podcast.primaryGenreName; + genreP.appendChild(genreSpan); + + const link = document.createElement('a'); + link.href = podcast.collectionViewUrl; + link.target = "_blank"; + link.textContent = "View on Apple Podcasts"; + + podcastCard.appendChild(img); + podcastCard.appendChild(h3); + podcastCard.appendChild(artistP); + podcastCard.appendChild(genreP); + podcastCard.appendChild(link); + + podcastContainer.appendChild(podcastCard); + }); + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + podcastContainer.innerHTML = '

    Could not fetch podcast data. Please try again later.

    '; + }); +});