458 lines
21 KiB
HTML
458 lines
21 KiB
HTML
<!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');
|
||
if (window.location.host.endsWith("localhost")){
|
||
window['ga-disable-UA-10196481-11'] = true;
|
||
}
|
||
</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 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||
<!-- 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 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||
<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 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||
<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">
|
||
<a href="https://www.facebook.com/workadventurebytcm">
|
||
<img class="social-image" src="static/images/facebook_bw.png" />
|
||
</a>
|
||
<a href="https://www.linkedin.com/company/workadventure-by-tcm">
|
||
<img class="social-image" src="static/images/linkedin_bw.png" />
|
||
</a>
|
||
<a href="https://twitter.com/Workadventure_">
|
||
<img class="social-image" src="static/images/twitter_bw.png" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="title title-main text-center">
|
||
<h1>Meet your teammates</h1>
|
||
<h3>
|
||
WorkAdventure preserves your social interaction while COVID is still out there.
|
||
</h3>
|
||
<h3>
|
||
Stay connected with your teamworkers, by creating your own online workspace to work remotely.
|
||
</h3>
|
||
<h3>
|
||
Stay connected with your clients by providing a dedicated digital place to organize meetings, workshops.
|
||
</h3>
|
||
<h3>
|
||
Stay connected with your future collaborators by organizing online event.
|
||
</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="WORK IN PRIVATE">
|
||
WORK IN PRIVATE
|
||
</a>
|
||
</div>
|
||
<div class="col col-lg-3">
|
||
<a class="custom-link play" target="_BLANK" onclick="startGame()" title="WORK ONLINE">
|
||
TRY IT NOW!
|
||
</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" />
|
||
TRY IT NOW !
|
||
</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 work in private</p>
|
||
<p class="bubble-action">
|
||
<a href="/choose-map.html">
|
||
<img src="static/images/playicon.png" />
|
||
CHOOSE YOU OWN MAP
|
||
</a>
|
||
<p>
|
||
Don’t forget to activate your mic and camera, let’s 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 IT WORKS</h3>
|
||
</div>
|
||
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
||
<div class="image-item">
|
||
<h2>CHOOSE YOUR WORKSPACE</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 WOKA</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 TO YOUR OFFICE</h2>
|
||
<div class="step-image"><img src="static/images/interact.png"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row mt-5">
|
||
<div class="col-lg-9 text-right">
|
||
<p class="py-3 font-weight-bold" style="font-size: 1.25rem">
|
||
Want to try Woradventure with your team mates or friends?
|
||
</p>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<a class="custom-link relative" href="/choose-map.html" title="WORK IN PRIVATE">
|
||
GET STARTED!
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="social-links text-center pt-2 pb-4">
|
||
<span class="share-title">... and if you liked woradventure, 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="section bg-white text-center pt-5">
|
||
<div class="container-fluid container-lg">
|
||
<div class="row justify-content-md-center">
|
||
<div class="col-12 col-md-12 text-center">
|
||
<h3>WORKADVENTURE'S USE CASES</h3>
|
||
</div>
|
||
<p>
|
||
Workadventure is an intuitive and fun solution to professional issues:
|
||
</p>
|
||
<ul class="text-left">
|
||
<li>
|
||
Work in a remote way within a team,
|
||
</li>
|
||
<li>
|
||
Create an event (even a big one),
|
||
</li>
|
||
<li>
|
||
Stay connected and increase social interactions...
|
||
</li>
|
||
</ul>
|
||
<p>
|
||
Feel free to contact us if you need a specific map, need a dedicated admin console or any
|
||
support (for instance a large number of connexions) : <a href="mailto:workaventure@thecodingmachine.com" target="_blank">workaventure@thecodingmachine.com</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section bg-white">
|
||
<div class="container-fluid container-lg">
|
||
<div class="col-12 credits">
|
||
<h2>CURRENT FEATURES</h2>
|
||
<!-- <h3>We have already thought of new features:</h3>-->
|
||
<p>Instant interaction with up to 4 people</p>
|
||
<p>Share screen with others</p>
|
||
<p>Organize a workshop and meeting with up to 60 people</p>
|
||
<p>Design your own digital space</p>
|
||
<p>... and infinite possibilities</p>
|
||
<h3>You need more? Do not hesitate to tell us!</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-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>
|