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/website/dist/index.html b/website/dist/index.html index 003fa5fe..5ba80321 100644 --- a/website/dist/index.html +++ b/website/dist/index.html @@ -56,6 +56,9 @@ window.location.assign(playUrl); } + + + @@ -108,6 +111,150 @@
+
+
+
+ + +
+ + + + + + + + +
+
+
+

Hello,

+

I'm Leymah of WorkAdventure !

+

During COVID, everybody were far from each other.

+
+
+
+
+

So, my developper’s team decide to build a plateform to keep proximity.

+

This is how I’m born.

+
+
+
+
+

With WorkAdventure, you can meet people and discuss with them.

+

To try, press button public mode

+

+ + 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 +

+
+
+ + +
+

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/Story-map-1.png b/website/dist/static/images/story/Story-map-1.png new file mode 100644 index 00000000..e401c172 Binary files /dev/null and b/website/dist/static/images/story/Story-map-1.png 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/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/sass/styles.scss b/website/src/sass/styles.scss index ea791a73..f698c150 100644 --- a/website/src/sass/styles.scss +++ b/website/src/sass/styles.scss @@ -125,6 +125,7 @@ header { } } .custom-link{ + cursor: pointer; font-family: "VCR OSD Mono"; font-size: 1.125rem; letter-spacing: 5px; @@ -208,6 +209,138 @@ img{ } } +.story-wrapper { + background: white; + position: relative; + min-height: calc(672px + 75px); + padding-top: 75px; + width: 100%; + overflow: hidden; + @include media-breakpoint-down(sm) { + display: none; + } + img { + max-width: none; + } + .sky { + z-index: 1; + position: absolute; + top: 0; + width: 100%; + height: 242px; + background: url(../images/story/sky.jpg) repeat-x top left; + } + .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; + 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(#{25+random(50)}px, #{10+random(35)}px); + } + 50% { + transform: translate(#{25+random(50)}px, #{10+random(35)}px); + } + 75% { + transform: translate(#{25+random(50)}px, #{10+random(35)}px); + } + 100% { + transform: translate(#{25+random(50)}px, #{10+random(35)}px); + } + } + .bird-#{$i} { + margin: 0 #{random(7)}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 { + 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 + } + + } + } + &.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;