Dateien nach "/" hochladen
This commit is contained in:
203
index.html
Normal file
203
index.html
Normal file
@@ -0,0 +1,203 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user