Merge pull request #139 from thecodingmachine/landingpage

first landingpage release
This commit is contained in:
David Négrier 2020-06-04 15:34:57 +02:00 committed by GitHub
commit b6d8b8fb49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
81 changed files with 8749 additions and 8 deletions

View File

@ -56,6 +56,29 @@ jobs:
tags: ${{ env.GITHUB_REF_SLUG }} tags: ${{ env.GITHUB_REF_SLUG }}
add_git_labels: true 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: deeploy:
needs: needs:
- build-front - build-front
@ -89,20 +112,20 @@ jobs:
uses: cypress-io/github-action@v1 uses: cypress-io/github-action@v1
if: ${{ env.GITHUB_REF_SLUG != 'master' }} if: ${{ env.GITHUB_REF_SLUG != 'master' }}
env: 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: 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 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 working-directory: e2e
- name: Run Cypress tests in prod - name: Run Cypress tests in prod
uses: cypress-io/github-action@v1 uses: cypress-io/github-action@v1
if: ${{ env.GITHUB_REF_SLUG == 'master' }} if: ${{ env.GITHUB_REF_SLUG == 'master' }}
env: env:
CYPRESS_BASE_URL: https://workadventu.re CYPRESS_BASE_URL: https://play.workadventu.re
with: with:
env: host=workadventu.re env: host=play.workadventu.re
spec: cypress/integration/spec.js spec: cypress/integration/spec.js
wait-on: https://workadventu.re wait-on: https://workadventu.re
working-directory: e2e working-directory: e2e

View File

@ -19,13 +19,24 @@
"front": { "front": {
"image": "thecodingmachine/workadventure-front:"+tag, "image": "thecodingmachine/workadventure-front:"+tag,
"host": { "host": {
"url": url, "url": "play."+url,
"https": "enable" "https": "enable"
}, },
"ports": [80], "ports": [80],
"env": { "env": {
"API_URL": "https://api."+url "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": { "config": {

View File

@ -25,7 +25,7 @@ services:
volumes: volumes:
- ./front:/usr/src/app - ./front:/usr/src/app
labels: 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" - "traefik.http.services.front.loadbalancer.server.port=8080"
back: back:
@ -39,3 +39,15 @@ services:
labels: labels:
- "traefik.http.routers.back.rule=Host(`api.workadventure.localhost`)" - "traefik.http.routers.back.rule=Host(`api.workadventure.localhost`)"
- "traefik.http.services.back.loadbalancer.server.port=8080" - "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"

View File

@ -7,7 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<base href="/"> <base href="/">
<link rel="stylesheet" href="/resources/style/style.css"> <link rel="stylesheet" href="/resources/style/style.css">
<title>Document</title> <title>WorkAdventure</title>
</head> </head>
<body id="body" style="margin: 0"> <body id="body" style="margin: 0">
<div id="webRtc" class="webrtc"> <div id="webRtc" class="webrtc">

5
website/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
/node_modules/
/dist/bundle.js
/dist/main.css
/dist/fonts
/dist/images

9
website/Dockerfile Normal file
View File

@ -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/

45
website/README.md Normal file
View File

@ -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.

156
website/dist/choose-map.html vendored Normal file
View File

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

174
website/dist/index.html vendored Normal file
View File

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

BIN
website/dist/static/images/Bitmap2.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

BIN
website/dist/static/images/Bitmap3.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

BIN
website/dist/static/images/Logo TCM.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
website/dist/static/images/amstrad.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
website/dist/static/images/atari.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
website/dist/static/images/bitmap.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

BIN
website/dist/static/images/check.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

BIN
website/dist/static/images/cloud.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

BIN
website/dist/static/images/facebook.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 639 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
website/dist/static/images/floppy.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
website/dist/static/images/interact.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 374 KiB

BIN
website/dist/static/images/linkedin.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 622 B

BIN
website/dist/static/images/logo.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 410 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

BIN
website/dist/static/images/maps/pub.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 291 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 729 KiB

BIN
website/dist/static/images/maps/tcm.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 307 KiB

BIN
website/dist/static/images/play.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
website/dist/static/images/step 1.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 166 KiB

BIN
website/dist/static/images/step 2.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
website/dist/static/images/step 3.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
website/dist/static/images/twitter.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 B

7771
website/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

28
website/package.json Normal file
View File

@ -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"
}
}

View File

@ -0,0 +1,6 @@
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')
]
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
website/src/fonts/ka1.ttf Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 945 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 511 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 754 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 502 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 438 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
website/src/images/cat.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

BIN
website/src/images/demo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 684 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

BIN
website/src/images/sky.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 648 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

View File

@ -0,0 +1 @@
import '../sass/styles.scss';

View File

@ -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;
}
}
}
}

View File

@ -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;

View File

@ -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;
}

77
website/webpack.config.js Normal file
View File

@ -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()
]
};

53
website/yarn-error.log Normal file
View File

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