imjasonh · December 10, 2025 17:42
diff --git a/bingo.html b/bingo.html
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bingo Card</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                margin: 0;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }
            .container {
                background: white;
                padding: 2rem;
                border-radius: 1rem;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            }
            h1 {
                text-align: center;
                color: #333;
                margin-top: 0;
            }
            .bingo-card {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 0;
                border: 3px solid #333;
                margin: 1rem 0;
            }
            .bingo-cell {
                aspect-ratio: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 0.5rem;
                border: 1px solid #666;
                cursor: pointer;
                transition: background-color 0.3s;
                font-size: 0.9rem;
                background: white;
                min-height: 80px;
            }
            .bingo-cell:hover:not(.free) {
                background-color: #f0f0f0;
            }
            .bingo-cell.marked {
                background-color: #4caf50;
                color: white;
            }
            .bingo-cell.free {
                background-color: #ff9800;
                color: white;
                font-weight: bold;
                cursor: default;
            }
            .footer {
                text-align: center;
                margin-top: 1rem;
                color: #666;
                font-size: 0.9rem;
            }
            .controls {
                text-align: center;
                margin-top: 1rem;
            }
            button {
                background-color: #667eea;
                color: white;
                border: none;
                padding: 0.5rem 1rem;
                border-radius: 0.5rem;
                cursor: pointer;
                font-size: 1rem;
                margin: 0 0.5rem;
            }
            button:hover {
                background-color: #5568d3;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>🎉 Bingo Card 🎉</h1>
            <div class="bingo-card" id="bingoCard"></div>
            <div class="controls">
                <button onclick="generateCard()">New Card</button>
            </div>
            <div class="footer">
                Click cells to mark them. Get 5 in a row to win!
            </div>
        </div>

        <script>
            // Define your bingo items here
            const bingoItems = [
                "work streams",
                "fiscal year",
                "strategy doc",
                "stakeholders",
                "below the cut line",
                "synergy",
                "circle back",
                "deep dive",
                "bandwidth",
                "touch base",
                "low-hanging fruit",
                "move the needle",
                "pivot",
                "leverage",
                "actionable insights",
                "scalable solution",
                "value-added",
                "game changer",
                "best practices",
                "crawl, walk, run",
                "on the same page",
                "drill down",
                "take this offline",
                "big picture",
                "win-win",
            ];

            function shuffle(array) {
                const newArray = [...array];
                for (let i = newArray.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
                }
                return newArray;
            }

            function generateCard() {
                const card = document.getElementById("bingoCard");
                card.innerHTML = "";

                const shuffled = shuffle(bingoItems);
                const selected = shuffled.slice(0, 24);

                // Create 5x5 grid with FREE in the middle (index 12)
                for (let i = 0; i < 25; i++) {
                    const cell = document.createElement("div");
                    cell.className = "bingo-cell";

                    if (i === 12) {
                        cell.textContent = "FREE";
                        cell.classList.add("free");
                    } else {
                        const itemIndex = i < 12 ? i : i - 1;
                        cell.textContent = selected[itemIndex];
                        cell.onclick = function () {
                            this.classList.toggle("marked");
                        };
                    }

                    card.appendChild(cell);
                }
            }

            // Generate initial card on page load
            generateCard();
        </script>
    </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Bingo Card</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	.container {
	background: white;
	padding: 2rem;
	border-radius: 1rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	}
	h1 {
	text-align: center;
	color: #333;
	margin-top: 0;
	}
	.bingo-card {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border: 3px solid #333;
	margin: 1rem 0;
	}
	.bingo-cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.5rem;
	border: 1px solid #666;
	cursor: pointer;
	transition: background-color 0.3s;
	font-size: 0.9rem;
	background: white;
	min-height: 80px;
	}
	.bingo-cell:hover:not(.free) {
	background-color: #f0f0f0;
	}
	.bingo-cell.marked {
	background-color: #4caf50;
	color: white;
	}
	.bingo-cell.free {
	background-color: #ff9800;
	color: white;
	font-weight: bold;
	cursor: default;
	}
	.footer {
	text-align: center;
	margin-top: 1rem;
	color: #666;
	font-size: 0.9rem;
	}
	.controls {
	text-align: center;
	margin-top: 1rem;
	}
	button {
	background-color: #667eea;
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 1rem;
	margin: 0 0.5rem;
	}
	button:hover {
	background-color: #5568d3;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>🎉 Bingo Card 🎉</h1>
	<div class="bingo-card" id="bingoCard"></div>
	<div class="controls">
	<button onclick="generateCard()">New Card</button>
	</div>
	<div class="footer">
	Click cells to mark them. Get 5 in a row to win!
	</div>
	</div>

	<script>
	// Define your bingo items here
	const bingoItems = [
	"work streams",
	"fiscal year",
	"strategy doc",
	"stakeholders",
	"below the cut line",
	"synergy",
	"circle back",
	"deep dive",
	"bandwidth",
	"touch base",
	"low-hanging fruit",
	"move the needle",
	"pivot",
	"leverage",
	"actionable insights",
	"scalable solution",
	"value-added",
	"game changer",
	"best practices",
	"crawl, walk, run",
	"on the same page",
	"drill down",
	"take this offline",
	"big picture",
	"win-win",
	];

	function shuffle(array) {
	const newArray = [...array];
	for (let i = newArray.length - 1; i > 0; i--) {
	const j = Math.floor(Math.random() * (i + 1));
	[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
	}
	return newArray;
	}

	function generateCard() {
	const card = document.getElementById("bingoCard");
	card.innerHTML = "";

	const shuffled = shuffle(bingoItems);
	const selected = shuffled.slice(0, 24);

	// Create 5x5 grid with FREE in the middle (index 12)
	for (let i = 0; i < 25; i++) {
	const cell = document.createElement("div");
	cell.className = "bingo-cell";

	if (i === 12) {
	cell.textContent = "FREE";
	cell.classList.add("free");
	} else {
	const itemIndex = i < 12 ? i : i - 1;
	cell.textContent = selected[itemIndex];
	cell.onclick = function () {
	this.classList.toggle("marked");
	};
	}

	card.appendChild(cell);
	}
	}

	// Generate initial card on page load
	generateCard();
	</script>
	</body>
	</html>
No results found