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