North Shropshire BKA - Beekeeping related crosswordle

 

 {source}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
<meta charset="utf-8">
<title>NSBKA Beekeeping Crosswordle</title>
<link rel="stylesheet" href="/style/style.css">
<link rel="shortcut icon" href="/favicon.ico">
<script defer src="/src/game.js"></script>
<script defer src="/src/index.js"></script>
</head>
<body>
<div class="help screen">
<div class="message">
<button class="close" id="close-help">❌</button>
<div>
<h1>North Shropshire BKA Crosswordle</h1>

<p data-str="help1"></p>

An example:
<div class="flipped grid">
<div style="grid-area: 2 / 1">
<div class="green tile"><div>C</div></div>
</div>
<div style="grid-area: 2 / 2">
<div class="tile"><div>R</div></div>
</div>
<div style="grid-area: 2 / 3">
<div class="yellow tile"><div>O</div></div>
</div>
<div style="grid-area: 2 / 4">
<div class="yellow tile"><div>S</div></div>
</div>
<div style="grid-area: 2 / 5">
<div class="tile"><div>S</div></div>
</div>
<div style="grid-area: 1 / 3">
<div class="tile"><div>W</div></div>
</div>
<div style="grid-area: 3 / 3">
<div class="tile"><div>R</div></div>
</div>
<div style="grid-area: 4 / 3">
<div class="yellow tile"><div>D</div></div>
</div>
</div>
<p data-str="help2"></p>
<div class="clues">
<div>
<div class="green tile"><div>C</div></div>
<div class="tile"><div>R</div></div>
<div class="yellow crossing tile"><div>O</div></div>
<div class="yellow tile"><div>S</div></div>
<div class="tile"><div>S</div></div>
<div class="empty"></div>
<div class="tile"><div>W</div></div>
<div class="yellow crossing tile"><div>O</div></div>
<div class="tile"><div>R</div></div>
<div class="yellow tile"><div>D</div></div>
</div>
</div>
<p data-str="help3"></p>
<p data-str="help4"></p>
<ul>
<li data-str="help-clue1"></li>
<li data-str="help-clue2"></li>
<li data-str="help-clue3"></li>
<li data-str="help-clue4"></li>
<li data-str="help-clue5"></li>
</ul>
<p data-str="help5"></p>
</div>
</div>
</div>
<div class="settings screen">
<div class="message">
<button class="close" id="close-settings">❌</button>
<div>
<h1 data-str="settings"></h1>
<hr>
<p><span data-str="language"></span>
<select id="language">
<option data-str="automatic" value=""></option>
<option data-str="english" value="en"></option>
<option data-str="french" value="fr"></option>
<option data-str="spanish" value="es"></option>
</select></p>
<div><input id="high-contrast" type="checkbox"> <span data-str="high-contrast"></span></div>
<div><input id="skip-filled" type="checkbox"> <span data-str="skip-filled"></span></div>
<div><input id="hard-mode" type="checkbox"> <span data-str="hard-mode"></span></div>
<p data-str="create-custom"></p>
<input id="custom-crosswordle"><button id="create">Create</button><br>
<p id="custom-error"></p>
<a id="custom-link"></a>

<p data-str="credit"></p>
</div>
</div>
</div>
<div class="victory screen">
<div class="message">
<button class="close" id="close-victory">❌</button>
<div>
<h1 data-str="victory"></h1>
<hr>
<p data-str="victory-message"></p>
<p data-str="click-share"></p>
<div id="stats"></div>
</div>
</div>
</div>
<div class="main">
<div class="title">
<div class="menu">
<button id="show-help">❓</button>
<button id="show-settings">⚙️</button>
</div>
<h1>Crosswordle</h1>
</div>
<div class="clues"></div>
<div class="grid"></div>
<div class="keyboard"></div>
</div>
<div class="modal screen">
<div class="message"></div>
</div>
</body>
</html>
{/source}