API tools faq
paste
XIUREN

Untitled

XIUREN
Apr 6th, 2016
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.60 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. require 'cupcake.php';
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>AMICTA AMIKOM </title>
  10. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  11. <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  12. <link rel="stylesheet" type="text/css" href="css/tambahan.css">
  13. <style type="text/css">
  14. body {
  15. background-color: rgb(240, 243, 244) !important;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <nav class="navbar navbar-inverse no-radius no-border montserrat bg-blue">
  21. <div class="container-fluid">
  22. <div class="navbar-header">
  23. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  24. <span class="icon-bar"></span>
  25. <span class="icon-bar"></span>
  26. <span class="icon-bar"></span>
  27. </button>
  28. <a class="navbar-brand co-white" href="#">AMICTA AMIKOM</a>
  29. </div>
  30. <div class="collapse navbar-collapse" id="myNavbar">
  31. <ul class="nav navbar-nav">
  32. <li><a href="#" class="co-white"><span class="fa fa-list-ul"></span> List Group</a></li>
  33. <li><a href="#" class="co-white"><span class="fa fa-sitemap"></span> Device</a></li>
  34. <li><a href="#" class="co-white"><span class="fa fa-cogs"></span> System</a></li>
  35. </ul>
  36. <ul class="nav navbar-nav navbar-right">
  37. <li><a href="#" class="co-white"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  38. </ul>
  39. <!-- start : ini untuk form yang saya sediain dengan type submit di inputnya -->
  40. <form method="post" class="navbar-form navbar-right" action="" id="formnavping">
  41. <div class="form-group">
  42. <div class="input-group">
  43. <span class="input-group-btn">
  44. <button class="btn btn-success" id="buttonnavping" type="submit">ping</button>
  45. </span>
  46. <input id="inputnavip" type="text" name="inputnavip" maxlength="15" class="form-control" placeholder="IP Address ...">
  47. </div>
  48. </div>
  49. </form>
  50. <div id="notifnavping">
  51. <ul class="nav navbar-nav navbar-right text-center">
  52. <li id="resultnavping"><!--
  53. <p class="co-white navbar-text"><i class="fa fa-refresh fa-spin"></i></p>
  54. <p class="co-success navbar-text"><i class="fa fa-check"></i></p>
  55. <p class="co-danger navbar-text"><i class="fa fa-remove"></i></p>
  56. <p class="navbar-text"><i class="fa fa-refresh fa-spin co-white"></i></p>-->
  57. </li>
  58. </ul>
  59. <!-- end : ini untuk form yang saya sedian dengan type submit di inputnya. diatas itu buat notifnya -->
  60. </div>
  61. </div>
  62. </div>
  63. </nav>
  64. <div class="container-fluid">
  65. <div class="row">
  66. <div class="col-md-3">
  67. <div class="panel panel-success">
  68. <div class="panel-heading">
  69. <h3 class="panel-title">Tips & Tricks</h3>
  70. </div>
  71. <div class="panel-body">
  72. M A M A M I A
  73. </div>
  74. </div>
  75. </div>
  76. <div class="col-md-9">
  77. <div class="panel panel-default">
  78. <div class="panel-body">
  79. <h2>Form input device
  80. <button class="btn btn-primary btn-sm tabcisco" data-toggle="tab" data-target="#tabcisco">C I S C O</button>
  81. <button class="btn btn-primary btn-sm tabubnt" data-toggle="tab" data-target="#tabubnt">U B N T</button>
  82. <button class="btn btn-primary btn-sm tabmikrotik" data-toggle="tab" data-target="#tabmikrotik">M I K R O T I K</button>
  83. </h2>
  84. <hr>
  85. <div class="tab-content">
  86. <div class="tab-pane" id="tabcisco">
  87. <form class="form-horizontal" method="post">
  88. <div class="form-group">
  89. <label class="col-lg-2 col-sm-2 control-label">Device</label>
  90. <div class="col-lg-10">
  91. <p class="form-control-static"><b>C I S C O</b></p>
  92. </div>
  93. </div>
  94. <div class="form-group">
  95. <label class="col-sm-2 col-sm-2 control-label">IP Address</label>
  96. <div class="col-sm-4">
  97. <div class="input-group">
  98. <input type="text" maxlength="15" class="form-control">
  99. <span class="input-group-btn">
  100. <button type="submit" class="btn btn-success">ping</button>
  101. </span>
  102. </div>
  103. </div>
  104. </div>
  105. <div class="form-group">
  106. <label class="col-sm-2 col-sm-2 control-label">Group</label>
  107. <div class="col-sm-4">
  108. <select class="form-control">
  109. <option value="null"><-- Select group --></option>
  110. </select>
  111. </div>
  112. </div>
  113. <div class="form-group">
  114. <label class="col-sm-2 col-sm-2 control-label">Method login</label>
  115. <div class="col-sm-4">
  116. <div class="radio">
  117. <label>
  118. <input type="radio" name="method" value="ssh">ssh
  119. </label>&nbsp;&nbsp;&nbsp;
  120. <label>
  121. <input type="radio" name="method" value="telnet">telnet
  122. </label>
  123. </div>
  124. </div>
  125. </div>
  126. <div class="form-group">
  127. <label class="col-sm-2 col-sm-2 control-label">Username</label>
  128. <div class="col-sm-4">
  129. <input type="text" name="user" class="form-control">
  130. </div>
  131. </div>
  132. <div class="form-group">
  133. <label class="col-sm-2 col-sm-2 control-label">Password</label>
  134. <div class="col-sm-4">
  135. <input type="password" name="pass" class="form-control">
  136. </div>
  137. </div>
  138. <div class="form-group">
  139. <label class="col-sm-2 col-sm-2 control-label">Enable password</label>
  140. <div class="col-sm-4">
  141. <input type="password" name="enpass" class="form-control">
  142. </div>
  143. </div>
  144. <div class="form-group">
  145. <label class="col-sm-2 col-sm-2 control-label">Name</label>
  146. <div class="col-sm-4">
  147. <input type="text" name="name" class="form-control">
  148. </div>
  149. </div>
  150. <div class="form-group">
  151. <label class="col-sm-2 col-sm-2 control-label">Status</label>
  152. <div class="col-sm-4">
  153. <div class="radio">
  154. <label>
  155. <input type="radio" name="status" value="up">up
  156. </label>&nbsp;&nbsp;&nbsp;
  157. <label>
  158. <input type="radio" name="status" value="down">down
  159. </label>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="form-group">
  164. <label class="col-sm-2 col-sm-2 control-label"></label>
  165. <div class="col-sm-4">
  166. <button type="submit" class="btn btn-primary col-sm-12">Submit</button>
  167. </div>
  168. </div>
  169. </form>
  170. </div>
  171. <div class="tab-pane" id="tabubnt">
  172. <form class="form-horizontal" method="post">
  173. <div class="form-group">
  174. <label class="col-lg-2 col-sm-2 control-label">Device</label>
  175. <div class="col-lg-10">
  176. <p class="form-control-static"><b>U B N T</b></p>
  177. </div>
  178. </div>
  179. <div class="form-group">
  180. <label class="col-sm-2 col-sm-2 control-label">IP Address</label>
  181. <div class="col-sm-4">
  182. <div class="input-group">
  183. <input type="text" maxlength="15" class="form-control">
  184. <span class="input-group-btn">
  185. <button type="submit" class="btn btn-success">ping</button>
  186. </span>
  187. </div>
  188. </div>
  189. </div>
  190. <div class="form-group">
  191. <label class="col-sm-2 col-sm-2 control-label">Group</label>
  192. <div class="col-sm-4">
  193. <select class="form-control">
  194. <option value="null"><-- Select group --></option>
  195. </select>
  196. </div>
  197. </div>
  198. <div class="form-group">
  199. <label class="col-sm-2 col-sm-2 control-label">Method login</label>
  200. <div class="col-sm-4">
  201. <div class="radio">
  202. <label>
  203. <input type="radio" name="method" value="ssh">ssh
  204. </label>&nbsp;&nbsp;&nbsp;
  205. <label>
  206. <input type="radio" name="method" value="telnet">telnet
  207. </label>
  208. </div>
  209. </div>
  210. </div>
  211. <div class="form-group">
  212. <label class="col-sm-2 col-sm-2 control-label">Username</label>
  213. <div class="col-sm-4">
  214. <input type="text" name="user" class="form-control">
  215. </div>
  216. </div>
  217. <div class="form-group">
  218. <label class="col-sm-2 col-sm-2 control-label">Password</label>
  219. <div class="col-sm-4">
  220. <input type="password" name="pass" class="form-control">
  221. </div>
  222. </div>
  223. <div class="form-group">
  224. <label class="col-sm-2 col-sm-2 control-label">Name</label>
  225. <div class="col-sm-4">
  226. <input type="text" name="name" class="form-control">
  227. </div>
  228. </div>
  229. <div class="form-group">
  230. <label class="col-sm-2 col-sm-2 control-label">Status</label>
  231. <div class="col-sm-4">
  232. <div class="radio">
  233. <label>
  234. <input type="radio" name="status" value="up">up
  235. </label>&nbsp;&nbsp;&nbsp;
  236. <label>
  237. <input type="radio" name="status" value="down">down
  238. </label>
  239. </div>
  240. </div>
  241. </div>
  242. <div class="form-group">
  243. <label class="col-sm-2 col-sm-2 control-label"></label>
  244. <div class="col-sm-4">
  245. <button type="submit" class="btn btn-primary col-sm-12">Submit</button>
  246. </div>
  247. </div>
  248. </form>
  249. </div>
  250. <div class="tab-pane" id="tabmikrotik">
  251. <form class="form-horizontal" method="post">
  252. <div class="form-group">
  253. <label class="col-lg-2 col-sm-2 control-label">Device</label>
  254. <div class="col-lg-10">
  255. <p class="form-control-static"><b>M I K R O T I K</b></p>
  256. </div>
  257. </div>
  258. <div class="form-group">
  259. <label class="col-sm-2 col-sm-2 control-label">IP Address</label>
  260. <div class="col-sm-4">
  261. <div class="input-group">
  262. <input type="text" maxlength="15" class="form-control">
  263. <span class="input-group-btn">
  264. <button type="submit" class="btn btn-success">ping</button>
  265. </span>
  266. </div>
  267. </div>
  268. </div>
  269. <div class="form-group">
  270. <label class="col-sm-2 col-sm-2 control-label">Group</label>
  271. <div class="col-sm-4">
  272. <select class="form-control">
  273. <option value="null"><-- Select group --></option>
  274. </select>
  275. </div>
  276. </div>
  277. <div class="form-group">
  278. <label class="col-sm-2 col-sm-2 control-label">Method login</label>
  279. <div class="col-sm-4">
  280. <div class="radio">
  281. <label>
  282. <input type="radio" name="method" value="ssh">ssh
  283. </label>&nbsp;&nbsp;&nbsp;
  284. <label>
  285. <input type="radio" name="method" value="telnet">telnet
  286. </label>
  287. </div>
  288. </div>
  289. </div>
  290. <div class="form-group">
  291. <label class="col-sm-2 col-sm-2 control-label">Username</label>
  292. <div class="col-sm-4">
  293. <input type="text" name="user" class="form-control">
  294. </div>
  295. </div>
  296. <div class="form-group">
  297. <label class="col-sm-2 col-sm-2 control-label">Password</label>
  298. <div class="col-sm-4">
  299. <input type="password" name="pass" class="form-control">
  300. </div>
  301. </div>
  302. <div class="form-group">
  303. <label class="col-sm-2 col-sm-2 control-label">Name</label>
  304. <div class="col-sm-4">
  305. <input type="text" name="name" class="form-control">
  306. </div>
  307. </div>
  308. <div class="form-group">
  309. <label class="col-sm-2 col-sm-2 control-label">Status</label>
  310. <div class="col-sm-4">
  311. <div class="radio">
  312. <label>
  313. <input type="radio" name="status" value="up">up
  314. </label>&nbsp;&nbsp;&nbsp;
  315. <label>
  316. <input type="radio" name="status" value="down">down
  317. </label>
  318. </div>
  319. </div>
  320. </div>
  321. <div class="form-group">
  322. <label class="col-sm-2 col-sm-2 control-label"></label>
  323. <div class="col-sm-4">
  324. <button type="submit" class="btn btn-primary col-sm-12">Submit</button>
  325. </div>
  326. </div>
  327. </form>
  328. </div>
  329. </div>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. <div class="row">
  335. <div class="col-md-12">
  336. <div class="panel panel-primary">
  337. <div class="panel-heading">
  338. <h3 class="panel-title">List groups</h3>
  339. </div>
  340. <div class="panel-body">
  341. M A M A M I A
  342. </div>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. <script type="text/javascript" src="js/jquery.min.js"></script>
  348. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  349. <!-- ini untuk javascriptnya -->
  350. <script type="text/javascript">
  351. $(document).ready(function () {
  352. $("button.tabcisco").click(function(){
  353. $(this).addClass("bg-info br-info");
  354. $("button.tabubnt,button.tabmikrotik").removeClass("bg-info br-info");
  355. $("#tabcisco").fadeIn();
  356. $("#tabubnt, #tabmikrotik").hide();
  357. });
  358. $("button.tabubnt").click(function(){
  359. $(this).addClass("bg-info br-info");
  360. $("button.tabcisco,button.tabmikrotik").removeClass("bg-info br-info");
  361. $("#tabubnt").fadeIn();
  362. $("#tabcisco, #tabmikrotik").hide();
  363. });
  364. $("button.tabmikrotik").click(function(){
  365. $(this).addClass("bg-info br-info");
  366. $("button.tabubnt,button.tabcisco").removeClass("bg-info br-info");
  367. $("#tabmikrotik").fadeIn();
  368. $("#tabubnt, #tabcisco").hide();
  369. });
  370. $("#resultnavping").hide();
  371. $("#buttonnavping").click(function(){
  372. var navping = $("#inputnavip").val();
  373. $.post("cupcake.php",{
  374. do : "navping",
  375. inputnavip : navping
  376. },
  377. function(data){
  378. $("#resultnavping").show().html("<p class='navbar-text'><i class='fa fa-refresh fa-spin co-white'></i></p>").fadeIn("fast").delay(3000).fadeOut("fast").html(data).fadeIn("fast").delay(2000).fadeOut("fast")
  379. });
  380. /*
  381. $("#resultnavping").fadeIn("fast").delay(3000).fadeOut("fast",function(){
  382. $(this).delay(2000).html("<i class='fa fa-check co-success'></i>").fadeIn().delay(2000).fadeOut(function(){
  383. $(this).html("<i class='fa fa-refresh fa-spin co-white'></i>");
  384. });
  385. });*/
  386. });
  387. });
  388. </script>
  389. </body>
  390. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!