Hugging Face's logo

Spaces:
Nefa002
/
cosmic-explorer
Running

App Files Community
cosmic-explorer
File size: 4,028 Bytes
76f212c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
document.addEventListener('DOMContentLoaded', () => {
  // Create stars for background effect
  createStars();
  
  // Set up button event listeners
  document.getElementById('apodBtn').addEventListener('click', loadAPOD);
  document.getElementById('marsBtn').addEventListener('click', loadMarsPhotos);
  
  // Load default content (APOD)
  loadAPOD();
});

function createStars() {
  const starsContainer = document.createElement('div');
  starsContainer.className = 'stars';
  
  for (let i = 0; i < 150; i++) {
    const star = document.createElement('div');
    star.className = 'star';
    star.style.left = `${Math.random() * 100}%`;
    star.style.top = `${Math.random() * 100}%`;
    star.style.width = `${Math.random() * 3}px`;
    star.style.height = star.style.width;
    star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`);
    star.style.animationDelay = `${Math.random() * 5}s`;
    starsContainer.appendChild(star);
  }
  
  document.body.appendChild(starsContainer);
}

async function loadAPOD() {
  showLoading();
  const contentSection = document.getElementById('content-section');
  
  try {
    const response = await fetch('https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&count=6');
    const data = await response.json();
    
    contentSection.innerHTML = '';
    
    data.forEach(item => {
      const card = createCard(
        item.title,
        item.explanation,
        item.url,
        item.date,
        'Astronomy',
        item.media_type === 'video' ? 'Video' : 'Image'
      );
      contentSection.appendChild(card);
    });
  } catch (error) {
    console.error('Error fetching APOD:', error);
    contentSection.innerHTML = '<p class="text-center text-red-400 col-span-full">Failed to load cosmic images. Please try again later.</p>';
  } finally {
    hideLoading();
  }
}

async function loadMarsPhotos() {
  showLoading();
  const contentSection = document.getElementById('content-section');
  
  try {
    const response = await fetch('https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY');
    const data = await response.json();
    
    contentSection.innerHTML = '';
    
    data.photos.slice(0, 6).forEach(photo => {
      const card = createCard(
        photo.camera.full_name,
        `Taken by ${photo.rover.name} rover on Martian sol ${photo.sol}`,
        photo.img_src,
        new Date(photo.earth_date).toLocaleDateString(),
        'Mars',
        'Photo'
      );
      contentSection.appendChild(card);
    });
  } catch (error) {
    console.error('Error fetching Mars photos:', error);
    contentSection.innerHTML = '<p class="text-center text-red-400 col-span-full">Failed to load Mars photos. Please try again later.</p>';
  } finally {
    hideLoading();
  }
}

function createCard(title, description, imageUrl, date, category, type) {
  const card = document.createElement('div');
  card.className = 'card';
  
  card.innerHTML = `
    <div class="relative">
      <img src="${imageUrl}" alt="${title}" class="card-img" loading="lazy">
      <div class="absolute top-2 right-2">
        <span class="pill-badge bg-purple-600">${type}</span>
      </div>
    </div>
    <div class="p-5">
      <div class="flex justify-between items-start mb-3">
        <h3 class="text-xl font-bold">${title}</h3>
        <span class="pill-badge bg-pink-600">${category}</span>
      </div>
      <p class="text-gray-300 text-sm mb-4 line-clamp-3">${description}</p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-400">${date}</span>
        <button class="text-sm text-purple-400 hover:text-purple-300 flex items-center">
          View Details <i data-feather="arrow-right" class="ml-1 w-4 h-4"></i>
        </button>
      </div>
    </div>
  `;
  
  return card;
}

function showLoading() {
  document.getElementById('loading').classList.remove('hidden');
}

function hideLoading() {
  document.getElementById('loading').classList.add('hidden');
  feather.replace();
}