203 lines
6.6 KiB
HTML
203 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex">
|
|
<meta name="title" content="WorkAdventure Starter Kit">
|
|
<title>WorkAdventure test map</title>
|
|
<link rel="icon" href="/images/favicon.svg" type="image/svg+xml">
|
|
<script>
|
|
window.onload = function () {
|
|
const host = window.location.host;
|
|
let path = window.location.pathname;
|
|
if (path.endsWith('index.html')) {
|
|
path = path.substr(path, path.length - 'index.html'.length);
|
|
}
|
|
const instanceId = Math.random().toString(36).substring(2, 15);
|
|
const url = `https://play.workadventu.re/_/${instanceId}/${host}${path}office.tmj`;
|
|
document.getElementById('testMapURL').href = url;
|
|
document.getElementById('testMapBtnURL').href = url;
|
|
document.getElementById('testMapURL').innerText = url;
|
|
|
|
const tmjURL = window.location.protocol + '//' + window.location.host + path + 'office.tmj';
|
|
document.getElementById('tmjURL').innerText = tmjURL;
|
|
|
|
const gettingStartedLink = 'https://workadventu.re/getting-started?name=Map&mapUrl=' + tmjURL;
|
|
document.getElementById('gettingStartedLink').href = gettingStartedLink;
|
|
|
|
};
|
|
</script>
|
|
<style>
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.content {
|
|
flex: 1 0 auto;
|
|
}
|
|
footer {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: Roboto Condensed,Arial;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
header {
|
|
margin: 30px;
|
|
}
|
|
|
|
header .logo {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
header .logo img {
|
|
display: block;
|
|
width: 500px;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-weight: bold;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
section {
|
|
margin-top: 3rem;
|
|
}
|
|
|
|
.tips {
|
|
font-size: 0.8rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.socials img {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.socials > a {
|
|
display: inline-block;
|
|
margin: 20px 5px;
|
|
}
|
|
|
|
a.button {
|
|
display: inline-block;
|
|
padding: 13px 20px 12px;
|
|
background-color: rgba(65, 86, 246, 0.9);
|
|
color: white;
|
|
border-radius: 8px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
width: auto;
|
|
position: relative;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
a.button:hover {
|
|
background-color: rgb(65, 86, 246);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.map {
|
|
width: 30%;
|
|
margin-bottom: 3%;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.url-box {
|
|
border: 1px solid rgb(65, 86, 246);
|
|
border-radius: 3px;
|
|
padding: 3px;
|
|
background-color: rgba(65, 86, 246, 0.1);
|
|
}
|
|
.url {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
footer {
|
|
display: block;
|
|
padding: 2rem 5vw;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="content">
|
|
<header>
|
|
<div class="logo">
|
|
<a href="https://workadventu.re/" target="_blank" title="Workadventure">
|
|
<img src="/images/logo.svg" alt="WorkAdventure logo" />
|
|
</a>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
<h2>Test my map</h2>
|
|
<p><a id="testMapURL" href="#" class="url"></a></p>
|
|
<p class="tips">(In order to test another map, locate "office.tmj" at the end of the URL and replace it by another file name)</p>
|
|
<img src="/office.png" alt="Map thumbnail" class="map">
|
|
<p><a id="testMapBtnURL" href="#" class="button">Test my map</a></p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Publish my map</h2>
|
|
<p>Register your room on WorkAdventure!</p>
|
|
<p>Copy and paste the map URL in WorkAdventure's administration panel:</p>
|
|
<p><span id="tmjURL" class="url-box url"></span></p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Connect and get help</h2>
|
|
<div>
|
|
<div class="socials">
|
|
<a href="https://discord.gg/G6Xh9ZM9aR" target="_blank" title="discord">
|
|
<img src="/images/discord.png" alt="discord">
|
|
</a>
|
|
<a href="https://github.com/thecodingmachine/workadventure" target="_blank" title="github">
|
|
<img src="/images/github.png" alt="github">
|
|
</a>
|
|
<a href="https://www.youtube.com/channel/UCXJ9igV-kb9gw1ftR33y5tA" target="_blank" title="youtube">
|
|
<img src="/images/youtube.png" alt="youtube">
|
|
</a>
|
|
<a href="https://twitter.com/Workadventure_" target="_blank" title="twitter">
|
|
<img src="/images/twitter.png" alt="twitter">
|
|
</a>
|
|
<a href="https://www.instagram.com/workadventure_" target="_blank" title="instagram">
|
|
<img src="/images/instagram.png" alt="instagram">
|
|
</a>
|
|
<a href="https://www.linkedin.com/company/workadventu-re" target="_blank" title="linkedin">
|
|
<img src="/images/linkedin.png" alt="linkedin">
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<a href="https://www.youtube.com/watch?v=lu1IZgBJJD4&list=PL7jmrMKZfjCnz36FvezxJ-Tshuh3Zz-nc&ab_channel=WorkAdventure"
|
|
target="_blank">Watch tutorials</a>
|
|
<a href="https://discord.gg/G6Xh9ZM9aR" target="_blank">Talk to the community</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<footer>
|
|
<a href="https://workadventu.re/" target="_blank" title="workadventu.re">© WorkAdventure</a>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |