Skip to content

Instantly share code, notes, and snippets.

@beseidel

beseidel/index.html

Created July 22, 2019 07:17
Show Gist options
  • Save beseidel/164a07014ea95337ef2ab3baac92d158 to your computer and use it in GitHub Desktop.
Save beseidel/164a07014ea95337ef2ab3baac92d158 to your computer and use it in GitHub Desktop.
Download ZIP
Living room colors, Huebee
Raw
index.html
<div class="colorpreview">
<div class="colorpreview__label"><h1>Living Room</h1></div>
<!-- Buttons -->
<div class="colorpreview__buttons">
<div class="colorpreview__buttons__col">
<label for="color-trim">Trim Wall</label>
<input type="checkbox" id="color-trim" value="color-trim" checked>
<input class="color-input" value="#4e6163" data-change="trim" />
</div>
<div class="colorpreview__buttons__col">
<label for="color-leftwall">Left Wall</label>
<input type="checkbox" id="color-leftwall" value="color-leftwall" checked>
<input class="color-input" value="#4e6163" data-change="leftwall" />
</div>
<div class="colorpreview__buttons__col">
<label for="color-rightwall">Right Wall</label>
<input type="checkbox" id="color-rightwall" value="color-rightwall" checked>
<input class="color-input" value="#cad7d9" data-change="rightwall" />
</div>
<div class="colorpreview__buttons__col">
<label for="color-ceiling">Ceiling</label>
<input type="checkbox" id="color-ceiling" value="color-ceiling" checked>
<input class="color-input" value="#bdc2c2" data-change="ceiling" />
</div>
<div class="colorpreview__buttons__col">
<label for="color-floor">Floor</label>
<input type="checkbox" id="color-floor" value="color-floor" checked>
<input class="color-input" value="#757575" data-change="floor" />
</div>
<div class="colorpreview__buttons__col">
<label for="color-door">Door</label>
<input type="checkbox" id="color-door" value="color-door" checked>
<input class="color-input" value="#ae5849" data-change="door" />
</div>
</div>
<svg id="visual" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 600" enable-background="new 0 0 960 600" xml:space="preserve">
<defs>
<mask id="mask">
<path fill="#fff" d="M960,204V0H0v600h960V341l-208-9v-99L960,204z M654.3,214.3l40-8V259h-40V214.3z M647.7,276.3l10-3.8
c0,0,7.3-6.2,12.7-6.2c5.3,0,16.7,6.2,16.7,6.2h20.7V325h-60V276.3z M371,224.3l40.7,4.7v32.7L371,259V224.3z M173.7,199l68,7.3v44
l-68-4V199z M261,311.5c0,0-6.2,0.2-10.5,0.5s-5.5,22-5.5,22l-4.8,3.7V312l-56,0.5v6.8h-3.8v18.4h-2.8v-25.3h-4l-8.7-2v-4 c0,0,22.2-1.1,29-1.1s3.5-19.2,3.5-19.2l-5.5-7c0,0,8.8-22.5,17-22.5c7.4,0,15.3,18.4,17,22.3c0.4,0,0.3,0.7,0.3,0.7
s-0.1-0.3-0.3-0.7c-0.6-0.1-2.1,0.9-6,5.5c-7,8.2,2,22.1,2,22.1h39V311.5z M427.5,314.2l-5,0.2l-13.2,20h-1.8v-19.8l-26.8-0.5
l-9.8,20.2h-3.2l0.2-20.8h-8v-5.2c0,0,23.2,0,31.3,0c8.1,0-5.6-15.5-6.8-22.2s17-16.2,17-16.2s5.5,7,11.5,11s-0.2,14.2-3.5,15.1
s-0.2,12.4-0.2,12.4l18.2,0.5V314.2z M521,325h-20.7v-44.7H521V325z M521,272.5h-20.7v-18.8H521V272.5z M715,419v32l-15.3,8.7
l-63.3-18l-3.3-25.3l21.3-5.3l40,5.3V373l-20-2.7l8-34H713l13.3,36l-22,0.7l-0.7,46H715z"/>
</mask>
</defs>
<image width="960" height="600" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/81793/livingroom1.jpg"></image>
<g id="colors" mask="url(#mask)">
<polygon id="trim" fill="#FFFFFF" points="0,170.6 142.7,190.8 142.7,486.7 426.5,445.3 426.5,234.2 484.1,242.3 483.7,431.3 527.6,423.7 553,430.3 562.9,423.1 562.9,254.4 612.4,248.3 612.4,438.2 960,524.1 960,0 0,0"/>
<polygon id="leftwall" fill="#4e6163" points="0,131.2 527.6,224.1 527.6,419.1 493.2,425.1 496.2,236.2 419.5,223.1 421.5,438.2 154.8,472.6 152.8,180.7 0,160.5"/>
<polygon id="rightwall" fill="#cad7d9" points="960,141.3 527.6,224.1 527.6,419.1 549.8,423.1 550.8,240.3 621.5,228.1 619.5,431.2 960,506.9 "/>
<polygon id="ceiling" fill="#bdc2c2" points="960,0 960,141.3 527.6,224.1 0,131.2 0,0"/>
<polygon id="floor" fill="#757575" points="142.7,389.8 83.1,389.8 83.1,420.1 63.9,424.1 63.9,429.2 0,439.3 0,600 960,600 960,524.1 612.4,438.2 562.9,423.1 553,430.3 527.6,423.7 480,432.2 426.5,445.3 497.3,479.7 211.4,555.4 179.7,481.3 142.7,486.7"/>
<polygon id="door" fill="#ae5849" points="562.9,254.4 562.9,423.1 612.4,438.2 612.4,248.3 "/>
</g>
</svg>
</div>
Raw
living-room-colors-huebee.markdown
Raw
script.js
$('.color-input').each( function( i, elem ) {
var trigger = $(this).data('change');
var hueb = new Huebee( elem, {
hues: 20,
customColors: [ '#4e6163', '#d39953', '#ae5849', '#b8a89a', '#ded2bc', '#bdc2c2', '#cad7d9', '#757575', '#235b61']
});
hueb.on( 'change', function( color ) {
$("#"+trigger).css({fill:color});
});
});
$(".colorpreview__buttons__col input").change(function() {
var thisID = $(this).attr('id');
var thisChecked = this.checked;
if(thisChecked) {
$('.colorpreview').removeClass('hide--'+thisID);
}else{
$('.colorpreview').addClass('hide--'+thisID);
}
});
Raw
scripts
<script src="https://unpkg.com/huebee@1/dist/huebee.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.scss
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
.colorpreview{
font-family:sans-serif;
position:relative;
margin:0px auto;
width:960px;
width:1100px;
display:flex;
flex-wrap:wrap;
&.hide--color-leftwall{#leftwall{display:none;}}
&.hide--color-rightwall{#rightwall{display:none;}}
&.hide--color-ceiling{#ceiling{display:none;}}
&.hide--color-trim{#trim{display:none;}}
&.hide--color-floor{#floor{display:none;}}
&.hide--color-door{#door{display:none;}}
// Label
.colorpreview__label{
width:100%;
h1{
font-size:40px;
text-align:center;
}
}
// Buttons
.colorpreview__buttons{
display:flex;
max-width:140px;
padding-right:20px;
margin:0px auto;
margin-bottom:10px;
margin-top:20px;
flex-direction:column;
.colorpreview__buttons__col{
// border:solid 1px red;
text-align:center;
input{
// border:0;
text-align:center;
width:100%;
&[type='checkbox'] {
width:auto;
vertical-align:middle;
}
&.color-input{
height:40px;
margin-bottom:20px;
border:solid 1px currentColor;
max-width:100%;
width:100%;
}
}
label{
font-weight:bold;
font-size:1.2em;
}
}
}
// SVG
svg#visual{
width:960px;
height:600px;
margin:0px auto;
#colors{ opacity:.9; }
}
}
Raw
styles
<link href="https://unpkg.com/huebee@1/dist/huebee.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment