API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 21st, 2020
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 50.41 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!