175 lines
7.9 KiB
HTML
175 lines
7.9 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>WorkAdventu.re</title>
|
|
|
|
<link rel="stylesheet" href="main.css">
|
|
<script src="bundle.js"></script>
|
|
<script>
|
|
function startGame() {
|
|
let playUrl = window.location.protocol + "//play."+window.location.host+"/_/global/npeguin.github.io/office-map/map.json";
|
|
window.location.assign(playUrl);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="container-lg section">
|
|
<div class="over-image">
|
|
<div class="row">
|
|
<div class="col-6 col-md-6 my-3 my-md-0">
|
|
<div class="logo">
|
|
<img src="static/images/logo.png">
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-6 my-3 my-md-0">
|
|
<div class="social-links">
|
|
Share your experience
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u=http://workadventu.re/" target="_BLANK">
|
|
<img class="social-image" src="static/images/facebook.png" />
|
|
</a>
|
|
<a href="https://www.linkedin.com/shareArticle?mini=true&url=http://workadventu.re/&title=&summary=Discover a pixelated new world and start a casual conversation !&source=TheCodingMachine" target="_BLANK">
|
|
<img class="social-image" src="static/images/linkedin.png" />
|
|
</a>
|
|
<a href="https://twitter.com/home?status=http://workadventu.re/ Discover a pixelated new world and start a casual conversation !" target="_BLANK">
|
|
<img class="social-image" src="static/images/twitter.png" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="title text-center">
|
|
<h1>Your workplace<br/>but better</h1>
|
|
<h3>You are impatient to discover this new world? Click on "Play online" and meet new people or share this adventure with your colleagues and friends by clicking on "Private mode"</h3>
|
|
</div>
|
|
<div class="row justify-content-md-center pt-5" style="margin-top: 65px;">
|
|
<div class="col col-lg-3">
|
|
<a class="custom-link play" target="_BLANK" onclick="startGame()" title="PLAY ONLINE">
|
|
PLAY ONLINE
|
|
</a>
|
|
</div>
|
|
<div class="col col-lg-3">
|
|
<a class="custom-link start" href="/choose-map.html" title="PRIVATE MODE">
|
|
PRIVATE MODE
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clouds clouds-2">
|
|
<div class="cloud"></div>
|
|
</div>
|
|
<div class="clouds">
|
|
<div class="cloud"></div>
|
|
</div>
|
|
</header>
|
|
<div class="section bg-white how-to">
|
|
<div class="container-fluid container-lg">
|
|
<div class="row justify-content-md-center">
|
|
<div class="col-12 col-md-12 text-center">
|
|
<h3>How to play</h3>
|
|
</div>
|
|
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
|
<div class="image-item">
|
|
<h2>Choose your map</h2>
|
|
<div class="step-image"><img src="static/images/maps/office.png"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
|
<div class="image-item">
|
|
<h2>Select your character</h2>
|
|
<div class="step-image"><img src="static/images/choose_character.png"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
|
<div class="image-item">
|
|
<h2>Let's go explore and talk !</h2>
|
|
<div class="step-image"><img src="static/images/interact.png"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section bg-white">
|
|
<div class="container-fluid container-lg">
|
|
<div class="col-12 credits">
|
|
<h2>Future features</h2>
|
|
<h3>We have already thought of new features:</h3>
|
|
<p>Share files with others</p>
|
|
<p>Lock group conversations</p>
|
|
<p>Share screen with others</p>
|
|
<p>Interact with objects</p>
|
|
<h3>And you, what would you want?</h3>
|
|
<div class="row justify-content-md-center pt-5" style="margin-top: 65px;">
|
|
<div class="col col-lg-3">
|
|
<a class="custom-link contribute" target="_BLANK" href="https://docs.google.com/forms/d/e/1FAIpQLSdxvajEyqsn4X0ai0SoDAcdsa_JQPIfiP2Tp9PDzkfZA54v9Q/viewform" title="FEEDBACK">
|
|
FEEDBACK
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray section used-by">
|
|
<div class="container-fluid container-lg">
|
|
<h2 class="text-center pb-4">THEY MIGHT APPROVE</h2>
|
|
<div class="row justify-content-md-center align-items-center">
|
|
<div class="col col-md-auto">
|
|
<img src="static/images/atari.png">
|
|
</div>
|
|
<div class="col col-md-auto">
|
|
<img src="static/images/super-nintendo.png">
|
|
</div>
|
|
<div class="col col-md-auto">
|
|
<img src="static/images/amstrad.png">
|
|
</div>
|
|
<div class="col col-md-auto">
|
|
<img src="static/images/sinclair-2.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid container-lg section quotes">
|
|
<h2 class="text-center">Why we love WorkAdventure</h2>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-9">
|
|
<div class="quote-item">
|
|
<p class="quote">« Right on time! I feel like less alone in my home office. »</p>
|
|
<p class="author">Julie</p>
|
|
</div>
|
|
<div class="quote-item">
|
|
<p class="quote">« I love running into the hallway and check out where are my teammates! »</p>
|
|
<p class="author">Sophie</p>
|
|
</div>
|
|
<div class="quote-item">
|
|
<p class="quote">« Wow! More intimate than a Meet conference. »</p>
|
|
<p class="author">Greg</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bg-white footer">
|
|
<div class="container-fluid container-lg">
|
|
<div class="row">
|
|
<div class="col-6 col-md-6 my-3 my-md-0">
|
|
<a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
|
|
</div>
|
|
<div class="col-6 col-md-6 my-3 my-md-0 floppy">
|
|
<img src="static/images/floppy.png" />
|
|
<div>Soon available on floppy !<br/><span>otherwise, available on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid container-lg">
|
|
<div class="row text-center">
|
|
<div style="width: 100%;color:#afafaf;margin-top: 25px;">TheCodingMachine - All Rights Reserved</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|