1236 lines
No EOL
44 KiB
HTML
1236 lines
No EOL
44 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, maximum-scale=1.0, minimum-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="stylesheet" type="text/css" href="assets/style/styleguide.css">
|
|
<title>EH22 - Merch</title>
|
|
<style>
|
|
main {
|
|
max-width: 100%;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
table {
|
|
user-select: none;
|
|
width: fit-content;
|
|
border-collapse: collapse;
|
|
border: solid 4px var(--color-shade-3);
|
|
}
|
|
|
|
thead {
|
|
position: sticky;
|
|
top: calc(-1rem + 2px);
|
|
z-index: 10;
|
|
background-color: var(--color-background);
|
|
outline: solid 4px var(--color-shade-3);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
tbody {
|
|
border-top: solid 4px var(--color-shade-3);
|
|
}
|
|
|
|
table > thead > tr > th {
|
|
outline: solid 1px var(--color-shade-3);
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
table > tbody > tr > th,
|
|
table > thead > tr > th,
|
|
td {
|
|
text-align: center;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 0.25rem 0.5rem;
|
|
border: solid 1px var(--color-shade-3);
|
|
}
|
|
|
|
td.val:not(.empty) {
|
|
background-color: var(--color-shade-1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
td.val:not(.empty):hover {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
td.val {
|
|
font-family: "Departure Mono", ui-monospace, monospace;
|
|
}
|
|
|
|
td.val.highlighted[data-dim="A"] {
|
|
background-color: rgb(96, 165, 249);
|
|
}
|
|
td.val.highlighted[data-dim="B"] {
|
|
background-color: rgb(211, 129, 247);
|
|
}
|
|
td.val.highlighted[data-dim="C"] {
|
|
background-color: rgb(255, 121, 117);
|
|
}
|
|
|
|
td.val.currentDimension:not(.highlighted) {
|
|
background-color: var(--color-shade-3);
|
|
}
|
|
|
|
td.val:not([data-diff=''])::after {
|
|
content: attr(data-diff);
|
|
display: block;
|
|
font-size: 0.8em;
|
|
background-color: var(--custom-color);
|
|
width: calc(100% + 1rem);
|
|
height: 1lh;
|
|
position: relative;
|
|
left: -0.5rem;
|
|
top: 0.25rem;
|
|
margin-top: -0.25rem;
|
|
}
|
|
|
|
td.val[data-diff='']::after {
|
|
content: '';
|
|
display: block;
|
|
font-size: 0.8em;
|
|
background-color: transparent;
|
|
width: calc(100% + 1rem);
|
|
height: 1lh;
|
|
position: relative;
|
|
left: -0.5rem;
|
|
top: 0.25rem;
|
|
margin-top: -0.25rem;
|
|
}
|
|
|
|
table > thead > tr > th.highlighted {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
tr:hover td.dimension {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
tr > td.dimension.currentDimension {
|
|
/*background-color: var(--color-secondary);*/
|
|
}
|
|
|
|
tr > td.dimension.currentDimension::after {
|
|
content: '>';
|
|
/*color: var(--color-secondary);*/
|
|
font-family: "Departure Mono", ui-monospace, monospace;
|
|
position: relative;
|
|
right: calc(-0.5rem - 0.5ch);
|
|
margin-left: -1ch;
|
|
font-weight: bold;
|
|
}
|
|
|
|
thead > tr:first-child > th[colspan='15'] {
|
|
background-color: var(--color-shade-3);
|
|
}
|
|
|
|
#eh22 {
|
|
border-left: solid 4px var(--color-primary);
|
|
border-right: solid 4px var(--color-primary);
|
|
}
|
|
|
|
tbody#eh22 > tr:first-child > th {
|
|
background-color: var(--color-primary);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<main>
|
|
<h1>Merch</h1>
|
|
<ul>
|
|
<li>A - width</li>
|
|
<li>B - height</li>
|
|
<li>C - sleeve</li>
|
|
</ul>
|
|
<table>
|
|
<thead id="th_eh22">
|
|
<tr>
|
|
<th colspan="15">Easterhegg - EH22</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Textil</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="3">Shirt 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>
|
|
<tr>
|
|
<th rowspan="3">Shirt 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>
|
|
<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>
|
|
<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>Textil</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>
|
|
<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>
|
|
<tr>
|
|
<th>Shirt 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>
|
|
<tr>
|
|
<th rowspan="2">Shirt 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>
|
|
<tr>
|
|
<th>Shirt Fitted</th>
|
|
<td>Stanley/Stella</td>
|
|
<td>Stella Ella STTW174</td>
|
|
<td colspan="12">same as EH22 Shirt Fitted</td>
|
|
</tr>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<thead id="th_gpn22">
|
|
<tr>
|
|
<th colspan="15">GPN - gpn22</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Textil</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>
|
|
<tbody>
|
|
<tr>
|
|
<th rowspan="2">Zipper 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>
|
|
<tr>
|
|
<th rowspan="2">Zipper 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>
|
|
<tr>
|
|
<th rowspan="2">Shirt 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>
|
|
<tr>
|
|
<th rowspan="2">Shirt 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>
|
|
<thead id="th_37c3">
|
|
<tr>
|
|
<th colspan="15">Congress - 37C3</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Textil</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>
|
|
<tbody>
|
|
<tr>
|
|
<th rowspan="3">Fitted Shirt<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>
|
|
<tr>
|
|
<th>Fitted Shirt<br>Black</th>
|
|
<td>Stanley Stella</td>
|
|
<td>???</td>
|
|
<td colspan="12">unknown model</td>
|
|
</tr>
|
|
<tbody>
|
|
<tr>
|
|
<th>Straight Shirt<br>Blue</th>
|
|
<td>Kariban</td>
|
|
<td>???</td>
|
|
<td colspan="12">unknown model</td>
|
|
</tr>
|
|
<tbody>
|
|
<tr>
|
|
<th>Straight Shirt<br>Black</th>
|
|
<td>Stanley Stella</td>
|
|
<td>???</td>
|
|
<td colspan="12">unknown model</td>
|
|
</tr>
|
|
<tbody>
|
|
<tr>
|
|
<th>Hoodie<br>Blue</th>
|
|
<td>Kariban</td>
|
|
<td>???</td>
|
|
<td colspan="12">unknown model</td>
|
|
</tr>
|
|
<tbody>
|
|
<tr>
|
|
<th>Hoodie<br>Black</th>
|
|
<td>Stanley Stella</td>
|
|
<td>???</td>
|
|
<td colspan="12">unknown model</td>
|
|
</tr>
|
|
<tbody>
|
|
<tr>
|
|
<th>Zipper<br>Blue</th>
|
|
<td>Kariban</td>
|
|
<td>???</td>
|
|
<td colspan="12">unknown model</td>
|
|
</tr>
|
|
<tbody>
|
|
<tr>
|
|
<th>Zipper<br>Black</th>
|
|
<td>Stanley Stella</td>
|
|
<td>???</td>
|
|
<td colspan="12">unknown model</td>
|
|
</tr>
|
|
</tbody>
|
|
<thead id="th_camp23">
|
|
<tr>
|
|
<th colspan="15">Camp - Camp23</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Textil</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>
|
|
<tbody>
|
|
<tr>
|
|
<th rowspan="3">Shirt Straight</th>
|
|
<td rowspan="3">Presumably Stanley/Stella</td>
|
|
<td rowspan="3">???</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>
|
|
<tr>
|
|
<th rowspan="3">Shirt 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>
|
|
<tr>
|
|
<th rowspan="3">Hoodie</th>
|
|
<td rowspan="3">Presumably Stanley/Stella</td>
|
|
<td rowspan="3">???</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>
|
|
<tr>
|
|
<th rowspan="3">Zipper</th>
|
|
<td rowspan="3">Presumably Stanley/Stella</td>
|
|
<td rowspan="3">???</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.style.backgroundColor = ``
|
|
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) {
|
|
const cell = e.target;
|
|
const group = cell.parentElement.parentElement;
|
|
const col = cell.dataset.col;
|
|
|
|
if(cell.classList.contains('highlighted')){
|
|
selectCell(e);
|
|
return;
|
|
}
|
|
|
|
const values = {}
|
|
group.querySelectorAll(`td[data-col='${col}']`).forEach(match =>{
|
|
values[match.dataset.dim] = parseFloat(match.dataset.val);
|
|
})
|
|
console.log(values);
|
|
|
|
document.querySelectorAll('td.val:not(.empty)').forEach(match => {
|
|
match.style.backgroundColor = ``
|
|
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 col = cell.dataset.col;
|
|
|
|
document.querySelectorAll('table > thead > tr > th').forEach(match => {
|
|
match.classList.remove('highlighted')
|
|
if (match.dataset.col === col) match.classList.add('highlighted')
|
|
});
|
|
}
|
|
|
|
// 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;
|
|
|
|
const rowTitle = cell.parentElement.querySelector('th');
|
|
cell.dataset.col = sizes[rowTitle !== null ? cell.cellIndex - 4 : cell.cellIndex - 1];
|
|
|
|
cell.addEventListener('pointerdown', selectCellPlus);
|
|
cell.addEventListener('pointerenter', hoverCell);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |