index.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <title>Live Coding Space</title>
  4. <script type="text/javascript" src="./web/lib/cell.js"></script>
  5. <script type="text/javascript" src="./web/lib/he.js"></script>
  6. <link rel="stylesheet" href="./web/lib/mdc/dist/material-components-web.css">
  7. <script src="./web/lib/mdc/dist/material-components-web.js"></script>
  8. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  9. <script src="./web/lib/socketio/socket.io.js"></script>
  10. <link rel="stylesheet" href="./web/lib/app.css">
  11. <!--<script src="./web/lib/polyglot-lang.js" type="module"></script> -->
  12. <!-- <script src="./web/lib/app.js" type="module"></script> -->
  13. <!-- Global Site Tag (gtag.js) - Google Analytics -->
  14. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-11815598-9"></script>
  15. <script>
  16. window.dataLayer = window.dataLayer || [];
  17. function gtag() { dataLayer.push(arguments) };
  18. gtag('js', new Date());
  19. gtag('config', 'UA-11815598-9');
  20. </script>
  21. <!-- <script src="./web/lib/polyglot/polyglot.min.js"></script> -->
  22. <script type="module">
  23. import {getAppDetails} from '/web/lib/app.js';
  24. //var socket = initWebSocket();
  25. window.onload = getAppDetails('webapps.json');
  26. </script>
  27. </head>
  28. <body class="mdc-typography">
  29. <a href="https://github.com/NikolaySuslov/livecodingspace">
  30. <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
  31. alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
  32. </a>
  33. <div id="header" class="mdc-layout-grid mdc-layout-grid--align-left">
  34. <div class="mdc-layout-grid__inner">
  35. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10">
  36. <h1 class="mdc-typography--display3 mdc-theme--text-secondary-on-background mdc-typography">
  37. <a class="mdc-typography link-in-text" style="cursor: pointer;" onclick="window.location.reload(true)"><strong>LiveCoding</strong>.space</a>
  38. <!--<strong>LiveCoding</strong>.space -->
  39. </h1>
  40. </div>
  41. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
  42. <span class="mdc-typography--subheading2 mdc-theme--text-secondary-on-background mdc-typography">
  43. <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="#">RU</a>
  44. <!--<strong>LiveCoding</strong>.space -->
  45. </span>
  46. <span class="mdc-typography--subheading2 mdc-theme--text-secondary-on-background mdc-typography">
  47. <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="#">EN</a>
  48. <!--<strong>LiveCoding</strong>.space -->
  49. </span>
  50. </div>
  51. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
  52. <h1 class="mdc-typography mdc-typography--headline mdc-typography--adjust-margin mdc-theme--text-hint-on-background">
  53. Collaborative Live Coding Space with support of user-defined languages and WebVR ready 3D graphics.
  54. <br> Based on:
  55. <strong>Virtual World Framework | A-Frame | Ohm language | OSC.js | and more... </strong> by
  56. <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background"
  57. href="https://www.krestianstvo.org"><strong>Krestianstvo.org</strong></a>
  58. </h1>
  59. </div>
  60. </div>
  61. </div>
  62. <div id="about" class="mdc-layout-grid">
  63. <div class="mdc-layout-grid__inner">
  64. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
  65. <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Features</h1>
  66. <ul class="featureList mdc-typography mdc-typography--title mdc-theme--text-hint-on-background">
  67. <li>
  68. <strong>Decentralized network model</strong> for
  69. <strong>A-Frame</strong> components and entities based on
  70. <strong>VWF</strong> replicated computation architecture</li>
  71. <li>
  72. <strong>Ohm</strong> language driver for sharing user-defined grammars, parsers, tokenisers inside virtual space</li>
  73. <li>In browser
  74. <strong>Code and Properties editor</strong> based on Cell.js</li>
  75. <li>
  76. <strong>OSC </strong>messaging through
  77. <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="https://github.com/NikolaySuslov/osc-relay-lcs">OSC relay</a> on the client</li>
  78. <li>
  79. <strong>Avatars</strong> (Simple and GLTF models with animation)</li>
  80. <li>
  81. <strong>Multi-window</strong> or multi-monitor/multi-machine setups with view
  82. <strong>offset cameras</strong>
  83. </li>
  84. <li>
  85. <strong>WebRTC</strong> for video/audio streaming,
  86. <strong>3D positional audio</strong> support</li>
  87. <li>
  88. <strong>GearVR, Windows MixedReality</strong> motion controllers</li>
  89. </ul>
  90. </div>
  91. <div class="mdc-layout-grid__cell mdc-layout-grid__cell">
  92. <iframe src="https://player.vimeo.com/video/239924195?title=0&byline=0&portrait=0" width="600" height="338" frameborder="0"
  93. webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  94. </div>
  95. </div>
  96. </div>
  97. <hr class="mdc-list-divider mdc-theme--text-hint-on-background divider" />
  98. <div id="info" class="mdc-layout-grid">
  99. <div class="mdc-layout-grid__inner">
  100. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
  101. <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Virtual Worlds</h1>
  102. <h1 class="mdc-typography mdc-typography--headline mdc-theme--text-hint-on-background">
  103. To begin collaborative coding in virtual space, just start one of the listed prototypes and connect to it from another browser
  104. window using the generated link. The link will apper near the
  105. <strong>Start new</strong> button.
  106. </h1>
  107. </div>
  108. </div>
  109. </div>
  110. <div id="main">
  111. </div>
  112. <hr class="mdc-list-divider mdc-theme--text-hint-on-background divider" />
  113. <div id="videoList">
  114. <div id="about" class="mdc-layout-grid">
  115. <div class="mdc-layout-grid__inner">
  116. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
  117. <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Demo videos</h1>
  118. <iframe src="https://player.vimeo.com/video/243291223?title=0&byline=0&portrait=0" width="600" height="337" frameborder="0"
  119. webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  120. <iframe src="https://player.vimeo.com/video/251057056?title=0&byline=0&portrait=0" width="600" height="338" frameborder="0"
  121. webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. <hr class="mdc-list-divider mdc-theme--text-hint-on-background divider" />
  127. <div id="footer">
  128. <div id="about" class="mdc-layout-grid">
  129. <div class="mdc-layout-grid__inner">
  130. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10">
  131. </div>
  132. <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
  133. <h3 class="mdc-typography--subheading2 mdc-theme--text-hint-on-background"><a class="mdc-typography link-in-text mdc-theme--text-hint-on-background"
  134. href="https://www.krestianstvo.org">Krestianstvo.org</a> 2018</h3>
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. <script>
  140. mdc.autoInit()
  141. </script>
  142. </body>
  143. </html>