2020-06-01 13:09:23 +02:00
<!doctype html>
< html class = "no-js" lang = "" >
< head >
2020-06-08 18:44:22 +02:00
<!-- 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 >
2020-06-09 08:16:54 +02:00
< 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" >
2020-06-01 13:09:23 +02:00
< title > WorkAdventu.re< / title >
2020-06-04 17:52:55 +02:00
< 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" / >
2020-11-05 23:17:58 +01:00
< 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'" / >
2020-06-04 17:52:55 +02:00
<!-- Open Graph / Facebook -->
< meta property = "og:url" content = "https://workadventu.re/" / >
< meta property = "og:type" content = "website" / >
< meta property = "og:title" content = "Workadventure" / >
2020-11-05 23:17:58 +01:00
< 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'" / >
2020-06-04 17:52:55 +02:00
< 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" / >
2020-11-05 23:17:58 +01:00
< 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'" / >
2020-06-04 17:52:55 +02:00
< meta name = "twitter:image" content = "https://workadventu.re/static/images/meta-tags-image.jpg" / >
2020-06-01 16:05:01 +02:00
< link rel = "stylesheet" href = "main.css" >
< script src = "bundle.js" > < / script >
2020-06-01 16:22:42 +02:00
< script >
function startGame() {
2020-06-04 16:03:24 +02:00
let playUrl = window.location.protocol + "//play."+window.location.host+"/_/global/npeguin.github.io/office-map/map.json";
2020-06-09 12:34:44 +02:00
window.open(playUrl, '_blank');
2020-06-01 16:22:42 +02:00
}
2020-06-09 12:34:44 +02:00
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');
}
2020-06-01 16:22:42 +02:00
< / script >
2020-06-14 11:32:15 +02:00
< 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 >
2020-06-01 13:09:23 +02:00
< / head >
< body >
< header >
2020-06-01 13:18:57 +02:00
< div class = "container-lg section" >
2020-06-01 13:09:23 +02:00
< div class = "over-image" >
2020-06-02 08:26:16 +02:00
< div class = "row" >
2020-06-09 07:39:43 +02:00
< div class = "col-10 col-md-6" >
2020-06-02 08:26:16 +02:00
< div class = "logo" >
< img src = "static/images/logo.png" >
< / div >
< / div >
2020-06-09 07:39:43 +02:00
< div class = "col-2 col-md-6" >
2020-06-02 08:26:16 +02:00
< div class = "social-links" >
2020-06-09 07:39:43 +02:00
< span class = "share-title" > Share your experience< / span >
2020-06-09 12:34:44 +02:00
< a onclick = "shareFB()" >
2020-06-02 08:26:16 +02:00
< img class = "social-image" src = "static/images/facebook.png" / >
< / a >
2020-06-09 12:34:44 +02:00
< a onclick = "shareLI()" >
2020-06-02 08:26:16 +02:00
< img class = "social-image" src = "static/images/linkedin.png" / >
< / a >
2020-06-09 12:34:44 +02:00
< a onclick = "shareTW()" >
2020-06-02 08:26:16 +02:00
< img class = "social-image" src = "static/images/twitter.png" / >
< / a >
< / div >
< / div >
2020-06-01 13:09:23 +02:00
< / div >
2020-06-14 13:29:47 +02:00
< div class = "title title-main text-center" >
2020-06-01 18:47:54 +02:00
< h1 > Your workplace< br / > but better< / h1 >
2020-11-05 23:17:58 +01:00
< h3 > 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"< / h3 >
2020-06-01 13:09:23 +02:00
< / div >
2020-06-14 13:29:47 +02:00
< div class = "row buttons-row justify-content-md-center pt-5" >
2020-06-01 18:47:54 +02:00
< div class = "col col-lg-3" >
2020-11-05 23:17:58 +01:00
< a class = "custom-link start" href = "/choose-map.html" title = "WORK IN PRIVATE" >
WORK IN PRIVATE
2020-06-01 18:47:54 +02:00
< / a >
< / div >
< div class = "col col-lg-3" >
2020-11-05 23:17:58 +01:00
< a class = "custom-link play" target = "_BLANK" onclick = "startGame()" title = "WORK ONLINE" >
WORK ONLINE
2020-06-01 18:47:54 +02:00
< / a >
< / div >
2020-06-01 13:09:23 +02:00
< / div >
< / div >
< / div >
2020-06-02 12:55:16 +02:00
< div class = "clouds clouds-2" >
< div class = "cloud" > < / div >
< / div >
2020-06-01 20:29:14 +02:00
< div class = "clouds" >
< div class = "cloud" > < / div >
< / div >
2020-06-01 13:09:23 +02:00
< / header >
2020-06-14 11:32:15 +02:00
< section class = "story-wrapper" >
2020-06-14 13:29:47 +02:00
< div class = "clouds clouds-2" >
< div class = "cloud" > < / div >
< / div >
< div class = "clouds" >
< div class = "cloud" > < / div >
< / div >
2020-06-14 11:32:15 +02:00
< div class = "sky" > < / div >
< div class = "mountains" > < / div >
2020-06-14 11:59:25 +02:00
< img src = "static/images/story/story-map-bg.png" height = "672" class = "story-1" / >
2020-06-14 11:32:15 +02:00
< 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 >
2020-06-24 15:42:44 +02:00
< div class = "bubble bubble-1" style = "width: 320px;height: 209px;" >
2020-06-14 11:32:15 +02:00
< div >
2020-06-24 15:42:44 +02:00
< 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 >
2020-06-14 11:32:15 +02:00
< / div >
< / div >
2020-06-24 15:42:44 +02:00
< div class = "bubble bubble-thinking" style = "width: 269px;height: 211px;" >
< div class = "demo-gif" >
< img src = "static/images/story/WA-Demo.gif" / >
2020-06-14 11:32:15 +02:00
< / div >
< / div >
2020-06-24 15:42:44 +02:00
< div class = "bubble bubble-3" style = "height: 209px;" >
2020-06-14 11:32:15 +02:00
< div >
2020-06-24 15:42:44 +02:00
< p > Remote work? Friend party? Use WorkAdventure as you prefer.< / p >
< p > Click the button below to come and say hi!< / p >
2020-06-14 11:32:15 +02:00
< p class = "bubble-action" > < span onclick = "startGame()" >
< img src = "static/images/playicon.png" / >
START IN PUBLIC MODE
< / span > < / p >
< / div >
< / div >
2020-06-16 14:23:23 +02:00
< div class = "bubble bubble-4 b-revert" style = "height: 254px;" >
2020-06-14 11:32:15 +02:00
< div >
< p > You can also create a private room with your friends or your team ! < / p >
2020-11-05 23:17:58 +01:00
< p class = "bubble-legend" > To try, press button work in private< / p >
2020-06-14 13:29:47 +02:00
< p class = "bubble-action" > < a href = "/choose-map.html" >
2020-06-14 11:32:15 +02:00
< img src = "static/images/playicon.png" / >
2020-11-05 23:17:58 +01:00
START WORKING IN PRIVATE
2020-06-14 13:29:47 +02:00
< / a > < / p >
2020-06-16 14:23:23 +02:00
< p >
Don’ ’
< / p >
2020-06-14 11:32:15 +02:00
< / div >
< / div >
<!-- PRELOADING (hidden elements) -->
< img src = "static/images/story/character-walk-right.gif" style = "display:none;" / >
< / section >
< script >
2020-06-14 13:29:47 +02:00
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
},
});
2020-06-14 11:32:15 +02:00
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;
}
})
2020-06-24 15:42:44 +02:00
.to(".bubble-1, .bubble-thinking", {
2020-06-14 11:32:15 +02:00
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;
}
})
2020-06-24 15:42:44 +02:00
.to(".bubble-1, .bubble-thinking", {
2020-06-16 13:51:25 +02:00
opacity: 0
})
2020-06-14 11:32:15 +02:00
.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";
}
})
2020-06-16 13:51:25 +02:00
.to(".bubble-3", {
opacity: 0
})
2020-06-14 11:32:15 +02:00
.to(".bubble-4", {
opacity: 1,
y: 0
})
2020-06-16 13:51:25 +02:00
.to(".character, .bubble-4", {
2020-06-24 15:42:44 +02:00
x: "53vw",
2020-06-16 13:51:25 +02:00
onStart: function() {
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
},
})
2020-06-14 11:32:15 +02:00
.to(".bubble-4", {
opacity: 0
});
< / script >
2020-06-01 18:47:54 +02:00
< div class = "section bg-white how-to" >
2020-06-09 07:39:43 +02:00
< 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 / >
2020-06-09 12:18:17 +02:00
Unfortunately, it's not mobile friendly yet. But we are happy to invite you to try it on your desktop. Enjoy!
2020-06-09 07:39:43 +02:00
< / div >
2020-06-01 18:47:54 +02:00
< div class = "container-fluid container-lg" >
< div class = "row justify-content-md-center" >
2020-06-04 00:38:47 +02:00
< div class = "col-12 col-md-12 text-center" >
2020-11-05 23:17:58 +01:00
< h3 > HOW IT WORKS< / h3 >
2020-06-04 00:38:47 +02:00
< / div >
2020-06-01 18:47:54 +02:00
< div class = "col-12 col-md-4 text-center my-3 my-md-0" >
< div class = "image-item" >
2020-11-05 23:17:58 +01:00
< h2 > CHOOSE YOUR WORKSPACE< / h2 >
2020-06-04 00:38:47 +02:00
< div class = "step-image" > < img src = "static/images/maps/office.png" > < / div >
2020-06-01 18:47:54 +02:00
< / div >
2020-06-01 13:09:23 +02:00
< / div >
2020-06-01 18:47:54 +02:00
< div class = "col-12 col-md-4 text-center my-3 my-md-0" >
< div class = "image-item" >
2020-11-05 23:17:58 +01:00
< h2 > SELECT YOUR WOKA< / h2 >
2020-06-04 00:38:47 +02:00
< div class = "step-image" > < img src = "static/images/choose_character.png" > < / div >
2020-06-01 18:47:54 +02:00
< / div >
2020-06-01 13:09:23 +02:00
< / div >
2020-06-01 18:47:54 +02:00
< div class = "col-12 col-md-4 text-center my-3 my-md-0" >
< div class = "image-item" >
2020-11-05 23:17:58 +01:00
< h2 > LET'S GO TO YOUR OFFICE< / h2 >
2020-06-04 12:08:47 +02:00
< div class = "step-image" > < img src = "static/images/interact.png" > < / div >
2020-06-01 18:47:54 +02:00
< / div >
2020-06-01 13:09:23 +02:00
< / div >
< / div >
< / div >
2020-06-01 18:47:54 +02:00
< / div >
< div class = "section bg-white" >
< div class = "container-fluid container-lg" >
< div class = "col-12 credits" >
2020-11-05 23:17:58 +01:00
< h2 > CURRENT FEATURES< / h2 >
<!-- <h3>We have already thought of new features:</h3> -->
< p > Instant interaction with up to 4 people< / p >
2020-06-04 00:38:47 +02:00
< p > Share screen with others< / p >
2020-11-05 23:17:58 +01:00
< 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 >
2020-06-04 00:38:47 +02:00
< div class = "row justify-content-md-center pt-5" style = "margin-top: 65px;" >
< div class = "col col-lg-3" >
2020-06-04 15:20:32 +02:00
< a class = "custom-link contribute" target = "_BLANK" href = "https://docs.google.com/forms/d/e/1FAIpQLSdxvajEyqsn4X0ai0SoDAcdsa_JQPIfiP2Tp9PDzkfZA54v9Q/viewform" title = "FEEDBACK" >
FEEDBACK
2020-06-04 00:38:47 +02:00
< / a >
< / div >
< / div >
2020-06-01 13:09:23 +02:00
< / div >
< / div >
< / div >
2020-06-01 18:47:54 +02:00
< div class = "bg-gray section used-by" >
< div class = "container-fluid container-lg" >
2020-06-04 00:38:47 +02:00
< h2 class = "text-center pb-4" > THEY MIGHT APPROVE< / h2 >
2020-06-01 18:47:54 +02:00
< 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 >
2020-06-01 13:09:23 +02:00
< / div >
< / div >
2020-06-01 18:47:54 +02:00
< / div >
2020-06-01 13:09:23 +02:00
< div class = "container-fluid container-lg section quotes" >
2020-06-04 12:08:47 +02:00
< h2 class = "text-center" > Why we love WorkAdventure< / h2 >
2020-06-01 13:09:23 +02:00
< div class = "row justify-content-center" >
< div class = "col-12 col-md-9" >
< div class = "quote-item" >
2020-06-04 00:38:47 +02:00
< p class = "quote" > « Right on time! I feel like less alone in my home office. » < / p >
< p class = "author" > Julie< / p >
2020-06-01 13:09:23 +02:00
< / div >
< div class = "quote-item" >
2020-06-04 00:38:47 +02:00
< p class = "quote" > « I love running into the hallway and check out where are my teammates! » < / p >
< p class = "author" > Sophie< / p >
2020-06-01 13:09:23 +02:00
< / div >
< div class = "quote-item" >
2020-06-04 00:38:47 +02:00
< p class = "quote" > « Wow! More intimate than a Meet conference. » < / p >
< p class = "author" > Greg< / p >
2020-06-01 13:09:23 +02:00
< / div >
< / div >
< / div >
2020-06-01 18:47:54 +02:00
< / div >
2020-06-01 20:29:14 +02:00
< div class = "bg-white footer" >
2020-06-01 18:47:54 +02:00
< div class = "container-fluid container-lg" >
2020-06-02 08:26:16 +02:00
< div class = "row" >
2020-06-09 07:39:43 +02:00
< div class = "col-12 col-md-6 my-3 my-md-0" >
2020-06-02 08:26:16 +02:00
< a href = "https://www.thecodingmachine.com/" target = "_blank" > < img src = "static/images/Logo TCM.png" > < / a >
< / div >
2020-06-09 07:39:43 +02:00
< div class = "col-12 col-md-6 my-3 my-md-0 floppy" >
2020-06-02 08:26:16 +02:00
< img src = "static/images/floppy.png" / >
2020-06-04 15:20:32 +02:00
< div > Soon available on floppy !< br / > < span > otherwise, available on < a href = "https://github.com/thecodingmachine/workadventure" target = "_BLANK" > GitHub< / a > < / span > < / div >
2020-06-02 08:54:25 +02:00
< / 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 >
2020-06-02 08:26:16 +02:00
< / div >
< / div >
2020-06-01 18:47:54 +02:00
< / div >
2020-06-01 13:09:23 +02:00
< / div >
< / body >
2020-06-01 16:05:01 +02:00
< / html >
