|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>🤗 Open-source AI: year in review 2024</title> |
|
<style> |
|
body { |
|
font-family: system-ui, -apple-system, sans-serif; |
|
background: #f8f9fa; |
|
margin: 0; |
|
padding: 20px; |
|
min-height: 100vh; |
|
} |
|
|
|
h1 { |
|
color: #1a1a1a; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.intro { |
|
max-width: 800px; |
|
margin: 0 auto 40px; |
|
text-align: center; |
|
line-height: 1.6; |
|
color: #374151; |
|
} |
|
|
|
.calendar { |
|
display: grid; |
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
gap: 20px; |
|
max-width: 1200px; |
|
margin: 0 auto; |
|
padding: 20px; |
|
} |
|
|
|
.card { |
|
aspect-ratio: 1; |
|
background: #6B7280; |
|
border-radius: 12px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 24px; |
|
font-weight: bold; |
|
color: white; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.card.active { |
|
background: #FFD21E; |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.card.opened { |
|
background: #FF9D00; |
|
} |
|
|
|
.card-content { |
|
display: none; |
|
padding: 20px; |
|
text-align: center; |
|
} |
|
|
|
.modal { |
|
display: none; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: rgba(0, 0, 0, 0.8); |
|
z-index: 1000; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
|
|
.modal-content { |
|
background: white; |
|
padding: 40px; |
|
border-radius: 12px; |
|
max-width: 800px; |
|
width: 90%; |
|
max-height: 90vh; |
|
overflow-y: auto; |
|
position: relative; |
|
} |
|
|
|
.close-button { |
|
position: absolute; |
|
top: 20px; |
|
right: 20px; |
|
background: none; |
|
border: none; |
|
font-size: 24px; |
|
cursor: pointer; |
|
} |
|
.responsive-iframe-container { |
|
position: relative; |
|
width: 100%; |
|
height: 500px; |
|
transition: all 0.3s ease; |
|
} |
|
.responsive-iframe-container iframe { |
|
width: 100%; |
|
height: 100%; |
|
border: none; |
|
} |
|
.browser-fullscreen { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 100vw; |
|
height: 100vh; |
|
z-index: 9999; |
|
background: white; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="intro"> |
|
<h1>🤗 Open-source AI: year in review 2024</h1> |
|
<p>We're excited to share what's been happening in AI this year—with a twist! In collaboration with <a href="https://aiworld.eu" target="_blank">aiworld.eu</a>, starting December 2, we'll release fresh content daily to share insights on what happened in open-source AI in 2024. Like the space to be notified when we release the next data! <img src="logos/huggingface_logo-noborder.svg" width="20"> <img src="logos/aiworld.svg" width="20"></p> |
|
</div> |
|
|
|
<div class="calendar"> |
|
|
|
</div> |
|
|
|
<div class="modal"> |
|
<div class="modal-content"> |
|
<button class="close-button">×</button> |
|
<div class="modal-body"></div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
const calendar = document.querySelector('.calendar'); |
|
const modal = document.querySelector('.modal'); |
|
const modalContent = document.querySelector('.modal-body'); |
|
const closeButton = document.querySelector('.close-button'); |
|
|
|
// Add the cardContents object here |
|
const cardContents = { |
|
1: ` |
|
<h2>Day 1 - Six Predictions for AI in 2025 (and a review of how my 2024 predictions turned out)</h2> |
|
<div style="display: flex; align-items: center; margin-bottom: 20px;"> |
|
<img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1583857146757-5e67bdd61009063689407479.jpeg" style="width: 60px; height: 60px; border-radius: 50%; margin-right: 15px;"> |
|
<div> |
|
<strong><a href="https://huggingface.co/clem" style="color: inherit; text-decoration: underline;">Clément Delangue</a></strong><br> |
|
<em>Hugging Face CEO</em> |
|
</div> |
|
</div> |
|
<h3>Predictions for 2025</h3> |
|
<ol> |
|
<li>There will be the first major public protest related to AI</li> |
|
<li>A big company will see its market cap divided by two or more because of AI</li> |
|
<li>At least 100,000 personal AI robots will be pre-ordered</li> |
|
<li>China will start to lead the AI race (as a consequence of leading the open-source AI race)</li> |
|
<li>There will be big breakthroughs in AI for biology and chemistry</li> |
|
<li>We will begin to see the economic and employment growth potential of AI, with 15M AI builders on Hugging Face</li> |
|
</ol> |
|
|
|
<h3>2024 Predictions Review</h3> |
|
<ul> |
|
<li>A hyped AI company will go bankrupt or get acquired for a ridiculously low price<br> |
|
✅ (Inflexion, AdeptAI,...)</li> |
|
<li>Open-source LLMs will reach the level of the best closed-source LLMs<br> |
|
✅ with QwQ and dozens of others</li> |
|
<li>Big breakthroughs in AI for video, time-series, biology and chemistry<br> |
|
✅ for video 🔴for time-series, biology and chemistry</li> |
|
<li>We will talk much more about the cost (monetary and environmental) of AI<br> |
|
✅Monetary 🔴Environmental (😢)</li> |
|
<li>A popular media will be mostly AI-generated<br> |
|
✅ with NotebookLM by Google</li> |
|
<li>10 millions AI builders on Hugging Face leading to no increase of unemployment<br> |
|
🔜currently 7M of AI builders on Hugging Face</li> |
|
</ul> |
|
|
|
<p style="margin-top: 30px;"><i>Join the conversation about Clem's predictions for 2025:</i></p> |
|
<ul style="list-style-type: none; padding-left: 0;"> |
|
<li>✦ <a href="https://huggingface.co/posts/clem/703679306559358" style="color: inherit; text-decoration: underline;" target="_blank">Hugging Face</a></li> |
|
<li>✦ <a href="https://x.com/ClementDelangue/status/1863576648253091934" style="color: inherit; text-decoration: underline;" target="_blank">X</a></li> |
|
<li>✦ <a href="https://www.linkedin.com/in/clementdelangue/" style="color: inherit; text-decoration: underline;" target="_blank">LinkedIn</a></li> |
|
<li>✦ <a href="https://bsky.app/profile/clem.hf.co/post/3lcdceiv7vk2h" style="color: inherit; text-decoration: underline;" target="_blank">Bluesky</a></li> |
|
</ul> |
|
`, |
|
2: ` |
|
<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="toggleBrowserFullscreen(this.parentElement)" 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>Fast & Furious model releases</h2> |
|
<p>This race chart shows cumulative likes for models over the first 48 weeks of 2024, with Meta (US), Stability (UK) and Black Forest Labs (GER) leading the pack.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/author/racechart" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
4: ` |
|
<h2>Zero to One (Million Models)</h2> |
|
<p>This exponential growth chart tracks the Hugging Face community's journey from just a few thousand models in 2022 to surpassing the million-model milestone today.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/tag/stacked-model-count-other" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
5: ` |
|
<h2>The HF Network: What your likes say about you</h2> |
|
<p>Network connections between users’ favourite models.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/network-small" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
6: ` |
|
<h2>33 Months of Models, per Task</h2> |
|
<p>Over the last 33 months, more than 1.1M models have been created for 53 specialized tasks. Watch until the end to see which task reigns supreme. 👀 <em>(Hint: this task makes up nearly half the models on the Hub.)</em></p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/pipeline/racechart2" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
7: ` |
|
<h2>The global top 500 model creators on the Hub</h2> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/map_country_data" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
8: ` |
|
<h2>Average daily downloads for the top 100 trending models for Dec 9 2024</h2> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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-top-100-trending" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
9: ` |
|
<h2>NeurIPS Noel: Unwrapping the Keywords of AI's Holiday Spirit</h2> |
|
<p>Analyzing keywords from 4,495 papers accepted at NeurIPS 2024 and how the top 40 words co-occur within the same papers.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/keywords-neurips" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
10: ` |
|
<h2>The Great AI Bake-Off: Which Field is Rising?</h2> |
|
<p>This stacked chart shows the evolution of the number of research papers on Hugging Face</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/api/paper/hf_papers_stacked" allowfullscreen></iframe> |
|
</div> |
|
|
|
`, |
|
11: ` |
|
<h2>Paper Trail: Top upvoted papers on the Hub</h2> |
|
<p>This table presents the 20 most upvoted papers on HF in 2024 that are also presented at NeurIPS this year. The yellow labels identify the top three!</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/api/paper/top-20-hf-papers-at-neurips" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
12: ` |
|
<h2>China & US dominating AI research</h2> |
|
<p>This year's NeurIPS papers mapped to interesting domains with author affiliations grouped into US, Chinese, European and the rest of the world</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/sankey" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
13: ` |
|
<h2>The NeurIPS Class of 2024: Leading Research Institutions</h2> |
|
<p>Explore which institutions are leading AI research through their contributions to NeurIPS 2024, by region</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/top_100_orgs_spotlight_oral" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
14: ` |
|
<h2>Machine Vision's Reign: Top Research Topics at NeurIPS 2022-2024</h2> |
|
<p>Explore how research priorities have evolved at NeurIPS, with rankings of top categories by number of papers for each year.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/ranking_of_primary_areas" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
15: ` |
|
<h2>The Economic Case for Open-Source AI</h2> |
|
<p>Leading economists highlight key aspects of open-source AI, from innovation drivers to regulatory considerations, in <a href="https://open.mozilla.org/economists/" target="_blank">a joint statement published by the Mozilla Foundation</a> supporting open-source's critical role in technological progress.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/datasets_wheel" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
16: ` |
|
<h2>The Dataset Boom: How Different AI Fields Grow on Hugging Face</h2> |
|
<p>Watch the explosive growth of datasets across categories, with Reinforcement Learning and Robotics showing remarkable acceleration. <em>Note: Some datasets appear in multiple categories.</em></p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/api/data/stacked" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
17: ` |
|
<h2>Permission Granted: most used licenses across the Hub</h2> |
|
<p>Of the models that specify a license on the Hub, nearly 60% use permissive open-source licenses like Apache and MIT. Licenses are a crucial tool for giving developers flexible control over how their AI models are shared and used.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/api/model/license/treemap" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
18: ` |
|
<h2>Dataset Darlings: Most Liked Datasets of 2024</h2> |
|
<p>From instruction-following and creative writing to scientific research and video understanding, explore the diverse datasets powering AI development. Note: Snapshot as of November 2024.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/datasets/wheels" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
19: ` |
|
<h2>The Narrowing Gap: Open Source vs Closed Source AI</h2> |
|
<p>Performance comparison between closed-source and open-weight models from 2023-2024, showing open source AI closing the capability gap while maintaining smaller model sizes. Bubble size indicates number of parameters.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/sota" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
20: ` |
|
<h2>Babel in the Machine: Language Distribution across Hugging Face Datasets</h2> |
|
<p>A treemap visualization showing the percentage distribution of languages in datasets available on the Hugging Face Hub, color-coded by language families.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/api/languages/treemap-datasets" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
21: ` |
|
<h2>The Circle of Sharing: How Open Datasets Power AI Innovation</h2> |
|
<p>A Sankey diagram illustrating the flow from top open-source datasets through AI organizations to their derivative models, showcasing the collaborative nature of AI development.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/sankey2" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
22: ` |
|
<h2>December Stars: Top Trending Spaces on Hugging Face</h2> |
|
<p>The 12 most popular Spaces on the Hub in December 2024, including virtual try-on, style shaping, and audio tools. Each star represents a Space with its creator.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/api/spaces/christmas-lights" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
23: ` |
|
<h2>Mapping AI's Languages of Models & Datasets</h2> |
|
<p>Distribution of AI content across languages on the Hub, showing both models (blue) and datasets (yellow) per language.</p> |
|
<div class="responsive-iframe-container"> |
|
<button onclick="toggleBrowserFullscreen(this.parentElement)" 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/api/languages/diverging-bar-chart" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
24: ` |
|
<h2>Day 24</h2> |
|
<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;"> |
|
` |
|
}; |
|
|
|
// Update the getCardLink function |
|
function getCardLink(day) { |
|
const rootUrl = "https://huggingface.co/spaces/huggingface/open-source-ai-year-in-review-2024"; |
|
return `${rootUrl}?day=${day}" target="_blank`; |
|
} |
|
|
|
// 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", |
|
3: "🏎️<br>Fast & Furious model releases", |
|
4: "🚀<br>Zero to One (Million Models)", |
|
5: "🤗<br>What your likes say about you?", |
|
6: "🏷️<br>Tasks on tasks on tasks", |
|
7: "🌍<br>Global top 500 model creators", |
|
8: "📈<br>Average daily downloads", |
|
9: "🎄<br>NeurIPS Noel", |
|
10: "🎂<br>The Great AI Bake-Off", |
|
11: "📄<br>Top upvoted papers on the Hub", |
|
12: "🌏<br>US & China dominating AI research", |
|
13: "🎓<br>The NeurIPS Class of 2024", |
|
14: "👑<br>Machine Vision's Reign", |
|
15: "🔓<br>The Economic Case for Open-Source AI", |
|
16: "💣<br>The Dataset Boom", |
|
17: "⚖️<br>Permission Granted", |
|
18: "⭐️<br>Dataset Darlings", |
|
19: "🎯<br>Closing the Gap", |
|
20: "📚<br>Babel in the Machine", |
|
21: "🔄<br>The Circle of Sharing", |
|
22: "⭐<br>December Stars", |
|
23: "🌍<br>Mapping AI's Languages" |
|
// 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 = ` |
|
${cardContent} |
|
<div class="card-content"> |
|
${cardContents[i]} |
|
<div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;"> |
|
<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> |
|
<p style="font-size: 0.8em;">🔗 Share this card:</p><input type="text" value="${getCardLink(i)}" readonly style="width: 100%; padding: 8px; margin: px 0; border: 1px solid #ddd; border-radius: 4px; background: #f5f5f5; font-size: 0.8em;" onclick="this.select(); document.execCommand('copy');"> |
|
</div> |
|
</div> |
|
`; |
|
calendar.appendChild(card); |
|
} |
|
|
|
// Handle card clicks |
|
const cards = document.querySelectorAll('.card'); |
|
const activeDays = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]; // Add the day numbers you want to highlight |
|
|
|
cards.forEach(card => { |
|
const day = parseInt(card.dataset.day); |
|
|
|
// Only add active class to specific cards |
|
if (activeDays.includes(day)) { |
|
card.classList.add('active'); |
|
} |
|
|
|
// Keep click functionality for all cards |
|
card.addEventListener('click', () => { |
|
card.classList.add('opened'); |
|
modalContent.innerHTML = card.querySelector('.card-content').innerHTML; |
|
modal.style.display = 'flex'; |
|
}); |
|
}); |
|
|
|
// Close modal |
|
closeButton.addEventListener('click', () => { |
|
modal.style.display = 'none'; |
|
}); |
|
|
|
modal.addEventListener('click', (e) => { |
|
if (e.target === modal) { |
|
modal.style.display = 'none'; |
|
} |
|
}); |
|
|
|
// Add fullscreen function |
|
function toggleBrowserFullscreen(container) { |
|
container.classList.toggle('browser-fullscreen'); |
|
} |
|
|
|
// 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> |
