Update index.html

index.html

@@ -184,13 +184,18 @@
             </ul>
     `,
     2: `
-        <h2>Day 2</h2>
-        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
-        <img src="/images/day2-teaser.png" style="width: 100%; margin: 20px 0;">
+        <h2>Most liked and downloaded models, from 2022 to today</h2>
+        <p>Explore the community's favourite models, ranging from tasks, likes to downloads, since 2022. What we're seeing: smol models are on the rise.📈👀</p>
+        <p><em style="font-size: 0.8em;">💡Tip: Click the small square icon in the top right corner to access full screen view!</em></p>
+        <div class="responsive-iframe-container">
+            <button onclick="toggleFullscreen(this.nextElementSibling)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
+            <iframe src="https://aiworld.eu/embed/model/model/treemap" allowfullscreen></iframe>
+        </div>
     `,
     3: `
         <h2>Day 3</h2>
-        <p>Like the space to be notified when we release the next data 🤗</p>
+        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
+        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
     `,
     4: `
         <h2>Day 4</h2>
@@ -292,26 +297,9 @@
             calendar.appendChild(card);
         }
 
-        // // Handle card clicks
-        // const cards = document.querySelectorAll('.card');
-        // const currentDate = new Date();
-        // const currentDay = currentDate.getDate();
-        // const isDecember = currentDate.getMonth() === 11;
-
-        // cards.forEach(card => {
-        //     const day = parseInt(card.dataset.day);
-        //     card.classList.add('active');
-            
-        //     card.addEventListener('click', () => {
-        //         card.classList.add('opened');
-        //         modalContent.innerHTML = card.querySelector('.card-content').innerHTML;
-        //         modal.style.display = 'flex';
-        //     });
-        // });
-
         // Handle card clicks
         const cards = document.querySelectorAll('.card');
-        const activeDays = [1]; // Add the day numbers you want to highlight
+        const activeDays = [1,2]; // Add the day numbers you want to highlight
 
         cards.forEach(card => {
             const day = parseInt(card.dataset.day);
@@ -339,6 +327,17 @@
                 modal.style.display = 'none';
             }
         });
+
+        // Add fullscreen function
+        function toggleFullscreen(iframe) {
+            if (iframe.requestFullscreen) {
+                iframe.requestFullscreen();
+            } else if (iframe.webkitRequestFullscreen) { /* Safari */
+                iframe.webkitRequestFullscreen();
+            } else if (iframe.msRequestFullscreen) { /* IE11 */
+                iframe.msRequestFullscreen();
+            }
+        }
     </script>
 </body>
 </html>