102 lines
5.9 KiB
HTML
102 lines
5.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<input id="rangees">
|
||
|
|
<button onclick="Appliquer()">Appliquer</button>
|
||
|
|
<div>
|
||
|
|
<svg width="540" height="1122" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<style>
|
||
|
|
.body { fill:#fff; stroke: #666; }
|
||
|
|
.exit { fill:#666; stroke:none}
|
||
|
|
.motor{ fill:#f2f2f2; stroke: none; }
|
||
|
|
.wings { fill:#f2f2f2; stroke: none; }
|
||
|
|
.fret { fill:#800080 }
|
||
|
|
.glass { fill:#000; }
|
||
|
|
.nose { fill:none; stroke:#000; stroke-width:1px }
|
||
|
|
.closet { fill:#008080; stroke-width:1.08978; }
|
||
|
|
.occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
|
||
|
|
.reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
|
||
|
|
.libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }
|
||
|
|
@media (prefers-color-scheme:dark) {
|
||
|
|
.body { fill:#333; stroke: #888; }
|
||
|
|
.exit { fill:#888; stroke:none}
|
||
|
|
.motor{ fill:#222; stroke: #444; }
|
||
|
|
.wings { fill:#222; stroke: #444; }
|
||
|
|
.fret { fill:#600060 }
|
||
|
|
.glass { fill:#000; }
|
||
|
|
.nose { fill:none; stroke:#000; stroke-width:1px }
|
||
|
|
.closet { fill:#006060; stroke-width:1.08978; }
|
||
|
|
.occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
|
||
|
|
.reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
|
||
|
|
.libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<symbol id="siege">
|
||
|
|
<rect fill="currentColor" stroke-width=".7" width="20.749941"
|
||
|
|
height="26.691616" x="2.7700462" y="0.35027146" ry="2.9567075"/>
|
||
|
|
<path stroke-width=".7" d="M 2.5722259,2.8124281 A 2.2184138,2.2184138 0 0 0 0.35027964,5.0379069 V 25.657144 c 0,0.08831 0.007065,0.173093 0.0176625,0.257873 a 3.4335958,3.4335958 0 0 0 -0.0176625,0.328523 v 0.339121 c 0,1.872228 1.51191256,3.387673 3.39120576,3.387673 H 22.870005 a 3.3806082,3.3806082 0 0 0 3.384141,-3.391206 v -0.469823 a 2.2431413,2.2431413 0 0 0 0.04239,-0.452161 V 5.0379069 c 0,-1.2293121 -0.989102,-2.2254788 -2.225479,-2.2254788 H 23.212658 A 2.2219463,2.2219463 0 0 0 20.98718,5.0379069 V 22.8594 c -4.934911,1.928748 -10.06411,1.67794 -15.3240114,0 V 5.0379069 c 0,-1.2293121 -0.9891017,-2.2254788 -2.2254787,-2.2254788 z"/>
|
||
|
|
</symbol>
|
||
|
|
</defs>
|
||
|
|
<g class="motor">
|
||
|
|
<path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-424.983 27.81)"/>
|
||
|
|
<path style="stroke-width:1.17754px" d="M424.983 321.926H578.19" transform="translate(-424.983 27.81)"/>
|
||
|
|
</g>
|
||
|
|
<g class="motor">
|
||
|
|
<path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-39.828 27.39)"/>
|
||
|
|
<path style="stroke-width:1.18px" d="M424.983 321.926H578.19" transform="translate(-39.828 27.39)"/>
|
||
|
|
</g>
|
||
|
|
<path class="wings" d="m353.383 421.355-312.89 1.69v139.894L352.864 564l152.813-.242V423.133z" />
|
||
|
|
<path class="body" d="M270.318.5c-16.4 0-51.1 76.9-81 181.7-1 4-1.5 8.1-1.5 12.2v579.7c0 4.1.5 8.1 1.5 12.1 23.735 93.102 44.226 177.891 59.99 232.075L73.06 1044.293l-.567 77.137 412.34-.352-1.031-76.07-187.166-26.635c13.412-54.18 30.992-139.019 54.682-232.174 1-4 1.5-8 1.5-12.1V194.5c0-4.2-.602-8.3-1.602-12.3C320.716 79 286.518.5 270.318.5Z"/>
|
||
|
|
<path class="closet" d="M286.217 212.6h61.3c.7 0 1.3.712 1.3 1.543v35.154c0 .832-.6 1.544-1.3 1.544h-61.3c-.7 0-1.3-.712-1.3-1.544v-35.154c.1-.95.6-1.544 1.3-1.544z"/>
|
||
|
|
<path class="exit" d="m182.117 247.6 7-8.3h7.1l-7.1 8.3 7.1 8.3h-7.1z"/>
|
||
|
|
<path class="exit" d="m192.317 247.6 7.1-8.3h7l-7 8.3 7 8.3h-7z"/>
|
||
|
|
<path class="nose" d="m234.722 52.646 70.463-.182"/>
|
||
|
|
<path class="fret" d="m348.116 685.2-155.4.6-.56 95.233 44.932 121.029 70.669.012 40.75-122.378z"/>
|
||
|
|
<path class="glass" d="m178.214 145.202-.258 29.56c15.464-11.893 24.525-13.296 32.528-13.554 0-6.325.258-29.043.258-29.043-9.748-.26-21.445 4.62-32.528 13.037zm-31.231 82.92c1.576-31.27 10.327-63.27 28.66-80.503l.364 28.842c-8.253 11.314-16.287 32.621-18.62 51.66zm129.519 0c-1.577-31.27-10.328-63.27-28.66-80.503l-.365 28.842c8.253 11.314 16.288 32.621 18.62 51.66zm-31.232-82.92.259 29.56c-15.464-11.893-24.526-13.296-32.529-13.554 0-6.325-.258-29.043-.258-29.043 9.748-.26 21.446 4.62 32.529 13.037z" transform="translate(58.017 -29.5)"/>
|
||
|
|
<g id="cabine" transform="translate(200 280)">
|
||
|
|
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function Appliquer()
|
||
|
|
{
|
||
|
|
const colonnes = [0, 28, 87, 115];
|
||
|
|
|
||
|
|
let rangees = document.getElementById("rangees").value;
|
||
|
|
|
||
|
|
let cabine = document.getElementById("cabine");
|
||
|
|
while (cabine.lastChild)
|
||
|
|
cabine.removeChild(cabine.lastChild);
|
||
|
|
|
||
|
|
for (let i = 0 ; i < rangees; i++)
|
||
|
|
{
|
||
|
|
for (let col = 0 ; col < colonnes.length; col++)
|
||
|
|
{
|
||
|
|
let siege = document.createElementNS("http://www.w3.org/2000/svg", "use");
|
||
|
|
siege.setAttribute("href", "#siege");
|
||
|
|
siege.setAttribute("y", i * 40);
|
||
|
|
siege.setAttribute("x", colonnes[col]);
|
||
|
|
siege.setAttribute("class", "libre");
|
||
|
|
siege.addEventListener("click", (evt) => {
|
||
|
|
let siege = evt.currentTarget;
|
||
|
|
if (siege.classList.contains("libre"))
|
||
|
|
siege.setAttribute("class", "reserve");
|
||
|
|
else if (siege.classList.contains("reserve"))
|
||
|
|
siege.setAttribute("class", "occupe");
|
||
|
|
})
|
||
|
|
cabine.appendChild(siege);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|