index.html (6889B)
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}level_0.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 + 'level_0.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, 35 body { 36 height: 100%; 37 } 38 39 body { 40 display: flex; 41 flex-direction: column; 42 } 43 44 .content { 45 flex: 1 0 auto; 46 } 47 48 footer { 49 flex-shrink: 0; 50 } 51 52 body { 53 font-family: Roboto Condensed, Arial; 54 max-width: 800px; 55 margin: 0 auto; 56 text-align: center; 57 } 58 59 header { 60 margin: 30px; 61 } 62 63 header .logo { 64 display: block; 65 position: relative; 66 } 67 68 header .logo img { 69 display: block; 70 width: 500px; 71 margin: auto; 72 text-align: center; 73 } 74 75 h1, 76 h2 { 77 font-weight: bold; 78 font-size: 1.3rem; 79 } 80 81 section { 82 margin-top: 3rem; 83 } 84 85 .tips { 86 font-size: 0.8rem; 87 font-style: italic; 88 } 89 90 .socials img { 91 width: 30px; 92 height: 30px; 93 } 94 95 .socials>a { 96 display: inline-block; 97 margin: 20px 5px; 98 } 99 100 a.button { 101 display: inline-block; 102 padding: 13px 20px 12px; 103 background-color: rgba(65, 86, 246, 0.9); 104 color: white; 105 border-radius: 8px; 106 font-weight: bold; 107 text-transform: uppercase; 108 text-decoration: none; 109 text-align: center; 110 width: auto; 111 position: relative; 112 font-size: 1.3em; 113 } 114 115 a.button:hover { 116 background-color: rgb(65, 86, 246); 117 cursor: pointer; 118 } 119 120 .map { 121 width: 30%; 122 margin-bottom: 3%; 123 min-width: 200px; 124 } 125 126 .url-box { 127 border: 1px solid rgb(65, 86, 246); 128 border-radius: 3px; 129 padding: 3px; 130 background-color: rgba(65, 86, 246, 0.1); 131 } 132 133 .url { 134 font-family: 'Courier New', Courier, monospace; 135 font-size: 14px; 136 } 137 138 footer { 139 display: block; 140 padding: 2rem 5vw; 141 } 142 </style> 143 </head> 144 145 <body> 146 <div class="content"> 147 <header> 148 <div class="logo"> 149 <a href="https://workadventu.re/" target="_blank" title="Workadventure"> 150 <img src="/images/logo.svg" alt="WorkAdventure logo" /> 151 </a> 152 </div> 153 </header> 154 <main> 155 <section> 156 <h2>Test my map</h2> 157 <p><a id="testMapURL" href="#" class="url"></a></p> 158 <p class="tips">(In order to test another map, locate "level_0.tmj" at the end of the URL and replace it 159 by 160 another file name)</p> 161 <img src="/map.png" alt="Map thumbnail" class="map"> 162 <p><a id="testMapBtnURL" href="#" class="button">Test my map</a></p> 163 </section> 164 165 <section> 166 <h2>Publish my map</h2> 167 <p>Register your room on WorkAdventure!</p> 168 <p>Copy and paste the map URL in WorkAdventure's administration panel:</p> 169 <p><span id="tmjURL" class="url-box url"></span></p> 170 </section> 171 172 <section> 173 <h2>Connect and get help</h2> 174 <div> 175 <div class="socials"> 176 <a href="https://discord.gg/G6Xh9ZM9aR" target="_blank" title="discord"> 177 <img src="/images/discord.png" alt="discord"> 178 </a> 179 <a href="https://github.com/thecodingmachine/workadventure" target="_blank" title="github"> 180 <img src="/images/github.png" alt="github"> 181 </a> 182 <a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank" 183 title="youtube"> 184 <img src="/images/youtube.png" alt="youtube"> 185 </a> 186 <a href="https://twitter.com/Workadventure_" target="_blank" title="twitter"> 187 <img src="/images/twitter.png" alt="twitter"> 188 </a> 189 <a href="https://www.instagram.com/workadventure_" target="_blank" title="instagram"> 190 <img src="/images/instagram.png" alt="instagram"> 191 </a> 192 <a href="https://www.linkedin.com/company/workadventu-re" target="_blank" title="linkedin"> 193 <img src="/images/linkedin.png" alt="linkedin"> 194 </a> 195 </div> 196 197 <div> 198 <a href="https://www.youtube.com/watch?v=lu1IZgBJJD4&list=PL7jmrMKZfjCnz36FvezxJ-Tshuh3Zz-nc&ab_channel=WorkAdventure" 199 target="_blank">Watch tutorials</a> 200 <a href="https://discord.gg/G6Xh9ZM9aR" target="_blank">Talk to the community</a> 201 </div> 202 </div> 203 </section> 204 </main> 205 </div> 206 <footer> 207 <a href="https://workadventu.re/" target="_blank" title="workadventu.re">© WorkAdventure</a> 208 </footer> 209 </body> 210 211 </html>