online_fitolab.html 160 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/html">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>LandGreen</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <!-- 新 Bootstrap4 核心 CSS 文件 -->
  8. <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  9. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  10. <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  11. <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
  12. <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  13. <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  14. <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  15. <!-- 引入 echarts.js -->
  16. <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  17. <script src="../static/js/online-fitolab.js"></script>
  18. <link rel="stylesheet" href="../static/css/online_fitolab.css">
  19. <script>
  20. $(function(){
  21. {% if params.stem_color %}
  22. var r = {{params.stem_r}};
  23. var g = {{params.stem_g}};
  24. var b = {{params.stem_b}};
  25. var data_rgb = r + ', ' + g + ', ' + b;
  26. r = r.toString(16);
  27. g = g.toString(16);
  28. b = b.toString(16);
  29. var rgb = r + g + b;
  30. var color = '#' + rgb.toUpperCase();
  31. $(".s_show_color").css('background-color', 'rgb{{params.stem_color}}');
  32. $("input[name=stem-color]").val(data_rgb);
  33. $(".s_span_color").text(color);
  34. {% endif %}
  35. {% if params.stem_bright_on %}
  36. $("input[name=stem-bright-on]").removeAttr('checked');
  37. {% endif %}
  38. {% if params.stem_bright_vol %}
  39. $("input[name=stem-bright-vol]").val('{{params.stem_bright_vol}}');
  40. {% endif %}
  41. {% if params.root_color %}
  42. var r = {{params.root_r}};
  43. var g = {{params.root_g}};
  44. var b = {{params.root_b}};
  45. var data_rgb = r + ', ' + g + ', ' + b;
  46. r = r.toString(16);
  47. g = g.toString(16);
  48. b = b.toString(16);
  49. var rgb = r + g + b;
  50. var color = '#' + rgb.toUpperCase();
  51. $(".r_show_color").css('background-color', 'rgb{{params.root_color}}');
  52. $("input[name=root-color]").val(data_rgb);
  53. $(".r_span_color").text(color);
  54. {% endif %}
  55. {% if params.root_bright_on %}
  56. $("input[name=root-bright-on]").removeAttr('checked');
  57. {% endif %}
  58. {% if params.root_bright_vol %}
  59. $("input[name=root-bright-vol]").val('{{params.root_bright_vol}}');
  60. {% endif %}
  61. {% if params.music1 %}
  62. if({{params.music_from_hr1}} != '00' && {{params.music_to_hr1}} != '00'){
  63. var music = $(".set-schedule")[0];
  64. var music_div = $("#music_div");
  65. var vol_div = $(".vol-div");
  66. music.style.display = 'none';
  67. music_div.css('display','block');
  68. vol_div.css('display','block');
  69. $('select[name=music1]').val('{{params.music1}}');
  70. $('select[name=music_from_hr1]').val('{{params.music_from_hr1}}');
  71. $('select[name=music_from_min1]').val('{{params.music_from_min1}}');
  72. $('select[name=music_to_hr1]').val('{{params.music_to_hr1}}');
  73. $('select[name=music_to_min1]').val('{{params.music_to_min1}}');
  74. };
  75. {% endif %}
  76. {% if params.music2 %}
  77. var add = document.getElementById('music_add1');
  78. Add(add);
  79. $('select[name=' + 'music' + i + ']').val('{{params.music2}}');
  80. $('select[name=' + 'music_from_hr' + i + ']').val('{{params.music_from_hr2}}');
  81. $('select[name=' + 'music_from_min' + i + ']').val('{{params.music_from_min2}}');
  82. $('select[name=' + 'music_to_hr' + i + ']').val('{{params.music_to_hr2}}');
  83. $('select[name=' + 'music_to_min' + i + ']').val('{{params.music_to_min2}}');
  84. {% endif %}
  85. {% if params.music3 %}
  86. var add = document.getElementById('music_add' + i);
  87. Add(add);
  88. $('select[name=' + 'music' + i + ']').val('{{params.music3}}');
  89. $('select[name=' + 'music_from_hr' + i + ']').val('{{params.music_from_hr3}}');
  90. $('select[name=' + 'music_from_min' + i + ']').val('{{params.music_from_min3}}');
  91. $('select[name=' + 'music_to_hr' + i + ']').val('{{params.music_to_hr3}}');
  92. $('select[name=' + 'music_to_min' + i + ']').val('{{params.music_to_min3}}');
  93. {% endif %}
  94. {% if params.m_vol %}
  95. $("input[name=m-vol]").val('{{params.m_vol}}');
  96. {% endif %}
  97. {% if params.camera_on %}
  98. $("input[name=camera-on]").removeAttr('checked');
  99. {% endif %}
  100. {% if params.c_duration %}
  101. $("select[name=c-duration]").val('{{params.c_duration}}');
  102. {% endif %}
  103. {% if params.vibration1 %}
  104. if({{params.v_from_hr1}} != '00' && {{params.v_to_hr1}} != '00'){
  105. var vibration = $(".set-schedule")[1];
  106. var vibration_div = $("#vibration_div");
  107. var pow_div = $(".pow-div");
  108. vibration.style.display = 'none';
  109. vibration_div.css('display','block');
  110. pow_div.css('display','block');
  111. $('select[name=vibration1]').val('{{params.vibration1}}');
  112. $('select[name=v_from_hr1]').val('{{params.v_from_hr1}}');
  113. $('select[name=v_from_min1]').val('{{params.v_from_min1}}');
  114. $('select[name=v_to_hr1]').val('{{params.v_to_hr1}}');
  115. $('select[name=v_to_min1]').val('{{params.v_to_min1}}');
  116. };
  117. {% endif %}
  118. {% if params.vibration2 %}
  119. var add = document.getElementById('v_add1');
  120. Add(add);
  121. $('select[name=' + 'vibration' + i + ']').val('{{params.vibration2}}');
  122. $('select[name=' + 'v_from_hr' + i + ']').val('{{params.v_from_hr2}}');
  123. $('select[name=' + 'v_from_min' + i + ']').val('{{params.v_from_min2}}');
  124. $('select[name=' + 'v_to_hr' + i + ']').val('{{params.v_to_hr2}}');
  125. $('select[name=' + 'v_to_min' + i + ']').val('{{params.v_to_min2}}');
  126. {% endif %}
  127. {% if params.vibration3 %}
  128. var add = document.getElementById('v_add' + i);
  129. Add(add);
  130. $('select[name=' + 'vibration' + i + ']').val('{{params.vibration3}}');
  131. $('select[name=' + 'v_from_hr' + i + ']').val('{{params.v_from_hr3}}');
  132. $('select[name=' + 'v_from_min' + i + ']').val('{{params.v_from_min3}}');
  133. $('select[name=' + 'v_to_hr' + i + ']').val('{{params.v_to_hr3}}');
  134. $('select[name=' + 'v_to_min' + i + ']').val('{{params.v_to_min3}}');
  135. {% endif %}
  136. {% if params.v_pow %}
  137. $("input[name=v-pow]").val('{{params.v_pow}}');
  138. {% endif %}
  139. {% if params.tank1_duration1 %}
  140. if({{params.tank1_from_hr1}} != '00' && {{params.tank1_to_hr1}} != '00'){
  141. var tank1 = $(".set-schedule")[2];
  142. var tank1_div = $("#tank1_div");
  143. tank1.style.display = 'none';
  144. tank1_div.css('visibility','visible');
  145. $('select[name=tank1_duration1]').val('{{params.tank1_duration1}}');
  146. $('select[name=tank1_from_hr1]').val('{{params.tank1_from_hr1}}');
  147. $('select[name=tank1_from_min1]').val('{{params.tank1_from_min1}}');
  148. $('select[name=tank1_to_hr1]').val('{{params.tank1_to_hr1}}');
  149. $('select[name=tank1_to_min1]').val('{{params.tank1_to_min1}}');
  150. };
  151. {% endif %}
  152. {% if params.tank1_duration2 %}
  153. var add = document.getElementById('tank1_add1');
  154. Add(add);
  155. $('select[name=tank1_duration' + i + ']').val('{{params.tank1_duration2}}');
  156. $('select[name=' + 'tank1_from_hr' + i + ']').val('{{params.tank1_from_hr2}}');
  157. $('select[name=' + 'tank1_from_min' + i + ']').val('{{params.tank1_from_min2}}');
  158. $('select[name=' + 'tank1_to_hr' + i + ']').val('{{params.tank1_to_hr2}}');
  159. $('select[name=' + 'tank1_to_min' + i + ']').val('{{params.tank1_to_min2}}');
  160. {% endif %}
  161. {% if params.tank1_duration3 %}
  162. var add = document.getElementById('tank1_add' + i);
  163. Add(add);
  164. $('select[name=tank1_duration' + i + ']').val('{{params.tank1_duration3}}');
  165. $('select[name=' + 'tank1_from_hr' + i + ']').val('{{params.tank1_from_hr3}}');
  166. $('select[name=' + 'tank1_from_min' + i + ']').val('{{params.tank1_from_min3}}');
  167. $('select[name=' + 'tank1_to_hr' + i + ']').val('{{params.tank1_to_hr3}}');
  168. $('select[name=' + 'tank1_to_min' + i + ']').val('{{params.tank1_to_min3}}');
  169. {% endif %}
  170. {% if params.tank2_duration1 %}
  171. if({{params.tank2_from_hr1}} != '00' && {{params.tank2_to_hr1}} != '00'){
  172. var tank2 = $(".set-schedule")[3];
  173. var tank2_div = $("#tank2_div");
  174. tank2.style.display = 'none';
  175. tank2_div.css('visibility','visible');
  176. $('select[name=tank2_duration1]').val('{{params.tank2_duration1}}');
  177. $('select[name=tank2_from_hr1]').val('{{params.tank2_from_hr1}}');
  178. $('select[name=tank2_from_min1]').val('{{params.tank2_from_min1}}');
  179. $('select[name=tank2_to_hr1]').val('{{params.tank2_to_hr1}}');
  180. $('select[name=tank2_to_min1]').val('{{params.tank2_to_min1}}');
  181. };
  182. {% endif %}
  183. {% if params.tank2_duration2 %}
  184. var add = document.getElementById('tank2_add1');
  185. Add(add);
  186. $('select[name=tank2_duration' + i + ']').val('{{params.tank2_duration2}}');
  187. $('select[name=' + 'tank2_from_hr' + i + ']').val('{{params.tank2_from_hr2}}');
  188. $('select[name=' + 'tank2_from_min' + i + ']').val('{{params.tank2_from_min2}}');
  189. $('select[name=' + 'tank2_to_hr' + i + ']').val('{{params.tank2_to_hr2}}');
  190. $('select[name=' + 'tank2_to_min' + i + ']').val('{{params.tank2_to_min2}}');
  191. {% endif %}
  192. {% if params.tank2_duration3 %}
  193. var add = document.getElementById('tank2_add' + i);
  194. Add(add);
  195. $('select[name=tank2_duration' + i + ']').val('{{params.tank1_duration3}}');
  196. $('select[name=' + 'tank2_from_hr' + i + ']').val('{{params.tank2_from_hr3}}');
  197. $('select[name=' + 'tank2_from_min' + i + ']').val('{{params.tank2_from_min3}}');
  198. $('select[name=' + 'tank2_to_hr' + i + ']').val('{{params.tank2_to_hr3}}');
  199. $('select[name=' + 'tank2_to_min' + i + ']').val('{{params.tank2_to_min3}}');
  200. {% endif %}
  201. {% if params.air_temp1 %}
  202. $("#at1-data").html(parseInt('{{params.air_temp1}}') + '&#176;' + 'C');
  203. {% endif %}
  204. {% if params.air_humidity1 %}
  205. $("#s-h-data").html(parseInt('{{params.air_humidity1}}') + '%');
  206. {% endif %}
  207. {% if params.ph %}
  208. $("#ph-data").html(parseInt('{{params.ph}}') + 'ppm');
  209. {% endif %}
  210. {% if params.do %}
  211. $("#do-data").html(parseInt('{{params.do}}') + 'ppm');
  212. {% endif %}
  213. {% if params.ec %}
  214. $("#ec-data").html(parseInt('{{params.ec}}') + 'ppm');
  215. {% endif %}
  216. {% if params.water_level %}
  217. $("#wl-data").html(parseInt('{{params.water_level}}') + 'A');
  218. {% endif %}
  219. {% if params.tds1 %}
  220. $("#tds-data").html(parseInt('{{params.tds1}}') + 'm');
  221. {% endif %}
  222. {% if params.o3 %}
  223. $("#o3-data").html(parseInt('{{params.o3}}') + 'ppm');
  224. {% endif %}
  225. {% if params.co2 %}
  226. $("s-co2-data").html(parseInt('{{params.co2}}') + 'ppm');
  227. {% endif %}
  228. {% if params.h2 %}
  229. $("#h2-data").html(parseInt('{{params.h2}}') + 'ppm');
  230. {% endif %}
  231. {% if params.weight1 %}
  232. $("#wgt1-data").html(parseInt('{{params.weight1 }}') + 'g');
  233. {% endif %}
  234. {% if params.weight2 %}
  235. $("#wgt2-data").html(parseInt('{{params.weight2 }}') + 'g');
  236. {% endif %}
  237. });
  238. </script>
  239. </head>
  240. <body>
  241. <a name="anchor-point"></a>
  242. <nav class="fixed-top">
  243. <nav class="navbar navbar-expand-md nav-top justify-content-center">
  244. <div>
  245. <span class="website_title">Fitolab Formula-G1</span>
  246. </div>
  247. </nav>
  248. <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
  249. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  250. <span class="navbar-toggler-icon"></span>
  251. </button>
  252. <div class="collapse navbar-collapse" id="collapsibleNavbar">
  253. <ul class="navbar-nav">
  254. <li class="nav-item">
  255. <a class="nav-link" href="/online_fitolab">Online Fitolab</a>
  256. </li>
  257. <li class="nav-item">
  258. <a class="nav-link" href="#">About Fitolab</a>
  259. </li>
  260. <li class="nav-item">
  261. <a class="nav-link" href="#">Contact Us</a>
  262. </li>
  263. <li class="li-block"></li>
  264. <li class="nav-item">
  265. <a class="nav-link" href="#">{{params.username}}</a>
  266. </li>
  267. <li class="nav-item">
  268. <a class="nav-link" href="/logout">Logout</a>
  269. </li>
  270. </ul>
  271. </div>
  272. </nav>
  273. </nav>
  274. <div class="main-page">
  275. <div class="page-title text-center">
  276. Online Fitolab
  277. </div>
  278. <form method="post" action="/online_fitolab">
  279. <div class="container-fluid">
  280. <button type="button" id="fitolab1">Fitolab 1</button>
  281. <div class="show-fitolab1" style="display:none;">
  282. <div class="row">
  283. <div class="col-md-1 col-sm-2 col-xs-2"></div>
  284. <div class="stem row col-xl-10 col-lg-11 col-md-11 col-sm-10 col-xs-10">
  285. <div class="col-1">
  286. <span>Stem:</span>
  287. </div>
  288. <div class="stem-top col-11 row">
  289. <div>Humidity<div id="s-h-data"></div></div>
  290. <div>Wind Flow<div id="s-wf-data"></div></div>
  291. <div class="show-tem">Temperature<div id="tem-data"></div></div>
  292. <div>ORP<div id="s-orp-data"></div></div>
  293. <div class="show-weight">Weight<div id="wgt-data"></div></div>
  294. <div>Water purity<div id="wp-data"></div></div>
  295. <div id="h2" class="show-h2" onclick="Echart('h2');">H2<div id="h2-data"></div></div>
  296. <div>N2<div id="n2-data"></div></div>
  297. <div>C2H4<div id="c2h4-data"></div></div>
  298. <div>O3<div id="o3-data"></div></div>
  299. <div>O2<div id="o2-data"></div></div>
  300. <div>CO2<div id="s-co2-data"></div></div>
  301. </div>
  302. <div class="col-1"></div>
  303. <div class="stem-bottom col-11">
  304. <input type="button" value="Light Control" class="stem-light-btn">
  305. <input type="button" value="Music Control" class="stem-music-btn">
  306. <input type="button" value="Camera Control" class="stem-camera-btn">
  307. <input type="button" value="Plant Stress Monitoring" class="stem-stress-btn">
  308. </div>
  309. </div>
  310. <div class="col-2"></div>
  311. </div>
  312. <div class="row">
  313. <div class="col-md-1 col-sm-2 col-xs-2"></div>
  314. <div class="root row col-xl-10 col-lg-11 col-md-11 col-sm-10 col-xs-10">
  315. <div class="col-1">
  316. <span>Root:</span>
  317. </div>
  318. <div class="root-top col-11 row">
  319. <div>Humidity<div id="r-h-data"></div></div>
  320. <div>Air Temperature<div id="at-data"></div></div>
  321. <div>Water Temperature<div id="wt-data" style="margin-top:11px;"></div></div>
  322. <div>ORP<div id="r-orp-data"></div></div>
  323. <div>EC<div id="ec-data"></div></div>
  324. <div>DO<div id="do-data"></div></div>
  325. <div>UV Lamp<div id="ed-data"></div></div>
  326. <div>Wind Flow<div id="r-wf-data"></div></div>
  327. <div>Water level<div id="wl-data"></div></div>
  328. <div>Fluorine<div id="f-data"></div></div>
  329. <div>PH<div id="ph-data"></div></div>
  330. <div>Turbidity<div id="tbd-data"></div></div>
  331. <div>NH4<div id="nh4-data"></div></div>
  332. <div>CO2<div id="r-co2-data"></div></div>
  333. <div>NO3<div id="no3-data"></div></div>
  334. <div>NO2<div id="no2-data"></div></div>
  335. </div>
  336. <div class="col-1"></div>
  337. <div class="root-bottom col-11">
  338. <input type="button" value="Light Control" class="root-light-btn"><a name="anchor" href="#anchor-point"></a>
  339. <input type="button" value="Vibration" class="root-vibration-btn">
  340. <input type="button" value="Water control configuration" class="root-water-btn">
  341. </div>
  342. </div>
  343. <div class="col-2"></div>
  344. </div>
  345. <div>
  346. <div id="stem-light-control" class="show-info" style="display: none;">
  347. <br>
  348. <h1>Light Control</h1>
  349. <div class="light-control_nav">
  350. <ul class="list">
  351. <li><a class="recomendations">Recomendations</a></li>
  352. <li class="current_li"><a class="current color">Color</a></li>
  353. <li><a class="brightness">Brightness</a></li>
  354. </ul>
  355. </div>
  356. <div class="recomendation_info" style="display: none;">
  357. <div class="switch_div_left">
  358. <span>Option1</span>
  359. <div class="switch">
  360. <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  361. <label for="cmn-toggle-1"></label>
  362. </div>
  363. <div class="switch">
  364. <input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked>
  365. <label for="cmn-toggle-2"></label>
  366. </div>
  367. <div class="switch">
  368. <input id="cmn-toggle-3" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
  369. <label for="cmn-toggle-3" data-on="Yes" data-off="No"></label>
  370. </div>
  371. </div>
  372. <div class="switch_div_right">
  373. <span>Option2</span>
  374. <div class="switch">
  375. <input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round" type="checkbox">
  376. <label for="cmn-toggle-4"></label>
  377. </div>
  378. <div class="switch">
  379. <input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked>
  380. <label for="cmn-toggle-5"></label>
  381. </div>
  382. <div class="switch">
  383. <input id="cmn-toggle-6" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
  384. <label for="cmn-toggle-6" data-on="Yes" data-off="No"></label>
  385. </div>
  386. </div>
  387. </div>
  388. <div class="color_info">
  389. <div class="color-top">
  390. <div class="all_color">
  391. <div class="color-group">
  392. <div class="color-block">
  393. <div class="s-js-color" style="background-color: #CCFF00" data-hex="#CCFF00" data-rgb="204, 255, 0" data-hsl="72, 100%, 50%"></div>
  394. </div>
  395. <div class="color-block">
  396. <div class="s-js-color" style="background-color: #CCFF33" data-hex="#CCFF33" data-rgb="204, 255, 51" data-hsl="75, 100%, 60%"></div>
  397. </div>
  398. <div class="color-block">
  399. <div class="s-js-color" style="background-color: #CCFF66" data-hex="#CCFF66" data-rgb="204, 255, 102" data-hsl="80, 100%, 70%"></div>
  400. </div>
  401. <div class="color-block">
  402. <div class="s-js-color" style="background-color: #CCFF99" data-hex="#CCFF99" data-rgb="204, 255, 153" data-hsl="90, 100%, 80%"></div>
  403. </div>
  404. <div class="color-block">
  405. <div class="s-js-color" style="background-color: #CCFFCC" data-hex="#CCFFCC" data-rgb="204, 255, 204" data-hsl="120, 100%, 90%"></div>
  406. </div>
  407. <div class="color-block">
  408. <div class="s-js-color" style="background-color: #CCFFFF" data-hex="#CCFFFF" data-rgb="204, 255, 255" data-hsl="180, 100%, 90%"></div>
  409. </div>
  410. <div class="color-block">
  411. <div class="s-js-color" style="background-color: #FFFFFF" data-hex="#FFFFFF" data-rgb="255, 255, 255" data-hsl="0, 0%, 100%"></div>
  412. </div>
  413. <div class="color-block">
  414. <div class="s-js-color" style="background-color: #FFFFCC" data-hex="#FFFFCC" data-rgb="255, 255, 204" data-hsl="60, 100%, 90%"></div>
  415. </div>
  416. <div class="color-block">
  417. <div class="s-js-color" style="background-color: #FFFF99" data-hex="#FFFF99" data-rgb="255, 255, 153" data-hsl="60, 100%, 80%"></div>
  418. </div>
  419. <div class="color-block">
  420. <div class="s-js-color" style="background-color: #FFFF66" data-hex="#FFFF66" data-rgb="255, 255, 102" data-hsl="60, 100%, 70%"></div>
  421. </div>
  422. <div class="color-block">
  423. <div class="s-js-color" style="background-color: #FFFF33" data-hex="#FFFF33" data-rgb="255, 255, 51" data-hsl="60, 100%, 60%"></div>
  424. </div>
  425. <div class="color-block">
  426. <div class="s-js-color" style="background-color: #FFFF00" data-hex="#FFFF00" data-rgb="255, 255, 0" data-hsl="60, 100%, 50%"></div>
  427. </div>
  428. </div>
  429. <div class="color-group">
  430. <div class="color-block">
  431. <div class="s-js-color" style="background-color: #CCCC00" data-hex="#CCCC00" data-rgb="204, 204, 0" data-hsl="60, 100%, 40%"></div>
  432. </div>
  433. <div class="color-block">
  434. <div class="s-js-color" style="background-color: #CCCC33" data-hex="#CCCC33" data-rgb="204, 204, 51" data-hsl="60, 60%, 50%"></div>
  435. </div>
  436. <div class="color-block">
  437. <div class="s-js-color" style="background-color: #CCCC66" data-hex="#CCCC66" data-rgb="204, 204, 102" data-hsl="60, 50%, 60%"></div>
  438. </div>
  439. <div class="color-block">
  440. <div class="s-js-color" style="background-color: #CCCC99" data-hex="#CCCC99" data-rgb="204, 204, 153" data-hsl="60, 33%, 70%"></div>
  441. </div>
  442. <div class="color-block">
  443. <div class="s-js-color" style="background-color: #CCCCCC" data-hex="#CCCCCC" data-rgb="204, 204, 204" data-hsl="0, 0%, 80%"></div>
  444. </div>
  445. <div class="color-block">
  446. <div class="s-js-color" style="background-color: #CCCCFF" data-hex="#CCCCFF" data-rgb="204, 204, 255" data-hsl="240, 100%, 90%"></div>
  447. </div>
  448. <div class="color-block">
  449. <div class="s-js-color" style="background-color: #FFCCFF" data-hex="#FFCCFF" data-rgb="255, 204, 255" data-hsl="300, 100%, 90%"></div>
  450. </div>
  451. <div class="color-block">
  452. <div class="s-js-color" style="background-color: #FFCCCC" data-hex="#FFCCCC" data-rgb="255, 204, 204" data-hsl="0, 100%, 90%"></div>
  453. </div>
  454. <div class="color-block">
  455. <div class="s-js-color" style="background-color: #FFCC99" data-hex="#FFCC99" data-rgb="255, 204, 153" data-hsl="30, 100%, 80%"></div>
  456. </div>
  457. <div class="color-block">
  458. <div class="s-js-color" style="background-color: #FFCC66" data-hex="#FFCC66" data-rgb="255, 204, 102" data-hsl="40, 100%, 70%"></div>
  459. </div>
  460. <div class="color-block">
  461. <div class="s-js-color" style="background-color: #FFCC33" data-hex="#FFCC33" data-rgb="255, 204, 51" data-hsl="45, 100%, 60%"></div>
  462. </div>
  463. <div class="color-block">
  464. <div class="s-js-color" style="background-color: #FFCC00" data-hex="#FFCC00" data-rgb="255, 204, 0" data-hsl="48, 100%, 50%"></div>
  465. </div>
  466. </div>
  467. <div class="color-group">
  468. <div class="color-block">
  469. <div class="s-js-color" style="background-color: #CC9900" data-hex="#CC9900" data-rgb="204, 153, 0" data-hsl="45, 100%, 40%"></div>
  470. </div>
  471. <div class="color-block">
  472. <div class="s-js-color" style="background-color: #CC9933" data-hex="#CC9933" data-rgb="204, 153, 51" data-hsl="40, 60%, 50%"></div>
  473. </div>
  474. <div class="color-block">
  475. <div class="s-js-color" style="background-color: #CC9966" data-hex="#CC9966" data-rgb="204, 153, 102" data-hsl="30, 50%, 60%"></div>
  476. </div>
  477. <div class="color-block">
  478. <div class="s-js-color" style="background-color: #CC9999" data-hex="#CC9999" data-rgb="204, 153, 153" data-hsl="0, 33%, 70%"></div>
  479. </div>
  480. <div class="color-block">
  481. <div class="s-js-color" style="background-color: #CC99CC" data-hex="#CC99CC" data-rgb="204, 153, 204" data-hsl="300, 33%, 70%"></div>
  482. </div>
  483. <div class="color-block">
  484. <div class="s-js-color" style="background-color: #CC99FF" data-hex="#CC99FF" data-rgb="204, 153, 255" data-hsl="270, 100%, 80%"></div>
  485. </div>
  486. <div class="color-block">
  487. <div class="s-js-color" style="background-color: #FF99FF" data-hex="#FF99FF" data-rgb="255, 153, 255" data-hsl="300, 100%, 80%"></div>
  488. </div>
  489. <div class="color-block">
  490. <div class="s-js-color" style="background-color: #FF99CC" data-hex="#FF99CC" data-rgb="255, 153, 204" data-hsl="330, 100%, 80%"></div>
  491. </div>
  492. <div class="color-block">
  493. <div class="s-js-color" style="background-color: #FF9999" data-hex="#FF9999" data-rgb="255, 153, 153" data-hsl="0, 100%, 80%"></div>
  494. </div>
  495. <div class="color-block">
  496. <div class="s-js-color" style="background-color: #FF9966" data-hex="#FF9966" data-rgb="255, 153, 102" data-hsl="20, 100%, 70%"></div>
  497. </div>
  498. <div class="color-block">
  499. <div class="s-js-color" style="background-color: #FF9933" data-hex="#FF9933" data-rgb="255, 153, 51" data-hsl="30, 100%, 60%"></div>
  500. </div>
  501. <div class="color-block">
  502. <div class="s-js-color" style="background-color: #FF9900" data-hex="#FF9900" data-rgb="255, 153, 0" data-hsl="36, 100%, 50%"></div>
  503. </div>
  504. </div>
  505. <div class="color-group">
  506. <div class="color-block">
  507. <div class="s-js-color" style="background-color: #CC6600" data-hex="#CC6600" data-rgb="204, 102, 0" data-hsl="30, 100%, 40%"></div>
  508. </div>
  509. <div class="color-block">
  510. <div class="s-js-color" style="background-color: #CC6633" data-hex="#CC6633" data-rgb="204, 102, 51" data-hsl="20, 60%, 50%"></div>
  511. </div>
  512. <div class="color-block">
  513. <div class="s-js-color" style="background-color: #CC6666" data-hex="#CC6666" data-rgb="204, 102, 102" data-hsl="0, 50%, 60%"></div>
  514. </div>
  515. <div class="color-block">
  516. <div class="s-js-color" style="background-color: #CC6699" data-hex="#CC6699" data-rgb="204, 102, 153" data-hsl="330, 50%, 60%"></div>
  517. </div>
  518. <div class="color-block">
  519. <div class="s-js-color" style="background-color: #CC66CC" data-hex="#CC66CC" data-rgb="204, 102, 204" data-hsl="300, 50%, 60%"></div>
  520. </div>
  521. <div class="color-block">
  522. <div class="s-js-color" style="background-color: #CC66FF" data-hex="#CC66FF" data-rgb="204, 102, 255" data-hsl="280, 100%, 70%"></div>
  523. </div>
  524. <div class="color-block">
  525. <div class="s-js-color" style="background-color: #FF66FF" data-hex="#FF66FF" data-rgb="255, 102, 255" data-hsl="300, 100%, 70%"></div>
  526. </div>
  527. <div class="color-block">
  528. <div class="s-js-color" style="background-color: #FF66CC" data-hex="#FF66CC" data-rgb="255, 102, 204" data-hsl="320, 100%, 70%"></div>
  529. </div>
  530. <div class="color-block">
  531. <div class="s-js-color" style="background-color: #FF6699" data-hex="#FF6699" data-rgb="255, 102, 153" data-hsl="340, 100%, 70%"></div>
  532. </div>
  533. <div class="color-block">
  534. <div class="s-js-color" style="background-color: #FF6666" data-hex="#FF6666" data-rgb="255, 102, 102" data-hsl="0, 100%, 70%"></div>
  535. </div>
  536. <div class="color-block">
  537. <div class="s-js-color" style="background-color: #FF6633" data-hex="#FF6633" data-rgb="255, 102, 51" data-hsl="15, 100%, 60%"></div>
  538. </div>
  539. <div class="color-block">
  540. <div class="s-js-color" style="background-color: #FF6600" data-hex="#FF6600" data-rgb="255, 102, 0" data-hsl="24, 100%, 50%"></div>
  541. </div>
  542. </div>
  543. <div class="color-group">
  544. <div class="color-block">
  545. <div class="s-js-color" style="background-color: #CC3300" data-hex="#CC3300" data-rgb="204, 51, 0" data-hsl="15, 100%, 40%"></div>
  546. </div>
  547. <div class="color-block">
  548. <div class="s-js-color" style="background-color: #CC3333" data-hex="#CC3333" data-rgb="204, 51, 51" data-hsl="0, 60%, 50%"></div>
  549. </div>
  550. <div class="color-block">
  551. <div class="s-js-color" style="background-color: #CC3366" data-hex="#CC3366" data-rgb="204, 51, 102" data-hsl="340, 60%, 50%"></div>
  552. </div>
  553. <div class="color-block">
  554. <div class="s-js-color" style="background-color: #CC3399" data-hex="#CC3399" data-rgb="204, 51, 153" data-hsl="320, 60%, 50%"></div>
  555. </div>
  556. <div class="color-block">
  557. <div class="s-js-color" style="background-color: #CC33CC" data-hex="#CC33CC" data-rgb="204, 51, 204" data-hsl="300, 60%, 50%"></div>
  558. </div>
  559. <div class="color-block">
  560. <div class="s-js-color" style="background-color: #CC33FF" data-hex="#CC33FF" data-rgb="204, 51, 255" data-hsl="285, 100%, 60%"></div>
  561. </div>
  562. <div class="color-block">
  563. <div class="s-js-color" style="background-color: #FF33FF" data-hex="#FF33FF" data-rgb="255, 51, 255" data-hsl="300, 100%, 60%"></div>
  564. </div>
  565. <div class="color-block">
  566. <div class="s-js-color" style="background-color: #FF33CC" data-hex="#FF33CC" data-rgb="255, 51, 204" data-hsl="315, 100%, 60%"></div>
  567. </div>
  568. <div class="color-block">
  569. <div class="s-js-color" style="background-color: #FF3399" data-hex="#FF3399" data-rgb="255, 51, 153" data-hsl="330, 100%, 60%"></div>
  570. </div>
  571. <div class="color-block">
  572. <div class="s-js-color" style="background-color: #FF3366" data-hex="#FF3366" data-rgb="255, 51, 102" data-hsl="345, 100%, 60%"></div>
  573. </div>
  574. <div class="color-block">
  575. <div class="s-js-color" style="background-color: #FF3333" data-hex="#FF3333" data-rgb="255, 51, 51" data-hsl="0, 100%, 60%"></div>
  576. </div>
  577. <div class="color-block">
  578. <div class="s-js-color" style="background-color: #FF3300" data-hex="#FF3300" data-rgb="255, 51, 0" data-hsl="12, 100%, 50%"></div>
  579. </div>
  580. </div>
  581. <div class="color-group">
  582. <div class="color-block">
  583. <div class="s-js-color" style="background-color: #CC0000" data-hex="#CC0000" data-rgb="204, 0, 0" data-hsl="0, 100%, 40%"></div>
  584. </div>
  585. <div class="color-block">
  586. <div class="s-js-color" style="background-color: #CC0033" data-hex="#CC0033" data-rgb="204, 0, 51" data-hsl="345, 100%, 40%"></div>
  587. </div>
  588. <div class="color-block">
  589. <div class="s-js-color" style="background-color: #CC0066" data-hex="#CC0066" data-rgb="204, 0, 102" data-hsl="330, 100%, 40%"></div>
  590. </div>
  591. <div class="color-block">
  592. <div class="s-js-color" style="background-color: #CC0099" data-hex="#CC0099" data-rgb="204, 0, 153" data-hsl="315, 100%, 40%"></div>
  593. </div>
  594. <div class="color-block">
  595. <div class="s-js-color" style="background-color: #CC00CC" data-hex="#CC00CC" data-rgb="204, 0, 204" data-hsl="300, 100%, 40%"></div>
  596. </div>
  597. <div class="color-block">
  598. <div class="s-js-color" style="background-color: #CC00FF" data-hex="#CC00FF" data-rgb="204, 0, 255" data-hsl="288, 100%, 50%"></div>
  599. </div>
  600. <div class="color-block">
  601. <div class="s-js-color" style="background-color: #FF00FF" data-hex="#FF00FF" data-rgb="255, 0, 255" data-hsl="300, 100%, 50%"></div>
  602. </div>
  603. <div class="color-block">
  604. <div class="s-js-color" style="background-color: #FF00CC" data-hex="#FF00CC" data-rgb="255, 0, 204" data-hsl="312, 100%, 50%"></div>
  605. </div>
  606. <div class="color-block">
  607. <div class="s-js-color" style="background-color: #FF0099" data-hex="#FF0099" data-rgb="255, 0, 153" data-hsl="324, 100%, 50%"></div>
  608. </div>
  609. <div class="color-block">
  610. <div class="s-js-color" style="background-color: #FF0066" data-hex="#FF0066" data-rgb="255, 0, 102" data-hsl="336, 100%, 50%"></div>
  611. </div>
  612. <div class="color-block">
  613. <div class="s-js-color" style="background-color: #FF0033" data-hex="#FF0033" data-rgb="255, 0, 51" data-hsl="348, 100%, 50%"></div>
  614. </div>
  615. <div class="color-block">
  616. <div class="s-js-color" style="background-color: #FF0000" data-hex="#FF0000" data-rgb="255, 0, 0" data-hsl="0, 100%, 50%"></div>
  617. </div>
  618. </div>
  619. <div class="color-group">
  620. <div class="color-block">
  621. <div class="s-js-color" style="background-color: #660000" data-hex="#660000" data-rgb="102, 0, 0" data-hsl="0, 100%, 20%"></div>
  622. </div>
  623. <div class="color-block">
  624. <div class="s-js-color" style="background-color: #660033" data-hex="#660033" data-rgb="102, 0, 51" data-hsl="330, 100%, 20%"></div>
  625. </div>
  626. <div class="color-block">
  627. <div class="s-js-color" style="background-color: #660066" data-hex="#660066" data-rgb="102, 0, 102" data-hsl="300, 100%, 20%"></div>
  628. </div>
  629. <div class="color-block">
  630. <div class="s-js-color" style="background-color: #660099" data-hex="#660099" data-rgb="102, 0, 153" data-hsl="280, 100%, 30%"></div>
  631. </div>
  632. <div class="color-block">
  633. <div class="s-js-color" style="background-color: #6600CC" data-hex="#6600CC" data-rgb="102, 0, 204" data-hsl="270, 100%, 40%"></div>
  634. </div>
  635. <div class="color-block">
  636. <div class="s-js-color" style="background-color: #6600FF" data-hex="#6600FF" data-rgb="102, 0, 255" data-hsl="264, 100%, 50%"></div>
  637. </div>
  638. <div class="color-block">
  639. <div class="s-js-color" style="background-color: #9900FF" data-hex="#9900FF" data-rgb="153, 0, 255" data-hsl="276, 100%, 50%"></div>
  640. </div>
  641. <div class="color-block">
  642. <div class="s-js-color" style="background-color: #9900CC" data-hex="#9900CC" data-rgb="153, 0, 204" data-hsl="285, 100%, 40%"></div>
  643. </div>
  644. <div class="color-block">
  645. <div class="s-js-color" style="background-color: #990099" data-hex="#990099" data-rgb="153, 0, 153" data-hsl="300, 100%, 30%"></div>
  646. </div>
  647. <div class="color-block">
  648. <div class="s-js-color" style="background-color: #990066" data-hex="#990066" data-rgb="153, 0, 102" data-hsl="320, 100%, 30%"></div>
  649. </div>
  650. <div class="color-block">
  651. <div class="s-js-color" style="background-color: #990033" data-hex="#990033" data-rgb="153, 0, 51" data-hsl="340, 100%, 30%"></div>
  652. </div>
  653. <div class="color-block">
  654. <div class="s-js-color" style="background-color: #990000" data-hex="#990000" data-rgb="153, 0, 0" data-hsl="0, 100%, 30%"></div>
  655. </div>
  656. </div>
  657. <div class="color-group">
  658. <div class="color-block">
  659. <div class="s-js-color" style="background-color: #663300" data-hex="#663300" data-rgb="102, 51, 0" data-hsl="30, 100%, 20%"></div>
  660. </div>
  661. <div class="color-block">
  662. <div class="s-js-color" style="background-color: #663333" data-hex="#663333" data-rgb="102, 51, 51" data-hsl="0, 33%, 30%"></div>
  663. </div>
  664. <div class="color-block">
  665. <div class="s-js-color" style="background-color: #663366" data-hex="#663366" data-rgb="102, 51, 102" data-hsl="300, 33%, 30%"></div>
  666. </div>
  667. <div class="color-block">
  668. <div class="s-js-color" style="background-color: #663399" data-hex="#663399" data-rgb="102, 51, 153" data-hsl="270, 50%, 40%"></div>
  669. </div>
  670. <div class="color-block">
  671. <div class="s-js-color" style="background-color: #6633CC" data-hex="#6633CC" data-rgb="102, 51, 204" data-hsl="260, 60%, 50%"></div>
  672. </div>
  673. <div class="color-block">
  674. <div class="s-js-color" style="background-color: #6633FF" data-hex="#6633FF" data-rgb="102, 51, 255" data-hsl="255, 100%, 60%"></div>
  675. </div>
  676. <div class="color-block">
  677. <div class="s-js-color" style="background-color: #9933FF" data-hex="#9933FF" data-rgb="153, 51, 255" data-hsl="270, 100%, 60%"></div>
  678. </div>
  679. <div class="color-block">
  680. <div class="s-js-color" style="background-color: #9933CC" data-hex="#9933CC" data-rgb="153, 51, 204" data-hsl="280, 60%, 50%"></div>
  681. </div>
  682. <div class="color-block">
  683. <div class="s-js-color" style="background-color: #993399" data-hex="#993399" data-rgb="153, 51, 153" data-hsl="300, 50%, 40%"></div>
  684. </div>
  685. <div class="color-block">
  686. <div class="s-js-color" style="background-color: #993366" data-hex="#993366" data-rgb="153, 51, 102" data-hsl="330, 50%, 40%"></div>
  687. </div>
  688. <div class="color-block">
  689. <div class="s-js-color" style="background-color: #993333" data-hex="#993333" data-rgb="153, 51, 51" data-hsl="0, 50%, 40%"></div>
  690. </div>
  691. <div class="color-block">
  692. <div class="s-js-color" style="background-color: #993300" data-hex="#993300" data-rgb="153, 51, 0" data-hsl="20, 100%, 30%"></div>
  693. </div>
  694. </div>
  695. <div class="color-group">
  696. <div class="color-block">
  697. <div class="s-js-color" style="background-color: #666600" data-hex="#666600" data-rgb="102, 102, 0" data-hsl="60, 100%, 20%"></div>
  698. </div>
  699. <div class="color-block">
  700. <div class="s-js-color" style="background-color: #666633" data-hex="#666633" data-rgb="102, 102, 51" data-hsl="60, 33%, 30%"></div>
  701. </div>
  702. <div class="color-block">
  703. <div class="s-js-color" style="background-color: #666666" data-hex="#666666" data-rgb="102, 102, 102" data-hsl="0, 0%, 40%"></div>
  704. </div>
  705. <div class="color-block">
  706. <div class="s-js-color" style="background-color: #666699" data-hex="#666699" data-rgb="102, 102, 153" data-hsl="240, 20%, 50%"></div>
  707. </div>
  708. <div class="color-block">
  709. <div class="s-js-color" style="background-color: #6666CC" data-hex="#6666CC" data-rgb="102, 102, 204" data-hsl="240, 50%, 60%"></div>
  710. </div>
  711. <div class="color-block">
  712. <div class="s-js-color" style="background-color: #6666FF" data-hex="#6666FF" data-rgb="102, 102, 255" data-hsl="240, 100%, 70%"></div>
  713. </div>
  714. <div class="color-block">
  715. <div class="s-js-color" style="background-color: #9966FF" data-hex="#9966FF" data-rgb="153, 102, 255" data-hsl="260, 100%, 70%"></div>
  716. </div>
  717. <div class="color-block">
  718. <div class="s-js-color" style="background-color: #9966CC" data-hex="#9966CC" data-rgb="153, 102, 204" data-hsl="270, 50%, 60%"></div>
  719. </div>
  720. <div class="color-block">
  721. <div class="s-js-color" style="background-color: #996699" data-hex="#996699" data-rgb="153, 102, 153" data-hsl="300, 20%, 50%"></div>
  722. </div>
  723. <div class="color-block">
  724. <div class="s-js-color" style="background-color: #996666" data-hex="#996666" data-rgb="153, 102, 102" data-hsl="0, 20%, 50%"></div>
  725. </div>
  726. <div class="color-block">
  727. <div class="s-js-color" style="background-color: #996633" data-hex="#996633" data-rgb="153, 102, 51" data-hsl="30, 50%, 40%"></div>
  728. </div>
  729. <div class="color-block">
  730. <div class="s-js-color" style="background-color: #996600" data-hex="#996600" data-rgb="153, 102, 0" data-hsl="40, 100%, 30%"></div>
  731. </div>
  732. </div>
  733. <div class="color-group">
  734. <div class="color-block">
  735. <div class="s-js-color" style="background-color: #669900" data-hex="#669900" data-rgb="102, 153, 0" data-hsl="80, 100%, 30%"></div>
  736. </div>
  737. <div class="color-block">
  738. <div class="s-js-color" style="background-color: #669933" data-hex="#669933" data-rgb="102, 153, 51" data-hsl="90, 50%, 40%"></div>
  739. </div>
  740. <div class="color-block">
  741. <div class="s-js-color" style="background-color: #669966" data-hex="#669966" data-rgb="102, 153, 102" data-hsl="120, 20%, 50%"></div>
  742. </div>
  743. <div class="color-block">
  744. <div class="s-js-color" style="background-color: #669999" data-hex="#669999" data-rgb="102, 153, 153" data-hsl="180, 20%, 50%"></div>
  745. </div>
  746. <div class="color-block">
  747. <div class="s-js-color" style="background-color: #6699CC" data-hex="#6699CC" data-rgb="102, 153, 204" data-hsl="210, 50%, 60%"></div>
  748. </div>
  749. <div class="color-block">
  750. <div class="s-js-color" style="background-color: #6699FF" data-hex="#6699FF" data-rgb="102, 153, 255" data-hsl="220, 100%, 70%"></div>
  751. </div>
  752. <div class="color-block">
  753. <div class="s-js-color" style="background-color: #9999FF" data-hex="#9999FF" data-rgb="153, 153, 255" data-hsl="240, 100%, 80%"></div>
  754. </div>
  755. <div class="color-block">
  756. <div class="s-js-color" style="background-color: #9999CC" data-hex="#9999CC" data-rgb="153, 153, 204" data-hsl="240, 33%, 70%"></div>
  757. </div>
  758. <div class="color-block">
  759. <div class="s-js-color" style="background-color: #999999" data-hex="#999999" data-rgb="153, 153, 153" data-hsl="0, 0%, 60%"></div>
  760. </div>
  761. <div class="color-block">
  762. <div class="s-js-color" style="background-color: #999966" data-hex="#999966" data-rgb="153, 153, 102" data-hsl="60, 20%, 50%"></div>
  763. </div>
  764. <div class="color-block">
  765. <div class="s-js-color" style="background-color: #999933" data-hex="#999933" data-rgb="153, 153, 51" data-hsl="60, 50%, 40%"></div>
  766. </div>
  767. <div class="color-block">
  768. <div class="s-js-color" style="background-color: #999900" data-hex="#999900" data-rgb="153, 153, 0" data-hsl="60, 100%, 30%"></div>
  769. </div>
  770. </div>
  771. <div class="color-group">
  772. <div class="color-block">
  773. <div class="s-js-color" style="background-color: #66CC00" data-hex="#66CC00" data-rgb="102, 204, 0" data-hsl="90, 100%, 40%"></div>
  774. </div>
  775. <div class="color-block">
  776. <div class="s-js-color" style="background-color: #66CC33" data-hex="#66CC33" data-rgb="102, 204, 51" data-hsl="100, 60%, 50%"></div>
  777. </div>
  778. <div class="color-block">
  779. <div class="s-js-color" style="background-color: #66CC66" data-hex="#66CC66" data-rgb="102, 204, 102" data-hsl="120, 50%, 60%"></div>
  780. </div>
  781. <div class="color-block">
  782. <div class="s-js-color" style="background-color: #66CC99" data-hex="#66CC99" data-rgb="102, 204, 153" data-hsl="150, 50%, 60%"></div>
  783. </div>
  784. <div class="color-block">
  785. <div class="s-js-color" style="background-color: #66CCCC" data-hex="#66CCCC" data-rgb="102, 204, 204" data-hsl="180, 50%, 60%"></div>
  786. </div>
  787. <div class="color-block">
  788. <div class="s-js-color" style="background-color: #66CCFF" data-hex="#66CCFF" data-rgb="102, 204, 255" data-hsl="200, 100%, 70%"></div>
  789. </div>
  790. <div class="color-block">
  791. <div class="s-js-color" style="background-color: #99CCFF" data-hex="#99CCFF" data-rgb="153, 204, 255" data-hsl="210, 100%, 80%"></div>
  792. </div>
  793. <div class="color-block">
  794. <div class="s-js-color" style="background-color: #99CCCC" data-hex="#99CCCC" data-rgb="153, 204, 204" data-hsl="180, 33%, 70%"></div>
  795. </div>
  796. <div class="color-block">
  797. <div class="s-js-color" style="background-color: #99CC99" data-hex="#99CC99" data-rgb="153, 204, 153" data-hsl="120, 33%, 70%"></div>
  798. </div>
  799. <div class="color-block">
  800. <div class="s-js-color" style="background-color: #99CC66" data-hex="#99CC66" data-rgb="153, 204, 102" data-hsl="90, 50%, 60%"></div>
  801. </div>
  802. <div class="color-block">
  803. <div class="s-js-color" style="background-color: #99CC33" data-hex="#99CC33" data-rgb="153, 204, 51" data-hsl="80, 60%, 50%"></div>
  804. </div>
  805. <div class="color-block">
  806. <div class="s-js-color" style="background-color: #99CC00" data-hex="#99CC00" data-rgb="153, 204, 0" data-hsl="75, 100%, 40%"></div>
  807. </div>
  808. </div>
  809. <div class="color-group">
  810. <div class="color-block">
  811. <div class="s-js-color" style="background-color: #66FF00" data-hex="#66FF00" data-rgb="102, 255, 0" data-hsl="96, 100%, 50%"></div>
  812. </div>
  813. <div class="color-block">
  814. <div class="s-js-color" style="background-color: #66FF33" data-hex="#66FF33" data-rgb="102, 255, 51" data-hsl="105, 100%, 60%"></div>
  815. </div>
  816. <div class="color-block">
  817. <div class="s-js-color" style="background-color: #66FF66" data-hex="#66FF66" data-rgb="102, 255, 102" data-hsl="120, 100%, 70%"></div>
  818. </div>
  819. <div class="color-block">
  820. <div class="s-js-color" style="background-color: #66FF99" data-hex="#66FF99" data-rgb="102, 255, 153" data-hsl="140, 100%, 70%"></div>
  821. </div>
  822. <div class="color-block">
  823. <div class="s-js-color" style="background-color: #66FFCC" data-hex="#66FFCC" data-rgb="102, 255, 204" data-hsl="160, 100%, 70%"></div>
  824. </div>
  825. <div class="color-block">
  826. <div class="s-js-color" style="background-color: #66FFFF" data-hex="#66FFFF" data-rgb="102, 255, 255" data-hsl="180, 100%, 70%"></div>
  827. </div>
  828. <div class="color-block">
  829. <div class="s-js-color" style="background-color: #99FFFF" data-hex="#99FFFF" data-rgb="153, 255, 255" data-hsl="180, 100%, 80%"></div>
  830. </div>
  831. <div class="color-block">
  832. <div class="s-js-color" style="background-color: #99FFCC" data-hex="#99FFCC" data-rgb="153, 255, 204" data-hsl="150, 100%, 80%"></div>
  833. </div>
  834. <div class="color-block">
  835. <div class="s-js-color" style="background-color: #99FF99" data-hex="#99FF99" data-rgb="153, 255, 153" data-hsl="120, 100%, 80%"></div>
  836. </div>
  837. <div class="color-block">
  838. <div class="s-js-color" style="background-color: #99FF66" data-hex="#99FF66" data-rgb="153, 255, 102" data-hsl="100, 100%, 70%"></div>
  839. </div>
  840. <div class="color-block">
  841. <div class="s-js-color" style="background-color: #99FF33" data-hex="#99FF33" data-rgb="153, 255, 51" data-hsl="90, 100%, 60%"></div>
  842. </div>
  843. <div class="color-block">
  844. <div class="s-js-color" style="background-color: #99FF00" data-hex="#99FF00" data-rgb="153, 255, 0" data-hsl="84, 100%, 50%"></div>
  845. </div>
  846. </div>
  847. <div class="color-group">
  848. <div class="color-block">
  849. <div class="s-js-color" style="background-color: #00FF00" data-hex="#00FF00" data-rgb="0, 255, 0" data-hsl="120, 100%, 50%"></div>
  850. </div>
  851. <div class="color-block">
  852. <div class="s-js-color" style="background-color: #00FF33" data-hex="#00FF33" data-rgb="0, 255, 51" data-hsl="132, 100%, 50%"></div>
  853. </div>
  854. <div class="color-block">
  855. <div class="s-js-color" style="background-color: #00FF66" data-hex="#00FF66" data-rgb="0, 255, 102" data-hsl="144, 100%, 50%"></div>
  856. </div>
  857. <div class="color-block">
  858. <div class="s-js-color" style="background-color: #00FF99" data-hex="#00FF99" data-rgb="0, 255, 153" data-hsl="156, 100%, 50%"></div>
  859. </div>
  860. <div class="color-block">
  861. <div class="s-js-color" style="background-color: #00FFCC" data-hex="#00FFCC" data-rgb="0, 255, 204" data-hsl="168, 100%, 50%"></div>
  862. </div>
  863. <div class="color-block">
  864. <div class="s-js-color" style="background-color: #00FFFF" data-hex="#00FFFF" data-rgb="0, 255, 255" data-hsl="180, 100%, 50%"></div>
  865. </div>
  866. <div class="color-block">
  867. <div class="s-js-color" style="background-color: #33FFFF" data-hex="#33FFFF" data-rgb="51, 255, 255" data-hsl="180, 100%, 60%"></div>
  868. </div>
  869. <div class="color-block">
  870. <div class="s-js-color" style="background-color: #33FFCC" data-hex="#33FFCC" data-rgb="51, 255, 204" data-hsl="165, 100%, 60%"></div>
  871. </div>
  872. <div class="color-block">
  873. <div class="s-js-color" style="background-color: #33FF99" data-hex="#33FF99" data-rgb="51, 255, 153" data-hsl="150, 100%, 60%"></div>
  874. </div>
  875. <div class="color-block">
  876. <div class="s-js-color" style="background-color: #33FF66" data-hex="#33FF66" data-rgb="51, 255, 102" data-hsl="135, 100%, 60%"></div>
  877. </div>
  878. <div class="color-block">
  879. <div class="s-js-color" style="background-color: #33FF33" data-hex="#33FF33" data-rgb="51, 255, 51" data-hsl="120, 100%, 60%"></div>
  880. </div>
  881. <div class="color-block">
  882. <div class="s-js-color" style="background-color: #33FF00" data-hex="#33FF00" data-rgb="51, 255, 0" data-hsl="108, 100%, 50%"></div>
  883. </div>
  884. </div>
  885. <div class="color-group">
  886. <div class="color-block">
  887. <div class="s-js-color" style="background-color: #00CC00" data-hex="#00CC00" data-rgb="0, 204, 0" data-hsl="120, 100%, 40%"></div>
  888. </div>
  889. <div class="color-block">
  890. <div class="s-js-color" style="background-color: #00CC33" data-hex="#00CC33" data-rgb="0, 204, 51" data-hsl="135, 100%, 40%"></div>
  891. </div>
  892. <div class="color-block">
  893. <div class="s-js-color" style="background-color: #00CC66" data-hex="#00CC66" data-rgb="0, 204, 102" data-hsl="150, 100%, 40%"></div>
  894. </div>
  895. <div class="color-block">
  896. <div class="s-js-color" style="background-color: #00CC99" data-hex="#00CC99" data-rgb="0, 204, 153" data-hsl="165, 100%, 40%"></div>
  897. </div>
  898. <div class="color-block">
  899. <div class="s-js-color" style="background-color: #00CCCC" data-hex="#00CCCC" data-rgb="0, 204, 204" data-hsl="180, 100%, 40%"></div>
  900. </div>
  901. <div class="color-block">
  902. <div class="s-js-color" style="background-color: #00CCFF" data-hex="#00CCFF" data-rgb="0, 204, 255" data-hsl="192, 100%, 50%"></div>
  903. </div>
  904. <div class="color-block">
  905. <div class="s-js-color" style="background-color: #33CCFF" data-hex="#33CCFF" data-rgb="51, 204, 255" data-hsl="195, 100%, 60%"></div>
  906. </div>
  907. <div class="color-block">
  908. <div class="s-js-color" style="background-color: #33CCCC" data-hex="#33CCCC" data-rgb="51, 204, 204" data-hsl="180, 60%, 50%"></div>
  909. </div>
  910. <div class="color-block">
  911. <div class="s-js-color" style="background-color: #33CC99" data-hex="#33CC99" data-rgb="51, 204, 153" data-hsl="160, 60%, 50%"></div>
  912. </div>
  913. <div class="color-block">
  914. <div class="s-js-color" style="background-color: #33CC66" data-hex="#33CC66" data-rgb="51, 204, 102" data-hsl="140, 60%, 50%"></div>
  915. </div>
  916. <div class="color-block">
  917. <div class="s-js-color" style="background-color: #33CC33" data-hex="#33CC33" data-rgb="51, 204, 51" data-hsl="120, 60%, 50%"></div>
  918. </div>
  919. <div class="color-block">
  920. <div class="s-js-color" style="background-color: #33CC00" data-hex="#33CC00" data-rgb="51, 204, 0" data-hsl="105, 100%, 40%"></div>
  921. </div>
  922. </div>
  923. <div class="color-group">
  924. <div class="color-block">
  925. <div class="s-js-color" style="background-color: #009900" data-hex="#009900" data-rgb="0, 153, 0" data-hsl="120, 100%, 30%"></div>
  926. </div>
  927. <div class="color-block">
  928. <div class="s-js-color" style="background-color: #009933" data-hex="#009933" data-rgb="0, 153, 51" data-hsl="140, 100%, 30%"></div>
  929. </div>
  930. <div class="color-block">
  931. <div class="s-js-color" style="background-color: #009966" data-hex="#009966" data-rgb="0, 153, 102" data-hsl="160, 100%, 30%"></div>
  932. </div>
  933. <div class="color-block">
  934. <div class="s-js-color" style="background-color: #009999" data-hex="#009999" data-rgb="0, 153, 153" data-hsl="180, 100%, 30%"></div>
  935. </div>
  936. <div class="color-block">
  937. <div class="s-js-color" style="background-color: #0099CC" data-hex="#0099CC" data-rgb="0, 153, 204" data-hsl="195, 100%, 40%"></div>
  938. </div>
  939. <div class="color-block">
  940. <div class="s-js-color" style="background-color: #0099FF" data-hex="#0099FF" data-rgb="0, 153, 255" data-hsl="204, 100%, 50%"></div>
  941. </div>
  942. <div class="color-block">
  943. <div class="s-js-color" style="background-color: #3399FF" data-hex="#3399FF" data-rgb="51, 153, 255" data-hsl="210, 100%, 60%"></div>
  944. </div>
  945. <div class="color-block">
  946. <div class="s-js-color" style="background-color: #3399CC" data-hex="#3399CC" data-rgb="51, 153, 204" data-hsl="200, 60%, 50%"></div>
  947. </div>
  948. <div class="color-block">
  949. <div class="s-js-color" style="background-color: #339999" data-hex="#339999" data-rgb="51, 153, 153" data-hsl="180, 50%, 40%"></div>
  950. </div>
  951. <div class="color-block">
  952. <div class="s-js-color" style="background-color: #339966" data-hex="#339966" data-rgb="51, 153, 102" data-hsl="150, 50%, 40%"></div>
  953. </div>
  954. <div class="color-block">
  955. <div class="s-js-color" style="background-color: #339933" data-hex="#339933" data-rgb="51, 153, 51" data-hsl="120, 50%, 40%"></div>
  956. </div>
  957. <div class="color-block">
  958. <div class="s-js-color" style="background-color: #339900" data-hex="#339900" data-rgb="51, 153, 0" data-hsl="100, 100%, 30%"></div>
  959. </div>
  960. </div>
  961. <div class="color-group">
  962. <div class="color-block">
  963. <div class="s-js-color" style="background-color: #006600" data-hex="#006600" data-rgb="0, 102, 0" data-hsl="120, 100%, 20%"></div>
  964. </div>
  965. <div class="color-block">
  966. <div class="s-js-color" style="background-color: #006633" data-hex="#006633" data-rgb="0, 102, 51" data-hsl="150, 100%, 20%"></div>
  967. </div>
  968. <div class="color-block">
  969. <div class="s-js-color" style="background-color: #006666" data-hex="#006666" data-rgb="0, 102, 102" data-hsl="180, 100%, 20%"></div>
  970. </div>
  971. <div class="color-block">
  972. <div class="s-js-color" style="background-color: #006699" data-hex="#006699" data-rgb="0, 102, 153" data-hsl="200, 100%, 30%"></div>
  973. </div>
  974. <div class="color-block">
  975. <div class="s-js-color" style="background-color: #0066CC" data-hex="#0066CC" data-rgb="0, 102, 204" data-hsl="210, 100%, 40%"></div>
  976. </div>
  977. <div class="color-block">
  978. <div class="s-js-color" style="background-color: #0066FF" data-hex="#0066FF" data-rgb="0, 102, 255" data-hsl="216, 100%, 50%"></div>
  979. </div>
  980. <div class="color-block">
  981. <div class="s-js-color" style="background-color: #3366FF" data-hex="#3366FF" data-rgb="51, 102, 255" data-hsl="225, 100%, 60%"></div>
  982. </div>
  983. <div class="color-block">
  984. <div class="s-js-color" style="background-color: #3366CC" data-hex="#3366CC" data-rgb="51, 102, 204" data-hsl="220, 60%, 50%"></div>
  985. </div>
  986. <div class="color-block">
  987. <div class="s-js-color" style="background-color: #336699" data-hex="#336699" data-rgb="51, 102, 153" data-hsl="210, 50%, 40%"></div>
  988. </div>
  989. <div class="color-block">
  990. <div class="s-js-color" style="background-color: #336666" data-hex="#336666" data-rgb="51, 102, 102" data-hsl="180, 33%, 30%"></div>
  991. </div>
  992. <div class="color-block">
  993. <div class="s-js-color" style="background-color: #336633" data-hex="#336633" data-rgb="51, 102, 51" data-hsl="120, 33%, 30%"></div>
  994. </div>
  995. <div class="color-block">
  996. <div class="s-js-color" style="background-color: #336600" data-hex="#336600" data-rgb="51, 102, 0" data-hsl="90, 100%, 20%"></div>
  997. </div>
  998. </div>
  999. <div class="color-group">
  1000. <div class="color-block">
  1001. <div class="s-js-color" style="background-color: #003300" data-hex="#003300" data-rgb="0, 51, 0" data-hsl="120, 100%, 10%"></div>
  1002. </div>
  1003. <div class="color-block">
  1004. <div class="s-js-color" style="background-color: #003333" data-hex="#003333" data-rgb="0, 51, 51" data-hsl="180, 100%, 10%"></div>
  1005. </div>
  1006. <div class="color-block">
  1007. <div class="s-js-color" style="background-color: #003366" data-hex="#003366" data-rgb="0, 51, 102" data-hsl="210, 100%, 20%"></div>
  1008. </div>
  1009. <div class="color-block">
  1010. <div class="s-js-color" style="background-color: #003399" data-hex="#003399" data-rgb="0, 51, 153" data-hsl="220, 100%, 30%"></div>
  1011. </div>
  1012. <div class="color-block">
  1013. <div class="s-js-color" style="background-color: #0033CC" data-hex="#0033CC" data-rgb="0, 51, 204" data-hsl="225, 100%, 40%"></div>
  1014. </div>
  1015. <div class="color-block">
  1016. <div class="s-js-color" style="background-color: #0033FF" data-hex="#0033FF" data-rgb="0, 51, 255" data-hsl="228, 100%, 50%"></div>
  1017. </div>
  1018. <div class="color-block">
  1019. <div class="s-js-color" style="background-color: #3333FF" data-hex="#3333FF" data-rgb="51, 51, 255" data-hsl="240, 100%, 60%"></div>
  1020. </div>
  1021. <div class="color-block">
  1022. <div class="s-js-color" style="background-color: #3333CC" data-hex="#3333CC" data-rgb="51, 51, 204" data-hsl="240, 60%, 50%"></div>
  1023. </div>
  1024. <div class="color-block">
  1025. <div class="s-js-color" style="background-color: #333399" data-hex="#333399" data-rgb="51, 51, 153" data-hsl="240, 50%, 40%"></div>
  1026. </div>
  1027. <div class="color-block">
  1028. <div class="s-js-color" style="background-color: #333366" data-hex="#333366" data-rgb="51, 51, 102" data-hsl="240, 33%, 30%"></div>
  1029. </div>
  1030. <div class="color-block">
  1031. <div class="s-js-color" style="background-color: #333333" data-hex="#333333" data-rgb="51, 51, 51" data-hsl="0, 0%, 20%"></div>
  1032. </div>
  1033. <div class="color-block">
  1034. <div class="s-js-color" style="background-color: #333300" data-hex="#333300" data-rgb="51, 51, 0" data-hsl="60, 100%, 10%"></div>
  1035. </div>
  1036. </div>
  1037. <div class="color-group">
  1038. <div class="color-block">
  1039. <div class="s-js-color" style="background-color: #000000" data-hex="#000000" data-rgb="0, 0, 0" data-hsl="0, 0%, 0%"></div>
  1040. </div>
  1041. <div class="color-block">
  1042. <div class="s-js-color" style="background-color: #000033" data-hex="#000033" data-rgb="0, 0, 51" data-hsl="240, 100%, 10%"></div>
  1043. </div>
  1044. <div class="color-block">
  1045. <div class="s-js-color" style="background-color: #000066" data-hex="#000066" data-rgb="0, 0, 102" data-hsl="240, 100%, 20%"></div>
  1046. </div>
  1047. <div class="color-block">
  1048. <div class="s-js-color" style="background-color: #000099" data-hex="#000099" data-rgb="0, 0, 153" data-hsl="240, 100%, 30%"></div>
  1049. </div>
  1050. <div class="color-block">
  1051. <div class="s-js-color" style="background-color: #0000CC" data-hex="#0000CC" data-rgb="0, 0, 204" data-hsl="240, 100%, 40%"></div>
  1052. </div>
  1053. <div class="color-block">
  1054. <div class="s-js-color" style="background-color: #0000FF" data-hex="#0000FF" data-rgb="0, 0, 255" data-hsl="240, 100%, 50%"></div>
  1055. </div>
  1056. <div class="color-block">
  1057. <div class="s-js-color" style="background-color: #3300FF" data-hex="#3300FF" data-rgb="51, 0, 255" data-hsl="252, 100%, 50%"></div>
  1058. </div>
  1059. <div class="color-block">
  1060. <div class="s-js-color" style="background-color: #3300CC" data-hex="#3300CC" data-rgb="51, 0, 204" data-hsl="255, 100%, 40%"></div>
  1061. </div>
  1062. <div class="color-block">
  1063. <div class="s-js-color" style="background-color: #330099" data-hex="#330099" data-rgb="51, 0, 153" data-hsl="260, 100%, 30%"></div>
  1064. </div>
  1065. <div class="color-block">
  1066. <div class="s-js-color" style="background-color: #330066" data-hex="#330066" data-rgb="51, 0, 102" data-hsl="270, 100%, 20%"></div>
  1067. </div>
  1068. <div class="color-block">
  1069. <div class="s-js-color" style="background-color: #330033" data-hex="#330033" data-rgb="51, 0, 51" data-hsl="300, 100%, 10%"></div>
  1070. </div>
  1071. <div class="color-block">
  1072. <div class="s-js-color" style="background-color: #330000" data-hex="#330000" data-rgb="51, 0, 0" data-hsl="0, 100%, 10%"></div>
  1073. </div>
  1074. </div></div>
  1075. <div id="s_show_color" class="s_show_color"><input type="hidden" name="stem-color"></div>
  1076. <span id="s_span_color" class="s_span_color" style="width:100px; font-size: 20px; padding-bottom: 10px; border-bottom: 2px solid #000000;"></span>
  1077. </div>
  1078. </div>
  1079. <div class="brightness_info" style="display:none;">
  1080. <div>
  1081. <input type="range" min="0" max="100" value="40" name="stem-bright-vol" style="width:550px;">
  1082. </div>
  1083. <div class="switch_div">
  1084. <span>Auto brightness</span>
  1085. <div class="switch">
  1086. <input id="cmn-toggle-50" class="cmn-toggle cmn-toggle-round" type="checkbox">
  1087. <label for="cmn-toggle-50"></label>
  1088. </div>
  1089. <div class="switch">
  1090. <input id="cmn-toggle-51" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="stem-bright-on">
  1091. <label for="cmn-toggle-51"></label>
  1092. </div>
  1093. <div class="switch">
  1094. <input id="cmn-toggle-52" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
  1095. <label for="cmn-toggle-52" data-on="Yes" data-off="No"></label>
  1096. </div>
  1097. </div>
  1098. </div>
  1099. <div class="cancel-confirm">
  1100. <input type="button" value="Cancel" class="stem-light-cancel">
  1101. <input type="submit" value="Confirm" class="stem-light-confirm">
  1102. </div>
  1103. </div>
  1104. <div class="col-2"></div>
  1105. </div>
  1106. <div class="row">
  1107. <div></div>
  1108. <div id="root-light-control" class="show-info" style="display: none;">
  1109. <br>
  1110. <h1>Light Control</h1>
  1111. <div class="light-control_nav">
  1112. <ul class="list">
  1113. <li><a class="recomendations">Recomendations</a></li>
  1114. <li class="current_li"><a class="current color">Color</a></li>
  1115. <li><a class="brightness">Brightness</a></li>
  1116. </ul>
  1117. </div>
  1118. <div class="recomendation_info" style="display: none;">
  1119. <div class="switch_div_left">
  1120. <span>Option1</span>
  1121. <div class="switch">
  1122. <input id="cmn-toggle-10" class="cmn-toggle cmn-toggle-round" type="checkbox">
  1123. <label for="cmn-toggle-10"></label>
  1124. </div>
  1125. <div class="switch">
  1126. <input id="cmn-toggle-12" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked>
  1127. <label for="cmn-toggle-12"></label>
  1128. </div>
  1129. <div class="switch">
  1130. <input id="cmn-toggle-13" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
  1131. <label for="cmn-toggle-13" data-on="Yes" data-off="No"></label>
  1132. </div>
  1133. </div>
  1134. <div class="switch_div_right">
  1135. <span>Option2</span>
  1136. <div class="switch">
  1137. <input id="cmn-toggle-14" class="cmn-toggle cmn-toggle-round" type="checkbox">
  1138. <label for="cmn-toggle-14"></label>
  1139. </div>
  1140. <div class="switch">
  1141. <input id="cmn-toggle-15" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked>
  1142. <label for="cmn-toggle-15"></label>
  1143. </div>
  1144. <div class="switch">
  1145. <input id="cmn-toggle-16" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
  1146. <label for="cmn-toggle-16" data-on="Yes" data-off="No"></label>
  1147. </div>
  1148. </div>
  1149. </div>
  1150. <div class="color_info">
  1151. <div class="color-top">
  1152. <div class="all_color">
  1153. <div class="color-group">
  1154. <div class="color-block">
  1155. <div class="r-js-color" style="background-color: #CCFF00" data-hex="#CCFF00" data-rgb="204, 255, 0" data-hsl="72, 100%, 50%"></div>
  1156. </div>
  1157. <div class="color-block">
  1158. <div class="r-js-color" style="background-color: #CCFF33" data-hex="#CCFF33" data-rgb="204, 255, 51" data-hsl="75, 100%, 60%"></div>
  1159. </div>
  1160. <div class="color-block">
  1161. <div class="r-js-color" style="background-color: #CCFF66" data-hex="#CCFF66" data-rgb="204, 255, 102" data-hsl="80, 100%, 70%"></div>
  1162. </div>
  1163. <div class="color-block">
  1164. <div class="r-js-color" style="background-color: #CCFF99" data-hex="#CCFF99" data-rgb="204, 255, 153" data-hsl="90, 100%, 80%"></div>
  1165. </div>
  1166. <div class="color-block">
  1167. <div class="r-js-color" style="background-color: #CCFFCC" data-hex="#CCFFCC" data-rgb="204, 255, 204" data-hsl="120, 100%, 90%"></div>
  1168. </div>
  1169. <div class="color-block">
  1170. <div class="r-js-color" style="background-color: #CCFFFF" data-hex="#CCFFFF" data-rgb="204, 255, 255" data-hsl="180, 100%, 90%"></div>
  1171. </div>
  1172. <div class="color-block">
  1173. <div class="r-js-color" style="background-color: #FFFFFF" data-hex="#FFFFFF" data-rgb="255, 255, 255" data-hsl="0, 0%, 100%"></div>
  1174. </div>
  1175. <div class="color-block">
  1176. <div class="r-js-color" style="background-color: #FFFFCC" data-hex="#FFFFCC" data-rgb="255, 255, 204" data-hsl="60, 100%, 90%"></div>
  1177. </div>
  1178. <div class="color-block">
  1179. <div class="r-js-color" style="background-color: #FFFF99" data-hex="#FFFF99" data-rgb="255, 255, 153" data-hsl="60, 100%, 80%"></div>
  1180. </div>
  1181. <div class="color-block">
  1182. <div class="r-js-color" style="background-color: #FFFF66" data-hex="#FFFF66" data-rgb="255, 255, 102" data-hsl="60, 100%, 70%"></div>
  1183. </div>
  1184. <div class="color-block">
  1185. <div class="r-js-color" style="background-color: #FFFF33" data-hex="#FFFF33" data-rgb="255, 255, 51" data-hsl="60, 100%, 60%"></div>
  1186. </div>
  1187. <div class="color-block">
  1188. <div class="r-js-color" style="background-color: #FFFF00" data-hex="#FFFF00" data-rgb="255, 255, 0" data-hsl="60, 100%, 50%"></div>
  1189. </div>
  1190. </div>
  1191. <div class="color-group">
  1192. <div class="color-block">
  1193. <div class="r-js-color" style="background-color: #CCCC00" data-hex="#CCCC00" data-rgb="204, 204, 0" data-hsl="60, 100%, 40%"></div>
  1194. </div>
  1195. <div class="color-block">
  1196. <div class="r-js-color" style="background-color: #CCCC33" data-hex="#CCCC33" data-rgb="204, 204, 51" data-hsl="60, 60%, 50%"></div>
  1197. </div>
  1198. <div class="color-block">
  1199. <div class="r-js-color" style="background-color: #CCCC66" data-hex="#CCCC66" data-rgb="204, 204, 102" data-hsl="60, 50%, 60%"></div>
  1200. </div>
  1201. <div class="color-block">
  1202. <div class="r-js-color" style="background-color: #CCCC99" data-hex="#CCCC99" data-rgb="204, 204, 153" data-hsl="60, 33%, 70%"></div>
  1203. </div>
  1204. <div class="color-block">
  1205. <div class="r-js-color" style="background-color: #CCCCCC" data-hex="#CCCCCC" data-rgb="204, 204, 204" data-hsl="0, 0%, 80%"></div>
  1206. </div>
  1207. <div class="color-block">
  1208. <div class="r-js-color" style="background-color: #CCCCFF" data-hex="#CCCCFF" data-rgb="204, 204, 255" data-hsl="240, 100%, 90%"></div>
  1209. </div>
  1210. <div class="color-block">
  1211. <div class="r-js-color" style="background-color: #FFCCFF" data-hex="#FFCCFF" data-rgb="255, 204, 255" data-hsl="300, 100%, 90%"></div>
  1212. </div>
  1213. <div class="color-block">
  1214. <div class="r-js-color" style="background-color: #FFCCCC" data-hex="#FFCCCC" data-rgb="255, 204, 204" data-hsl="0, 100%, 90%"></div>
  1215. </div>
  1216. <div class="color-block">
  1217. <div class="r-js-color" style="background-color: #FFCC99" data-hex="#FFCC99" data-rgb="255, 204, 153" data-hsl="30, 100%, 80%"></div>
  1218. </div>
  1219. <div class="color-block">
  1220. <div class="r-js-color" style="background-color: #FFCC66" data-hex="#FFCC66" data-rgb="255, 204, 102" data-hsl="40, 100%, 70%"></div>
  1221. </div>
  1222. <div class="color-block">
  1223. <div class="r-js-color" style="background-color: #FFCC33" data-hex="#FFCC33" data-rgb="255, 204, 51" data-hsl="45, 100%, 60%"></div>
  1224. </div>
  1225. <div class="color-block">
  1226. <div class="r-js-color" style="background-color: #FFCC00" data-hex="#FFCC00" data-rgb="255, 204, 0" data-hsl="48, 100%, 50%"></div>
  1227. </div>
  1228. </div>
  1229. <div class="color-group">
  1230. <div class="color-block">
  1231. <div class="r-js-color" style="background-color: #CC9900" data-hex="#CC9900" data-rgb="204, 153, 0" data-hsl="45, 100%, 40%"></div>
  1232. </div>
  1233. <div class="color-block">
  1234. <div class="r-js-color" style="background-color: #CC9933" data-hex="#CC9933" data-rgb="204, 153, 51" data-hsl="40, 60%, 50%"></div>
  1235. </div>
  1236. <div class="color-block">
  1237. <div class="r-js-color" style="background-color: #CC9966" data-hex="#CC9966" data-rgb="204, 153, 102" data-hsl="30, 50%, 60%"></div>
  1238. </div>
  1239. <div class="color-block">
  1240. <div class="r-js-color" style="background-color: #CC9999" data-hex="#CC9999" data-rgb="204, 153, 153" data-hsl="0, 33%, 70%"></div>
  1241. </div>
  1242. <div class="color-block">
  1243. <div class="r-js-color" style="background-color: #CC99CC" data-hex="#CC99CC" data-rgb="204, 153, 204" data-hsl="300, 33%, 70%"></div>
  1244. </div>
  1245. <div class="color-block">
  1246. <div class="r-js-color" style="background-color: #CC99FF" data-hex="#CC99FF" data-rgb="204, 153, 255" data-hsl="270, 100%, 80%"></div>
  1247. </div>
  1248. <div class="color-block">
  1249. <div class="r-js-color" style="background-color: #FF99FF" data-hex="#FF99FF" data-rgb="255, 153, 255" data-hsl="300, 100%, 80%"></div>
  1250. </div>
  1251. <div class="color-block">
  1252. <div class="r-js-color" style="background-color: #FF99CC" data-hex="#FF99CC" data-rgb="255, 153, 204" data-hsl="330, 100%, 80%"></div>
  1253. </div>
  1254. <div class="color-block">
  1255. <div class="r-js-color" style="background-color: #FF9999" data-hex="#FF9999" data-rgb="255, 153, 153" data-hsl="0, 100%, 80%"></div>
  1256. </div>
  1257. <div class="color-block">
  1258. <div class="r-js-color" style="background-color: #FF9966" data-hex="#FF9966" data-rgb="255, 153, 102" data-hsl="20, 100%, 70%"></div>
  1259. </div>
  1260. <div class="color-block">
  1261. <div class="r-js-color" style="background-color: #FF9933" data-hex="#FF9933" data-rgb="255, 153, 51" data-hsl="30, 100%, 60%"></div>
  1262. </div>
  1263. <div class="color-block">
  1264. <div class="r-js-color" style="background-color: #FF9900" data-hex="#FF9900" data-rgb="255, 153, 0" data-hsl="36, 100%, 50%"></div>
  1265. </div>
  1266. </div>
  1267. <div class="color-group">
  1268. <div class="color-block">
  1269. <div class="r-js-color" style="background-color: #CC6600" data-hex="#CC6600" data-rgb="204, 102, 0" data-hsl="30, 100%, 40%"></div>
  1270. </div>
  1271. <div class="color-block">
  1272. <div class="r-js-color" style="background-color: #CC6633" data-hex="#CC6633" data-rgb="204, 102, 51" data-hsl="20, 60%, 50%"></div>
  1273. </div>
  1274. <div class="color-block">
  1275. <div class="r-js-color" style="background-color: #CC6666" data-hex="#CC6666" data-rgb="204, 102, 102" data-hsl="0, 50%, 60%"></div>
  1276. </div>
  1277. <div class="color-block">
  1278. <div class="r-js-color" style="background-color: #CC6699" data-hex="#CC6699" data-rgb="204, 102, 153" data-hsl="330, 50%, 60%"></div>
  1279. </div>
  1280. <div class="color-block">
  1281. <div class="r-js-color" style="background-color: #CC66CC" data-hex="#CC66CC" data-rgb="204, 102, 204" data-hsl="300, 50%, 60%"></div>
  1282. </div>
  1283. <div class="color-block">
  1284. <div class="r-js-color" style="background-color: #CC66FF" data-hex="#CC66FF" data-rgb="204, 102, 255" data-hsl="280, 100%, 70%"></div>
  1285. </div>
  1286. <div class="color-block">
  1287. <div class="r-js-color" style="background-color: #FF66FF" data-hex="#FF66FF" data-rgb="255, 102, 255" data-hsl="300, 100%, 70%"></div>
  1288. </div>
  1289. <div class="color-block">
  1290. <div class="r-js-color" style="background-color: #FF66CC" data-hex="#FF66CC" data-rgb="255, 102, 204" data-hsl="320, 100%, 70%"></div>
  1291. </div>
  1292. <div class="color-block">
  1293. <div class="r-js-color" style="background-color: #FF6699" data-hex="#FF6699" data-rgb="255, 102, 153" data-hsl="340, 100%, 70%"></div>
  1294. </div>
  1295. <div class="color-block">
  1296. <div class="r-js-color" style="background-color: #FF6666" data-hex="#FF6666" data-rgb="255, 102, 102" data-hsl="0, 100%, 70%"></div>
  1297. </div>
  1298. <div class="color-block">
  1299. <div class="r-js-color" style="background-color: #FF6633" data-hex="#FF6633" data-rgb="255, 102, 51" data-hsl="15, 100%, 60%"></div>
  1300. </div>
  1301. <div class="color-block">
  1302. <div class="r-js-color" style="background-color: #FF6600" data-hex="#FF6600" data-rgb="255, 102, 0" data-hsl="24, 100%, 50%"></div>
  1303. </div>
  1304. </div>
  1305. <div class="color-group">
  1306. <div class="color-block">
  1307. <div class="r-js-color" style="background-color: #CC3300" data-hex="#CC3300" data-rgb="204, 51, 0" data-hsl="15, 100%, 40%"></div>
  1308. </div>
  1309. <div class="color-block">
  1310. <div class="r-js-color" style="background-color: #CC3333" data-hex="#CC3333" data-rgb="204, 51, 51" data-hsl="0, 60%, 50%"></div>
  1311. </div>
  1312. <div class="color-block">
  1313. <div class="r-js-color" style="background-color: #CC3366" data-hex="#CC3366" data-rgb="204, 51, 102" data-hsl="340, 60%, 50%"></div>
  1314. </div>
  1315. <div class="color-block">
  1316. <div class="r-js-color" style="background-color: #CC3399" data-hex="#CC3399" data-rgb="204, 51, 153" data-hsl="320, 60%, 50%"></div>
  1317. </div>
  1318. <div class="color-block">
  1319. <div class="r-js-color" style="background-color: #CC33CC" data-hex="#CC33CC" data-rgb="204, 51, 204" data-hsl="300, 60%, 50%"></div>
  1320. </div>
  1321. <div class="color-block">
  1322. <div class="r-js-color" style="background-color: #CC33FF" data-hex="#CC33FF" data-rgb="204, 51, 255" data-hsl="285, 100%, 60%"></div>
  1323. </div>
  1324. <div class="color-block">
  1325. <div class="r-js-color" style="background-color: #FF33FF" data-hex="#FF33FF" data-rgb="255, 51, 255" data-hsl="300, 100%, 60%"></div>
  1326. </div>
  1327. <div class="color-block">
  1328. <div class="r-js-color" style="background-color: #FF33CC" data-hex="#FF33CC" data-rgb="255, 51, 204" data-hsl="315, 100%, 60%"></div>
  1329. </div>
  1330. <div class="color-block">
  1331. <div class="r-js-color" style="background-color: #FF3399" data-hex="#FF3399" data-rgb="255, 51, 153" data-hsl="330, 100%, 60%"></div>
  1332. </div>
  1333. <div class="color-block">
  1334. <div class="r-js-color" style="background-color: #FF3366" data-hex="#FF3366" data-rgb="255, 51, 102" data-hsl="345, 100%, 60%"></div>
  1335. </div>
  1336. <div class="color-block">
  1337. <div class="r-js-color" style="background-color: #FF3333" data-hex="#FF3333" data-rgb="255, 51, 51" data-hsl="0, 100%, 60%"></div>
  1338. </div>
  1339. <div class="color-block">
  1340. <div class="r-js-color" style="background-color: #FF3300" data-hex="#FF3300" data-rgb="255, 51, 0" data-hsl="12, 100%, 50%"></div>
  1341. </div>
  1342. </div>
  1343. <div class="color-group">
  1344. <div class="color-block">
  1345. <div class="r-js-color" style="background-color: #CC0000" data-hex="#CC0000" data-rgb="204, 0, 0" data-hsl="0, 100%, 40%"></div>
  1346. </div>
  1347. <div class="color-block">
  1348. <div class="r-js-color" style="background-color: #CC0033" data-hex="#CC0033" data-rgb="204, 0, 51" data-hsl="345, 100%, 40%"></div>
  1349. </div>
  1350. <div class="color-block">
  1351. <div class="r-js-color" style="background-color: #CC0066" data-hex="#CC0066" data-rgb="204, 0, 102" data-hsl="330, 100%, 40%"></div>
  1352. </div>
  1353. <div class="color-block">
  1354. <div class="r-js-color" style="background-color: #CC0099" data-hex="#CC0099" data-rgb="204, 0, 153" data-hsl="315, 100%, 40%"></div>
  1355. </div>
  1356. <div class="color-block">
  1357. <div class="r-js-color" style="background-color: #CC00CC" data-hex="#CC00CC" data-rgb="204, 0, 204" data-hsl="300, 100%, 40%"></div>
  1358. </div>
  1359. <div class="color-block">
  1360. <div class="r-js-color" style="background-color: #CC00FF" data-hex="#CC00FF" data-rgb="204, 0, 255" data-hsl="288, 100%, 50%"></div>
  1361. </div>
  1362. <div class="color-block">
  1363. <div class="r-js-color" style="background-color: #FF00FF" data-hex="#FF00FF" data-rgb="255, 0, 255" data-hsl="300, 100%, 50%"></div>
  1364. </div>
  1365. <div class="color-block">
  1366. <div class="r-js-color" style="background-color: #FF00CC" data-hex="#FF00CC" data-rgb="255, 0, 204" data-hsl="312, 100%, 50%"></div>
  1367. </div>
  1368. <div class="color-block">
  1369. <div class="r-js-color" style="background-color: #FF0099" data-hex="#FF0099" data-rgb="255, 0, 153" data-hsl="324, 100%, 50%"></div>
  1370. </div>
  1371. <div class="color-block">
  1372. <div class="r-js-color" style="background-color: #FF0066" data-hex="#FF0066" data-rgb="255, 0, 102" data-hsl="336, 100%, 50%"></div>
  1373. </div>
  1374. <div class="color-block">
  1375. <div class="r-js-color" style="background-color: #FF0033" data-hex="#FF0033" data-rgb="255, 0, 51" data-hsl="348, 100%, 50%"></div>
  1376. </div>
  1377. <div class="color-block">
  1378. <div class="r-js-color" style="background-color: #FF0000" data-hex="#FF0000" data-rgb="255, 0, 0" data-hsl="0, 100%, 50%"></div>
  1379. </div>
  1380. </div>
  1381. <div class="color-group">
  1382. <div class="color-block">
  1383. <div class="r-js-color" style="background-color: #660000" data-hex="#660000" data-rgb="102, 0, 0" data-hsl="0, 100%, 20%"></div>
  1384. </div>
  1385. <div class="color-block">
  1386. <div class="r-js-color" style="background-color: #660033" data-hex="#660033" data-rgb="102, 0, 51" data-hsl="330, 100%, 20%"></div>
  1387. </div>
  1388. <div class="color-block">
  1389. <div class="r-js-color" style="background-color: #660066" data-hex="#660066" data-rgb="102, 0, 102" data-hsl="300, 100%, 20%"></div>
  1390. </div>
  1391. <div class="color-block">
  1392. <div class="r-js-color" style="background-color: #660099" data-hex="#660099" data-rgb="102, 0, 153" data-hsl="280, 100%, 30%"></div>
  1393. </div>
  1394. <div class="color-block">
  1395. <div class="r-js-color" style="background-color: #6600CC" data-hex="#6600CC" data-rgb="102, 0, 204" data-hsl="270, 100%, 40%"></div>
  1396. </div>
  1397. <div class="color-block">
  1398. <div class="r-js-color" style="background-color: #6600FF" data-hex="#6600FF" data-rgb="102, 0, 255" data-hsl="264, 100%, 50%"></div>
  1399. </div>
  1400. <div class="color-block">
  1401. <div class="r-js-color" style="background-color: #9900FF" data-hex="#9900FF" data-rgb="153, 0, 255" data-hsl="276, 100%, 50%"></div>
  1402. </div>
  1403. <div class="color-block">
  1404. <div class="r-js-color" style="background-color: #9900CC" data-hex="#9900CC" data-rgb="153, 0, 204" data-hsl="285, 100%, 40%"></div>
  1405. </div>
  1406. <div class="color-block">
  1407. <div class="r-js-color" style="background-color: #990099" data-hex="#990099" data-rgb="153, 0, 153" data-hsl="300, 100%, 30%"></div>
  1408. </div>
  1409. <div class="color-block">
  1410. <div class="r-js-color" style="background-color: #990066" data-hex="#990066" data-rgb="153, 0, 102" data-hsl="320, 100%, 30%"></div>
  1411. </div>
  1412. <div class="color-block">
  1413. <div class="r-js-color" style="background-color: #990033" data-hex="#990033" data-rgb="153, 0, 51" data-hsl="340, 100%, 30%"></div>
  1414. </div>
  1415. <div class="color-block">
  1416. <div class="r-js-color" style="background-color: #990000" data-hex="#990000" data-rgb="153, 0, 0" data-hsl="0, 100%, 30%"></div>
  1417. </div>
  1418. </div>
  1419. <div class="color-group">
  1420. <div class="color-block">
  1421. <div class="r-js-color" style="background-color: #663300" data-hex="#663300" data-rgb="102, 51, 0" data-hsl="30, 100%, 20%"></div>
  1422. </div>
  1423. <div class="color-block">
  1424. <div class="r-js-color" style="background-color: #663333" data-hex="#663333" data-rgb="102, 51, 51" data-hsl="0, 33%, 30%"></div>
  1425. </div>
  1426. <div class="color-block">
  1427. <div class="r-js-color" style="background-color: #663366" data-hex="#663366" data-rgb="102, 51, 102" data-hsl="300, 33%, 30%"></div>
  1428. </div>
  1429. <div class="color-block">
  1430. <div class="r-js-color" style="background-color: #663399" data-hex="#663399" data-rgb="102, 51, 153" data-hsl="270, 50%, 40%"></div>
  1431. </div>
  1432. <div class="color-block">
  1433. <div class="r-js-color" style="background-color: #6633CC" data-hex="#6633CC" data-rgb="102, 51, 204" data-hsl="260, 60%, 50%"></div>
  1434. </div>
  1435. <div class="color-block">
  1436. <div class="r-js-color" style="background-color: #6633FF" data-hex="#6633FF" data-rgb="102, 51, 255" data-hsl="255, 100%, 60%"></div>
  1437. </div>
  1438. <div class="color-block">
  1439. <div class="r-js-color" style="background-color: #9933FF" data-hex="#9933FF" data-rgb="153, 51, 255" data-hsl="270, 100%, 60%"></div>
  1440. </div>
  1441. <div class="color-block">
  1442. <div class="r-js-color" style="background-color: #9933CC" data-hex="#9933CC" data-rgb="153, 51, 204" data-hsl="280, 60%, 50%"></div>
  1443. </div>
  1444. <div class="color-block">
  1445. <div class="r-js-color" style="background-color: #993399" data-hex="#993399" data-rgb="153, 51, 153" data-hsl="300, 50%, 40%"></div>
  1446. </div>
  1447. <div class="color-block">
  1448. <div class="r-js-color" style="background-color: #993366" data-hex="#993366" data-rgb="153, 51, 102" data-hsl="330, 50%, 40%"></div>
  1449. </div>
  1450. <div class="color-block">
  1451. <div class="r-js-color" style="background-color: #993333" data-hex="#993333" data-rgb="153, 51, 51" data-hsl="0, 50%, 40%"></div>
  1452. </div>
  1453. <div class="color-block">
  1454. <div class="r-js-color" style="background-color: #993300" data-hex="#993300" data-rgb="153, 51, 0" data-hsl="20, 100%, 30%"></div>
  1455. </div>
  1456. </div>
  1457. <div class="color-group">
  1458. <div class="color-block">
  1459. <div class="r-js-color" style="background-color: #666600" data-hex="#666600" data-rgb="102, 102, 0" data-hsl="60, 100%, 20%"></div>
  1460. </div>
  1461. <div class="color-block">
  1462. <div class="r-js-color" style="background-color: #666633" data-hex="#666633" data-rgb="102, 102, 51" data-hsl="60, 33%, 30%"></div>
  1463. </div>
  1464. <div class="color-block">
  1465. <div class="r-js-color" style="background-color: #666666" data-hex="#666666" data-rgb="102, 102, 102" data-hsl="0, 0%, 40%"></div>
  1466. </div>
  1467. <div class="color-block">
  1468. <div class="r-js-color" style="background-color: #666699" data-hex="#666699" data-rgb="102, 102, 153" data-hsl="240, 20%, 50%"></div>
  1469. </div>
  1470. <div class="color-block">
  1471. <div class="r-js-color" style="background-color: #6666CC" data-hex="#6666CC" data-rgb="102, 102, 204" data-hsl="240, 50%, 60%"></div>
  1472. </div>
  1473. <div class="color-block">
  1474. <div class="r-js-color" style="background-color: #6666FF" data-hex="#6666FF" data-rgb="102, 102, 255" data-hsl="240, 100%, 70%"></div>
  1475. </div>
  1476. <div class="color-block">
  1477. <div class="r-js-color" style="background-color: #9966FF" data-hex="#9966FF" data-rgb="153, 102, 255" data-hsl="260, 100%, 70%"></div>
  1478. </div>
  1479. <div class="color-block">
  1480. <div class="r-js-color" style="background-color: #9966CC" data-hex="#9966CC" data-rgb="153, 102, 204" data-hsl="270, 50%, 60%"></div>
  1481. </div>
  1482. <div class="color-block">
  1483. <div class="r-js-color" style="background-color: #996699" data-hex="#996699" data-rgb="153, 102, 153" data-hsl="300, 20%, 50%"></div>
  1484. </div>
  1485. <div class="color-block">
  1486. <div class="r-js-color" style="background-color: #996666" data-hex="#996666" data-rgb="153, 102, 102" data-hsl="0, 20%, 50%"></div>
  1487. </div>
  1488. <div class="color-block">
  1489. <div class="r-js-color" style="background-color: #996633" data-hex="#996633" data-rgb="153, 102, 51" data-hsl="30, 50%, 40%"></div>
  1490. </div>
  1491. <div class="color-block">
  1492. <div class="r-js-color" style="background-color: #996600" data-hex="#996600" data-rgb="153, 102, 0" data-hsl="40, 100%, 30%"></div>
  1493. </div>
  1494. </div>
  1495. <div class="color-group">
  1496. <div class="color-block">
  1497. <div class="r-js-color" style="background-color: #669900" data-hex="#669900" data-rgb="102, 153, 0" data-hsl="80, 100%, 30%"></div>
  1498. </div>
  1499. <div class="color-block">
  1500. <div class="r-js-color" style="background-color: #669933" data-hex="#669933" data-rgb="102, 153, 51" data-hsl="90, 50%, 40%"></div>
  1501. </div>
  1502. <div class="color-block">
  1503. <div class="r-js-color" style="background-color: #669966" data-hex="#669966" data-rgb="102, 153, 102" data-hsl="120, 20%, 50%"></div>
  1504. </div>
  1505. <div class="color-block">
  1506. <div class="r-js-color" style="background-color: #669999" data-hex="#669999" data-rgb="102, 153, 153" data-hsl="180, 20%, 50%"></div>
  1507. </div>
  1508. <div class="color-block">
  1509. <div class="r-js-color" style="background-color: #6699CC" data-hex="#6699CC" data-rgb="102, 153, 204" data-hsl="210, 50%, 60%"></div>
  1510. </div>
  1511. <div class="color-block">
  1512. <div class="r-js-color" style="background-color: #6699FF" data-hex="#6699FF" data-rgb="102, 153, 255" data-hsl="220, 100%, 70%"></div>
  1513. </div>
  1514. <div class="color-block">
  1515. <div class="r-js-color" style="background-color: #9999FF" data-hex="#9999FF" data-rgb="153, 153, 255" data-hsl="240, 100%, 80%"></div>
  1516. </div>
  1517. <div class="color-block">
  1518. <div class="r-js-color" style="background-color: #9999CC" data-hex="#9999CC" data-rgb="153, 153, 204" data-hsl="240, 33%, 70%"></div>
  1519. </div>
  1520. <div class="color-block">
  1521. <div class="r-js-color" style="background-color: #999999" data-hex="#999999" data-rgb="153, 153, 153" data-hsl="0, 0%, 60%"></div>
  1522. </div>
  1523. <div class="color-block">
  1524. <div class="r-js-color" style="background-color: #999966" data-hex="#999966" data-rgb="153, 153, 102" data-hsl="60, 20%, 50%"></div>
  1525. </div>
  1526. <div class="color-block">
  1527. <div class="r-js-color" style="background-color: #999933" data-hex="#999933" data-rgb="153, 153, 51" data-hsl="60, 50%, 40%"></div>
  1528. </div>
  1529. <div class="color-block">
  1530. <div class="r-js-color" style="background-color: #999900" data-hex="#999900" data-rgb="153, 153, 0" data-hsl="60, 100%, 30%"></div>
  1531. </div>
  1532. </div>
  1533. <div class="color-group">
  1534. <div class="color-block">
  1535. <div class="r-js-color" style="background-color: #66CC00" data-hex="#66CC00" data-rgb="102, 204, 0" data-hsl="90, 100%, 40%"></div>
  1536. </div>
  1537. <div class="color-block">
  1538. <div class="r-js-color" style="background-color: #66CC33" data-hex="#66CC33" data-rgb="102, 204, 51" data-hsl="100, 60%, 50%"></div>
  1539. </div>
  1540. <div class="color-block">
  1541. <div class="r-js-color" style="background-color: #66CC66" data-hex="#66CC66" data-rgb="102, 204, 102" data-hsl="120, 50%, 60%"></div>
  1542. </div>
  1543. <div class="color-block">
  1544. <div class="r-js-color" style="background-color: #66CC99" data-hex="#66CC99" data-rgb="102, 204, 153" data-hsl="150, 50%, 60%"></div>
  1545. </div>
  1546. <div class="color-block">
  1547. <div class="r-js-color" style="background-color: #66CCCC" data-hex="#66CCCC" data-rgb="102, 204, 204" data-hsl="180, 50%, 60%"></div>
  1548. </div>
  1549. <div class="color-block">
  1550. <div class="r-js-color" style="background-color: #66CCFF" data-hex="#66CCFF" data-rgb="102, 204, 255" data-hsl="200, 100%, 70%"></div>
  1551. </div>
  1552. <div class="color-block">
  1553. <div class="r-js-color" style="background-color: #99CCFF" data-hex="#99CCFF" data-rgb="153, 204, 255" data-hsl="210, 100%, 80%"></div>
  1554. </div>
  1555. <div class="color-block">
  1556. <div class="r-js-color" style="background-color: #99CCCC" data-hex="#99CCCC" data-rgb="153, 204, 204" data-hsl="180, 33%, 70%"></div>
  1557. </div>
  1558. <div class="color-block">
  1559. <div class="r-js-color" style="background-color: #99CC99" data-hex="#99CC99" data-rgb="153, 204, 153" data-hsl="120, 33%, 70%"></div>
  1560. </div>
  1561. <div class="color-block">
  1562. <div class="r-js-color" style="background-color: #99CC66" data-hex="#99CC66" data-rgb="153, 204, 102" data-hsl="90, 50%, 60%"></div>
  1563. </div>
  1564. <div class="color-block">
  1565. <div class="r-js-color" style="background-color: #99CC33" data-hex="#99CC33" data-rgb="153, 204, 51" data-hsl="80, 60%, 50%"></div>
  1566. </div>
  1567. <div class="color-block">
  1568. <div class="r-js-color" style="background-color: #99CC00" data-hex="#99CC00" data-rgb="153, 204, 0" data-hsl="75, 100%, 40%"></div>
  1569. </div>
  1570. </div>
  1571. <div class="color-group">
  1572. <div class="color-block">
  1573. <div class="r-js-color" style="background-color: #66FF00" data-hex="#66FF00" data-rgb="102, 255, 0" data-hsl="96, 100%, 50%"></div>
  1574. </div>
  1575. <div class="color-block">
  1576. <div class="r-js-color" style="background-color: #66FF33" data-hex="#66FF33" data-rgb="102, 255, 51" data-hsl="105, 100%, 60%"></div>
  1577. </div>
  1578. <div class="color-block">
  1579. <div class="r-js-color" style="background-color: #66FF66" data-hex="#66FF66" data-rgb="102, 255, 102" data-hsl="120, 100%, 70%"></div>
  1580. </div>
  1581. <div class="color-block">
  1582. <div class="r-js-color" style="background-color: #66FF99" data-hex="#66FF99" data-rgb="102, 255, 153" data-hsl="140, 100%, 70%"></div>
  1583. </div>
  1584. <div class="color-block">
  1585. <div class="r-js-color" style="background-color: #66FFCC" data-hex="#66FFCC" data-rgb="102, 255, 204" data-hsl="160, 100%, 70%"></div>
  1586. </div>
  1587. <div class="color-block">
  1588. <div class="r-js-color" style="background-color: #66FFFF" data-hex="#66FFFF" data-rgb="102, 255, 255" data-hsl="180, 100%, 70%"></div>
  1589. </div>
  1590. <div class="color-block">
  1591. <div class="r-js-color" style="background-color: #99FFFF" data-hex="#99FFFF" data-rgb="153, 255, 255" data-hsl="180, 100%, 80%"></div>
  1592. </div>
  1593. <div class="color-block">
  1594. <div class="r-js-color" style="background-color: #99FFCC" data-hex="#99FFCC" data-rgb="153, 255, 204" data-hsl="150, 100%, 80%"></div>
  1595. </div>
  1596. <div class="color-block">
  1597. <div class="r-js-color" style="background-color: #99FF99" data-hex="#99FF99" data-rgb="153, 255, 153" data-hsl="120, 100%, 80%"></div>
  1598. </div>
  1599. <div class="color-block">
  1600. <div class="r-js-color" style="background-color: #99FF66" data-hex="#99FF66" data-rgb="153, 255, 102" data-hsl="100, 100%, 70%"></div>
  1601. </div>
  1602. <div class="color-block">
  1603. <div class="r-js-color" style="background-color: #99FF33" data-hex="#99FF33" data-rgb="153, 255, 51" data-hsl="90, 100%, 60%"></div>
  1604. </div>
  1605. <div class="color-block">
  1606. <div class="r-js-color" style="background-color: #99FF00" data-hex="#99FF00" data-rgb="153, 255, 0" data-hsl="84, 100%, 50%"></div>
  1607. </div>
  1608. </div>
  1609. <div class="color-group">
  1610. <div class="color-block">
  1611. <div class="r-js-color" style="background-color: #00FF00" data-hex="#00FF00" data-rgb="0, 255, 0" data-hsl="120, 100%, 50%"></div>
  1612. </div>
  1613. <div class="color-block">
  1614. <div class="r-js-color" style="background-color: #00FF33" data-hex="#00FF33" data-rgb="0, 255, 51" data-hsl="132, 100%, 50%"></div>
  1615. </div>
  1616. <div class="color-block">
  1617. <div class="r-js-color" style="background-color: #00FF66" data-hex="#00FF66" data-rgb="0, 255, 102" data-hsl="144, 100%, 50%"></div>
  1618. </div>
  1619. <div class="color-block">
  1620. <div class="r-js-color" style="background-color: #00FF99" data-hex="#00FF99" data-rgb="0, 255, 153" data-hsl="156, 100%, 50%"></div>
  1621. </div>
  1622. <div class="color-block">
  1623. <div class="r-js-color" style="background-color: #00FFCC" data-hex="#00FFCC" data-rgb="0, 255, 204" data-hsl="168, 100%, 50%"></div>
  1624. </div>
  1625. <div class="color-block">
  1626. <div class="r-js-color" style="background-color: #00FFFF" data-hex="#00FFFF" data-rgb="0, 255, 255" data-hsl="180, 100%, 50%"></div>
  1627. </div>
  1628. <div class="color-block">
  1629. <div class="r-js-color" style="background-color: #33FFFF" data-hex="#33FFFF" data-rgb="51, 255, 255" data-hsl="180, 100%, 60%"></div>
  1630. </div>
  1631. <div class="color-block">
  1632. <div class="r-js-color" style="background-color: #33FFCC" data-hex="#33FFCC" data-rgb="51, 255, 204" data-hsl="165, 100%, 60%"></div>
  1633. </div>
  1634. <div class="color-block">
  1635. <div class="r-js-color" style="background-color: #33FF99" data-hex="#33FF99" data-rgb="51, 255, 153" data-hsl="150, 100%, 60%"></div>
  1636. </div>
  1637. <div class="color-block">
  1638. <div class="r-js-color" style="background-color: #33FF66" data-hex="#33FF66" data-rgb="51, 255, 102" data-hsl="135, 100%, 60%"></div>
  1639. </div>
  1640. <div class="color-block">
  1641. <div class="r-js-color" style="background-color: #33FF33" data-hex="#33FF33" data-rgb="51, 255, 51" data-hsl="120, 100%, 60%"></div>
  1642. </div>
  1643. <div class="color-block">
  1644. <div class="r-js-color" style="background-color: #33FF00" data-hex="#33FF00" data-rgb="51, 255, 0" data-hsl="108, 100%, 50%"></div>
  1645. </div>
  1646. </div>
  1647. <div class="color-group">
  1648. <div class="color-block">
  1649. <div class="r-js-color" style="background-color: #00CC00" data-hex="#00CC00" data-rgb="0, 204, 0" data-hsl="120, 100%, 40%"></div>
  1650. </div>
  1651. <div class="color-block">
  1652. <div class="r-js-color" style="background-color: #00CC33" data-hex="#00CC33" data-rgb="0, 204, 51" data-hsl="135, 100%, 40%"></div>
  1653. </div>
  1654. <div class="color-block">
  1655. <div class="r-js-color" style="background-color: #00CC66" data-hex="#00CC66" data-rgb="0, 204, 102" data-hsl="150, 100%, 40%"></div>
  1656. </div>
  1657. <div class="color-block">
  1658. <div class="r-js-color" style="background-color: #00CC99" data-hex="#00CC99" data-rgb="0, 204, 153" data-hsl="165, 100%, 40%"></div>
  1659. </div>
  1660. <div class="color-block">
  1661. <div class="r-js-color" style="background-color: #00CCCC" data-hex="#00CCCC" data-rgb="0, 204, 204" data-hsl="180, 100%, 40%"></div>
  1662. </div>
  1663. <div class="color-block">
  1664. <div class="r-js-color" style="background-color: #00CCFF" data-hex="#00CCFF" data-rgb="0, 204, 255" data-hsl="192, 100%, 50%"></div>
  1665. </div>
  1666. <div class="color-block">
  1667. <div class="r-js-color" style="background-color: #33CCFF" data-hex="#33CCFF" data-rgb="51, 204, 255" data-hsl="195, 100%, 60%"></div>
  1668. </div>
  1669. <div class="color-block">
  1670. <div class="r-js-color" style="background-color: #33CCCC" data-hex="#33CCCC" data-rgb="51, 204, 204" data-hsl="180, 60%, 50%"></div>
  1671. </div>
  1672. <div class="color-block">
  1673. <div class="r-js-color" style="background-color: #33CC99" data-hex="#33CC99" data-rgb="51, 204, 153" data-hsl="160, 60%, 50%"></div>
  1674. </div>
  1675. <div class="color-block">
  1676. <div class="r-js-color" style="background-color: #33CC66" data-hex="#33CC66" data-rgb="51, 204, 102" data-hsl="140, 60%, 50%"></div>
  1677. </div>
  1678. <div class="color-block">
  1679. <div class="r-js-color" style="background-color: #33CC33" data-hex="#33CC33" data-rgb="51, 204, 51" data-hsl="120, 60%, 50%"></div>
  1680. </div>
  1681. <div class="color-block">
  1682. <div class="r-js-color" style="background-color: #33CC00" data-hex="#33CC00" data-rgb="51, 204, 0" data-hsl="105, 100%, 40%"></div>
  1683. </div>
  1684. </div>
  1685. <div class="color-group">
  1686. <div class="color-block">
  1687. <div class="r-js-color" style="background-color: #009900" data-hex="#009900" data-rgb="0, 153, 0" data-hsl="120, 100%, 30%"></div>
  1688. </div>
  1689. <div class="color-block">
  1690. <div class="r-js-color" style="background-color: #009933" data-hex="#009933" data-rgb="0, 153, 51" data-hsl="140, 100%, 30%"></div>
  1691. </div>
  1692. <div class="color-block">
  1693. <div class="r-js-color" style="background-color: #009966" data-hex="#009966" data-rgb="0, 153, 102" data-hsl="160, 100%, 30%"></div>
  1694. </div>
  1695. <div class="color-block">
  1696. <div class="r-js-color" style="background-color: #009999" data-hex="#009999" data-rgb="0, 153, 153" data-hsl="180, 100%, 30%"></div>
  1697. </div>
  1698. <div class="color-block">
  1699. <div class="r-js-color" style="background-color: #0099CC" data-hex="#0099CC" data-rgb="0, 153, 204" data-hsl="195, 100%, 40%"></div>
  1700. </div>
  1701. <div class="color-block">
  1702. <div class="r-js-color" style="background-color: #0099FF" data-hex="#0099FF" data-rgb="0, 153, 255" data-hsl="204, 100%, 50%"></div>
  1703. </div>
  1704. <div class="color-block">
  1705. <div class="r-js-color" style="background-color: #3399FF" data-hex="#3399FF" data-rgb="51, 153, 255" data-hsl="210, 100%, 60%"></div>
  1706. </div>
  1707. <div class="color-block">
  1708. <div class="r-js-color" style="background-color: #3399CC" data-hex="#3399CC" data-rgb="51, 153, 204" data-hsl="200, 60%, 50%"></div>
  1709. </div>
  1710. <div class="color-block">
  1711. <div class="r-js-color" style="background-color: #339999" data-hex="#339999" data-rgb="51, 153, 153" data-hsl="180, 50%, 40%"></div>
  1712. </div>
  1713. <div class="color-block">
  1714. <div class="r-js-color" style="background-color: #339966" data-hex="#339966" data-rgb="51, 153, 102" data-hsl="150, 50%, 40%"></div>
  1715. </div>
  1716. <div class="color-block">
  1717. <div class="r-js-color" style="background-color: #339933" data-hex="#339933" data-rgb="51, 153, 51" data-hsl="120, 50%, 40%"></div>
  1718. </div>
  1719. <div class="color-block">
  1720. <div class="r-js-color" style="background-color: #339900" data-hex="#339900" data-rgb="51, 153, 0" data-hsl="100, 100%, 30%"></div>
  1721. </div>
  1722. </div>
  1723. <div class="color-group">
  1724. <div class="color-block">
  1725. <div class="r-js-color" style="background-color: #006600" data-hex="#006600" data-rgb="0, 102, 0" data-hsl="120, 100%, 20%"></div>
  1726. </div>
  1727. <div class="color-block">
  1728. <div class="r-js-color" style="background-color: #006633" data-hex="#006633" data-rgb="0, 102, 51" data-hsl="150, 100%, 20%"></div>
  1729. </div>
  1730. <div class="color-block">
  1731. <div class="r-js-color" style="background-color: #006666" data-hex="#006666" data-rgb="0, 102, 102" data-hsl="180, 100%, 20%"></div>
  1732. </div>
  1733. <div class="color-block">
  1734. <div class="r-js-color" style="background-color: #006699" data-hex="#006699" data-rgb="0, 102, 153" data-hsl="200, 100%, 30%"></div>
  1735. </div>
  1736. <div class="color-block">
  1737. <div class="r-js-color" style="background-color: #0066CC" data-hex="#0066CC" data-rgb="0, 102, 204" data-hsl="210, 100%, 40%"></div>
  1738. </div>
  1739. <div class="color-block">
  1740. <div class="r-js-color" style="background-color: #0066FF" data-hex="#0066FF" data-rgb="0, 102, 255" data-hsl="216, 100%, 50%"></div>
  1741. </div>
  1742. <div class="color-block">
  1743. <div class="r-js-color" style="background-color: #3366FF" data-hex="#3366FF" data-rgb="51, 102, 255" data-hsl="225, 100%, 60%"></div>
  1744. </div>
  1745. <div class="color-block">
  1746. <div class="r-js-color" style="background-color: #3366CC" data-hex="#3366CC" data-rgb="51, 102, 204" data-hsl="220, 60%, 50%"></div>
  1747. </div>
  1748. <div class="color-block">
  1749. <div class="r-js-color" style="background-color: #336699" data-hex="#336699" data-rgb="51, 102, 153" data-hsl="210, 50%, 40%"></div>
  1750. </div>
  1751. <div class="color-block">
  1752. <div class="r-js-color" style="background-color: #336666" data-hex="#336666" data-rgb="51, 102, 102" data-hsl="180, 33%, 30%"></div>
  1753. </div>
  1754. <div class="color-block">
  1755. <div class="r-js-color" style="background-color: #336633" data-hex="#336633" data-rgb="51, 102, 51" data-hsl="120, 33%, 30%"></div>
  1756. </div>
  1757. <div class="color-block">
  1758. <div class="r-js-color" style="background-color: #336600" data-hex="#336600" data-rgb="51, 102, 0" data-hsl="90, 100%, 20%"></div>
  1759. </div>
  1760. </div>
  1761. <div class="color-group">
  1762. <div class="color-block">
  1763. <div class="r-js-color" style="background-color: #003300" data-hex="#003300" data-rgb="0, 51, 0" data-hsl="120, 100%, 10%"></div>
  1764. </div>
  1765. <div class="color-block">
  1766. <div class="r-js-color" style="background-color: #003333" data-hex="#003333" data-rgb="0, 51, 51" data-hsl="180, 100%, 10%"></div>
  1767. </div>
  1768. <div class="color-block">
  1769. <div class="r-js-color" style="background-color: #003366" data-hex="#003366" data-rgb="0, 51, 102" data-hsl="210, 100%, 20%"></div>
  1770. </div>
  1771. <div class="color-block">
  1772. <div class="r-js-color" style="background-color: #003399" data-hex="#003399" data-rgb="0, 51, 153" data-hsl="220, 100%, 30%"></div>
  1773. </div>
  1774. <div class="color-block">
  1775. <div class="r-js-color" style="background-color: #0033CC" data-hex="#0033CC" data-rgb="0, 51, 204" data-hsl="225, 100%, 40%"></div>
  1776. </div>
  1777. <div class="color-block">
  1778. <div class="r-js-color" style="background-color: #0033FF" data-hex="#0033FF" data-rgb="0, 51, 255" data-hsl="228, 100%, 50%"></div>
  1779. </div>
  1780. <div class="color-block">
  1781. <div class="r-js-color" style="background-color: #3333FF" data-hex="#3333FF" data-rgb="51, 51, 255" data-hsl="240, 100%, 60%"></div>
  1782. </div>
  1783. <div class="color-block">
  1784. <div class="r-js-color" style="background-color: #3333CC" data-hex="#3333CC" data-rgb="51, 51, 204" data-hsl="240, 60%, 50%"></div>
  1785. </div>
  1786. <div class="color-block">
  1787. <div class="r-js-color" style="background-color: #333399" data-hex="#333399" data-rgb="51, 51, 153" data-hsl="240, 50%, 40%"></div>
  1788. </div>
  1789. <div class="color-block">
  1790. <div class="r-js-color" style="background-color: #333366" data-hex="#333366" data-rgb="51, 51, 102" data-hsl="240, 33%, 30%"></div>
  1791. </div>
  1792. <div class="color-block">
  1793. <div class="r-js-color" style="background-color: #333333" data-hex="#333333" data-rgb="51, 51, 51" data-hsl="0, 0%, 20%"></div>
  1794. </div>
  1795. <div class="color-block">
  1796. <div class="r-js-color" style="background-color: #333300" data-hex="#333300" data-rgb="51, 51, 0" data-hsl="60, 100%, 10%"></div>
  1797. </div>
  1798. </div>
  1799. <div class="color-group">
  1800. <div class="color-block">
  1801. <div class="r-js-color" style="background-color: #000000" data-hex="#000000" data-rgb="0, 0, 0" data-hsl="0, 0%, 0%"></div>
  1802. </div>
  1803. <div class="color-block">
  1804. <div class="r-js-color" style="background-color: #000033" data-hex="#000033" data-rgb="0, 0, 51" data-hsl="240, 100%, 10%"></div>
  1805. </div>
  1806. <div class="color-block">
  1807. <div class="r-js-color" style="background-color: #000066" data-hex="#000066" data-rgb="0, 0, 102" data-hsl="240, 100%, 20%"></div>
  1808. </div>
  1809. <div class="color-block">
  1810. <div class="r-js-color" style="background-color: #000099" data-hex="#000099" data-rgb="0, 0, 153" data-hsl="240, 100%, 30%"></div>
  1811. </div>
  1812. <div class="color-block">
  1813. <div class="r-js-color" style="background-color: #0000CC" data-hex="#0000CC" data-rgb="0, 0, 204" data-hsl="240, 100%, 40%"></div>
  1814. </div>
  1815. <div class="color-block">
  1816. <div class="r-js-color" style="background-color: #0000FF" data-hex="#0000FF" data-rgb="0, 0, 255" data-hsl="240, 100%, 50%"></div>
  1817. </div>
  1818. <div class="color-block">
  1819. <div class="r-js-color" style="background-color: #3300FF" data-hex="#3300FF" data-rgb="51, 0, 255" data-hsl="252, 100%, 50%"></div>
  1820. </div>
  1821. <div class="color-block">
  1822. <div class="r-js-color" style="background-color: #3300CC" data-hex="#3300CC" data-rgb="51, 0, 204" data-hsl="255, 100%, 40%"></div>
  1823. </div>
  1824. <div class="color-block">
  1825. <div class="r-js-color" style="background-color: #330099" data-hex="#330099" data-rgb="51, 0, 153" data-hsl="260, 100%, 30%"></div>
  1826. </div>
  1827. <div class="color-block">
  1828. <div class="r-js-color" style="background-color: #330066" data-hex="#330066" data-rgb="51, 0, 102" data-hsl="270, 100%, 20%"></div>
  1829. </div>
  1830. <div class="color-block">
  1831. <div class="r-js-color" style="background-color: #330033" data-hex="#330033" data-rgb="51, 0, 51" data-hsl="300, 100%, 10%"></div>
  1832. </div>
  1833. <div class="color-block">
  1834. <div class="r-js-color" style="background-color: #330000" data-hex="#330000" data-rgb="51, 0, 0" data-hsl="0, 100%, 10%"></div>
  1835. </div>
  1836. </div></div>
  1837. <div class="r_show_color"><input type="hidden" name="root-color"></div>
  1838. <span class="r_span_color" style="width:100px; font-size: 20px; padding-bottom: 10px; border-bottom: 2px solid #000000;"></span>
  1839. </div>
  1840. </div>
  1841. <div class="brightness_info" style="display:none;">
  1842. <div>
  1843. <input type="range" min="0" max="100" value="40" name="root-bright-vol" style="width:550px;">
  1844. </div>
  1845. <div class="switch_div">
  1846. <span>Auto brightness</span>
  1847. <div class="switch">
  1848. <input id="cmn-toggle-60" class="cmn-toggle cmn-toggle-round" type="checkbox">
  1849. <label for="cmn-toggle-60"></label>
  1850. </div>
  1851. <div class="switch">
  1852. <input id="cmn-toggle-61" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="root-bright-on">
  1853. <label for="cmn-toggle-61"></label>
  1854. </div>
  1855. <div class="switch">
  1856. <input id="cmn-toggle-62" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
  1857. <label for="cmn-toggle-62" data-on="Yes" data-off="No"></label>
  1858. </div>
  1859. </div>
  1860. </div>
  1861. <div class="cancel-confirm">
  1862. <input type="button" value="Cancel" class="root-light-cancel">
  1863. <input type="submit" value="Confirm" class="root-light-confirm">
  1864. </div>
  1865. <div></div>
  1866. </div>
  1867. </div>
  1868. <div class="row">
  1869. <div></div>
  1870. <div id="stem-tem" class="show-info" style="display: none;">
  1871. <br>
  1872. <h1>Stem Temperature</h1>
  1873. <div class="row">
  1874. <div class="col-1"></div>
  1875. <div class="col-10 stem-tem row" style="margin-top: 150px; margin-left:50px;">
  1876. <div>Near Stem 1<div id="ns1-data"></div></div>
  1877. <div>Near Stem 2<div id="ns2-data"></div></div>
  1878. <div>Air Temperature 1<div id="at1-data"></div></div>
  1879. <div>Air Temperature 2<div id="at2-data"></div></div>
  1880. </div>
  1881. <div class="col-1"></div>
  1882. </div>
  1883. <div class="cancel-confirm" style="text-align:center;">
  1884. <input type="button" value="Cancel" style="margin-left:0px;" class="stem-tem-cancel">
  1885. </div>
  1886. </div>
  1887. <div></div>
  1888. </div>
  1889. <div class="row">
  1890. <div></div>
  1891. <div id="music-control" class="show-info" style="display:none;">
  1892. <h1>Music Control</h1>
  1893. <input class="set-schedule" type="button" value="Set up the schedule" style="margin-top:100px;">
  1894. <br>
  1895. <div class="row" style="position:ralative;">
  1896. <div class="col-2"></div>
  1897. <div class="col-7" style="margin-top: 100px; margin-left:50px;">
  1898. <div></div>
  1899. <div id="music_div" class="from-to col-xl-12 col-lg-12 col-md-12" style="margin-top:10px;display:none;">
  1900. <div>
  1901. <div class="from row col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
  1902. <div class="col-md-3 col-sm-12 col-xs-12">
  1903. <select name="music1" class="music-select">
  1904. <option selected value="playlist1">playlist1</option>
  1905. <option value="playlist2">playlist2</option>
  1906. <option value="playlist3">playlist3</option>
  1907. </select>
  1908. </div>
  1909. <div class="col-xs-3">
  1910. <span>From</span>
  1911. </div>
  1912. <div class="col-xs-6">
  1913. <select name="music_from_hr1">
  1914. {% for hr in range(0, 24) %}
  1915. {% if hr < 10 %}
  1916. <option value="0{{hr}}">0{{hr}}</option>
  1917. {% else %}
  1918. <option value="{{hr}}">{{hr}}</option>
  1919. {% endif %}
  1920. {% endfor %}
  1921. </select>
  1922. :<select name="music_from_min1">
  1923. {% for min in range(0, 60) %}
  1924. {% if min < 10 %}
  1925. <option value="0{{min}}">0{{min}}</option>
  1926. {% else %}
  1927. <option value="{{min}}">{{min}}</option>
  1928. {% endif %}
  1929. {% endfor %}
  1930. </select>
  1931. </div>
  1932. <div class="col-xs-3">
  1933. <input id="music_del1" class="delete" type="button" value="Delete" onclick="Delete(music_del1);">
  1934. </div>
  1935. </div>
  1936. <div class="to row" style="margin-left:130px;">
  1937. <div class="col-xs-3">
  1938. <span style="margin-left: 33px;">To</span>
  1939. </div>
  1940. <div class="col-xs-6">
  1941. <select name="music_to_hr1">
  1942. {% for hr in range(0, 24) %}
  1943. {% if hr < 10 %}
  1944. <option value="0{{hr}}">0{{hr}}</option>
  1945. {% else %}
  1946. <option value="{{hr}}">{{hr}}</option>
  1947. {% endif %}
  1948. {% endfor %}
  1949. </select>
  1950. :<select name="music_to_min1">
  1951. {% for min in range(0, 60) %}
  1952. {% if min < 10 %}
  1953. <option value="0{{min}}">0{{min}}</option>
  1954. {% else %}
  1955. <option value="{{min}}">{{min}}</option>
  1956. {% endif %}
  1957. {% endfor %}
  1958. </select><br>
  1959. <input id="music_add1" class="add" type="button" value="Add" onclick="Add(music_add1);">
  1960. </div>
  1961. <div class="col-xs-3"></div>
  1962. </div>
  1963. </div>
  1964. </div>
  1965. </div>
  1966. <div class="col-2 vol-div" style="display:none;">
  1967. <input type="range" min="0" max="100" value="40" class="volume" name="m-vol">
  1968. <span class="volume-span">volume</span>
  1969. </div>
  1970. </div>
  1971. <div class="cancel-confirm" style="text-align:center;">
  1972. <input type="button" value="Cancel" style="margin-left:0px;" class="music-control-cancel">
  1973. <input type="submit" value="Confirm">
  1974. </div>
  1975. </div>
  1976. </div>
  1977. <div class="row">
  1978. <div></div>
  1979. <div id="camera-control" class="show-info" style="display: none;">
  1980. <h1>Camera Control</h1>
  1981. <br>
  1982. <div style="height:70px;"></div>
  1983. <div class="row">
  1984. <div class="col-1"></div>
  1985. <div class="col-5">
  1986. <div class="switch_div">
  1987. <span>ON/OFF</span>
  1988. <div class="switch">
  1989. <input id="cmn-toggle-53" class="cmn-toggle cmn-toggle-round" type="checkbox">
  1990. <label for="cmn-toggle-53"></label>
  1991. </div>
  1992. <div class="switch">
  1993. <input id="cmn-toggle-54" class="cmn-toggle cmn-toggle-round-flat" type="checkbox" checked name="camera-on">
  1994. <label for="cmn-toggle-54"></label>
  1995. </div>
  1996. <div class="switch">
  1997. <input id="cmn-toggle-55" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">
  1998. <label for="cmn-toggle-55" data-on="Yes" data-off="No"></label>
  1999. </div>
  2000. </div>
  2001. <div>
  2002. <span>Duration</span>
  2003. <select name="c-duration">
  2004. <option value="30min">30min</option>
  2005. <option value="60min">60min</option>
  2006. <option value="90min">90min</option>
  2007. </select>
  2008. </div>
  2009. <div>
  2010. <input type="button" value="Gallery" class="gallery">
  2011. </div>
  2012. </div>
  2013. <div class="col-5 live-stream">
  2014. <iframe src="http://192.168.50.177:81/stream" width="450px" height="500px"></iframe>
  2015. </div>
  2016. </div>
  2017. <div class="cancel-confirm" style="text-align:center;">
  2018. <input type="button" value="Cancel" style="margin-left:0px;" class="camera-control-cancel">
  2019. </div>
  2020. </div>
  2021. </div>
  2022. <div class="row">
  2023. <div></div>
  2024. <div id="gallery" class="show-info" style="display: none;">
  2025. <h1>Gallery</h1>
  2026. <br>
  2027. <div style="height:70px;"></div>
  2028. <div class="row">
  2029. <div class="col-1"></div>
  2030. <div class="col-10" style="overflow-y:scroll;height:400px">
  2031. {% for i in range(1,17) %}
  2032. <div class="slider-container"></div>
  2033. {% endfor %}
  2034. </div>
  2035. <div class="col-1"></div>
  2036. </div>
  2037. <div class="cancel-confirm" style="text-align:center;">
  2038. <input type="button" value="Cancel" style="margin-left:0px;" class="gallery-cancel">
  2039. </div>
  2040. </div>
  2041. </div>`
  2042. <div class="row">
  2043. <div></div>
  2044. <div id="plant-stress-monitor" class="show-info" style="display: none;">
  2045. <br>
  2046. <h1>Plant Stress Monitor</h1>
  2047. <div class="row">
  2048. <div class="col-1"></div>
  2049. <div class="col-10 plant-stress-monitor row" style="margin-top: 150px;text-align:center;">
  2050. <div>Chlorophyll<div></div></div>
  2051. <div>Leaf<div></div></div>
  2052. </div>
  2053. <div class="col-1"></div>
  2054. </div>
  2055. <div class="cancel-confirm" style="text-align:center;">
  2056. <input type="button" value="Cancel" style="margin-left:0px;" class="plant-stress-monitor-cancel">
  2057. </div>
  2058. </div>
  2059. </div>
  2060. <div class="row">
  2061. <div></div>
  2062. <div id="weight" class="show-info" style="display: none;">
  2063. <br>
  2064. <h1>Weight</h1>
  2065. <div class="row">
  2066. <div class="col-4"></div>
  2067. <div class="col-6 weight row" style="margin-top: 150px;text-align:center;">
  2068. <div>Weight Sensor1<div id="wgt1-data"></div></div>
  2069. <div>Weight Sensor2<div id="wgt2-data"></div></div>
  2070. </div>
  2071. <div class="col-2"></div>
  2072. </div>
  2073. <div class="cancel-confirm" style="text-align:center;">
  2074. <input type="button" value="Cancel" style="margin-left:0px;" class="weight-cancel">
  2075. </div>
  2076. </div>
  2077. </div>
  2078. <div>
  2079. <div id="h2-div" class="show-info" style="display: none;">
  2080. <br>
  2081. <h1>H2</h1>
  2082. <div class="row">
  2083. <div class="col-1"></div>
  2084. <div class="col-10 h2 show-chart" style="margin-top: 70px;text-align:center;"></div>
  2085. <div class="col-1"></div>
  2086. </div>
  2087. <div class="cancel-confirm" style="text-align:center;">
  2088. <input type="button" value="Cancel" style="margin-left:0px;" class="h2-cancel">
  2089. </div>
  2090. </div>
  2091. </div>
  2092. <div class="row">
  2093. <div></div>
  2094. <div id="vibration" class="show-info" style="display: none;">
  2095. <h1>Vibration</h1>
  2096. <input class="set-schedule" type="button" value="Set up the schedule" style="margin-top:100px;">
  2097. <br>
  2098. <div class="row">
  2099. <div class="col-2"></div>
  2100. <div class="col-7" style="margin-top: 100px; margin-left:50px;">
  2101. <div></div>
  2102. <div id="vibration_div" class="from-to col-xl-12 col-lg-12 col-md-12" style="margin-top:10px;display:none;">
  2103. <div>
  2104. <div class="from row col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
  2105. <div class="col-md-3 col-sm-12 col-xs-12">
  2106. <select name="vibration1" class="vibration-select">
  2107. <option selected value="5Hz">5Hz</option>
  2108. <option value="10Hz">10Hz</option>
  2109. <option value="15Hz">15Hz</option>
  2110. </select>
  2111. </div>
  2112. <div class="col-xs-3">
  2113. <span>From</span>
  2114. </div>
  2115. <div class="col-xs-6">
  2116. <select name="v_from_hr1">
  2117. {% for hr in range(0, 24) %}
  2118. {% if hr < 10 %}
  2119. <option value="0{{hr}}">0{{hr}}</option>
  2120. {% else %}
  2121. <option value="{{hr}}">{{hr}}</option>
  2122. {% endif %}
  2123. {% endfor %}
  2124. </select>
  2125. :<select name="v_from_min1">
  2126. {% for min in range(0, 60) %}
  2127. {% if min < 10 %}
  2128. <option value="0{{min}}">0{{min}}</option>
  2129. {% else %}
  2130. <option value="{{min}}">{{min}}</option>
  2131. {% endif %}
  2132. {% endfor %}
  2133. </select>
  2134. </div>
  2135. <div class="col-xs-3">
  2136. <input id="v_del1" class="delete" type="button" value="Delete" onclick="Delete(v_del1);">
  2137. </div>
  2138. </div>
  2139. <div class="to row" style="margin-left:130px;">
  2140. <div class="col-xs-3">
  2141. <span style="margin-left: 33px;">To</span>
  2142. </div>
  2143. <div class="col-xs-6">
  2144. <select name="v_to_hr1">
  2145. {% for hr in range(0, 24) %}
  2146. {% if hr < 10 %}
  2147. <option value="0{{hr}}">0{{hr}}</option>
  2148. {% else %}
  2149. <option value="{{hr}}">{{hr}}</option>
  2150. {% endif %}
  2151. {% endfor %}
  2152. </select>
  2153. :<select name="v_to_min1">
  2154. {% for min in range(0, 60) %}
  2155. {% if min < 10 %}
  2156. <option value="0{{min}}">0{{min}}</option>
  2157. {% else %}
  2158. <option value="{{min}}">{{min}}</option>
  2159. {% endif %}
  2160. {% endfor %}
  2161. </select><br>
  2162. <input id="v_add1" class="add" type="button" value="Add" onclick="Add(v_add1);">
  2163. </div>
  2164. <div class="col-xs-3"></div>
  2165. </div>
  2166. </div>
  2167. </div>
  2168. </div>
  2169. <div class="col-2 pow-div" style="display:none">
  2170. <input type="range" min="0" max="100" value="40" class="power" name="v-pow">
  2171. <span class="power-span">Power</span>
  2172. </div>
  2173. </div>
  2174. <div class="cancel-confirm" style="text-align:center;">
  2175. <input type="button" value="Cancel" style="margin-left:0px;" class="vibration-cancel">
  2176. <input type="submit" value="Confirm">
  2177. </div>
  2178. </div>
  2179. </div>
  2180. <div class="row">
  2181. <div id="water-con-con" class="show-info" style="display: none;">
  2182. <h1>Water Control Configuration</h1>
  2183. <br>
  2184. <div class="row">
  2185. <div class="col-1"></div>
  2186. <div class="tank1 col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  2187. <h2 class="item-title">Water cycle from Tank1</h2>
  2188. <input class="set-schedule" type="button" value="Set up the schedule">
  2189. <br>
  2190. <div id="tank1_div" class="row" style="visibility:hidden;">
  2191. <div class="col-12 row">
  2192. <div class="col-xl-5 col-lg-5 col-md-4 col-sm-12 col-xs-12" style="margin-top:10px;">
  2193. <span>Duration</span>
  2194. <select name="tank1_duration1" class="duration">
  2195. <option selected value="30min">30 min</option>
  2196. <option value="60min">60 min</option>
  2197. <option value="90min">90 min</option>
  2198. <option value="120min">120 min</option>
  2199. <option value="150min">150 min</option>
  2200. </select>
  2201. </div>
  2202. <div class="from-to col-xl-7 col-lg-7 col-md-8 col-sm-12 col-xs-12" style="margin-top:10px;padding-right:0px;">
  2203. <div>
  2204. <div class="from row" style="margin-left:10px;">
  2205. <div class="col-xs-3">
  2206. <span>From</span>
  2207. </div>
  2208. <div class="col-xs-6">
  2209. <select name="tank1_from_hr1">
  2210. {% for hr in range(0, 24) %}
  2211. {% if hr < 10 %}
  2212. <option value="0{{hr}}">0{{hr}}</option>
  2213. {% else %}
  2214. <option value="{{hr}}">{{hr}}</option>
  2215. {% endif %}
  2216. {% endfor %}
  2217. </select>
  2218. :<select name="tank1_from_min1">
  2219. {% for min in range(0, 60) %}
  2220. {% if min < 10 %}
  2221. <option value="0{{min}}">0{{min}}</option>
  2222. {% else %}
  2223. <option value="{{min}}">{{min}}</option>
  2224. {% endif %}
  2225. {% endfor %}
  2226. </select>
  2227. </div>
  2228. <div class="col-xs-3">
  2229. <input id="tank1_del1" class="delete" type="button" value="Delete" onclick="Delete(tank1_del1);">
  2230. </div>
  2231. </div>
  2232. <div class="to row">
  2233. <div class="col-xs-3">
  2234. <span style="margin-left: 31px;">To</span>
  2235. </div>
  2236. <div class="col-xs-6">
  2237. <select name="tank1_to_hr1">
  2238. {% for hr in range(0, 24) %}
  2239. {% if hr < 10 %}
  2240. <option value="0{{hr}}">0{{hr}}</option>
  2241. {% else %}
  2242. <option value="{{hr}}">{{hr}}</option>
  2243. {% endif %}
  2244. {% endfor %}
  2245. </select>
  2246. :<select name="tank1_to_min1">
  2247. {% for min in range(0, 60) %}
  2248. {% if min < 10 %}
  2249. <option value="0{{min}}">0{{min}}</option>
  2250. {% else %}
  2251. <option value="{{min}}">{{min}}</option>
  2252. {% endif %}
  2253. {% endfor %}
  2254. </select><br>
  2255. <input id="tank1_add1" class="add" type="button" value="Add" onclick="Add(tank1_add1);">
  2256. </div>
  2257. <div class="col-xs-3"></div>
  2258. </div>
  2259. </div>
  2260. </div>
  2261. </div>
  2262. </div>
  2263. </div>
  2264. <div style="width:20px;"></div>
  2265. <div class="tank2 col-xl-5 col-lg-5 col-md-5 col-sm-8 col-xs-8">
  2266. <h2 class="item-title">Water cycle from Tank2</h2>
  2267. <input class="set-schedule" type="button" value="Set up the schedule">
  2268. <br>
  2269. <div id="tank2_div" class="row" style="visibility:hidden;">
  2270. <div class="col-12 row">
  2271. <div class="col-xl-5 col-lg-5 col-md-4" style="margin-top:10px;">
  2272. <span>Duration</span>
  2273. <select name="tank2_duration1" class="duration">
  2274. <option selected value="30min">30 min</option>
  2275. <option value="60min">60 min</option>
  2276. <option value="90min">90 min</option>
  2277. <option value="120min">120 min</option>
  2278. <option value="150min">150 min</option>
  2279. </select>
  2280. </div>
  2281. <div class="from-to col-xl-7 col-lg-7 col-md-8" style="margin-top:10px;padding-right:0px;">
  2282. <div>
  2283. <div class="from row" style="margin-left:10px;">
  2284. <div class="col-xs-3">
  2285. <span>From</span>
  2286. </div>
  2287. <div class="col-xs-6">
  2288. <select name="tank2_from_hr1">
  2289. {% for hr in range(0, 24) %}
  2290. {% if hr < 10 %}
  2291. <option value="0{{hr}}">0{{hr}}</option>
  2292. {% else %}
  2293. <option value="{{hr}}">{{hr}}</option>
  2294. {% endif %}
  2295. {% endfor %}
  2296. </select>
  2297. :<select name="tank2_from_min1">
  2298. {% for min in range(0, 60) %}
  2299. {% if min < 10 %}
  2300. <option value="0{{min}}">0{{min}}</option>
  2301. {% else %}
  2302. <option value="{{min}}">{{min}}</option>
  2303. {% endif %}
  2304. {% endfor %}
  2305. </select>
  2306. </div>
  2307. <div class="col-xs-3">
  2308. <input id="tank2_del1" class="delete" type="button" value="Delete" onclick="Delete(tank2_del1);">
  2309. </div>
  2310. </div>
  2311. <div class="to row">
  2312. <div class="col-xs-3">
  2313. <span style="margin-left: 31px;">To</span>
  2314. </div>
  2315. <div class="col-xs-6">
  2316. <select name="tank2_to_hr1">
  2317. {% for hr in range(0, 24) %}
  2318. {% if hr < 10 %}
  2319. <option value="0{{hr}}">0{{hr}}</option>
  2320. {% else %}
  2321. <option value="{{hr}}">{{hr}}</option>
  2322. {% endif %}
  2323. {% endfor %}
  2324. </select>
  2325. :<select name="tank2_to_min1">
  2326. {% for min in range(0, 60) %}
  2327. {% if min < 10 %}
  2328. <option value="0{{min}}">0{{min}}</option>
  2329. {% else %}
  2330. <option value="{{min}}">{{min}}</option>
  2331. {% endif %}
  2332. {% endfor %}
  2333. </select><br>
  2334. <input id="tank2_add1" class="add" type="button" value="Add" onclick="Add(tank2_add1);">
  2335. </div>
  2336. <div class="col-xs-3"></div>
  2337. </div>
  2338. </div>
  2339. </div>
  2340. </div>
  2341. </div>
  2342. <div class="col-1"></div>
  2343. </div>
  2344. </div>
  2345. <div class="cancel-confirm" style="text-align:center;">
  2346. <input type="button" value="Cancel" style="margin-left:0px;" class="water-con-con-cancel">
  2347. <input type="submit" value="Confirm">
  2348. </div>
  2349. </div>
  2350. </div>
  2351. </div>
  2352. </div>
  2353. </form>
  2354. </div>
  2355. </body>
  2356. </html>