..we are going to create a new app for the hacksuite. We're not going to do anything fancy here, we will make a simple app to get familiar how to write compatible scripts for the..
Creates a blueprint/map of a server folder
/* Main style for Predator
Author: Remco Kouw
Site: http://www.hacksuite.com
Last Edit: 05-04-2015
*/
/* reset css */
html,body,div { margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline; }
html { overflow:-moz-scrollbars-vertical;overflow-y:scroll; }
/* main */
#main { z-index:0; }
body { font-family:Verdana,Helvetica,sans-serif;font-size:13px;color:#ffffff;background:url(../images/bgx.jpg) no-repeat fixed;background-size:100%; }
a { text-decoration:none;color:#ffff33; }
a:hover { text-decoration:underline;color:#ff0000; }
input[type=text],select,input[type=submit],textarea { border:1px solid #333333;border-radius:3px;background:#6fb2e5;box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-o-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-webkit-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;-moz-box-shadow:0 1px 5px #0061aa,inset 0 10px 20px #b6f9ff;padding:2px; }
/* container */
.containerx { margin:0 auto;width:1200px;overflow:auto;background:url(../images/bgpredator.png) no-repeat top left;padding-top:30px; }
.container { margin:0 auto;width:1070px;overflow:auto; }
.container .logoblock { width:940px; }
.logoblock .thclogo { max-width:350px; }
.container .content { border-top-right-radius:15px;background:rgba(0,0,0,0.9);overflow:auto;display:block;margin-top:3px;overflow:auto;height:100%; }
.container .content .links { float:left;width:200px;background:rgba(0,0,0,0.9);overflow:auto;height:100%; }
.container .content .links .subname { text-transform:uppercase;font-weight:bold;padding:2px;cursor:pointer;border:1px solid #000000;margin:2px;font-size:15px; }
.content img { float:left;margin:0px 20px 20px 0px; }
.subname#tsks { background:url(../images/tasks.png) #333333 no-repeat center left;padding-left:22px; }
.subname#wdgts { background:url(../images/widgets.png) #333333 no-repeat center left;padding-left:22px; }
.subname#pps { background:url(../images/apps.png) #333333 no-repeat center left;padding-left:22px; }
.subname#confgrtn { background:url(../images/config.png) #333333 no-repeat center left;padding-left:22px; }
.subname#dvlpmnt { background:url(../images/dev.png) #333333 no-repeat center left;padding-left:22px; }
.subname#srcs { background:url(../images/communicate.png) #333333 no-repeat center left;padding-left:22px; }
.subname#lcl { background:url(../images/lcl.png) #333333 no-repeat center left;padding-left:22px; }
.subname#tsr { background:url(../images/testservers.png) #333333 no-repeat center left;padding-left:22px; }
.subname#scrt { background:url(../images/warning.png) #333333 no-repeat center left;padding-left:22px; }
.subname#modsubs { background:url(../images/modules.png) #333333 no-repeat center left;padding-left:22px; }
.container .content .links .modsubs { }
.container .content .links .modsubs .headcat { font-weight:bold; }
.lnk { padding-left:10px; }
.container .content .data { float:left;width:800px;padding-left:10px; }
.container .content .data .title { font-size:20px;padding:2px 0 45px 210px; }
iframe { min-width:600px;background:url(../images/mainBG.jpg) no-repeat;z-index:0;margin-bottom:5px; }
/* modtable */
.modtable { display:block;width:820px; }
.moddesc { display:block;margin:5px 10px 10px 10px;overflow:auto;padding:7px;width:auto; }
.modtable .modrow { display:block;margin:2px 0 0 10px;overflow:auto; }
.modtable .modrow .modleft { float:left;width:150px; }
.modtable .modrow .modright { float:left;width:350px; }
.modtable .modrow .modright .tbl { display:block; }
.modtable .modrow .modright .tbl .trow { width:315px;padding:7px;overflow:auto;margin:2px; }
.modtable .modrow .modright .tbl .trow .tleft { float:left;width:65px; }
.modtable .modrow .modright .tbl .trow .tright { float:left;width:250px; }
.modtable .modrow .modrowleft { display:block;width:600px; }
.modtable .modrow .modrowleft .display { display:block;width:100%;min-height:20px;margin:0 0 5px 25px;overflow:auto; }
/* datawrap */
.dholder { margin:0 auto; }
.datawrap { margin:5px;display:block;width:400px;padding:5px;border:1px solid rgba(70,80,90,0.7);background:rgba(33,33,33,0.8);box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-o-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;overflow:auto; }
.datawrap .datarowh { display:none; }
.datawrap .datarow { display:block; }
.datawrap .datarow .datafieldl { float:left;width:130px;padding-top:3px; }
.datawrap .datarow .datafieldr { float:left;width:250px; }
/* footer */
#footerwrapper { height:35px;margin:-25px auto 0 auto;width:1070px; }
#footerwrapper h5 { padding:7px 0 7px 12px;border:1px solid rgba(70,80,90,0.7);background:rgba(33,33,33,0.8);box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-o-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-size:13px }
#footer div { text-align:left; }
#footer a { color:#3a6085;text-decoration:none;text-transform:uppercase; }
#footer a:hover { color:#ffffff; }
.defvals { display:none; }
.dhead { display:block;font-size:15px;width:680px;height:20px; }
.dhead .dvers { float:left;padding-left:210px; }
.dhead .server { float:left;padding:0 0 2px 200px;color:#ffffff;margin-top:-2px; }
.dhead .server img { padding:3px 0 0 10px; }
.clear { clear:both; }
/* accordion */
#accordion { overflow:auto;padding:7px;border:1px solid #708090;box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-o-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);background:url(../images/bgs.jpg) repeat #677b86; }
#accordion h4 { cursor:pointer;overflow:auto;background:rgba(33,71,94,0.8); }
/* configuration menu */
.centercfg { width:400px;margin:5px auto;overflow:auto;background:rgba(33,71,94,0.8); }
.config { background:url(../images/config.png) left center no-repeat;padding-left:20px; }
.configmenu { margin:0 auto;padding:0 25px 25px 25px;min-width:570px; }
.spacing { margin:19px 20px 25px; }
.spacingmsg { margin:19px 20px 25px;padding:25px;background:url(../images/bgs.jpg) repeat;border:1px #333333 solid;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; }
.moptions { margin-top:3px;border:1px solid rgba(200,200,200,0.7);padding:3px;background:rgba(33,71,94,0.8); }
.moptions a { color:#c0c0c0;font-weight:normal; }
/* EVERYTHING BELOW HAS BEEN NEW SINCE PREDATOR - 0.6 */
/* result headers */
.resultheaders { font-size:19px;text-transform:uppercase; }
.resultheaders#error { color:#cd5c5c; }
.resultheaders#fatal { color:#ff0000; }
.resultheaders#notice { color:#cccc66; }
.resultheaders#result { color:#ccaaaa; }
/* mimic hyperlinks */
div.editcfg,span.editcfg { cursor:pointer;color:#ffff33; }
div.editcfg:hover,span.editcfg:hover { cursor:pointer;text-decoration:underline;color:#ff0000; }
/* control center */
.cc_wrap { overflow:auto;width:780px;margin:0 auto; }
.cc_wrap .cc_main { margin-top:10px; }
.cc_wrap .cc_main .cc_top { display:block;overflow:auto; }
.cc_wrap .cc_main .cc_top .cc_left { float:left;width:150px; }
.cc_wrap .cc_main .cc_top .cc_right { float:left;width:550px;margin-left:10px;font-size:23px;padding:13px; }
.cc_wrap .cc_main .cc_notifications { display:block;overflow:auto; }
.cc_wrap .cc_main .cc_notifications .cc_summary { display:block;overflow:auto;margin-top:5px; }
.cc_wrap .cc_main .cc_notifications .cc_summary .cc_record { display:block;overflow:auto; }
/* styles */
.edgeglow { box-shadow:0 1px 5px #4cdaf4,inset 0 10px 50px #798dc8;-o-box-shadow:0 1px 5px #4cdaf4,inset 0 10px 50px #798dc8;-webkit-box-shadow:0 1px 5px #4cdaf4,inset 0 10px 50px #798dc8;-moz-box-shadow:0 1px 5px #4cdaf4,inset 0 10px 50px #798dc8; }
.modglow { box-shadow:2px 2px 5px #000000,inset 5px 10px 100px #000000;-o-box-shadow:0 1px 5px #333333,inset 5px 10px 100px #000000;-webkit-box-shadow:0 1px 5px #333333,inset 5px 10px 100px #000000;-moz-box-shadow:2px 2px 5px #000000,inset 5px 10px 100px #000000; }
.modhdr { background:rgba(11,15,20,0.69);background:-moz-linear-gradient(-45deg,rgba(11,15,20,0.69) 0%,rgba(11,15,20,0.69) 1%,rgba(107,183,255,0.89) 64%,rgba(0,0,0,1) 100%);background:-webkit-gradient(left top,right bottom,color-stop(0%,rgba(11,15,20,0.69)),color-stop(1%,rgba(11,15,20,0.69)),color-stop(64%,rgba(107,183,255,0.89)),color-stop(100%,rgba(0,0,0,1)));background:-webkit-linear-gradient(-45deg,rgba(11,15,20,0.69) 0%,rgba(11,15,20,0.69) 1%,rgba(107,183,255,0.89) 64%,rgba(0,0,0,1) 100%);background:-o-linear-gradient(-45deg,rgba(11,15,20,0.69) 0%,rgba(11,15,20,0.69) 1%,rgba(107,183,255,0.89) 64%,rgba(0,0,0,1) 100%);background:-ms-linear-gradient(-45deg,rgba(11,15,20,0.69) 0%,rgba(11,15,20,0.69) 1%,rgba(107,183,255,0.89) 64%,rgba(0,0,0,1) 100%);background:linear-gradient(135deg,rgba(11,15,20,0.69) 0%,rgba(11,15,20,0.69) 1%,rgba(107,183,255,0.89) 64%,rgba(0,0,0,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b0f14',endColorstr='#000000',GradientType=1); }
.rasterbg { background:url(../images/bgs.jpg) repeat; }
.emboss { box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-o-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(0,0,0,0.3); }
.embosstclr { box-shadow:0 2px 6px rgba(76,218,244,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(76,218,244,0.3);-o-box-shadow:0 2px 6px rgba(76,218,244,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(76,218,244,0.3);-webkit-box-shadow:0 2px 6px rgba(76,218,244,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(76,218,244,0.3);-moz-box-shadow:0 2px 6px rgba(76,218,244,0.5),inset 0 1px rgba(255,255,255,0.3),inset 0 10px rgba(255,255,255,0.2),inset 0 10px 20px rgba(255,255,255,0.25),inset 0 -15px 30px rgba(76,218,244,0.3); }
.embosshdr { -moz-box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;-webkit-box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;background:#4876e3;background:-webkit-gradient(linear,0 0,0 100%,from(#5891cc) to(#386bfc));background:-webkit-linear-gradient(#5891cc,#386bfc);background:-moz-linear-gradient(#5891cc,#386bfc);background:-ms-linear-gradient(#5891cc,#386bfc);background:-o-linear-gradient(#5891cc,#386bfc);background:linear-gradient(#5891cc,#386bfc);-pie-background:linear-gradient(#5891cc,#386bfc);-moz-border-radius:6px;-webkit-border-radius:6px;-khtml-border-radius:6px;border-radius:6px;border:1px solid #000000;display:inline-block;color:#fff !important;font-size:14px;font-weight:normal;padding:10px 20px;text-decoration:none;text-shadow:0px -1px 0px #183f9c;text-align:center;line-height:18px; }
.embosshdrnocenter { -moz-box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;-webkit-box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;background:#4876e3;background:-webkit-gradient(linear,0 0,0 100%,from(#5891cc) to(#386bfc));background:-webkit-linear-gradient(#5891cc,#386bfc);background:-moz-linear-gradient(#5891cc,#386bfc);background:-ms-linear-gradient(#5891cc,#386bfc);background:-o-linear-gradient(#5891cc,#386bfc);background:linear-gradient(#5891cc,#386bfc);-pie-background:linear-gradient(#5891cc,#386bfc);-moz-border-radius:6px;-webkit-border-radius:6px;-khtml-border-radius:6px;border-radius:6px;border:1px solid #000000;color:#fff !important;font-size:14px;font-weight:normal;line-height:18px; }
.embosshdrnocenterblack { -moz-box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;-webkit-box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;box-shadow:inset 0px 1px 0px 0px #a0b8f1,0 1px 4px #555;background:#000000;background:-webkit-gradient(linear,0 0,0 100%,from(#000000) to(#386bfc));background:-webkit-linear-gradient(#000000,#386bfc);background:-moz-linear-gradient(#000000,#386bfc);background:-ms-linear-gradient(#000000,#386bfc);background:-o-linear-gradient(#000000,#386bfc);background:linear-gradient(#000000,#386bfc);-pie-background:linear-gradient(#000000,#386bfc);-moz-border-radius:6px;-webkit-border-radius:6px;-khtml-border-radius:6px;border-radius:6px;border:1px solid #000000;color:#fff !important;font-size:14px;font-weight:normal;line-height:18px; }
.borderr5 { -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; }
.borderr10 { -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px; }
.borderr15 { -webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px; }
.border1pxstrans { border:1px solid rgba(200,200,200,0.5); }
.border1pxblack { border:1px solid rgba(0,0,0,0.7); }
.pad5 { padding:5px; }
.pad3 { padding:3px; }
.pad5 { padding:5px; }
.padt5 { padding-top:5px; }
.padl5 { padding-left:5px; }
.padr5 { padding-right:5px; }
.pad10 { padding:10px; }
.padt10 { padding-top:10px; }
.pad15 { padding:15px; }
.padt15 { padding-top:10px; }
.pad20 { padding:20px; }
.padt20 { padding-top:20px; }
.flt { float:left; }
.blk { display:block; }
.overflw { overflow:auto; }
.w70 { width:70px; }
.w100 { width:100px; }
.w125 { width:125px; }
.w150 { width:150px; }
.w200 { width:200px; }
.w250 { width:250px; }
.w300 { width:300px; }
.w350 { width:350px; }
.w375 { width:375px; }
.w400 { width:400px; }
.w450 { width:450px; }
.w500 { width:500px; }
.w600 { width:600px; }
.w700 { width:700px; }
.h50 { height:50px; }
.h75 { height:75px; }
.h80 { height:80px; }
.h100 { height:100px; }
.h125 { height:125px; }
.h150 { height:150px; }
.m5 { margin:5px; }
.mt5 { margin-top:5px; }
.m10 { margin:10px; }
.mt10 { margin-top:10px; }