diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..e5f19d0 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,76 @@ +body { + background-color: #F8F9FA; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} + +.game-container { + max-width: 500px; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 8px; + border: 2px solid #dee2e6; + padding: 8px; + background-color: #fff; + border-radius: 0.5rem; +} + +.grid-cell { + width: 100%; + padding-top: 100%; /* Creates a square aspect ratio */ + position: relative; + background-color: #f1f3f5; + border-radius: 0.25rem; + cursor: pointer; + transition: background-color 0.2s ease-in-out; +} + +.grid-cell:hover { + background-color: #e9ecef; +} + +.grid-cell.filled { + background-color: #e7f5ff; + cursor: default; +} + +.cell-content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: bold; + color: #343a40; +} + +.timer, .status-message { + font-size: 1.5rem; + font-weight: 500; +} + +.accent-color { + color: #FD7E14; +} + +.countdown-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + display: flex; + align-items: center; + justify-content: center; + z-index: 1050; + color: white; + font-size: 10rem; + font-weight: bold; +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..2f9b60f --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,92 @@ +document.addEventListener('DOMContentLoaded', () => { + const gridContainer = document.getElementById('bingo-grid'); + const timerElement = document.getElementById('timer'); + const statusElement = document.getElementById('status-message'); + const countdownOverlay = document.getElementById('countdown-overlay'); + const countdownElement = document.getElementById('countdown-number'); + + let currentNumber = 1; + const maxNumber = 25; + let timerInterval; + let seconds = 0; + let milliseconds = 0; + let gameActive = false; + + function createGrid() { + for (let i = 0; i < maxNumber; i++) { + const cell = document.createElement('div'); + cell.classList.add('grid-cell'); + cell.dataset.index = i; + + const content = document.createElement('div'); + content.classList.add('cell-content'); + cell.appendChild(content); + + cell.addEventListener('click', () => handleCellClick(cell)); + gridContainer.appendChild(cell); + } + } + + function handleCellClick(cell) { + if (!gameActive || cell.classList.contains('filled')) { + return; + } + + const content = cell.querySelector('.cell-content'); + if (content.textContent === '') { + content.textContent = currentNumber; + cell.classList.add('filled'); + currentNumber++; + + if (currentNumber > maxNumber) { + finishGame(); + } + } + } + + function startGame() { + gameActive = true; + startTimer(); + statusElement.textContent = 'Fill the grid!'; + } + + function finishGame() { + gameActive = false; + stopTimer(); + statusElement.innerHTML = `Finished in ${timerElement.textContent}!`; + } + + function startTimer() { + const startTime = Date.now(); + timerInterval = setInterval(() => { + const elapsedTime = Date.now() - startTime; + seconds = Math.floor(elapsedTime / 1000); + milliseconds = Math.floor((elapsedTime % 1000) / 10); + timerElement.textContent = `${seconds.toString().padStart(2, '0')}:${milliseconds.toString().padStart(2, '0')}`; + }, 10); + } + + function stopTimer() { + clearInterval(timerInterval); + } + + function startCountdown() { + let count = 3; + countdownElement.textContent = count; + countdownOverlay.style.display = 'flex'; + + const countdownInterval = setInterval(() => { + count--; + if (count > 0) { + countdownElement.textContent = count; + } else { + clearInterval(countdownInterval); + countdownOverlay.style.display = 'none'; + startGame(); + } + }, 1000); + } + + createGrid(); + startCountdown(); +}); \ No newline at end of file diff --git a/index.php b/index.php index 7205f3d..cb5c6d0 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,68 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + <?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'Paper Bingo'); ?> + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ +
+ 3
-
- + +
+
+

+

Tap the cells to fill the grid from 1 to 25 as fast as you can.

+
+ +
+
+
+
+

Time

+
00:00
+
+
+

Status

+
Waiting to start...
+
+
+
+
+ +
+ +
+ + + + + - + \ No newline at end of file