diff --git a/.gitignore b/.gitignore index 7931b7a2..659dab86 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ .idea .vagrant Vagrantfile -docker-compose.override.yaml \ No newline at end of file +docker-compose.override.yaml +*.DS_Store \ No newline at end of file diff --git a/README-INTRO.jpg b/README-INTRO.jpg new file mode 100644 index 00000000..989b8e78 Binary files /dev/null and b/README-INTRO.jpg differ diff --git a/README.md b/README.md index 60bb29dc..5d2966f6 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ ![](https://github.com/thecodingmachine/workadventure/workflows/Continuous%20Integration/badge.svg) +![WorkAdventure landscape image](README-INTRO.jpg) + +Demo here : [https://workadventu.re/](https://workadventu.re/). + # Work Adventure ## Work in progress diff --git a/website/dist/index.html b/website/dist/index.html index 0520eed7..08805709 100644 --- a/website/dist/index.html +++ b/website/dist/index.html @@ -65,6 +65,9 @@ window.open('https://twitter.com/share?text=Your workplace but better!&url=https://workadventu.re/&hashtags=thecodingmachine', '_blank', 'width=500,height=500'); } + + + @@ -92,21 +95,21 @@ -
+

Your workplace
but better

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"

-
-
- - PLAY ONLINE - -
+
PRIVATE MODE
+
+ + PLAY ONLINE + +
@@ -117,6 +120,164 @@
+
+
+
+
+
+
+
+
+
+ + +
+ + + + + + + + +
+
+
+

WorkAdventure is a video-conference application that lets people hold multiple parallel conversations in a virtual universe.

+

Walk in, out, speak to anyone just like in real-life!

+
+
+
+
+ +
+
+
+
+

Remote work? Friend party? Use WorkAdventure as you prefer.

+

Click the button below to come and say hi!

+

+ + START IN PUBLIC MODE +

+
+
+
+
+

You can also create a private room with your friends or your team !

+

To try, press button private mode

+

+ + START IN PRIVATE MODE +

+

+ Don’t forget to activate your mic and camera, let’s play +

+
+
+ + +
+

diff --git a/website/dist/static/images/playicon.png b/website/dist/static/images/playicon.png new file mode 100644 index 00000000..0b318c8d Binary files /dev/null and b/website/dist/static/images/playicon.png differ diff --git a/website/dist/static/images/story/WA-Demo.gif b/website/dist/static/images/story/WA-Demo.gif new file mode 100644 index 00000000..1580f8b9 Binary files /dev/null and b/website/dist/static/images/story/WA-Demo.gif differ diff --git a/website/dist/static/images/story/bird.gif b/website/dist/static/images/story/bird.gif new file mode 100644 index 00000000..d0e90f62 Binary files /dev/null and b/website/dist/static/images/story/bird.gif differ diff --git a/website/dist/static/images/story/character-static.png b/website/dist/static/images/story/character-static.png new file mode 100644 index 00000000..9f8755f7 Binary files /dev/null and b/website/dist/static/images/story/character-static.png differ diff --git a/website/dist/static/images/story/character-walk-right.gif b/website/dist/static/images/story/character-walk-right.gif new file mode 100644 index 00000000..1699f37c Binary files /dev/null and b/website/dist/static/images/story/character-walk-right.gif differ diff --git a/website/dist/static/images/story/story-map-bg.png b/website/dist/static/images/story/story-map-bg.png new file mode 100644 index 00000000..e401c172 Binary files /dev/null and b/website/dist/static/images/story/story-map-bg.png differ diff --git a/website/dist/static/images/story/thinking.png b/website/dist/static/images/story/thinking.png new file mode 100644 index 00000000..055759f6 Binary files /dev/null and b/website/dist/static/images/story/thinking.png differ diff --git a/website/src/images/story/WA-Demo.gif b/website/src/images/story/WA-Demo.gif new file mode 100644 index 00000000..1580f8b9 Binary files /dev/null and b/website/src/images/story/WA-Demo.gif differ diff --git a/website/src/images/story/bubble-border-bottom-left.png b/website/src/images/story/bubble-border-bottom-left.png new file mode 100644 index 00000000..e87b8734 Binary files /dev/null and b/website/src/images/story/bubble-border-bottom-left.png differ diff --git a/website/src/images/story/bubble-border-bottom-right.png b/website/src/images/story/bubble-border-bottom-right.png new file mode 100644 index 00000000..b7bd5c9d Binary files /dev/null and b/website/src/images/story/bubble-border-bottom-right.png differ diff --git a/website/src/images/story/bubble-revert.png b/website/src/images/story/bubble-revert.png new file mode 100644 index 00000000..cd6f9b8c Binary files /dev/null and b/website/src/images/story/bubble-revert.png differ diff --git a/website/src/images/story/bubble.png b/website/src/images/story/bubble.png new file mode 100644 index 00000000..dc24aac3 Binary files /dev/null and b/website/src/images/story/bubble.png differ diff --git a/website/src/images/story/mountains.png b/website/src/images/story/mountains.png new file mode 100644 index 00000000..804d25ba Binary files /dev/null and b/website/src/images/story/mountains.png differ diff --git a/website/src/images/story/sky.jpg b/website/src/images/story/sky.jpg new file mode 100644 index 00000000..75e590a8 Binary files /dev/null and b/website/src/images/story/sky.jpg differ diff --git a/website/src/images/story/thinking.png b/website/src/images/story/thinking.png new file mode 100644 index 00000000..055759f6 Binary files /dev/null and b/website/src/images/story/thinking.png differ diff --git a/website/src/sass/styles.scss b/website/src/sass/styles.scss index 3e3eafe6..c5095343 100644 --- a/website/src/sass/styles.scss +++ b/website/src/sass/styles.scss @@ -21,6 +21,12 @@ font-family: 'VCR OSD Mono'; src: url('../fonts/VCR_OSD.ttf') format('truetype'); } +@function randomNum($min, $max) { + $rand: random(); + $randomNum: $min + floor($rand * (($max - $min) + 1)); + + @return $randomNum; +} header { background: #28A7FC url("../images/sky.jpg") no-repeat bottom; @@ -87,34 +93,34 @@ header { } } } - .clouds { - content: ""; - position: absolute; - bottom: 0; - right: 0; - height: 162px; - overflow: hidden; - width: 100%; - z-index: 1; - &.clouds-2 { - bottom: 25px; - .cloud { - transform: translateX(50px); - -webkit-animation-duration: 80s; - opacity: .6; - } - } + +} +.clouds { + content: ""; + position: absolute; + bottom: 0; + right: 0; + height: 162px; + overflow: hidden; + width: 100%; + z-index: 1; + &.clouds-2 { + bottom: 25px; .cloud { - background: url('../images/cloud.png') repeat-x; - height: 162px; - width: 4000px; - -webkit-animation-name: prop-600; - -webkit-animation-duration: 50s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-direction:alternate; + transform: translateX(50px); + -webkit-animation-duration: 80s; + opacity: .6; } } - + .cloud { + background: url('../images/cloud.png') repeat-x; + height: 162px; + width: 4000px; + -webkit-animation-name: prop-600; + -webkit-animation-duration: 50s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-direction:alternate; + } } @-webkit-keyframes prop-600 { 0% { @@ -124,7 +130,9 @@ header { -webkit-transform: translateX(-400px); } } + .custom-link{ + cursor: pointer; font-family: "VCR OSD Mono"; font-size: 1.125rem; letter-spacing: 5px; @@ -216,6 +224,161 @@ img{ } } +.story-wrapper { + background: white; + position: relative; + height: 100vh; + min-height: calc(672px + 75px); + padding-top: 75px; + width: 100%; + overflow: hidden; + @include media-breakpoint-down(sm) { + display: none; + } + img { + max-width: none; + } + .sky { + margin-top: 8vh; + z-index: 1; + position: absolute; + top: 0; + width: 100%; + height: 242px; + background: url(../images/story/sky.jpg) repeat-x top left; + } + .clouds { + bottom: auto; + top: 0; + z-index: 2; + transform: scaleY(-1); + } + .mountains { + z-index: 5; + position: absolute; + bottom: 200px; + width: calc(100% + 200px); + height: 242px; + background: url(../images/story/mountains.png) repeat-x top center; + } + .story-1 { + position: absolute; + z-index: 10; + left: 0; + bottom: 0; + overflow: hidden; + } + .character { + position: absolute; + z-index: 15; + bottom: 75px; + left: 0; + right: 0; + margin: auto; + } + .birds { + position: absolute; + z-index: 20; + right: -200px; + $birds: 8; + @for $i from 1 through $birds { + @keyframes fly-#{$i} { + 0% { + transform: translate(0px, 0px); + } + 25% { + transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px); + } + 50% { + transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px); + } + 75% { + transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px); + } + 100% { + transform: translate(#{randomNum(0, 50)}px, #{randomNum(0, 50)}px); + } + } + .bird-#{$i} { + margin: 0 #{randomNum(0, 10)}vw; + transition-timing-function: cubic-bezier(0.150, -0.600, 0.155, 1.650); + animation-duration: 15s; + animation-name: fly-#{$i}; + animation-iteration-count: infinite; + animation-direction: alternate; + } + } + } + .bubble { + color: black; + position: absolute; + z-index: 25; + bottom: 160px; + left: 263px; + right: -50px; + margin: auto; + opacity: 0; + height: 151px; + width: 289px; + line-height: 22px; + padding: 5px; + background: black; + transform: translateY(25px); + & > div:not(.demo-gif) { + padding: 15px 15px 30px; + position: relative; + width: 100%; + height: 100%; + background: white; + &:before { + content: ""; + position: absolute; + background: url(../images/story/bubble-border-bottom-left.png) no-repeat bottom left; + left: -4px; + width: 28px; + height: 25px; + bottom: -20px; + } + p { + &.bubble-legend { + font-size: 12px; + color: grey; + margin: 0; + } + &.bubble-action { + cursor: pointer; + text-decoration: underline + } + + } + } + &.bubble-thinking { + background: url(../images/story/thinking.png) no-repeat bottom right; + left: -406px; + & > .demo-gif { + width: 241px; + border-radius: 15px; + img { + width: calc(100% + 1px); + border-radius: 16px; + margin-top: -1px; + margin-left: -1px; + } + } + } + &.b-revert { + left: -363px; + & > div:before { + left: auto; + right: -4px; + background: url(../images/story/bubble-border-bottom-right.png) no-repeat bottom left; + } + } + } +} +.pin-spacer { + background: white; +} .section{ padding-top: 2rem; padding-bottom: 5rem;