index.php 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
  6. <title>RapiDoc</title>
  7. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap" rel="stylesheet">
  8. <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  9. <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/default.min.css">
  10. <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
  11. <style>
  12. .btn {
  13. width: 90px;
  14. height: 32px;
  15. padding: 2px;
  16. font-size: 13px;
  17. background-color: #707cd2;
  18. color: #fff;
  19. border: none;
  20. margin: 0 2px;
  21. border-radius: 2px;
  22. cursor: pointer;
  23. outline: none;
  24. }
  25. .btn.medium {
  26. width: 75px;
  27. height: 24px
  28. }
  29. .btn.small {
  30. width: 60px;
  31. height: 24px
  32. }
  33. rapi-doc {
  34. width: 100%;
  35. }
  36. .img-container {
  37. text-align: center;
  38. display: block;
  39. }
  40. </style>
  41. <script>
  42. function getRapiDoc() {
  43. return document.getElementById("thedoc");
  44. }
  45. function changeRenderStyle() {
  46. let currRender = getRapiDoc().getAttribute('render-style');
  47. let newRender = currRender === "read" ? "view" : "read";
  48. getRapiDoc().setAttribute('render-style', newRender);
  49. toggleAttr('show-header');
  50. }
  51. function toggleAttr(attr) {
  52. if (getRapiDoc().getAttribute(attr) === 'false') {
  53. getRapiDoc().setAttribute(attr, "true");
  54. } else {
  55. getRapiDoc().setAttribute(attr, "false");
  56. }
  57. }
  58. </script>
  59. </head>
  60. <body>
  61. <rapi-doc
  62. id="thedoc"
  63. heading-text=""
  64. goto-path="Overview"
  65. spec-url="../api.json"
  66. allow-server-selection="true"
  67. show-header="true"
  68. theme="dark"
  69. bg-color="#1f1f1f"
  70. header-color="#1b1a1a"
  71. primary-color="#2cabe3"
  72. nav-bg-color="#1b1a1a"
  73. allow-try="true"
  74. allow-api-list-style-selection="true"
  75. regular-font="Nunito"
  76. schema-style="tree"
  77. render-style="view"
  78. default-schema-tab="example"
  79. sort-tags="true"
  80. allow-spec-url-load="false"
  81. allow-spec-file-load="false"
  82. >
  83. <img src="../../plugins/images/organizr/logo.png" style="height: 50px" slot="logo">
  84. <div style="display:flex; margin:10px; justify-content:center;flex-wrap: wrap;" slot="logo">
  85. <button class="btn read-button" onclick="changeRenderStyle()">Change View</button>
  86. </div>
  87. <span class="img-container" slot="nav-logo">
  88. <img src="../../plugins/images/organizr/logo-wide.png" style="width: 300px">
  89. </span>
  90. <div slot="nav-logo" style="width:100%; display: flex; flex-direction:column;">
  91. <div style="display: flex;justify-content: center; margin: 2px 0">
  92. <button class='btn' onclick="changeRenderStyle()">Change View</button>
  93. </div>
  94. </div>
  95. </rapi-doc>
  96. <script src="rapidoc-min.js">
  97. </script>
  98. </body>
  99. </html>