Last active
July 14, 2020 04:08
-
-
Save nathancooperjones/3fa46a2f0dd4ce417e4ebe3f21b267b5 to your computer and use it in GitHub Desktop.
Skin Tone Slider for the Geena Davis Institute
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Skin Tone Slider</title> | |
| <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <style> | |
| :root { | |
| --skin-tone:#DB8E72; /* default skin tone color */ | |
| } | |
| html { | |
| border: 5px solid #D3D3D3; /* width, style, colour */ | |
| } | |
| body { | |
| color: #000000; | |
| font-family: -apple-system, BlinkMacSystemFont, sans-serif; | |
| text-align: center; | |
| } | |
| .content { | |
| max-width: 95%; | |
| height: auto; | |
| width: auto; | |
| text-align: center; | |
| } | |
| @media (max-width: 992px) { | |
| .content { | |
| max-width: 95%; | |
| } | |
| } | |
| .slider { | |
| display: inline; | |
| -webkit-appearance: none; | |
| height: 15px; | |
| border-radius: 5px; | |
| background: #D3D3D3; | |
| outline: none; | |
| -webkit-transition: .2s; | |
| transition: opacity .2s; | |
| width: 80%; | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 35px; | |
| height: 35px; | |
| border-radius: 50%; | |
| background: var(--skin-tone); // button color | |
| cursor: pointer; | |
| border: 2px solid #000000; | |
| } | |
| .slider::-moz-range-thumb { | |
| width: 35px; | |
| height: 35px; | |
| border-radius: 50%; | |
| background: var(--skin-tone); | |
| cursor: pointer; | |
| border: 2px solid #000000; | |
| } | |
| #rgb_value_container { | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 20px; | |
| } | |
| #skin_tone_slider { | |
| background: linear-gradient(to right, #F7D9D6, #EFB89E, #E5A57E, #D17E66, #B56B47, #24160F); | |
| } | |
| #color_box { | |
| width: 470px; | |
| height: 470px; | |
| margin: 30px auto; | |
| background-color: var(--skin-tone); | |
| } | |
| h1 { | |
| font-size: 36px; | |
| } | |
| h2 { | |
| font-size: 32px; | |
| } | |
| p { | |
| font-size: 14px; | |
| } | |
| footer { | |
| margin-top: auto; | |
| font-size: 11px; | |
| } | |
| /* Smartphone Portrait and Landscape */ | |
| @media only screen and (max-device-width: 768px) { | |
| h1 { | |
| font-size: 6vw; | |
| } | |
| h2 { | |
| font-size: 5.5vw; | |
| } | |
| p { | |
| font-size: 3.5vw; | |
| } | |
| #color_box { | |
| width: 350px; | |
| height: 350px; | |
| margin: 30px auto; | |
| background-color: var(--skin-tone); | |
| } | |
| } | |
| </style> | |
| <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> | |
| </head> | |
| <body> | |
| <h1>GDI Skin Tone Slider</h1> | |
| <div id="color_box"></div> | |
| <h2>Slider Number: <span id="slider_number">50</span></h2> | |
| <p style="margin-bottom: 29px;">Color: <span id="hex_color">#DB8E72</span></p> | |
| <input type="range" min="0" max="100" value="50" class="slider" id="skin_tone_slider"> | |
| <br/> | |
| <br/> | |
| <br/> | |
| <footer>Visualization by Nathan Cooper Jones</footer> | |
| <script type="text/javascript"> | |
| var skin_tone_slider = document.getElementById("skin_tone_slider"); | |
| var skin_tone_output = document.getElementById("skin_tone_value"); | |
| var colorArray = [ | |
| '#F7D9D6', // anchor | |
| '#F7D8D4', | |
| '#F6D5D1', | |
| '#F6D2CD', | |
| '#F5CFC9', | |
| '#F5CDC6', | |
| '#F4CAC2', | |
| '#F4C9C0', | |
| '#F3C7BE', | |
| '#F3C6BC', | |
| '#F3C4BA', | |
| '#F2C3B8', | |
| '#F2C1B7', | |
| '#F1BEB3', | |
| '#F0BBAF', | |
| '#F0BAAB', | |
| '#EFB9A8', | |
| '#EFB9A4', | |
| '#EFB8A2', | |
| '#EFB8A0', | |
| '#EFB89E', // anchor | |
| '#EEB89D', | |
| '#EEB799', | |
| '#EEB799', | |
| '#EEB797', | |
| '#EDB695', | |
| '#EDB694', | |
| '#EDB692', | |
| '#EDB590', | |
| '#ECB58E', | |
| '#ECB48C', | |
| '#ECB48A', | |
| '#ECB489', | |
| '#EBB387', | |
| '#EBB385', | |
| '#EAB184', | |
| '#E9AE83', | |
| '#E8AC81', | |
| '#E7AA80', | |
| '#E6A87F', | |
| '#E5A57E', // anchor | |
| '#E4A37D', | |
| '#E3A17C', | |
| '#E29F7A', | |
| '#E19C79', | |
| '#E09A78', | |
| '#DF9877', | |
| '#DE9576', | |
| '#DD9374', | |
| '#DC9173', | |
| '#DB8E72', | |
| '#D98C71', | |
| '#D88970', | |
| '#D7876F', | |
| '#D6856D', | |
| '#D5826C', | |
| '#D4806B', | |
| '#D37F6A', | |
| '#D37F68', | |
| '#D27E67', | |
| '#D17E66', // anchor | |
| '#D07D64', | |
| '#D07D63', | |
| '#CF7C61', | |
| '#CE7C60', | |
| '#CD7B5F', | |
| '#CD7B5D', | |
| '#CC7A5C', | |
| '#CB795B', | |
| '#CA7959', | |
| '#CA7858', | |
| '#C97857', | |
| '#C87755', | |
| '#C77754', | |
| '#C67652', | |
| '#C57651', | |
| '#C57550', | |
| '#C4754E', | |
| '#C3744D', | |
| '#BC704A', | |
| '#B56B47', // anchor | |
| '#AD6745', | |
| '#A66342', | |
| '#9F5F3F', | |
| '#985A3C', | |
| '#915639', | |
| '#8A5236', | |
| '#824E34', | |
| '#7B4931', | |
| '#74452E', | |
| '#6D412B', | |
| '#653C28', | |
| '#5E3826', | |
| '#573423', | |
| '#503020', | |
| '#482B1D', | |
| '#41271A', | |
| '#3A2317', | |
| '#331F15', | |
| '#2B1A12', | |
| '#24160F', // anchor | |
| ]; | |
| skin_tone_slider.oninput = function() { | |
| slider_number.innerHTML = this.value; | |
| hex_color.innerHTML = colorArray[this.value]; | |
| document.documentElement.style.setProperty('--skin-tone', colorArray[this.value]); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment