index.html (6782B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta name="robots" content="noindex"> 9 <meta name="title" content="WorkAdventure Starter Kit"> 10 <title>WorkAdventure test map</title> 11 <link rel="icon" href="/images/favicon.svg" type="image/svg+xml"> 12 <script> 13 window.onload = function () { 14 const host = window.location.host; 15 let path = window.location.pathname; 16 if (path.endsWith('index.html')) { 17 path = path.substr(path, path.length - 'index.html'.length); 18 } 19 const instanceId = Math.random().toString(36).substring(2, 15); 20 const url = `https://play.workadventu.re/_/${instanceId}/${host}${path}map.tmj`; 21 document.getElementById('testMapURL').href = url; 22 document.getElementById('testMapBtnURL').href = url; 23 document.getElementById('testMapURL').innerText = url; 24 25 const tmjURL = window.location.protocol + '//' + window.location.host + path + 'map.tmj'; 26 document.getElementById('tmjURL').innerText = tmjURL; 27 28 const gettingStartedLink = 'https://workadventu.re/getting-started?name=Map&mapUrl=' + tmjURL; 29 document.getElementById('gettingStartedLink').href = gettingStartedLink; 30 31 }; 32 </script> 33 <style> 34 html, body { 35 height: 100%; 36 } 37 body { 38 display: flex; 39 flex-direction: column; 40 } 41 .content { 42 flex: 1 0 auto; 43 } 44 footer { 45 flex-shrink: 0; 46 } 47 48 body { 49 font-family: Roboto Condensed,Arial; 50 max-width: 800px; 51 margin: 0 auto; 52 text-align: center; 53 } 54 55 header { 56 margin: 30px; 57 } 58 59 header .logo { 60 display: block; 61 position: relative; 62 } 63 64 header .logo img { 65 display: block; 66 width: 500px; 67 margin: auto; 68 text-align: center; 69 } 70 71 h1, 72 h2 { 73 font-weight: bold; 74 font-size: 1.3rem; 75 } 76 77 section { 78 margin-top: 3rem; 79 } 80 81 .tips { 82 font-size: 0.8rem; 83 font-style: italic; 84 } 85 86 .socials img { 87 width: 30px; 88 height: 30px; 89 } 90 91 .socials > a { 92 display: inline-block; 93 margin: 20px 5px; 94 } 95 96 a.button { 97 display: inline-block; 98 padding: 13px 20px 12px; 99 background-color: rgba(65, 86, 246, 0.9); 100 color: white; 101 border-radius: 8px; 102 font-weight: bold; 103 text-transform: uppercase; 104 text-decoration: none; 105 text-align: center; 106 width: auto; 107 position: relative; 108 font-size: 1.3em; 109 } 110 111 a.button:hover { 112 background-color: rgb(65, 86, 246); 113 cursor: pointer; 114 } 115 116 .map { 117 width: 30%; 118 margin-bottom: 3%; 119 min-width: 200px; 120 } 121 122 .url-box { 123 border: 1px solid rgb(65, 86, 246); 124 border-radius: 3px; 125 padding: 3px; 126 background-color: rgba(65, 86, 246, 0.1); 127 } 128 .url { 129 font-family: 'Courier New', Courier, monospace; 130 font-size: 14px; 131 } 132 133 footer { 134 display: block; 135 padding: 2rem 5vw; 136 } 137 </style> 138 </head> 139 140 <body> 141 <div class="content"> 142 <header> 143 <div class="logo"> 144 <a href="https://workadventu.re/" target="_blank" title="Workadventure"> 145 <img src="/images/logo.svg" alt="WorkAdventure logo" /> 146 </a> 147 </div> 148 </header> 149 <main> 150 <section> 151 <h2>Test my map</h2> 152 <p><a id="testMapURL" href="#" class="url"></a></p> 153 <p class="tips">(In order to test another map, locate "map.tmj" at the end of the URL and replace it by another file name)</p> 154 <img src="/map.png" alt="Map thumbnail" class="map"> 155 <p><a id="testMapBtnURL" href="#" class="button">Test my map</a></p> 156 </section> 157 158 <section> 159 <h2>Publish my map</h2> 160 <p>Register your room on WorkAdventure!</p> 161 <p>Copy and paste the map URL in WorkAdventure's administration panel:</p> 162 <p><span id="tmjURL" class="url-box url"></span></p> 163 </section> 164 165 <section> 166 <h2>Connect and get help</h2> 167 <div> 168 <div class="socials"> 169 <a href="https://discord.gg/G6Xh9ZM9aR" target="_blank" title="discord"> 170 <img src="/images/discord.png" alt="discord"> 171 </a> 172 <a href="https://github.com/thecodingmachine/workadventure" target="_blank" title="github"> 173 <img src="/images/github.png" alt="github"> 174 </a> 175 <a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank" title="youtube"> 176 <img src="/images/youtube.png" alt="youtube"> 177 </a> 178 <a href="https://twitter.com/Workadventure_" target="_blank" title="twitter"> 179 <img src="/images/twitter.png" alt="twitter"> 180 </a> 181 <a href="https://www.instagram.com/workadventure_" target="_blank" title="instagram"> 182 <img src="/images/instagram.png" alt="instagram"> 183 </a> 184 <a href="https://www.linkedin.com/company/workadventu-re" target="_blank" title="linkedin"> 185 <img src="/images/linkedin.png" alt="linkedin"> 186 </a> 187 </div> 188 189 <div> 190 <a href="https://www.youtube.com/watch?v=lu1IZgBJJD4&list=PL7jmrMKZfjCnz36FvezxJ-Tshuh3Zz-nc&ab_channel=WorkAdventure" 191 target="_blank">Watch tutorials</a> 192 <a href="https://discord.gg/G6Xh9ZM9aR" target="_blank">Talk to the community</a> 193 </div> 194 </div> 195 </section> 196 </main> 197 </div> 198 <footer> 199 <a href="https://workadventu.re/" target="_blank" title="workadventu.re">© WorkAdventure</a> 200 </footer> 201 </body> 202 203 </html>