workadventure/website/dist/index.html
2020-06-24 18:07:58 +02:00

393 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="no-js" lang="">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-10196481-11');
</script>
<link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="static/images/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="static/images/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="static/images/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="static/images/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="static/images/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="static/images/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="static/images/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="static/images/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicons/favicon-16x16.png">
<link rel="manifest" href="static/images/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="static/images/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#000000">
<title>WorkAdventu.re</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="title" content="Workadventure" />
<meta name="description" content="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'" />
<!-- Open Graph / Facebook -->
<meta property="og:url" content="https://workadventu.re/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Workadventure" />
<meta property="og:description" content="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'" />
<meta property="og:image" content="https://workadventu.re/static/images/meta-tags-image.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="workadventure" />
<!-- Twitter -->
<meta name="twitter:site" content="@coding_machine">
<meta name="twitter:url" content="https://workadventu.re/" />
<meta name="twitter:title" content="Workadventure" />
<meta name="twitter:description" content="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'" />
<meta name="twitter:image" content="https://workadventu.re/static/images/meta-tags-image.jpg" />
<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.open(playUrl, '_blank');
}
function shareFB() {
window.open('https://www.facebook.com/sharer/sharer.php?u=https://workadventu.re/', '_blank', 'width=500,height=500');
}
function shareLI() {
window.open('https://www.linkedin.com/shareArticle?mini=true&url=https://workadventu.re/&title=&summary=Your workplace but better!&source=TheCodingMachine', '_blank', 'width=500,height=500');
}
function shareTW() {
window.open('https://twitter.com/share?text=Your workplace but better!&url=https://workadventu.re/&hashtags=thecodingmachine', '_blank', 'width=500,height=500');
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js" integrity="sha256-MVs0yHYDQBhIRZrNeWB1YaNMrGbFwowIEPIl3um5MZE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js" integrity="sha256-FEFPM9cOclVyq+lIim2xnU/dAgrALF+g4M8kYm2tbX0=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div class="container-lg section">
<div class="over-image">
<div class="row">
<div class="col-10 col-md-6">
<div class="logo">
<img src="static/images/logo.png">
</div>
</div>
<div class="col-2 col-md-6">
<div class="social-links">
<span class="share-title">Share your experience</span>
<a onclick="shareFB()">
<img class="social-image" src="static/images/facebook.png" />
</a>
<a onclick="shareLI()">
<img class="social-image" src="static/images/linkedin.png" />
</a>
<a onclick="shareTW()">
<img class="social-image" src="static/images/twitter.png" />
</a>
</div>
</div>
</div>
<div class="title title-main 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 buttons-row justify-content-md-center pt-5">
<div class="col col-lg-3">
<a class="custom-link start" href="/choose-map.html" title="PRIVATE MODE">
PRIVATE MODE
</a>
</div>
<div class="col col-lg-3">
<a class="custom-link play" target="_BLANK" onclick="startGame()" title="PLAY ONLINE">
PLAY ONLINE
</a>
</div>
</div>
</div>
</div>
<div class="clouds clouds-2">
<div class="cloud"></div>
</div>
<div class="clouds">
<div class="cloud"></div>
</div>
</header>
<section class="story-wrapper">
<div class="clouds clouds-2">
<div class="cloud"></div>
</div>
<div class="clouds">
<div class="cloud"></div>
</div>
<div class="sky"></div>
<div class="mountains"></div>
<img src="static/images/story/story-map-bg.png" height="672" class="story-1" />
<img src="static/images/story/character-static.png" class="character" id="leymah" />
<div class="birds">
<img class="bird bird-1" src="static/images/story/bird.gif" />
<img class="bird bird-2" src="static/images/story/bird.gif" />
<img class="bird bird-3" src="static/images/story/bird.gif" />
<img class="bird bird-4" src="static/images/story/bird.gif" />
<img class="bird bird-5" src="static/images/story/bird.gif" />
<img class="bird bird-6" src="static/images/story/bird.gif" />
<img class="bird bird-7" src="static/images/story/bird.gif" />
<img class="bird bird-8" src="static/images/story/bird.gif" />
</div>
<div class="bubble bubble-1" style="width: 320px;height: 209px;">
<div>
<p>WorkAdventure is a video-conference application that lets people hold multiple parallel conversations in a virtual universe. </p>
<p>Walk in, out, speak to anyone just like in real-life!</p>
</div>
</div>
<div class="bubble bubble-thinking" style="width: 269px;height: 211px;">
<div class="demo-gif">
<img src="static/images/story/WA-Demo.gif" />
</div>
</div>
<div class="bubble bubble-3" style="height: 209px;">
<div>
<p>Remote work? Friend party? Use WorkAdventure as you prefer.</p>
<p>Click the button below to come and say hi!</p>
<p class="bubble-action"><span onclick="startGame()">
<img src="static/images/playicon.png" />
START IN PUBLIC MODE
</span></p>
</div>
</div>
<div class="bubble bubble-4 b-revert" style="height: 254px;">
<div>
<p>You can also create a private room with your friends or your team ! </p>
<p class="bubble-legend">To try, press button private mode</p>
<p class="bubble-action"><a href="/choose-map.html">
<img src="static/images/playicon.png" />
START IN PRIVATE MODE
</a></p>
<p>
Dont forget to activate your mic and camera, lets play
</p>
</div>
</div>
<!-- PRELOADING (hidden elements) -->
<img src="static/images/story/character-walk-right.gif" style="display:none;" />
</section>
<script>
gsap.to(".title-main", {
//y:-1000,
scale: 0,
opacity: 0,
ease: "none",
scrollTrigger: {
trigger: "header",
start: "top top", // the default values
// end: "bottom top",
scrub: true
},
});
gsap.to(".over-image .clouds", {
y: 100,
ease: "none",
scrollTrigger: {
trigger: "header",
start: "top top", // the default values
// end: "bottom top",
scrub: true
},
});
var maxImageTranslateValue = 3507 - window.innerWidth;
var bubbleNumber = document.getElementsByClassName("bubble").length;
var charWalkToRightImage = "static/images/story/character-walk-right.gif";
var charStaticImage = "static/images/story/character-static.png";
var storyScrollTrigger = gsap.timeline({
scrollTrigger: {
trigger: ".story-wrapper",
pin: true, // pin the trigger element while active
start: "top top", // when the top of the trigger hits the top of the viewport
//end: "+=500", // end after scrolling 500px beyond the start
scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
}
});
storyScrollTrigger.to(".birds", {
x: (-window.innerWidth -200)
});
storyScrollTrigger.from(".character", {
x: -maxImageTranslateValue * (1/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-1, .bubble-thinking", {
opacity: 1,
y: 0
})
.to(".story-1", {
x: -maxImageTranslateValue * (2/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
}
})
.to(".bubble-1, .bubble-thinking", {
opacity: 0
})
.to(".bubble-3", {
opacity: 1,
y: 0
})
.to(".story-1", {
x: -maxImageTranslateValue,
onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
},
onComplete: function() {
document.getElementById("leymah").src = "static/images/story/character-static.png";
}
})
.to(".bubble-3", {
opacity: 0
})
.to(".bubble-4", {
opacity: 1,
y: 0
})
.to(".character, .bubble-4", {
x: "53vw",
onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
},
})
.to(".bubble-4", {
opacity: 0
});
</script>
<div class="section bg-white how-to">
<div class="desktop-only text-center d-block d-md-none d-lg-none d-xl-none">
<img src="static/images/desktop.png" width="64" /><br />
Unfortunately, it's not mobile friendly yet. But we are happy to invite you to try it on your desktop. Enjoy!
</div>
<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&nbsp;!</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">&laquo;&nbsp;Right on time! I feel like less alone in my home office.&nbsp;&raquo;</p>
<p class="author">Julie</p>
</div>
<div class="quote-item">
<p class="quote">&laquo;&nbsp;I love running into the hallway and check out where are my teammates!&nbsp;&raquo;</p>
<p class="author">Sophie</p>
</div>
<div class="quote-item">
<p class="quote">&laquo;&nbsp;Wow! More intimate than a Meet conference.&nbsp;&raquo;</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-12 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-12 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>