Abdelaziz (Cross Word Template)
This commit is contained in:
abdelaziz
172
MainPage/Abdelaziz/CrossWords.html
Normal file
172
MainPage/Abdelaziz/CrossWords.html
Normal file
@@ -0,0 +1,172 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Crossword Puzzle</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #000;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crossword-grid {
|
||||||
|
display: inline-grid;
|
||||||
|
gap: 0;
|
||||||
|
border: 2px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell.blocked {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell input {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background: transparent;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-number {
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 2px;
|
||||||
|
font-size: 8px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clues {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 30px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clues-section h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: 2px solid #000;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clue {
|
||||||
|
padding: 5px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Crossword Puzzle - 21×21</h1>
|
||||||
|
|
||||||
|
<div class="grid-wrapper">
|
||||||
|
<div class="crossword-grid" id="grid"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="clues">
|
||||||
|
<div class="clues-section">
|
||||||
|
<h3>Across</h3>
|
||||||
|
<div id="cluesAcross">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="clues-section">
|
||||||
|
<h3>Down</h3>
|
||||||
|
<div id="cluesDown">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const GRID_SIZE = 21;
|
||||||
|
|
||||||
|
function createGrid() {
|
||||||
|
const grid = document.getElementById('grid');
|
||||||
|
grid.style.gridTemplateColumns = `repeat(${GRID_SIZE}, 30px)`;
|
||||||
|
|
||||||
|
let clueNumber = 1;
|
||||||
|
|
||||||
|
for (let r = 0; r < GRID_SIZE; r++) {
|
||||||
|
for (let c = 0; c < GRID_SIZE; c++) {
|
||||||
|
const cell = document.createElement('div');
|
||||||
|
cell.className = 'cell';
|
||||||
|
|
||||||
|
const isBlocked = (r + c) % 7 === 0 && r % 3 === 0;
|
||||||
|
|
||||||
|
if (isBlocked) {
|
||||||
|
cell.classList.add('blocked');
|
||||||
|
} else {
|
||||||
|
const needsNumber = (c === 0 || (c > 0 && isBlackSquare(r, c-1))) ||
|
||||||
|
(r === 0 || (r > 0 && isBlackSquare(r-1, c)));
|
||||||
|
|
||||||
|
if (needsNumber && (c < GRID_SIZE-1 || r < GRID_SIZE-1)) {
|
||||||
|
const num = document.createElement('span');
|
||||||
|
num.className = 'cell-number';
|
||||||
|
num.textContent = clueNumber++;
|
||||||
|
cell.appendChild(num);
|
||||||
|
}
|
||||||
|
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.maxLength = 1;
|
||||||
|
cell.appendChild(input);
|
||||||
|
}
|
||||||
|
|
||||||
|
grid.appendChild(cell);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function isBlackSquare(r, c) {
|
||||||
|
return (r + c) % 7 === 0 && r % 3 === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
createGrid();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -25,9 +25,9 @@
|
|||||||
<p>Wörter lernen</p>
|
<p>Wörter lernen</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="game-card" onclick="location.href='member4/game.html'">
|
<div class="game-card" onclick="location.href='Abdelaziz/CrossWords.html'">
|
||||||
<h2>Game 4</h2>
|
<h2>CrossWord</h2>
|
||||||
<p>Member 4</p>
|
<p>Abdelaziz</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="game-card" onclick="location.href='member5/game.html'">
|
<div class="game-card" onclick="location.href='member5/game.html'">
|
||||||
|
|||||||
Reference in New Issue
Block a user