first landingpage release
kevin
2
landing_page/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/node_modules/
|
||||||
|
/dist/
|
||||||
45
landing_page/README.md
Normal 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.
|
||||||
104
landing_page/index.html
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>WorkAdventu.re</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="dist/main.css">
|
||||||
|
<script src="dist/bundle.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container-fluid container-lg section">
|
||||||
|
<div class="over-image">
|
||||||
|
<div class="logo">
|
||||||
|
<img src="src/images/logo.png">
|
||||||
|
</div>
|
||||||
|
<div class="title text-center">
|
||||||
|
<h1>Discover a pixelated new world !</h1>
|
||||||
|
<h2>Start a casual conversation</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a class="custom-link start" href="#" title="START !">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="container-fluid container-lg section bg-white how-to">
|
||||||
|
<div class="row justify-content-md-center">
|
||||||
|
<div class="col-12 col-md-3 text-center my-3 my-md-0">
|
||||||
|
<div class="image-item">
|
||||||
|
<img src="src/images/bitmap.png">
|
||||||
|
<h2>Choose your map</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-3 text-center my-3 my-md-0">
|
||||||
|
<div class="image-item">
|
||||||
|
<img src="src/images/bitmap.png">
|
||||||
|
<h2>Select your character</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-3 text-center my-3 my-md-0">
|
||||||
|
<div class="image-item">
|
||||||
|
<img src="src/images/bitmap.png">
|
||||||
|
<h2>Let's go explore and talk !</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-md-center pt-5">
|
||||||
|
<div class="col col-lg-3">
|
||||||
|
<a class="custom-link light demo" href="#" title="DEMO !">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col col-lg-3">
|
||||||
|
<a class="custom-link start" href="#" title="START !">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid container-lg bg-gray section used-by">
|
||||||
|
<h2 class="text-center pb-4">Used by millions of people worldwilde and companies such as :</h2>
|
||||||
|
<div class="row justify-content-md-center align-items-center">
|
||||||
|
<div class="col col-md-auto">
|
||||||
|
<img src="src/images/atari.png">
|
||||||
|
</div>
|
||||||
|
<div class="col col-md-auto">
|
||||||
|
<img src="src/images/super-nintendo.png">
|
||||||
|
</div>
|
||||||
|
<div class="col col-md-auto">
|
||||||
|
<img src="src/images/amstrad.png">
|
||||||
|
</div>
|
||||||
|
<div class="col col-md-auto">
|
||||||
|
<img src="src/images/sinclair-2.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid container-lg section quotes">
|
||||||
|
<h2 class="text-center">People love WorkAdventure</h2>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-12 col-md-9">
|
||||||
|
<div class="quote-item">
|
||||||
|
<p class="quote">« Good job boys! You've made 32bit great again »</p>
|
||||||
|
<p class="author">Donald T. Whashington DC</p>
|
||||||
|
</div>
|
||||||
|
<div class="quote-item">
|
||||||
|
<p class="quote">« Your characters are so well dressed, who is the creator? »</p>
|
||||||
|
<p class="author">Anna W. New York City</p>
|
||||||
|
</div>
|
||||||
|
<div class="quote-item">
|
||||||
|
<p class="quote">« I hate you! This rocket app is more powerfull then my missiles »</p>
|
||||||
|
<p class="author">Kim J-U. Pyongyang</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
7528
landing_page/package-lock.json
generated
Normal file
28
landing_page/package.json
Normal 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.17.2",
|
||||||
|
"sass-loader": "^7.1.0",
|
||||||
|
"webpack": "^4.29.6",
|
||||||
|
"webpack-cli": "^3.2.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "^4.5.0",
|
||||||
|
"jquery": "^3.5.1",
|
||||||
|
"node-sass": "^4.14.1",
|
||||||
|
"popper.js": "^1.16.1",
|
||||||
|
"style-loader": "^1.2.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
landing_page/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [
|
||||||
|
require('autoprefixer'),
|
||||||
|
require('cssnano')
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
landing_page/src/fonts/04B_03.woff
Normal file
BIN
landing_page/src/fonts/OpenSans-Regular.ttf
Normal file
BIN
landing_page/src/images/Desktop HD.png
Normal file
|
After Width: | Height: | Size: 945 KiB |
BIN
landing_page/src/images/Group-4.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
landing_page/src/images/Group-5.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
landing_page/src/images/Rectangle.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
landing_page/src/images/amstrad.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
landing_page/src/images/atari.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
landing_page/src/images/bitmap.png
Normal file
|
After Width: | Height: | Size: 64 KiB |
BIN
landing_page/src/images/btn-bg-light.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
landing_page/src/images/btn-bg.png
Normal file
|
After Width: | Height: | Size: 1.3 KiB |
BIN
landing_page/src/images/cat.jpg
Normal file
|
After Width: | Height: | Size: 198 KiB |
BIN
landing_page/src/images/chosse-map.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
landing_page/src/images/demo.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
landing_page/src/images/header.png
Normal file
|
After Width: | Height: | Size: 269 KiB |
BIN
landing_page/src/images/lets-go-explore.png
Normal file
|
After Width: | Height: | Size: 4.5 KiB |
BIN
landing_page/src/images/logo.png
Normal file
|
After Width: | Height: | Size: 9.1 KiB |
BIN
landing_page/src/images/people-love.png
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
landing_page/src/images/pixelated.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
landing_page/src/images/rect_3.png
Normal file
|
After Width: | Height: | Size: 9.5 KiB |
BIN
landing_page/src/images/select-char.png
Normal file
|
After Width: | Height: | Size: 3.8 KiB |
BIN
landing_page/src/images/sinclair-2.png
Normal file
|
After Width: | Height: | Size: 9.9 KiB |
BIN
landing_page/src/images/sinclair.png
Normal file
|
After Width: | Height: | Size: 165 KiB |
BIN
landing_page/src/images/start.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
landing_page/src/images/super-nintendo.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
landing_page/src/images/used-by-millions.png
Normal file
|
After Width: | Height: | Size: 9.7 KiB |
4
landing_page/src/javascript/index.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import '../sass/styles.scss';
|
||||||
|
|
||||||
|
console.log('Webpack Boilerplate');
|
||||||
|
|
||||||
4
landing_page/src/sass/_custom.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
$body-bg: #000;
|
||||||
|
$body-color: #fff;
|
||||||
|
$font-family-sans-serif: "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;
|
||||||
131
landing_page/src/sass/styles.scss
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
@import "custom";
|
||||||
|
@import "~bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
|
@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');
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: url("../images/header.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
height: 28rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.over-image {
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
.logo{
|
||||||
|
margin: 1rem 0 0 5rem
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.custom-link{
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 250px;
|
||||||
|
height: 80px;
|
||||||
|
background-image: url('../images/btn-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&.light{
|
||||||
|
background-image: url('../images/btn-bg-light.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after{
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
background-size: 60%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.start::after{
|
||||||
|
background: url("../images/start.png") no-repeat center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.demo::after{
|
||||||
|
background: url("../images/demo.png") no-repeat center center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-white{
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
.bg-gray{
|
||||||
|
background-color: #3b3b3b !important;
|
||||||
|
}
|
||||||
|
.section{
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
|
||||||
|
&.used-by{
|
||||||
|
img{
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.how-to{
|
||||||
|
.image-item{
|
||||||
|
height: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #f9dcb0;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
h2{
|
||||||
|
padding: 1rem 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.used-by{
|
||||||
|
img{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.quotes{
|
||||||
|
h2{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quote-item{
|
||||||
|
padding: 1rem 0;
|
||||||
|
text-align: right;
|
||||||
|
.quote{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-right: 3rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
.author{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
77
landing_page/webpack.config.js
Normal 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()
|
||||||
|
]
|
||||||
|
};
|
||||||