index.htm 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!DOCTYPE html>
  2. <html lang="fr"><head>
  3. <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <title>Free Pascal wasm-job Leaflet example</title>
  6. <!-- taken in demojitsimeet de Michael Van Canneyt for Bootstrap test -->
  7. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  8. <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
  9. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  10. <!-- end add for bootstrap -->
  11. <!-- Bulma / ZenFS -->
  12. <link href="bulma.min.css" rel="stylesheet">
  13. <script src="browser.min.js"></script>
  14. <script src="browser.dom.js"></script>
  15. <!-- end Bulma / ZenFS -->
  16. <!-- Openstreetmap / Leaflet -->
  17. <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  18. integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
  19. crossorigin=""/>
  20. <!-- Make sure you put this AFTER Leaflet's CSS -->
  21. <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  22. integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
  23. crossorigin=""></script>
  24. <!-- end Openstreetmap / Leaflet -->
  25. <script src="js_leaflet.js"></script>
  26. <style>
  27. </style>
  28. </head>
  29. <body>
  30. <div class="container">
  31. <div class="card">
  32. <!--
  33. <div class="card-header" id="chParameters">
  34. <h5 class="mb-0">
  35. <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#Parameters" aria-expanded="true" aria-controls="Parameters">
  36. Parameters ...
  37. </button>
  38. </h5>
  39. </div>
  40. -->
  41. <div id="Parameters" class="collapse.show" aria-labelledby="chParameters">
  42. <div class="card-body">
  43. <div class="form-group">
  44. <div class="form-floating">
  45. <input id="iParameters_Latitude" type="text" class="form-control" aria-describedby="lParameters_Latitude" value="0"/>
  46. <label for="iParameters_Latitude">Latitude</label>
  47. <small id="lParameters_Latitude" class="form-text text-muted">
  48. Latitude of the location for calculation.
  49. </small>
  50. </div>
  51. <div class="form-floating">
  52. <input id="iParameters_Longitude" type="text" class="form-control" aria-describedby="lParameters_Longitude" value="0"/>
  53. <label for="iParameters_Longitude">Longitude</label>
  54. <small id="lParameters_Longitude" class="form-text text-muted">
  55. Longitude of the location for calculation, negative towards the West.
  56. </small>
  57. </div>
  58. <button id='bCalculation' class="button is-primary" style="visibility: hidden;"> Re-Calculation</button>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <div id="dMap" style="height: 600px;"></div>
  64. <div class="card">
  65. <div class="card-header" id="chCalculation">
  66. <h5 class="mb-0">
  67. <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#Calculation" aria-expanded="true" aria-controls="Calculation">
  68. More calculations ...
  69. </button>
  70. </h5>
  71. </div>
  72. <div id="Calculation" class="collapse" aria-labelledby="chCalculation">
  73. <div class="card-body">
  74. <div class="form-group">
  75. <div id='dCalculation_Result'>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <div class="card">
  82. <div class="card-header" id="chConsole">
  83. <h5 class="mb-0">
  84. <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#Console" aria-expanded="true" aria-controls="Console">
  85. Console
  86. </button>
  87. </h5>
  88. </div>
  89. <div id="Console" class="collapse" aria-labelledby="chConsole">
  90. <div class="card-body">
  91. <div class="form-group">
  92. <div class="box" id="pasjsconsole"></div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <script>
  99. rtl.showUncaughtExceptions=true;
  100. rtl.run();
  101. </script>
  102. </body></html>