Merge pull request #139 from thecodingmachine/landingpage

first landingpage release
2020-06-04 15:34:57 +02:00 · 2020-06-04 15:34:57 +02:00 · b6d8b8fb49
commit b6d8b8fb49
parent 82e2c0d985 17250d810f
81 changed files with 8749 additions and 8 deletions
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@ -56,6 +56,29 @@ jobs:
          tags: ${{ env.GITHUB_REF_SLUG }}
          add_git_labels: true

+  build-website:
+
+    runs-on: ubuntu-latest
+
+    steps:
+
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      # Create a slugified value of the branch
+      - uses: rlespinasse/github-slug-action@master
+
+      - name: "Build and push back image"
+        uses: docker/build-push-action@v1
+        with:
+          dockerfile: website/Dockerfile
+          path: website/
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+          repository: thecodingmachine/workadventure-website
+          tags: ${{ env.GITHUB_REF_SLUG }}
+          add_git_labels: true
+
  deeploy:
    needs:
      - build-front
@ -89,20 +112,20 @@ jobs:
        uses: cypress-io/github-action@v1
        if: ${{ env.GITHUB_REF_SLUG != 'master' }}
        env:
-          CYPRESS_BASE_URL: https://${{ env.GITHUB_REF_SLUG }}.workadventure.test.thecodingmachine.com
+          CYPRESS_BASE_URL: https://play.${{ env.GITHUB_REF_SLUG }}.workadventure.test.thecodingmachine.com
        with:
-          env: host=${{ env.GITHUB_REF_SLUG }}.workadventure.test.thecodingmachine.com,port=80
+          env: host=play.${{ env.GITHUB_REF_SLUG }}.workadventure.test.thecodingmachine.com,port=80
          spec: cypress/integration/spec.js
-          wait-on: https://${{ env.GITHUB_REF_SLUG }}.workadventure.test.thecodingmachine.com
+          wait-on: https://play.${{ env.GITHUB_REF_SLUG }}.workadventure.test.thecodingmachine.com
          working-directory: e2e

      - name: Run Cypress tests in prod
        uses: cypress-io/github-action@v1
        if: ${{ env.GITHUB_REF_SLUG == 'master' }}
        env:
-          CYPRESS_BASE_URL: https://workadventu.re
+          CYPRESS_BASE_URL: https://play.workadventu.re
        with:
-          env: host=workadventu.re
+          env: host=play.workadventu.re
          spec: cypress/integration/spec.js
          wait-on: https://workadventu.re
          working-directory: e2e
--- a/deeployer.libsonnet
+++ b/deeployer.libsonnet
@ -19,13 +19,24 @@
    "front": {
      "image": "thecodingmachine/workadventure-front:"+tag,
      "host": {
-        "url": url,
+        "url": "play."+url,
        "https": "enable"
      },
      "ports": [80],
      "env": {
        "API_URL": "https://api."+url
      }
+    },
+    "website": {
+      "image": "thecodingmachine/workadventure-website:"+tag,
+      "host": {
+        "url": url,
+        "https": "enable"
+      },
+      "ports": [80],
+      "env": {
+        "GAME_URL": "https://play."+url
+      }
    }
  },
  "config": {
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@ -25,7 +25,7 @@ services:
    volumes:
      - ./front:/usr/src/app
    labels:
-      - "traefik.http.routers.front.rule=Host(`workadventure.localhost`)"
+      - "traefik.http.routers.front.rule=Host(`play.workadventure.localhost`)"
      - "traefik.http.services.front.loadbalancer.server.port=8080"

  back:
@ -39,3 +39,15 @@ services:
    labels:
      - "traefik.http.routers.back.rule=Host(`api.workadventure.localhost`)"
      - "traefik.http.services.back.loadbalancer.server.port=8080"
+
+  website:
+    image: thecodingmachine/nodejs:12-apache
+    environment:
+      STARTUP_COMMAND_1: npm install
+      STARTUP_COMMAND_2: npm run watch &
+      APACHE_DOCUMENT_ROOT: dist/
+    volumes:
+      - ./website:/var/www/html
+    labels:
+      - "traefik.http.routers.website.rule=Host(`workadventure.localhost`)"
+      - "traefik.http.services.website.loadbalancer.server.port=80"
--- a/front/dist/index.html
+++ b/front/dist/index.html
@ -7,7 +7,7 @@
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <base href="/">
        <link rel="stylesheet" href="/resources/style/style.css">
-        <title>Document</title>
+        <title>WorkAdventure</title>
    </head>
    <body id="body" style="margin: 0">
        <div id="webRtc" class="webrtc">
--- a/website/.gitignore
+++ b/website/.gitignore
@ -0,0 +1,5 @@
+/node_modules/
+/dist/bundle.js
+/dist/main.css
+/dist/fonts
+/dist/images
--- a/website/Dockerfile
+++ b/website/Dockerfile
@ -0,0 +1,9 @@
+# we are rebuilding on each deploy to cope with the GAME_URL environment URL
+FROM thecodingmachine/nodejs:12-apache
+
+COPY --chown=docker:docker . .
+RUN yarn install
+
+ENV NODE_ENV=production
+ENV STARTUP_COMMAND_1="yarn run build"
+ENV APACHE_DOCUMENT_ROOT=dist/
--- a/website/README.md
+++ b/website/README.md
@ -0,0 +1,45 @@
+Basic Webpack config for simple website.
+
+Install all packages:
+```
+$ npm install
+```
+
+Run webpack
+```
+$ npm run build
+```
+
+Done! Open index.html in browser for a cat image.
+
+----
+
+### Notice about production mode and postcss.config.js
+In *postcss.config.js* there is a check for **process.env.NODE_ENV** variable. The thing is even if you set Webpack mode to production it *won't* automatically change Node environment variable.
+
+The simplest way to configure this is to install *cross-env* package:
+```
+$ npm install --save-dev cross-env
+```
+
+Then just add another npm script in *package.json* for production mode:
+```javascript
+"scripts": {
+  "build": "webpack --config webpack.config.js",
+  "build-production": "cross-env NODE_ENV=production webpack --config webpack.config.js"
+}
+```
+
+Now when you run `npm run build-production` the *process.env.NODE_ENV* variable will be production and postcss.config.js check is going to work:
+```javascript
+if(process.env.NODE_ENV === 'production') {
+    module.exports = {
+        plugins: [
+            require('autoprefixer'),
+            require('cssnano')
+        ]
+    }
+}
+```
+[From Webpack documentation](https://webpack.js.org/guides/production/):
+Technically, *NODE_ENV* is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine dev-vs-prod behavior by server tools, build scripts, and client-side libraries. Contrary to expectations, *process.env.NODE_ENV* **is not set to "production"** within the build script webpack.config.js. Thus, conditionals like `process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'` within webpack configurations do not work as expected.
--- a/website/dist/choose-map.html
+++ b/website/dist/choose-map.html
@ -0,0 +1,156 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <title>Choose map - WorkAdventu.re</title>
+
+    <link rel="stylesheet" href="main.css">
+    <script src="bundle.js"></script>
+</head>
+
+<body class="choose-map">
+    <div class="container-fluid container-lg section pt-5">
+        <h1 class="text-center pixel-title">CHOOSE YOUR MAP&nbsp;!</h1>
+        <div class="row no-gutters justify-content-center">
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="npeguin.github.io/skapa-map/map.json" id="map_1">
+                    <img src="static/images/maps/creative.png">
+                    <p>Need some inspiration? Enter our CREATIVE SPACE&nbsp;!</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="npeguin.github.io/pub-map/map.json" id="map_2">
+                    <img src="static/images/maps/pub.png">
+                    <p>Too late for working ? Just GO TO THE PUB&nbsp;!</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="npeguin.github.io/office-map/map.json" id="map_3">
+                    <img src="static/images/maps/office.png">
+                    <p>Want to try a SIMPLE OFFICE map&nbsp;?</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="npeguin.github.io/classroom-map/map.json" id="map_4">
+                    <img src="static/images/maps/school.png">
+                    <p>Send your kids BACK TO SCHOOL... and rest a bit&nbsp;;)</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="npeguin.github.io/tower-map/map.json" id="map_5">
+                    <img src="static/images/maps/dungeon.png">
+                    <p>Dungeons & Dragons Nostalgia&nbsp;?</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="npeguin.github.io/fantasy-map/map.json" id="map_6">
+                    <img src="static/images/maps/fantasy.png">
+                    <p>Explore a fantasy world&nbsp;!</p>
+                </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
+                <div class="map-item" data-url="api.workadventu.re/map/files/Floor0/floor0.json" id="map_7">
+                    <img src="static/images/maps/tcm.png">
+                    <p>Need a bigger Office? Visit us&nbsp;!</p>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col text-center">
+                <div class="map-item" data-url="npeguin.github.io/corridor-map/map.json" id="map_8">
+                    <img src="static/images/maps/street.png">
+                    <p>NO IDEA, or just want to ROAM THE STREETS&nbsp;? Enter the street map and choose your own path&nbsp;!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container-fluid container-lg section text-center" id="map-link-container" style="display: none;">
+        <h1 class="mb-3">YOUR MAP URL IS</h1>
+        <p id="wa-link" class="mb-5"></p>
+        <div class="row align-items-center justify-content-center">
+            <div class="col-sm-8 text-right mb-4 pb-sm-0">
+                <button class="copy-btn" onclick="copyToClipboard()">COPY MAP URL<small> TO CLIPBOARD</small></button>
+            </div>
+            <div class="col-sm-4 text-center text-sm-left">
+                <span id="new-url">to share it !</span>
+                <span id="url-copied"><img src="static/images/check.png">Link copied !</span>
+            </div>
+        </div>
+        <div class="row start-area justify-content-center mt-5">
+            <div class="col-12 col-sm-1 d-none d-sm-block">
+                <img src="static/images/female-character.gif">
+            </div>
+            <div class="col-12 col-sm-4 mb-3 mb-sm-0">
+                <button id="start-btn" onclick="play()">START <span>&gt;&gt;</span></button>
+            </div>
+            <div class="col-12 col-sm-1">
+                <img src="static/images/male-character.gif">
+            </div>
+        </div>
+    </div>
+<script>
+    var rand           = '';
+    var characters       = 'abcdefghijklmnopqrstuvwxyz';
+    var charactersLength = characters.length;
+    for ( var i = 0; i < 9; i++ ) {
+        rand += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    var id = rand.slice(0,3) + '-' + rand.slice(3,6) + '-' + rand.slice(6);
+    var mapLink = document.getElementById('wa-link');
+    var mapLinkContainer = document.getElementById('map-link-container');
+
+    function setSelectedMap(element){
+        var items = document.querySelectorAll(".map-item");
+        [].forEach.call(items, function(el) {
+            el.classList.remove("active");
+        });
+        element.classList.add("active");
+        mapLink.innerText = window.location.protocol + "//play."+window.location.host + "/_/" + id + "/" + element.dataset.url;
+        mapLinkContainer.style.display = 'block';
+        document.getElementById('new-url').style.display = 'inline';
+        document.getElementById('url-copied').style.display = 'none';
+
+        mapLinkContainer.scrollIntoView({
+            block: "start",
+            inline: "nearest",
+            behavior: "smooth"
+        })
+    }
+
+    function copyToClipboard() {
+        var aux = document.createElement("input");
+        aux.setAttribute("value", mapLink.innerHTML);
+        document.body.appendChild(aux);
+        aux.select();
+        document.execCommand("copy");
+        document.body.removeChild(aux);
+
+        document.getElementById('new-url').style.display = 'none';
+        document.getElementById('url-copied').style.display = 'inline';
+        setTimeout(function(){
+            document.getElementById('new-url').style.display = 'inline';
+            document.getElementById('url-copied').style.display = 'none';
+        }, 2000);
+    }
+
+    function play(){
+        window.location.assign(mapLink.innerText);
+    }
+
+    (function() {
+        document.addEventListener('click', function (event) {
+            // If the clicked element doesn't have the right selector, bail
+            var mapItem = event.target.closest('.map-item');
+            if (mapItem === null) {
+                return;
+            }
+            // Don't follow the link
+            event.preventDefault();
+            setSelectedMap(mapItem);
+        }, false);
+    })();
+</script>
+</body>
+
+</html>
--- a/website/dist/index.html
+++ b/website/dist/index.html
@ -0,0 +1,174 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <title>WorkAdventu.re</title>
+
+    <link rel="stylesheet" href="main.css">
+    <script src="bundle.js"></script>
+    <script>
+        function startGame() {
+            let playUrl = window.location.protocol + "//play."+window.location.host;
+            window.location.assign(playUrl);
+        }
+    </script>
+</head>
+
+<body>
+    <header>
+        <div class="container-lg section">
+            <div class="over-image">
+                <div class="row">
+                    <div class="col-6 col-md-6 my-3 my-md-0">
+                        <div class="logo">
+                            <img src="static/images/logo.png">
+                        </div>
+                    </div>
+                    <div class="col-6 col-md-6 my-3 my-md-0">
+                        <div class="social-links">
+                            Share your experience
+                            <a href="https://www.facebook.com/sharer/sharer.php?u=http://workadventu.re/" target="_BLANK">
+                                <img class="social-image" src="static/images/facebook.png" />
+                            </a>
+                            <a href="https://www.linkedin.com/shareArticle?mini=true&url=http://workadventu.re/&title=&summary=Discover a pixelated new world and start a casual conversation !&source=TheCodingMachine" target="_BLANK">
+                                <img class="social-image" src="static/images/linkedin.png" />
+                            </a>
+                            <a href="https://twitter.com/home?status=http://workadventu.re/ Discover a pixelated new world and start a casual conversation !" target="_BLANK">
+                                <img class="social-image" src="static/images/twitter.png" />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="title text-center">
+                    <h1>Your workplace<br/>but better</h1>
+                    <h3>You are impatient to discover this new world? Click on "Public map" and meet new people or share this adventure with your colleagues and friends by clicking on "Private maps"</h3>
+                </div>
+                <div class="row justify-content-md-center pt-5" style="margin-top: 65px;">
+                    <div class="col col-lg-3">
+                        <a class="custom-link play" target="_BLANK" href="https://workadventu.re/_/global/npeguin.github.io/office-map/map.json" title="PUBLIC MAP">
+                            PUBLIC MAP
+                        </a>
+                    </div>
+                    <div class="col col-lg-3">
+                        <a class="custom-link start" href="/choose-map.html" title="PRIVATE MAPS">
+                            PRIVATE MAPS
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="clouds clouds-2">
+            <div class="cloud"></div>
+        </div>
+        <div class="clouds">
+            <div class="cloud"></div>
+        </div>
+    </header>
+    <div class="section bg-white how-to">
+        <div class="container-fluid container-lg">
+            <div class="row justify-content-md-center">
+                <div class="col-12 col-md-12 text-center">
+                    <h3>How to play</h3>
+                </div>
+                <div class="col-12 col-md-4 text-center my-3 my-md-0">
+                    <div class="image-item">
+                        <h2>Choose your map</h2>
+                        <div class="step-image"><img src="static/images/maps/office.png"></div>
+                    </div>
+                </div>
+                <div class="col-12 col-md-4 text-center my-3 my-md-0">
+                    <div class="image-item">
+                        <h2>Select your character</h2>
+                        <div class="step-image"><img src="static/images/choose_character.png"></div>
+                    </div>
+                </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>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="section bg-white">
+        <div class="container-fluid container-lg">
+            <div class="col-12 credits">
+                <h2>Future features</h2>
+				<h3>We have already thought of new features:</h3>
+				<p>Share files with others</p>
+				<p>Lock group conversations</p>
+				<p>Share screen with others</p>
+				<p>Interact with objects</p>
+				<h3>And you, what would you want?</h3>
+                <div class="row justify-content-md-center pt-5" style="margin-top: 65px;">
+                    <div class="col col-lg-3">
+                        <a class="custom-link contribute" target="_BLANK" href="https://docs.google.com/forms/d/e/1FAIpQLSdxvajEyqsn4X0ai0SoDAcdsa_JQPIfiP2Tp9PDzkfZA54v9Q/viewform" title="FEEDBACK">
+                            FEEDBACK
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="bg-gray section used-by">
+        <div class="container-fluid container-lg">
+            <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>
+            </div>
+        </div>
+        </div>
+    <div class="container-fluid container-lg section quotes">
+        <h2 class="text-center">Why we love WorkAdventure</h2>
+        <div class="row justify-content-center">
+            <div class="col-12 col-md-9">
+                <div class="quote-item">
+                    <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>
+                </div>
+                <div class="quote-item">
+                    <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>
+                </div>
+                <div class="quote-item">
+                    <p class="quote">&laquo;&nbsp;Wow! More intimate than a Meet conference.&nbsp;&raquo;</p>
+                    <p class="author">Greg</p>
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <div class="bg-white footer">
+        <div class="container-fluid container-lg">
+            <div class="row">
+                <div class="col-6 col-md-6 my-3 my-md-0">
+                    <a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
+                </div>
+                <div class="col-6 col-md-6 my-3 my-md-0 floppy">
+                    <img src="static/images/floppy.png" />
+                    <div>Soon available on floppy !<br/><span>otherwise, available on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
+                </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>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
--- a/website/dist/static/images/Bitmap2.png
+++ b/website/dist/static/images/Bitmap2.png
--- a/website/dist/static/images/Bitmap3.png
+++ b/website/dist/static/images/Bitmap3.png
--- a/website/dist/static/images/Logo
+++ b/website/dist/static/images/Logo
--- a/website/dist/static/images/amstrad.png
+++ b/website/dist/static/images/amstrad.png
--- a/website/dist/static/images/atari.png
+++ b/website/dist/static/images/atari.png
--- a/website/dist/static/images/bitmap.png
+++ b/website/dist/static/images/bitmap.png
--- a/website/dist/static/images/check.png
+++ b/website/dist/static/images/check.png
--- a/website/dist/static/images/choose_character.png
+++ b/website/dist/static/images/choose_character.png
--- a/website/dist/static/images/cloud.png
+++ b/website/dist/static/images/cloud.png
--- a/website/dist/static/images/facebook.png
+++ b/website/dist/static/images/facebook.png
--- a/website/dist/static/images/female-character.gif
+++ b/website/dist/static/images/female-character.gif
--- a/website/dist/static/images/floppy.png
+++ b/website/dist/static/images/floppy.png
--- a/website/dist/static/images/interact.png
+++ b/website/dist/static/images/interact.png
--- a/website/dist/static/images/linkedin.png
+++ b/website/dist/static/images/linkedin.png
--- a/website/dist/static/images/logo.png
+++ b/website/dist/static/images/logo.png
--- a/website/dist/static/images/male-character.gif
+++ b/website/dist/static/images/male-character.gif
--- a/website/dist/static/images/maps/coders.png
+++ b/website/dist/static/images/maps/coders.png
--- a/website/dist/static/images/maps/creative.png
+++ b/website/dist/static/images/maps/creative.png
--- a/website/dist/static/images/maps/dungeon.png
+++ b/website/dist/static/images/maps/dungeon.png
--- a/website/dist/static/images/maps/fantasy.png
+++ b/website/dist/static/images/maps/fantasy.png
--- a/website/dist/static/images/maps/office.png
+++ b/website/dist/static/images/maps/office.png
--- a/website/dist/static/images/maps/pub.png
+++ b/website/dist/static/images/maps/pub.png
--- a/website/dist/static/images/maps/school.png
+++ b/website/dist/static/images/maps/school.png
--- a/website/dist/static/images/maps/street.png
+++ b/website/dist/static/images/maps/street.png
--- a/website/dist/static/images/maps/tcm.png
+++ b/website/dist/static/images/maps/tcm.png
--- a/website/dist/static/images/play.png
+++ b/website/dist/static/images/play.png
--- a/website/dist/static/images/sinclair-2.png
+++ b/website/dist/static/images/sinclair-2.png
--- a/website/dist/static/images/step
+++ b/website/dist/static/images/step
--- a/website/dist/static/images/step
+++ b/website/dist/static/images/step
--- a/website/dist/static/images/step
+++ b/website/dist/static/images/step
--- a/website/dist/static/images/super-nintendo.png
+++ b/website/dist/static/images/super-nintendo.png
--- a/website/dist/static/images/twitter.png
+++ b/website/dist/static/images/twitter.png
--- a/website/package-lock.json
+++ b/website/package-lock.json
--- a/website/package.json
+++ b/website/package.json
@ -0,0 +1,28 @@
+{
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "watch": "webpack --config webpack.config.js --watch"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.3.4",
+    "@babel/preset-env": "^7.3.4",
+    "autoprefixer": "^9.4.10",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
+    "file-loader": "^3.0.1",
+    "mini-css-extract-plugin": "^0.5.0",
+    "postcss-loader": "^3.0.0",
+    "sass": "^1.26.7",
+    "sass-loader": "^7.1.0",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.11"
+  },
+  "dependencies": {
+    "bootstrap": "^4.5.0",
+    "jquery": "^3.5.1",
+    "node-sass": "^4.14.1",
+    "popper.js": "^1.16.1",
+    "style-loader": "^1.2.1"
+  }
+}
--- a/website/postcss.config.js
+++ b/website/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer'),
+        require('cssnano')
+    ]
+}
--- a/website/src/fonts/04B_03.woff
+++ b/website/src/fonts/04B_03.woff
--- a/website/src/fonts/OpenSans-Regular.ttf
+++ b/website/src/fonts/OpenSans-Regular.ttf
--- a/website/src/fonts/VCR_OSD.ttf
+++ b/website/src/fonts/VCR_OSD.ttf
--- a/website/src/fonts/ka1.ttf
+++ b/website/src/fonts/ka1.ttf
--- a/website/src/images/BG-briques.png
+++ b/website/src/images/BG-briques.png
--- a/website/src/images/Desktop
+++ b/website/src/images/Desktop
--- a/website/src/images/Group-4.png
+++ b/website/src/images/Group-4.png
--- a/website/src/images/Group-5.png
+++ b/website/src/images/Group-5.png
--- a/website/src/images/Rectangle.png
+++ b/website/src/images/Rectangle.png
--- a/website/src/images/bg-briques.jpg
+++ b/website/src/images/bg-briques.jpg
--- a/website/src/images/bg-step.png
+++ b/website/src/images/bg-step.png
--- a/website/src/images/btn-bg-2.png
+++ b/website/src/images/btn-bg-2.png
--- a/website/src/images/btn-bg-3.png
+++ b/website/src/images/btn-bg-3.png
--- a/website/src/images/btn-bg-bw.png
+++ b/website/src/images/btn-bg-bw.png
--- a/website/src/images/btn-bg-light.png
+++ b/website/src/images/btn-bg-light.png
--- a/website/src/images/btn-bg.png
+++ b/website/src/images/btn-bg.png
--- a/website/src/images/cat.jpg
+++ b/website/src/images/cat.jpg
--- a/website/src/images/chosse-map.png
+++ b/website/src/images/chosse-map.png
--- a/website/src/images/cloud.png
+++ b/website/src/images/cloud.png
--- a/website/src/images/demo.png
+++ b/website/src/images/demo.png
--- a/website/src/images/header.png
+++ b/website/src/images/header.png
--- a/website/src/images/lets-go-explore.png
+++ b/website/src/images/lets-go-explore.png
--- a/website/src/images/people-love.png
+++ b/website/src/images/people-love.png
--- a/website/src/images/pixelated.png
+++ b/website/src/images/pixelated.png
--- a/website/src/images/playicon.png
+++ b/website/src/images/playicon.png
--- a/website/src/images/rect_3.png
+++ b/website/src/images/rect_3.png
--- a/website/src/images/select-char.png
+++ b/website/src/images/select-char.png
--- a/website/src/images/sinclair.png
+++ b/website/src/images/sinclair.png
--- a/website/src/images/sky.jpg
+++ b/website/src/images/sky.jpg
--- a/website/src/images/start.png
+++ b/website/src/images/start.png
--- a/website/src/images/used-by-millions.png
+++ b/website/src/images/used-by-millions.png
--- a/website/src/javascript/index.js
+++ b/website/src/javascript/index.js
@ -0,0 +1 @@
+import '../sass/styles.scss';
--- a/website/src/sass/_choose-map.scss
+++ b/website/src/sass/_choose-map.scss
@ -0,0 +1,74 @@
+body.choose-map{
+
+  .map-item{
+    cursor: pointer;
+    margin: 1rem 0.5rem;
+    padding: 1rem;
+    text-align: center;
+    border: 3px transparent solid;
+
+    &.active{
+      border-color: #FFFFFF;
+    }
+
+    p{
+      margin: 1em 0 0;
+      font-size: larger;
+    }
+  }
+
+  #wa-link{
+    text-decoration: underline;
+  }
+
+  #url-copied{
+    display: none;
+    font-size: 20px;
+
+    img{
+      height: 20px;
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+
+  .copy-btn{
+    font-family: "Karmatic Arcade";
+    font-size: 30px;
+    border: 4px solid #ffffff;
+    width: auto;
+    box-shadow: 4px 4px white;
+    padding: 1rem;
+    background: #000000;
+    color: white;
+    margin-right: 10px;
+    &:focus{
+      outline: none;
+    }
+
+    small{
+      font-size: 16px;
+    }
+  }
+
+  .start-area{
+    img{
+      min-height: 70px;
+    }
+
+    #start-btn{
+      background-color: transparent;
+      border: none;
+      color: #ffffff;
+      border-bottom: 8px solid white;
+      animation: blinker 1s alternate infinite;
+      font-size: 50px;
+    }
+
+    @keyframes blinker {
+      50% {
+        opacity: 0;
+      }
+    }
+  }
+}
--- a/website/src/sass/_custom.scss
+++ b/website/src/sass/_custom.scss
@ -0,0 +1,4 @@
+$body-bg: #000;
+$body-color: #fff;
+$font-family-sans-serif: Courier, "04b03", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$h2-font-size: 1.5rem;
--- a/website/src/sass/styles.scss
+++ b/website/src/sass/styles.scss
@ -0,0 +1,292 @@
+@import "custom";
+@import "~bootstrap/scss/bootstrap";
+@import "_choose-map";
+
+@font-face {
+    font-family: OpenSans;
+    src: url('../fonts/OpenSans-Regular.ttf');
+}
+
+@font-face {
+    font-family: '04b03';
+    font-style: normal;
+    font-weight: normal;
+    src: local('04b03'), url('../fonts/04B_03.woff') format('woff');
+}
+@font-face {
+    font-family: 'Karmatic Arcade';
+    src: url('../fonts/ka1.ttf') format('truetype');
+}
+@font-face {
+    font-family: 'VCR OSD Mono';
+    src: url('../fonts/VCR_OSD.ttf') format('truetype');
+}
+
+header {
+    background: #28A7FC url("../images/sky.jpg") no-repeat bottom;
+    background-size: 100%;
+    height: 37rem;
+    position: relative;
+    .section{
+        position: relative;
+    }
+
+    .over-image {
+        bottom: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 33rem;
+        .logo{
+            margin: 1rem 0;
+        }
+        .social-links {
+            text-align: right;
+            padding-top: 36px;
+            a {
+                margin-left: 20px;
+            }
+        }
+        .title {
+            padding: 5rem 0;
+            color: black;
+            h1 {
+                font-family: 'Karmatic Arcade';
+                font-size: 44px;
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .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;
+            }
+        }
+        .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% {
+        -webkit-transform: translateX(0px);
+    }
+    100% {
+        -webkit-transform: translateX(-400px);
+    }
+}
+.custom-link{
+    font-family: "VCR OSD Mono";
+    font-size: 18px;
+    letter-spacing: 5px;
+    color: white;
+    display: block;
+    margin: 0 auto;
+    width: 250px;
+    height: 64px;
+    background-image: url('../images/btn-bg.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -24px;
+    padding: 20px;
+    text-align: center;
+    z-index: 2;
+    transition: all .1s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
+    //transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
+    &:hover {
+        color: white;
+        transform: translateY(-6px);
+        text-decoration: none;
+    }
+    &.contribute {
+        background-image: url('../images/btn-bg-2.png');
+    }
+    &.play {
+        background-image: url('../images/btn-bg-3.png');
+    }
+    &.start {
+        /*padding-left: 55px;*/
+        &:before {
+            /*content: "";
+            position: absolute;
+            background: url('../images/playicon.png') no-repeat;
+            height: 20px;
+            width: 21px;
+            left: 36px;
+            top: 23px;*/
+        }
+    }
+    &.light{
+        background-image: url('../images/btn-bg-light.png');
+    }
+
+    /*&::after{
+        content: "";
+        position: absolute;
+        background-size: 60%;
+        width: 100%;
+        height: 100%;
+    }*/
+}
+
+img{
+    max-width: 100%;
+}
+
+.bg-white{
+    color: #000000;
+}
+.bg-gray{
+    background-color: #3b3b3b !important;
+}
+.credits {
+    text-align: center;
+    h2{
+        padding: 1rem 0;
+        margin: 0;
+        min-height: 6rem;
+        font-family: 'Karmatic Arcade';
+        font-size: 34px;
+        margin-bottom: 20px;
+    }
+    p {
+
+    }
+}
+.section{
+    padding-top: 2rem;
+    padding-bottom: 5rem;
+
+    &.used-by{
+        img{
+            padding: 0 1rem;
+        }
+    }
+
+    &.how-to{
+        padding: 100px 0;
+        background: url('../images/bg-briques.jpg') repeat-x bottom;
+        .image-item{
+            height: 100%;
+            margin: 0 auto;
+            padding: 20px;
+            /*transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
+            &:hover {
+                transform: scale(1.1);
+                .step-image {
+                    &:after {
+                        bottom: -10px;
+                        left: 10px;
+                    }
+                }
+            }
+            .step-image {
+                position: relative;
+                &:after {
+                    transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
+                    content:"";
+                    height: 100%;
+                    width: 100%;
+                    background: #dcdcdc;
+                    position: absolute;
+                    bottom: -25px;
+                    left: 25px;
+                    background: url('../images/bg-step.png') no-repeat bottom right;
+                }
+                img {
+                    width: 100%;
+                    z-index: 2;
+                    position: relative;
+                }
+            }*/
+            h2{
+                padding: 1rem 0;
+                margin: 0;
+                min-height: 6rem;
+                font-family: 'Karmatic Arcade';
+                font-size: 22px;
+                margin-bottom: 20px;
+            }
+        }
+    }
+
+    &.used-by{
+        img{
+
+        }
+    }
+
+    &.quotes{
+        h2{
+            font-family: 'Karmatic Arcade';
+            font-size: 34px;
+            margin: 40px 0;
+        }
+
+        .quote-item{
+            padding: 1rem 0;
+            text-align: center;
+            .quote{
+                font-size: 1.5rem;
+                margin-bottom: 0.5rem;
+                letter-spacing: 2px;
+            }
+            .author{
+                font-size: 1rem;
+                letter-spacing: 0px;
+            }
+        }
+    }
+}
+.footer {
+    padding: 2rem;
+    .floppy {
+        text-align: right;
+        img {
+            float: right;
+            margin-left: 20px;
+        }
+        div {
+            float: right;
+            margin-left: 15px;
+            font-size: 16px;
+            line-height: 16px;
+            padding-top: 10px;
+            span {
+                color: grey;
+                font-size: 13px;
+            }
+        }
+    }
+}
+
+.pixel-title{
+    font-family: "Karmatic Arcade" !important;
+}
+
+h3 {
+	font-weight: 800;
+}
--- a/website/webpack.config.js
+++ b/website/webpack.config.js
@ -0,0 +1,77 @@
+const path = require('path');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+    entry: './src/javascript/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bundle.js'
+    },
+    mode: 'development',
+    
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /(node_modules)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env']
+                    }
+                }
+            },
+            {
+                // Apply rule for .sass, .scss or .css files
+                test: /\.scss$/,
+
+                // Set loaders to transform files.
+                // Loaders are applying from right to left(!)
+                // The first loader will be applied after others
+                use: [
+                    {
+                        loader: MiniCssExtractPlugin.loader
+                    },
+                    'css-loader',
+                    {
+                        // Then we apply postCSS fixes like autoprefixer and minifying
+                        loader: "postcss-loader"
+                    },
+                    {
+                        // First we transform SASS to standard CSS
+                        loader: "sass-loader",
+                        options: {
+                            implementation: require("sass")
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg)$/,
+                use: [
+                    {
+                        loader: "file-loader",
+                        options: {
+                            outputPath: 'images'
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.(woff|woff2|ttf|otf|eot)$/,
+                use: [
+                    {
+                        loader: "file-loader",
+                        options: {
+                            outputPath: 'fonts'
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    
+    plugins: [
+        new MiniCssExtractPlugin()
+    ]
+};
--- a/website/yarn-error.log
+++ b/website/yarn-error.log
@ -0,0 +1,53 @@
+Arguments: 
+  /usr/bin/node /usr/share/yarn/bin/yarn.js install
+
+PATH: 
+  /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:./node_modules/.bin
+
+Yarn version: 
+  1.22.4
+
+Node version: 
+  12.17.0
+
+Platform: 
+  linux x64
+
+Trace: 
+  Error: EEXIST: file already exists, copyfile '/home/docker/.cache/yarn/v6/npm-vendors-1.0.4-e2b800a53e7a29b93506c3cf41100d16c4c4ad8e-integrity/node_modules/vendors/license' -> '/var/www/html/node_modules/vendors/license'
+
+npm manifest: 
+  {
+    "scripts": {
+      "build": "webpack --config webpack.config.js",
+      "watch": "webpack --config webpack.config.js --watch"
+    },
+    "devDependencies": {
+      "@babel/core": "^7.3.4",
+      "@babel/preset-env": "^7.3.4",
+      "autoprefixer": "^9.4.10",
+      "babel-loader": "^8.0.5",
+      "css-loader": "^2.1.1",
+      "cssnano": "^4.1.10",
+      "file-loader": "^3.0.1",
+      "mini-css-extract-plugin": "^0.5.0",
+      "postcss-loader": "^3.0.0",
+      "sass": "^1.26.7",
+      "sass-loader": "^7.1.0",
+      "webpack": "^4.29.6",
+      "webpack-cli": "^3.3.11"
+    },
+    "dependencies": {
+      "bootstrap": "^4.5.0",
+      "jquery": "^3.5.1",
+      "node-sass": "^4.14.1",
+      "popper.js": "^1.16.1",
+      "style-loader": "^1.2.1"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile