001-mcdonald-s-it #1
244
index.html
Normal file
244
index.html
Normal file
@@ -0,0 +1,244 @@
|
|||||||
|
<!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="McDonald's China IT Halloween 2025 - Join 300 MITA developers for cosplay, debugging games, and lucky draw at MITA Building 2F Pantry">
|
||||||
|
<title>2025 MITA Halloween</title>
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🎃</text></svg>">
|
||||||
|
<style>
|
||||||
|
/* CSS Reset / Normalize */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base Styles */
|
||||||
|
body {
|
||||||
|
background: #000000;
|
||||||
|
color: #00FF00;
|
||||||
|
font-family: "Courier New", Monaco, Consolas, Menlo, monospace;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.accent {
|
||||||
|
color: #FFBF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
pre {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #00FF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 1rem 0 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #FFBF00;
|
||||||
|
margin: 2rem 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-info p,
|
||||||
|
.activities p {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decorations {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 3rem;
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-top: 1px solid #00FF00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor {
|
||||||
|
animation: blink 1s step-end infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink {
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.cursor {
|
||||||
|
animation: none;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.ascii-desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascii-mobile {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) and (max-width: 1023px) {
|
||||||
|
body {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<pre class="ascii-desktop" aria-label="McDonald's Logo">
|
||||||
|
__ __ _____ _ _ _
|
||||||
|
| \/ | | __ \ | | | ( )
|
||||||
|
| \ / | ___| | | | ___ _ __ __ _| | __| |/ ___
|
||||||
|
| |\/| |/ __| | | |/ _ \| '_ \ / _` | |/ _` | / __|
|
||||||
|
| | | | (__| |__| | (_) | | | | (_| | | (_| | \__ \
|
||||||
|
|_| |_|\___|_____/ \___/|_| |_|\__,_|_|\__,_| |___/
|
||||||
|
|
||||||
|
██████╗ ██████╗ ██╗ ██████╗ ███████╗███╗ ██╗
|
||||||
|
██╔════╝ ██╔═══██╗██║ ██╔══██╗██╔════╝████╗ ██║
|
||||||
|
██║ ███╗██║ ██║██║ ██║ ██║█████╗ ██╔██╗ ██║
|
||||||
|
██║ ██║██║ ██║██║ ██║ ██║██╔══╝ ██║╚██╗██║
|
||||||
|
╚██████╔╝╚██████╔╝███████╗██████╔╝███████╗██║ ╚████║
|
||||||
|
╚═════╝ ╚═════╝ ╚══════╝╚═════╝ ╚══════╝╚═╝ ╚═══╝
|
||||||
|
|
||||||
|
█████╗ ██████╗ ██████╗██╗ ██╗███████╗███████╗
|
||||||
|
██╔══██╗██╔══██╗██╔════╝██║ ██║██╔════╝██╔════╝
|
||||||
|
███████║██████╔╝██║ ███████║█████╗ ███████╗
|
||||||
|
██╔══██║██╔══██╗██║ ██╔══██║██╔══╝ ╚════██║
|
||||||
|
██║ ██║██║ ██║╚██████╗██║ ██║███████╗███████║
|
||||||
|
╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝╚══════╝╚══════╝</pre>
|
||||||
|
<pre class="ascii-mobile" aria-label="McDonald's Logo">
|
||||||
|
__ __ ____
|
||||||
|
| \/ | | _ \
|
||||||
|
| |\/| | ___| | | |
|
||||||
|
| | | |/ __| |_| |
|
||||||
|
|_| |_|\___|____/
|
||||||
|
|
||||||
|
Golden Arches M</pre>
|
||||||
|
<p class="tagline" lang="en">i'm lovin' IT<span class="cursor">_</span></p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="countdown">
|
||||||
|
<div id="countdown-display" aria-live="polite" aria-atomic="true">
|
||||||
|
<span id="countdown-text">Loading countdown...</span>
|
||||||
|
</div>
|
||||||
|
<noscript>Enable JavaScript for live countdown</noscript>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="event-info">
|
||||||
|
<p lang="en">📅 Date: October 31, 2025</p>
|
||||||
|
<p lang="zh-CN">日期：2025年10月31日</p>
|
||||||
|
|
||||||
|
<p lang="en">⏰ Time: 18:00 - 21:00 (6:00 PM - 9:00 PM) GMT+8</p>
|
||||||
|
<p lang="zh-CN">时间：18:00 - 21:00</p>
|
||||||
|
|
||||||
|
<p lang="en">📍 Location: MITA Building 2F Pantry</p>
|
||||||
|
<p lang="zh-CN">地点：MITA大厦2楼茶水间</p>
|
||||||
|
|
||||||
|
<p lang="en">👤 Organizer: Jessi Pan (jessi.pan@cn.mcd.com)</p>
|
||||||
|
<p lang="zh-CN">组织者：Jessi Pan (jessi.pan@cn.mcd.com)</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="activities">
|
||||||
|
<p lang="en">🎭 Activities:</p>
|
||||||
|
<p lang="zh-CN">活动：</p>
|
||||||
|
|
||||||
|
<p lang="en">• Cosplay (costumes encouraged!)</p>
|
||||||
|
<p lang="zh-CN">• 角色扮演（鼓励穿戏服！）</p>
|
||||||
|
|
||||||
|
<p lang="en">• Bug Debugging Games</p>
|
||||||
|
<p lang="zh-CN">• Bug调试游戏</p>
|
||||||
|
|
||||||
|
<p lang="en">• Lucky Draw</p>
|
||||||
|
<p lang="zh-CN">• 幸运抽奖</p>
|
||||||
|
|
||||||
|
<p lang="en">🍔 Food and drinks will be provided!</p>
|
||||||
|
<p lang="zh-CN">将提供食物和饮料！</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="decorations">
|
||||||
|
<pre>
|
||||||
|
🎃 👻 🦇 🎃 👻 🦇 🎃
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>McDonald's IT Academy</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Countdown timer for Halloween event
|
||||||
|
// Target: Oct 31 2025 18:00 GMT+8 (which is 10:00 UTC)
|
||||||
|
const targetDate = new Date('2025-10-31T10:00:00Z');
|
||||||
|
const eventEnd = new Date('2025-10-31T13:00:00Z'); // 21:00 GMT+8
|
||||||
|
|
||||||
|
function updateCountdown() {
|
||||||
|
const now = new Date();
|
||||||
|
const countdownElement = document.getElementById('countdown-text');
|
||||||
|
|
||||||
|
// Check if event has ended
|
||||||
|
if (now >= eventEnd) {
|
||||||
|
countdownElement.textContent = '👻 EVENT COMPLETED - Thanks for joining! 👻';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if event has started
|
||||||
|
if (now >= targetDate) {
|
||||||
|
countdownElement.textContent = '🎃 EVENT STARTING NOW! 🎃';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate time remaining
|
||||||
|
const diff = targetDate - now;
|
||||||
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
||||||
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||||
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||||
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
||||||
|
|
||||||
|
// Display countdown
|
||||||
|
countdownElement.textContent = `${days}d ${hours}h ${minutes}m ${seconds}s until Halloween!`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update countdown immediately and then every second
|
||||||
|
updateCountdown();
|
||||||
|
setInterval(updateCountdown, 1000);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user