SHARE
TWEET

Untitled

a guest Jan 21st, 2020 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <!-- <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> -->
  4.         <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.     </head>
  7.     <body>
  8.         <img id="cursorPointer" src="assets/cursor.png">
  9.         <div class="skinCreator">
  10.  
  11.             <!-- Tabs -->
  12.             <div class="tab">
  13.               <!-- <a href="#" class="identity disabled" data-link="identity">Identit√©</a> -->
  14.               <a href="#" class="visage active" data-link="visage">Appearance</a>
  15.               <a href="#" class="pilosite" data-link="pilosite">Hair/Facial</a>
  16.               <a href="#" class="vetements" data-link="vetements">Clothing</a>
  17.             </div>
  18.  
  19.             <form id="formSkinCreator">
  20.               <!-- BLOCK IDENTITY -->
  21.               <div class="block identity">
  22.                 <div class="group">
  23.                     <h2>Abilities <a href="#">?</a></h2>
  24.                     <div class="input">
  25.                       <div class="label">Endurance <a href="#">?</a></div>
  26.                       <div class="label-value" data-legend="/??"></div>
  27.                       <div class="type-range">
  28.                         <a href="#" class="arrow arrow-left">&nbsp;</a>
  29.                         <input value="0" type="range" class="endurance" min="0" max="10">
  30.                         <a href="#" class="arrow arrow-right">&nbsp;</a>
  31.                       </div>
  32.                     </div>
  33.  
  34.                     <div class="input">
  35.                       <div class="label">Strength <a href="#">?</a></div>
  36.                       <div class="label-value" data-legend="/??"></div>
  37.                       <div class="type-range">
  38.                         <a href="#" class="arrow arrow-left">&nbsp;</a>
  39.                         <input value="0" type="range" class="force" min="0" max="10">
  40.                         <a href="#" class="arrow arrow-right">&nbsp;</a>
  41.                       </div>
  42.                     </div>
  43.  
  44.                     <div class="input">
  45.                       <div class="label">Shoot <a href="#">?</a></div>
  46.                       <div class="label-value" data-legend="/??"></div>
  47.                       <div class="type-range">
  48.                         <a href="#" class="arrow arrow-left">&nbsp;</a>
  49.                         <input value="0" type="range" class="tir" min="0" max="10">
  50.                         <a href="#" class="arrow arrow-right">&nbsp;</a>
  51.                       </div>
  52.                     </div>
  53.  
  54.                     <div class="input">
  55.                       <div class="label">Hygiene <a href="#">?</a></div>
  56.                       <div class="label-value" data-legend="/??"></div>
  57.                       <div class="type-range">
  58.                         <a href="#" class="arrow arrow-left">&nbsp;</a>
  59.                         <input value="0" type="range" class="hygiene" min="0" max="10">
  60.                         <a href="#" class="arrow arrow-right">&nbsp;</a>
  61.                       </div>
  62.                     </div>
  63.  
  64.                     <div class="input">
  65.                       <div class="label">Mental <a href="#">?</a></div>
  66.                       <div class="label-value" data-legend="/??"></div>
  67.                       <div class="type-range">
  68.                         <a href="#" class="arrow arrow-left">&nbsp;</a>
  69.                         <input value="0" type="range" class="mental" min="0" max="10">
  70.                         <a href="#" class="arrow arrow-right">&nbsp;</a>
  71.                       </div>
  72.                     </div>
  73.                   </div>
  74.               </div>
  75.  
  76.               <!-- BLOCK VISAGE -->
  77.               <div class="block visage active">
  78.  
  79.                 <div class="group">
  80.                   <h2>Facial</h2>
  81.                   <div class="input">
  82.                     <div class="label">Male Faces</div>
  83.                     <div class="type-img">
  84.                       <label for="pere1">
  85.                         <input type="radio" name="pere" class="pere" value="0" id="pere1" checked>
  86.                         <div class="img"><img src="assets/heritage/Face-0.jpg" alt=""></div>
  87.                       </label>
  88.                       <label for="pere2">
  89.                         <input type="radio" name="pere" class="pere" value="1" id="pere2">
  90.                         <div class="img"><img src="assets/heritage/Face-1.jpg" alt=""></div>
  91.                       </label>
  92.                       <label for="pere3">
  93.                         <input type="radio" name="pere" class="pere" value="2" id="pere3">
  94.                         <div class="img"><img src="assets/heritage/Face-2.jpg" alt=""></div>
  95.                       </label>
  96.                       <label for="pere4">
  97.                         <input type="radio" name="pere" class="pere" value="3" id="pere4">
  98.                         <div class="img"><img src="assets/heritage/Face-3.jpg" alt=""></div>
  99.                       </label>
  100.                       <label for="pere5">
  101.                         <input type="radio" name="pere" class="pere" value="4" id="pere5">
  102.                         <div class="img"><img src="assets/heritage/Face-4.jpg" alt=""></div>
  103.                       </label>
  104.                       <label for="pere6">
  105.                         <input type="radio" name="pere" class="pere" value="5" id="pere6">
  106.                         <div class="img"><img src="assets/heritage/Face-5.jpg" alt=""></div>
  107.                       </label>
  108.                       <label for="pere7">
  109.                         <input type="radio" name="pere" class="pere" value="6" id="pere7">
  110.                         <div class="img"><img src="assets/heritage/Face-6.jpg" alt=""></div>
  111.                       </label>
  112.                       <label for="pere8">
  113.                         <input type="radio" name="pere" class="pere" value="7" id="pere8">
  114.                         <div class="img"><img src="assets/heritage/Face-7.jpg" alt=""></div>
  115.                       </label>
  116.                       <label for="pere9">
  117.                         <input type="radio" name="pere" class="pere" value="8" id="pere9">
  118.                         <div class="img"><img src="assets/heritage/Face-8.jpg" alt=""></div>
  119.                       </label>
  120.                       <label for="pere10">
  121.                         <input type="radio" name="pere" class="pere" value="9" id="pere10">
  122.                         <div class="img"><img src="assets/heritage/Face-9.jpg" alt=""></div>
  123.                       </label>
  124.                       <label for="pere11">
  125.                         <input type="radio" name="pere" class="pere" value="10" id="pere11">
  126.                         <div class="img"><img src="assets/heritage/Face-10.jpg" alt=""></div>
  127.                       </label>
  128.                       <label for="pere12">
  129.                         <input type="radio" name="pere" class="pere" value="11" id="pere12">
  130.                         <div class="img"><img src="assets/heritage/Face-11.jpg" alt=""></div>
  131.                       </label>
  132.                       <label for="pere13">
  133.                         <input type="radio" name="pere" class="pere" value="12" id="pere13">
  134.                         <div class="img"><img src="assets/heritage/Face-12.jpg" alt=""></div>
  135.                       </label>
  136.                       <label for="pere14">
  137.                         <input type="radio" name="pere" class="pere" value="13" id="pere14">
  138.                         <div class="img"><img src="assets/heritage/Face-13.jpg" alt=""></div>
  139.                       </label>
  140.                       <label for="pere15">
  141.                         <input type="radio" name="pere" class="pere" value="14" id="pere15">
  142.                         <div class="img"><img src="assets/heritage/Face-14.jpg" alt=""></div>
  143.                       </label>
  144.                       <label for="pere16">
  145.                         <input type="radio" name="pere" class="pere" value="15" id="pere16">
  146.                         <div class="img"><img src="assets/heritage/Face-15.jpg" alt=""></div>
  147.                       </label>
  148.                       <label for="pere17">
  149.                         <input type="radio" name="pere" class="pere" value="16" id="pere17">
  150.                         <div class="img"><img src="assets/heritage/Face-16.jpg" alt=""></div>
  151.                       </label>
  152.                       <label for="pere18">
  153.                         <input type="radio" name="pere" class="pere" value="17" id="pere18">
  154.                         <div class="img"><img src="assets/heritage/Face-17.jpg" alt=""></div>
  155.                       </label>
  156.                       <label for="pere19">
  157.                         <input type="radio" name="pere" class="pere" value="18" id="pere19">
  158.                         <div class="img"><img src="assets/heritage/Face-18.jpg" alt=""></div>
  159.                       </label>
  160.                       <label for="pere20">
  161.                         <input type="radio" name="pere" class="pere" value="19" id="pere20">
  162.                         <div class="img"><img src="assets/heritage/Face-19.jpg" alt=""></div>
  163.                       </label>
  164.                       <label for="pere21">
  165.                         <input type="radio" name="pere" class="pere" value="20" id="pere21">
  166.                         <div class="img"><img src="assets/heritage/Face-20.jpg" alt=""></div>
  167.                       </label>
  168.                       <label for="pere22">
  169.                         <input type="radio" name="pere" class="pere" value="42" id="pere22">
  170.                         <div class="img"><img src="assets/heritage/Face-42.jpg" alt=""></div>
  171.                       </label>
  172.                       <label for="pere23">
  173.                         <input type="radio" name="pere" class="pere" value="43" id="pere23">
  174.                         <div class="img"><img src="assets/heritage/Face-43.jpg" alt=""></div>
  175.                       </label>
  176.                       <label for="pere24">
  177.                         <input type="radio" name="pere" class="pere" value="44" id="pere24">
  178.                         <div class="img"><img src="assets/heritage/Face-44.jpg" alt=""></div>
  179.                       </label>
  180.                     </div>
  181.                   </div>
  182.                   <div class="input">
  183.                     <div class="label">Female Faces</div>
  184.                     <div class="type-img">
  185.                       <label for="mere1">
  186.                         <input type="radio" name="mere" class="mere" value="21" id="mere1" checked>
  187.                         <div class="img"><img src="assets/heritage/Face-21.jpg" alt=""></div>
  188.                       </label>
  189.                       <label for="mere2">
  190.                         <input type="radio" name="mere" class="mere" value="22" id="mere2">
  191.                         <div class="img"><img src="assets/heritage/Face-22.jpg" alt=""></div>
  192.                       </label>
  193.                       <label for="mere3">
  194.                         <input type="radio" name="mere" class="mere" value="23" id="mere3">
  195.                         <div class="img"><img src="assets/heritage/Face-23.jpg" alt=""></div>
  196.                       </label>
  197.                       <label for="mere4">
  198.                         <input type="radio" name="mere" class="mere" value="24" id="mere4">
  199.                         <div class="img"><img src="assets/heritage/Face-24.jpg" alt=""></div>
  200.                       </label>
  201.                       <label for="mere5">
  202.                         <input type="radio" name="mere" class="mere" value="25" id="mere5">
  203.                         <div class="img"><img src="assets/heritage/Face-25.jpg" alt=""></div>
  204.                       </label>
  205.                       <label for="mere6">
  206.                         <input type="radio" name="mere" class="mere" value="26" id="mere6">
  207.                         <div class="img"><img src="assets/heritage/Face-26.jpg" alt=""></div>
  208.                       </label>
  209.                       <label for="mere7">
  210.                         <input type="radio" name="mere" class="mere" value="27" id="mere7">
  211.                         <div class="img"><img src="assets/heritage/Face-27.jpg" alt=""></div>
  212.                       </label>
  213.                       <label for="mere8">
  214.                         <input type="radio" name="mere" class="mere" value="28" id="mere8">
  215.                         <div class="img"><img src="assets/heritage/Face-28.jpg" alt=""></div>
  216.                       </label>
  217.                       <label for="mere9">
  218.                         <input type="radio" name="mere" class="mere" value="29" id="mere9">
  219.                         <div class="img"><img src="assets/heritage/Face-29.jpg" alt=""></div>
  220.                       </label>
  221.                       <label for="mere10">
  222.                         <input type="radio" name="mere" class="mere" value="30" id="mere10">
  223.                         <div class="img"><img src="assets/heritage/Face-30.jpg" alt=""></div>
  224.                       </label>
  225.                       <label for="mere11">
  226.                         <input type="radio" name="mere" class="mere" value="31" id="mere11">
  227.                         <div class="img"><img src="assets/heritage/Face-31.jpg" alt=""></div>
  228.                       </label>
  229.                       <label for="mere12">
  230.                         <input type="radio" name="mere" class="mere" value="32" id="mere12">
  231.                         <div class="img"><img src="assets/heritage/Face-32.jpg" alt=""></div>
  232.                       </label>
  233.                       <label for="mere13">
  234.                         <input type="radio" name="mere" class="mere" value="33" id="mere13">
  235.                         <div class="img"><img src="assets/heritage/Face-33.jpg" alt=""></div>
  236.                       </label>
  237.                       <label for="mere14">
  238.                         <input type="radio" name="mere" class="mere" value="34" id="mere14">
  239.                         <div class="img"><img src="assets/heritage/Face-34.jpg" alt=""></div>
  240.                       </label>
  241.                       <label for="mere15">
  242.                         <input type="radio" name="mere" class="mere" value="35" id="mere15">
  243.                         <div class="img"><img src="assets/heritage/Face-35.jpg" alt=""></div>
  244.                       </label>
  245.                       <label for="mere16">
  246.                         <input type="radio" name="mere" class="mere" value="36" id="mere16">
  247.                         <div class="img"><img src="assets/heritage/Face-36.jpg" alt=""></div>
  248.                       </label>
  249.                       <label for="mere17">
  250.                         <input type="radio" name="mere" class="mere" value="37" id="mere17">
  251.                         <div class="img"><img src="assets/heritage/Face-37.jpg" alt=""></div>
  252.                       </label>
  253.                       <label for="mere18">
  254.                         <input type="radio" name="mere" class="mere" value="38" id="mere18">
  255.                         <div class="img"><img src="assets/heritage/Face-38.jpg" alt=""></div>
  256.                       </label>
  257.                       <label for="mere19">
  258.                         <input type="radio" name="mere" class="mere" value="39" id="mere19">
  259.                         <div class="img"><img src="assets/heritage/Face-39.jpg" alt=""></div>
  260.                       </label>
  261.                       <label for="mere20">
  262.                         <input type="radio" name="mere" class="mere" value="40" id="mere20">
  263.                         <div class="img"><img src="assets/heritage/Face-40.jpg" alt=""></div>
  264.                       </label>
  265.                       <label for="mere21">
  266.                         <input type="radio" name="mere" class="mere" value="41" id="mere21">
  267.                         <div class="img"><img src="assets/heritage/Face-41.jpg" alt=""></div>
  268.                       </label>
  269.                       <label for="mere22">
  270.                         <input type="radio" name="mere" class="mere" value="45" id="mere22">
  271.                         <div class="img"><img src="assets/heritage/Face-45.jpg" alt=""></div>
  272.                       </label>
  273.                     </div>
  274.                   </div>
  275.  
  276.  
  277.                   <div class="input">
  278.                     <div class="label">Father / Mother Genetics</div>
  279.                     <div class="label-value" data-legend="" style="display:none;"></div>
  280.                     <div class="type-range">
  281.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  282.                       <input value="5" type="range" class="morphologie" min="0" max="10">
  283.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  284.                     </div>
  285.                   </div>
  286.  
  287.                   <div class="input">
  288.                     <div class="label">Eye colour</div>
  289.                     <div class="type-radio">
  290.                       <label for="eye1">
  291.                         <input type="radio" name="eyecolor" class="eyecolor" value="0" id="eye1" checked>
  292.                         <span class="color" data-color="#525e37"></span>
  293.                       </label>
  294.                       <label for="eye2">
  295.                         <input type="radio" name="eyecolor" class="eyecolor" value="1" id="eye2">
  296.                         <span class="color" data-color="#263419"></span>
  297.                       </label>
  298.                       <label for="eye3">
  299.                         <input type="radio" name="eyecolor" class="eyecolor" value="2" id="eye3">
  300.                         <span class="color" data-color="#83b7d5"></span>
  301.                       </label>
  302.                       <label for="eye4">
  303.                         <input type="radio" name="eyecolor" class="eyecolor" value="3" id="eye4">
  304.                         <span class="color" data-color="#3e66a3"></span>
  305.                       </label>
  306.                       <label for="eye5">
  307.                         <input type="radio" name="eyecolor" class="eyecolor" value="4" id="eye5">
  308.                         <span class="color" data-color="#8d6833"></span>
  309.                       </label>
  310.                       <label for="eye6">
  311.                         <input type="radio" name="eyecolor" class="eyecolor" value="5" id="eye6">
  312.                         <span class="color" data-color="#523711"></span>
  313.                       </label>
  314.                       <label for="eye7">
  315.                         <input type="radio" name="eyecolor" class="eyecolor" value="6" id="eye7">
  316.                         <span class="color" data-color="#d08418"></span>
  317.                       </label>
  318.                       <label for="eye9">
  319.                         <input type="radio" name="eyecolor" class="eyecolor" value="8" id="eye9">
  320.                         <span class="color" data-color="#bebebe"></span>
  321.                       </label>
  322.                       <label for="eye13">
  323.                         <input type="radio" name="eyecolor" class="eyecolor" value="12" id="eye13">
  324.                         <span class="color" data-color="#0d0d0c"></span>
  325.                       </label>
  326.                     </div>
  327.                   </div>
  328.                 </div>
  329.  
  330.                 <div class="group">
  331.                   <h2>Skin</h2>
  332.                   <div class="input">
  333.                     <div class="label">Skin color</div>
  334.                     <div class="type-radio">
  335.                       <label for="p1">
  336.                         <input type="radio" name="peaucolor" class="peaucolor" value="12" id="p1" checked>
  337.                         <span class="color" data-color="#ecc8ae"></span>
  338.                       </label>
  339.                       <label for="p2">
  340.                         <input type="radio" name="peaucolor" class="peaucolor" value="25" id="p2">
  341.                         <span class="color" data-color="#ce9874"></span>
  342.                       </label>
  343.                       <label for="p3">
  344.                         <input type="radio" name="peaucolor" class="peaucolor" value="19" id="p3">
  345.                         <span class="color" data-color="#925a41"></span>
  346.                       </label>
  347.                       <label for="p4">
  348.                         <input type="radio" name="peaucolor" class="peaucolor" value="14" id="p4">
  349.                         <span class="color" data-color="#4e3a26"></span>
  350.                       </label>
  351.                     </div>
  352.                   </div>
  353.  
  354.                   <div class="input">
  355.                     <div class="label">Acne</div>
  356.                     <div class="label-value" data-legend="/23"></div>
  357.                     <div class="type-range">
  358.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  359.                       <input value="0" type="range" class="acne" min="0" max="23">
  360.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  361.                     </div>
  362.                   </div>
  363.  
  364.                   <div class="input">
  365.                     <div class="label">Skin problem</div>
  366.                     <div class="label-value" data-legend="/11"></div>
  367.                     <div class="type-range">
  368.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  369.                       <input value="0" type="range" class="pbpeau" min="0" max="11">
  370.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  371.                     </div>
  372.                   </div>
  373.  
  374.                   <div class="input">
  375.                     <div class="label">Freckles</div>
  376.                     <div class="label-value" data-legend="/17"></div>
  377.                     <div class="type-range">
  378.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  379.                       <input value="0" type="range" class="tachesrousseur" min="0" max="17">
  380.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  381.                     </div>
  382.                   </div>
  383.  
  384.                   <div class="input">
  385.                     <div class="label">Rides</div>
  386.                     <div class="label-value" data-legend="/14"></div>
  387.                     <div class="type-range">
  388.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  389.                       <input value="0" type="range" class="rides" min="0" max="14">
  390.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  391.                     </div>
  392.                   </div>
  393.  
  394.                   <div class="input">
  395.                     <div class="label">Intensity of wrinkles</div>
  396.                     <div class="label-value" data-legend="/10"></div>
  397.                     <div class="type-range">
  398.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  399.                       <input value="10" type="range" class="intensiterides" min="0" max="10">
  400.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  401.                     </div>
  402.                   </div>
  403.                 </div>
  404.  
  405.               </div>
  406.  
  407.               <!-- BLOCK PILOSITE -->
  408.               <div class="block pilosite">
  409.                 <div class="group">
  410.                   <h2>Hair</h2>
  411.                   <div class="input">
  412.                     <div class="label">Hairdressing</div>
  413.                     <div class="label-value" data-legend="/74"></div>
  414.                     <div class="type-range">
  415.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  416.                       <input value="0" type="range" class="hair" min="0" max="74">
  417.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  418.                     </div>
  419.                   </div>
  420.  
  421.                   <div class="input">
  422.                     <div class="label">Hair color</div>
  423.                     <div class="type-radio">
  424.                       <label for="c1">
  425.                         <input type="radio" name="haircolor" class="haircolor" value="0" id="c1" checked>
  426.                         <span class="color" data-color="#1D1D1A"></span>
  427.                       </label>
  428.                       <label for="c2">
  429.                         <input type="radio" name="haircolor" class="haircolor" value="2" id="c2">
  430.                         <span class="color" data-color="#4B392D"></span>
  431.                       </label>
  432.                       <label for="c3">
  433.                         <input type="radio" name="haircolor" class="haircolor" value="4" id="c3">
  434.                         <span class="color" data-color="#7A3B1F"></span>
  435.                       </label>
  436.                       <label for="c4">
  437.                         <input type="radio" name="haircolor" class="haircolor" value="6" id="c4">
  438.                         <span class="color" data-color="#A35631"></span>
  439.                       </label>
  440.                       <label for="c5">
  441.                         <input type="radio" name="haircolor" class="haircolor" value="8" id="c5">
  442.                         <span class="color" data-color="#A96F49"></span>
  443.                       </label>
  444.                       <label for="c6">
  445.                         <input type="radio" name="haircolor" class="haircolor" value="10" id="c6">
  446.                         <span class="color" data-color="#BD8D5E"></span>
  447.                       </label>
  448.                       <label for="c7">
  449.                         <input type="radio" name="haircolor" class="haircolor" value="12" id="c7">
  450.                         <span class="color" data-color="#CBA66F"></span>
  451.                       </label>
  452.                       <label for="c8">
  453.                         <input type="radio" name="haircolor" class="haircolor" value="14" id="c8">
  454.                         <span class="color" data-color="#E8BE78"></span>
  455.                       </label>
  456.                       <label for="c9">
  457.                         <input type="radio" name="haircolor" class="haircolor" value="16" id="c9">
  458.                         <span class="color" data-color="#D09E6A"></span>
  459.                       </label>
  460.                       <label for="c10">
  461.                         <input type="radio" name="haircolor" class="haircolor" value="18" id="c10">
  462.                         <span class="color" data-color="#993524"></span>
  463.                       </label>
  464.                       <label for="c11">
  465.                         <input type="radio" name="haircolor" class="haircolor" value="20" id="c11">
  466.                         <span class="color" data-color="#9C1611"></span>
  467.                       </label>
  468.                       <label for="c12">
  469.                         <input type="radio" name="haircolor" class="haircolor" value="22" id="c12">
  470.                         <span class="color" data-color="#D1381E"></span>
  471.                       </label>
  472.                       <label for="c13">
  473.                         <input type="radio" name="haircolor" class="haircolor" value="24" id="c13">
  474.                         <span class="color" data-color="#C85831"></span>
  475.                       </label>
  476.                       <label for="c14">
  477.                         <input type="radio" name="haircolor" class="haircolor" value="26" id="c14">
  478.                         <span class="color" data-color="#947A67"></span>
  479.                       </label>
  480.                       <label for="c15">
  481.                         <input type="radio" name="haircolor" class="haircolor" value="28" id="c15">
  482.                         <span class="color" data-color="#D8C1AC"></span>
  483.                       </label>
  484.                       <label for="c16">
  485.                         <input type="radio" name="haircolor" class="haircolor" value="30" id="c16">
  486.                         <span class="color" data-color="#734F61"></span>
  487.                       </label>
  488.                       <label for="c17">
  489.                         <input type="radio" name="haircolor" class="haircolor" value="32" id="c17">
  490.                         <span class="color" data-color="#AD476A"></span>
  491.                       </label>
  492.                       <label for="c18">
  493.                         <input type="radio" name="haircolor" class="haircolor" value="35" id="c18">
  494.                         <span class="color" data-color="#FFAEBC"></span>
  495.                       </label>
  496.                       <label for="c19">
  497.                         <input type="radio" name="haircolor" class="haircolor" value="36" id="c19">
  498.                         <span class="color" data-color="#089A8D"></span>
  499.                       </label>
  500.                       <label for="c20">
  501.                         <input type="radio" name="haircolor" class="haircolor" value="40" id="c20">
  502.                         <span class="color" data-color="#309060"></span>
  503.                       </label>
  504.                       <label for="c21">
  505.                         <input type="radio" name="haircolor" class="haircolor" value="43" id="c21">
  506.                         <span class="color" data-color="#A3C015"></span>
  507.                       </label>
  508.                       <label for="c22">
  509.                         <input type="radio" name="haircolor" class="haircolor" value="45" id="c22">
  510.                         <span class="color" data-color="#EEC85C"></span>
  511.                       </label>
  512.                       <label for="c23">
  513.                         <input type="radio" name="haircolor" class="haircolor" value="48" id="c23">
  514.                         <span class="color" data-color="#FE8B10"></span>
  515.                       </label>
  516.                       <label for="c24">
  517.                         <input type="radio" name="haircolor" class="haircolor" value="53" id="c24">
  518.                         <span class="color" data-color="#D40B0E"></span>
  519.                       </label>
  520.                     </div>
  521.                   </div>
  522.                 </div>
  523.  
  524.                 <div class="group">
  525.                   <h2>Eyebrows</h2>
  526.                   <div class="input">
  527.                     <div class="label">Eyebrow shape</div>
  528.                     <div class="label-value" data-legend="/34"></div>
  529.                     <div class="type-range">
  530.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  531.                       <input value="0" type="range" class="sourcils" min="0" max="34">
  532.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  533.                     </div>
  534.                   </div>
  535.  
  536.                   <div class="input">
  537.                     <div class="label">Eyebrow thickness</div>
  538.                     <div class="label-value" data-legend="/10"></div>
  539.                     <div class="type-range">
  540.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  541.                       <input value="10" type="range" class="epaisseursourcils" min="0" max="10">
  542.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  543.                     </div>
  544.                   </div>
  545.                 </div>
  546.  
  547.                 <div class="group">
  548.                   <h2>Beard</h2>
  549.                   <div class="input">
  550.                     <div class="label">Beard type</div>
  551.                     <div class="label-value" data-legend="/28"></div>
  552.                     <div class="type-range">
  553.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  554.                       <input value="0" type="range" class="barbe" min="0" max="28">
  555.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  556.                     </div>
  557.                   </div>
  558.  
  559.                   <div class="input">
  560.                     <div class="label">Beard thickness</div>
  561.                     <div class="label-value" data-legend="/10"></div>
  562.                     <div class="type-range">
  563.                       <a href="#" class="arrow arrow-left">&nbsp;</a>
  564.                       <input value="10" type="range" class="epaisseurbarbe" min="0" max="10">
  565.                       <a href="#" class="arrow arrow-right">&nbsp;</a>
  566.                     </div>
  567.                   </div>
  568.  
  569.                   <div class="input">
  570.                     <div class="label">Beard Color</div>
  571.                     <div class="type-radio">
  572.                       <label for="bc1">
  573.                         <input type="radio" name="barbecolor" class="barbecolor" value="0" id="bc1" checked>
  574.                         <span class="color" data-color="#1D1D1A"></span>
  575.                       </label>
  576.                       <label for="bc2">
  577.                         <input type="radio" name="barbecolor" class="barbecolor" value="2" id="bc2">
  578.                         <span class="color" data-color="#4B392D"></span>
  579.                       </label>
  580.                       <label for="bc3">
  581.                         <input type="radio" name="barbecolor" class="barbecolor" value="4" id="bc3">
  582.                         <span class="color" data-color="#7A3B1F"></span>
  583.                       </label>
  584.                       <label for="bc4">
  585.                         <input type="radio" name="barbecolor" class="barbecolor" value="6" id="bc4">
  586.                         <span class="color" data-color="#A35631"></span>
  587.                       </label>
  588.                       <label for="bc5">
  589.                         <input type="radio" name="barbecolor" class="barbecolor" value="8" id="bc5">
  590.                         <span class="color" data-color="#A96F49"></span>
  591.                       </label>
  592.                       <label for="bc6">
  593.                         <input type="radio" name="barbecolor" class="barbecolor" value="10" id="bc6">
  594.                         <span class="color" data-color="#BD8D5E"></span>
  595.                       </label>
  596.                       <label for="bc7">
  597.                         <input type="radio" name="barbecolor" class="barbecolor" value="12" id="bc7">
  598.                         <span class="color" data-color="#CBA66F"></span>
  599.                       </label>
  600.                       <label for="bc8">
  601.                         <input type="radio" name="barbecolor" class="barbecolor" value="14" id="bc8">
  602.                         <span class="color" data-color="#E8BE78"></span>
  603.                       </label>
  604.                       <label for="bc9">
  605.                         <input type="radio" name="barbecolor" class="barbecolor" value="16" id="bc9">
  606.                         <span class="color" data-color="#D09E6A"></span>
  607.                       </label>
  608.                       <label for="bc13">
  609.                         <input type="radio" name="barbecolor" class="barbecolor" value="24" id="bc13">
  610.                         <span class="color" data-color="#C85831"></span>
  611.                       </label>
  612.                       <label for="bc14">
  613.                         <input type="radio" name="barbecolor" class="barbecolor" value="26" id="bc14">
  614.                         <span class="color" data-color="#947A67"></span>
  615.                       </label>
  616.                       <label for="bc15">
  617.                         <input type="radio" name="barbecolor" class="barbecolor" value="28" id="bc15">
  618.                         <span class="color" data-color="#D8C1AC"></span>
  619.                       </label>
  620.                     </div>
  621.                   </div>
  622.               </div>
  623.  
  624.               </div>
  625.  
  626.               <!-- BLOCK CLOTHES -->
  627.               <div class="block vetements">
  628.                 <div class="group">
  629.                   <h2>Hats</h2>
  630.                   <div class="label-value" data-legend="">0</div>
  631.                   <ul class="chapeaux">
  632.                     <button type="button" class="arrow arrowvetement-left">&nbsp;</button>
  633.                     <li data="0" class="active">None</li>
  634.                     <li data="1"></li>
  635.                     <li data="2"></li>
  636.                     <li data="3"></li>
  637.                     <li data="4"></li>
  638.                     <li data="5"></li>
  639.                     <li data="6"></li>
  640.                     <li data="7"></li>
  641.                     <li data="8"></li>
  642.                     <li data="9"></li>
  643.                     <li data="10"></li>
  644.                     <li data="11"></li>
  645.                     <li data="12"></li>
  646.                     <li data="13"></li>
  647.                     <li data="14"></li>
  648.                     <li data="15"></li>
  649.                     <li data="16"></li>
  650.                     <li data="17"></li>
  651.                     <li data="18"></li>
  652.                     <li data="19"></li>
  653.                     <li data="20"></li>
  654.                     <li data="21"></li>
  655.                     <li data="22"></li>
  656.                     <li data="23"></li>
  657.                     <li data="24"></li>
  658.                     <li data="25"></li>
  659.                     <li data="26"></li>
  660.                     <li data="27"></li>
  661.                     <li data="28"></li>
  662.                     <li data="29"></li>
  663.                     <li data="30"></li>
  664.                     <li data="31"></li>
  665.                     <li data="32"></li>
  666.                     <button type="button" class="arrow arrowvetement-right">&nbsp;</button>
  667.                   </ul>
  668.                 </div>
  669.                 <div class="group">
  670.                   <h2>Glasses</h2>
  671.                   <div class="label-value" data-legend="">0</div>
  672.                   <ul class="lunettes">
  673.                     <button type="button" class="arrow arrowvetement-left">&nbsp;</button>
  674.                     <li data="0" class="active">None</li>
  675.                     <li data="1"></li>
  676.                     <li data="2"></li>
  677.                     <li data="3"></li>
  678.                     <li data="4"></li>
  679.                     <li data="5"></li>
  680.                     <li data="6"></li>
  681.                     <li data="7"></li>
  682.                     <li data="8"></li>
  683.                     <li data="9"></li>
  684.                     <li data="10"></li>
  685.                     <li data="11"></li>
  686.                     <li data="11"></li>
  687.                     <button type="button" class="arrow arrowvetement-right">&nbsp;</button>
  688.                   </ul>
  689.                 </div>
  690.                 <div class="group">
  691.                   <h2>Ears</h2>
  692.                   <div class="label-value" data-legend="">0</div>
  693.                   <ul class="oreilles">
  694.                     <button type="button" class="arrow arrowvetement-left">&nbsp;</button>
  695.                     <li data="0" class="active">None</li>
  696.                     <li data="1"></li>
  697.                     <li data="2"></li>
  698.                     <li data="3"></li>
  699.                     <li data="4"></li>
  700.                     <li data="5"></li>
  701.                     <li data="6"></li>
  702.                     <li data="7"></li>
  703.                     <li data="8"></li>
  704.                     <li data="9"></li>
  705.                     <li data="10"></li>
  706.                     <li data="11"></li>
  707.                     <li data="12"></li>
  708.                     <li data="13"></li>
  709.                     <li data="14"></li>
  710.                     <li data="15"></li>
  711.                     <button type="button" class="arrow arrowvetement-right">&nbsp;</button>
  712.                   </ul>
  713.                 </div>
  714.  
  715.                 <div class="group">
  716.                   <h2>Tops</h2>
  717.                   <div class="label-value" data-legend="">0</div>
  718.                   <ul class="hauts">
  719.                     <button type="button" class="arrow arrowvetement-left">&nbsp;</button>
  720.                     <li data="0" class="active">None</li>
  721.                     <li data="1"></li>
  722.                     <li data="2"></li>
  723.                     <li data="3"></li>
  724.                     <li data="4"></li>
  725.                     <li data="5"></li>
  726.                     <li data="6"></li>
  727.                     <li data="7"></li>
  728.                     <li data="8"></li>
  729.                     <li data="9"></li>
  730.                     <li data="10"></li>
  731.                     <li data="11"></li>
  732.                     <li data="12"></li>
  733.                     <li data="13"></li>
  734.                     <li data="14"></li>
  735.                     <li data="15"></li>
  736.                     <li data="16"></li>
  737.                     <li data="17"></li>
  738.                     <li data="18"></li>
  739.                     <li data="19"></li>
  740.                     <li data="20"></li>
  741.                     <li data="21"></li>
  742.                     <li data="22"></li>
  743.                     <li data="23"></li>
  744.                     <li data="24"></li>
  745.                     <li data="25"></li>
  746.                     <li data="26"></li>
  747.                     <li data="27"></li>
  748.                     <li data="28"></li>
  749.                     <li data="29"></li>
  750.                     <li data="30"></li>
  751.                     <li data="31"></li>
  752.                     <li data="32"></li>
  753.                     <li data="33"></li>
  754.                     <li data="34"></li>
  755.                     <li data="35"></li>
  756.                     <li data="36"></li>
  757.                     <li data="37"></li>
  758.                     <li data="38"></li>
  759.                     <li data="39"></li>
  760.                     <li data="40"></li>
  761.                     <li data="41"></li>
  762.                     <li data="42"></li>
  763.                     <li data="43"></li>
  764.                     <li data="44"></li>
  765.                     <li data="45"></li>
  766.                     <li data="46"></li>
  767.                     <li data="47"></li>
  768.                     <li data="48"></li>
  769.                     <li data="49"></li>
  770.                     <li data="50"></li>
  771.                     <li data="51"></li>
  772.                     <li data="52"></li>
  773.                     <li data="53"></li>
  774.                     <li data="54"></li>
  775.                     <li data="55"></li>
  776.                     <li data="56"></li>
  777.                     <li data="57"></li>
  778.                     <li data="58"></li>
  779.                     <li data="59"></li>
  780.                     <li data="60"></li>
  781.                     <li data="61"></li>
  782.                     <li data="62"></li>
  783.                     <li data="63"></li>
  784.                     <li data="64"></li>
  785.                     <li data="65"></li>
  786.                     <li data="66"></li>
  787.                     <li data="67"></li>
  788.                     <li data="68"></li>
  789.                     <li data="69"></li>
  790.                     <li data="70"></li>
  791.                     <li data="71"></li>
  792.                     <li data="72"></li>
  793.                     <li data="73"></li>
  794.                     <li data="74"></li>
  795.                     <li data="75"></li>
  796.                     <li data="76"></li>
  797.                     <li data="77"></li>
  798.                     <li data="78"></li>
  799.                     <li data="79"></li>
  800.                     <li data="80"></li>
  801.                     <li data="81"></li>
  802.                     <li data="82"></li>
  803.                     <li data="83"></li>
  804.                     <li data="84"></li>
  805.                     <li data="85"></li>
  806.                     <li data="86"></li>
  807.                     <li data="87"></li>
  808.                     <li data="88"></li>
  809.                     <li data="89"></li>
  810.                     <li data="90"></li>
  811.                     <li data="91"></li>
  812.                     <li data="92"></li>
  813.                     <li data="93"></li>
  814.                     <li data="94"></li>
  815.                     <li data="95"></li>
  816.                     <li data="96"></li>
  817.                     <li data="97"></li>
  818.                     <li data="98"></li>
  819.                     <li data="99"></li>
  820.                     <li data="100"></li>
  821.                     <li data="101"></li>
  822.                     <li data="102"></li>
  823.                     <li data="103"></li>
  824.                     <li data="104"></li>
  825.                     <li data="105"></li>
  826.                     <li data="106"></li>
  827.                     <li data="107"></li>
  828.                     <li data="108"></li>
  829.                     <li data="109"></li>
  830.                     <li data="110"></li>
  831.                     <li data="111"></li>
  832.                     <li data="112"></li>
  833.                     <li data="113"></li>
  834.                     <li data="114"></li>
  835.                     <li data="115"></li>
  836.                     <li data="116"></li>
  837.                     <li data="117"></li>
  838.                     <li data="118"></li>
  839.                     <button type="button" class="arrow arrowvetement-right">&nbsp;</button>
  840.                   </ul>
  841.                 </div>
  842.  
  843.                 <div class="group">
  844.                   <h2>Trousers</h2>
  845.                   <div class="label-value" data-legend="">0</div>
  846.                   <ul class="pantalons">
  847.                     <button type="button" class="arrow arrowvetement-left">&nbsp;</button>
  848.                     <li data="0" class="active">None</li>
  849.                     <li data="1"></li>
  850.                     <li data="2"></li>
  851.                     <li data="3"></li>
  852.                     <li data="4"></li>
  853.                     <li data="5"></li>
  854.                     <li data="6"></li>
  855.                     <li data="7"></li>
  856.                     <li data="8"></li>
  857.                     <li data="9"></li>
  858.                     <li data="10"></li>
  859.                     <li data="11"></li>
  860.                     <li data="12"></li>
  861.                     <li data="13"></li>
  862.                     <li data="14"></li>
  863.                     <li data="15"></li>
  864.                     <li data="16"></li>
  865.                     <li data="17"></li>
  866.                     <li data="18"></li>
  867.                     <li data="19"></li>
  868.                     <li data="20"></li>
  869.                     <li data="21"></li>
  870.                     <li data="22"></li>
  871.                     <li data="23"></li>
  872.                     <li data="24"></li>
  873.                     <li data="25"></li>
  874.                     <li data="26"></li>
  875.                     <li data="27"></li>
  876.                     <li data="28"></li>
  877.                     <li data="29"></li>
  878.                     <li data="30"></li>
  879.                     <li data="31"></li>
  880.                     <li data="32"></li>
  881.                     <li data="33"></li>
  882.                     <li data="34"></li>
  883.                     <li data="35"></li>
  884.                     <li data="36"></li>
  885.                     <li data="37"></li>
  886.                     <li data="38"></li>
  887.                     <li data="39"></li>
  888.                     <li data="40"></li>
  889.                     <li data="41"></li>
  890.                     <li data="42"></li>
  891.                     <li data="43"></li>
  892.                     <li data="44"></li>
  893.                     <li data="45"></li>
  894.                     <li data="46"></li>
  895.                     <li data="47"></li>
  896.                     <li data="48"></li>
  897.                     <li data="49"></li>
  898.                     <li data="50"></li>
  899.                     <li data="51"></li>
  900.                     <li data="52"></li>
  901.                     <li data="53"></li>
  902.                     <li data="54"></li>
  903.                     <li data="55"></li>
  904.                     <li data="56"></li>
  905.                     <li data="57"></li>
  906.                     <button type="button" class="arrow arrowvetement-right">&nbsp;</button>
  907.                   </ul>
  908.                 </div>
  909.  
  910.                 <div class="group">
  911.                   <h2>Shoes</h2>
  912.                   <div class="label-value" data-legend="">0</div>
  913.                   <ul class="chaussures">
  914.                     <button type="button" class="arrow arrowvetement-left">&nbsp;</button>
  915.                     <li data="0" class="active">None</li>
  916.                     <li data="1"></li>
  917.                     <li data="2"></li>
  918.                     <li data="3"></li>
  919.                     <li data="4"></li>
  920.                     <li data="5"></li>
  921.                     <li data="6"></li>
  922.                     <li data="7"></li>
  923.                     <li data="8"></li>
  924.                     <li data="9"></li>
  925.                     <li data="10"></li>
  926.                     <li data="11"></li>
  927.                     <li data="12"></li>
  928.                     <li data="13"></li>
  929.                     <li data="14"></li>
  930.                     <li data="15"></li>
  931.                     <li data="16"></li>
  932.                     <li data="17"></li>
  933.                     <li data="18"></li>
  934.                     <li data="19"></li>
  935.                     <li data="20"></li>
  936.                     <li data="21"></li>
  937.                     <li data="22"></li>
  938.                     <li data="23"></li>
  939.                     <li data="24"></li>
  940.                     <li data="25"></li>
  941.                     <li data="26"></li>
  942.                     <li data="27"></li>
  943.                     <li data="28"></li>
  944.                     <li data="29"></li>
  945.                     <li data="30"></li>
  946.                     <li data="31"></li>
  947.                     <li data="32"></li>
  948.                     <li data="33"></li>
  949.                     <li data="34"></li>
  950.                     <li data="35"></li>
  951.                     <li data="36"></li>
  952.                     <li data="37"></li>
  953.                     <li data="38"></li>
  954.                     <li data="39"></li>
  955.                     <li data="40"></li>
  956.                     <li data="41"></li>
  957.                     <li data="42"></li>
  958.                     <li data="43"></li>
  959.                     <li data="44"></li>
  960.                     <li data="45"></li>
  961.                     <li data="46"></li>
  962.                     <li data="47"></li>
  963.                     <li data="48"></li>
  964.                     <li data="49"></li>
  965.                     <li data="50"></li>
  966.                     <button type="button" class="arrow arrowvetement-right">&nbsp;</button>
  967.                   </ul>
  968.                 </div>
  969.  
  970.                 <div class="group">
  971.                   <h2>Watch</h2>
  972.                   <div class="label-value" data-legend="">0</div>
  973.                   <ul class="montre">
  974.                     <button type="button" class="arrow arrowvetement-left">&nbsp;</button>
  975.                     <li data="0" class="active">None</li>
  976.                     <li data="1"></li>
  977.                     <li data="2"></li>
  978.                     <li data="3"></li>
  979.                     <li data="4"></li>
  980.                     <li data="5"></li>
  981.                     <li data="6"></li>
  982.                     <li data="7"></li>
  983.                     <button type="button" class="arrow arrowvetement-right">&nbsp;</button>
  984.                   </ul>
  985.                 </div>
  986.  
  987.               </div>
  988.  
  989.               <!-- Submit -->
  990.               <button class="submit">Finish</button>
  991.  
  992.           </form>
  993.         </div>
  994.  
  995.         <div class="rotation">
  996.           <div class="button">A</div>
  997.           <div class="button">E</div>
  998.           <p>Character Rotation</p>
  999.         </div>
  1000.  
  1001.         <div class="popup confirmation">
  1002.           <p>Are you sure you want to save your appearance?</p>
  1003.           <div class="buttons">
  1004.             <div class="button yes">Yes</div>
  1005.             <div class="button no">No</div>
  1006.           </div>
  1007.         </div>
  1008.  
  1009.       <!-- JS Scripts -->
  1010.       <script src="front.js" type="text/javascript"></script>
  1011.       <script src="script.js" type="text/javascript"></script>
  1012.     </body>
  1013. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top