Inglot Cosmetics Demo

by someprimetime

HTML

<div class="palette">
    
    
    
                <div class="color_palette">
                Drag a swatch to the palette below
                    <span class="right">[ x ]</span>
                <ul class="color_wells">
                    <li style="background: #fce2c3"></li>
                    <li style="background: #e4b79f"></li>
                    <li style="background: #e8c7b3"></li>
                    <li style="background: #e5b498"></li>
                    <li style="background: #d8a796"></li>
                    <li style="background: #ecb2a4"></li>
                    <li style="background: #ec9885"></li>
                    <li style="background: #ca9897"></li>
                    <li style="background: #ab826d"></li>
                    
                                        <li style="background: #eba480"></li>
                    <li style="background: #b36b59"></li>
                    <li style="background: #da8162"></li>
                    <li style="background: #67493a"></li>
                    <li style="background: #4b352f"></li>
                    <li style="background: #cac7cb"></li>
                    <li style="background: #9d9fa2"></li>
                    <li style="background: #706565"></li>
                    <li style="background: #4f4b46"></li>
                    
                                        <li style="background: #5c5050"></li>
                    <li style="background: #e4b79f"></li>
                    <li style="background: #e8c7b3"></li>
                    <li style="background: #e5b498"></li>
                    <li style="background: #d8a796"></li>
                    <li style="background: #ecb2a4"></li>
                    <li style="background: #ec9885"></li>
                    <li style="background: #ca9897"></li>
                    <li style="background: #ab826d"></li>
                </ul>
            </div>
    
    
    <div class="clear"></div>
    
    
    
    
<div...

CSS

body {
    font-family: 'helvetica neue';
    font-weight: 300;
    background: #f4f4f4 url("//d74bwl3dcueqd.cloudfront.net/static/v/25f81e5/img/web2/textures/background.jpg");
}
h1 {
    font-size: 26px;
}
.palette {
    padding: 20px;
    position: relative;
}
.palette_base {
 background: #353535 url(http://someprimetime.com/inglot/public/img/bg.png) repeat;
border-radius: 10px;
 display: block;   
    height: 100%;
    float: left;
    position: relative;
    top: 40px;
    width: 800px;
    padding: 20px;
    
}
.right {
    float: right;
}

.left {
    float: left;
}
.rounded_circle {
    background: #9f9f9f;
    display:block;
    width: 20px;
    height: 20px;
    border-radius: 60px;
    border: 1px solid #e3e3e3;
    box-shadow: inset 0px 1px 2px 0px #000;
}
.clear {
    clear: both;
}
.cell_block {
    display: block;
    padding: 15px;
}
.cell ul {
    list-style: none;
}

.cell li {
    display: inline-block;
    width: 140px;
    border-radius: 10px;
    height: 140px;
    box-shadow: inset 0px 1px 2px 0px #000;
    margin-right: 5px;
    border: 1px solid #000;
}

.one { background: #d2cfca }
.two { background: #55595b }
.three { background: #424658 }
.four { background: #5d566e }
.five { background: #595c5f }

.small_logo {
    background: url(http://someprimetime.com/inglot/public/img/inglot.png) no-repeat;
    display: block;
    width: 78px;
    height: 10px;
    margin: 0 auto;
    margin-top: 10px;
}
.menu {
    list-style: none;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.menu li {
    display: inline-block;
    color: #fff;
    text-align: center;
    margin-right: 10px;
}

.btn, .btn:link, .btn:visited  {
/* fonts for increased legibility */
  background: #e5e3e3;
  border: 1px solid #d3d3d3;
  border-bottom-width: 2px;
  color: #0f2326;
  cursor: pointer;
  display: inline-block;
  font: bold 13px/19px AvSans, sans-serif;
  height: 25px;
  letter-spacing: .15em;
  padding: 2px 7px;
  position: relative;
 ...

JavaScript

$(function() {
    
    $.each($('.color_wells li'), function(i, el) {
        $(el).attr('draggable', 'true');
    });
    
    // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
/*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)})@*/

var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();

(function () {

var pre = document.createElement('pre');
pre.id = "view-source"

// private scope to avoid conflicts with demos
addEvent(window, 'click', function (event) {
  if (event.target.hash == '#view-source') {
    // event.preventDefault();
    if (!document.getElementById('view-source')) {
      // pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
      var xhr = new XMLHttpRequest();

      // original source - rather than rendered source
      xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          pre.innerHTML = this.responseText.replace(/[<>]/g, function (m) { return {'<':'&lt;','>':'&gt;'}[m]});
          prettyPrint();
        }
      };

      document.body.appendChild(pre);
      // really...