Skip to content

Add Camera Fire game and make it the site homepage #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrfeixiang merged 4 commits into from
Apr 8, 2026
Merged

Add Camera Fire game and make it the site homepage #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c160f58
Add Camera Fire — webcam finger-gun shooter
claude Apr 8, 2026
f919aaa
Wire Camera Fire into calendar and add Vercel config
claude Apr 8, 2026
a038328
Publish Camera Fire at site root
claude Apr 8, 2026
30f3278
Make Camera Fire the site homepage
claude Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 145 additions & 0 deletions calendar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Multilingual Calendar 2026 - Learn English & Chinese with Portuguese Flowers">
<meta name="keywords" content="calendar, 2026, multilingual, English, Chinese, Portuguese, flowers, learning">
<meta name="author" content="Multilingual Calendar App">

<!-- Performance optimizations -->
<meta name="theme-color" content="#667eea">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<title>Multilingual Calendar 2026</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

<!-- Accessibility improvements -->
<style>
/* Loading state */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(102, 126, 234, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}

.loading-overlay.active {
opacity: 1;
visibility: visible;
}

.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Skip to content link for accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
border-radius: 4px;
z-index: 10000;
}

.skip-link:focus {
top: 6px;
}
</style>
</head>
<body>
<!-- Loading overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-spinner"></div>
</div>

<!-- Skip to content link for accessibility -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<div class="container">
<header class="header">
<h1>Multilingual Calendar 2026</h1>
<p class="subtitle">Learn English & Chinese with Portuguese Flowers</p>
<a href="index.html" class="header-link" aria-label="Open Camera Fire mini-game">
Play Camera Fire — bend thumb to fire
</a>
</header>

<nav class="calendar-navigation" role="navigation" aria-label="Calendar navigation">
<button id="prevMonth" class="nav-btn" aria-label="Previous month">&lt;</button>
<div class="month-display">
<h2 id="currentMonth" class="month-title-en" aria-live="polite"></h2>
<h2 id="currentMonthCh" class="month-title-ch" aria-live="polite"></h2>
</div>
<button id="nextMonth" class="nav-btn" aria-label="Next month">&gt;</button>
</nav>

<main id="main-content" class="calendar-container">
<section class="month-flower" aria-labelledby="flower-heading">
<h3 id="flower-heading" class="sr-only">Monthly Flower</h3>
<div class="flower-image" id="flowerImage" role="img" aria-label="Monthly flower"></div>
<div class="flower-info">
<div class="flower-name-pt" id="flowerNamePt" aria-label="Portuguese name"></div>
<div class="flower-name-en" id="flowerNameEn" aria-label="English name"></div>
<div class="flower-name-ch" id="flowerNameCh" aria-label="Chinese name"></div>
</div>
</section>

<section class="calendar-grid" id="calendarGrid" role="grid" aria-label="Calendar grid">
<!-- Calendar will be generated here -->
</section>
</main>

<aside class="sidebar" role="complementary" aria-label="Daily learning content">
<div class="daily-content" id="dailyContent">
<h3>Daily Learning</h3>
<div id="dailyQuote" aria-live="polite"></div>
<div id="dailyFact" aria-live="polite"></div>
<div id="dailyVocabulary" aria-live="polite"></div>
</div>
</aside>
</div>

<!-- Screen reader only class -->
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>

<script src="script.js"></script>
</body>
</html>
Loading
Loading