index.html 4.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Module demo</title>
  7. <link rel="stylesheet" href="bulma.min.css">
  8. <script type="module" src="htmlutilsdemo.js"></script>
  9. </head>
  10. <body>
  11. <div class="box">
  12. <div class="container columns">
  13. <div class="column is-8">
  14. <div class="field is-horizontal">
  15. <div class="field-label is-normal">
  16. <label class="label">Clear</label>
  17. </div>
  18. <div class="field-body">
  19. <div class="field has-addons">
  20. <div class="control">
  21. <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
  22. </div>
  23. <div class="control">
  24. <button id="btnClear" class="button is-info">Clear</button>
  25. </div>
  26. </div> <!-- .field .has-addons -->
  27. </div> <!-- .field-body -->
  28. </div> <!-- .field .is-horizontal -->
  29. <div class="field is-horizontal">
  30. <div class="field-label is-normal">
  31. <label class="label">Title</label>
  32. </div>
  33. <div class="field-body">
  34. <div class="field has-addons">
  35. <div class="control">
  36. <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
  37. </div>
  38. <div class="control">
  39. <button id="btnSetTitle" class="button is-info">Set title</button>
  40. </div>
  41. </div> <!-- .field .has-addons -->
  42. </div> <!-- .field-body -->
  43. </div> <!-- .field .is-horizontal -->
  44. <div class="field is-horizontal">
  45. <div class="field-label is-normal">
  46. <!-- empty label needed -->
  47. </div>
  48. <div class="field-body">
  49. <div class="field has-addons">
  50. <div class="control">
  51. <label class="checkbox">
  52. <input id="cbUseDefaultClearID" type="checkbox" >
  53. Use DefaultBelowID
  54. </label>
  55. </div>
  56. </div> <!-- .field .has-addons -->
  57. </div> <!-- .field-body -->
  58. </div> <!-- .field .is-horizontal -->
  59. </div> <!-- .column -->
  60. <div class="column is-4">
  61. <div class="content">
  62. <p>Enter the name of a tag ID (<code>content</code>, <code>content2</code>) to clear HTML below that ID. Specifying no ID will clear the whole page</p>
  63. <p>Enter a title to set the title of this page. See the effect in the browser tab or window title bar.
  64. </div> <!-- .content -->
  65. </div> <!-- .column -->
  66. </div> <!-- .columns -->
  67. </div> <!-- ?box -->
  68. <div id="all">
  69. <div class="section" id="content">
  70. <div class="container">
  71. <div class="content">
  72. <h3 class="title is-3">Box with ID <code>content</code></h3>
  73. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="section" id="content2">
  78. <div class="container">
  79. <div class="content">
  80. <h3 class="title is-3">Box with ID <code>content2</code></h3>
  81. <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <footer class="footer" id="footer">
  87. <div class="content has-text-centered ">
  88. Modules demo. Created with <a href="https://wiki.freepascal.org/pas2js">Pas2JS</a>.
  89. Sources: <a href="htmlutilsdemo.lpr">Program</a> and <a href="htmlutils.lpr">Library</a>.
  90. </div>
  91. <footer>
  92. </body>
  93. </html>