widgetsdemo.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>Web Widgets Demo</title>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
  9. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  10. <link rel="stylesheet" href="css/widgetsdemo.css"/>
  11. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  12. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  13. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  14. <script src="webwidgetsdemo.js"></script>
  15. <script src="countrycodes.js"></script>
  16. </head>
  17. <body>
  18. <!-- navbar -->
  19. <nav class="navbar navbar-dark bg-primary sticky-top">
  20. <a class="navbar-brand" href="#">
  21. <!-- <img src="images/freePascal.jpeg" height="30" class="d-inline-block align-top mr-2 " alt="" loading="lazy"> -->
  22. <span class="font-weight-bold">Web Widgets Demo</span>
  23. </a>
  24. <img src="images/freePascal.jpeg" height="30" class="ml-auto d-inline-block align-top mr-2 " alt="" loading="lazy">
  25. </nav>
  26. <!-- end of navbar -->
  27. <div class="container-fluid" />
  28. <!-- toast -->
  29. <div id="toastarea" aria-live="polite" aria-atomic="true" style="position: relative; top:0; right: 0; z-index: 99;">
  30. <div id="toastarea-stack" style="position: absolute; top: 0; right: 0; z-index: 99;" data-ww-element-content="ww-1" >
  31. </div>
  32. </div>
  33. <!-- end of toast -->
  34. <div class="d-flex flex-column" style="height: 88vh;">
  35. <div class="flex-fill mt-1 row h-100 overflow-auto" >
  36. <!-- demo -->
  37. <div id="demolist" class="col-auto h-100 overflow-auto"></div>
  38. <div id="democontainer" class="col h-100 overflow-auto d-flex justify-content-center py-2"></div>
  39. <div id="propertygrid" class="col-auto h-100 overflow-auto"></div>
  40. <!-- end of demo -->
  41. </div>
  42. <div class="mt-2 border bg-light" style="max-height: 30vh;">
  43. <!-- console -->
  44. <div class="form-check ml-2 my-2">
  45. <label class="form-check-label">
  46. <input type="checkbox" id="showconsole" class="form-check-input" checked>Show pas2js console
  47. </label>
  48. </div>
  49. <div id="pasjsconsole" class="democonsole h-100 overflow-auto mb-2"></div>
  50. <!-- end of console -->
  51. </div>
  52. </div>
  53. </div>
  54. <script>
  55. window.addEventListener("load", rtl.run);
  56. </script>
  57. </body>
  58. </html>