Update index.html

added unique url for each card + thumbnail option

index.html

@@ -283,15 +283,44 @@
     `
 };
 
-        // Create cards using the cardContents
+        // Add this function before the card creation loop
+        function getCardLink(day) {
+            const url = new URL(window.location.href);
+            url.searchParams.set('day', day);
+            return url.toString();
+        }
+
+        // Add this object before the card creation loop to define custom text labels
+        const cardLabels = {
+            1: "🔮<br>Clem's2025 predictions",
+            2: "❤️<br>Most liked & downloaded models",
+            // Add more custom labels as needed
+            // 3: "Custom Text",
+            // 4: "Another Label",
+        };
+
+        // Modify the card creation loop
         for (let i = 1; i <= 24; i++) {
             const card = document.createElement('div');
             card.className = 'card';
             card.dataset.day = i;
+            card.dataset.link = getCardLink(i);
+
+            // Define a condition to use a thumbnail for specific cards
+            const useThumbnail = [].includes(i);
+            
+            // Get custom label if it exists, otherwise use the number
+            const cardContent = useThumbnail 
+                ? `<img src="images/${i}.png" style="width: 75%; height: 75%; object-fit: cover; border-radius: 12px;">`
+                : `<div style="text-align: center; margin: 0 20%;">${cardLabels[i] || i}</div>`;
+
             card.innerHTML = `
-                ${i}
+                ${cardContent}
                 <div class="card-content">
                     ${cardContents[i]}
+                    <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;">
+                        <p style="font-size: 0.8em;">🔗 Share this card: <a href="${getCardLink(i)}" onclick="event.stopPropagation();">${getCardLink(i)}</a></p>
+                    </div>
                 </div>
             `;
             calendar.appendChild(card);
@@ -338,6 +367,19 @@
                 iframe.msRequestFullscreen();
             }
         }
+
+        // Add this code after your existing event listeners
+        // Handle direct links to cards
+        window.addEventListener('load', () => {
+            const params = new URLSearchParams(window.location.search);
+            const day = params.get('day');
+            if (day) {
+                const card = document.querySelector(`[data-day="${day}"]`);
+                if (card) {
+                    card.click(); // Automatically open the modal for the linked card
+                }
+            }
+        });
     </script>
 </body>
 </html>