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