dodex-vertx

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dodex</title>  <link rel='stylesheet' href='../node_modules/dodex/dist/dodex.min.css'> <link rel='stylesheet' href='../css/demo.css'> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link href="../node_modules/jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css"> <style> .editor { width: 80%; height: 400px; position: fixed; bottom: 0; left: 0; } </style> </head> <body> <div class="dodex--open"> <img src="../node_modules/dodex/dist/dodex_g.ico"> </div> <div id="jsoneditor" class="editor"></div> <script src="../node_modules/dodex/dist/dodex.min.js" type="text/javascript"></script> <script src="../node_modules/dodex-input/dist/dodex-input.min.js" type="text/javascript"></script> <script src="../node_modules/dodex-mess/dist/dodex-mess.min.js" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="../node_modules/jsoneditor/dist/jsoneditor.min.js"></script> <script src="../group/main.min.js"></script> <script> const dodex = window.doDex; const input = window.doDexInput; const mess = window.doDexMess; dodex.setContentFile("../content/content.bootstrap.js"); const server = window.location.hostname + (window.location.port.length > 0 ? ":" + window.location.port : ""); dodex.init({/*width:550, height:250, left: "25%", top: "150px"*/ input: input, // required if using frontend content load private: "full", // frontend load of private content, "none", "full", "partial"(only cards 28-52) - default none replace: true, // append to or replace default content - default false(append only) mess: mess, // required if using messaging server: "localhost:8087" // server // configured websocket server - example in node_modules/dodex-mess, koa.js }) .then(function () { for (var i = 0; i < 3; i++) { dodex.addCard(content); } /* Api for user grouping */ window.groupListener(); /* Auto display of widget */ dodex.openDodex(); }); var content = { cards: { card28: { tab: "S01", front: { content: "" }, back: { content: `<table class="demo"><row> <td> <div><a href="https://www.aaa.com/stop/" target="_">AAA</a></div> <div><a href="https://seniordriving.aaa.com/" target="_">Senior AAA</a></div> <div><a href="https://www.bbb.org/" target="_">Better Business</a></div> <div><a href="https://top5-websitebuilders.com/?utm_source=B" target="_">Web Builder</a></div> <div><a href="https://www.cyclingabout.com/touring-bicycle-buyers-guide/" target="_">Bike Guide</a></div> <div><a href="https://www.lonelyplanet.com/" target="_">Travel</a></div> </td> <td><div><p id="one"><a href="https://news.google.com/?hl=en-US&tab=wn&gl=US&ceid=US:en" target="_">Google News</a></p></div></td> <td><div><p id="two"><a href="https://www.yahoo.com/" target="_">Yahoo News</a></p></div></td> <td><div><p id="three"><a href="https://news.microsoft.com/" target="_">Microsoft News</a></p></div></td> </row></table> <footer class="footer" style="width:350px"> <div class="container"> <div class="row"> <div class="footer-col col-sm-10"> <ul class="list-inline" style="width:345px;"> <li class="list-inline-item"><a class="btn-social btn-outline" href="https://www.facebook.com/" target="_"><i class="fa fa-fw fa-facebook"></i></a></li> <li class="list-inline-item"><a class="btn-social btn-outline" href="https://news.google.com/" target="_"><i class="fa fa-fw fa-google"></i></a></li> <li class="list-inline-item"><a class="btn-social btn-outline" href="https://twitter.com/Twitter" target="_"><i class="fa fa-fw fa-twitter"></i></a></li> <li class="list-inline-item"><a class="btn-social btn-outline" href="https://www.linkedin.com/" target="_"><i class="fa fa-fw fa-linkedin"></i></a></li> <li class="list-inline-item"><a class="btn-social btn-outline" href="https://dribbble.com/" target="_"><i class="fa fa-fw fa-dribbble"></i></a></li> <li class="float-right mr-2"><h1 style="font-size: 14px;"> <svg height="18" width="17" style="font-family: 'Open Sans', sans-serif;"> <text x="3" y="18" fill="#059">O</text><text x="0" y="15" fill="#059">D</text></svg> doDex</h1></li> </ul> </div> </div> </div></footer> ` } }, card30: { tab: "F01999", //Only first 3 characters will show on the tab. front: { content: `<h1 style="font-size: 10px;">Friends</h1> <address style="width:385px"> <strong>Charlie Brown</strong> 111 Ace Ave. Pet Town <abbr title="phone"> : </abbr>555 555-1212<br> <abbr title="email" class="mr-1"></abbr><a href="mailto:cbrown@pets.com">cbrown@pets.com</a> </address> ` }, back: { content: `<h1 style="font-size: 10px;">More Friends</h1> <address style="width:385px"> <strong>Lucy</strong> 113 Ace Ave. Pet Town <abbr title="phone"> : </abbr>555 555-1255<br> <abbr title="email" class="mr-1"></abbr><a href="mailto:lucy@pets.com">lucy@pets.com</a> </address> ` } }, card29: { tab: "F02", front: { content: "<h1 style=\"font-size: 14px;\">My New Card Front</h1>" }, back: { content: "<h1 style=\"font-size: 14px;\">My New Card Back</h1>" } } } }; </script> </body> </html>