index.mustache.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Web Sandbox</title>
  5. <link rel="stylesheet" href="/css/normalize.css">
  6. <link rel="stylesheet" href="/css/main.css">
  7. <!-- <link rel="stylesheet" href="css/qunit-2.4.1.css"> -->
  8. <link rel="stylesheet" href="/css/vendor/pure-grids-min.css">
  9. <link rel="stylesheet" href="/css/vendor/pure-grids-responsive-min.css">
  10. <link rel="stylesheet" href="/css/styles.css">
  11. <style type="text/css" media="screen">
  12. </style>
  13. </head>
  14. <body>
  15. <div class="panel-container">
  16. <div class="panel-left">
  17. <div id="navbar">
  18. <button id="menu-btn" class="icon-menu"></button>
  19. <a id="nav-back-home" href="/">Web Sandbox</a>
  20. </div>
  21. <div id="nav-menus">
  22. <div id="menu-repo" class="pure-g">
  23. <div class="pure-u-1">
  24. <span class="cat-title">Collections d'exemples</span>
  25. <ul class="nav-menu">{{#menuRepo}}
  26. <li><a href="/{{slug}}">{{title}}</a></li>{{/menuRepo}}
  27. </ul>
  28. </div>
  29. </div>
  30. <div id="menu-example" class="pure-g nav-menu">{{#menuExample}}
  31. <div class="pure-u-1 pure-u-md-1-2">
  32. <span class="cat-title">{{category.title}}</span>
  33. <ul data-id="{{category.slug}}">{{#examples}}
  34. <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}</ul>
  35. </div>{{/menuExample}}</div>
  36. </div>
  37. <div id="notification" class="alert-box"></div>
  38. <div class="panel-inner">
  39. {{#errorMessage}}
  40. <div class="alert-box error">{{errorMessage}}</div>
  41. {{/errorMessage}}
  42. <div id="details-repo" data-slug="{{path}}">
  43. {{#repo}}
  44. <strong>{{_.collection}} </strong><span>{{title}}</span>
  45. <button id="add-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
  46. {{/repo}}
  47. </div>
  48. <div id="details-example" data-slug="{{slug}}">
  49. {{#example}}
  50. <strong>{{_.example}} </strong><span>{{title}}</span>
  51. {{/example}}
  52. </div>
  53. <form id="add-example-form" style="display: none;">
  54. <input type="text" name="title" class="input-sm" value="" placeholder="{{_.exampleName}}" required />
  55. <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--
  56. --><button type="submit" id="add-example-save" class="icon-checkmark rounded green"></button>
  57. </form>
  58. <!-- <button id="save-changes" class="icon-cloud-upload green"></button> -->
  59. </div>
  60. <div id="editor-wrapper"{{^showEditor}} style="display: none";{{/showEditor}}>
  61. <ul id="tabs">{{#files}}
  62. <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
  63. {{/files}}
  64. <li>+</li>
  65. </ul>
  66. <div id="editor"></div>
  67. </div>
  68. <!-- <script type="text/html" id="editor-javascript"></script>
  69. <script type="text/html" id="editor-html"></script>
  70. <script type="text/html" id="editor-css"></script> -->
  71. <!-- <button id="revert-editor">!</button> -->
  72. </div>
  73. <div class="splitter">
  74. </div>
  75. <iframe class="panel-right" src="/html/start-iframe.html"></iframe>
  76. </div>
  77. {{=<% %>=}}
  78. <script data-tmpl-for="menu-example" id="menu-example-tmpl" type="text/x-mustache-tmpl">
  79. {{#menuExample}}
  80. <div class="pure-u-1 pure-u-md-1-2">
  81. <span class="cat-title">{{category.title}}</span>
  82. <ul data-id="{{category.slug}}">{{#examples}}
  83. <li><a href="/{{{slug}}}">{{title}}</a></li>{{/examples}}
  84. </ul>
  85. </div>{{/menuExample}}
  86. </script>
  87. <script data-tmpl-for="details-example" id="details-example-tmpl" type="text/x-mustache-tmpl">
  88. {{#example}}
  89. <strong>{{_.example}} </strong><span>{{title}}</span>
  90. {{/example}}
  91. </script>
  92. <script data-tmpl-for="tabs" id="tabs-tmpl" type="text/x-mustache-tmpl">
  93. <ul id="tabs">{{#files}}
  94. <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
  95. {{/files}}
  96. <li>+</li>
  97. </ul>
  98. </script>
  99. <%={{ }}=%>
  100. <!-- Vendor scripts -->
  101. <script src="/js/vendor/eventemitter.js"></script>
  102. <script src="/js/vendor/modernizr-3.5.0.min.js"></script>
  103. <script src="/js/vendor/jquery-3.2.1.min.js" ></script>
  104. <script src="/js/vendor/jquery-resizable.min.js" ></script>
  105. <script src="/js/vendor/jquery.color.js" ></script>
  106. <!-- <script src="/js/vendor/qunit-2.4.1.js" ></script> -->
  107. <script src="/js/vendor/mustache.min.js" ></script>
  108. <script src="/js/vendor/lodash.min.js" ></script>
  109. <script src="/js/vendor/loadJS.js" ></script>
  110. <script src="/js/plugins.js"></script>
  111. <script src="/js/main.js"></script>
  112. <!-- WS scripts -->
  113. <script id="inline-js-data">
  114. window._ws = {
  115. files: {{{filesJSON}}}
  116. };
  117. </script>
  118. <script src="/js/ws-ui-parts.js"></script>
  119. <script src="/js/ws-events.js"></script>
  120. <script src="/js/menu.js"></script>
  121. <!-- <script src="/js/ws-navigator.js"></script> -->
  122. <script src="/js/vendor/ace/ace.min.js" type="text/javascript" charset="utf-8"></script>
  123. <script src="/js/req-promise.js"></script>
  124. <script src="/js/editor-local-storage.js"></script>
  125. <script src="/js/editor.js"></script>
  126. </body>
  127. </html>