Skip to content

Commit

Permalink
add vertical
Browse files Browse the repository at this point in the history
  • Loading branch information
@Louis-LJ
Louis-LJ authored Jun 13, 2024
1 parent a2d3f25 commit d2f455c
Showing 1 changed file with 334 additions and 1 deletion.
335 changes: 334 additions & 1 deletion test/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,8 +331,341 @@ <h4>Difficulté et visibilité des sentiers (<code>sac_scale=* & trail_visibilit
</tr>
</table>
</div>




<h1>Vertical</h1>





<div style="justify-content: center; overflow-x:auto;">
<table>
<tr>
<td colspan="5" align="center">
<h4>Chemin/Chemin agricole/piste forestière type IGN <br>(<code>highway=track</code>)</h4>
</td>
</tr>
<tr align="center">
<td colspan="1" align="center"></td>
<td colspan="2" align="center">Grades 1 et 2 </td>
<td colspan="2" align="center">Grades 3, 4 et 5</td>
</tr>
<tr>
<td colspan="1">Normal</td>
<td colspan="2" align="center">
<span style="display: inline-block; height: 1.2em; width: 10em;">
<svg width="100%" height="70%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="100%" y1="1%" y2="1%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="black" stroke-width="60%" />
<rect x="1%" y="20%" width="150%" height="60%" fill="#FFFFFF" />
</svg>
</span>
</td>
<td colspan="2" align="center">
<span style="display: inline-block; height: 1em; width: 10em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" solid stroke="black" stroke-width="2.7%" />
</svg>
</td>
</td>
</tr>
<tr>
<td colspan="1">Accès « <strong>non ou privé</strong> »</td>
<td colspan="2" align="center">
<span style="display: inline-block; height: 1.2em; width: 10em;">
<svg width="100%" height="70%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1.5%" x2="100%" y1="1%" y2="1%" stroke-linecap="butt" stroke-dasharray="20,8" stroke="#dd0e0e" stroke-width="60%" />
<rect x="1%" y="20%" width="150%" height="60%" fill="#FFFFFF" />
</svg>
</span>
</td>
<td colspan="2" align="center">
<span style="display: inline-block; height: 1em; width: 10em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" solid stroke="#dd0e0e" stroke-width="2.7%" />
</svg>
</span>
</td>
</tr>
<tr>
<td colspan="5" align="center">
<h4>Sentiers type IGN<br> (<code>highway=path</code>)</h4>
</td>
</tr>
<tr>
<td colspan="1">Normal</td>
<td colspan="4" align="center">
<span style="display: inline-block; height: 1em; width: 11.2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#7d5c46" stroke-width="2.5%" />
</svg>
</span>
</td>
</tr>
<tr>
<td colspan="1">Accès « <strong>non ou privé</strong> »</td>
<td colspan="4" align="center">
<span style="display: inline-block; height: 1em; width: 11.2em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,6" stroke="#dd0e0e" stroke-width="2.5%" />
</svg>
</span>
</td>
</tr>
<tr>
<td colspan="5" align="center">
<h4>Difficulté et visibilité des sentiers<br> (<code>sac_scale=* & trail_visibility=*</code>)</h4>
</td>
</tr>
<tr>
<td rowspan="3" align="center">Échelle CAS<br><img src="/icon/arrow/arrow_down.svg" width="20px" style="display: flex; align-items: center;" id="arrow_down" alt="arrow_down" title="arrow_down"></td>
</tr>
<tr>
<td colspan="4" align="center">Visibilité du sentier<img src="/icon/arrow/arrow_down.svg" width="20px" style="display: flex; align-items: center;" id="arrow_down" alt="arrow_down" title="arrow_down"></td>
</tr>
<tr align="center">
<td>Intermédiaire<br>Bonne<br>Excellente</td>
<td> Mauvaise </td>
<td> Horrible </td>
<td> Non</td>
</tr>
<tr>
<td align="center"> T1 </td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#7d5c46" stroke-width="4.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#7d5c46" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#7d5c46" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#7d5c46" stroke-width="3.5%" />
</svg>
</span>
</td>

</tr>
<tr>
<td align="center"> T2 </td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#2d14fd" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#2d14fd" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#2d14fd" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#2d14fd" stroke-width="3.5%" />
</svg>
</span>
</td>
</tr>
<tr>
<td align="center"> T3 </td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#FF00F5" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#FF00F5" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#FF00F5" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#FF00F5" stroke-width="3.5%" />
</svg>
</span>
</td>
</tr>
<tr>
<td align="center">T4</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#ac19ff" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#ac19ff" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#ac19ff" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#ac19ff" stroke-width="3.5%" />
</svg>
</span>
</td>
</tr>
<tr>

<td align="center">T5</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#00cdcd" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#00cdcd" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#00cdcd" stroke-width="3.5%" />
</svg>
</span>
</td>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#00cdcd" stroke-width="3.5%" />
</svg>
</span>
</td>
</tr>
<tr>
<td align="center">T6</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#FF7F00" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#FF7F00" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#FF7F00" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#FF7F00" stroke-width="3.5%" />
</svg>
</span>
</tr>
<tr align="center">
<td align="center">
<font color="#a90601">CAS désactivée</font>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="20,7" stroke="#7d5c46" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,7" stroke="#7d5c46" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,12" stroke="#7d5c46" stroke-width="3.5%" />
</svg>
</span>
</td>
<td align="center">
<span style="display: inline-block; height: 1em; width: 6.5em;">
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" version="1.1">
<line x1="1%" x2="150%" y1="60%" y2="60%" stroke-linecap="round" stroke-dasharray="1,20" stroke="#7d5c46" stroke-width="3.5%" />
</svg>
</span>
</td>
</tr>
</table>
</div>










</article>
</main>

</body>

</html>

0 comments on commit d2f455c

Please sign in to comment.