workadventure/website/dist/index.html

402 lines
18 KiB
HTML
Raw Normal View History

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>
<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";
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">
<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">
<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
</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
</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>
<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>
Dont forget to activate your mic and camera, lets play
</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>
<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>
<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">
<h3>How to play</h3>
2020-06-04 00:38:47 +02:00
</div>
<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>
</div>
2020-06-01 13:09:23 +02:00
</div>
<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>
</div>
2020-06-01 13:09:23 +02:00
</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>
2020-06-01 13:09:23 +02:00
</div>
</div>
</div>
</div>
<div class="section bg-white">
<div class="container-fluid container-lg">
<div class="col-12 credits">
<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>
<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>
<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>
<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>
</div>
2020-06-01 13:09:23 +02:00
<div class="container-fluid container-lg section quotes">
<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">&laquo;&nbsp;Right on time! I feel like less alone in my home office.&nbsp;&raquo;</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">&laquo;&nbsp;I love running into the hallway and check out where are my teammates!&nbsp;&raquo;</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">&laquo;&nbsp;Wow! More intimate than a Meet conference.&nbsp;&raquo;</p>
<p class="author">Greg</p>
2020-06-01 13:09:23 +02:00
</div>
</div>
</div>
</div>
<div class="bg-white footer">
<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>
</div>
2020-06-01 13:09:23 +02:00
</div>
</body>
2020-06-01 16:05:01 +02:00
</html>