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" / >
< 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" / >
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-01 16:22:42 +02:00
window.location.assign(playUrl);
}
< / 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-04 17:52:55 +02:00
< a href = "https://www.facebook.com/sharer/sharer.php?u=https://workadventu.re/" target = "_BLANK" >
2020-06-02 08:26:16 +02:00
< img class = "social-image" src = "static/images/facebook.png" / >
< / a >
2020-06-04 17:52:55 +02:00
< a href = "https://www.linkedin.com/shareArticle?mini=true&url=https://workadventu.re/&title=&summary=Discover a pixelated new world and start a casual conversation !&source=TheCodingMachine" target = "_BLANK" >
2020-06-02 08:26:16 +02:00
< img class = "social-image" src = "static/images/linkedin.png" / >
< / a >
2020-06-04 17:52:55 +02:00
< a href = "https://twitter.com/home?status=https://workadventu.re/ Discover a pixelated new world and start a casual conversation !" target = "_BLANK" >
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-06-04 15:56:06 +02:00
< 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 >
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-06-14 11:59:25 +02:00
< a class = "custom-link start" href = "/choose-map.html" title = "PRIVATE MODE" >
PRIVATE MODE
2020-06-01 18:47:54 +02:00
< / a >
< / div >
< div class = "col col-lg-3" >
2020-06-14 11:59:25 +02:00
< a class = "custom-link play" target = "_BLANK" onclick = "startGame()" title = "PLAY ONLINE" >
PLAY 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 >
< div class = "bubble bubble-1" style = "width: 320px;height: 164px;" >
< div >
2020-06-16 14:23:23 +02:00
< p > < strong > Hello World !< / strong > < / p >
< p > I'm Leymah of WorkAdventure.< / p >
< p > During COVID-19, we were missing our office…< / p >
2020-06-14 11:32:15 +02:00
< / div >
< / div >
< div class = "bubble bubble-2 b-revert" style = "height: 164px;" >
< div >
2020-06-16 14:23:23 +02:00
< p > So our team of developer decided to build a platform so we can be together..< / p >
< p > This is how I was born.< / p >
2020-06-14 11:32:15 +02:00
< / div >
< / div >
< div class = "bubble bubble-3" style = "height: 164px;" >
< div >
< p > With WorkAdventure, you can meet people and discuss with them.< / p >
< p class = "bubble-legend" > To try, press button public mode< / p >
< 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 >
< p class = "bubble-legend" > To try, press button private mode< / 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" / >
START IN PRIVATE MODE
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;
}
})
.to(".bubble-1", {
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-16 13:51:25 +02:00
.to(".bubble-1", {
opacity: 0
})
2020-06-14 11:32:15 +02:00
.to(".bubble-2", {
opacity: 1,
y: 0
})
.to(".story-1", {
x: -maxImageTranslateValue * (3/bubbleNumber),
onStart: function() {
document.getElementById("leymah").src = charWalkToRightImage;
},
onComplete: function() {
document.getElementById("leymah").src = charStaticImage;
}
})
2020-06-16 13:51:25 +02:00
.to(".bubble-2", {
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", {
x: "51vw",
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 / >
Well, it's not mobile friendly yet. Try with your desktop computer.
< / 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-06-04 12:08:47 +02:00
< h3 > How to play< / 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" >
< h2 > Choose your map< / 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" >
< h2 > Select your character< / 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" >
< h2 > Let's go explore and talk !< / 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-06-04 12:08:47 +02:00
< h2 > Future features< / h2 >
2020-06-04 00:52:25 +02:00
< h3 > We have already thought of new features:< / h3 >
2020-06-04 00:38:47 +02:00
< p > Share files with others< / p >
2020-06-04 15:20:32 +02:00
< p > Lock group conversations< / p >
2020-06-04 00:38:47 +02:00
< p > Share screen with others< / p >
< p > Interact with objects< / p >
2020-06-04 12:08:47 +02:00
< h3 > And you, what would you want?< / 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 >
