adrien/mots-croises
adrien/mots-croises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styler le bouton comme un lien

Browse Source
This commit is contained in:
Adrien MALINGREY 2025-04-24 21:00:33 +02:00
parent d1d189a0db
commit 2aba951d3b
3 changed files with 84 additions and 60 deletions

106
index.php

@ -49,38 +49,35 @@ $grille = new Grille($hauteur, $largeur, $id);
</head>
<body>
<h1>
<table>
<tbody>
<tr>
<td colspan="2"></td>
<td>M</td>
</tr>
<tr>
<td>c</td>
<td>r</td>
<td>o</td>
<td>i</td>
<td>s</td>
<td>é</td>
<td>s</td>
</tr>
<tr>
<td colspan="2"></td>
<td>t</td>
</tr>
<tr>
<td colspan="2"></td>
<td>s</td>
</tr>
</tbody>
</table>
</h1>
<form id="grilleForm" class="grille" method="get" location=".">
<input type="hidden" id="lignes" name="lignes" value="<?= $hauteur ?>" />
<input type="hidden" id="colonnes" name="colonnes" value="<?= $largeur ?>" />
<input type="hidden" id="solution_hashee" value="<?= $grille->hash() ?>" />
<table>
<form id="grilleForm" method="get" location=".">
<h1>
<table>
<tbody>
<tr>
<td colspan="2"></td>
<td>M</td>
</tr>
<tr>
<td>c</td>
<td>r</td>
<td>o</td>
<td>i</td>
<td>s</td>
<td>é</td>
<td>s</td>
</tr>
<tr>
<td colspan="2"></td>
<td>t</td>
</tr>
<tr>
<td colspan="2"></td>
<td>s</td>
</tr>
</tbody>
</table>
</h1>
<table class="grille">
<tr>
<th></th>
<?php for ($c = 0; $c < $largeur; $c++): ?>
@ -95,35 +92,38 @@ $grille = new Grille($hauteur, $largeur, $id);
<?php if ($grille->grille[$l][$c] == " "): ?>
<input type="text" maxlength="1" size="1" value=" " disabled />
<?php else: ?>
<input type="text" maxlength="1" size="1" required pattern="[A-Z]" />
<input type="text" maxlength="1" size="1" pattern="[A-Z]" />
<?php endif; ?>
</td>
<?php endfor; ?>
</tr>
<?php endfor; ?>
</table>
</form>
<div class="definitions">
<div class="horizontales">
<h2>Horizontalement</h2>
<ol>
<?php for ($l = 0; $l < $hauteur; $l++): ?>
<li><?= $dico[$grille->get_ligne($l, $largeur)] ?></li>
<?php endfor; ?>
</ol>
<div class="definitions">
<div class="horizontales">
<h2>Horizontalement</h2>
<ol>
<?php for ($l = 0; $l < $hauteur; $l++): ?>
<li><?= $dico[$grille->get_ligne($l, $largeur)] ?></li>
<?php endfor; ?>
</ol>
</div>
<div class="verticales">
<h2>Verticalement</h2>
<ol type="A">
<?php for ($c = 0; $c < $largeur; $c++): ?>
<li><?= $dico[$grille->get_colonne($c, $hauteur)] ?></li>
<?php endfor; ?>
</ol>
</div>
</div>
<div class="verticales">
<h2>Verticalement</h2>
<ol type="A">
<?php for ($c = 0; $c < $largeur; $c++): ?>
<li><?= $dico[$grille->get_colonne($c, $hauteur)] ?></li>
<?php endfor; ?>
</ol>
</div>
</div>
<footer><a href=".">Nouvelle grille</a></footer>
<input type="hidden" id="lignes" name="lignes" value="<?= $hauteur ?>" />
<input type="hidden" id="colonnes" name="colonnes" value="<?= $largeur ?>" />
<input type="hidden" id="solution_hashee" value="<?= $grille->hash() ?>" />
<button type="submit">Nouvelle grille</button>
</form>
<script src="script.js"></script>
</body>

2
script.js

@ -40,7 +40,7 @@ inputs.forEach(input => {
if (!input.checkValidity()) {
input.value = '';
}
if (grilleForm.checkValidity()) {
if (inputs.every(input => input.value.length == 1) && grilleForm.checkValidity()) {
sha256(inputs.map(input => input.value).join('')).then(hash => {
if (hash == solution_hashee.value) {
if (confirm('Bravo ! \nUne nouvelle partie ?')) {

36
style.css

@ -1,16 +1,20 @@
body {
margin: 0;
padding: 0;
font-family: Times, 'Times New Roman', Georgia, serif;
}
form {
padding: 1rem;
height: calc(100vh - 2rem);
display: flex;
flex-flow: column;
justify-content: space-evenly;
font-family: Times, "Times New Roman", Georgia, serif;
}
h1 table {
margin: auto;
line-height: 0.7;
line-height: 0.8;
}
h1 td {
@ -23,7 +27,7 @@ h2 {
text-align: center;
}
.grille table {
table.grille {
border-collapse: collapse;
margin: 0 auto;
}
@ -38,7 +42,7 @@ h2 {
.grille td {
border: 1px solid black;
padding: 2px;
font-family: "Comic Sans MS", "Comic Sans", cursive, sans;
font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans;
}
.grille tr:nth-of-type(2) td {
@ -89,6 +93,26 @@ h2 {
font-weight: bold;
}
footer {
text-align: center;
button[type='submit'] {
width: fit-content;
margin: 0 auto;
}
button[type='submit'] {
width: fit-content;
margin: 0 auto;
border: none;
background: none;
font-family: inherit;
font-size: 1em;
text-decoration: underline;
}
button[type="submit"]:hover {
cursor: pointer;
color: #2a6496;
}
button[type="submit"]:active {
color: darkorchid;
}