design/styleguide/merch.html
kritzl 397246f91d
All checks were successful
/ build (push) Successful in 9s
merch sizing-guide: some formatting & sorting
2025-02-13 13:42:57 +01:00

1269 lines
No EOL
47 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
<link rel="stylesheet" type="text/css" href="assets/style/merch.css">
<title>EH22 - Merch</title>
</head>
<body>
<main>
<h1>Merch</h1>
<ul>
<li>A - width</li>
<li>B - length</li>
<li>C - sleeve</li>
</ul>
<table>
<thead id="th_eh22" class="currentEvent">
<tr>
<th colspan="15">Easterhegg - EH22</th>
</tr>
<tr>
<th>Garment</th>
<th>Brand</th>
<th>Model</th>
<th>Size</th>
<th data-col="XXS">XXS</th>
<th data-col="XS">XS</th>
<th data-col="S">S</th>
<th data-col="M">M</th>
<th data-col="L">L</th>
<th data-col="XL">XL</th>
<th data-col="2XL">2XL</th>
<th data-col="3XL">3XL</th>
<th data-col="4XL">4XL</th>
<th data-col="5XL">5XL</th>
<th data-col="6XL">6XL</th>
</tr>
</thead>
<tbody class="currentEvent">
<tr>
<th rowspan="3">Shirt<br>Fitted</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Stella Ella STTW174</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val">39</td>
<td class="val">42</td>
<td class="val">45</td>
<td class="val">48</td>
<td class="val">51</td>
<td class="val">55</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val">54.5</td>
<td class="val">57.5</td>
<td class="val">59.5</td>
<td class="val">61.5</td>
<td class="val">63.5</td>
<td class="val">65.5</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val empty"></td>
<td class="val">18</td>
<td class="val">18.5</td>
<td class="val">19</td>
<td class="val">19.5</td>
<td class="val">20</td>
<td class="val">20.5</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody class="currentEvent">
<tr>
<th rowspan="3">Shirt<br>Straight</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Creator 2.0 STTU169</td>
<td class="dimension">A</td>
<td class="val">45.5</td>
<td class="val">47.5</td>
<td class="val">49.5</td>
<td class="val">53.5</td>
<td class="val">56.5</td>
<td class="val">59.5</td>
<td class="val">63.5</td>
<td class="val">67.5</td>
<td class="val">72.5</td>
<td class="val">77.5</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">62</td>
<td class="val">65</td>
<td class="val">69</td>
<td class="val">73</td>
<td class="val">75</td>
<td class="val">77</td>
<td class="val">79</td>
<td class="val">81</td>
<td class="val">83</td>
<td class="val">84</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">20</td>
<td class="val">21</td>
<td class="val">22.5</td>
<td class="val">24</td>
<td class="val">24.5</td>
<td class="val">25</td>
<td class="val">25.5</td>
<td class="val">26</td>
<td class="val">26</td>
<td class="val">26</td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody class="currentEvent">
<tr>
<th rowspan="3">Hoodie</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Cruiser 2.0 STSU177</td>
<td class="dimension">A</td>
<td class="val">51</td>
<td class="val">53</td>
<td class="val">55</td>
<td class="val">59</td>
<td class="val">62</td>
<td class="val">65</td>
<td class="val">69</td>
<td class="val">73</td>
<td class="val">78</td>
<td class="val">83</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">64</td>
<td class="val">67</td>
<td class="val">71</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val">84</td>
<td class="val">85</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">58.5</td>
<td class="val">60.5</td>
<td class="val">64.5</td>
<td class="val">66.5</td>
<td class="val">68.5</td>
<td class="val">69</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody class="currentEvent">
<tr>
<th rowspan="3">Zipper</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Cultivator 2.0 STSU179</td>
<td class="dimension">A</td>
<td class="val">51</td>
<td class="val">53</td>
<td class="val">55</td>
<td class="val">59</td>
<td class="val">62</td>
<td class="val">65</td>
<td class="val">69</td>
<td class="val">73</td>
<td class="val">78</td>
<td class="val">83</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">64</td>
<td class="val">67</td>
<td class="val">71</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val">84</td>
<td class="val">85</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">58.5</td>
<td class="val">60.5</td>
<td class="val">64.5</td>
<td class="val">66.5</td>
<td class="val">68.5</td>
<td class="val">69</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val empty"></td>
</tr>
</tbody>
<thead id="th_38c3">
<tr>
<th colspan="15">Congress - 38C3</th>
</tr>
<tr>
<th>Garment</th>
<th>Brand</th>
<th>Model</th>
<th>Size</th>
<th data-col="XXS">XXS</th>
<th data-col="XS">XS</th>
<th data-col="S">S</th>
<th data-col="M">M</th>
<th data-col="L">L</th>
<th data-col="XL">XL</th>
<th data-col="2XL">2XL</th>
<th data-col="3XL">3XL</th>
<th data-col="4XL">4XL</th>
<th data-col="5XL">5XL</th>
<th data-col="6XL">6XL</th>
</tr>
</thead>
<tbody>
<tr>
<th>Shirt<br>Fitted</th>
<td>Stanley/Stella</td>
<td>Stella Ella STTW174</td>
<td colspan="12">same as EH22 Shirt Fitted</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Shirt<br>Straight<br>Black/Navy/Green</th>
<td>Stanley/Stella</td>
<td>Creator 2.0 STTU169</td>
<td colspan="12">same as EH22 Shirt Straight</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="2">Shirt<br>Straight<br>Burgundy</th>
<td rowspan="2">stormtextil</td>
<td rowspan="2">ST102 Heavy Luxe</td>
<td class="dimension">A</td>
<td class="val">43</td>
<td class="val">45</td>
<td class="val">48</td>
<td class="val">52</td>
<td class="val">56</td>
<td class="val">60</td>
<td class="val">63</td>
<td class="val">66</td>
<td class="val">70</td>
<td class="val">74</td>
<td class="val">78</td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">64</td>
<td class="val">69</td>
<td class="val">71</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">79</td>
<td class="val">82</td>
<td class="val">85</td>
<td class="val">88</td>
<td class="val">88</td>
<td class="val">89</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Hoodie</th>
<td>Stanley/Stella</td>
<td>Cruiser STSU822</td>
<td colspan="12">same as camp23 Hoodie</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Zipper</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Connector STSU820</td>
<td class="dimension">A</td>
<td class="val">46.5</td>
<td class="val">49</td>
<td class="val">51.5</td>
<td class="val">54</td>
<td class="val">57</td>
<td class="val">60</td>
<td class="val">63</td>
<td class="val">66</td>
<td class="val">71</td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">63</td>
<td class="val">65</td>
<td class="val">68</td>
<td class="val">72</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">60.5</td>
<td class="val">61.5</td>
<td class="val">64</td>
<td class="val">65.5</td>
<td class="val">67</td>
<td class="val">68.5</td>
<td class="val">70</td>
<td class="val">70</td>
<td class="val">70</td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Embroidered<br>Heavy Shirt</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Sparker 2.0 STTU171</td>
<td class="dimension">A</td>
<td class="val">47.5</td>
<td class="val">49.5</td>
<td class="val">51.5</td>
<td class="val">55.5</td>
<td class="val">58.5</td>
<td class="val">61.5</td>
<td class="val">65.5</td>
<td class="val">69.5</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">64</td>
<td class="val">67</td>
<td class="val">71</td>
<td class="val">75</td>
<td class="val">77</td>
<td class="val">79</td>
<td class="val">81</td>
<td class="val">83</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">20</td>
<td class="val">21</td>
<td class="val">22.5</td>
<td class="val">24</td>
<td class="val">24.5</td>
<td class="val">25</td>
<td class="val">25.5</td>
<td class="val">26</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Embroidered<br>Sweatshirt</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Changer 2.0 STSU178</td>
<td class="dimension">A</td>
<td class="val">51</td>
<td class="val">53</td>
<td class="val">55</td>
<td class="val">59</td>
<td class="val">62</td>
<td class="val">65</td>
<td class="val">69</td>
<td class="val">73</td>
<td class="val">78</td>
<td class="val">83</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">64</td>
<td class="val">67</td>
<td class="val">71</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val">84</td>
<td class="val">85</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">58.5</td>
<td class="val">60.5</td>
<td class="val">64.5</td>
<td class="val">66.5</td>
<td class="val">68.5</td>
<td class="val">69</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val">69.5</td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Dress</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Stella Spinner STDW144</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val">46.5</td>
<td class="val">49</td>
<td class="val">52</td>
<td class="val">55</td>
<td class="val">58</td>
<td class="val">61</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val">86</td>
<td class="val">88</td>
<td class="val">90</td>
<td class="val">92</td>
<td class="val">93</td>
<td class="val">93</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val empty"></td>
<td class="val">19</td>
<td class="val">19</td>
<td class="val">20</td>
<td class="val">20</td>
<td class="val">21</td>
<td class="val">21</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<thead id="th_gpn22">
<tr>
<th colspan="15">GPN - gpn22</th>
</tr>
<tr>
<th>Garment</th>
<th>Brand</th>
<th>Model</th>
<th>Size</th>
<th data-col="XXS">XXS</th>
<th data-col="XS">XS</th>
<th data-col="S">S</th>
<th data-col="M">M</th>
<th data-col="L">L</th>
<th data-col="XL">XL</th>
<th data-col="2XL">2XL</th>
<th data-col="3XL">3XL</th>
<th data-col="4XL">4XL</th>
<th data-col="5XL">5XL</th>
<th data-col="6XL">6XL</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">Shirt<br>Fitted</th>
<td rowspan="2"> SOL'S Imperial WOMEN</td>
<td rowspan="2">11502</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val">41</td>
<td class="val">44</td>
<td class="val">47</td>
<td class="val">50</td>
<td class="val">53</td>
<td class="val">56</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val">61</td>
<td class="val">63</td>
<td class="val">65</td>
<td class="val">67</td>
<td class="val">69</td>
<td class="val">71</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="2">Shirt<br>Straight</th>
<td rowspan="2"> SOL'S Imperial</td>
<td rowspan="2">11500</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val">48</td>
<td class="val">50</td>
<td class="val">53</td>
<td class="val">56</td>
<td class="val">59</td>
<td class="val">62</td>
<td class="val">65</td>
<td class="val">68</td>
<td class="val">71</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val">64</td>
<td class="val">70</td>
<td class="val">72</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val">84</td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="2">Zipper<br>Fitted</th>
<td rowspan="2">Russell Europe</td>
<td rowspan="2">Ladies' Authentic<br>Zipped Hood Jacket<br>0R266F0</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val">45</td>
<td class="val">48</td>
<td class="val">51</td>
<td class="val">54</td>
<td class="val">57</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val">65.5</td>
<td class="val">67.5</td>
<td class="val">69.5</td>
<td class="val">71.5</td>
<td class="val">73.5</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="2">Zipper<br>Straight</th>
<td rowspan="2">Russell Europe</td>
<td rowspan="2">Men's Authentic<br>Zipped Hood Jacket<br>0R266M0</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val">51</td>
<td class="val">54</td>
<td class="val">57</td>
<td class="val">60</td>
<td class="val">63</td>
<td class="val">66</td>
<td class="val">69</td>
<td class="val">72</td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val">64</td>
<td class="val">66.5</td>
<td class="val">69</td>
<td class="val">71.5</td>
<td class="val">74</td>
<td class="val">76.5</td>
<td class="val">79</td>
<td class="val">83.5</td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<thead id="th_37c3">
<tr>
<th colspan="15">Congress - 37C3</th>
</tr>
<tr>
<th>Garment</th>
<th>Brand</th>
<th>Model</th>
<th>Size</th>
<th data-col="XXS">XXS</th>
<th data-col="XS">XS</th>
<th data-col="S">S</th>
<th data-col="M">M</th>
<th data-col="L">L</th>
<th data-col="XL">XL</th>
<th data-col="2XL">2XL</th>
<th data-col="3XL">3XL</th>
<th data-col="4XL">4XL</th>
<th data-col="5XL">5XL</th>
<th data-col="6XL">6XL</th>
</tr>
</thead>
<tbody>
<tr>
<th>Angelshirt<br>Fitted</th>
<td>Stanley/Stella</td>
<td>Stella Expresser STTW032</td>
<td colspan="12">same as camp23 Shirt<br>Fitted</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Angelshirt<br>Straight</th>
<td>Stanley/Stella</td>
<td>Creator STTU755</td>
<td colspan="12">same as camp23 Shirt<br>Straight</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Shirt<br>Fitted<br>Black</th>
<td>Stanley/Stella</td>
<td>Stella Expresser STTW032</td>
<td colspan="12">same as camp23 Shirt Fitted</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Shirt<br>Straight<br>Black</th>
<td>Stanley/Stella</td>
<td>Creator STTU755</td>
<td colspan="12">same as camp23 Shirt Straight</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Hoodie<br>Black</th>
<td>Stanley/Stella</td>
<td>Cruiser STSU822</td>
<td colspan="12">same as camp23 Hoodie</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Zipper<br>Black</th>
<td>Stanley/Stella</td>
<td>Cultivator STSM566</td>
<td colspan="12">same as camp23 Zipper</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Shirt<br>Fitted<br>Blue</th>
<td rowspan="3">Kariban</td>
<td rowspan="3">K3026IC</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val">43</td>
<td class="val">46</td>
<td class="val">49</td>
<td class="val">52</td>
<td class="val">55</td>
<td class="val">58</td>
<td class="val">61</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val">60</td>
<td class="val">62</td>
<td class="val">64</td>
<td class="val">66</td>
<td class="val">68</td>
<td class="val">70</td>
<td class="val">72</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val empty"></td>
<td class="val">15.75</td>
<td class="val">16.5</td>
<td class="val">17.25</td>
<td class="val">18</td>
<td class="val">18.75</td>
<td class="val">19.5</td>
<td class="val">20.25</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Shirt<br>Straight<br>Blue</th>
<td rowspan="3">Kariban</td>
<td rowspan="3">K3032IC</td>
<td class="dimension">A</td>
<td class="val">44</td>
<td class="val">47</td>
<td class="val">50</td>
<td class="val">53</td>
<td class="val">56</td>
<td class="val">59</td>
<td class="val">62</td>
<td class="val">65</td>
<td class="val">68</td>
<td class="val">71</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">66</td>
<td class="val">68</td>
<td class="val">70</td>
<td class="val">72</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val">84</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">15.5</td>
<td class="val">16</td>
<td class="val">16.5</td>
<td class="val">17</td>
<td class="val">17.5</td>
<td class="val">18</td>
<td class="val">18.5</td>
<td class="val">19</td>
<td class="val">19.5</td>
<td class="val">20</td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Hoodie<br>Blue</th>
<td rowspan="3">Kariban</td>
<td rowspan="3">K4027</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val">51</td>
<td class="val">54</td>
<td class="val">57</td>
<td class="val">60</td>
<td class="val">63</td>
<td class="val">66</td>
<td class="val">69</td>
<td class="val">72</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val">68</td>
<td class="val">70</td>
<td class="val">72</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val">66</td>
<td class="val">67</td>
<td class="val">68</td>
<td class="val">69</td>
<td class="val">70</td>
<td class="val">71</td>
<td class="val">72</td>
<td class="val">73</td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Zipper<br>Blue</th>
<td rowspan="3">Kariban</td>
<td rowspan="3">K4030</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val">48</td>
<td class="val">51</td>
<td class="val">54</td>
<td class="val">57</td>
<td class="val">60</td>
<td class="val">63</td>
<td class="val">66</td>
<td class="val">69</td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val">66</td>
<td class="val">68</td>
<td class="val">70</td>
<td class="val">72</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val empty"></td>
<td class="val">65</td>
<td class="val">66</td>
<td class="val">67</td>
<td class="val">68</td>
<td class="val">69</td>
<td class="val">70</td>
<td class="val">71</td>
<td class="val">72</td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<thead id="th_camp23">
<tr>
<th colspan="15">Camp - Camp23</th>
</tr>
<tr>
<th>Garment</th>
<th>Brand</th>
<th>Model</th>
<th>Size</th>
<th data-col="XXS">XXS</th>
<th data-col="XS">XS</th>
<th data-col="S">S</th>
<th data-col="M">M</th>
<th data-col="L">L</th>
<th data-col="XL">XL</th>
<th data-col="2XL">2XL</th>
<th data-col="3XL">3XL</th>
<th data-col="4XL">4XL</th>
<th data-col="5XL">5XL</th>
<th data-col="6XL">6XL</th>
</tr>
</thead>
<tbody>
<tr>
<th>Angelshirt<br>Fitted</th>
<td>Stanley/Stella</td>
<td>Stella Expresser STTW032</td>
<td colspan="12">same as camp23 Shirt Fitted</td>
</tr>
</tbody>
<tbody>
<tr>
<th>Angelshirt<br>Straight</th>
<td>Stanley/Stella</td>
<td>Creator STTU755</td>
<td colspan="12">same as camp23 Shirt Straight</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Shirt<br>Fitted</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Stella Expresser STTW032</td>
<td class="dimension">A</td>
<td class="val empty"></td>
<td class="val">42</td>
<td class="val">44.5</td>
<td class="val">47.5</td>
<td class="val">50.5</td>
<td class="val">53.5</td>
<td class="val">56.5</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val empty"></td>
<td class="val">62</td>
<td class="val">64</td>
<td class="val">66</td>
<td class="val">68</td>
<td class="val">69</td>
<td class="val">69</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val empty"></td>
<td class="val">16</td>
<td class="val">16</td>
<td class="val">17</td>
<td class="val">17</td>
<td class="val">18</td>
<td class="val">18</td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Shirt<br>Straight</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Creator STTU755</td>
<td class="dimension">A</td>
<td class="val">43.5</td>
<td class="val">46</td>
<td class="val">49</td>
<td class="val">52</td>
<td class="val">55</td>
<td class="val">58</td>
<td class="val">61</td>
<td class="val">64</td>
<td class="val">69</td>
<td class="val">74</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">64</td>
<td class="val">66</td>
<td class="val">69</td>
<td class="val">72</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val">84</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">19</td>
<td class="val">19.5</td>
<td class="val">20.5</td>
<td class="val">21.5</td>
<td class="val">22.5</td>
<td class="val">22.5</td>
<td class="val">23.5</td>
<td class="val">24.5</td>
<td class="val">24.5</td>
<td class="val">25</td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Hoodie</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Cruiser STSU822</td>
<td class="dimension">A</td>
<td class="val">46.5</td>
<td class="val">49</td>
<td class="val">51.5</td>
<td class="val">54</td>
<td class="val">57</td>
<td class="val">60</td>
<td class="val">63</td>
<td class="val">66</td>
<td class="val">71</td>
<td class="val">76</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">63</td>
<td class="val">65</td>
<td class="val">68</td>
<td class="val">72</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val">83</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">60.5</td>
<td class="val">61.5</td>
<td class="val">64</td>
<td class="val">65.5</td>
<td class="val">67</td>
<td class="val">68.5</td>
<td class="val">70</td>
<td class="val">70</td>
<td class="val">70</td>
<td class="val">70</td>
<td class="val empty"></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Zipper</th>
<td rowspan="3">Stanley/Stella</td>
<td rowspan="3">Cultivator STSM566</td>
<td class="dimension">A</td>
<td class="val">46.5</td>
<td class="val">49</td>
<td class="val">51.5</td>
<td class="val">54</td>
<td class="val">57</td>
<td class="val">60</td>
<td class="val">63</td>
<td class="val">66</td>
<td class="val">71</td>
<td class="val">76</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">B</td>
<td class="val">61</td>
<td class="val">63</td>
<td class="val">68</td>
<td class="val">72</td>
<td class="val">74</td>
<td class="val">76</td>
<td class="val">78</td>
<td class="val">80</td>
<td class="val">82</td>
<td class="val">83</td>
<td class="val empty"></td>
</tr>
<tr>
<td class="dimension">C</td>
<td class="val">59</td>
<td class="val">60</td>
<td class="val">64</td>
<td class="val">65.5</td>
<td class="val">67</td>
<td class="val">68.5</td>
<td class="val">70</td>
<td class="val">70</td>
<td class="val">70</td>
<td class="val">70</td>
<td class="val empty"></td>
</tr>
</tbody>
</table>
</main>
<script type="text/javascript">
const sizes = [
"XXS", "XS", "S", "M", "L", "XL", "2XL", "3XL", "4XL", "5XL", "6XL"
]
function selectCell(e) {
const cell = e.target;
const value = parseFloat(cell.dataset.val);
const col = cell.dataset.col;
const dimension = cell.dataset.dim;
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
match.dataset.diff = '';
match.classList.remove('highlighted')
match.classList.remove('currentDimension')
if (match.dataset.dim === dimension) {
match.classList.add('currentDimension')
const diff = parseFloat(match.dataset.val) - value;
match.dataset.diff = diff > 0 ? `+${diff}` : diff;
if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
}
});
document.querySelectorAll('td.dimension').forEach(match => {
match.classList.remove('currentDimension');
if (match.innerHTML === dimension) {
match.classList.add('currentDimension');
}
});
cell.classList.add('highlighted')
}
function selectCellPlus(e) {
e.stopPropagation();
const cell = e.target;
const group = cell.parentElement.parentElement;
const col = cell.dataset.col;
if (cell.classList.contains('highlighted') && !cell.classList.contains('currentDimension')) {
selectCell(e);
return;
}
const values = {}
group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
values[match.dataset.dim] = parseFloat(match.dataset.val);
})
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
match.dataset.diff = '';
match.classList.remove('highlighted')
match.classList.remove('currentDimension')
if (match.dataset.dim in values) {
const diff = parseFloat(match.dataset.val) - values[match.dataset.dim];
match.dataset.diff = diff > 0 ? `+${diff}` : diff;
if (match.dataset.dim === 'A') match.style.cssText = `--custom-color: rgba(96, 165, 249, ${1 - Math.abs(diff) / 5})`
if (match.dataset.dim === 'B') match.style.cssText = `--custom-color: rgba(211, 129, 247, ${1 - Math.abs(diff) / 5})`
if (match.dataset.dim === 'C') match.style.cssText = `--custom-color: rgba(255, 121, 117, ${1 - Math.abs(diff) / 5})`
}
});
document.querySelectorAll('td.dimension').forEach(match => {
match.classList.remove('currentDimension');
});
group.querySelectorAll(`td[data-col='${col}']`).forEach(match => {
match.classList.add('highlighted')
})
}
function hoverCell(e) {
const cell = e.target;
const group = cell.parentElement.parentElement;
const col = cell.dataset.col;
const dim = cell.dataset.dim;
hoverOff()
document.querySelectorAll('table > thead > tr > th').forEach(match => {
if (match.dataset.col === col) match.classList.add('hover')
});
group.querySelectorAll('td.dimension').forEach(match => {
if (match.innerText === dim) match.classList.add('hover')
});
group.querySelectorAll('td:not(.dimension), th').forEach(match => {
match.classList.add('hover')
});
}
function hoverOff() {
document.querySelectorAll('table > thead > tr > th').forEach(match => {
match.classList.remove('hover')
});
document.querySelectorAll('td.dimension, td, th').forEach(match => {
match.classList.remove('hover')
});
}
document.querySelectorAll('td.val').forEach(cell => {
const rowTitle = cell.parentElement.querySelector('th');
cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
cell.addEventListener('pointerenter', hoverCell);
cell.addEventListener('pointerleave', hoverOff);
});
// initialize table
document.querySelectorAll('td.val:not(.empty)').forEach(cell => {
cell.dataset.val = cell.innerText;
cell.dataset.diff = '';
cell.dataset.dim = cell.parentElement.querySelector('td.dimension').innerHTML;
cell.addEventListener('click', selectCellPlus);
});
// disable select on click outside value cell
document.addEventListener('click', e => {
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
match.dataset.diff = '';
match.classList.remove('highlighted')
match.classList.remove('currentDimension')
});
document.querySelectorAll('td.dimension').forEach(match => {
match.classList.remove('currentDimension');
});
});
</script>
</body>
</html>